В языке HTML основными элементами являются ключевые слова, заключенные в треугольные <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 rows="10%,*">
<frame scrolling="NO" noresize src="name.file">
<frameset cols="18%,*">
<frame src="name.file" scrolling="yes">
<frameset rows="*,6%">
<frame name="main" src="name.file" scrolling="auto">
<frame scrolling="auto" src="">
</frameset>
</frameset>
</frameset>
</head>
Он делит экран на несколько областей-окошек. В каждом из них можно загрузить свой документ.