Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Структура веб-сторінок. Поняття про мову HTML.
Урок:
Структура веб-сторінок. Поняття про мову HTML.
05.12.2021
Вміст уроку:
1
2
3
4
1
Поняття про мову HTML.
Перегляньте відео в кінці теорії.
Мета: дати поняття про мову гіпертекстової розмітки, познайомити з тегами мови; розвивати творчі здібності учнів, комунікативну та інформаційну компетентності;
виховувати політехнічне мислення, інтерес до предмету.
Завдання уроку.
Поняття про мову гіпертекстової розмітки;
Структурні теги;
Оформлення тексту у Web-документі;
Теги форматування символів;
Теги управління зовнішнім виглядом HTML-документа.
Призначення мови й основні поняття.
Різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера браузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран.
Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.
Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.
Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-браузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора.
Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду «Файл-Сохранить». У вікні «Сохранение», що відкрилося, встановити значення «Все файли» в полі «Тип файла», а в імені обов’язково вказати розширення .htm.
Завдяки цьому файл буде відображатися у вигляді значка браузера, який встановлено на даному комп’ютері. Подвійне клацання на значку відкриває HTML-документ у браузері для перегляду. Наприклад, до поля імені файла можна ввести його назву Перша.htm, як показано на малюнку.
Теги. Структура HTML-документа.
Вище було сказано, що тег – це вказівка браузера на те , як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.
Теги бувають двох видів – одинарні й парні.
Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис
<br> Зошит означає, що слово „Зошит” відображається з нового рядка.
Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис <b> Синій олівець </b> означає, що текст „Синій олівець” відображається напівжирним шрифтом.
Розроблення Web-сторінки складається з двох етапів:
Створення макета;
Вставка тегів мови HTML.
При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою браузера.
Ознакою того, що текстовий файл є HTML-документом, служить парний тег <HTML> </HTML>. Він починає й завершує весь документ, тобто HTML-документ має вигляд:
<HTML>
текст документа
</HTML>
HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом <HEAD> … </HEAD>, а тіло – парним тегом <BODY> … </BODY>. Текст, що вводиться в заголовку вікна браузера, розміщається в парному тезі <TITLE> … </TITLE>. Структура HTML-документа має вигляд
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE>
</HEAD>
<BODY>
Тіло документа
</BODY>
</HTML>
У будь-якому місці HTML-документа можна помістити коментар. Це текст, який служить для пояснень розробника Web-сторінки та не відображається на екрані під час перегляду Web-сторінки у браузері. Текст коментаря поміщається в парний тег <!- … ->.
Форматування абзаців і символів.
Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:
<p> - початок абзацу (текст після тега починається з нового абзацу);
<br> - початок нового рядка (текст після тега починається з нового рядка);
<hr> - горизонтальна лінія (у рядку, де розміщено тег, відображається горизонтальна лінія).
При використанні тега <p> спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег <br>, то порожній рядок не вставляється.
Перед деякими фрагментами тексту можуть розміщатися заголовки. Вони виділяються більшим шрифтом. HTML має теги для завдання величини заголовків (шість рівнів). Найбільшим шрифтом виділяються заголовки першого рівня, а найдрібнішим – шостого.
Текст заголовка визначається парним тегом
<Hn> … </Hn>, де n – номер рівня.
Наприклад, фрагмент HTML-документа
<H1> Текст ……… </H1> відображається як заголовок першого рівня.
Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень:
CENTER – по центру;
LEFT – по лівому краю;
RIGHT – по правому краю.
Якщо в тексті HTML-документа існують додаткові пробіли між словами, то при виводі в браузері вони можуть вилучатися. Щоб зберегти пробіли при відображенні, треба вказати парний тег <pre> … </pre>. Він позначає попередньо відформатований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.
2
5 грудня 2021
Цітевич Марія Романівна
Цітевич Марія Романівна
Бажаю успіху!...
Інформатика
8 клас
3
Виконання завдання з застосуванням нового матеріалу.
Створити HTML-документ з назвою «Моя сторінка» та текстом «Ласкаво просимо на мій перший сайт».
Файл прикріпити тут!!!!
.png)
4
Домашнє завдання: Опрацювати § 4.1.
.png)
Рефлексія від 1 учня
Сподобався:
0
Так: 1
Ні: 0
Зрозумілий:
0
Так: 1
Ні: 0
Потрібні роз'яснення:
0
Ні: 1
Так: 0