Hyper Text Markup Language (HTML) є стандартною
мовою, призначеною для створення гіпертекстових документів в середовищі WEB. HTML- документи можуть бути видимими різними типами WEB-браузеров. Коли документ створений з використанням
HTML, WEB-браузер може інтерпретувати HTML для виділення
різних елементів документа і первинної їх обробки. Використання HTML дозволяє
форматувати документи для їх уявлення з використанням шрифтів, ліній і інших
графічних елементів на будь-якій системі, що їх переглядає. Основна перевага HTML полягає в тому, що ваш документ може бути
проглянутий на WEB - браузерах різних типів і
на різних платформах.
Всі теги HTML починаються з "<" (лівої кутової
дужки) і закінчуються символом ">" (правої кутової дужки). Як
правило, існує стартовий тег і завершуючий тег. Для прикладу приведемо теги
заголовка, що визначають текст, що знаходиться усередині стартового і завершуючого
тега і заголовок документа:
<TITLE> Заголовок документа </TITLE>
Завершуючий тег виглядає
також, як стартовий, і відрізняється від нього прямим слешем перед текстом
усередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-браузеру про
використання формату заголовка, а тег </TITLE> - про завершення тексту
заголовка.
Структура документа HTML
Коли WEB-броузер отримує документ, він визначає, як документ
повинен бути інтерпретований. Найперший тег, який зустрічається в документі,
повинен бути тегом <HTML>. Даний тег
повідомляє WEB-броузеру, що ваш документ
написаний з використанням HTML. Мінімальний HTML-документ виглядатиме так:
<HTML> ...тіло документа... </HTML>
Заголовна частина
документа <HEAD>
Тег заголовної частини
документа повинен бути використаний відразу після тега <HTML> і більш ніде в тілі документа. Даний тег вдає
із себе загальний опис документа. Уникайте розміщувати який-небудь текст
усередині тега <HEAD>. Стартовий тег <HEAD> поміщається безпосередньо перед тегом <TITLE> і іншими тегами, що описують документ, а
завершуючий тег </HEAD> розміщується відразу після закінчення опису
документа. Наприклад:
<HTML>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
<HEAD>
<TITLE> Список співробітників </TITLE>
</HEAD>
Тіло документа <BODY>
Тіло документа повинне
знаходитися між тегами <BODY>
і </BODY>. Це та частина документа, яка відображається як текстова і
графічна (смислова) інформація вашого документа.
Тег абзацу <P>
У відмінності від
більшості текстових процесорів, в HTML-документе зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу
може знаходитися в будь-якому місці початкового тексту документа (для зручності
його читаності). Проте
броузер
розділяє абзаци тільки за наявності тега <P>.
Якщо ви не розділите абзаци тегом
<P>, ваш документ виглядатиме як один великий абзац.
Додаткові параметри тега
<P>:
<P ALIGN=left|center|right>
дозволяють вирівнювати
абзац по лівому краю, центру і правому краю відповідно.
Деякі теги форматування
тексту
HTML дозволяє використовувати різні стилі шрифтів для
виділення текстовій інформації у ваших документах. Ось короткий список стилів,
підтримуваних більшістю
броузеров:
· bold (жирний)
· italic (похилий)
· mono spaced (type writer - з використанням
фіксованих шрифтів)
· underline (підкреслений)
· strike (закреслений)
Ви можете комбінувати
різні види стилів, наприклад жирний і похилий.
Таблиця 4.1 – Теги стилю
тексту
Стиль
|
Елемент або тег
|
Результат
|
Bold
|
<B> Цей текст жирний
</B>
|
Цей текст жирний
|
Italic
|
<I> Цей текст похилий
</I>
|
Цей текст похилий
|
Mono spaced
|
<TT> Цей текст з непроп. шрифтом </TT>
|
Цей текст з непроп.
шрифтом
|
Underline
|
<U> Цей текст
підкреслений </U>
|
Цей текст підкреслений
|
STRIKE
|
<S> Цей текст
закреслений </S>
|
Комбінування стилів
дозволяє вам відображати в одному рядку декілька елементів різними стилями,
наприклад:
<b>Життя</b>
- <i>це <b>пісня!</b></i>
Життя - це пісня!
Додаткові стилі:
· big (великий)
· small (маленький)
· sub (підрядковий переклад)
· sup (надстрочник)
Таблиця
4.2 – Теги додаткових стилів тексту
Стиль
|
Елемент або тег
|
Результат
|
Big
|
Цей текст <BIG> великий
</BIG>
|
Цей текст великий
|
Small
|
Цей текст <SMALL> маленький
</SMALL>
|
Цей текст маленький
|
Sub
|
Цей текст <SUB> підрядковий
переклад </SUB>
|
Цей текст підрядковий переклад
|
Sup
|
Цей текст <SUP> надстрочник </SUP>
|
Цей текст надстрочник
|
Приклад використання цих тегов:
C<SUB><SMALL>2</SMALL></SUB>H<SUB><SMALL>5</SMALL></SUB>OH
C2H5OH
C2H5OH
Тег <FONT> дозволяє довільно визначати розмір шрифту, колір
шрифту і вид (family) шрифту. Змінити розмір
шрифту можна завданням атрибуту SIZE
таким чином
<FONT SIZE="n">
або <FONT SIZE="+n">, <FONT SIZE="-n">
Шрифт може мати розмір від
1 до 7. Ви можете прямо вказати розмір шрифту цифрою, або вказати зсув щодо
базового значення (за умовчанням - 3) в позитивну або негативну сторону. Базове
значення можна змінити за допомогою тега:
<BASEFONT SIZE="n">
Колір шрифту ви можете
змінити за допомогою тега
<FONT COLOR="color">
або <FONT COLOR="#??????">
Кольори можна задавати
назвами або завданням кількості червоного, зеленого і синього. У другому
випадку перед значенням кольору ставиться #, а потім по два байти
кожного кольору (RGB), виражені в шістнадцятковій
системі. Основні кольори представлені в таблиці кольорів.
Вид шрифту можна визначати
за допомогою тега <FONT FACE="family">, де "family" - назва шрифту. Якщо ви не указуєте назву
шрифту або якщо вказаний вами шрифт не встановлений в системі - браузер відобразить текст шрифтом встановленим за
умовчанням. Найбільш стандартними шрифтами є: ARIAL, TIMES, COURIER.
Приклад використання тега:
<FONT FACE="COURIER" SIZE="+1"
COLOR="green">Трохи зеленого
тексту</FONT>
Трохи зеленого тексту
Трохи зеленого тексту
Завдання:
1. Створити документ HTML. Для цього спочатку
створити директорію, у якій ви будете його зберігати. Потім в цій директорії
створити простій текстовий файл з розширенням .html. Наприклад,
index.html. Це можна зробити
за допомогою будь-якого текстового редактора, що дозволяє створювати і
редагувати текстові файли. Таким редактором, що поставляється разом з Windows, є текстовий редактор NotePad (Блокнот). Можна використовувати будь-який
інший редактор текстів або спеціалізований редактор.
Зверніть увагу, що багато
текстових редакторів зберігають файли застосовуючи для них за умовчанням
розширення .txt. Щоб
уникнути цього потрібно в діалоговому вікні збереження файлу вказати повне ім'я
файлу разом з розширенням .html, а у випадному списку Тип файлу вибрати Всі файли *.txt. Результат вашої роботи
можна подивитися за допомогою веб-сервера-броузера Internet Explorer. Для цього можна
просто двічі кликнути лівою кнопкою миші по іконі файлу. Файли з розширенням .html за умовчанням відкриваються за
допомогою цієї програми.
2. В створений документ HTML внести наступний код:
<html>
<head>
<title>Мій перший крок</title>
</head>
<body>
<div align="center">
<b>Добрий день! Це моя перша сторінка! </b>
<br>
Ласкаво прошу! :) </div>
<p align="justify">
Я зовсім нещодавно почав знайомство зі створенням інтернет-сторінок, тому для початку я роблю просту сторінку! Ось вона яка!:)
</p>
<head>
<title>Мій перший крок</title>
</head>
<body>
<div align="center">
<b>Добрий день! Це моя перша сторінка! </b>
<br>
Ласкаво прошу! :) </div>
<p align="justify">
Я зовсім нещодавно почав знайомство зі створенням інтернет-сторінок, тому для початку я роблю просту сторінку! Ось вона яка!:)
</p>
<FONT FACE="COURIER" SIZE="+2"
COLOR="red">Заходьте до мене на сторінку!</FONT>
</body>
</html>
</body>
</html>
3. Збережіть зміни в
текстовому файлі. Виконайте команду Файл - Зберігти.
4. Відкрийте створений файл в
програмі інтернет-браузера. Продивіться отриману веб-сторінку.
5. Самостійно створіть
сторінку, використовуючи різні шрифти, параметри абзацу і кольорове забарвлення.
Приклад сторінки указаний на рисунку 4.1.
Начальнику
Петрову С.О.
Іванова О.М.
рапорт
Я,
Іванов О.М., що мешкаю за адресою:
Донецьк
вул.
Космонавтів
дім
7 кв. 126
прошу дозволити мені проживати на приватній
квартирі за адресою:
Слов’янськ
вул.
Батюка
дім 2, кв. 167
З правилами проживання та поведінки ознайомлений.
09.09.2018 підпис
Рисунок 4.1 – Завдання для
самостійного створення сторінки
6. В зошиті для практичних робіт записати тему, мету
заняття, основні теги мови розмітки гіпертексту, код сторінок для другого та
четвертого завдання. Написати висновок по роботі.
Немає коментарів:
Дописати коментар