Embedded Files
HTML (англ. HyperText Markup Language) — стандартна мова розмітки документів у Всесвітній павутині, яка обробляється спеціальними програмами (браузерами) і відображається у вигляді документа у зручній для людини формі. HTML не є мовою програмування, вона призначена лише для розмітки сторінки, надання певного вигляду її складовим.
Гіпертекст — електронний документ, який містить зв’язки з іншими електронними документами. Такі зв’язки називаються гіперпосиланнями. Будь-який документ мовою HTML є набором елементів, водночас початок і кінець кожного елемента позначається спеціальними позначками — тегами.
Теги — команди мови HTML. HTML-теги — це ключові слова або символи, які записуються в кутових дужках <>.Теги бувають двох видів: парні й непарні (їх ще називають поодинокими). Парні теги складаються з відкриваючого і закриваючого тегів. Теги нечутливі до регістра (тобто регістронезалежні), тому можуть бути написані як великими, так і малими літерами. Теги визначають, де починається й де закінчується HTML-елемент. Текстові документи, що містять розмітку мовою HTML (такі документи зазвичай мають розширення .html або .htm), опрацьову ються спеціальними застосунками, які відображають документ у його відформатованому вигляді. Такі застосунки називаються браузерами. За допомогою тегів браузер розпізнає структуру документа. За допомогою тегів браузер розпізнає структуру документа. Діставши цю інформацію, браузер використовує вбудовані в нього за замовчуванням правила про те, як відображати певний елемент сторінки.
Розглянемо структуру стандартної HTML-сторінки
Сторінка завжди починається з відкриваючого тега <html> та закінчується закриваючим тегом </html> і складається з двох обов’язкових блоків — голови (head) і тіла (body), які записуються послідовно. У блоці <head> </head> зберігається службова інформація, призначена допомогти браузеру в роботі з даними. Тут розташовані мета-теги, які використовуються для зберігання інформації, призначеної для пошукових систем, а саме: опис сайта, ключові слова тощо. Інформація є зазвичай невидимою для пересічного користувача, крім тега <title>, в якому відображається назва сторінки сайта. Увесь контент, який відображається на сторінці, розміщується між відкриваючим і закриваючим тегами <body>. Кожен абзац починається з тега <p> (від слова «параграф»).
Загальна структура HTML документа:
<html>
<head>
<title>Мій перший HTML-документ</title>
</head>
<body>
Хочу знати як створювати HTML-документ!
</body>
</html>
Основні теги для форматування тексту:
<p> текст </p> (парний тег) - Початок нового абзацу. Абзаци відокремлюються порожніми рядками.
<br> (непарний тег) - Перехід у новий рядок.
<hr> (непарний тег) - У рядку буде проведена горизонтальна лінія
<hr size ="7" width="100" color="#ff0000" align="center" > - горизонтальна лінія розмір 7 pс, шириною 100 pс, червоного кольору, вирівнювання за центром.
Колір тексту можна задати його назвою англійською мовою.
Теги для форматування тексту (парні):
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Заголовки від першого до шостого рівня
<h1> текст </h1> - Заголовок першого рівня
Заголовки та абзаци мають атрибут align, який визначає тип вирівнювання на сторінці та може набувати одне з чотирьох значень: left, right, center, justify.
<b> текст </b> - Напівжирний шрифт
<i> текст </i> - Курсивний шрифт
<u> текст </u> - Підкреслений шрифт
<marquee> текст </marque> - Рухомий текстовий рядок
Списки можуть бути впорядковані, тобто нумеровані, та невпорядковані — марковані й багаторівневі. Кожен елемент списку виокремлюється парним тегом <li>. Нумерований список позначаєтся парним тегом <ol>, маркований список —парним тегом <ul>.
Парний тег-контейнер для реалізації навігації по сайту — <nav>.
Для посилання на іншу сторінку використовують парний тег <a>...</a>. Тег має обов’язковий атрибут href, значенням якого є назва сторінки з розширенням .html.
Між відкриваючим і закриваючим тегами розміщується посилання на ресурс. Натиснувши на нього, користувач може переходити до потрібної сторінки:
<а href= "http://nvk12.rv.ua/"> Сайт нашої школи</а>
!!!Використовуйте веб-сайт для вивчення веб-технологій в Інтернеті, який містить навчальні посібники для вивчення HTML, CSS, JavaScript тощо:
Графіка на web-сторінках
Основними форматами рисунків, що відображаються програмами браузерів, є GIF і JPEG. Формат створення рисунків для Web-сторінок — це PNG. Для підготовки зображень можна використовувати будь-який графічний редактор, наприклад стандартний додаток Paint, що дозволяє зберігати файли у цих форматах.
Щоб вставити малюнок на веб-сторінку, необхідно скористатися непарним тегом <img>:
<img src=”назва файлу. розширення файлу”>
Тег img має містити обов'язковий атрибут src =, в якому в лапках вказується ім’я файлу з малюнком та розширення графічних файлів: .jpg, .jpеg, .gif, .png або .bmp. Малюнок і html-файл мають бути розміщені в одній папці. Наприклад: <img src = "my.jpg">. Якщо малюнок необхідно масштабувати, застосовують атрибути width=, height=, що задають ширину і висоту зображення в пікселах:
<img src = "clock.jpg" width="50" height="150" >
Для зображень можна вказувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання зображень задається атрибутом align тега <img> :
Для зображень можна вказувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання зображень задається атрибутом align тега <img> :
<img src = "clock.jpg" align="bottom">
Атрибут align визначає, як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.
Атрибут align визначає, як малюнок буде вирівнюватися по краю і спосіб обтікання текстом.
<img align="bottom"> - вирівнювання нижньої межі зображення по навколишньому тексту.
<img align="middle"> - вирівнювання середини зображення по базовій лінії текстового рядка.
<img align="top"> - верхня межа зображення вирівнюється за найвищим елементом текстового рядка.
<img align="left"> - вирівнює зображення по лівому краю вікна, а наступний текст розміщується праворуч від нього.
<img align="right "> - вирівнює зображення по правому краю вікна, а наступний текст розміщується ліворуч від нього.
Приклад коду сторінки та її відображення в браузері :
Приклад коду сторінки із гіперпосиланням, зображеннями та її відображення в браузері :
Практичне завдання
Практичне завдання
Увага! Під час роботи з комп'ютером дотримуйтеся вимог безпеки життєдіяльності та санітарно-гігієнічних норм.
На протязі кількох уроків ми з вами будемо створювати власний веб-сайт. На минулому уроці ви мали визначитися з темою вашого майбутнього сайту. Розпочинаємо створення сайту зі створення папки Site, а в ній створюємо файл index.html. Наповнити власний файл текстовою інформацією відповідно до обраної теми.
Завдання:
Додати на ваш сайт три зображення (відповідно до теми сайту). Пам'ятайте, що зображення мають міститися в папці Site.
Вставити гіперпосилання на відео (відповідно до теми сайту).
Проекспериментуйте з кольором фону сайту, кольором тексту, тегами форматування тексту та надайте своїй сторінці якнайліпшого вигляду.
Page updated
Google Sites
Report abuse