Мова розмітки гіпертексту

Основи мови HTML
Базові конструкції
Введення
Мова розмітки гіпертекстів HTML (Hyper Text Markup Language) –

використовується для розробки Web-сторінок, які потім можуть бути
розташовані в мережі Інтернет.
Web-сторінка створюється в Web-сторінка будь-якому текстовому редакторі. Цей

документ повинен бути типу *.htm або *.html. Web-сторінку можна
переглянути за допомогою будь-якого браузера. Документ може бути
відчинено одночасно в двох програмах.
Основа мови - дескриптори (теги) – команди, які указують правила форматування
документа. Теги записуються між знаками “<“ і “>”.
Теги можна вводити як великими так і маленькими літерами. Багато тегів можуть
мати атрибути – елементи, які містять додаткову інформацію об обробці
поточного тега.
Теги: парні та одинарні.
Приклад парного тега: <html> …..
</html>
Структура HTML - документа
<html>
<head>
<title>
Заголовок: - назва документа – інформація, яка знаходиться у заголовку
вікна, бажано, щоб вона не перевищувала 64 символів;
- службова інформація.
</title>
</head>
<body>
Тіло документа – зміст документа.
</body>
</html>
<!Коментар>
Приклад створення Web – сторінки
Html – документ Загруженная страница

Теги для роботи з текстом
Парні теги
<h1> </h1>  розмір заголовка;
………….
<h6> </h6>
<p> </p>  абзац тексту;
Align  атрибут – вирівнювання рядка;
Align=center
Align=left
Align=right
<b> </b>  текст жирним шрифтом;
<I> </I>  текст курсивом;
<u> </u>  підкреслений текст;
<tt> </tt>  шрифт, що імітує друкарську машинку;
<font face=тип шрифту>  вибір другого шрифту;
</font>
<font size=N> </font>  вибір розміру шрифту;
Непарні теги
<BR>  переведення курсору на новий рядок, без розриву абзацу;
<HR>  горизонтальна лінія (може додатково включати атрибути size(товщина
лінії в пікселях) и width (довжина лінії у відсотках від ширини екрану);
Робота с текстом
Документ Страница
Кольорові відтінки в HTML – документі
Колір задається послідовністю трьох пар символів. Кожна пара уявляє собою
шістнадцятирічне значення одного з трьох кольорів
Bgcolor=#rrggbb - колір тла;

Text=#rrggbb - колір тексту;
Link=#rrggbb - колір виділеного елементу тексту, при натисканні на які їде
перехід за гіперпосиланням;
Vlink =#rrggbb - задає колір посилання на документ, який вже переглядався
раніше;
alink =#rrggbb - задає колір посилання в момент, коли на неї вказує курсор
миші;
<font color =#rrggbb> - колір фрагменту тексту в межах абзацу.

</ font>
#ffffff - білий колір;

#000000 - чорний т;
#ff0000 - червоний;
#ffff00 - жовтий;
#ff00ff - сереневий.
Робота з кольором
Документ Сторінка
Мітки для роботи з зображенням
Графічне зображення може бути тлом зображення. В цьому випадку воно повинно знаходитися
у форматі GIF(*.gif), JPEG (*.jpg або *.jpeg) або BMP (*.bmp). Браузери заповнюють весь
екран копіями зображення-тла. Колір не відображаються на папіру при друку, тому не
рекомендується використовувати білий колір шрифту.
Створення графічного зображення в якості тла:
у мітку <body> включити атрибути background=“ім'я файлу (бажано розмістити зображення в
туж папку, що і WEB-сторінку)”
Приклад:
Вставка графічного зображення в документ:

непарна мітка <img src=“ім’я файлу”>
атрибути мітки: - width –ширина зображення;
- height – висота зображення.
Рамка зображення: атрибуту – border.
Робота з зображенням
Мітки для роботи зі списками
Маркований список:
<UL>
<LI> - текст;
<LI>- текст;
…….
<LI>- текст.
</UL>
Нумерований список:
<OL>
<LI> - текст;
<LI>- текст;
…….
<LI>- текст.
</OL>
Использование списков
Мітки для роботи з гіперпосиланнями
(посилання на інші документи)
<A HREF=“ім’я файлу, що містить документ”> фрагмент тексту </a>
Мітки для роботи з гіперпосиланнями
(посилання на інші документи)
Для переходу по тому ж документу необхідно створити закладки, до яких буде здійснюватися перехід. У початку
документа розміщують зміст, що складається із посилань до закладок, які розташуються у заголовках розділів
документу (в іменах закладок розлучають регістри букв).
Мітка, встановлює закладку <a name=“zakladka1”> Глава 1</a>
Перехід до глави <A href=“#zakladka1”> Перехід до глави 1</a>
Мітки для роботи с гіперпосиланнями
(на поштову скриньку)
<A HREF=“mailto:user@mail.box”> текст </a>
При натисканні на посилання буде відкрито Outlook Express, де можна його відправити за вказаною адресую
.
Мітки для роботи с гіперпосиланнями
(посилання з малюнку)
<A HREF=“малюнок - посилання.gif”><img src=“малюнок, що буде на екрані.gif”></a>

Мітки для роботи с таблицями
Опис таблиці у документі: <table> … </table>
атрибути: align=left вирівнювання таблиці на сторінці
align=right
align=center
width= ширина таблиці
border= ширина рамки таблиці та комірки в пікселях
cellpadding= відстань між рамкою комірки та текстом в
пікселях
Заголовок таблиці, якщо потрібно: <caption>… </caption>
Опис кожного рядка: <tr> … </tr>
атрибути вирівнювання тексту в комірці
align=left
align=right
align=center
вертикальне вирівнювання тексту в комірках
valign=top верхній край
valign=middle по центру
valign=bottom по нижньому краю
Опис кожного елементу: <td> … </td>
атрибути вирівнювання тексту в комірці
align=left
align=right
align=center
вертикальне вирівнювання тексту в комірках
valign=top верхній край
valign=middle по центру
valign=bottom по нижнєму краю
Приклад роботи с таблицями

Мова розмітки гіпертексту

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Мова розмітки гіпертексту

Uploaded by

Copyright:

Available Formats

Основи мови HTML

Мова розмітки гіпертекстів HTML (Hyper Text Markup Language) –

Web-сторінка створюється в Web-сторінка будь-якому текстовому редакторі. Цей

Html – документ Загруженная страница

Bgcolor=#rrggbb - колір тла;

<font color =#rrggbb> - колір фрагменту тексту в межах абзацу.

#ffffff - білий колір;

Вставка графічного зображення в документ:

<A HREF=“малюнок - посилання.gif”><img src=“малюнок, що буде на екрані.gif”></a>

You might also like