В первом уроке, курса — HTML с нуля, мы разберем из чего состоит web-страница и попытаемся понять логику построение HTML кода.
Web-страница представляет из себя некоторый физический файл на дисковом пространстве с расширением .html или .php, который открывается с помощью браузера и содержит в себе определенный код регулирующий отображение данной страницы.
Весь HTML код web страница состоит из тегов. Тег — это своеобразный строительный материал, который определяет различные способы отображения элемента в графическом виде. В HTML теги объявляются с помощью конструкции: <‘название тега’>. Например: <p>. Можно выделить два основных типа тегов:
- Закрывающийся тег.
- Не закрывающийся тег.
Первый тип тега должен обязательно закрываться, если он был открыт. Закрывается он с помощью конструкции: </’название тега’>. Например: </p>. Теги такого типа, как правило используются для содержания какого либо контента, либо других тегов. Например для того что бы вывести текст на экран браузера можно воспользоваться тегом p.
Как видно в примере выше, мы пишем текст который хотим увидеть на экране между открывающимся и закрывающимся тегом <p>.
Второй тип — не закрывающийся тег. Думаю из названия уже понятны различия. Данный тип тега не имеет закрывающейся конструкции. Например:
Данная строка отобразит в браузере изображение соответствующее указанному пути. Между такими тегами нельзя вставить какой то контент — они являются самостоятельными, но такой тег можно добавить в закрывающийся. Например:
Любой тег может иметь определенные атрибуты. С одним из таких мы уже столкнулись, задавая путь к изображению для тега <img> — это src. Для разных тегов может быть разный набор доступных атрибутов, но есть некоторые атрибуты которые доступны абсолютно для всех тегов. Насчет них мы поговорим позже.
В зависимости от использующихся тегов, верстку сайта можно разделяется на два типа:
- Табличная верстка
- Блочная верстка
Табличную мы сейчас рассматривать не будем, так как ей уже никто не пользуется, а по второму способу рекомендую прочитать мою статью Блочная верстка в которой описана теория верстки сайтов блоками, а здесь я приведу главный вывод той статьи, без которого будет не возможно продолжить данный курс: вся логика блочной верстки заключается в том, что вся страница — это своеобразная матрешка, и большинство элементов содержат в себе другие элементы образовывая иерархическую структуру. Основной тег при таком подходе — <div>.
Разобравшись с основами HTML, перейдём к изучению основных тегов. Читайте об этом в следующей части курса:
