Тема: теги мови розмітки гіпертексту: лінії, списки, таблиці, зображення, гіпер­посилання, впровад­жені об'єкти.

Мета: закріпити базові поняття мови розмітки гіпертексту, повторити структуру html-документу, та правила форматування символів і тексту, навчити викорис­товувати списки, таблиці, лінії, зображення, впро­вад­жені об'єкти, гіперпосилання в html-документі.

По завершенню вивчення теми учень

• пояснює: призначення мови розмітки гіпертексту;
• описує: етапи створення веб-сайтів;
• уміє:
  • конструювати сайти з використанням безкоштовних онлайн систем;
  • адмініструвати веб-сайт, опублікований на безкоштовному сервері.

Обладнання й матеріали: комп’ютери з встановленим ПЗ, проектор, роздатковий матеріал.

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

1. Організаційний момент
2. Актуалізація опорних знань
3. Мотивація навчальної діяльності
4. Вивчення нового матеріалу
5. Підсумок уроку
6. Домашнє завдання

Хід уроку

1. Організаційний момент
Привітання з класом, перевірка готовності до уроку. Перевірка присутності учнів.

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

1. Для чого призначено мову HTML?
2. Опишіть структуру HTML-документа.
3. Що таке тег? Що таке контейнер?
4. Які властивості має тіло документа? Як їх задають?
5. Якими тегами форматують символи?
6. Якими тегами вирівнюють текст?
7. Як задають властивості шрифту: гарнітуру, розмір і колір?
8. Як коментувати HTML-код?

3. Мотивація навчальної діяльності
Уміння створювати якісні й цікаві веб-сайти наразі є однією з найважливіших складових культури людини. Адже від того, як вона зможе представити у світовому інформаційному просторі себе, коло своїх професійних та особистих інтересів або ж реалізувати в Інтернеті той чи інший проект, пов'язаний із професійною діяльністю, багато в чому залежить успішність її кар'єри. При цьому важливим є наочність і легкість сприйняття інформації. Не завжди шаблони конструкторів сайтів можуть стати у нагоді. Уміння використати всі можливості мови розмітки гіпертексту може стати вирішальним при просуванні ідеї чи проекту.

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

Горизонтальні лінії в HTML-документі використовують одинарний тег <HR> з такими атрибутами:

• align — вирівнювання з такими значеннями: left, right або centre;
• color — колір лінії;
• noshade — відсутність тіні (для пласкої лінії);
• size — товщина лінії;
• width — ширина лінії у пікселях або відсотках від ширини вікна браузера.

• compact — показ списку компактно;
• type — задає тип маркера списка з такими значеннями:
  • circle — коло;
  • dict — круг;
  • square — квадрат.

Приклад використання маркованих списків з аналізом коду дає повне уявлення про використання маркованих спискыв. Дія атрибута compact залежить від браузера, тому тут її не розглянуто.

Нумерований список використовують для подання лінійно впорядкованої інформації. Наприклад, алгоритму. Нумерований список мовою HTML записують у контейнері <OL>…</OL>. Елементи нумерованого списку задаються так само, як і елементи маркованого списку. Нумерований список має такі атрибути:

• compact — показ списоку компактно;
• type — тип нумерації елементів з такими значеннями:
  • 1 — арабські цифри (як усталено);
  • I — великі римські цифри;
  • i — малі римські цифри;
  • А — великі літери латиниці;
  • a — малі літери латиниці;
• start — номер першого елемента списку.

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

Приклад використання нумерованих списків з аналізом коду дають повне уявлення про використання нумерованих списків.

Список означень використовують для подання означень понять (термінів). Cписок означень мовою HTML записують у контейнері <DL>…</DL>. Елемент списку означень складається з двох частин:

• у контейнері <DT>…</DT> — термін;
• у контейнері <DD>…</DD> — означення.

Див. приклади таблиць з рамками та оформленням.

Об'єднання комірок здійснюють за допомогою атрибутів контейнера <TD>…</TD>:

• colspan — кількість клітин рядка, об'єднаних в одну;
• rowspan — кількість клітин стовпчика, об'єднаних в одну.

У прикладі:

• colspan=3 означає, що комірку розтягнуто на З стовпчики;
• rowspan=2 означає, що комірка займає 2 рядки

Встановлення ширини таблиці здійснюють за допомогою атрибута width контейнера <TABLE>…</TABLE>. Ширину таблиці можна визначати як у пікселах, так і у відсотках від ширини вікна.

Встановлення ширини комірки здійснюють за допомогою атрибута width контейнера <TD>…</TD> або <TH>…</TH>. Ширину комірки можна визначати як у пікселах, так і у відсотках від ширини таблиці див. приклад, у якому задано ширину таблиці та деяких комірок.

Використання таблиць для розташування об'єктів на веб-сторінці
При відображенні веб-сторінки браузер розташовує елементи на екрані один за одним по вертикалі саме у тому порядку, в якому їх записано у коді HTML. Для іншого позиціювання елементів використовують таблицю без рамок, у комірки якої розташовують різні об'єкти — див. приклад розташування назв класів по діагоналі.

Використання таблиць для формування дизайну проілюструємо прикладом.

Створення тла веб-сторінки
Зазвичай для тла вибирають зображення невеликого розміру та неяскравих кольорів. Файл зображення роблять маленького розміру, що дає змогу швидко завантажувати сторінки. Текст на тлі має легко читатись. Для формування тла у вигляді малюнка у тегу <BODY> використовують атрибут background, значенням якого є URL-адреса файлу зображення.

Зображення невеликого розміру заповнює екран у вигляді мозаїки з однакових прямокутних плит. З огляду на це тло рідко роблять у вигляді фотографій, бо для них непросто підібрати відповідний колір тексту. Зображення для тла попередньо готують у графічних редакторах, щоб зробити його неяскравим і неконтрастним. Але найчастіше підбирають рисунок, який нагадує шпалери, бо текст на тлі має виділятись, легко читатись і привертати увагу відвідувача сайту.

Вставлення зображень у документ HTML здійснюють за допомогою одинарного тегу <IMG>. Він має обов'язковий атрибут src, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточної теки. При цьому «батьківську» теку позначають за допомогою двох крапок і слешу (../). Під час відкривання документа браузер завантажує малюнок і відображає його у тому місці документа, де розташовано тег <IMG>.

Графічний об'єкт зазвичай показують на веб-сторінці у своїх реальних розмірах. Якщо є потреба у масштабуванні, нові розміри можна задати за допомогою атрибутів wirth та height, значення яких визначають відповідно ширину та висоту зображення. При цьому бажано зберегти пропорції, інакше зображення буде розтягнуто (сплющено). При вказанні лише одного розміру зображення буде виведено без спотворення. Наприклад, тег

виворить на цю сторінку таке зображення.



Іноді користувачі відключають відображення графіки у вікні браузера, щоб прискорити завантаження документів. У цьому випадку бажано повідомити, що на ньому зображено. Для цього використовують альтернативний текст — докладний опис зображення, який задають як значення спеціального атрибута alt тега <IMG>. Якщо браузер не може показати зображення, він виводить цей текст.

Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами документа HTML потрібно звернутися.

За допомогою гіперпосилання користувач можуть переходити з однієї веб-сторінки на іншу або завантажувати файли. Для переходу за гіперпосиланням, користувачу достатньо клацнути на ньому лівою кнопкою миші.

Для створення гіперпосилання використовують контейнер <A>…</A>, у який можна вставити фрагмент тексту або графічний об'єкт. Текстове посилання зазвичай виділено синім кольором з підкресленням.

Значення атрибуту href тегу <A> — адреса URL, на яку вказує посилання:

• якщо веб-сторінку, на яку вказує посилання, розташовано на іншому веб-сайті, її адреса має бути повною, з назвою протоколу включно. Такі посилання називають зовнішніми.

• якщо гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях. Таке посилання називають внутрішнім.

Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують контейнер <A>…</A>, але замість атрибута href задають атрибут NAME, значення якого — назва якоря. Вона може складатися з літер латиниці й цифр, але не має містити символів пропуску. Якщо на сторінці є кілька міток, то всі вони мають бути з різними назвами. Для створення посилання на встановлений у документі якір потрібно у тезі посилання <A> після адреси URL документа через символ # вказати назву якоря. Символ # вказує на те, що після нього записано назву мітки, а не назву файлу. Посилання на мітку всередині поточного документа задають таким чином:

<А HREF="#назва_мітки">Текст або зображення</А>.

Саме так реалізовано посилання на різні частини цієї сторінки у формулюванні теми цього уроку. Переконайтеся у цьому, переклянувши код сторінки.

