Особенности HTML
• Это язык разметки, обеспечивающий гибкость при разработке веб-страниц с текстом.
• Он прост в использовании и обучении.
• HTMLне зависит от операционной системы и может использоваться в Windows, Linux,
Macintosh и т. д.
• HTML позволяет программистам добавлять изображения, видео и аудио на веб-страницу,
чтобы сделать ее более интерактивной.
• HTMLпозволяет программистам добавлять ссылки на веб-страницы, помогая читателям
просматривать интересующую их информацию.
• HTMLнечувствителен к регистру. Вы можете использовать теги как в нижнем, так и в
верхнем регистре.
Документы HTML
Все документы в HTMLдолжны начинаться с объявления типа документа с помощью
элемента <!DOCTYPE html>.
Сам HTMLдокумент начинается с <html> и заканчивается с</html>.
Видимая часть документа находится между открывающим тегом <body> и закрывающим </body>.
<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф</p>
</body>
</html>
Элемент <!DOCTYPE>
В самом верху пишется <!DOCTYPE> , эта конструкция объявляет тип документа и помогает
браузерам правильно отображать веб-страницы.
Элемент <!DOCTYPE> не чувствителен к регистру.
Что такое тег?
Язык HTML отвечает за структуру и содержание страницы. Кирпичиками для построения структуры
документа и наполнения его содержимым являются теги.
Тег — это основная конструкция языка HTML. Благодаря тегам любой браузер понимает, каким
смыслом вы наделяете тот или иной элемент на веб-странице.
Тег состоит из имени, заключённого между знаками «<» и «>». Примеры тегов: <h2>, <a>, <ul>.
В качестве имени тега должны использоваться определенные, закрепленные в HTML имена, вы не
можете использовать свои собственные названия. Поэтому знание HTML заключается в знании его
тегов.
Парные и одиночные теги
Все теги можно разделить на две категории:
• парные;
• одиночные.
Например, тег <img> — одиночный:
<img src="[Link]
У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег.
В закрывающих тегах перед именем ставится символ / («слеш»):
<h1>Текст</h1>
В этом примере <h1> открывающий тег, а </h1> — закрывающий.
Для чего нужны теги?
Мы теперь знаем, что у каждого тега есть свое имя. И также у него есть своя функциональность:
одни теги помогают добавить картинку на вашу страницу, другие помогут создать заголовок,
таблицу, список и т.д. Все перечисленное можно назвать одним словом — элемент HTML. И как
раз на основании тегов создается любой элемент HTML.
HTML-элементы
Элемент HTML — это набор из тега и его содержания. Чаще всего он состоит из открывающего
тега, содержимого и закрывающего тега, например:
<h1>Это заголовок верхнего уровня</h1>
<p>Это параграф</p>
В данных примерах теги <h1> и <p> являются открывающими, текст внутри тега — это содержимое
элемента, теги </h1> и </p> — закрывающие.
Важно отметить: Некоторые элементы не имеют содержимого (например, элемент <br>). Эти
элементы называются пустыми. Пустые элементы не имеют закрывающего тега.
Вложенные элементы HTML
Любой HTML-документ будет представлять собой набор из вложенных друг в друга
элементов HTML. Вот самый простой и базовый пример того, как будет выглядеть HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>Это заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац</p>
</body>
</html>
Такую вложенную структуру лучше всего представить в виде дерева элементов:
1. Элемент <html>является корневым и определяет весь HTML-документ. У него есть
начальный тег <html>и конечный тег </html>.
2. Внутри <html>элемента находятся элементы <head> и <body
2.1. Элемент<head>предназначен для хранения служебной информации о странице. Он
располагается первым в элементе<html> , сразу перед <body> . Этот элемент нужно закрыть
тегом </head> сразу после перечисления его содержимого.
Так, например, в элементе <head> хранится информация о теге <title>, который отображает
заголовок страницы в браузере и поисковой выдаче и является важным элементом для
ранжирования сайта в поисковых системах.
2.2. Элемент <body>представляет собой контент (содержимое) документа HTML. В документе
может быть только один элемент <body>. У него есть начальный тег <body>и конечный
тег </body>. Этот элемент должен быть вторым в элементе <html>, т.е. располагаться после <head>.
<body>
<h1>Это заголовок верхнего уровня</h1>
<p>Это параграф</p>
</body>
3. Затем внутри <body>элемента есть два других элемента: <h1>и <p>:
3.1. Элемент <h1> — это HTML-заголовок, который чаще всего используется для разметки
заголовка веб-страницы. Он имеет начальный тег <h1>и конечный тег </h1>.
<h1>Это заголовок верхнего уровня</h1>
3.2. Элемент <p>определяет абзац. Элемент является блочным, а значит его содержимое всегда
начинается с новой строки и занимает всю доступную ширину. Он имеет начальный тег <p>и
конечный тег </p>:
<p>Это абзац</p>
Некоторые элементы HTML будут отображаться правильно, даже если вы забудете закрыть
тег, например:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Но помните, что это работает не со всеми элементами, и не забывайте закрывать теги :)
Пустые HTML-элементы
Элементы HTMLбез содержимого называются пустыми элементами.
Тег <br>определяет разрыв строки и представляет собой пустой элемент без закрывающего тега:
<p>Это<br> абзац с переносом</p>
HTML не чувствителен к регистру
Теги HTML не чувствительны к регистру: <P>означает то же, что и <p>
Стандарт HTML не требует тегов нижнего регистра, но считается "хорошим тоном" использовать
все-таки строчные буквы для написания тегов и атрибутов.
Атрибуты HTML-элементов
У каждого тега есть свое предназначение: какие-то нужны для отображения заголовка, какие-то —
для создания таблицы. Предназначение определяется по имени тега. На основании тега создаются
элементы в HTML-коде.
Помимо указания тега мы можем задать дополнительные свойства каждому элементу при
помощи атрибутов. Атрибуты задаются в открывающемся теге и состоят из пары имя атрибута =
"значение". В общем случае тег с атрибутами записывается следующим образом:
<имя-тега атрибут1="значение1" атрибут2="значение2" …> Содержимое </имя-тега>
Атрибут href
Для перехода с одной страницы на другую на веб-сайтах используют ссылки. За ссылки отвечает
тег a (это английская буква). Но чтобы переход состоялся, необходимо указать адрес назначения.
Именно для этого в теге a используется атрибут href. Если создать ссылку без атрибута href, то
нажатие по ссылке не приведет к переходу на другую страницу.
Атрибут src
Для отображения картинок в HTML используется тег img. Но чтобы картинка появилась на экране,
нужно указать ее источник (source). Для этого используется атрибут src.
Без указания источника тег img будет отображать пустую рамку, поэтому можно считать,
что указание атрибута src для тега img является обязательным.
Несколько атрибутов
Для одного элемента можно указать несколько атрибутов. В примере ниже мы добавим
помимо src дополнительные атрибуты width и height для указания ширины и высоты картинки в
пискелях.
Атрибут style
Очень важный атрибут, с которым мы будем очень часто работать — style. При помощи него
можно изменить стиль отображения любого элемента. Можно влиять на размер, цвет,
прозрачность, месторасположение и т.д. Подробнее о стилях мы поговорим в дальнейшем, сейчас
нужно запомнить лишь название атрибута style.
Атрибут title
Данный атрибут редко используется, при помощи него можно указать подсказку для элемента.
При наведении мыши через некоторое время появится текст, который вы укажете в качестве
значения атрибута title
P.S. Не путайте с тегом <title>
Правила обращения к атрибутам
Используйте нижний регистр букв
Вы можете написать название атрибута любым регистром. К примеру, атрибут style может
быть написан как StylE, STYLE или sTYLe. Любой из перечисленных вариантов будет верным. Но
советую всегда писать названия атрибутов в нижнем регистре.
Всегда указывайте значение атрибута в кавычках
На самом деле в некоторых случаях вы можете указывать значения атрибутов без двойных
кавычек, ошибки не будет и браузер без проблем отобразит информацию. Например, здесь:
<a href=[Link] непустая ссылка</a>
Но это произошло потому, что адрес ссылки представляет собой одно значение без пробелов. А
теперь взгляните на этот пример:
<p title=А вот и я>Наведи на меня.</p>
Здесь невозможно без кавычек понять, что именно относится к значению тега title. Если поставить
кавычки, то сразу видны границы значения:
<p title="А вот и я">Наведи на меня.</p>
Поэтому всегда заключайте значения атрибута в кавычки.
Какие кавычки выбрать
Наиболее распространенный вариант написания вокруг значений атрибутов — двойные кавычки.
Но в некоторых ситуациях могут использоваться одинарные. Например, когда само значение
атрибута содержит двойные кавычки: