
- •Тема. Створення, публікація веб-ресурсів.
- •Поняття про мову html. Розмітка html-сторінки
- •Структура html-документа
- •Питання 2. Основні теги і атрибутиHtml.
- •Оформлення смислових частин сторінки абзацами.
- •Теги заголовків.
- •Використання списків в html.
- •Питанн 3. Теги для роботи з текстом, графічними об'єктами. Гіперпосилання
- •Робота з графікою в html.
Тема. Створення, публікація веб-ресурсів.
Мета: Ознайомити студентів з поняттям про мову HTML, навчити студентів використовувати основні теги і атрибути HTML.
План
Поняття про мову HTML. Розмітка HTML-сторінки
Основні теги і атрибутиHTML.
Теги для роботи з текстом, графічними об'єктами. Гіперпосилання
Поняття про мову html. Розмітка html-сторінки
Принципи та засади мови HTML.
HTML (від англ. HyperText Markup Language - «мова розмітки гіпертексту») - стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами і відображається у вигляді документа, у зручній для людини формі. Мова розмітки гіпертексту - призначений для написання гіпертекстових документів, що публікуються в World Wide Web.
Гіпертекстовий документ - це текстовий файл, що має спеціальні мітки, звані тегами, які згодом впізнаються браузером і використовуються їм для відображення вмісту файлу на екрані комп'ютера. За допомогою цих позначок можна виділяти заголовки документа, змінювати колір, розмір і накреслення літер, вставляти графічні зображення і таблиці. Але основною перевагою гіпертексту перед звичайним текстом є можливість додавання до вмісту документа гіперпосилань - спеціальних конструкцій мови HTML, які дозволяють клацанням миші перейти до перегляду іншого документа.
Мова HTML був розроблений британським вченим Тімом Бернерсом-Лі приблизно в 1989-1991 роках в стінах Європейської ради з ядерних досліджень у Женеві (Швейцарія). HTML створювався як мова для обміну науковою і технічною документацією, придатний для використання людьми, які не є фахівцями в області верстки. HTML успішно справлявся з проблемою складності SGML шляхом визначення невеликого набору структурних і семантичних елементів - дескрипторів. Дескриптори також часто називають «тегами». За допомогою HTML можна легко створити відносно простий, але красиво оформлений документ. Крім спрощення структури документа, в HTML внесена підтримка гіпертексту. Мультимедійні можливості були додані пізніше.
Спочатку мова HTML був задуманий і створений як засіб структурування та форматування документів без їхньої прив'язки до засобів відтворення (відображення). В ідеалі, текст з розміткою HTML повинен був без стилістичних та структурних спотворень відтворюватися на обладнанні з різною технічною оснащеністю (кольоровий екран сучасного комп'ютера, монохромний екран органайзера, обмежений за розмірами екран мобільного телефону або пристрою та програми голосового відтворення текстів). Однак сучасне застосування HTML дуже далеко від його початкової задачі. Наприклад, тег <TABLE>, кілька разів використаний для форматування сторінки, яку ви зараз читаєте, призначений для створення в документах самих звичайних таблиць, але, як можна переконатися, тут немає жодної таблиці. З плином часу, основна ідея платформонезавісімості мови HTML була віддана в своєрідну жертву сучасним потребам у мультимедійному і графічному оформленні.
Співтовариством WHATWG (англ. Web Hypertext Application Technology Working Group), починаючи з 2004 року, розробляється специфікація Web Applications 1.0, часто неофіційно звана «HTML 5», яка розширює HTML (втім, маючи і сумісний з XHTML 1.0 XML-синтаксис) для кращого подання семантики різних типових сторінок, наприклад форумів, сайтів аукціонів, пошукових систем, онлайн-магазинів і т. д., які не дуже вдало вписуються в модель XHTML 2.
HTML-редактори автоматизують створення гіпертекстових документів, позбавляють від рутинної роботи. Проте їхні можливості обмежені, вони сильно збільшують розмір одержуваного файлу і не завжди отриманий з їх допомогою результат відповідає очікуванням розробника. Але, безумовно, цей спосіб незамінний для новачків у справі підготовки гіпертекстових документів.
Для того щоб вивчити HTML, окрім читання цього підручника нам потрібно мати:
Комп’ютер
Браузер
Текстовий редактор
Структура HTML-документа
HTML - тегів мова розмітки документів. Будь-який документ на мові HTML являє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками - тегами. Саме теги мови HTML визначають, у якому вигляді буде представлений текст, які його компоненти будуть виконувати роль гіпертекстових посилань, які графічні або мультимедійні об'єкти повинні бути включені в документ. Графічна та звукова інформація, включається в HTML-документ, зберігається в окремих файлах. Елементи можуть бути порожніми, тобто не містять ніякого тексту та інших даних (наприклад, тег перекладу рядка <br>). У цьому випадку зазвичай не вказується закриває тег. Крім того, елементи можуть мати атрибути, що визначають будь-які їхні властивості (наприклад, розмір шрифту для елемента font). Атрибути вказуються у відкриваючому тезі.
Для файлів, що містять HTML-документи, прийняті розширення. Htm або. Html.
Прописні і малі літери при записі тегів не розрізняються. У більшості випадків теги використовуються парами. Пара складається з відкриваючого (Start tag) і закриває (end tag) тегів. Синтаксис відкриваючого тега:
<Імя_тега [атрибути]>
Прямі дужки, які використовуються в описі синтаксису, означають, що даний елемент може бути відсутньою. Ім'я закриває тега відрізняється від імені відкриваючого лише тим, що перед ним ставиться похила риса:
</Імя_тега>
Дія будь-якого парного тега починається з того місця, де зустрівся що відкриває тег і закінчується при зустрічі відповідного закриває тега. Часто пару, що складається з відкриваючого і закриває тегів, називають контейнером, а частина тексту, облямовану що відкриває і закриває тегом, - елементом.
Регістр, в якому набрано ім'я елемента і імена атрибутів, в HTML значення не має (на відміну від XHTML). Елементи можуть бути вкладеними. Наприклад, наступний код:
Крім елементів, в HTML-документах є і сутності (англ. entities) - «спеціальні символи». Сутності починаються з символу амперсанда і мають вигляд & ім'я; або & # NNNN;, де NNNN - код символу в Юникоде в десятковій системі числення.
Послідовність |
Символ |
< |
символ < |
> |
символ > |
& |
символ & |
" |
символ " (лапки) |
|
нерозривний пробіл |