Теорія з сайту "Інформатика у школі": http://comscienceatschool.blogspot.com/p/19.html
Інтерактивні вправи: https://wordwall.net/
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Мова гіпертекстової розмітки. Текстові елементи веб-сторінки, теги та їх атрибути
Урок:
Мова гіпертекстової розмітки. Текстові елементи веб-сторінки, теги та їх атрибути
27.09.2023
Вміст уроку:
1
2
1
Мова гіпертекстової розмітки
В 1989 році Тім Бернерс-Лі запропонував упровадити гіпертекстову систему документів. Наприкінці 1991 року він опублікував у Інтернеті перший загальнодоступний опис мови розмітки HTML — «HTML теги». Він же створив і першу програму для перегляду гіпертекстових документів — браузер. Бернерс-Лі розглядав HTML як похідну мову від SGML, і в середині 1993 року Спеціальна Комісія Інтернет-розробок (IETF) офіційно визначила її такою, опублікувавши першу специфікацію HTML.
Наразі більшість веб-документів створюють за допомогою мови розмітки гіпертексту HTML (англійською Hyper Text Markup Language — мова розмітки гіпертексту). Призначення HTML — описати зовнішній вигляд документа за умови, що розміри екрану і масштаб подання тексту можуть змінюватися у процесі перегляду.
Розширення (тип) гіпертекстового документа, написаного мовою HTML, — htm або html.
Гіпертекстовий документ та його елементи
Гіпертекст - це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань.
Ці коди визначені у мові програмування HTML - мова гіпертекстової розмітки.
Веб-сторінка - це документ у форматі HTML. Процес вставляння в текст кодів HTML називають розміткою.
HTML-файл — це програма подання тексту, написана мовою HTML, яку опрацьовує браузер і подає результат у своєму програмному вікні.
Дескрипторами називають ті теги, які вказують на спосіб відтворення інформації програмою-браузером.
Теги — вказівки HTML — записують у «кутових» дужках, утворених символами «<» і «>» — «менше» й «більше».
Контейнери — це парні теги. Контейнери позначають початок і кінець області дії відповідної вказівки. Між цими тегами може міститися текст та інші теги. Тег, що закриває область дії, порівняно з тим, що відкриває, має додаткову косу риску одразу після «кутової» дужки.
Oпис властивостей контейнера записують у першому дескрипторі контейнера через пропуск після назви контейнера або з нового рядка. Нечислові значення параметрів прийнято записувати у лапках.
Для створення HTML-файлу можна використати найпримітивніший текстовий редактор. Наприклад, Блокнот (NotePad) для ОС Windows. Інколи, у середовищі цих редакторів здійснено виділення кольором дескрипторів. Наприклад, у середовищі Kate для ОС Linux Mint KDE. Хоча привабливішим видається використання спеціалізованих редакторів з поданням сторінки різними способами. Наприклад, редактора Kompozer чи Sublime Text.
Текстові елементи веб-сторінки, теги та їх атрибути
Структура HTML-документа (згідно зі стандартом HTML 4.01).
Оголошення типу документа (англійською Document type declaration, Doctype, DTD) — на початку документа тегом <!DOCTYPE>.
Заголовок документа, розташований у межах контейнера <head>, — містить опис загальних технічних відомостей або додаткову інформацію про документ, яку не відтворюють безпосередньо у браузері.
Тіло документа, розташоване у межах контейнера <body> або <frameset>, — містить основну інформацію про опис документа.
Структура HTML-документа
<!doctype html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body> Змістовна частина документа </body>
</html>
Тег html вказує браузеру, що він опрацьовує HTML-код. Все, що розташовано між парними тегами <html> і </html> є HTML-документом.
Атрибутом version можна задати версію HTML: <html version="4.01"> ;
Атрибутом lang можна задати основну мову документа, скажімо українську: <html lang="uk-ua"> .
Назва документа — текст між тегами <title> і </title>.
До тексту назви не застосовують форматування. Назва має бути короткою, інформативною і адекватно відображати зміст документа.
2
11 з 11 балів
Виконайте інтерактивні вправи.
Скріни виконаних вправ прикріпіть до цього завдання.
.png)
Рефлексія від 13 учнів
Сподобався:
0
Так: 13
Ні: 0
Зрозумілий:
0
Так: 13
Ні: 0
Потрібні роз'яснення:
0
Ні: 12
Так: 1