Обучение 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 документ.

More from my site