Урок №5. Знакомство с HTML5


      

Урок №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 года.