Основы сайтостроения
Структура Web-страницы
HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег (например, тег переноса строки
А теперь коротко и по порядку
<!DOCTYPE html> ➦ Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме. HTML 5 используется только один вариант DOCTYPE.
<html> . . . </html> ➦ Это теги начала и конца HTML документа;
<head> . . . </head> ➦ Это теги служебной части HTML документа, содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title> . . . </title> (смотри ниже)
<meta charset=utf-8> ➦ Тег указывает на кодировку страницы. Meta -тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
<title> . . . </title> ➦ Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера.
<body> . . . </body> ➦ Тело документа, предназначено для размещения тегов и содержательной части веб-страницы.
<p> . . . </p> ➦ Абзац в тексте на странице.
<b>Дяденька очень толстый :)</b> ➦ Сделает наш текст жирным, но это не единственный способ, о других мы узнаем потом 🙂
<!-----КОММЕНТАРИЙ-----> ➦ Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки. Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!-- <h1>Привет!</h1> -->. Все, что находится между этими тегами, отображаться на веб-странице не будет.
ЗАДАНИЕ
⚛ Самостоятельно создайте папку для практических работ по всем правилам (смотри предыдущий урок) набери HTML структуру в файле index.html, выведи на экран любой текст. Ну и готовься к следующему уроку:)