Введение в HTML
Структура HTML документа
Служебная информация в HTML. Язык, кодировка и другие параметры
Фон страницы и таблица цветов HTML
Мультимедия в веб-документе
Ссылки на странице
Почтовый ящик
Форматирование текста
Таблицы в HTML



Введение в HTML

HTML тег сиськи <tits>Прежде чем приступить к изучению HTML давайте с вами разберёмся в трёх важных понятиях, относящихся к нашей теме.
Все страницы, сайты и даже поисковые системы состоят из веб-документов. Сейчас, с развитием технологий и появлением новых языков программирования для web, мы можем встретить не только веб-документы с расширением html, но и shtml, php, asp и другими, но на каком бы языке не был написан наш веб-документ, нам не обойтись в нём без HTML. HTML это язык, на котором были написаны и первая страница и первый сайт в интернете и поэтому все ориентируются именно на него, кроме того HTML это не просто язык программирования (на самом деле он практически не даёт возможности программировать), HTML это язык разметки или форматирования, т.е. язык, отвечающий за то как будет выглядеть наш веб-документ, поэтому HTML легко уживается с PHP, ASP, SSI и другими технологиями, т.к. он не влияет на их работу.

И прежде чем люди переходят к изучению более сложных языков программирования для веб, они начинают свой путь именно с изучения HTML.

Таким образом, можно сдеать такое определение HTML – HyperText Markup Language (с англ. язык разметки гипертекста) – язык разметки документа для интернет, который интерпретируется браузером и отображается в нём в виде документа доступного для восприятия человеком.

А как мы уже сказали выше Веб-документ – это файл с расширением html, содержащий в себе кроме текстовой и графической информации служебные теги.

Теги – это специальные метки, которые используются в коде веб-документа для указания программе-браузеру, что данный документ является веб-документом и описывают как этот документ и текст в нём должен выглядеть. Теги заключаются в скобки, они же знаки больше и меньше < html > и, как правило, теги являются парными записями, т.е. если мы написали открывающий тег <html>, то должен быть и закрвающий </html>, чтобы браузер знал где ваш документ начался и где закончился.

Браузер – это программа для навигации и просмотра веб-ресурсов и веб-документов (вы наверняка ими как раз сейчас, при прочтении данной статьи и пользуетесь – Opera, Firefox, Internet Explorer, Google Chrome и другие).

А теперь перейдём к изучению структуры стандартного HTML документа.

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

Стандартный HTML документ выглядит примерно так:

<html>
<head>
<title>
Заголовок веб-документа
</title>
</head>
<body>
Содержание документа
</body>
</html>

Для начала присмотритесь внимательно. Вы увидите, что каждый тег в нашем примере парный. Есть начало и есть конец.

Давайте разберёмся что означает каждый из тегов.

<html> </html> - указывает программе, что файл является HTML документом
<head> </head> - тег заголовка, содержит различную служебную информацию для браузеров и поисковых систем
<title> </title> – заголовок документа, также он выводится в строке заголовка программы-браузера
<body> </body> – тег, указывает на то, что в нём идёт содержание документа, которое выводится в окне браузера

Служебная информация в HTML. Язык, кодировка и другие параметры

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

Чтобы указать на каком языке написан ваш сайт тег <html> нужно записать следующим образом:

<html lang=”ru”>

lang – это парметр указывающий язык
ru – собственно сам язык, в данном случае русский. Если мы хотим делать сайт на английском языке, то вместо ru нужно подставить en

Закрывающий тег </html> остаётся без изменений. Т.к. параметры применяются только один раз в начальном теге. Запомните это, чтобы не путаться в дальнейшем.

Кодировки
Далее, если вы хорошо дружите с различными операционными системами и программами, то должны были слышать о том, что существует большое количество кодировок для представления текстов.
HTML документы не исключение в компьютерном мире, поэтому у них тоже должна быть указана кодировка.
Делается это внутри тега <head> </head>
Путём добавления в него ещё одного тега:

<meta content=”text/html”; charset=win-1251″ http-equiv=”content-type”>

Во всей этой записи нас интересует charset=win-1251. где win-1251 параметр, указывающий на кодировку нашего документа.
В интернете популярны несколько видов кодировок:
win-1251 – самая популярная и самая распространённая за счёт того, что она используется в операционной системе Windows, а также приложениями для создания сайтов, написанных для этой ОС.
utf-8 – главный конкурент win-1251, обладающий большими возможностями по отображению символов различных языков мира. Многие сайты сейчас постепенно переходят от win-1251 к utf-8, в частности потому, что в ОС Windows поддержка этой кодировки также реализована и поэтому у пользователей не возникнет проблем при просмотре сайтов.
iso-8859-1 – кодировка одобренная европейским союзом для представления символов, в рунете практически не используется.
koi8-r – когда-то на заре появления компьютеров для советских, а позже российских ПК были созданы различные виды кодировок под общим названием koi8. Долгое время, пока в win-1251 не было нормальной поддержки русского языка, KOI8 были единственным способом русифицировать программы, а также HTML документы, на данный момент эта кодировка практически не используется, а если вы и наткнётесь на такой сайт, то возможно, что этот сайт работает как раз с тех незапамятных времён и возник в одно время с появлением интернета.

Ещё одно важное замечание о кодировках. Если вы всё же выберите utf-8, то имейте ввиду, что эта кодировка, в отличие от остальных является двухбайтовой, т.е. на хранение символа ей необходимо два байта, а не 1, как у других, поэтому документы, созданные в кодировке utf-8, будут занимать в 1,5-2 раза больше места, чем аналогичные в других кодировках, но зато у вас и ваших пользователей не будет проблем с отображением символов.

Значок сайта
Возможно вы замечали, что при заходе на некоторые сайты, вместо иконки браузера или в строке адреса у вас показывается значок.
Особенно эти значки бросаются в глаза, если вы пользуетесь поисковой системой Yandex, которая отображает их при выдаче вам результатов поиска.
Если вы также хотите выделиться таким значком, то кроме того что вы должны создать файл favicon.ico в каком-либо редакторе иконок и положить его рядом со страницами вашего сайта, вам между тегами <head> </head> нужно добавить такую запись:

<link rel =”shortcut icon” href=”/favicon.ico”>

Тогда ваш сайт сможет выделиться кроме своего содержимого ещё и запоминающимся значком.

Исходя из выше изученного теперь приведём дополненную структуру HTML документа:

<html lang=”ru”>
<head>
<meta content=”text/html”; charset=utf-8″ http-equiv=”content-type”>
<link rel =”shortcut icon” href=”/favicon.ico”>
<title>
Заголовок веб-документа
</title>
</head>
<body>
Содержание документа
</body>
</html>


Фон страницы и таблица цветов HTML

Перейдём теперь к содержимому HTML документа, к той его части, которую видят люди.
Как уже было сказано выше это содержимое заключается между тегами <body> </body>, но и сам тег body может существенно помочь нам в оформлении нашего документа.

Для начал мы можем задать цвет фона нашей страницы. Например так:

<body bgcolor=”#FFFFFF”;>

если вы знаете английский, то думаю уже догалались что означает bgcolor – т.е. цвет заднего фона, а символы после двоеточия это HEX-код цвета, который используется в HTML. Также вместе с HEX кодом можно использовать RGB коды, тогда эта же запись будет выгляеть так:

<body bgcolor=”rgb(255, 255, 255)”;>

Коды цветов запомнить сложно, да, в общем-то, и не обязательно, поэтому сразу приведём таблицу самых распространённых цветов, которые используют вебмастера:

Цвет Код цвета HEX Код цвета в RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

Если вы хотите большей оригинальности от фона вашего сайта, то можете сделать задним фоном сайта картинку, например, анимирированный рисунок gif и т.п.
Это записывается так:

<body background=”/image.jpg”;>

где image.jpg – ваша картинка, которая будет задним фоном страницы.

Также не лишним будет сразу в body указать цвет основного шрифта и цвет ссылок на странице
Делается это, например, так:

<body text=”#000000″ alink=”#000099″ link=”#000099″ vlink=”#990099″;>

text – задаёт цвет шрифта на странице
alink – цвет ссылки, на которую мы навели мышкой
link – цвет ссылок на странице
vlink – цвет ссылки, по которой мы уже щёлкали мышкой

Мультимедия в веб-документе

Если вы делаете сайт музыкальной группы или просто музыкальный сайт, то возможно вы захотите, чтобы при заходе на страницу начинала проигрываться мелодия, можете воспользоваться таким тегом:

<bgsound src=melody.mp3>

где melody.mp3 – это ваша мелодия, которая будет играть на вашем сайте, а если вы хотите, чтобы мелодия проигралась один раз и замолчала, то можете добавить к вашему тегу параметр loop и указать сколько раз проигрывать мелодию, например:

<bgsound src=melody.mp3 loop=1>

Также вы можете вставлять видео в ваши странички вот таким тегом:

<img dynsrc=video.avi start=openfile loop=1>

В этом примере видео вставлено сразу с параметрами.
Параметр start – указывает способ запуска.
openfile – начать проигрывать как только загрузится страница
mouseover – проигрывать по наведению мыши
mouseclick – по щелчку левой кнопки мыши по видео

Ну и напоследок – самое простое вставка изображения на странице:

<img src=picture.jpg>


Ссылки на странице

Ссылка на какую-либо страницу в вашем документе вставляется следующим тегом:

<a href=page.html>Текст</a>

где page.html - ваша страница, вместо страницы можно вставлять и адрес какого-либо сайта, например так:

<a href=http://jeder.ru>Текст</a>

Если вы хотите, чтобы изображение было ссылкой, то используйте такую конструкцию тегов:

<a href=page.html><img src=picture.jpg></a>

page.html – это страница, на которую вы ссылаетесь,
picture.jpg – изображение

