HTML

Тема уроку: “Вступ до HTML”

Мета уроку: розглянути призначення мови розмітки гіпертексту, поняття тегів, елементів, атрибутів та структуру HTML-документа.

Структура уроку

І. Організаційний етап.
ІІ. Актуалізація опорних знань.
ІІІ. Вивчення нового матеріалу.
ІV. Узагальнення і систематизація знань.
V. Підсумок уроку.
VI. Домашнє завдання.

Хід уроку

І. Організаційний етап.

Привітання, перевірка присутніх, мотивація навчальної діяльності.

ІІ. Актуалізація опорних знань.

Які мови програмування ви вивчали?
Назвіть їх характерні особливості?
( обговорення даних запитань)

ІІІ. Вивчення нового матеріалу.

1. Поняття про мову розмітки гіпертексту.

Основою всесвітнього «павутиння» World Wide Web є мова гіпертекстової розмітки HTML (HyperText Markup Language). Вона була створена вченими Європейського центру ядерних досліджень (CERN, м. Женева). Наприкінці 80-х років у CERN зайнялися проблемою збереження і відображення даних, які отримували колеги-фізики. Складність полягала у тому, що кожний фахівець, який приїздив до Центру, застосовував власні методи відображення інформаційних даних, і потрібно було терміново створити універсальну систему, яка б не залежала

від комп’ютерної платформи, яка використовується і була б досить простою.

Ідея розв’язання проблеми обміну документами між різними комп’ютерами полягала у тому, що документи мали бути розмічені за допомогою визначеного коду – HTML. Такі документи могли б читатися на будь-якому комп’ютері, на якому встановлена одна програма перегляду – броузер.

Згодом мова HTML стала основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із виділеними словами, посиланнями тощо.
HTML – набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп’ютера при доступі до них із використанням програми броузера.

Документи, підготовлені мовою HTML, називаються HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у броузер і виконаєте команду Вид – В виде HTML (в броузрі Internet Explorer). У вікні Блокнот ви побачите код поточного документа.

HTML-документ (або веб-сторінка) – це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить відомості для публікації в World Wide Web.

2. Створення веб-сторінок та сайтів.

Код HTML дуже компактний, і HTML-документи мають значно менший розмір, ніж документи, підготовлені в текстових редакторах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування повідомлень, що розповсюджується по Інтернету.
HTML-документи розміщаються в WWW не поодинці, а у виді так званих сайтів.

Сайт – це сукупність веб-сторінок (десятків, сотень, навіть тисяч), об’єднаних однією загальною темою і поміщених, як правило, на одному вузловому комп’ютері.

Далі ми розглянемо основи створення HTML-документів і сайтів із використанням найпростіших елементів мови розмітки. Складніші технології (стилі, програми-сценарії тощо) залишаться за рамками курсу шкільної інформатики.

3. Програми для створення HTML-файлів.

Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад, у додатках Блокнот чи WordPad, що входять до складу ОС Windows. Однак нині існують більш зручні та розвинуті програми підготовки HTML-документів, їх умовно можна розділити на візуальні редактори HTML і редактори HTML-текстів.

Працюючи у візуальному HTML-редакторі, користувач має справу з графічними образами елементів HTML, а не з кодом документа. Він може шляхом перетягування мишею і простими операціями в інтерфейсі розміщати на сторінці необхідні елементи. Завдяки цьому навіть користувачеві, що не знає мови HTML, під силу створювати прості Web-сторінки. До візуальних редакторів HTML належать програма FrontPage фірми Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold та ін.

Редактори власне HTML-текстів, серед яких найбільш відомі HomeSite і HotDog, мають основні можливості текстових редакторів (використання буфера обміну, засобів пошуку слів тощо). Але, на відміну від звичайних редакторів тексту, ці додатки надають у розпорядження розроблювача візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів дають можливість користувачеві швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і налагодження сторінки, не залишаючи вікна редактора.

При створенні сайта користувач звичайно сам визначає, працювати йому в візуальному чи в HTML-редакторі, вручну складаючи HTML-код. Але при цьому потрібно врахувати, що ефективно керувати HTML-документами і вирішувати питання Web-дизайну можна тільки використовуючи мову розмітки. Основи HTML-кодування ми і будемо вивчати в цій главі. Усі приклади, що наводяться, ви зможете дуже просто повторювати на своєму комп’ютері, набираючи код у редакторі Блокнот і переглядаючи створені документи за допомогою програми броузера.

