В языке HTML основными элементами являются ключевые слова, заключенные в треугольные скобки.
Такая конструкция называется тегом. Теги могут быть одиночными или парными.
Структура документа:
<html>
<head>
<title> Заголовок окна</title>
</head>
<body>
Тело документа
</body>
</html>
Назначение тегов:
<html> ... </html> - говорит браузеру, что имеем дело именно с гипертекстовым документом
<head> ... </head> - описание заголовочной части документа
<title> ... </title> - текст между тегами пойдет в заголовок окна
<body> ... </body> - ограничивает тело документа (то, что мы видим на экране)
Некоторые теги могут иметь аттрибуты (различие в оформлении):
<body text="цвет текста" bgcolor="цвет фона" background="путь к фоновой картинке">
Цвет задается с помощью RGB-палитры: #RRGGBB
Каждые два символа задают яркость соответствующего оттненка (R - красный, G - зеленый, B - синий).
В качестве символов можно использовать цифры 16-ричной системы (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f).
Яркость может лежать в диапазоне 0 ... 255 (00 ... ff).
Некоторые цветовые комбинации:
#000000 - черный
#ff0000 - красный
#00ff00 - зеленый
#0000ff - синий
#ffff00 - желтый
#ff00ff - пурпурный
#00ffff - бирюзовый
#ffffff - белый
Также цвет можно задать словом-синонимом (black, red, green, blue, white, ...), их больше сотни.
Цвет текста и цвет фона должны быть контрастными.
Рекомендую использовать RGB-палитру: так нагляднее и точнее можно подобрать любой оттенок.
Если по каким-то причинам однотонный фоновый цвет вам не подходит, можно задать фоновую картинку.
Цвет фона следует установить максимально близко к основному цвету картинки.
Не стоит использовать анимацию - браузер может притормаживать!
Способы задания пути:
1. background="http://www.arhiv.ru/fp_0008.gif" - рисунок с другого сайта
2. background="C:/users/arhiv.www/fp_0008.gif" - рисунок на вашем компьютере
3. background="pic/fp_0008.gif" - рисунок из директории pic
4. background="../fp_0008.gif" - рисунок из родительской директории
5. background="fp_0008.gif" - рисунок из той же директории
1,2 - абсолютный путь (жестко задаются, привязаны к определенному сайту или компьютеру)
3,4,5 - относительный путь (рекомендуются, хорошо переносимы на другие компьютеры)
При размещении вашего документа в интернете регистр букв имени имеет значение!
Заголовки:
<h1>Заголовок 1-го уровня (документ) </h1>
<h2>Заголовок 2-го уровня (раздел) </h2>
<h3>Заголовок 3-го уровня (подраздел) </h3>
<h4>Заголовок 4-го уровня (тема) </h4>
<h5>Заголовок 5-го уровня (пункт) </h5>
<h6>Заголовок 6-го уровня (подпункт) </h6>
Поддерживают аттрибут выравнивания align: <h1 align="...">текст</h1>
align="left" - по левому краю (по-умолчанию)
align="right" - по правому краю
align="center" - по центру
Абзац текста:
<p> Длинная, длинная строка текста. Если не умещается, происходит автоперенос... </p>
<p> А это уже другой абзац. От предыдущего отделяется отступом. </p>
Поддерживают аттрибут выравнивания align: <p align="...">текст</p>
align="left" - по левому краю (по-умолчанию)
align="right" - по правому краю
align="center" - по центру
align="justify" - по обоим краям (рекомендуется)
Теги, влияющие на разбиение текста:
<br> - принудительный переход на новую строку
<nobr>несколько слов</nobr> - запрет разрывать словосочетание (переносится целиком)
<wbr> - указывает, где все-таки допустим разрыв
Оформительные теги:
<b> фрагмент 1 </b> - жирный шрифт
<i> фрагмент 2 </i> - наклонный (курсив)
<u> фрагмент 3 </u> - подчеркнутый
<s> фрагмент 4 </s> - перечеркнутый
<strike> фрагмент 5 </strike> - перечеркнутый
<sub> фрагмент 6 </sub> - нижний индекс
<sup> фрагмент 7 </sup> - верхний индекс
<big> фрагмент 8 </big> - крупный шрифт
<small> фрагмент 9 </small> - мелкий шрифт
<font color="" size="" face=""> ... </font>
color - цвет текста (#RRGGBB или слово-синоним)
size - размер текста (1,2,3,4,5,6,7)
face - шрифт текста ("Arial","Times New Romans", ...)
Допускается комбинирование: <b><i><u>текст</u></i></b> - жирный, наклонный, подчеркнутый
<big><big>текст</big></big> - на два размера крупнее
Примечание: в настоящее время они все являются устаревшими, хотя пока поддерживаются браузерами.
Рисунки:
HTML-документ может содержать кроме текстовой информации еще и графическую.
Каждый рисунок хранится в отдельном файле и при необходимости легко подключается.
<img src="" alt="" border="" width="" height="" vspace="" hspace="" align="">
src - путь к рисунку (абсолютный или относительный)
alt - текст на случай, если рисунок не загрузился ("Комментарий")
border - ширина бортика (целое неотрицательное число пикселов)
width - ширина рисунка (целое неотрицательное число пикселов или процент от обычного размера)
height - высота рисунка (целое неотрицательное число пикселов или процент от обычного размера)
vspace - поля сверху и снизу (целое неотрицательное число пикселов)
hspace - поля слева и справа (целое неотрицательное число пикселов)
![Здесь мог быть рисунок]()
Если рисунок встроен в текст, то строка будет распологаться:
align="top" - по верхнему краю рисунка
align="middle" - по середине
align="bottom" - по низу
align="left" - рисунок слева, текст его обтекает
align="right" - рисунок справа, текст его обтекает
Совсем не обязательно указывать все аттрибуты: <img src="item_0028.gif" alt="Свинья-копилка">
Чтобы не выписывать каждый раз длинные обозначения, рекомендую все файлы размещать в одном
каталоге и обращаться просто по именам. Имя делайте не длиннее восьми символов.
Популярные графические форматы:
*.bmp - хранит информацию о цвете каждой точки, одной за другой,
точно передает изображение, но крайне большой размер файла.
*.jpg - использует сжатие данных, хранит изображения послойно (в виде текстур),
хорошо подходит для фотографий, но неизбежны искажения (размытие, потери).
*.gif - использует ограниченное количество цветов в палитре (не более 256),
небольшой по размеру, точно передает оттенки, доступны эффекты:
анимация, прозрачный фон, чрезстрочность.
Остальные форматы также имеют право на существование, но используются значительно реже.
Гиперссылки:
Гипертекстовый документ называется таковым, потому что в нем могут быть непосредственные
ссылки на другие документы. При щелчке на такую ссылку происходит переход к другому документу.
<a href="..." title="..." target="...">НАЖМИ МЕНЯ</a> - типичная гиперссылка
href="путь" - путь к другому документу
title="надпись" - всплывающая подсказка
target="область" - область, в которой будет отображен документ:
"_top" - во всем окне
"_self" - в текущей части окна (по-умолчанию)
"_blank" - в новом открывающемся окне
"имя фрейма" - в указанном фрейме (рассмотрим позднее)
Все, что помещается внуть тегов <a>...</a>, является гиперссылкой.
Там можно разместить не только текст, но и рисунок, и любые другие теги.
Цвет ссылок:
Цвет ссылок в документе можно задать с помощью аттрибутов тега <body>:
<body link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB">
link - цвет ссылки
alink - цвет нажатой ссылки
vlink - цвет уже посещенной ссылки
Таблицы:
Таблицы в HTML являются одним из главных средств формирования.
Воспроизведем следующий пример:
<table width="300" height="200" border="1" cellpadding="5" cellspacing="1">
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
</tr>
<tr>
<td>444444</td>
<td>555555</td>
<td>666666</td>
</tr>
</table>
width ="..." - ширина таблицы (в пикселах или процентах)
height ="..." - высота таблицы (в пикселах или процентах)
border ="..." - толщина бортика (если указать 0 - таблица станет невидимой!)
cellpadding="..." - поля вокруг объектов в ячейках
cellspacing="..." - расстояние между ячейками
Результат будет следующим:
| Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
| 111111 |
222222 |
333333 |
| 444444 |
555555 |
666666 |
<tr> ... <tr> - обрамляет строку таблицы
<th> ... <th> - обрамляет ячейку в строке (заголовок колонки)
<td> ... <td> - обрамляет ячейку в строке (обычная ячейка)
Для каждой строки или ячейки, отдельно от всей таблицы, мы можем задать фон и выравнивание:
| Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
| 111111 |
222222 |
333333 |
| 444444 |
555555 |
666666 |
<table background="путь"> - фоновая картинка для всей таблицы
<tr bgcolor="#ccffcc"> - цвет фона во всей строке (зеленоватый)
<td align="right"> - выравнивание по горизонтали в ячейке (вправо)
<th valign="bottom"> - выравнивание по вертикали в ячейке (к низу)
<tr height="10"> - высота строки (10)
<td width="100"> - ширина колонки (100)
Склейка ячеек:
| Заголовок 1,2 |
Заголовок 3 |
| 111111 |
222222 |
333333 |
| 444444 |
555555 |
<th colspan="2"> - склейка по горизонтали (эта ячейка заменяет собой две горизонтальные)
<td rowspan="2"> - склейка по вертикали (эта ячейка заменяет собой две вертикальные)
Фреймы:
Ранее мы работали с единственным документом, занимающим весь экран.
Вообще, мы можем поделить экран на несколько частей (фреймов)
и в каждой загрузить свой документ.
Это полезно использовать для статической информации,которая должна постоянно
присутствовать на экране.
Например, навигационная панель с кнопочками,
при нажатии на которые происходит переход к другому разделу.
В HTML существует два вида фреймов: встроенные и внешние.
Встроенные:
<iframe name="..." src="..." frameborder="..." width="..." height="..." scrolling="..."></iframe>
name="..." - имя (указывается в теге <a>)
src="..." - путь к отображаемиму во фрейме документу
frameborder="..." - толщина бортика (в пикселах)
width="..." - ширина фрейма (в пикселах или процентах)
height="..." - высота фрейма (в пикселах или процентах)
scrolling="..." - нужны ли полосы прокрутку ("yes"/"no"/"auto")
Достаточно удобный элемент языка. К сожалению, поддерживается только браузерами
MS Internet Explorer версии 4.0 и выше.
Внешние:
А вот они включены в стандарт HTML и должны поддерживаться всеми современными браузерами.
Правда, для их создания требуется отдельный документ, формирующий структуру страницы.
Вот его примерное содержимое:
<html>
<head>
<title>Заголовок окна</title>
</head>
<frameset>
<frame>
<frameset>
<frame>
<frame>
</frameset>
</frameset>
</html>
Он делит экран на несколько областей-окошек. В каждом из них можно загрузить свой документ.
... ПРОДОЛЖЕНИЕ СЛЕДУЕТ ...
|
