В этой статье я познакомлю вас с основами HyperText Markup Language, т.е. HTML. Расскажу про основные теги и про то, как им пользоваться.

Начнем с того, что подготовим наше рабочее место. Что нам нужно:
- Создать папку. Название можно сделать любое, я напишу "html первые шаги", что и вам советую;
- Открыть блокнот.

Начнем с самого-самого начала, т.е. с понятия тег. Тег - это элемент, необходимый для разметки гипертекста. Любой сайт, который вы найдете в интернете, состоит из множества тегов (а также стилей, скриптов и т.д.). Оформляется он в такие вот скобочки: <тег>. Если есть открывающий тег, то нужен и закрывающий. Будет примерно такой вид:

<тег открывается>
тут какая-то информация


Иногда встречаются теги, которые не требуют закрытия. О них поговорим позже. В общем, все, что находится в таких скобках <> - это тег и не отображается в видимой части документа.

И так, вернемся к нашему блокноту. Создадим первую страничку. Копируем данный код в блокнот:



Затем выбираем пункт "Сохранить как" и выставляем вот такие вот настройки:



Очень важно, чтобы в конце названия стояло ".html". Теперь, не закрывая блокнот, открываем MyPage в браузере. Что мы сейчас будем делать? Будет всячески "мучить" html код в блокноте и смотреть результат в браузере. После каждого изменения необходимо сохранять информацию в блокноте и обновлять окно браузера (F5).

Начнем-с.
С данного момента, в тегах перед скобкой я буду ставить пробел, чтобы он не исчезал при публикации статьи. Будьте внимательны при копировании, не забывайте удалять пробел перед скобкой!
Самый первый тег, который мы видим - это < html>. С него все начинается. Это тег, который открывает документ.
Далее мы видим < head> - это, так сказать, голова документа, т.е. невидимая часть. Обычно сюда вставляют различные css-стили, скрипты, мета-теги и др.
Если есть голова, то должно быть и тело. За это отвечает тег < body>. Это видимая часть документа. Все, что вы видите на сайте, включая на этом, находится в теге < body>.
< title> - Название страницы, которое отображается в табах браузера.

Посмотрим, что у нас получилось.



Неплохо, правда?

Давайте теперь попробуем немного подкрасить нашу страничку. Разберем тег < font>. Он нужен для того, чтобы задать стили тексту, который находится в этом теге. У него есть 3 атрибута: size - задает размер, color - задает цвет и face - задает стиль шрифта. Мы немного увеличим шрифт и сделаем текст красного цвета


Атрибуты задаются в таком виде: название атрибута="стиль". Цвета задаются либо английскими названиями (red - красный, green - зеленый и т.д.), либо в шестнадцатеричной системе счисления. Например, код красного цвета будет ff0000, белого - ffffff, черного - 000000. Если вы задаете цвет в формате HEX (шестнадцатеричная с.с.), то перед кодом цвета необходимо поставить #. Пример: < font color="#ff0000"> text < /font>.
Размер задается по шкале от 1 до 7.

Посмотрим на результат:



По умолчанию цвет текста всегда черный, и, как вы, наверное, уже поняли, < font> задает стиль только тому тексту, который находится в нем. Но как сделать так, чтобы цвет и размер текста поменялись сразу на всех странице? Ведь они состоят не только из одного слова, не прописывать же после каждого предложения font, правильно? Для этого мы вернемся к < body>. В этом элементе можно настроить отображение сайта как угодно: установить размер, шрифт, цвет текста, а также задний фон страницы. Есть ещё очень много функций, но о них я расскажу в другой раз. Остановимся на смене цвета текста и фона на странице.


Что мы сделали в этом коде? Изменили цвет текста во всем документе на белый (кроме того случая, когда мы задали цвет с помощью font) и установили серый фон на сайте. За текст отвечает атрибут text, за фон - bgcolor. Цвет указывается также, как и теге font.
Также вы, наверное, заметили новый тег - < br>. Он необходим для того, чтобы перенести строку, ведь в html нажатие на кнопку "Enter" ничего не значит. Проще говоря, br заменяет нажатие кнопки Enter.

Результат:



Далее поговорим о таких тегах, как < b>, < i>, < u> и < s>.
b - bold, переводится, как "жирный". Дает полужирный стиль тексту.
i - italic, переводится, как "курсив". Написание текста под наклоном.
u - underline, т.е. "подчеркивание". Подчеркивает текст.
s - strike through - зачеркивать. Зачеркивает текст.

Теперь посмотрим, как это выглядит в html



Пример:



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



Что у нас получилось:



На этом мы закончим первый шаг изучения основ html.