Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Тег <head>

Тег <head> есть на всех страницах сайтов. В нём содержится техническая информация, которая не отображается на странице во время просмотра, но важна и необходима для правильной работы страницы и сайта в целом. Эту техническую информацию принято называть metadata — мета-данные.

Тег <head> это парный тег, у него есть открывающий и закрывающий теги. Он располагается первым в теге <html> , перед <body> .
Внутри <head> обычно содержится заголовок, описание страницы и другие служебные данные данные, предназначенные для компьютерных программ (поисковых роботов, веб-браузера и т п.).

Содержимое тега <head> на html-странице
Пример содержимого тегана html-странице учебного проекта.

Какие метаданные мы будем использовать на большинстве html-страниц

Назначение тега Структура тега и его параметры
Информация о кодировке текста на странице <meta charset="UTF-8">
Параметры отображения страницы на различных устройствах <meta name="viewport" content="width=device-width, initial-scale=1.0">
Информация о базовом адресе страницы <base href="/" target="_blank">
Указание путей к внешним стилевым файлам <link rel="stylesheet" href="./css/main.min.css">
Указание путей к внешним файлам скриптов <script src="./js/main.js"></script>
Подключение favicon <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
Информация о разработчике сайта, об авторе <meta name="author" content="humans.txt">
Заголовок страницы <title>Пегас-трансфер</title>
Краткое описание содержимого страницы <meta name="description" content="Ежедневные совместные ...">

Что такое кодировка страницы и зачем она нужна?

Процесс преобразования данных или сигналов из формы, удобной для восприятия, в форму, удобную для хранения, обработки и передачи.

Данные хранятся, обрабатываются и передаются в виде логических единиц и нулей, то есть в двоичной системе счисления.

Числа можно перевести из любой системы счисления в двоичную и обратно, а символы (буквы) перевести в двоичную систему нельзя.

Символы кодируются в числа, в соответствии с используемой таблицей символов.

Unicode — международный стандарт кодирования символов, включающий в себя знаки почти всех письменных языков мира. Является преобладающим в Интернете.

UTF-8 — стандарт хранения unicode-символов в памяти. На сегодняшний день — общепринятый стандарт для веба!

Область видимости устройства

Viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства.

В неё не входит полоса прокрутки! Это важно.

В зависимости от этой области видимости, мы можем настраивать правила отображения содержимого страницы.

Для адаптивных сайтов используется универсальный meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

В этом правиле мы указываем, что ширина видимой области равна ширине устройства, а изначального масштабирования нет. Чаще всего это оптимальный сценарий работы страницы.

Без этого параметра страница не будет адаптироваться и перестраивать блоки. Поэтому обязательно указывай Viewport при разработке адаптивных страниц.

Тема Viewport очень важна и будет более подробно разобрана вследующем уроке. А пока что двигаемся дальше.

Мета-заголовок и Мета-описание страницы

<title>Пегас-трансфер</title>
<meta name="description" content="Ежедневные совместные поездки из Краснодара в Пятигорск и обратно. За 5 часов. Цена от 750 рублей">

Это любимые теги всех SEO-специалистов, потому что они содержат информацию для поисковых систем о содержимом страницы. Так же эти параметры отображаются во вкладке браузера и выводятся в результатах поисковой выдачи Яндекса. От того как хорошо програботаны заголовок и описание частично зависит успех продвижения страниц в поисковых системах.

МЕТА-тег “Robots”

<meta name="robots" content="index, follow">

МЕТА-тег “Robots” позволяет указывать Роботам, можно ли индексировать данную страницу и можно ли использовать ссылки, приведенные на странице. Этот тег указывается на каждой конкретной странице, доступ к которой требуется ограничить.

Очень удобно использовать его для запрета индексации страниц, которые еще не закончены, или в примерах сайтов клиентов, что бы оригинальные сайты оставались уникальными для поисковых систем.

Правда как показала практика, поисковые роботы так или иначе проиндексируют ваши странички, не смотря на этот тег. Просто имейте ввиду что он есть, и что с его помощью можно «условно» запретить индексацию сайта.

Информация об авторе или команде разработчиков

<meta name="author" content="humans.txt">

Можно ограничиться указанием своих контактов или фамилии,
<meta name="author" content="Yuriy Ronin in Krasnodar, Russia: 8 918 089 60 09">,

но я бы советовал вам использовать текстовый файлик и там все расписать как положено 🙂 Я так и делаю обычно.

Важно понимать, что это уместно, когда вы работаете сами на себя и выполняете частные заказы. Когда будете работать в веб студии по найму — так желать нельзя! Это не честно по отношению к вашим работодателям.

Далее писал про базовый URL-адрес… в процессе

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete