Обучение HTML

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

Любая система управления контентом, включая WordPress, не может существовать без HTML тегов. Если вы серьезно собираетесь работать с различными CMS , например WordPress, редактировать некоторые файлы, то вам необходимы элементарные понятия, что есть что. Для изучения советую использовать NotePad++ либо простой блокнот, если вы хотите писать разметку без подсветки кода. Бытует мнение, что если писать код на совсем простом блокноте, то все важные элементы и синтаксис языка запоминается лучше, чем когда есть подсветка кода.

Основные тэги HTML

Прежде чем начать разбираться в тэгах, запомним, что есть теги, которые закрываются, например <p></p> и теги, которые не закрываются <br /> Как вы ведите тег <p> (означает параграф), закрываемый тэг. Закрывается при помощи написания такого же тэга, но просто со слешем.  Так же надо запомнить, что теги классифицируются и делятся на:

  • Тэги отвечающие за структуру странницы <html></html>, <head></head><title></title><body></body>
  • Тэги отвечающие за форматирование текста <h></h>, <p></p>,<br />, <center></center>
  • Тэги отвечающие за форматирование шрифта <b></b>, <i></i>, <font size=10px></font>
  • Тэги отвечающие за создание гиперссылок <a href=”URL”>Текст ссылки</a> подробнее читайте в этой статье
  • Тэги отвечающие за вставку изображений <img src=”URL”>. Обратите внимание, что тег не закрывается дополнительным повторяющимся тегом со слешем.

Это конечно лишь малая часть всего, но у HTML есть один плюс – его очень легко освоить. Достаточно найти любой простой самоучитель и начать верстать простые документы, потом уже можно присоединить CSS. Но для начала разберем значение каждого тэга по отдельности.  Некоторые тэги необходимы при создания HTML документа, так как нарушиться валидность верстки, а это не хорошо. Что-то я забегаю вперед. Приступим.

Значение тэгов отвечающих за структуру:

  • <html> — определяет начало и конец документа, ну или HTML странницы
  • <head> — часть документа, в которой хранятся название, описание, и другие метаданные
  • <title> — тег, который отвечает за заголовок документа, т.е. тот заголовок, который вы видите во вкладке своего браузера
  • <body> — этот тэг отвечает за содержание страницы. Сюда включается весь контент, текста, видео, изображения и т.д.

Значение тэгов отвечающих за форматирование текста:

  • <h> — этот тэг обычно используется для вывода заголовков, и теги имею числовое значение. Пример: <h1>…<h6>. И в данном случае, чем число больше, тем меньше размер заголовка.
  • <p> — это тэг параграфа, т.е. между этим тэгом пишется текст и если нужно писать с новой строки, обычно использую еще несколько таких тэгов.
  • <br /> — этот тэг не закрывается дополнительным тэгом. Его назначение это перевод текста на новую строку.
  • <center> — ну тут понятно из названия, что делает тэг. Он централизует текст, который находится в его пределах.

Значение тэгов отвечающих за форматирование шрифта:

  • <b></b> — тэг отвечает за выделение текста жирным текстом
  •  <i></i> — этот тэг отвечает за склонение текста
  •  <font size=10px></font> — тут так же все понятно, тэг позволяет задавать размеры текста.

Значение тэгов отвечающих за создание гиперссылок:

  • <a href=”URL”>Текст ссылки</a> — соответственно тэг, который создает гиперссылку на другой сайт
  • <a href=”#”>Текст ссылки</a> — либо можно создать якорь я при помощи гиперссылки быстро переходить к нему.

Также остался последний тег, который отвечает за вставку изображений в документ <img src=”URL”>. Заметьте, что конструкцию такого тэга можно менять, добавлять различные параметры, например выравнивания изображения. На этом первая часть статьи закончена, во второй части мы уже создадим свой первый HTML документ.