Якщо значенням атрибута href задати рядок тексту: "mailto:" + електронна адреса, то після вибору такого посилання можна надіслати електронний лист. У полі Кому вже буде записано адресу.

Карта посилань — це зображення з вказаними активними областями. Таку карту описують всередині контейнера <MAP>…</MAP> одинарними тегами <AREA> з такими атрибутами:

• href — URL адреса переходу за гіперпосиланням;
• shape — тип області;
• coords — координати активної області;
• title — текст підказки

— див. приклад, у якому показано, як задано координати області для різних типів області: rect, poly, circle, — відповідно прямокутник, багатокутник і круг. У цьому прикладі:

• прямокутник, заданий екранними координатами протилежних вершин, розташовано над покажчиком сторін світу;

• багатокутник, заданий екранними координатами послідовних вершин при обході по периметру, — трикутник з червоним контуром на карті;

• круг, заданий екранними координатами центра і радіусом, розташовано ліворуч униз від трикутника.

Межі круга і прямокутника не відображено. Їх можна виявити, рухаючи мишку і спостерігаючи за виглядом вказівника миші та появою підказки. Межу області буде видно у момент активації посилання.

Тег <IMG> має атрибут usemap, значення якого ("#karta" у прикладі) вказує на назву карти посилань, яку буде розташовано на тлі зображення.

Тег <MAP> має атрибут name — назва карти посилань ("karta" у прикладі).

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

Контейнер <AUDIO>…</AUDIO> стадарту HTML 5 використовують для вставлення звукового супроводу веб-сторінки при використанні таких версій браузерів: Internet Explorer 9.0+, Chrome 3.0+, Opera 10.5+, Safari 3.1+, Firefox 3.5+, Android 2.2+, iOS 3.0. Тег <AUDIO> має такі атрибути:

• autoplay — грати одразу після завантаження сторінки;
• controls — показати панель керування;
• loop — повторювати відтворення звуку з початку до його завершення;
• preload — завантаження файлу одночасно із завантаженням веб-сторінки;
• src — шлях до файлу аудіо.

Достатньо при потребі лише записати назви цих атрибутів у тезі <AUDIO>. На жаль, не всі браузери підтримують один і той самий формат аудіофайлів. Тому краще мати аудіозапис у кількох версіях, їхню адресу вказувати не як значення атрибута src тега <AUDIO>, а в контейнер <AUDIO>…</AUDIO> помістити кілька елементів <SOURCE>, атрибути src яких матимуть значення URL-адрес аудіозаписів у різних форматах — див. перший елемент прикладу.

Контейнер <VIDEO>…</VIDEO> стадарту HTML 5 використовують для вставлення відео супроводу веб-сторінки. Тег <VIDEO> має такі атрибути:

• autoplay — грати одразу після завантаження сторінки;
• controls — показати панель керування;
• height — висота області відтворення відео;
• loop — повторювати відтворення звуку з початку до його завершення;
• poster — адреса зображення на час, поки відео не відтворюється;
• preload — завантаження відео разом із завантаженням веб-сторінки;
• src — шлях до файлу відео;
• width — ширина області відтворення відео.

Достатньо при потребі лише записати назви цих атрибутів у тезі <VIDEO>. На жаль, не всі браузери підтримують один і той самий формат відеофайлів. Тому краще мати аудіозапис у кількох версіях, їхню адресу вказувати не як значення атрибута src тега <VIDEO>, а в контейнер <VIDEO>…</VIDEO> помістити кілька елементів <SOURCE>, атрибути src яких матимуть значення URL-адрес відеозаписів у різних форматах — див. другий елемент того самого прикладу, що і для аудіо.

Відео з You Tube можна вставити так: перебуваючи на відповідній сторінці You Tube, натиснути на кнопку Поділитися, а потім — на кнопку Вставка чи Згенерувати код, скопіювати фрагмент коду HTML і вставити його у код власної сторінки. Саме так отримано третій елемент вже розглянутого прикладу.

5. Підсумок уроку
Виставлення оцінок.

6. Домашнє завдання
Вивчити матеріал уроку і повторити матеріал попередніх уроків щодо мови розмітки гіпертексту HTML. Перевірити дію атрибутів контейнерів <AUDIO>…</AUDIO> і <VIDEO>…</VIDEO>.

Текст упорядкував Гнатюк Микола Миколайович, вчитель CЗШ № 217 Дарницького району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 03.11.2014 по 21.11.2014.