Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и т.д. А основное содержимое: текст, таблицы, картинки, - находится в теле документа.
1.1.3. Работа с текстом
Очень полезным при создании сайтов является вставка комментария. Для выделения блоков текста в HTML используются следующие конструкции:
Заголовки
В HTML принято выделять 6 видов заголовков - от <H1> до <H6>. Тегу <H1> соответствует самый большой заголовок, тегу <H6> - самый маленький. Тег заголовка является парным в связи с чем использование закрывающего тега является обязательным.
<h1>Самый большой заголовок</h1>
Для большинства тегов характерен набор определенных параметров (атрибутов). Такие параметры указываются после имени тега через пробел в формате параметр=”значение”, если необходимо использование нескольких параметров они перечисляются через пробел. Для тегов заголовков допустимо использование следующих параметров:
align - Выравнивает заголовок в соответствии со следующими значениями:
center - По центру;
left - По левому краю;
right - По правому краю; title - Всплывающая подсказка.
Параграф
Для определения текстового абзаца используется тег <p>, который является блочным элементом и всегда начинается с новой строки, абзацы текста, идущие друг за другом, разделяются между собой отбивкой. Для тегов параграфов допустимо использование следующих параметров:
align - Выравнивает параграф относительно одной из сторон документа:
left - выравнивание по правому краю (По умолчанию).
right - выравнивание по правому краю.
center - выравнивание по центру.
5
justify - выравнивание по ширине. title - Всплывающая подсказка.
Контейнеры
Также для работы с текстом используются так называемые контейнеры для форматирования текста (рис. 1.2). Любые теги форматирования текста могут использоваться совместно друг с другом.
<b><i>ТЕКСТ</i></b>
<b>Текст</b> |
Жирное начертание текста |
|
<i>Текст</i> |
Курсивное начертание текста |
|
<sup>Текст</sup> |
Верхний индекс |
|
<sub>Текст</sub> |
Нижний индекс |
|
<pre>Текст</pre> |
Текст пишется как есть, включая все |
|
|
|
пробелы |
<em>Текст</em> |
Курсивный текст |
|
<strong>Текст</stron |
Жирное начертание текста |
|
g> |
|
|
<s>Текст</s> |
Зачеркнутый текст |
|
<u>Текст</u> |
Подчеркнутый шрифт |
|
|
Рис. |
1.2. Теги для форматирования текста |
|
Шрифт |
|
Для работы с оформлением текста используется тег <font> определяющий цвет, размер и выводимый шрифт. Для тега шрифт допустимо использование следующих параметров:
color - определяет цвет текста. face - определяет гарнитуру шрифта.
size - определяет размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию размер равен 3.
1.1.4. Работа с ссылками
Для создания ссылок в HTML документе используется тег <a>. Для данного тега используется следующие параметры:
name - Для создания ссылок внутри документа, и для взаимодействия между фреймами.
6
href - Адрес сайта или страницы в сети интернет, на который должен перейти пользователь, щелкнув по ссылке. Также здесь указывается ссылка на другие ресурсы интернет:
href="any.avi" - Вызов программы просмотра видео;
href="mailto:info@site.com" - Отправить почту;
href="news:commerce" - Переход на новостной ресурс;
href="callto:name" - Позвонить кому-либо (skype).
target - Определяет, каким образом будет открываться наша страница:
_blank - Откроет страницу в новом окне;
_parent - Откроет страницу в родительском окне;
_self - Откроет страницу в том же окне, в котором была нажата ссылка (по-умолчанию);
_top - Откроет страницу на все окно.
title - Всплывающая подсказка.
1.1.5. Теги для работы со списками
В HTML документе можно создать два вида списков:
Маркированные;
Нумерованные.
Для создания маркированных списков используется контейнер <ul> </ul>, а для нумерованных <ol> </ol>. Внутри этих контейнеров с помощью контейнера <li> </li> осуществляется создание пункта списка
Для маркированных списков характерны следующие параметры: compact - Компактное представление списка.
type - Тип маркера.
disc - Маркер – закрашенный кружок.
circle - Маркер – не закрашенный кружок.
square - Маркер – квадратик.
А для нумерованных:
compact - Компактное представление списка. type - Тип маркера.
A - Прописные латинские буквы.
I - Большие римские цифры.
i - Маленькие римские цифры.
1 - Арабские цифры (по умолчанию). start=число - Начальный номер нумерации.
1.1.6. Теги для работы с изображениями
7
Для работы с изображениями используется тег <img> позволяющий вставлять графику в HTML страницу.
Для данного тега характерны следующие атрибуты: src - Задает адрес изображения.
align - Определяет вид выравниваия изображения.
left - Выравнивание по левому краю;
right - Выравнивание по правому краю;
bottom - Выравнивание по нижнему краю;
top - Выравнивание по верхнему краю;
middle - Выравнивание по центру;
absmiddle - Выравнивает изображение по горизонтальной оси текстовой строки;
texttop - Выравнивание верхнего края изображения по верхнему краю текстовой строки;
absbottom - Выравнивание нижнего края изображения по самому нижнему краю текстовой строки.
alt - Выводит текст, если картинка не загружена. width - Ширина картинки в пикселах или процентах. height - Высота картинки в пикселах или процентах.
border - Устанавливает толщину рамки вокруг изображения в пикселах. hspace - Определяет размер свободного места в пикселах слева и
справа от изображения.
vspace - Определяет размер свободного места в пикселах сверху и снизу от изображения.
title - Всплывающая подсказка.
Пример использования тега будет выглядеть следующим образом
<img src="images/primer.png" title="Пример вставленного изображения и всплывающей подсказки." width="169" height="181" border="1" />
1.1.7. Теги для работы с таблицами
Использование таблиц в HTML документе используется контейнер <table> </table>. Для данного тега характерны следующие атрибуты:
width - ширина таблицы в пикселях или в % относительно ширины окна браузера.
height - высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендуют).
align - выравнивание таблицы.
left - выравнивание таблицы по левому краю.
right - выравнивание таблицы по правому краю.
8
center - выравнивание таблицы по центру. border - толщина рамки таблицы в пикселях.
cellspacing - расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding - расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor - фоновый цвет таблицы.
background - фоновое изображение для таблицы. bordercolor - цвет всех линий рамки таблицы.
Для формирования элементов таблицы используются теги <tr> </tr> и <td> </td>. Контейнер <tr> </tr> служит для создания строки таблицы, а контейнер <td> </td> служит для создания ячейки таблицы.
И для этих параметров допустимо использование следующих параметров:
width - ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
height - высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
align - выравнивание в ячейке:
left - выравнивание в ячейке по левому краю.
right - выравнивание в ячейке по правому краю.
center - выравнивание в ячейке по центру.
valign - вертикальное выравнивание содержимого ячейки:
top - выравнивание по верхнему краю ячейки.
bottom - выравнивание по нижнему краю ячейки.
middle - выравнивание по центру ячейки.
bgcolor - фоновый цвет ячейки.
background - фоновое изображение для ячейки. bordercolor - цвет всех линий рамки ячейки.
colspan - количество объединяемых ячеек по столбцам (для <tr> не применяется).
rowspan - количество объединяемых ячеек по строкам (для <tr> не применяется).
1.1.8. Теги для работы с блоками
Пару лет назад "скелетом" для сайта всегда служила таблица (тег <table>). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания "скелета" будущего сайта
(рис. 1.3).
9