Если вы даёте ссылку на чужую страницу или сайт, то возможно вы захотите, чтобы при нажатии на неё пользователь не уходил с вашего сайта, а ссылка открывалась у него в новом окне, тогда добавьте к вашему коду со ссылкой параметр target=”_blank”.
Пример:

<a href=http://jeder.ru target=”_blank”>Текст</a>

Есть ещё полезное применение ссылок, а также специальных тегов – якорей, с помощью которых можно сделать навигацию по странице, если у вас на ней много текста и разделов, как в этом руководстве. Чтобы поняли о чём речь, вспомните Содержание в Word, наверняка вам его приходилось делать.
В случае HTML документа якорной ссылкой у нас будет пункт в содержании, а якорем заголовок новой главы.

В HTML коде это будет выглядеть так:

<a href=”#1″>Пункт 1 в содержании</a>
<a name=”1″>Раздел 1</a>

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

<a href=”#1″>Пункт 1 в содержании</a>
<a href=”#2″>Пункт 2 в содержании</a>
<a name=”1″>Раздел 1</a>
<a name=”2″>Раздел 2</a>

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

<a href=melody.mp3>Скачать</a>


Почтовый ящик

И ещё модная вещь, если вы пользуетесь программами отправки почты, встроенными в браузер или такими как Mozilla Thunderbird, то вам понравится тег отправки письма владельцу сайта:

<a href=”mailto:pochtovii@yaschik.ru”>Написать письмо</a>

вместо pochtovii@yaschik.ru вы можете подставить свой почтовый ящик и тогда, если кто-либо захочет написать вам письмо, то ему будет достаточно просто нажать на слова Написать письмо и его почтовая программа сразу среагирует и откроет окошко набора письма, где уже будет вбит ваш почтовый ящик.
Единственный минус – это существование спамеров в интернете, которые в отличие от нормальных людей с радостью пользуются такими вещами и шлют пользователям различные рекламные рассылки и вирусы.

Форматирование текста

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

Заголовки в HTML выделяются тегом <h1> </h1>
Обычно пользуются тегами заголовков от h1 до h6 – чем больше цифра заголовка, тем меньше шрифт.

Например, заголовок данной темы в виде кода выглядит так:

<h2>Форматирование текста</h2>

Если вы хотите, чтоб ваш текст писался с нового абзаца, то заключайте его между тегами <p> </p>, например:

<p>Наш абзац с большим количеством текста</p>

Кроме того, как тегам заголовков, так и тегам абзацев вы можете задавать параметры выравнивания align, например:

<h1 align=center>Заголовок выровненный по центру</h1>

у параметра align возможны следующие значения:
center – выравнивание по центру
left – по левому краю
right – по правому краю
justify – выравнивание текста по ширине

Также можно выделять отдельные слова или предложения ещё четырьмя видами тегов:
<b>Текст</b> – выделение слова Текст жирным шрифтом
<i>Текст</i> – выделение слова Текст курсивом
<u>Текст</u> – слово Текст подчёркнуто
<s>Текст</s> – слово Текст зачёркнуто

Также часто используют тег <br> – который позволяет писать текст с новой строки. Этот тег один из немногих, не имеет пары.

Пример:

Идёт большой текст о чём-либо
<br>
Текст продолжается, но уже с новой строчки


Таблицы в HTML

HTML предусматривает также создание таблиц.
Сложного в этом ничего нет, главное не запутаться в обилие кода, который таблицу описывает.

Структура Таблицы в HTML:

<table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Разберём теги.
<table> </table> – указывают, что у нас таблица и являются обязательными тегами
<tr> </tr> – указывают, что нужно отрисовать столбец, причём заметьте, что этот тег у нас встречается дважды, это означает, что сколько пар этих тегов у нас будет внутри table, столько столбцов наша таблица будет содержать
<td> </td> – тег ячейки, если мы впишем ещё один тег ячейки внутри столбца, то у нас будет уже две ячейки, главное следите, чтобы в кажом столбце у вас было равное количество ячеек, иначе таблица развалится или будет выглядеть не так, как вы задумали

Аналогично тегу body вы можете задавать тегу table цвет фона и цвет шрифта, добавление параметров width и height позволит вам задать ширину и высоту таблицы соответственно, параметр border позволит задать толщину границы таблицы, а bordercolor – её цвет.

Пример, таблица шириной 100% от размера экрана, высотой 200 пикселей, толщиной границы в 2 пиксела и фоном белого цвета:

<table width=”100%” height=”200px” border=”2″ bgcolor=”#FFFFFF”>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Вот мы и осилили HTML.
Безусловно всё в такой маленькой статье освятить невозможно, но азы были тут представлены в полной мере.
Остальное вам придёт с опытом.
Также хотелось бы сказать, что сейчас, никто не пишет сайты вручную, иначе это занимало бы по нескольку месяцев, а то и полгода-год. Хорошим подспорьем для вебмастера выступают различные  программы редакторы HTML кода.

На моём сайте есть программа Kompozer для ОС [Windows] и [Linux], она не сложнее Word и знания полученные из этого материала плюс возможности программы помогут вам легко и быстро создавать красочные сайты и дальше постигать HTML.