Лабораторна робота №10
Тема: Основи роботи з HTML.
Ціль: вивчити структуру HTML документа. Навчитися використовувати графіку усередині документів.
Теоретичні зведення:
Hyper Text Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть проглядатися різними типами WEB-броузеров. Коли документ створений з використанням HTML, WEB-броузер може інтерпретувати HTML для виділення різних елементів документа й первинної їхньої обробки. Використання HTML дозволяє форматувати документи для їхнього подання з використанням шрифтів, ліній й інших графічних елементів на будь-якій системі, їх що переглядає.
Більшість документів мають стандартні елементи, такі, як заголовок, параграфи або списки. Використовуючи теги HTML ви можете позначати дані елементи, забезпечуючи WEB-броузеры мінімальною інформацією для відображення даних елементів, зберігаючи в цілому загальну структуру й інформаційну повноту документів. Всі що необхідно, щоб прочитати HTML-документ - це WEB-броузер, що інтерпретує теги HTML і відтворює на екрані документ у вигляді, що йому надає автор.
HTML-теги можуть бути умовно розділені на дві категорії:
теги, що визначають, як буде відображатися WEB-броузером тіло документа в цілому
теги, що описують загальні властивості документа, такі як заголовок або автор документа
Основна перевага HTML полягає в тім, що ваш документ може бути переглянутий на WEB-броузерах різних типів і на різних платформах.
HTML-документи можуть бути створені за допомогою будь-якого текстового редактора або спеціалізованих HTML-редакторів і конвертерів.
Всі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершальний тег. Для приклада приведемо теги заголовка, що визначають текст, що перебуває усередині стартового й завершального тегу й заголовок, що описує, документа:
<TITLE> Заголовок документа </TITLE>
Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом усередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-браузеру про використання формату заголовка, а тег </TITLE> - про завершення тексту заголовка.
Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тегу, але його використання надає вихідному тексту документа поліпшену читаність і структурируемость.
HTML не реагує на регістр символів, що описують тег.
Структура HTML документа:
<HTML> <HEAD> <TITLE> Моя сторінка </TITLE></HEAD> <BODY> ... </BODY> </HTML> |
<HTML> Коли WEB-браузер одержує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, що зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-браузеру, що ваш документ написаний з використанням HTML.
<HEAD> Тег заголовної частини документа повинен бути використаний відразу після тегу <HTML> і більш ніде в тілі документа. Даний тег представляє із себе загальний опис документа. Уникайте розміщати який-небудь текст усередині тегу <HEAD>. Стартовий тег <HEAD> міститься безпосередньо перед тегом <TITLE> й іншими тегами, що описують документ, а завершальний тег </HEAD> розміщається відразу після закінчення опису документа. Наприклад:
<TITLE> Більшість WEB-браузерів відображають уміст тегу <TITLE> у заголовку вікна, що містить документ й у файлі закладок, якщо він підтримується WEB-браузером. Заголовок, обмежений тегами <TITLE> й </TITLE>, розміщається усередині <HEAD>-тегів, як показано вище. Заголовок документа не з'являється при відображенні самого документа у вікні.
Коментарі
Як будь-яка мова, HTML дозволяє вставляти в тіло документа коментарі, які зберігаються при передачі документа по мережі, але не відображаються браузером. Коментарі можуть зустрічатися в документі де завгодно й у будь-якій кількості. Синтаксис коментарю:
<!-і Це коментар -і>
<BODY> Тіло документа повинне перебувати між тегами <BODY> й </BODY>. Це та частина документа, що відображається як текстова й графічна (значеннєва) інформація вашого документа. Тег має ряд необов'язкових атрибутів:
Bgcolor Установлює кольори тла документа, використовуючи значення кольорів у вигляді RRGGBB - приклад: FF0000 - червоні кольори
<body bgcolor= "yellow">
background Указує на url-адресу зображення - тла документа
text Установлює кольори тексту документа, використовуючи значення кольорів у вигляді RRGGBB - приклад: 000000 - чорні кольори, або використовуючи константи кольорів
link Установлює кольори гіперпосилань, використовуючи значення кольорів у вигляді RRGGBB
vlink Установлює кольори гіперпосилань на які ви вже побували.
аlink Установлює кольори гіперпосилань при натисканні.
bgproperties=fixed Фонове зображення прокручиваться не буде. Тобто текст буде рухатися при натисканні PageDown, а тло - немає. Даний параметр підтримується тільки Internet Explorer
Ці параметри можна поєднувати
<BODY bgcolor="yellow" text="green" link="red" alink="blue">
Теги форматування документа
1. Теги логічного форматування тексту:
2. Теги фізичного форматування тексту:
Тег <B> й обов'язковий парний йому </B> - жирний текст
Атрибути
title - показує текст у вигляді спливаючої підказки
Тег <i> й обов'язковий парний йому </i> - похилий текст
Тег <u> й обов'язковий парний йому </u> - підкреслений текст
Тег <tt> й обов'язковий парний йому </tt> - стиль друкарської машинки
Тег <strike> й обов'язковий парний йому </strike> - текст перекреслений лінією
Тег <sub> й обов'язковий парний йому </sub> - приспускає текст
Тег <sup> й обов'язковий парний йому </sup> - піднімає текст
Тег <blink> й обов'язковий парний йому </blink> - піднімає текст
Тег <font> й обов'язковий парний йому </font> - визначає виведений шрифт
Атрибути
size - розмір тексту в межах від 1 до 7, де 1-самий дрібний шрифт. За замовчуванням 3.
color - установлює кольори тексту, використовуючи значення кольорів у вигляді RRGGBB, або
використовує константи кольорів.
face - шрифт тексту.
Форматування html-документа
Тег <P> і необов'язковий парний йому </P> - створює новий параграф. Два або більше теги <P>, що йдуть підряд, заміняються одним
Атрибути
align - вирівнює параграф щодо однієї зі сторін документа.
-
left
вирівнювання по лівому краї. За замовчуванням
right
вирівнювання по правому краї
center
вирівнювання по центрі
justify
вирівнювання по ширині
title - Спливаюча підказка
<p align="right">
Тег <BR> не вимагає парного закриваючого тегу - вставляє переклад рядка
Тег <NOBR> й обов'язковий парний закриваючий тег </NOBR> - забороняє переклад рядка.
Текст, укладений між тегами й , буде гарантовано розташовуватися в одному рядку без переносу на іншу. Довгий рядок не вміститься на екрані, і для її перегляду прийде використати горизонтальну смугу прокручування
Тег <HR>. Закриваючий тег не потрібно - горизонтальна лінія. Перед і після лінії міститься порожній рядок
Атрибути:
size - установлює висоту(товщину) лінії
width - установлює ширину лінії в пікселях або відсотках
noshade - створює лінію без тіні
color - задає лінії певні кольори
Тег <PRE> й обов'язковий парний йому </PRE> - обрамляє попередньо відформатований текст. Виходить як би текстова вставка в html
Тег <ADDRESS> й обов'язковий парний йому </ADDRESS> - застосовується для ідентифікації автора документа й вказівки адреси автора. Сюди ж звичайно містяться й відомості про авторські права, а також дата створення й останньої модифікації документа. Тег застосовується звичайно спочатку або наприкінці документа. Текст, укладений між тегами <address></address> звичайно відображається курсивом
Спеціальні символи
-
Ім'я
Код
Вид
Опис
<
<
<
знак 'менше'
>
>
>
знак 'більше'
нерозривний пробіл
©
©
©
знак copyright
Графіка в HTML документах
Тег <IMG SRC=”ім'я файлу”> - служить для впровадження графіки на сторінки.
Атрибути
src - обов'язковий атрибут, що вказує URL малюнка
align - вирівнює зображення до однієї зі сторін документа
-
left
Вирівнювання по лівому краї
right
Вирівнювання по правому краї
center
Вирівнювання по центрі
bottom
Вирівнювання по нижньому краї
top
Вирівнювання по верхньому краї
middle
Вирівнювання по середині
alt - виводить текст до картинки. Корисно, якщо браузер не відображає графікові на сторінці
border - установлює товщину рамки навколо зображення в пикселах. За замовчуванням рамка не використається. При використанні зображення як гіперпосилання рекомендується встановити BORDER=0, щоб придушити колірну окантовку, що з'явиться навколо зображення
ismap - повідомляє, що зображення є картою-зображенням на сервері
height - висота картинки в пікселях або відсотках. Завжди бажано явно встановлювати цей параметр для прискорення завантаження сторінки браузером
hspace - визначає розмір вільного місця в пикселах ліворуч і праворуч від зображення, поліпшує зовнішній вигляд сторінки, відокремлюючи зображення від тексту
usemap - повідомляє, що зображення є картою-зображенням на стороні клієнта
vspace - визначає розмір вільного місця в пикселах зверху й знизу від зображення, поліпшує зовнішній вигляд сторінки, відокремлюючи зображення від тексту
width - ширина картинки в пикселах або відсотках. Завжди бажано явно встановлювати цей параметр для прискорення завантаження сторінки браузером
<img src="../cat.jpg" alt="Відпочиваємо!" vspace=10>
Тег <MARQUEE> й обов'язковий закриваючий </MARQUEE> - змушує текст прокручуватися, або переміщатися зі сторони убік
Атрибути
BEHAVIOR=ALTERNATE | SCROLL | SLIDE - визначає вид скролінга
-
ALTERNATE
Коливальні рухи ліворуч і праворуч
SCROLL
Переміщення тексту в напрямку, зазначеному в DIRECTION. Досягши краю екрана, напис з'являється знову із протилежної сторони
SLIDE
Схоже з SCROLL, але текст переміщається тільки один раз і зупиняється
DIRECTION=DOWN | LEFT | RIGHT | UP - визначає напрямок скролінга
-
DOWN
Рух униз
LEFT
Рух праворуч ліворуч. За замовчуванням
RIGHT
Рух ліворуч праворуч
UP
Рух нагору
<MARQUEE BEHAVIOR=ALTERNATE DIRECTION="right">ваш текст </MARQUEE>
Завдання:
Створити HTML документ використовуючи теоретичні данні.
Контрольні питання:
Що таке HTML
Структура HTML документа:
Теги форматування документа
Форматування HTML-документа
Графіка в HTML документах
Спеціальні символи