Так сложилось исторически, что html-файл состоит из корневого блока html, внутрь которого вложен блок head, в котором размещается информация о названии страницы, ее кодировке, описании (для поисковиков) и стилевых свойствах, а также блока body, который отвечает за вывод всей основной информации в окно браузера.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Название страницы</title> </head> Основной текст <body> </body> </html> |
Всю эту незамысловатую структуру можно разделить на блоки:
<!DOCTYPE html>сообщает браузеру, что вы будете писать код в стандарте HTML5- Блок
<head>нужен для отображения названия документа на вкладке браузера (за это отвечает тег<title>). Также в нем размещается указание кодировки (<meta charset="UTF-8">- универсальная, особенно для многоязычных сайтов). Еще здесь же подключаются стили, некоторые скрипты и метатегviewportдля создания адаптивной верстки. В коде выше они отсутствуют, но мы добавим их чуть позже. - Блок
<body>- это основной тег для размещения в нем текста, в том числе и в виде колонок, картинок, таблиц и видео, а также скриптов.
Ниже можно посмотреть видео-урок о том, как создавать html-документ, а также теги заголовков и абзацев.
Урок можно посмотреть на youtube.
Расширяем базовую структуру HTML-документа
Если вы подошли всерьез к изучению HTML/CSS, то вам уже вскоре будет мало той базовой структуры, которую вы видели выше. На данный момент еще необходим мета-тег viewport, который позволит перестраивать макет под мобильные телефоны и планшеты, и тег link для подключения css-файла со стилями.
Сегодня наиболее популярным редактором для HTML/CSS является Visual Studio Code. В нем уже встроен плагин Emmet для быстрого форматирования HTML/CSS. С его помощью вы за несколько минут можете создать HTML и CSS-файлы, разместить базовую структуру HTML в html-файле, набрав всего лишь восклицательный знак (да-да, !) и нажав Enter или Tab.
Подключить стили из css-файла тоже не составит труда. Для этого напишите link в head и снова нажмите Enter. Про подключение стилей вам нужно почитать отдельно. Стили для текста и для шрифта вы также найдете в отдельных статьях, их довольно много, но разобраться с ними нужно обязательно.
Для того чтобы запускать ваш код без перезагрузки страницы, можно установить дополнительное расширение к VSCode с именем Live Server.
Продолжение в студию!
Простые вещи простыми словами для новичков.
Очень мало. Продолжите серию для новичков. А то все остальное не очень понятно. Только про горизонтальные меню.