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

 

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

 

 

Основою всесвітнього «павутиння» 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.

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

 

Далі ми розглянемо основи створення 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-кодування ми і будемо вивчати в цій главі. Усі приклади, що наводяться, ви зможете дуже просто повторювати на своєму комп'ютері, набираючи код у редакторі Блокнот і переглядаючи створені документи за допомогою програми броузера.

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

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

 

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