Створення web-документів мовою HTML
Автор: Aleksandr100 • Апрель 24, 2022 • Статья • 1,531 Слов (7 Страниц) • 147 Просмотры
ЦИКЛ УРОКІВ
з основ інформатики
Тема «Створення web-документів мовою HTML»
Уроки № 1 – 2
Тема уроку: „Поняття мови розмітки гіпертексту. Структура HTML документу.”
Мета:
- ознайомити учнів з поняттям мови розмітки гіпертексту, структурою HTML документу;
- актуалізувати особистісний інтерес учнів до вивчення нової теми;
- створити умови для розвитку в школярів критичного мислення;
- виховувати в учнів відповідальність за справу, яку вони виконують.
Тип уроку: урок засвоєння нових знань
Хід уроку
1. Організаційний момент.
2. Актуалізація досвіду й опорних знань учнів
- Що таке World Wide Web?
(глобальна система поширення гіпертекстової інформації, яка використовує для транспортування канали мережі Internet)
- Що таке гіпертекст?
(спосіб організації тексту, графіки та інших даних, у якому елементи пов’язані між собою)
- Що таке web-документ?
(текст, написаний спеціальною мовою, який призначений для перегляду електронної інформації на екрані комп’ютера )
- Броузер це - …
(програма, яка призначена для перегляду web-документів)
- Web-сайт це -…
(декілька web-документів на одну тему, пов’язані гіпертекстом)
3. Мотивація навчальної діяльності учнів.
Основою всесвітньої павутини є мова гіпертекстової розмітки HTML (Hyper Text Markup Language). Вона була створена вченими Європейського центру ядерних досліджень (CERN, м.Женева). Наприкінці 80 років у CERN зайнялися проблемою збереження даних, які отримували від колег-фізиків. Складність полягала у тому, що кожен фахівець, який приїздив до центру, застосовував власні методи відображення інформації, і потрібно було терміново створити універсальну систему, яка б не залежала від використовуваної комп’ютерної платформи і була б досить простою. Згодом мова HTML стала основною при створенні документів, що розміщуються у WWW.
Завдяки мові розмітки користувач Web можна у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник.
4. Оголошення теми, мети, завдання уроку, сприйняття і первинне усвідомлення учнями нового матеріалу
Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад у «Блокнот». Крім того створювати web-документи можна за допомогою візуальних HTML-редакторів, в яких користувач має справу з графічними образами елементів HTML, а не з кодом. При створенні сайта користувач звичайно сам визначає, працювати йому у візуальному редакторі, чи вручну. Але при цьому потрібно враховувати , що ефективно керувати HTML документами і вирішувати питання web-дизайну можна тільки використовуючи мову розмітки.
1 | [pic 1] | Яким же чином відбувається розмітка за допомогою HTML? Для кожного елементу web-документу задається команда HTML, яка називається тегом. Розглянемо структуру найпростішого web-документу. <HTML> - початок HTML документу <HEAD> - заголовна частина документу <TITLE> Заголовок </TITLE> - власне заголовок <BODY> - початок уведення змісту сторінки Приклад HTML-документу </BODY> </HTML> Необхідно звернути увагу на те, що кожен з тегів має закриваючий тег. Такі теги називають парні. В противному випадку - одинарні. Щоб преглянути створений документ у броузері, необхідно його зберегти з розширенням *.html, або *.htm. |
2 | [pic 2] | Часто теги містять додаткові елементи, які називаються атрибутами (параметрами). Наприклад, тег <BODY> має наступні атрибути: <BODY [pic 3] text=”green”>, де bgcolor – колір фону сторінки, background – фонове зображення, text – колір тексту. Зауваження. Якщо графічний файл та web-документ знаходяться у різних каталогах то слід писати повну адресу до графічного файлу (D:\Foto\picture.jpg). В противному випадку – тільки назву та розширення файлу (picture.jpg). |
3 | [pic 4] | При створенні web-сторінок необхідно прагнути до лаконічних текстів, які чітко оформлені, виділяти головне, розділяти на абзаци. Для створення абзаців використовують декілька тегів: <P>Текст</P> - з пропуском рядка <BR> Текст </BR> - без пропуску рядка <HR> Текст </HR>- між абзацами буде проведена горизонтальна лінія |
4 | [pic 5] | За замовчуванням абзаци будуть вирівняні по лівому краю. Щоб змінити вирівнювання необхідно для тегів установки абзаців використати атрибут Аlign. [pic 6] |
5 | [pic 7] | Щоб задати певне зображення шрифту використовують наступні теги: <B>Текст</B> - напівжирний текст <І>Текст</I> - курсивний текст <U>Текст</U> - підкреслений текст <SUB> Текст</SUB> - верхній індекс <SUP> Текст</SUP> - нижній індекс Дані теги можна вкладати один в одного для отримання наприклад напівжирного та курсивного тексту (<B><I>Текст</I></B>) |
6 | [pic 8] | Параметри шрифту можна задати тегом <FONT> <FONT Face=”Arial” Size=3 Сolor=”red”> Текст </FONT>, де Face – тип шрифта, Size – розмір шрифта, Color – колір шрифта. |
...