КРАТКИЙ КУРС ЯЗЫКА HTML (базовый уровень) - Веб-дизайнеру - Каталог статей

Цитата из Википедии:
HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи HTML.

    Это не перевод скучной спецификации. Я постарался коротко и ясно описать действие самых основных, кросс-браузерных элементов языка HTML. В справочник вошли только те HTML теги, которые можно без опаски использовать при создании сайтов и после пребывать в уверенности, что ни один старинный браузер
не выкинет фокус и всегда верно отобразит ваши веб-страницы.

    Справочник проверен временем, он долгое время гарантировал простоту и совместимость HTML-кода для разных браузеров. С появлением XHTML старый добрый HTML несколько растерял позиции, но всё ещё крепко стоит на ногах и незаменим для тех проектов, где не нужны фокусы в стиле "Веб 2.0", но нужна
максимальная совместимость с любыми, даже самыми древними или редкими браузерами. А таких проектов много, очень много. Обратите внимание - справочник базируется на HTML версии 3.2 с некоторыми наиболее распространенными элементами HTML 4.0.

    Итак, в центре внимания — создание чистого и простого «классического» HTML кода без излишеств, который нормально отображается во всех широко распространённых браузерах, даже в морально устаревших (но, увы, всё ещё установленных на огромном количестве компьютеров).

    Справочник не рассчитан лишь на начинающих. Я частенько пользуюсь им как шпаргалкой если что-нибудь подзабыл. Несмотря на то, что HTML – штука очень простая, иногда из головы напрочь вылетает какая-нибудь мелочь. Например, что у элемента HR есть жутко полезный атрибут NOSHADE.

    В языке 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="https://21nn.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>

Он делит экран на несколько областей-окошек. В каждом из них можно загрузить свой документ.