Добрый день!
Это снова канал HTML/CSS-курсы и я - Николай.
Сегодня у нас с вами третья лекция по HTML-программированию, но эта лекция будет уже ближе к практике.
Если вы здесь впервые и вам интересно узнать больше теории, то предыдущие лекции так же доступны на моём канале, вы можете прочесть их в любое время. Также подписывайтесь на канал, чтобы не пропустить новые лекции.
Итак, мы с вами уже ознакомились с базовой теорией. Знаем, что такое сайт, знаем из чего он состоит, знаем, что такое HTML и как он должен быть построен.
Сегодня мы разберём общий вид HTML-документа и основные теги, которые должны присутствовать в любом таком документе.
Начнём, ещё раз, с самого начала. Создадим на вашем компьютере папку, в которой будем создавать макет, и назовём её, к примеру lesson. В этой папке мы будем создавать макеты страниц в процессе обучения. Внутри создадим ещё одну папку с названием, например, web1. А в папке web1 создадим обычные текстовый документ и переименуем его в index.html, где .html - расширение документа. Напомню, что так всегда будет называться файл, который будет формировать главную страницу сайта.
После этого открываем ранее установленный редактор кода (все примеры будут в редакторе Brackets) и перетаскиваем папку web1 в ту часть окна редактора, где отображается открытая в нём директория.
Теперь в редакторе отображается папка web1 с находящимся в ней документом index.html, который пока является пустым.
Для того, чтобы начать работать, нужно создать, так называемый, "скелет" документа. Этот "скелет" в любом html-файле всегда выглядит одинаково:
Первой строкой мы указываем тег, который будет определять тип документа <!doctype html>. Далее мы открываем парный тег <html> и закрываем его </html>. Внутри этого тега будет писаться весь код документа. Это главный тег html-файла.
Внутри этого тега вписываем ещё парный тег <head></head>, в котором будет находиться основная информация о нашей странице (заголовок, кодировка, шрифты и т. д.) и после тега <head></head> мы создаём ещё один парный тег <body></body>. Внутри него и будет находиться содержимое нашей страницы. Здесь мы пишем то, что человек увидит в окне браузера.
В итоге вы увидите перед собой:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Теперь попробуем написать что-нибудь на нашей html-странице. Напишем внутри тега body по русски "Привет, мир!". И дадим странице имя, т. е. заголовок. Для этого внутри тега head нужно будет написать ещё один парный тег title, в котором и пропишем имя, к примеру, "Приветствие".
Вот, что у нас получилось:
И вот, что у нас отображается в браузере:
Мы с вами видим "Привет, мир!" на странице и "Приветствие" в названии вкладки.
Также в начале тега head всегда указывается кодировка страницы, чтобы наш текст всегда отображался корректно. Кодировка указывается с помощью тега meta с атрибутом charset. Выглядит эта строка следующим образом: <meta charset="utf-8">. Таким образом мы выбираем кодировку страницы utf-8, в которой весь текст будет читаться корректно.
В итоге общий вид документ html будет иметь именно такой:
И уже внутри тегов head и body будет писаться основной код.
На следующем занятии мы с вами займёмся изучением тегов для форматирования текста в документе и всё больше будем заниматься практикой.
