Основы HTML
Среди большого количества разных программистов, мы все знаем что есть кто-то кто занимается созданием сайтов. Те самые front-end и back-end разработчики. Но вы когда-нибудь задумывались как они с помощью обычного кода создают такие необычные сайты, с анимациями, красивыми картинками и многим другим. Чтобы сделать сайт привлекательным и самое главное удобным, программисты используют языки HTML, CSS и JavaScript. В этой статье мы более подробно рассмотрим HTML.
Основные понятия
Без использования HTML все веб-страницы были бы неструктурированным текстовым блоком, без таблиц, картинок и даже без переноса текста на новый абзац. Воспринимать такую информацию очень трудно. Изучение HTML важно, так как вы сможете создавать и редактировать веб-страницы, а также эта тема всегда остается актуальной на экзамене ЕНТ.
HTML, как основной строительный материал веб-страниц, является неотъемлемым компонентом для создания любого сайта. CSS и JavaScript используются для того, чтобы придать сайту определенный внешний вид и функциональность, поэтому они являются важными элементами для интерактивности и дизайна веб-страницы.
Каждый веб-сайт представляет собой структуру из HTML-элементов, сохраненную в HTML-файле. Этот файл можно открыть в браузере для просмотра, а также посмотреть исходный код в обычном текстовом редакторе, что является удобным свойством HTML-документации.
HTML расшифровывается как Hyper Text Markup Language или переводится как “язык гепертекстовой разметки”. Гипертекст в свою очередь — это текст, который содержит в себе ссылку на другой текст.
На самом деле HTML очень легок в изучении. Он состоит из тегов, которые описывают структуру веб-страницы, а вам нужно просто запомнить несколько тегов и как правильно их использовать.
Теги и атрибуты
Мы уже выяснили, что HTML является каркасом для сайта. Для построения структуры документа используются различные теги. Тег — основной элемент языка HTML. С помощью тегов любой браузер понимает, какой смысл вы хотите передать через тот или иной элемент на веб-странице. Тег состоит из имени, которое заключено между знаками “<” и “>”. Например, <h2>, <a>, <ul>.
Все теги можно разделить на две категории:
- парные;
- одиночные;
Например, тег <br> – одиночный. У парных тегов есть вторая половинка — закрывающий тег. В закрывающих тегах есть слэш(/) впереди. Например, <p>Текст</p>, где <p> открывающий тег, а </p> – закрывающий.
Одни теги помогают добавить картинку на страницу, другие помогают создать заголовок, таблицу, список и т.д. Все перечисленное можно просто назвать одним словом – элемент HTML. Любой элемент создается на основании тегов. Обычно он состоит из открывающего тега, содержимого и закрывающего тега. Например: <h1>Это заголовок</h1>. В данном примере <h1> является открывающим тегом, </h1> – закрывающий, а текст между ними – это содержимое элемента. Здесь важно отметить, что не все элементы имеют содержимое. Например, элемент <br> называют пустым. Пустые элементы не имеют закрывающего тега.
Можно провести аналогию между созданием веб-страницы и строительством дома. Каждый материал используемый для строительства, кирпичи, окна, двери – это подобно тегам. А атрибуты HTML-тегов подобны инструкциям или параметрам, которые вы указываете для каждого элемента в процессе строительства дома. Например, вы хотите установить дверь в доме, вы можете добавить атрибуты, такие как цвет, размер или материал двери, чтобы она выглядела так, как хотите вы.
Теги определяют структуру веб-страницы и определяют содержимое, в то время как атрибуты позволяют настраивать каждый элемент в соответствии с вашими потребностями и предпочтениями, что делает каждый элемент уникальным и индивидуальным.
Структура HTML-документа
HTML-документ можно разделить на 3 логические части. Где корневым элементом является <html>. Эта часть определяет начало и конец документа и начинается она со строчки:
<!DOCTYPE>. В первой строке принято указывать тип документа. Это обязательный пункт, потому что существует несколько версий языка HTML. У каждой свои определенные правила и стандарты. Что будет если не сказать браузеру какую версию вы планируете использовать? Браузер не сможет правильно интерпретировать стандарты и, следовательно, веб-страница будет отображаться некорректно.
В старой версии HTML доктайп выглядел так:
<DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
В программе ЕНТ рассматривают пятую версию языку — HTML5, в которой все намного проще: <!doctype html>.
Одним интересным атрибутом тега <html> является – атрибут lang. С его помощью можно уточнить, на каком языке написан текст во всем документе. Но он применим и к остальным тегам также.
Внутри <html> находятся элементы <head> и <body>.
Вторая часть <head>, в которой пишется различная информация о документе. Например, название веб-страницы, которая указывается с использованием парного тега <title>. Также важный тег, который включается в <head> – тег <meta>. С помощью этого можно передавать в браузер различные важные данные, такие как кодировка текста и описание содержимого страницы.
Выглядит это так: <meta charset = “название кодировки”>, где charset атрибут тега <meta>. Рекомендуется явно указывать кодировку текста, чтобы избежать неправильного отображения символов в браузере. Если кодировка не указана, браузер может неправильно интерпретировать текст и показать “иероглифы”. Самая распространенная кодировка – UTF8.
И третья часть это <body>. Здесь содержится весь видимый контент документа, включая текст, изображения, ссылки, таблицы и другие элементы.
Пример как может выглядеть простой HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<p>Это пример текста на веб-странице.</p>
</body>
</html>
Давайте сейчас рассмотрим основные атрибуты тела документа.
| Атрибут | Значение |
| <body bgcolor=?> | Устанавливает цвет фона документа. |
| <body text=?> | Устанавливает цвет текста документа. |
| <body link=?> | Устанавливает цвет гиперссылок. |
| <body vlink=?> | Устанавливает цвет гиперссылок, на которых вы уже побывали. |
| <body alink=?> | Устанавливает цвет гиперссылок при нажатии. |
Стоит учесть, что использование каких либо цветов необходимо в стандарте RGB.
Теперь можно рассмотреть основные теги форматирования текста.
| Теги | Значение |
| <h1>,</h1> | Создает самый большой заголовок. |
| <h6>,</h6> | Создает самый маленький заголовок. |
Заголовок HTML-документа может быть отображен в шести различных уровнях с использованием тегов <h1></h1> до <h6></h6>.
| Теги | Значение | Пример |
| <b>,</b> | Полужирное начертание текста. | Текст |
| <i>,</i> | Выделяет текст курсивом. | Текст |
| <u>,</u> | Добавляет подчеркивание тексту. | Текст |
| <s>,</s> | Используется для перечеркивания текста. | |
| <p>,</p> | Обозначает начало и конец абзаца. | |
| Текст1<br>Текст2 | Перенос строки(без создания абзаца). | Текст1текст2 |
| <hr> | Добавляет горизонтальную линию в документ. | |
| <sub>,</sub> | Нижний индекс. | H2O |
| <sup>,</sup> | Верхний индекс. | 210 |
У тега <p> есть атрибут <p align>, который выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center.
Теги могут вкладываться друг в друга. Важно обеспечить правильный порядок закрытия тегов, чтобы вложенный тег не закрывался позже родительского. Например:
<p><b> Текст </p></b> – это будет неправильная запись.
<p><b> Текст </b></p> – это уже будет правильной записью.
Но и здесь есть исключения. Не все теги можно вкладывать в другие теги, например тег <h1> нельзя вкладывать в <p>.
Важно отметить, что теги HTML не чувствительны к регистру: <B> означает то же, что и <b>. Не обязательно использовать теги и атрибуты в нижнем регистре, однако считается хорошим тоном все же придерживаться этого стиля письма.
Здесь также можно рассмотреть тег <font> и несколько его атрибутов.
| Атрибут | Значение |
| <font size=?> | Определяет размер шрифта. |
| <font color=?> | Определяет цвет текста. |
| <font face=?> | Задает гарнитуру шрифта. |
Определение цветов в документе
В HTML цвет можно задать двумя способами: шестнадцатеричным кодом или по названию некоторых цветов. Чаще всего используется первый метод, так как он универсальнее. Каждый из трех цветов – красный, зеленый и синий – может принимать значения от 00 до FF, образуя 256 оттенков. Это позволяет создать огромное количество цветовых комбинаций, равное 16 777 216 (256x256x256). RGB (red, green, blue) модель цвета основана на смешивании красного, зеленого и синего, откуда и происходит ее название. Например черный (black) в системе RGB будет записана как “000000”, а белый (white) – “FFFFFF”.
Вывод
В этой статье мы узнали самые базовые вещи про язык HTML.
Фактчек
- В HTML теги бывают парные и одиночные.
- Теги задают структуру веб-страницы, а атрибуты для того чтобы задать определенные характеристики или свойства элементу.
- HTML не чувствителен к регистру.
Задания для самопроверки:
Задание 1
Что содержит тег <title>?
- Изображение
- Название веб-страницы
- Весь текст документа
- Метаданные
Задание 2
Отметьте вариант с некорректной вложенностью тегов.
- <head><title>Название страницы</title></head>
- <b><i>Текст</i></b>
- <p><h1>Текст</h1></p>
- <b><font size = “1”>Текст</font></b>
Задание 3
Какие теги необходимы чтобы сформировать строку: E = mc2
- <b>, <i>, <sup>, </b>, </i>, </sup>
- <b>, <sup>, </b>, </sup>
- <b>, <sub>, </b>, </sub>
- <s>, <i>, <sup>, </s>, </i>, </sup>
Ответы: 1 – 2; 2 – 3; 3 – 1.
Загрузка...