Урок №5. Знакомство с HTML5
Степень завершённости урока: 70%
HTML5 (Hypertext Markup Language) - это язык гипертекстовой разметки, используемый для отображения содержимого веб-страницы с большими мультимедийными возможностями. Цифра 5 в названии языка разметки обозначает актуальную на сегодня версию стандарта и представляет развитие предыдущей версии - HTML4. Расширение у обоих стандартов одинаковое - .htm или .html (во втором случае убрана буква "l", "language"). Расширение .html или .htm можно изменить на .php, однако это приведёт к небольшому увеличению нагрузки на сервер и чуть-чуть снизится скорость отдачи страницы сервером.
• Последняя версия стандарта HTML5 доступна на сайте:
https://html.spec.whatwg.org/multipage/ (по состоянию на 11 сентября 2022 года)
Все особенности языка разметки HTML4 (теги, атрибуты тегов, комментарии, пробелы), упомянутые в первом уроке, применимы к HTML5.
Теперь можно переходить от теории к практике. Создадим пустой текстовый файл с именем index и расширением html. При открытии главной страницы сайта все браузеры по умолчанию открывают файл с именем index. Добавим в этот файл следующий код:
КОД:
<!DOCTYPE html>
<html lang="ru">
</html>
Тег <!DOCTYPE> всегда стоит на первом месте и используется браузером для определения типа документа, проще говоря - какая версия HTML используется в данной веб-странице. <!DOCTYPE> единственный тег, который пишется большими буквами и начинается с восклицательного знака. Открывающий и закрывающий теги <html> и </html> обозначают начало и конец документа (т.е. служат контейнером для всех остальных тегов).
Атрибут lang="ru" элемента html указывает на язык веб-страницы, позволяя браузеру правильно расставлять пробелы, переносить строки, выбирать шрифт для отображения текста и определять направление текста (слева направо или справа налево).
Теперь добавим элемент <head>. Здесь размещается информация о веб-странице или так называемые метаданные. Например, ключевые слова для поисковых систем, используемая кодировка, микроразметка Open Graph для социальных сетей и мессенджеров и др. В окне браузера эта информация не отображается.
КОД:
<!DOCTYPE html>
<html lang="ru">
<head>
</head>
</html>
За информацию о кодировке веб-страницы отвечает следующая строчка кода, размещённая между тегами <head> и </head>:
КОД:
<meta charset=utf-8>
Промежуточный код нашей веб-страницы выглядит следующим образом:
КОД:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
</head>
</html>
Теперь добавим теги <body> и </body>. Всё, что находится между этими тегами, будет показано браузером. При открытии этой веб-страницы мы ничего не увидим, т.к. между тегами <body> и </body> пока ещё ничего нет.
КОД:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
</head>
<body>
</body>
</html>
При помощи тегов <title> и </title> добавим название веб-страницы.
КОД:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
<title>Тест</title>
</head>
<body>
</body>
</html>
Страница обновлена 16 апреля 2023 года.