4. Теги і структура HTML-документа.

Як виконується розмітка документа за допомогою HTML? Документ розбивається на елементи: заголовки, абзаци, малюнки, таблиці та інше. Для кожного елементу задається команда мови HTML, названа тегом (або дескриптором). Ця команда містить відомості про те, який вигляд повинен мати даний елемент на веб-сторінці, які зв’язки він має з іншими елементами або документами тощо.

У мові HTML є багато тегів, серед яких – теги створення заголовка документа, задання параметрів шрифту, креслення ліній, вставки гіперпосилань, вставки графічних елементів тощо. Тож веб-сторінка, окрім тексту і посилань, може вміщувати графіку, звуки, відео, тобто мати такий вигляд, який ви бачите на екрані комп’ютера.

Тег (у перекладі tag – покажчик, мітка) – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < >.

Найпростішим тегом є, наприклад, тег з ім’ям HTML. Тег визначає початок HTML-документа. Початковому тегу відповідає кінцевий тег із тим самим ім’ям, але з косою рискою «/». Отже, початок і кінець HTML-документа позначаються парою тегів:

<html>… </html>

Тут крапка означає, що між початковим і кінцевим тегами може розташовуватися текст і (або) інші теги. У даному разі крапкою позначений код усього документа.

HTML-документ умовно можна розбити на дві частини:

• головна частина документа, до якої вміщена назва документа, а також службові повідомлення для серверів, описи невеликих програм-сценаріїв. Ця частина

документа міститься між тегами <head>…</head> .

– тіло документа, що обмежене тегами <body>…</body> (іноді замість тегів можуть використовуватися теги фреймової структури, які тут не розглядаються).

4.1. Елементи HTML.

Елементи HTML – це пари тегів і символьні дані (текст або код), вміщені між ними.

Елемент називається звичайно за іменем тегу (без кутових дужок).

Усі елементи, передбачені в HTML, можна умовно поділити на кілька категорій:

– структурні – елементи, обов’язкові для документа, що відповідає стандарту HTML (наприклад, HTML, HEAD, BODY і TITLE);

– блокові – елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, Н1, Н2, Н3, Н4, Н5, Н6, Р, PRE); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа.

4.2. Атрибути тегів.

Часто теги, окрім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документа ввести додатковий елемент:

<body bgcolor=”yellow”>…</body>

то це означатиме, що документ має відображатися на жовтому тлі. Слово bgcolor є атрибутом, a yellow – значенням атрибута.

Атрибути – це компоненти тегу, що містять вказівки про те, як броузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари «ім’я атрибута – значення».

Значення атрибута записується після імені атрибута через знак рівності =. Всі значення атрибутів за умовчанням мають братися в подвійні (“) або одинарні (‘) лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, – броузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

4.3. Коментар.

Часто при створенні веб-сторінок виникає необхідність пояснити ту або іншу особливість HTML-коду або наміри розробника, але так, щоб ці пояснення не відображалися у вікні броузера. У таких випадках незамінним є коментар.

<!–Тут знаходиться коментар–>

ІV. Узагальнення і систематизація знань

1. Яке призначення мови розмітки HTML?
   2. Що таке HTML-документ?
   3. Що таке теги й елементи HTML?
   4. Що таке заголовок і тіло документа?
   5. Які категорії елементів HTML вам відомі?
   6. Яке призначення атрибутів і в якій частині коду вини розміщені?
   7. Як створити коментар?

1. Підсумок уроку

Практикум. Створення і зберігання HTML-документа.

Створіть Web-сторінку. Для цього відкрийте вікно редактора Блокнот і наберіть HTML-код. Користуйтесь прийомами роботи з буфером обміну, що полегшить вам введення тексту. Так теги, що закриваються, найпростіше отримувати з тегів, що відкриваються, шляхом копіювання їх із буфера і вставки додаткового символу /. Немає значення, у верхньому чи нижньому регістрі будуть набрані теги коду. Після набору і редагування коду збережіть документ у файл Приклад.htm. Завантажте отриманий файл у програму броузера, і ви отримаєте відображення Web-сторінки.