Язык гипертекстовой разметки документов
Язык, который используется для создания документов, получил название HTML (Hyper Text Markup Language) – язык разметки гипертекстов, а программы для интерпретации HTML-файлов, формирования их в виде Web-страниц и отображения на экране компьютера пользователя называется Браузер (Browser).
Бурное развитие сети Интернет привело к появлению огромного числа Web-серверов, предназначенных для размещения и обслуживания Web-сайтов (логически связанных группWeb-страниц), принадлежащих как частным лицам, так и организациям. А разработчики Браузеров, стремясь сделать Web-сайты более привлекательными и динамичными, постоянно модернизируют HTML. В связи с этим один и тот же HTML-документ в разных Браузерах может выглядеть по-разному.
Стандартизацией языка HTML занимается организация, называемая World Wide Web Consortium (сокращенно – W3C), а среди разработчиков Браузеров лидирующие места занимают компании Netscape и Microsoft. В настоящее время последней спецификацией W3C является версия HTML 4.0.
Создание простейших html-документов html-документ — это просто текстовый файл с расширением *.Html (Unix-системы могут содержать файлы с расширением *.Htmll).
Обязательные тэги:
тег <html> ... </html> - открывает и закрывает HTML-документ;
тег <head> ... </head> - указывает на начало и конец заголовка документа;
тег <title> ... </title> - толкуется браузером как название документа;
тег <body> ... </body> - указывает на начало и конец тела HTML-документа;
тег <H1> ... </H1> — <H6> ... </H6> - описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня — самый меленький. Если задать уровень H7 то он автоматически становится по умолчанию H6;
Тег <P> ... </P> - описывает абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1> или <P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>.
Далее будут рассмотрены примеры html – документов.
Пример 1. Первая страница. Вид электронного учебника показан на рисунке 1.1
<html>
<head><title> Первая страница </title>
</head><body><font color=#FF0000>
<B> <I> Привет! Я успешно изучаю работу с гипертекстом </I> </B>
</font></body></html>
Рисунок 1.1 - Первая страница.html
Пример 2. Вторая страница. Вид электронного учебника показан на рисунке 1.2
<html><head>
<title> Вторая страница </title>
</head><body>
<font size=1 color=#FF0000> Каждый </font>
<font size=2 color=#FF9900> охотник </font>
<font size=3 color=#FFFF00> желает </font>
<font size=4 color=#00FF00> знать </font>
<font size=5 color=#00CCFF> где </font>
<font size=6 color=#0000FF> сидит </font>
<font size=7 color=#FF00FF> фазан </font>
</body></html>
Рисунок 1.2 - Вторая страница.html
Пример 3. Структура документа. Вид электронного учебника показан на рисунке 1.3
<html><head>
<title> Третья страница. Структура документа </title>
</head><body>
<h1> Роман </h1>
<h2> Книга </h2>
<h3> Том </h3>
<h4> Часть </h4>
<h5> Глава </h5>
<h6> Параграф </h6>
</body></html>
Рисунок 1.3 - Структура документа.html
Пример 4. Создание текста. Вид электронного учебника показан на рисунке 1.4
<html><head>
<title> Четвертая страница. Текст в одну строку </title>
</head><body>
<font size=4 color=#FF0000>
Уж небо осенью дышало
Все реже солнышко блистало
Короче становился день
</font> </body> </html>
Рисунок 1.4 - Создание текста.html
Пример 5. Разбиение текста на абзацы. Вид электронного учебника показан на рисунке 1.5
<html><head>
<title> Пятая страница. Разбиение текста на абзацы </title>
</head><body>
<font size=4 color=#FF0000>
<b> <I> <p> Уж небо осенью дышало </p>
<p> Все реже солнышко блистало </p>
<p> Короче становился день </p>
</I> </b> </font>
</body></html>
Рисунок 1.5 - Разбиение текста на абзацы.html
Пример 6. Форматирование текста. Вид электронного учебника показан на рисунке 1.6
<html><head>
<title> Шестая страница. Форматирование текста </title>
</head><body>
<font size=4 color=#FF0000>
<p align=center> <b> <I>
Уж небо осенью дышало <br>
Все реже солнышко блистало <br>
Короче становился день <br>
</I> </b> </p>
</font></body></html>
Рисунок 1.6 - Форматирование текста.html
Параметры линии:
ALIGN- выравнивание по краю Left, Center, Right
WIGHT – длина линии в пикселях или % к окну браузера
SIZE – толщина линии в пикселях
No SHADE- отмена рельефности линии
COLOR – цвет линии (используют RGB или стандартное имя)
Пример 7. Вставка линий. Вид электронного учебника показан на рисунке 1.7
<html><head>
<title> Седьмая страница. Вставка линии. </title>
</head><body>
<font size=4 color=#FF0000>
<p align=center> <b> <I>
Уж небо осенью дышало <br>
Все реже солнышко блистало <br>
Короче становился день <br>
<HR align=center width=50%>
</I> </b> </p>
</font></body></html>
Рисунок 1.7 - Вставка линий.html
Пример 8. Вставка рисунков. Вид электронного учебника показан на рисунке 1.8
<html><head>
<title> Восьмая страница. Вставка рисунков. </title>
</head><body>
<font size=4 color=#FF0000>
<p align=center> <b> <I>
Яркие и красивые фрукты - круглый год: <br>
Ананасы, яблоки, <br>
Лимоны, виноград <br>
</I> </b> </p>
</font><img src="1.jpg">
</body></html>
Рисунок 1.8 - Вставка рисунков.html
Пример 9. Вставка рисунков с контекстной заменой. Вид электронного учебника показан на рисунке 1.9
<html><head>
<title> Девятая страница. Вставка рисунков с контекстной подсказкой. </title>
</head><body>
<font size=4 color=#FF0000>
<p align=center> <b> <I>
фрукты - это витамины и микроэлементы: <br>
Яблоки - железо и клетчатка <br>
Лимоны - витамин C <br>
Альтернатива – пояснение рисунка (текст).
</I> </b> </p></font>
<img src="2.jpg" alt="Фрукты">
</body></html>
Рисунок 1.9 - Вставка рисунков с контекстной заменой.html
Пример 10. Добавление ссылки. Вид электронного учебника показан на рисунке 1.10
<html><head>
<title> Десятая страница. Добавление ссылки. </title>
</head><body>
<font size=4 color=#FF0000>
<p align=center> <b> <I>
Ссылка на файл <br>
Ссылка адрес в Интернете <br>
</I> </b> </p></font>
<a href="proba2.htm">проба</a>
<a href="http://www.yandex.ru"> проба</a>
</body></html>
Рисунок 1.10 - Добавление ссылки.html