Найти в Дзене
Конспекты верстальщика
1 подписчик

Везде есть что-то общее. Обзор шаблона HTML-кода

35
~1 мин
Для занятия вёрсткой потребуется две вещи: Мы вкратце разберём второй пункт. Валидный HTML-код имеет определённый шаблон. Посмотрите его по ссылке на codepan. io. <! DOCTYPE html> Первая строчка HTML-документа. В прошлых версиях языка она была куда длиннее. Туда включали ссылку на правила, которые отделяли валидный код от невалидного. В HTML5 от этого отказались. <! DOCTYPE html> - просто строка, необходимая для нормальной работы кода. <html> Он же корневой элемент. Внутри него два элемента - <head> и <body>. W3C валидатор рекомендует приписывать элементу <html> атрибут lang= «». Так Вы определите язык веб-страницы. <head> В нём хранятся метаданные. Пользователь не видит его содержимое. Но оно влияет на отображение контента и не только. Подробнее об этом читайте в статье о содержимом элемента <head>. <body> Тело HTML-документа. Здесь хранятся элементы, которые: Задание В Visual Studio Code на Windows (по поводу macOS не знаю), Вы можете вызвать шаблон кода за пару секунд. Для
Оглавление

Для занятия вёрсткой потребуется две вещи:

  • редактор кода (пример),
  • понимание шаблона HTML-кода.

Мы вкратце разберём второй пункт. Валидный HTML-код имеет определённый шаблон. Посмотрите его по ссылке на codepan. io.

<! DOCTYPE html>

Первая строчка HTML-документа. В прошлых версиях языка она была куда длиннее. Туда включали ссылку на правила, которые отделяли валидный код от невалидного. В HTML5 от этого отказались. <! DOCTYPE html> - просто строка, необходимая для нормальной работы кода.

<html>

Он же корневой элемент. Внутри него два элемента - <head> и <body>. W3C валидатор рекомендует приписывать элементу <html> атрибут lang= «». Так Вы определите язык веб-страницы.

<head>

В нём хранятся метаданные. Пользователь не видит его содержимое. Но оно влияет на отображение контента и не только. Подробнее об этом читайте в статье о содержимом элемента <head>.

<body>

Тело HTML-документа. Здесь хранятся элементы, которые:

  • отображаются на веб-странице;
  • делят её на разделы.
Скриншот к заданию
Скриншот к заданию

Задание

В Visual Studio Code на Windows (по поводу macOS не знаю), Вы можете вызвать шаблон кода за пару секунд. Для этого:

  1. создайте HTML-документ;
  2. впишите в область кода «!»;
  3. нажмите Enter.

Пример результата на скриншоте выше.