Всем привет! Вы на канале Royal Web. Меня зовут Никита и я учусь веб-разработке. Я разработал целый бесплатный курс по основам #html и #css для новичков и людей, желающих создавать сайты, но не имеющих никаких знаний в этой области.
Курс представляет собой два модуля:
- Основы HTML
- Основы CSS + создание сайта с нуля
И поделён на несколько коротких статей и видео с теорией и практикой. Весь материал, в том числе и практика подобраны таким образом, чтобы было понятно даже тем, кто не разбирается в #сайтах от слова совсем.
Курс будет доступен на моём #youtube канале и в конце каждой статьи😊
Ссылка на YouTube канал: ТЫК
Модуль "Основы HTML"
В данный модель входят следующие темы, представленные в отдельных статьях (по мере появления статей пункты списка будут становится ссылками):
- Структура HTML-документа
- Текстовые абзацы
- Заголовки и подзаголовки
- Ссылки
- Изображения
- Списки
- Комментарии
- Спецсимволы HTML
- Семантические теги
- Формы
- Теги формы
- Таблицы
Структура HTML-документа
HTML язык является языком разметки и расшифровывается как HyperText Markup Language (язык разметки гипертекста). По своей сути HTML-документ представляет собой обычный текстовый файл, содержащий нормально читаемый текст (теги), заключённый в угловые ковычки. В свою очередь теги задают правила, по которым браузер понимает как правильно вывести документ на экран.
Теги бывают открывающими и закрывающими:
<p> - пример открывающего тега
</p> - пример закрывающего тега
Пример структуры простейшего HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title> Название </title>
</head>
<body>
Текст страницы
</body>
</html>
Файл index.html
Как правило, документ с основным содержимым сайта называется index.html. Просто так принято, а назвать можно как угодно. Любой HTML-документ должен начинаться с объявления DOCTYPE.
<!DOCTYPE html>
Данное объявление говорит браузеру о том, что перед ним документ #html самой последней версии HTML5 и переводит его в нормальный режим.
Далее за объявлением #DOCTYPE следует тег <html>. Он является контейнером, который заключает в себе всё содержимое сайта, включая теги <head> и <body>.
Тег <head>
Предназначен для хранения других элементов, которые не будут отображены на сайте визуально. Они нужны для помощи #браузеру в понимании сайта. Также внутри тега <head> находятся метатеги, которые используются для хранения информации, используемой браузерами и поисковыми системами. Это может быть описание сайта, ключевые слова, кодировка и другое.
Также в теге <head> обычно распологаются скрипты и подключаются файлы стилей. Но об этом в следующих статьях.
Метаданные
Метаданные - это информация о данных, находящихся в HTML-документе. Примеры метаданных: кодировка страницы, краткое описание содержимого, ключевые слова, имя автора и так далее.
В HTML-документе #метаданные определяются с помощью тега <meta>. Данный тег всегда должен распологаться внутри тега head.
Пример метатега:
<meta charset="UTF-8"> - с помощью атрибута charset тега meta задана кодировка страницы UTF-8
Тег <title>
Тег <title> предназначен для определения названия HTML-документа и, соответственно, сайта. То есть это та #информация, которая будет отображена на вкладке браузера, когда сайт открыт и в поисковой выдаче. Максимальная длина названия - 40 символов. Элемент <title> должен быть только один.
Свойства тега:
- определяет заголовок окна браузера;
- используется как заголовок страницы в результатах выдачи поисковых систем;
- используется как заголовок страницы при добавлении сайта в избранное.
Тег <body>
Предназначен для хранения всего содержимого #веб-страницы. То есть всё, что вы видите на каком-либо сайте это и есть содержимое тега <body>.
Пример HTML тега внутри тега <body>:
<p> Если что, то это абзац </p>
На этом введение в первый модуль курса по веб-разработке "Основы HTML" завершено. Если вдруг хочется посмотреть всю информацию визуально или просто лень читать, то вот видео с моего YouTube канала:
