Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на 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.

Теги при просмотре в браузере мы не видим, они влияют на отображение информации, заключённой между ними.

Рассмотрим вышесказанное на примере:

На примере вы видите тег для обозначения гиперссылок. Данный тег делится на открывающий и парный ему, закрывающий . Внутри открывающего тега указаны два его атрибута — это href со значением http://myarts.moy.su, что указывает на путь, по которому мы перейдём по нажатию на ссылку; и атрибут title со значением "Перейти на сайт myarts.moy.su", который отображается при наведении курсора на ссылку виде всплывающей подсказки и поясняет нам куда мы перейдём по нажатию на ссылку. Между тегами и находится текст "myarts.moy.su - Все для Веб-Дизайна" — его мы и увидим на странице виде ссылки (при просмотре в браузере), а теги отображаться не будут.

Структура HTML документа

Теперь, когда мы знаем что такое теги, мы можем рассмотреть структуру простейшего веб-документа.

Все веб-документы, написанные на языке HTML, имеют следующую структуру:

Тег и парный ему указывает программе просмотра страниц (браузеру) что это HTML-документ.

Документ делится на две основные части — голову и тело документа, которые обозначаются тегами и соответственно.

Тег представляет собой место, где помещается различная информация, не отображаемая в теле документа, т.е. на странице мы её не увидим. В данный тег заключается тег названия (заголовок) документа — (отображается в заголовке окна браузера) и так называемые мета-теги, которые используются поисковыми системами (о этих тегах мы поговорим позже).

Тег с закрывающим определяет видимую часть документа. В этот тег заключается вся содержательная часть документа (текст, изображения, формы для заполнения и другие объекты).

Простейшая страница

Давайте создадим простейшую страницу, содержащую текст и ссылку на светло-голубом фоне:

В данном примере для создания голубого фона страницы используется атрибут bgcolor тега . Значение этого атрибута: f0ffff — это шестнадцатеричный код выбранного нами цвета.

Попробуйте набрать этот текст в текстовом редакторе, сохраните в файле с расширением .html и попробуйте открыть в браузере. Получилось? Да? Ну тогда идём дальше...

Теги физического форматирования

Теперь нам нужно как-то визуально выделить определённые слова, например жирным шрифтом или наклонным (курсивом). Для этого есть специальные теги, которые образуют группу тегов физического форматирования текста.

Вот примеры самых распространённых тегов данной категории:

Как вы заметили на примере, теги можно вкладывать друг в друга. Также в данном примере вы заметили тег
— это тег переноса строки, о нём я расскажу чуть-чуть ниже.

Так же к группе физического форматирования текста относятся теги:

* — определяет для текста выводимый шрифт, его цвет и размер. Размер может иметь значения от 1 до 7. По умолчанию он равен 3.
*
— этот тег служит для перевода строки (он нужен потому, что то, что вы в текстовом редакторе переведёте текст на новую строку, никак не отобразится при просмотре в браузере). Тег не имеет парного закрывающего тега.
*

Есть и другие, но пока мы их трогать не будем...

Давайте рассмотрим влияние этих тегов на примере:

Думаю, тут всё понятно, поэтому можем двигаться дальше.

Картинки на странице

Неплохо бы добавить на нашу страничку какую-нибудь картинку, например в качестве логотипа или "шапки" сайта.

Для вставки изображений используется тег <"img>, который не имеет закрывающего тега.

Тег <"img> имеет следующие часто используемые атрибуты:

* src — обязательный атрибут, указывает на путь к рисунку (URL).
* alt — альтернативный текст. Отображается на месте рисунка в том случае, если отключены картинки, или картинка ещё не загрузилась или её файл отсутствует. Рекомендуется прописывать данный атрибут для каждого изображения, или, в противном случае, назначать ему пустое значение (alt=" " ).
* border — толщина рамки вокруг изображения, измеряется в пикселях. По умолчанию рамка отсутствует.
* width — ширина изображения в пикселях или в процентах. Этот атрибут не так важен, но его лучше указать — это ускорит загрузку страницы, т.к. браузеру уже не нужно будет его вычислять.
* height — высота изображения. Смысл такой же как и у ширины.
* align — выравнивание изображения относительно одной из сторон документа. Может иметь значения: left (по левому краю), right (по правому краю), center (по центру по горизонтали), top (по верхнему краю), bottom (по нижнему краю) и middle (по середине по вертикали).
* hspace — данный параметр позволяет изменить отступ справа и слева от картинки.
* vspace — тоже, но сверху и снизу.

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

Надеюсь, что у вас всё получилось.

Кстати, чтобы не запутаться в набранном коде, можно добавлять в него свои комментарии — для этого есть специальный тег: , текст, заключённый в этом теге, отображаться на странице не будет. Выглядит комментарий следующим образом:

Так же стоит упомянуть тег

Ну вот мы и рассмотрели самые важные теги форматирования текста. Если я упустил какой-то важный тег, тогда я расскажу о нём как только мы с ним столкнемся.

Таблицы

Теперь давайте перейдём к очень важному пункту — к таблицам. Сразу вы подумали: а зачем мне таблицы? Скажу сразу, что таблицы используются не только по своему главному назначению — для вывода табличных данных, а для разметки (верстки) страницы, причём используются для этой цели чаще.

Для создания таблицы служит тег <"table>. Чтобы мы смогли увидеть границы таблицы есть у этого тега атрибут border, величина которого измеряется в пикселях.

Для того, чтобы разбить таблицу на строки, служит тег "<"tr>".

Чтобы разбить строки на ячейки (именно строки — не разбив таблицу на строки мы не сможем разбить её на ячейки) есть тег "<"td>".

