Основы HTML. Часть 1

В первом уроке, курса — HTML с нуля, мы разберем из чего состоит web-страница и попытаемся понять логику построение HTML кода.

Web-страница представляет из себя некоторый физический файл на дисковом пространстве с расширением .html или .php, который открывается с помощью браузера и содержит в себе определенный код регулирующий отображение данной страницы.

Весь HTML код web страница состоит из тегов. Тег — это своеобразный строительный материал, который определяет различные способы отображения элемента в графическом виде. В HTML теги объявляются с помощью конструкции: <‘название тега’>. Например: <p>. Можно выделить два основных типа тегов:

  1. Закрывающийся тег.
  2. Не закрывающийся тег.

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

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

Второй тип — не закрывающийся тег. Думаю из названия уже понятны различия. Данный тип тега не имеет закрывающейся конструкции. Например:

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

Любой тег может иметь определенные атрибуты. С одним из таких мы уже столкнулись, задавая путь к изображению для тега <img> — это src. Для разных тегов может быть разный набор доступных атрибутов, но есть некоторые атрибуты которые доступны абсолютно для всех тегов. Насчет них мы поговорим позже.

В зависимости  от использующихся тегов, верстку сайта можно разделяется на два типа:

  1. Табличная верстка
  2. Блочная верстка

Табличную мы сейчас рассматривать не будем, так как ей уже никто не пользуется, а по второму способу рекомендую прочитать мою статью Блочная верстка  в которой описана теория верстки сайтов блоками, а здесь я приведу главный вывод той статьи, без которого будет не возможно продолжить данный курс: вся логика блочной верстки заключается в том, что вся страница — это своеобразная матрешка, и большинство элементов содержат в себе другие элементы образовывая иерархическую структуру. Основной тег при таком подходе — <div>.

Разобравшись с основами HTML, перейдём к изучению основных тегов. Читайте об этом в следующей части курса:

Теги и атрибуты HTML. Часть 2.

Добавить комментарий

Ваш e-mail не будет опубликован.