Это мой урок о языке HTML версии 4.01. Урок предназначен для начинающих. В данном уроке я подробно разжевал на наглядных примерах его основу. Предупреждаю, что тут только HTML, а XHTML и CSS тут нету - всё это будет в следующих моих статьях... Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на web-странице. Для этого, для начала, нам понадобятся знания языка HTML, с его мы и начнём.
Что такое HTML?
Язык HTML (Hypertext Markup Language — язык разметки гипертекстовой информации) позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов.
Документы в формате HTML обычно имеют расширение .html или .htm и являются обычными текстовыми документами, которые можно редактировать в любом текстовом редакторе, например в блокноте. Но я бы посоветовал завести у себя какой-нибудь текстовый редактор с подсветкой синтаксиса — это чтобы было меньше ошибок в набранном коде, да и просто для удобства. Неплохим и бесплатным решением будет программа Notepad++ или PSPad (ссылки на программы смотрите в конце статьи), к тому же они поддерживают русский язык.
Ну что? Готовы? Ну тогда начнём...
HTML 4.01
Изучать мы будем язык HTML версии 4.01 — так вам будет легче. Ну а как научимся — будем совершенствовать наши знания — выучим XHTML (новый, более строгий вариант HTML, но произошедший не от HTML а от XML) и CSS (каскадные таблицы стилей — используются для описания оформления документов — потом поймёте о чём я).
Теги и атрибуты
Язык HTML представляет собой набор тегов (специальные слова, заключённые в угловые скобки). Теги делятся на открывающие и закрывающие, но есть "пустые" теги, которые не имеют парного закрывающего тега. Многие теги имеют набор атрибутов, но их может и не быть. Атрибуты желательно брать в кавычки. Атрибут записывается в открывающем теге и начинается с имени атрибута, за которым следует знак равенства и значение атрибута.
Теги в HTML не чувствительны к регистру. Их можно набирать хоть большими, хоть маленькими символами — значения это не имеет. Но лучше я бы советовал вам набирать всё маленькими символами — так вам потом будет легче перейти к изучению более строгого языка — XHTML.
Теги при просмотре в браузере мы не видим, они влияют на отображение информации, заключённой между ними.
Рассмотрим вышесказанное на примере:
Code
<a href="http://designarts.ru/" title="Перейти на сайт DesignArts.ru">DesignArts.ru — уроки дизайна</a>
На примере вы видите тег для обозначения гиперссылок. Данный тег делится на открывающий <a> и парный ему, закрывающий </a>. Внутри открывающего тега указаны два его атрибута — это href со значением http://designarts.ru, что указывает на путь, по которому мы перейдём по нажатию на ссылку; и атрибут title со значением "Перейти на сайт DesignArts.ru", который отображается при наведении курсора на ссылку виде всплывающей подсказки и поясняет нам куда мы перейдём по нажатию на ссылку. Между тегами <a> и </a> находится текст "DesignArts.ru — уроки дизайна" — его мы и увидим на странице виде ссылки (при просмотре в браузере), а теги отображаться не будут.
Структура HTML документа
Теперь, когда мы знаем что такое теги, мы можем рассмотреть структуру простейшего веб-документа.
Все веб-документы, написанные на языке HTML, имеют следующую структуру:
Code
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Тег <html> и парный ему </html> указывает программе просмотра страниц (браузеру) что это HTML-документ.
Документ делится на две основные части — голову и тело документа, которые обозначаются тегами <head></head> и <body></body> соответственно.
Тег <head></head> представляет собой место, где помещается различная информация, не отображаемая в теле документа, т.е. на странице мы её не увидим. В данный тег заключается тег названия (заголовок) документа — <title></title> (отображается в заголовке окна браузера) и так называемые мета-теги, которые используются поисковыми системами (о этих тегах мы поговорим позже).
Тег <body> с закрывающим </body> определяет видимую часть документа. В этот тег заключается вся содержательная часть документа (текст, изображения, формы для заполнения и другие объекты).
Простейшая страница
Давайте создадим простейшую страницу, содержащую текст и ссылку на светло-голубом фоне:
Code
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href=http://designarts.ru/ title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.
</body>
</html>
В данном примере для создания голубого фона страницы используется атрибут bgcolor тега <body>. Значение этого атрибута: f0ffff — это шестнадцатеричный код выбранного нами цвета.
Попробуйте набрать этот текст в текстовом редакторе, сохраните в файле с расширением .html и попробуйте открыть в браузере. Получилось? Да? Ну тогда идём дальше...
Теги физического форматирования
Теперь нам нужно как-то визуально выделить определённые слова, например жирным шрифтом или наклонным (курсивом). Для этого есть специальные теги, которые образуют группу тегов физического форматирования текста.
Вот примеры самых распространённых тегов данной категории:
Code
<b></b> — тег, делающий заключённый в него текст жирным.
<i></i> — тег, который создаёт наклонный текст (курсив).
<u></u> — с помощью этого тега текст становится подчёркнутым.
Давайте применим эти теги на нашей странице:
Code
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<br>
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст: <br>
<b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u>
</body>
</html>
Как вы заметили на примере, теги можно вкладывать друг в друга. Также в данном примере вы заметили тег <br> — это тег переноса строки, о нём я расскажу чуть-чуть ниже.
Так же к группе физического форматирования текста относятся теги:
<font></font> — определяет для текста выводимый шрифт, его цвет и размер. Размер может иметь значения от 1 до 7. По умолчанию он равен 3.
<br> — этот тег служит для перевода строки (он нужен потому, что то, что вы в текстовом редакторе переведёте текст на новую строку, никак не отобразится при просмотре в браузере). Тег не имеет парного закрывающего тега.
<hr> — служит для добавления в документ горизонтальной линии. Перед и после линии помещается пустая строка. Как и тег <br>, у тега <hr> парного закрывающего тега нету.
<p></p> — данный тег служит для создания параграфов.
Есть и другие, но пока мы их трогать не будем...
Давайте рассмотрим влияние этих тегов на примере:
Code
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
<p>Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<hr>
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст.<br>
Текст ниже будет находится в новом параграфе:</p>
<p><b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u></p>
<p><i><font color="ff0000" size="4">А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...</font></i></p>
</body>
</html>
Думаю, тут всё понятно, поэтому можем двигаться дальше.
Картинки на странице
Неплохо бы добавить на нашу страничку какую-нибудь картинку, например в качестве логотипа или "шапки" сайта.
Для вставки изображений используется тег <img>, который не имеет закрывающего тега.
Тег <img> имеет следующие часто используемые атрибуты:
src — обязательный атрибут, указывает на путь к рисунку (URL).
alt — альтернативный текст. Отображается на месте рисунка в том случае, если отключены картинки, или картинка ещё не загрузилась или её файл отсутствует. Рекомендуется прописывать данный атрибут для каждого изображения, или, в противном случае, назначать ему пустое значение (alt=" " ).
border — толщина рамки вокруг изображения, измеряется в пикселях. По умолчанию рамка отсутствует.
width — ширина изображения в пикселях или в процентах. Этот атрибут не так важен, но его лучше указать — это ускорит загрузку страницы, т.к. браузеру уже не нужно будет его вычислять.
height — высота изображения. Смысл такой же как и у ширины.
align — выравнивание изображения относительно одной из сторон документа. Может иметь значения: left (по левому краю), right (по правому краю), center (по центру по горизонтали), top (по верхнему краю), bottom (по нижнему краю) и middle (по середине по вертикали).
hspace — данный параметр позволяет изменить отступ справа и слева от картинки.
vspace — тоже, но сверху и снизу.
Ну что, пора дополнить нашу страничку изображениями. Сверху страницы поместим логотип-шапку, который ещё будет служить ссылкой на главную страницу этого сайта, ну а в текст добавим обычную картинку:
Code
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
<a href="http://designarts.ru/" title="Перейти на главную страницу"><img src="logo.jpg" alt="DesignArts.ru — уроки дизайна. Но этот текст вы увидите, если отключите отображение картинок."></a><br>
<p>Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<hr>
<img src="simple.jpg" alt="А это пример изображения в тексте" align="left">На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст.<br>
Текст ниже будет находится в новом параграфе:</p>
<p><b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u></p>
<p><i><font color="ff0000" size="4">А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...</font></i></p>
</body>
</html>
Надеюсь, что у вас всё получилось.
Кстати, чтобы не запутаться в набранном коде, можно добавлять в него свои комментарии — для этого есть специальный тег: <!-- -->, текст, заключённый в этом теге, отображаться на странице не будет. Выглядит комментарий следующим образом:
Code
<!-- Это комментарий, но добавив его на страницу и просмотрев в браузере вы ничего не увидите -->
Так же стоит упомянуть тег <center></center> — данный тег применяется для выравнивания любого элемента по середине страницы. Можно использовать, например, в том случае, когда атрибут align="center" нам не помогает добиться желаемого результата.
Ну вот мы и рассмотрели самые важные теги форматирования текста. Если я упустил какой-то важный тег, тогда я расскажу о нём как только мы с ним столкнемся.
Таблицы
Теперь давайте перейдём к очень важному пункту — к таблицам. Сразу вы подумали: а зачем мне таблицы? Скажу сразу, что таблицы используются не только по своему главному назначению — для вывода табличных данных, а для разметки (верстки) страницы, причём используются для этой цели чаще.
Для создания таблицы служит тег <table></table>. Чтобы мы смогли увидеть границы таблицы есть у этого тега атрибут border, величина которого измеряется в пикселях.
Для того, чтобы разбить таблицу на строки, служит тег <tr></tr>.
Чтобы разбить строки на ячейки (именно строки — не разбив таблицу на строки мы не сможем разбить её на ячейки) есть тег <td></td>.
Для указания заголовка таблицы служит тег <th></th> — он работает таким же образом, как и <td></td>, но текст в заголовке по умолчанию выделяется жирным шрифтом и выравнивается по центру. И кроме видимых различий данный тег (<th></th>) производит логическую разметку таблицы (это нужно поисковикам).
Рассмотрим вышесказанное на примере — создадим простейшую таблицу из четырёх строк и двух столбцов:
Code
<table border="1">
<tr><th>Название сайта</th><th>Комментарий</th></tr>
<tr><td>DesignArts.ru</td><td>сайт о дизайне, уроки дизайна</td></tr>
<tr><td>Inter-Pol.info</td><td>всё самое ИНТЕРесное и ПОЛезное</td></tr>
<tr><td>forum.Inter-Pol.info</td><td>форум — тут можно с пользой провести время</td></tr>
</table>
Az1aT ft. Ю.Б.-Папа ft. Адайхан - Журек сыр... 