Для указания заголовка таблицы служит тег <"th> — он работает таким же образом, как и , но текст в заголовке по умолчанию выделяется жирным шрифтом и выравнивается по центру. И кроме видимых различий данный тег (<"th>) производит логическую разметку таблицы (это нужно поисковикам).

Рассмотрим вышесказанное на примере — создадим простейшую таблицу из четырёх строк и двух столбцов:

Вы наверное заметили, что рамка получилась всё же толще, чем 1 пиксель. Сейчас объясню почему это произошло:

У таблицы ещё есть такой атрибут, как cellspacing — расстояние между соседними ячейками.

Также можно указать расстояния между ячейками и их содержанием — с помощью атрибута cellpadding.

Таблице и её столбцам (ячейкам) можно задавать такие атрибуты, как ширину (width) и высоту (height) в пикселях или процентах, цвет фона (bgcolor). У строки нету атрибута ширины — строка — она шириной на всю таблицу.

Сейчас я вам это покажу на примере:

Тут я сделал фон всей таблицы немного желтоватый, а фон верхней строки (заголовка) оранжевым. Задал ширину таблицы в 600 пикселей. Высоту строки с заголовком сделал равной 45 пикселей, ширину первого столбца — 35% от ширины таблицы. Ширину второго столбца задавать не обязательно — она автоматически вычисляется браузером зная ширину таблицы и первого столбца.

Допустим, что нам нужно объединить ячейки — по горизонтали или по вертикали. Для этого есть специальные атрибуты: colspan (объединение по горизонтали) и rowspan (объединение ячеек по вертикали):

Возьмём такую таблицу:

Теперь объединим ячейки следующим образом:

Как видите — у нас появились лишние ячейки, которые "выползли" за таблицу. Это ячейки 3, 6, 8, 9 — их просто можно удалить.

Окончательный вариант таблицы будет выглядеть следующим образом:

Так... основы про таблицы я вам рассказал. Помните, я говорил, что таблиц применяются не только для отображения табличных данных, но и для верстки (разметки) страницы. Вот сейчас мы это и рассмотрим...

Верстка страницы с помощью таблиц

Давайте попробуем разметить страницу по стандартному шаблону — сверху шапка сайта, а снизу две колонки — слева меню, справа содержание страницы:

Теперь приведём в порядок нашу страницу — выровняем таблицу по центру страницы, текст в ячейках выровняем по верхнему краю и по центру. Для выравнивания по вертикали есть атрибут valign, принимающий значения top, middle, bottom (сверху, по середине, снизу):

Шапка сайта

Теперь давайте оформим шапку сайта — вставим туда наш логотип. Это можно сделать двумя способами: можно вставить картинку с помощью соответствующего тега (мы это уже рассмотрели и умеем), а можно назначить в качестве фона ячейки — для этого в теге "" добавим атрибут background="url", где url — это путь к файлу с рисунком.

Но будет лучше, если наш логотип будет одновременно ссылкой на главную страницу сайта, поэтому придётся применить первый метод — вставим в эту ячейку картинку и сделаем её ссылкой:

Простейшую шапку для нашего сайта мы сделали. Теперь давайте попробуем заполнить страницу содержанием. Можно, конечно, просто добавить нужную нам информацию в ячейки "Меню" и "Содержание", а можно сделать получше — сделать окошки, в которых будут меню, новости сайты и т.п.

Меню

Давайте представим как будут выглядеть наши менюшки. Пусть сверху в будет название меню, а ниже его содержание — ссылки на разные страницы.

Для создания окошек для меню будет использовать всё те же таблицы. Вот какое меню сделал я:

Тут вы наверное заметили в теге font, который управляет свойствами шрифта, новый атрибут, который я вам не объяснил — это атрибут face — он определяет шрифт, которым будет отображен текст, в данном случае это шрифт verdana.

Давайте теперь немного приукрасим наш шаблончик меню — сделаем аккуратный черный бордюр толщиной в 1 пиксель. В HTML нет специального атрибута для изменения цвета бордюров, но это не беда — мы поступим хитрее. Давайте сделает следующее: отключим бордюры (border="0" или просто удалите этот атрибут), затем расстояние между ячейками сделаем равным 1 пикселю (cellspacing="1"), фон таблицы сделаем чёрным, а фон ячейки с содержанием — белым — с помощью атрибута bgcolor:

Теперь наше меню будет выглядеть куда лучше.

Сейчас его можно заполнить нужными пунктами и вставить на нашу страницу. Вот что у меня получилось:

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

Окошки для новостей

Настало время сделать окошки для новостей сайта — мы будем их делать по аналогии с менюшками, только снизу добавим ещё одну строку и окошко сделаем пошире:

Готовая страница

Ну а теперь давайте это окошко с новостью добавим на нашу страничку:

Ну вот мы и создали нашу первую простую страничку!

Заключение

Чтобы понять основы языка HTML этого будет достаточно. Тут мы использовали только самые часто употребляемые теги языка HTML 4.01. Если вам понадобится полный список тегов с описаниями, то для этого на нашем сайте есть справочник тегов — его и смотрите. Будет что не понятно — задавайте мне вопросы (на форуме этого сайта).

Что-то очень красивое создать с помощью одного HTML почти невозможно, т.к. по новым стандартом он должен использоваться только для разметки страницы, а не для её оформления. А для оформления сейчас используются каскадные таблицы стилей (CSS) вместе с HTML или XHTML. Именно о CSS мы и поговорим в следующих статьях, я вам расскажу что это такое и как это внедряется на страницу, ну и всё остальное...