Основы HTML
HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Моя кошка очень раздражена
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
p>Моя кошка очень раздраженаp>
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
- Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
- Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
- Контент (Content): Это контент элемента, который в данном случае является просто текстом.
- Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- Имя атрибута, за которым следует знак равенства.
- Значение атрибута, заключённое с двух сторон в кавычки.
Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент , который указывает, что слово должно быть сильно акцентированно:
p>Моя кошка strong>оченьstrong> раздражена.p>
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент , затем элемент , потом мы должны закрыть сначала элемент , затем . Приведённое ниже неверно:
p>Моя кошка strong>очень раздражена.p>strong>
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:
img src="images/firefox-icon.png" alt="Моё тестовое изображение" />
Он содержит два атрибута, но не имеет закрывающего тега , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
doctype html> html> head> meta charset="utf-8" /> title>Моя тестовая страницаtitle> head> body> img src="images/firefox-icon.png" alt="Моё тестовое изображение" /> body> html>
- — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
- — элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
- — элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
- — элемент . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
- — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
- — элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
Изображения
Давайте снова обратим наше внимание на элемент изображения:
img src="images/firefox-icon.png" alt="Mоё тестовое изображение" />
Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:
- У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
- Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src , сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).
Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
Примечание: Узнайте больше о специальных возможностях.
Разметка текста
В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков (en-US)– (en-US), хотя обычно вы будете использовать не более 3-4 :
h1>Мой главный заголовокh1> h2>Мой заголовок верхнего уровняh2> h3>Мой подзаголовокh3> h4>Мой под-подзаголовокh4>
Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента .
Абзацы
p>Это одиночный абзацp>
Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом .
Списки
Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:
- Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент .
- Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент .
Каждый пункт внутри списков располагается внутри элемента (list item, элемент списка).
Например, если мы хотим включить часть следующего фрагмента абзаца в список:
p> Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе . p>
Мы могли бы изменить разметку на эту:
p>Mozilla, мы являемся мировым сообществомp> ul> li>технологовli> li>мыслителейli> li>строителейli> ul> p>работающих вместе . p>
Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.
Ссылки
Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:
- Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
- Оберните текст в элемент , например так:
a>Манифест Mozillaa>
a href="">Манифест Mozillaa>
a href="https://www.mozilla.org/ru/about/manifesto/details/" >Манифест Mozillaa >
Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).
Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.
Заключение
Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.
В этом модуле
- Установка базового программного обеспечения
- Каким должен быть ваш веб-сайт?
- Работа с файлами
- Основы HTML
- Основы CSS
- Основы JavaScript
- Публикация вашего веб-сайта
- Как работает Веб
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как называются команды в html
Хотя многие говорят о программировании на HTML, он вовсе не является языком программирования в традиционном понимании. При разработке HTML-документа выполняется разметка текстового документа. Эти пометки служат для указания формы представления информации, содержащейся в документе. Для этого в текст вставляются специальные коды – теги (tags) или, как их еще называют, дескрипторы.
Теги – это основной элемент кодирования, принятый в стандарте HTML. В HTML практически все зависит от тегов. Они служат для привлечения внимания к определенным словам в документе, тем самым давая браузеру понять, что нужно выделить, где отобразить графику и где находятся гиперссылки. Теги заключаются в угловые скобки ( ). Браузер «знает», что любой текст внутри угловых скобок является скрытым, и не отображает его в своем окне, а все объекты, не заключенные в угловые скобки, воспринимаются им как текстовые элементы.
Существует два типа тегов: контейнеры и одиночные теги. Контейнер – это пара тегов, состоящая из начального (открывающего) и конечного (закрывающего) тега. Закрывающий тег записывается так же, как и открывающий, но с символом «/» (прямой слеш) перед именем тега:
Контейнеры предназначены для хранения некоторой информации, в отличие от одиночного тега.
Теги могут записываться с параметрами (атрибутами). Наборы допустимых атрибутов индивидуальны для каждого тега. Общие правила записи атрибутов заключаются в следующем. После имени тега могут следовать атрибуты, которые отделяются друг от друга пробелами. Порядок следования атрибутов произволен. Многие атрибуты требуют указания их значений, однако некоторые атрибуты не имеют значений. Если атрибут требует значения, то оно указывается после названия атрибута через знак равенства. Значение атрибута может записываться в кавычках, так и без них. Единственным случаем, в котором без кавычек не обойтись, является случай, когда в значении атрибута имеются пробелы. Следует помнить, что спецификации HTML рекомендуют использовать кавычки даже в тех случаях, когда без них можно обойтись. Заданные в теге атрибуты действуют только между его началом и концом, то есть, только внутри контейнера:
Данные свойства HTML позволяют использовать принцип вложения одного тега в другой. Вложенные элементы следует закрывать в порядке, обратном их открытию:
HTML является языком нечувствительным к регистру, в котором записываются команды (в данном случае – теги и имена их атрибуты). Интерпретатор браузера одинаково обработает тег , , или . Исключениями из этого правила служат параметры class и id, URL-адреса и escape-последовательности. В языке XHTML все имена элементов должны быть указаны строчными буквами, чтобы считаться допустимыми. В связи с этим рекомендовано придерживаться написание тегов строчными буквами.
Неправильно написанные теги и атрибуты автоматически исключаются без сообщения об ошибке, что дает пользователю возможность прочитать документ, хотя, возможно, и не в том виде, в каком его задумал создатель сайта.
Форматированием тегов HTML следует выполнять с помощью каскадных таблицей стилей.
У всех браузеров есть собственные встроенные таблицы стилей (таблица стилей пользовательского агента), которые описывают представление элементов но умолчанию. Оно схоже у различных браузеров, но есть и неко-торые отличия.
Escape-последовательности.
Иногда возникает необходимость на веб-странице использовать в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки (символы < и >), в которые обычно заключаются теги, парные кавычки («), употребляемые при задании значений атрибутов, и т. д. Иными словами, веб-дизайнеру необходимо, чтобы данные символы отображались в окне браузера «как есть», то есть как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Для того чтобы избежать проблем при отображении подобных элементов и были придуманы так называемые escape-последовательности.
Запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности начинаются с символа ампресанд (&) и заканчиваются точкой с запятой, а между ними размещается сама команда, записываемая в нижнем регистре. В таблице 1 приведен список наиболее часто используемых escape-последовательностей.
| Символ | Значение | Команда |
|---|---|---|
| Символ «меньше, чем»; левая угловая скобка | < | |
| > | Символ «больше, чем»; правая угловая скобка | > |
| ≤ | Меньше или равно | ≤ |
| ≥ | Больше или равно | ≥ |
| ± | Плюс–минус | ± |
| × | Умножение | × |
| ÷ | Деление | ÷ |
| ≈ | Примерно равно | ≈ |
| ≠ | Не равно | ≠ |
| ° | Степень | ° |
| « | Парные кавычки | " |
| « » |
Кавычки парные (елочки) | « » |
| & | Ампресанд | & |
| § | Параграф | § |
| Неразрывный пробел (словосочетания, разде-ленные таким пробелом, не разрываются при переносе) | ||
| © | Символ авторского права | © |
| ® | Символ зарегистрированной торговой марки | ® |
| ™ | Торговая марка | ™ |
Escape-последовательности записываются в тексте по тем же правилам, по которым употребляются обозначаемые ими символы, иными словами, нотация символьного объекта просто вставляется в тот участок текста, где должен следовать соответствующий служебный символ.
Все символы могут быть также заданы своими ASCII-кодами. Например, символ неразрывного пробела имеет код 160. Он может записываться в десятичном виде как .
Единицы измерения.
Рассмотрим единицы измерения, используемые для задания значений свойств в HTML и CSS.
Для задания значений свойств, определяющих некоторые размеры, применяются относительные и абсолютные единицы измерения (табл. 2). Относительные единицы задают длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы измерения полезны только тогда, когда известны физические характеристики устройства отображения.
| Относительные единицы измерения | Абсолютные единицы измерения | ||
|---|---|---|---|
| символ | значение | символ | значение |
| px | пиксел | in | дюйм (1 in = 2.54 cm) |
| em | высота шрифта элемента | cm | сантиметр |
| ex | высота буквы | mm | миллиметр |
| % | процент | pt | пункт (1 pt = 1/72 in) |
| рс | пика (1 рс = 12 pt) | ||
Пикселы – относительные единицы измерения, зависящие от параметров дисплея пользователя. Пикселы всегда выражаются целым числом. Каждый дизайнер должен помнить об относительности измерения в пикселах и учитывать это при создании дизайна веб-страницы.
Относительные единицы измерения em и ех вычисляются относительно высоты шрифта элемента.
Для задания размера шрифта могут использоваться ключевые слова. Их удобно применять в том случае, когда эстетика дизайна приносится в жертву доступности страницы для большинства браузеров и, как следствие, пользователей. Область определения ключевых слов включает семь значений, приведенных ниже в порядке убывания:
- xx-large;
- х-large;
- large;
- medium (поумолчанию);
- small;
- x-small;
- xx-small.
Некоторые элементы HTML могут иметь в качестве атрибутов переменные, обозначающие цвета. Эти переменные применяются в основном для определения цвета фона, текста или гиперссылок HTML-документа. Определить тот или иной цвет при создании веб-страницы можно двумя методами: использовать зарезервированные ключевые слова HTML для определения наиболее употребительных цветовых оттенков или использовать цветовую модель RGB.
Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту можно получить абсолютно любой желаемый оттенок путем смешения всего лишь трех красок: красной, зеленой и синей. При помощи цветовых меток или цифрового кода возможно использовать в HTML-документе любой цвет, который поддается отображению в рамках стандарта RGB.
Разумеется, цветовые нотации, заданные посредством символьных меток, легче запоминаются и интуитивно понятны, хотя бы немного знакомому с английским языком. Существует 140 цветов, для которых приняты стандартные символьные метки. А 24-битная цветовая палитра RGB, в настоящий момент поддерживаемая браузерами, предоставляет веб-дизайнеру 16,7 миллионов (224) цветов на базе 256 оттенков по каждому каналу.
Используя палитру RGB, веб-дизайнер может задать цвет тремя способами (табл. 3):
- rgb(r.g.b) – три канала, десятичная система. Каждый канал принимает значения в диапазоне от 0 до 255;
- #rrggbb – три канала, шестнадцатеричная система. Для обозначения цвета шестнадцатеричным цифровым кодом принят следующий синтаксис записи: перед самим кодом ставится символ #, далее следует три значения в диапазоне от 00 до ff;
- #rgb – три канала, шестнадцатеричная система, уменьшенная глубина цвета; каждый канал принимает значение в диапазоне от 0 до f. Эквивалентный цвет в полноцветной палитре получается благодаря удвоению каждой шестнадцатеричной цифры. Таким образом, цвета #6cf и #66ccff идентичны.
Комментарии.
Код HTML может содержать комментарии, предназначенные как для самого веб-дизайнера, создающего документ, так и для постороннего пользователя, читающего листинг чужой странички. Комментарии не будут отображаться в браузере, и не будут оказывать никакого влияния на остальную часть контента. Комментарии открываются символьной последовательностью, начинающейся с открывающей угловой скобки, восклицательного знака и двух знаков дефиса (). Они могут состоять из произвольного числа строк. В общем случае синтаксис записи комментария будет выглядеть следующим образом:
Комментарии полезны для маркировки и организации длинных документов – в частности, когда над ними совместно трудится команда разработчиков. Иногда в комментарии включается информация о создателе документа, предупреждение об авторских правах или адрес электронной почты администратора сайта. Однако чаще всего данный элемент кода HTML используется по своему прямому назначению, для пояснения смысла тех или иных фрагментов листинга HTML-документа.
Имейте в виду, что, хотя браузер не будет отображать комментарии на веб-странице, посетители смогут увидеть их, если просмотрят исходный код документа, поэтому убедитесь, что комментарии, которые вы оставляете, допустимы для просмотра. Возможно, стоит удалить заметки, оставленные коллегами-разработчиками перед публикацией файла. К тому же это уменьшит его размер.
Базовая структура HTML документа — Основы современной верстки
Как театр начинается с вешалки, так и любой HTML-документ начинается с базовой структуры. Она включает в себя теги, которые есть в любом HTML-файле. Эти теги и служебная информация нужны браузеру для корректного отображения информации.
Взглянем на базовую структуру любого HTML-документа:
lang="ru"> charset="UTF-8"> Моя первая страница
Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации. В этом уроке разберемся с каждой строчкой этой структуры.
DOCTYPE
Первая конструкция в любом HTML-документе — элемент . Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:
С приходом стандарта HTML5 элемент немного упростился. Если вы встретитесь с сайтами, созданными пять-десять лет назад, то сможете увидеть совершенно другие записи. Они были больше и напрямую влияли на то, как браузер обработает информацию. Неправильное указание элемента могло привести к некорректному отображению. Сейчас такой проблемы нет, поэтому вы можете без всяких опасений использовать конструкцию, которая указана в данном уроке. Использование старых значений необходимо только при разработке с поддержкой очень старых браузеров.
Парный тег html
Тег является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.
Важной частью тега html является наличие атрибута lang . В нем указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.
В качестве значения атрибут lang принимает знакомые всем коды языков. Для русского — lang=»ru» , для английского — lang=»en» , для немецкого — lang=»de» .
Парный тег head
Тег служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.
Любые данные, которые указаны внутри тега , не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.
Хоть различной информации внутри может быть множество, в этом уроке разберем несколько основных тегов, которые пригодятся при создании любой веб-страницы:
Метаинформация
Метатег . Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег с атрибутом charset . Он позволяет установить кодировку документа.
Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8 . Именно ее рекомендуется устанавливать в качестве значения атрибута charset . Теперь браузер будет отображать все символы именно в этой кодировке.
charset="UTF-8"> Заголовок страницы
На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной верстки» вкладка в браузере Google Chrome выглядит следующим образом:
Для указания заголовка страницы используется специальный парный тег , внутри которого указывается нужная информация.
Моя первая страница
Тело документа
После тега в документе указывается парный тег , который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.
Используем один из примеров прошлого урока и добавим все недостающие теги.
src="/logo.png"alt="Логотип">id="menu">
href="/">Главная
href="/about">О нас
href="/contacts">Контакты Чтобы полностью соответствовать всем стандартам HTML, добавим необходимую базовую структуру документа.
lang="ru">charset="UTF-8">Моя первая страницаsrc="/logo.png"alt="Логотип">id="menu">
href="/">Главная
href="/about">О нас
href="/contacts">Контакты Хоть данный набор и является основным, но на самом деле браузеры могут обработать HTML-информацию и без базовой структуры документа. Но не стоит отдавать все на откуп браузеру. Он постарается автоматически обернуть контент в , добавит современный , но при этом нет уверенности в том, что все это он добавит корректно.
Самостоятельная работа
Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега . Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
web ecol
Все стандартные браузеры для сети Интернет используют способы представления текстов, основанные на языке HTML.
HTML (Hyper Text Markup Language) — это язык разметки гипертекста. Этот язык «понимают» все компьютеры, он довольно прост, но при этом имеет достаточные выразительные средства для удобного описания разных типов документов. Язык позволяет хранить текст в «чистом» виде (не кодируя его), что делает возможным просмотр его с помощью обычных текстовых редакторов. Документ HTML представляет собой обычный текстовый файл, содержащий конструкции языка HTML, который можно создавать в обычных текстовых редакторах (программа Блокнот, Microsoft Word), а затем сохранять созданные файлы с расширением .htm или .html.
Команды языка HTML задаются между специальными символами <. >, и называются тегами (tag). Между ними находятся коды, которые распознает браузер.
Тег — это инструкция браузеру, указывающая способ отображения текста . Теги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами — браузерами . (Например, Microsoft Internet Explorer или Netscape Navigator)
Приняв информацию, браузер компонует элементы документа в соответствии с тем, что задано командами HTML, и показывает результат на экране с учетом предварительных настроек, касающихся размеров окна браузера, используемой цветовой схемы, установленных цветов и т.д.
Теги могут быть двух видов:
1) одноэлементный тег: <. >; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;
2) парный тег: <. >. ; он влияет на текст, с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тег, только начинающийся с символа » / «: