Для чего служит язык html

Основы HTML

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
2. Имя атрибута, за которым следует знак равенства.
3. Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p> , затем элемент <strong> , потом мы должны закрыть сначала элемент <strong> , затем <p> . Приведённое ниже неверно:

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент <img> , который уже имеется в нашем HTML:

Он содержит два атрибута, но не имеет закрывающего тега </img> , и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

• <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
• <html></html> — элемент <html> . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
• <head></head> — элемент <head> . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
• <body></body> — элемент <body> . В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
• <meta charset=»utf-8″> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
• <title></title> — элемент <title> . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Изображения

Давайте снова обратим наше внимание на элемент изображения:

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src , сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

Примечание: Узнайте больше о специальных возможностях.

Разметка текста

В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h1> (en-US)– <h6> (en-US), хотя обычно вы будете использовать не более 3-4 :

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента <img> .

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img> .

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul> .
2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol> .

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

Мы могли бы изменить разметку на эту:

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
2. Оберните текст в элемент <a> , например так:

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Заключение

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.

Что такое язык разметки HTML и где он используется

HTML — это язык разметки, который лежит в основе веб-разработки и помогает упорядочивать содержимое веб-страниц. Ни один сайт не обходится без HTML, при этом он довольно прост для изучения — разобраться в основах можно буквально за пару дней.

В статье разберём, для чего используется HTML, почему популярные редакторы никогда не заменят HTML-вёрстку и как знание основных принципов языка разметки помогает в работе разным специалистам.

Что такое HTML

HTML , hypertext markup language — язык разметки гипертекста. Гипертекст — это такой текст, который не обязательно читать линейно от начала до конца, можно переходить к тем фрагментам, которые интересны и актуальны в конкретной ситуации. Для этого набор документов соединяют гиперссылками, по которым вы и перемещаетесь между фрагментами. Гиперссылка может вести на другую страницу или раздел текста или на другой документ.

Гипертекст в литературе — справочник с внутренними и внешними ссылками, которые ведут из одного раздела в другой или упоминают источники

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

То есть веб-страницы — и есть гипертекст, а HTML — это язык разметки веб-страниц.

На языке разметки пишут код, который помогает браузеру понять, как нужно отображать загруженный сайт. Программный код можно написать в обычном текстовом редакторе и сохранить в расширении .htm или .html — это и будет HTML-документом. Но чаще используют специальные редакторы: NVU, Notepad и др.

HTML-документ лежит или на сервере, или на локальном диске. Веб-браузер открывает этот документ и переводит его код в интерфейс, который мы видим на экране монитора.

Код страницы доступен любому пользователю. Чтобы посмотреть его, нажмите комбинацию клавиш ctrl+u или щёлкните правой кнопкой мыши и выберите «Показать программный код страницы».

Вы увидите полотно текста и повторяющийся элемент — кусочки текста, заключённые в угловые скобки: <>.

Это теги — главное средство разметки контента на странице: текстов, изображений, таблиц и др. Вместе с фрагментом контента, к которому относятся, теги образуют HTML-элементы — «кирпичики», структурные единицы сайта.

<head> — содержит служебную информацию о странице

<link> — соединяет документ с внешним ресурсом

<img> — несёт в себе изображение

Подробнее о том, как устроен HTML, мы расскажем чуть позже, а пока разберёмся, кому и зачем он нужен.

Зачем нужен HTML

Каждый раз, когда вы ищете информацию в браузере, вы не просто переходите между страницами, а скачиваете документы с их исходным кодом. Вот как это работает:

1. Вы вводите адрес сайта или поисковый запрос в строке браузера.
2. Серверы, принадлежащие гуглу или яндексу, создают новый документ — страницу с результатами поиска. Этот документ написан на языке HTML.
3. Ваш браузер получает документ, анализирует теги и выводит на экран результаты поиска.
4. Если вы кликните по ссылке на странице, браузер запросит новый документ с другого сервера, а в ответ будет снова отправлен HTML-документ.

HTML — главный язык интернета, на котором написано большинство документов. Почти каждый абзац текста на веб-страницах завёрнут в теги <p>…</p>, а каждая ссылка в — <a>…</a>.

Если бы языка разметки не было, пришлось придумать другой способ, чтобы обмениваться документами в сети. В результате мы получили бы тот же HTML с другим названием.

Когда вы переходите между веб-страницами, на самом деле вы скачиваете описывающие их HTML-документы, сформированные серверами

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

HTML для контент-менеджера

Контент-менеджеры управляют содержимым веб-страниц — публикуют заметки в блоге, размещают фотографии товаров, описания к ним и др. Кажется, что для выполнения этих задач знания разметки не нужны — в популярные CMS уже встроены визуальные редакторы, которые позволяют отформатировать контент и сделать его читаемым. Но даже при использовании визуального редактора могут возникнуть проблемы.

При копировании содержимого из Word в CMS заголовки уровня h2 «съехали» в уровень h3

Даже минимальные знания HTML помогут контент-менеджеру вовремя увидеть ошибку: когда текст наехал на иллюстрацию, ушёл за пределы экрана и др. Зная язык разметки, контент-менеджер может найти мусорные символы, которые попали в код при копировании из текстового редактора или гугл-дока, и восстановить структуру страницы.

HTML для программиста

В небольших компаниях программисты могут выполнять обязанности контент-менеджера. В таком случае разработав сайт, они самостоятельно наполняют его контентом. Базовые знания HTML помогут структурировать контент и облегчить его восприятие.

Но иногда базовой информации недостаточно. Для создания адаптивного сайта с множеством элементов потребуются более глубокие знания, поэтому к проекту придётся привлечь верстальщика.

HTML для верстальщика

HTML — основной инструмент верстальщика. Верстальщик переносит макет в код, чтобы браузер смог отобразить то, что придумал дизайнер. Это актуально для кастомных дизайнов, которые нельзя воплотить готовыми шаблонами CMS.

Чтобы понять, как верстальщик работает с кодом, разберёмся, как устроен HTML-язык.

Как устроен HTML

Любой HTML-документ состоит из дерева HTML-элементов. Мы уже знаем, что HTML-элементы включают в себя теги и контент, к которому они относятся. Пришло время разобраться подробнее, что такое теги, как они устроены и какими бывают.

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

Тег состоит из угловых скобок и заключённого в них названия тега:

Теги в HTML делятся на парные и одиночные. Рассмотрим подробнее их особенности.

Парные теги. Среди HTML-тегов их большинство. Они состоят из открывающего и закрывающего тегов, между которыми заключён описываемый ими фрагмент контента. Таким образом парный тег образует контейнер. Браузер распознает и отобразит этот элемент так, как ему укажет название тега.

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

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

<br> — перенести текст на новую строку,

<hr> — вставить разделительную линию,

<img> — вставить изображение

Теги не чувствительны к регистру — вы можете написать <STRONG> или <StRoNg>. Но на практике всегда используют строчные буквы — <strong>.

Артибуты

Чтобы добавить дополнительную информацию о теге или изменить его стандартное поведение, используют атрибуты. В документе это записывают так:

< тег имя_атрибута = ”значение_атрибута” >

Тег <a></a> позволяет добавить ссылку для перехода с одной страницу на другую. Но чтобы указать адрес ссылки, нужен атрибут href

Как ссылка выглядит в коде:

< a href = ”https://checkroi.ru/blog/professiya-html-verstalshchik/” >HTML-верстальщик: полный обзор профессии< /a >

Как ссылка выглядит в браузере:

Один тег может иметь несколько атрибутов.

Чтобы браузеры корректно отображали веб-страницы, важно соблюдать принципы использования тегов при создании HTML-документов.

Принципы использования тегов

Для тегов любого типа действуют определённые правила их использования.

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

Можно попросить браузер отобразить текст одновременно жирным и курсивным

Обратите внимание, что вложенные теги — как матрёшки: тег не может быть закрыт, пока не открыт вложенный в него другой тег.

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

Здесь <тег1> — родительский тег, а <тег2> , <тег3> и <тег4> — дочерние теги, а между собой — братские

Здесь в роли родителей выступают уже 2 тега: <тег3> для <тег4> , а <тег1> — для <тег2> и <тег3>

При этом тег-родитель не является родителем дочерних тегов своего дочернего тега — для них он предок . И наоборот: для всех родительских тегов своего родителя теги значатся потомками .

<тег1> — предок <тег2> , <тег3> и <тег4> а они — его потомки. У <тег3> всего один потомок — <тег4> , а у <тег4> потомков нет

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

Что нельзя делать на HTML

HTML — это не язык программирования, поэтому вы не сможете написать на нём программу или веб-приложение.

HTML выстраивает каркас страницы. Он помогает разместить ссылки, таблицы, изображения и др. Но его возможностей недостаточно, чтобы оформить внешний вид этих элементов или заставить их реагировать на действия пользователей. Для этих целей используют другие языки — CSS и JavaScript.

CSS — язык описания внешнего вида HTML-элементов. Он всегда используется в связке с HTML, помогает изменить внешний вид веб-страницы: выбрать размер и цвет шрифта, расположение отдельных блоков и др.

JavaScript — язык скриптов. Он помогает отследить события и прописать реакцию на них.

Какими могут быть события и реакции на них:

• Событие — пользователь навёл мышь на элемент. Реакция — возникла всплывающая подсказка с описанием функции элемента
• Событие — пользователь нажал на кнопку. Реакция — на экране отобразилось сообщение, что действие совершено

• добавлять дизайнерские шрифты, менять их размер и способ начертания
• определять отступы и выравнивания, управлять сложным позиционированием блоков
• устанавливать фон веб-страницы
• указывать стили разных состояний объекта — как должен выглядеть элемент в зависимости от действий пользователя

• добавлять анимации и спецэффекты
• создавать интерактивные элементы: онлайн-калькуляторы, тесты и опросы, всплывающие окна, push-уведомления и др.
• отключать скроллинг, чтобы пользователь не мог листать страницу, пока открыт попап
• добавлять поиск информации на странице
• создавать форму регистрации и ввода пароля с проверкой введённых символов

Язык HTML развивается и стремится к тому, чтобы ускорить разработку и снизить нагрузку на браузер. Поэтому в последней версии HTML вы можете определять тип данных для заполнения формы без CSS и JavaScript.

Вы можете указать, что в форме регистрации по номеру телефона нужно ввести цифры. Если пользователь попробует ввести буквы или другие символы, сайт выдаст ошибку и попросит ввести данные снов а

Мы разобрались в структурных элементах, принципах и ограничениях языка разметки и теперь готовы узнать, как его использовать для вёрстки веб-страниц.

Как верстать на HTML

Чаще всего HTML используют для вёрстки текста, изображений и ссылок. Разберём, как это делать на конкретных примерах.

Как верстать текст

Текст – основной способ представления информации. Именно текстовую информацию ищет большинство людей в интернете. От того, насколько грамотно вы структурируете текст, будет зависеть — задержится пользователь на сайте или покинет его в поисках более удобного источника информации.

В языке HTML за структурирование текста отвечают несколько тегов — подробнее в таблице.

Название тега	За что отвечает
<h1><h6>	выделяет текст в виде заголовков
<p>	делит текст на абзацы
<span>	выделяет текст внутри абзаца, чтобы затем задать оформление через CSS
<br>	делает перенос строки
<strong>	выделяет шрифт жирным
<em>	делает текст курсивным
<ins>	подчёркивает текст
<tt>	задаёт одинаковую ширину для всех символов
<sub>	делает текст подстрочным
<sup>	делает текст надстрочным
<strike>	перечёркивает текст

Разберём, как верстают текст на примере тега <p> </p>. Его применяют для разделения страницы на абзацы. Он может содержать только текст и теги уровня строки.

Поделим текст на абзацы

Как это выглядит в коде:

как это выглядит в браузере:

Шла Саша по шоссе
И сосала сушку

Как верстать изображения

Изображения активно используют в дизайне сайтов, чтобы дополнить и разнообразить текстовую информацию. Важный фактор при их выборе — вес: чем он больше, тем дольше будет загружаться страница. Если загрузка затянется, пользователь вряд ли станет дожидаться её окончания. Рекомендуемый вес изображения — 100–150 Кбайт.

Чтобы вставить изображение в документ используют тег <img>. У него есть два обязательных атрибута — src и alt:

• src — указывает путь (URL) к изображению;
• alt — выводит альтернативный текст, если в браузере отключён показ изображений.

Вставим на страницу изображение

Как это выглядит в коде:

< img src = ”image/kandinsky.jpeg” alt = ”Кандинский, акварель без названия” >

как это выглядит в браузере:

По умолчанию все браузеры показывают изображения в их исходном размере. Но атрибуты width и height позволяют менять их высоту и ширину. Значения размеров можно указать в пикселях или в процентах от соответствующей стороны экрана.

Растянем изображение на весь экран по ширине и ограничим его высоту половиной экрана

Как это выглядит в коде :

<img src = ”image/kandinsky.jpeg” width = ”100%” height = ”50%” alt = ”Кандинский, акварель без названия” >

как это выглядит в браузере :

Важно помнить, что при визуальном уменьшении изображений их объём в килобайтах остаётся неизменным — загрузка занимает столько же времени.

Как верстать ссылки

Ссылки помогают связать HTML-страницы с документами в сети — это могут быть как страницы внутри сайта, так и страницы сторонних ресурсов.

Для создания ссылок используют парный тег <а></a>. Чтобы ссылка заработала, в теге <a></a> указывают адрес документа, к которому она ведёт. Для этого используют атрибут href. Значение атрибута — URL документа в интернете. Чтобы ссылка была видна на странице — внутрь тега <a></a> вставляют текст.

Вставим 2 ссылки с отбивкой на абзацы

Как это выглядит в коде:

как это выглядит в браузере:

Коротко о главном

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

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

Чтобы научиться верстать адаптивные сайты, обратите внимание на подборку онлайн-курсов по веб-вёрстке

Язык разметки HTML

В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

1. Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.

Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.

В тегах можно указывать параметры. Например, текст, выровненный влево, выглядит так:

Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.

Чаще всего используются следующие теги:

<b> — полужирный текст
<i> — курсив
<br> — перевод строки
<hr> — горизонтальная линия

<a> — ссылка
<pre> — форматированный текст

<ins> — добавленный текст
<del> — удаленный текст

Существует шесть уровней заголовков: с <h1> по <h6>.

Результат будет выглядеть так:

2. Минимальная веб-страница

Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.

Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:

Этот текст нужно сохранить с именем index.html.

Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

После этого веб-страницу можно открыть в любом браузере.

Строки минимальной веб-страницы означают следующее:

<!DOCTYPE html> — стандарт HTML5

<html lang=»ru»> — язык страницы русский

<head></head> — техническая информация о веб-странице

<meta charset=»utf-8″ > — кодировка UTF-8

<title>без имени</title> — Заголовок веб-страницы

</html> — завершение веб-страницы

3. Структура веб-страницы

Для указания на структуру используются теги:

• <header> — шапка документа
• <nav> — навигация по сайту
• <article> — статья
• <aside> — боковая панель
• <footer> — подвал

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

4. Таблицы

Таблица задается тегами:

• <table> — общий контейнер
• <tr> — строка
• <td> — ячейка
• <th> — заголовок столбца
• <caption> — название таблицы

Простая таблица выглядит так:

<table> — начало таблицы

<tr> — начало первой строки

</tr> — конец первой строки

<tr> — начало второй строки

</tr> — конец второй строки

</table> — конец таблицы

Текст без комментариев выглядит так:

Сама таблица будет выглядеть так:

5. Блоки, аудио и видео

До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой большую таблицу, а отдельные элементы размещались в ячейках.

В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:

• <div> — блочный элемент
• <span> — строчный элемент.

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

Таблицы используются только для вывода табличных данных.

Ролик на YouTube

6. Цвета

В HTML цвет можно указать как значение RGB, используя следующую формулу:

RGB (красный, зеленый, синий)

Каждый параметр определяет интенсивность цвета от 0 до 255.

• rgb (255, 0, 0) — красный.
• rgb (0, 0, 0) — черный.

Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

7. Формы

Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.

Пример простой формы:

Для получения данных используется тег <input>:

• флажки <input type=»checkbox»>
• радиокнопки — <input type=»radio»>
• ввод текста — <input type=»text»>
• пароль — <input type=»password»>
• отправить форму — <input type=»submit»>

и многое другое.

Полный список здесь:

Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.

Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.

Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.

HTML Введение

HTML — это стандартный язык разметки для создания веб-страниц.

• HTML стенды для Hyper текст разметки языка
• HTML Описывает структуру веб-страниц с помощью разметки
• HTML элементы — это строительные блоки HTML-страниц
• HTML элементы представлены тегами
• HTML Метки: фрагменты содержимого, такие как "heading", "paragraph", "table", и так далее
• Обозреватели не отображают HTML-теги, но используют их для визуализации содержимого страницы

Простой HTML-документ

Пример

Пример объяснено

• Декларация <!DOCTYPE html> определяет этот документ как HTML5
• Элемент <html> является корневым элементом HTML-страницы
• Элемент <head> содержит мета-информацию о документе
• Элемент <title> задает заголовок документа
• Элемент <body> содержит видимое содержимое страницы
• Элемент <h1> определяет большой заголовок
• Элемент <p> определяет абзац

Теги HTML

HTML-теги — это имена элементов, окруженные угловыми скобками:

<tagname>содержание идет здесь. </tagname>

• HTML теги обычно приходят в парах <p> , как и </p>
• Первый тег в паре — это начальный тег, второй тег — конечный тег
• Конечный тег записывается как начальный тег, но с косой черт ой, вставленной перед именем тега

Совет: Начальный тег также называется открывающим тегом, а конечный тег — закрывающим тегом.

Веб-браузеры

Целью веб-браузера (Chrome, IE, Firefox, Safari) является чтение HTML-документов и их отображение.

Обозреватель не отображает HTML-теги, но использует их для определения способа отображения документа:

Структура страницы HTML

Ниже приведена визуализация структуры HTML-страницы:

Примечание: В браузере отображается только содержимое внутри раздела <BODY> (белая область вверху).

Декларации <!DOCTYPE>

Объявление <!DOCTYPE> представляет тип документа и помогает обозревателям корректно отображать веб-страницы.

Он должен появляться только один раз, в верхней части страницы (перед любыми тегами HTML).