15.4 Применение языка html и публикация Web- документов

HTML расшифровывается как hypertext markup language – гипертекстовый язык. HTML- страница представляет собой обычный текстовый документ с расширением html или htm. Программа, называемая броузер, преобразует текстовый документ в то, что вы видите впоследствии. С помощью специальных команд форматирования можно оформлять страницу. Например, чтобы выделить надпись жирным шрифтом, необходимо вначале и в конце поставить метку <B>: <b> Надпись </b>. Тогда когда броузер встретит эту строку, он поймет, что все что между <b> и </b> надо вывести на экран жирным шрифтом. Вот так примерно работает броузер. Самый простой html-документ имеет структуру:

<html><head>

<title>Название страницы</title>

</head>

<body>

Здесь начинаются команды html

</body>

</html>

Команды в <> скобках называются тэги (от англ – tag). Многие из тэгов парные: например: <u> Text </u>. Весь документ располагается между тэгами <body> и </body>. Между тэгами <title> и</title> идет название страницы которое будет отображаться в заголовке броузера. Безразлично, в каком регистре будут команды и как будет отформатирован текст, броузеры игнорируют символы возврата каретки и пробелы в командах. Два следующих примера приведут к одному и тому же результату:

Пример 1:

<html><head>

<title>Пример 1</title>

</head>

<body> Руководство по HTML </body>

</html>

Все, что расположено после тэга <BODY> будет отображаться на странице. Например если создать такой документ:

<html><head>

<title>Пример</title>

</head>

<body>

Пример Пример Пример

</body></html>

то броузер выведет на экран следующую строку:

Пример Пример Пример

Но этот текст можно форматировать специальными тэгами. Рассмотрим их действие на примере:

<html><head>

<title>Форматирование</title>

</head> <body> <b> Жирный текст </b> <u>Подчеркнутый текст</u> <i>Курсивный текст</i> <u><b>Подчеркнутый жирный текст </u></b> </body>

</html>

В результате получится следующая строка:

Ж ирный текст Подчеркнутый текст Курсивный текст Подчеркнутый жирный текст

Понятно: что <b> делает текст жирным, <u> подчеркнутым и так далее. Для того, чтобы каждый фрагмент печатался на новой строке существует специальный тэг <br>. Он начинает последующий текст с новой строки:

<html><head>

<title>Форматирование</title>

</head>

<body><b> Жирный текст <br></b> <u>Подчеркнутый текст<br></u> <i>Курсивный текст<br></i> <u><b>Подчеркнутый жирный текст <br></u></b> </body> </html>

Вот, что из этого получится:

Жирный текст

Подчеркнутый текст

Курсивный текст

Подчеркнутый жирный текст

Все предыдущие примеры выводили текст одним размером, который стоял по умолчанию. Однако можно изменять размер текста с помощью специального тэга: <hk> , где k-это размер шрифта (k может принимать значения от 1 до 6). Следующий пример иллюстрирует работу этого тэга

<html><head> <title>Изменение размеров шрифта</title> </head> <body> <h1>Размер 1</h1> <h2>Размер 2</h2> <h3>Размер 3</h3> <h4>Размер 4</h4> <h5>Размер 5</h5> <h6>Размер 6</h6> </body> </html>

Вот что из этого получится:

Размер 1

Размер 2

Размер 3

Размер 4

Размер 5

Размер 6

Все браузеры поддерживают только два формата картинок: gif и jpg, так как они самые экономные по размеру. Чтобы загрузить картинку в html – страницу, необходимо ввести следующее: <img src=«picture.jpg»> и в страницу загрузится картинка. Необходимо, чтобы картинка была в одной директории с htm-файлом, который отображает ее. Есть возможность написать на картинке текст, чтобы посетитель, пока картинка грузится, мог прочитать, что на ней изображено. Этот текст появляется также в виде всплывающей подсказки при подведении курсора мыши к рисунку. А делается это так : <img src=«picture.jpg» alt=«Описание картинки»>

На своей странице вы можете установить ссылку на другой сайт. Щелкнув на ней, посетитель пойдет туда, куда вы хотели его отправить. Формат записи ссылок:

<a href=«адрес»>Текст</a>

«Увидев» эту строку, броузер выдаст на экран следующее: 

Текст

Вот собственно так ссылки и делаются, только поставьте свой адрес и текст. Больше ничего не надо Если вы не хотите, чтобы посетитель по ссылке убегал с вашей страницы, то можно сделать так, чтоб сайт, который расположен по ссылке грузился в отдельном окне броузера. Делается это так:

<a href=«адрес» target=«_blank»>Текст</a>

Можно ссылкой сделать не фрагмент текста, а картинку:

<a href=«адрес»><img src=«картинка.jpg»></a>

Можно также сделать так, чтобы по нажатию на ссылку загрузилась почтовая программа и посетитель послал вам письмо по электронной почте. Для этого надо вместо адреса указать слово mailto, потом двоеточие, а потом ваш «e-mail», например:

<a href=«mailto:name@iname.com» >E-Mail Me</a>

Вот что получится:

E-Mail Me

Чтобы сделать страницу с фоновым рисунком, надо надо в тэге <body> напечатать : background=«backgrnd.gif»

Для задания цвета фона надо в тэге <body> ввести следующий аттрибут: bgcolor=«color1», где color1 – это шестнадцатиричное значение цвета.

Для задания цвета текста: text=«color2»

Для задания цвета ссылок: link=«color3»

Далее в таблице 8 предоставлены основные цвета и их шестнадцатиричные значения.

Таблица 8 – Коды цветов заполнения элементов Web – страницы

	Black = «#000000»		Green = «#008000»
	Silver = «#C0C0C0»		Lime = «#00FF00»
	Gray = «#808080»		Olive = «#808000»
	White = «#FFFFFF»		Yellow = «#FFFF00»
	Maroon = «#800000»		Navy = «#000080»
	Red = «#FF0000»		Blue = «#0000FF»
	Purple = «#800080»		Teal = «#008080»
	Fuchsia = «#FF00FF»		Aqua = «#00FFFF»

Чтобы фрагмент текста выделить каким-то цветом, надо этот фрагмент текста окружить парными метками:

<font color=«#800000»>Надпись</font>

Создадим простую таблицу в документе HTML:

1/1	1/2	1/3
2/1	2/2

Рисунок 15.1 – Пример таблицы в web-документе

Вот как она выглядит в формате html:

<table border=«1» width=«28%» height=«8%»>       (открываем таблицу)

<tr>  (открываем первую строку)

<td>1/1</td> (первый столбец)

<td>1/2</td> (второй столбец)

<td>1/3</td> (третий столбец)

</tr> (закрываем первую строку)

<tr> (открываем вторую строку)

<td bgcolor=«#000080»><font color=«#FFFFFF»>2/1</font></td>      (первый столбец)

<td width=«108» height=«35» >2/2 <img src=«email3.gif»> </td>               (второй столбец)

</tr>   (закрываем вторую строку)

</table>      (закрываем таблицу)

Начинается таблица тэгом <table>, в котором можно указать ширину width, высоту height таблицы (в процентах или пикселях), размер границы border (если border=0, то граница невидима), можно также указать фоновый цвет  bgcolor или фоновый рисунок background для всей таблицы. В конце таблица всегда должна заканчиваться тэгом </table>

Далее за тэгом <table> идет тэг <tr> (тоже парный). Этот тэг открывает описание первой строки. Между тэгами <tr> и </tr> расположены  парные тэги <td>1/1</td>    <td>1/2</td> <td>1/3</td>. Они описывают первую строку. То, что находится в первом тэге <td> относится к первой колонке. То что во втором – ко второй и так далее. Если бы между <tr> и </tr> был только один  тэг <td>, то в первой строке была бы только одна колонка.

После закрытия первой строки тэгом </td> опять идет тэг <td>, который открывает вторую строку. В нем с помощью <td> делаем две колонки. Отдельную ячейку можно форматировать (оформлять) точно так же, как и всю таблицу, это делается при открытии ячейки тэгом <td>, например, чтобы сделать фон синим как, в примере надо в тэге <td> указать bgcolor=«#000080». Все атрибуты, которые используются для всей таблицы (background, border, width, height и так далее) можно использовать и для ячеек. Все, что будет между <td> и </td> будет отображено в соответствующей ячейке.

Таблицы играют очень важную роль в оформлении страниц. Их можно использовать не только, чтобы упорядоченно записать какие-то табличные данные.