Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Введение

Все сайты состоят из html-страниц.  Эти страницы представленны в виде файлов с  расширением .html

Есть конечно более сложные сайты, которые управляются CMS — Content Management System (система управления контентом сайта), и расширения у файлов сайта могут быть другие, к примеру .php Но об этом мы поговорим на более продвинутых курсах.

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

Каждый html-файл — это отдельная страница с размеченным при помощи html-тегов контентом.

Под контентом подразуемевается вся информация, оторбажаемая на странице: текст, картинки, иконки, видео и т. п.

Если открыть html-страницу в редакторе кода, ты увидишь что её структуру можно условно разделить на уровни вложенности одних тего в другие. О том из чего состоит страница и как организована вложенность мы сегодня и поговорим.

Что такое html-тег

Тег – это элемент языка разметки текста (HTML). Кратко говоря: «Тег – элемент HTML», все, что внутри тега, называют содержимым элемента.

Содержимое модержимое элемента может быть представленно как в виде контента, который оборачивается в тег, так и в виде параметров тега.

К слову, если ты экспортируешь весь текст из макета в html-страницу без какой либо html-разметки, то при открытии этого файла в браузере увидишь полотно из букв.

Почему всё так? Для ответа на этот вопрос нужно усвоить, что в сфере веб-разработки есть стандарты = правила, по которым работают браузеры. В эти же правила входит и описание того как html-страницы отрисовываются в веб-браузерах.

Эту тему я подробно разбираю в следующем уроке. Обязательно изучи.

Парные html-теги

Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег.

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

Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

Порядок вложенности можно описать как игрушку матрёшка. Последовательно вкладываем маленький контент в более крупные блоки, но не наоборот!

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

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

Одиночные теги

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

Атрибуты принято указывать через пробел.

Каждый атрибут имеет имя и параметры.

Парамертов может быть несколько. В таком случае их тоже перечисляют через запятую.

Обрати внимание что параметр не имеет пробела! Это важно.

Какие атрибуты бывают у тегов?

Если сильно упростить, то можно сказать что в веб-разработке встречается три типа атрибутов:

  • Глобальные — атрибуты которые можно применять к большинству html-тегов. лучшим примером таких атрибутов являются атрибуты class, id, style, title. Если тебе интересен полный список глобальных атрибутов — переходи на официальную страничку с официальной документацией.
  • Персональные — атрибуты, используемые для определённых тегов, которые не применимы к остальным. Чаще всего использовние этих атрибутов обусловленно типом контента, который размечается. К примеру для разметки изображения использутеся тег <img>. Это одиночный тег, который содержит атрибут = параметр с указанием пути к картинке, которая как бы подключается на страницу:
    <img src="img/reviews/1.jpg">
  •  Кастомные — произвольные атрибуты, которые по умолчанию отсутствуют в спецификации и создаются (объявляются) самим веб разработчиком. Это может быть продиктованно необходимостью использования сторонней библиотеки или фреймворка, или же просто для программирования уникальных параметров для тега.
Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete