Введение в HTML

HTML

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

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

Поэтому, если Вы решили делать себе (или не себе) сайт, то никуда Вы от HTML не денетесь. Хотя бы основы Вам все-таки придется изучить. Иначе, Вы просто не сможете эффективно справляться с возникающими в процессе разработки сайта трудностями.

Я уже давно хотел написать эту статью, но все как-то не доходили руки. Сейчас я понял, что тянуть дальше уже некуда, ибо все сайтостроение упирается в эту тему.

Поэтому пристегнитесь привязными ремнями приготовьтесь — мы начинаем изучение HTML.

Что такое HTML?

HTML (HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.

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

Документы, которые написаны в формате языка HTML, как правило имеют расширение .html или .htm

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

Структура HTML

Любой документ на языке HTML состоит из множества элементов. Они называются тегами и заключаются в <треугольные скобки>.

Есть теги обязательные (должны присутствовать в каждом документе) и необязательные (используются по мере необходимости).

Примеры обязательных тегов: <head>, <body>

Я не буду описывать Вам каждый тег. Это займет слишком много времени. Да и не за чем это делать. Уже давно есть множество ресурсов, на которых все замечательно описано. Я буду давать Вам ссылки на описание конкретных тегов. А Вы сами посмотрите и разберетесь. Договорились?

Итак, продолжим.

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

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

Пример: открывающий — <html>... закрывающий — </html>

Между этими тегами помещается содержимое. Это могут быть другие теги или целые конструкции. Кстати, есть теги, которые не требуют закрытия. Например тег переноса строки <br>.

Код может быть очень длинным и сложным, иметь множество уровней вложенности. Хотите пример?

Щелкните правой клавишей мыши на любом свободном месте страницы и в контекстном меню выберите опцию «Отобразить исходный код» или что-то в этом роде (в зависимости от браузера может отличаться).

В новом окне откроется HTML-код текущего документа. Посмотрите на него и ужаснитесь :)

Не пугайтесь, Вам не придется вручную писать такие страшные коды. Это за Вас сделает система управления контентом (CMS или движок сайта. Например Joomla или WordPress). Но при необходимости, Вы должны знать какой кусок кода за что отвечает.

Атрибуты HTML тегов.

Многие теги, кроме того, еще могут иметь атрибуты. С их помощью можно задать определенные свойства для элемента, который описывает данный конкретный тег.

Атрибуты записываются в открывающем теге после названия тега. Например:

1
<font size="5" color="red" face="Arial">содержимое тега</font>

В этой строке прописан тег <font> (шрифт), а для него применены атрибуты: size="5" (устанавливает размер шрифта), color="red" (цвет шрифта — красный) и fase="Arial" (название шрифта).

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

Специальные символы в HTML.

Специальные символы

Еще стоит упомянуть, что в HTML используется такое понятие, как специальные символы.

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

Например, Вам в тексте статьи необходимо поставить знак < (меньше). Простым способом Вы не сможете его поставить, потому что браузер воспримет его как начало тега. Приходится использовать специальные символы.

Они начинаются со значка & (амперсанд) и заканчиваются ; (точкой с запятой).

Также при помощи специальных символов можно вставить в документ, например, буквы греческого алфавита или специальные значки. Список используемых специальных символов смотрите здесь.

Ну что, загрузил? Это только начало. На самом деле нет в этом ничего страшного и сложного. Потихоньку со всем разберемся.

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

Не пропустите выход новых статей — обязательно подпишитесь на обновления блога и получайте информацию своевременно.

А теперь, для снятия напряжения предлагаю Вам посмотреть прикольное видео:

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.