ОСНОВЫ
HTML
Самой известной частью Интернета является всемирная паутина в английском варианте Word Wide Web (WWW), которая состоит из Web-сайтов и отдельных Web-страниц. Создание Web-страниц производится на HTML (гипертекстовый язык разметок). Данный язык довольно прост, использовать его может каждый пользователь, который хоть немного имеет опыт работы с Интернет.
Всемирная паутина состоит из огромного числа взаимосвязанных документов. Взаимосвязь достигается за счет вставки в Web-страницу гиперссылок, которые обеспечивают соединения с другими Web-страницами. Гиперссылки позволяют связывать друг с другом документы различных форматов и используют для поиска документа его уникальный адрес(URL – Universal Resource Locator) во всемирной паутине.
В файле описания Web-страницы на языке HTML основная информация чередуется с инструкциями по ее отображению и представляет собой обычный текстовый файл чтение, которого осуществляется с помощью программ-браузеров. Чтение HTML файла без использования браузеров затруднено из-за присутствия служебной информации, а также не возможно увидеть графическое изображение, так как на него имеется только ссылка.
При создании Web – сайта будем использовать текстовый редактор Notepad и браузер Internet Explorer, которые присутствует в каждой операционной среде Windows.
Элементы языка HTML называют тегами. Для того, чтобы браузер их отличал от обычного текста, они заключаются в угловые скобки < … >. Текст, не находящийся между знаками <…>, весь виден при просмотре в браузере. Тег обозначает начало действия какой-либо инструкции отображения. Если инструкция применяется ко всему документу, то такой тег не имеет своего закрывающего двойника. Большинство тегов парные, и второй тег прекращает действие первого. Закрывающий тег отличается от открывающего тем, что в закрывающем теге присутствует косая черта после первой угловой скобки.
Некоторые теги имеют параметры, которые уточняют правило отображения содержимого и размещаются только в открывающем теге.
Наименование тегов и их параметров разрешается набирать в любом регистре заглавными или строчными символами. Встроенные в каждый браузер анализаторы HTML, не обращают внимания на регистр символов, которыми набраны все служебные конструкции HTML-документа.
При написании HTML-документов, для удобства разработчика и внутреннего документирования структуры текста применяются комментарии, содержимое которых не обрабатывается браузером, и не отображаются. Комментарии располагаются между фрагментами <--…-->. Пример создания комментария: <--Это комментарий-->.
Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле описывается ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>. Структура любой Web-страницы выглядит следующим образом:
<html>
<head>
заголовок документа
</head>
<body>
тело документа
</body>
</html>
Ниже подробнее изучим элементы разметки HTML – документа.
В данной главе рассмотрим процесс создания Web-страницы с использованием языка HTML. Для этого создадим на диске отдельную директорию (папку) для будущей страницы, например, D:\WEB\. Откроем текстовый редактор Notepad, который есть в каждой операционной системе windows и перепишем следующий текст:
<html>
<head>
<title> Пробная Web-странца </title>
</head>
<body>
Здравствуйте, это моя
первая страница. <br> Добро пожаловать! :)
</body>
</html>.
Сохраним этот документ, присвоив ему имя *.html (например: D:\WEB\index.html), и откроем его в Internet Explore (IE).
Если требуется что-то изменить в созданном HTML документе (в блокноте), то, чтобы посмотреть как это выглядит в Internet Explorer, надо не забывать нажимать в IE кнопку "ОБНОВИТЬ", и если изменений нет, то значит, что где-то допущена неточность или не сохранен документ.
Тэг <html>...</html> является основным и может использоваться в текстовом документе только один раз. Все что внутри него относится к "программе" на языке HTML. Документ должен начинаться с <html> и заканчиваться </html>. Если есть открывающий тэг, то обязательно должен быть и закрывающий.
Тег <head>…</head> определяет заголовок документа. Все элементы языка HTML расположенные между тегами <head>…</head> относятся к служебной информации.
Рассмотрим теги, которые должны находится только внутри заголовка документа (внутри раздела <head>) и сообщают браузеру служебную информацию.
Тег <title>...<title> сообщает название документа браузеру, которое браузер отображают в названии окна. Например: <title> Мой первый сайт</title>.
Тег <meta>...</meta> определяет метаданные, то есть неотображаемую информацию о документе, которая используется для идентификации документа и указания режима отображения Web-страницы. Тег имеет набор свойств задание, которых производится в виде имя/значение. В качестве свойств могут выступать: имя автора, список ключевых слов, дата окончания существования (в Кешах прокси серверов) и еще очень многое в зависимости от разновидности браузеров.
Свойства задаются через параметр NAME, либо через параметр HTTP-EQUIV, а далее в CONTENT раскрывается их содержание.
Наиболее часто встречающиеся информация, которая передается через метаданные это: имя автора, информация для поисковых машин, вид кодировки текста и т.д. Рассмотрим некоторые из них.
Имя автора задать можно через свойство "Author" в следующем виде: <meta name="Author" content="Bill Gates">.
Свойство "generator" отображает название редакторов Html документов и выглядит так: <meta name="generator" content="Microsoft FrontPage Express 2.0">.
Для поисковых машин используются свойства "keywords" и "description". Свойство "keywords" - содержит список ключевых слов Web-страницы и выглядит следующим образом: <meta name="keywords" content="студент, экзамен, сессия">. А свойство "description" предназначено для хранения краткой аннотации Web-страницы и применяется в следующем виде: <meta name="description" content="Сайт предназначен для студентов заочников Самарской государственной академии путей сообщения ">.
Рассмотрим некоторые свойства, задаваемые через параметр HTTP-EQUIV .
Свойство "Content-Type" описывает тип содержания документа и кодировку, в которой он сделан и выглядит так: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, где text/html – определяет тип содержания документа, Charset – описывает вид кодировки символов (например: windows-1251, koi8-r, ISO-8859-1 и т.д).
Программа на языке html может работать и без раздела <head>, но хороший стиль написания HTML-документа подразумевает его использование, для сообщения хотя бы браузеру своего названия и кодировки текста.
Тэг <body>...</body> определяет тело документа и может содержать очень много параметров. Все элементы языка HTML, расположенные между тегами <body>...</body>, определяют непосредственное содержание документа.
Рассмотрим параметры тега <body>…</body>:
bgcolor - устанавливает цвет фона документа;
text - устанавливает цвет отображаемых символов;
link – устанавливает цвет, которым будут отображаться ссылки на другие документы;
vlink – устанавливает цвет, которым выделяются уже посещенные ссылки;
alink – устанавливает цвет для того, чтобы помечать ссылки во время нажатия на них мышкой;
background - задает фоновое изображение.
Значение цвета в этих параметрах задается в следующем формате: #RRGGBB, где R (red - красный), G (green - зеленый), B (blue - синий)- это составляющие компоненты цвета в шестнадцатеричной форме. Например, если надо получить зеленый цвет, для которого составляющие красного и синего нулевые, то код цвета запишется так #00FF00. Таким образом можно получить все 16 млн. цветов.
Тэг <font>…</font> - задает цвет текста в конкретной части документа, размер шрифта и вид шрифта и имеет следующие параметры:
face - задает название шрифта, которым требуется отобразить текст в документе;
size - задает высоту символов, которая может находиться в пределах от 1 до 7;
color - задает цвет отображаемых символов, который задается в 16-ичном виде, описанном раньше.
Приведем пример использования
тега <font>…</font>.
<html>
<body>
<p>А это шрифт : <font face="Arial"
color=#00FF00 size=4>Arial</font>
<font size=7
color=#FF0000 >Size 7</font>
<font size=3
color=#0000FF >Size 3</font>
<font
size=+2>Size +2</font>
<font
size=-1>Size -1</font>
</body>
</html>
В этом примере отобразятся надписи различного цвета, высоты и шрифта. В двух предпоследних строчках используется в размере знак. Таким образом, указываются относительные размеры шрифта, например, если размер вашего шрифта был 5, то при записи +1 размер шрифта станет 6, и также с минусами. Но если был шрифт 3, и указано +5 или -4, то размер не будет 8 или -1, а будет максимальный и минимальный.
Тег <basefont> применяется для установки базового шрифта на странице. Параметры у него аналогичны <font> например: <basefont size=4 color=red face="Arial">. Тег <basefont> не должен иметь закрывающую скобку. Его лучше располагать в начале документа, но если нужно действие на определенном участке текста, то можно использовать внутри него. Так как этот тег определяет базовый шрифт, то в примере размер шрифта будет откладываться от 4. По умолчанию, если не используется <basefont>, базовый шрифт имеет размер 3.
Рассмотрим ряд примеров применения приведенных выше параметров в HTML – документе. Окрасим слова "Добро Пожаловать" в первом примере красным цветом.
<html>
<head>
<title>Первый пример </title>
</head>
<body>
Здравствуйте, это моя
первая страница. <br>
<font color="#CC0000"> Добро пожаловать! :)
</font>
</body>
</html>.
В следующем примере зададим цвет текста документа в открывающем теге <body>: <body text= "#336699">. Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font>…</font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head>
<title> Второй пример </title>
</head>
<body text="#336699">
Здравствуйте, это моя
первая страница.
<br>
<font color="#CC0000"> Добро
пожаловать!</font> :)
</body>
</html>
Установим цвета фона в тэге <body>: <body bgcolor="#000000">. Для наглядности здесь прописан черный цвет (если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body). По экспериментируете с цветами в данном примере.
<html>
<head>
<title> Третий пример </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро
пожаловать!</font> :)
</body>
</html>.
Тег <p>...</p> происходит от начальной буквы слова paragraph (параграф или абзац). Все содержимое этого элемента, помещенное внутри <p>...</p>, отделяется от другого содержимого страницы несколькими пустыми строками.
Абзацы можно выравнивать по левому или правому краю, а также по центру. За это отвечает параметр align, который может принимать значения left - по левому краю(<p align="left">текст</p>), right - по правому краю (<p align="right">текст</p>) и center -по центру (<p align="center">текст</p>). Кроме этих выравниваний существует еще одно, которое поддерживает пока только IE, это justify - выравнивание по ширине страницы. По умолчанию все абзацы выравниваются по левому краю, если конечно этот параграф не является вложенным в другой блок, выравнивание которого другое.
Теперь введем параграфы и посмотрим наглядно, что получится (в пример подставлен параграф с параметром центрирования текста (center), попробуйте подставить в параграф другие параметры со значениями Left или Right).
<html>
<head>
<title>Чтвертый пример </title>
</head>
<body
text="#336699" bgcolor="#000000">
<p
align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро
пожаловать!</font> :) </p>
</body>
</html>.
Теги <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, <h6>...</h6>. Определяют заголовки разных размеров и имеют огромное значение при создании html – документа. Различаются они размером букв при этом <h1> - самые большие, а <h6> - самые мелкие. Заголовки, как и абзацы, можно выравнивать через параметр align. В нижеследующем примере подставлен заголовок третьего уровня <H3>…</H3>.
<html>
<head>
<title>Пятый пример</title>
</head>
<body
text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font
color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с
разными целями их применения.
</p>
</body>
</html>
Теги <big>...</big> и <small>...</small> предназначены для сокращения записи тегов типа <font size=+1>...</font>, который заменяется тегом <big> увеличивающим размер текста на единицу. Аналогично тег <small> уменьшает текст на единицу относительно текущего размера.
Тег <sub>...</sub>
и
<sup>...</sup>. Элементы создания записей формул, в которых требуется написание
индексов и степеней. Тег <sub>...</sub> определяет нижний индекс, а тег <sup>...</sup> - верхний. Приведем пример записи формул C2H5OH
или 32=9.
<html>
<head>
<title>Шестой пример</title>
</head>
<body
text="#336699" bgcolor="#000000">
C<sub>2</sub>H<sub>5</sub>OH
или
3<sup>2</sup>=9
</body>
</html>
Тег <b>...</b> является сокращением от bold, отображает шрифт жирным шрифтом. Наряду с тегом <b> в редакторе Front Page используется тег <strong>, который выполняет те же функции. Запись тега <b>...</b> производится следующим образом: <p>А это <b>жирный шрифт</b></p>.
Тег <i>...</i> отображает текст наклонным и происходит от слова Italic (наклонный шрифт). Пример применения тега <i>...</i>: <p>А это <i>наклонный шрифт</i> и <b><i>жирный наклонный текст</i></b>.
Тег <u>...</u> выводит подчеркнутый текст, находящийся между тегами <u>...</u>. Пример применения тега<u>…</u>: <p><u>Подчеркнуть текст</u>.
Тег <s>...</s> отображает текст зачеркнутым шрифтом. Пример использования тега <s>...</s>: <p><s>Зачеркнутый текст</s>.
Тег <tt>...</tt> выводит текст, находящийся между тегами с постоянной шириной символа (имитация телетайпного текста). Пример: <p>Текст из <tt>ТЕЛЕТАЙПА</tt>.
Тег <pre>...</pre> отображает с постоянной шириной символы, не пропускает пробелы, табуляции и переносы строк, тем самым оставляет первоначальное состояние текста.
Пример применения тега <pre>...</pre>.
<pre>
1 2
3 4 5
это будет
хорошо выглядеть
</pre>.
Тег <div>...</div> создает новый раздел в документе и чаще всего применяется для задания выравнивания текста из больших кусков. Для этого используется параметр align, который задает выравнивание внутри раздела.
Пример применения <div>...</div>.
<div
align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>.
При отсутствии данного элемента пришлось писать в каждом абзаце <p align=right>...., что естественно трудоемко.
Тег <blockquote>...</blockquote> используется для приведения цитат, и выделяется увеличенным отступом с двух сторон.
Пример отображения цитат.
<blockquote>
Пришел, увидел, победил
br (Ю. Цезарь)
</blockquote>
Тег <hr> вычерчивает горизонтальные линии и имеет следующие параметры:
align - определяет выравнивание линии в документе и имеет свои обычные значения. По умолчанию линия отображается шириной во все страницу, и поэтому ее выравнивание не будет заметно;
noshade - этот атрибут используется для вывода линии в виде полосы одного цвета. По умолчанию она отображается в виде канавки;
size - устанавливает высоту линии в пикселях;
width - устанавливает ширину линии в пикселях или в процентах от ширины внешнего элемента.
Пример использования тега <hr>.
<hr
width=80% align=left>
<hr
width=50% align=center size=10>
<hr width=150 align=right noshade>
Тег <br> произошел от слова break line и служит для переноса строки в языке Html. Помогает начать новую строку, не прибегая к тегу <p>, который дает большой отступ от предыдущей строки.
Пример работы тега <br>: <p>Пораз-<br>рываем стро-<br>ку.
Тег <nobr>…</nobr> сообщает браузеру о том, что текст, который находится внутри него ни в коем случае нельзя переносить, даже если в окно на каждую строку может уместится не больше одного слова.
В конце рассмотрения данного раздела приведем полный текст HTML-документа, который демонстрирует все элементы текстового оформления.
<html>
<head>
<title> Седьмой пример </title>
</head>
<body
text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font
color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать Интернет страницы с разными
целями их
применения.
</p>
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9.
<p>А это <b>жирный шрифт</b></p>
<p><u>Подчеркнуть текст</u>
<p><s>Зачеркнутый текст</s>
<pre>
1 2
3 4 5
это будет
классно выглядеть
</pre>
<div
align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>
<blockquote>
Пример цитаты
<hr width=80%
align=left>
<hr width=50% align=center size=10>
<hr width=150 align=right noshade>
</blockquote>
<p>Пораз-<br>рываем стро-<br>ку
</body>
</html>
Основная информация по тегам и их
использование представлена в следующем электронном справочнике