Введение в html что это такое и с чем его едят

Дата публикации:

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Теперь давайте разберемся с каждой строкой и для чего она необходима:
<!DOCTYPE html> определяет , что этот документ представляет собой документ HTML5.
<html> Элемент является главным элементом HTML страницы. Означает начало документа.
<head> содержит мета информацию о странице HTML.
заголовок <title> страницы HTML (который показан на вкладке страницы).
<body> тело документа, представляет собой контейнер для всего видимого содержимого, таких как заголовки, параграфы, изображения, гиперссылки, таблицы, списки и т.д.
<h1>определяет заголовок первого уровня.
<p>определяет параграф страницы.

Что такое элемент HTML?

Элемент HTML определяется начальным тегом, некоторым содержимым и конечным тегом:
<tagname> Здесь идет контент ... </ tagname >.

Элементы HTML могут быть вложенными (это означает, что элементы могут содержать другие элементы). Все HTML-документы состоят из вложенных HTML-элементов.
Следующий пример содержит четыре элемента (HTML <html>, <body>, <h1> и <p>):

<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок </h1>
<p>Мой первый параграф</p>
</body>
</html>

Элемент <body> определяет тело документа. У него есть открывающий <body>и закрывающий тег </body>. Затем внутри <body> элемента есть два других элемента: <h1>и <p>:

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

Атрибуты HTML элементов

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

Все элементы HTML могут иметь атрибуты: Атрибуты предоставляют дополнительную информацию об элементах
и всегда указываются в начальном теге.
Атрибуты обычно представлены парами имя / значение, например: name = "value".

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

<a href="/page.html">Ссылка</a>
<img src="cart.jpg" alt="маленькая машинка с водителем">
<input type="text">

Заголовки HTML

Заголовки определяются тегами от <h1> до <h6>. Чем выше уровень заголовка, тем ниже его важность. Например, заголовок первого уровня <h1>Текст заголовка</h1> должен быть только 1 на странице. А по заголовкам следующих уровней никаких ограничений нет.

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

Работа с текстом параграфы абзацы и другое

Элемент <p> определяет абзац страницы. Абзац всегда начинается с новой строки, и браузеры автоматически добавляют отступы до и после абзаца.

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

<p>Это первый параграф.</p><p>А это еще один параграф.</p>

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

Отображение текста может отличаться

Отображение текста с Больших или маленьких экранов и окон с измененным размером дадут разные результаты. По этому необходимо это учитывать.

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

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

А на деле получаем 1 простой абзац. На изображении ниже это прекрасно видно.

Используйте, <br/> если вам нужен разрыв строки (новая строка) без начала нового абзаца: этот элемент непарный, по этому закрывающего тега не требует. Проверим его работу:

<p>
This paragraph<br/>
contains a lot of lines<br/>
in the source code,<br/>
but the browser<br/>
ignores it.<br/>
</p>

Как видим, текст стал таким как мы хотели. Если нужно сохранить весь вид документа включая пробелы, то необходимо вместо параграфа использовать элемент <pre>

HTML стили

Стили используются для добавления к элементам стилей, таких как цвет, шрифт, размер и т. д.

Стили можно использовать как атрибут style html или подключать отдельные таблицы стилей, по которым у нас будет отдельная статья. Для начала, необходимо понять как их использовать и для чего они нужны.
Возьмем в пример следующий код:

<p style="color:red">I’m red paragraph</p>
<p style="font-size:150%">I’m bigger text paragraph</p>
<p style="text-align: center;">Centered text</p>
<p style="background-color:red">Red background</p>

Запустив его в браузере, мы видим что свойства работают. И вполне неплохо

Style атрибут для стилизации HTML-элементов
background-color для цвета фона
color для цветов текста
font-size для размеров текста
text-align для выравнивания текста

Форматирование текста

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

<b> - Жирный текст
<strong> - Важный текст
<i> - Курсивный текст
<em> - выделенный текст
<mark> - отмеченный текст
<small> - Меньший текст
<ins> - Вставленный текст
<sub> - Подстрочный текст
<sup> - Надстрочный текст
Давайте посмотрим как это работает:

<p>this <i>paragraph</i> <b>shows</b> <small>us</small> <sup>how</sup> <sub>text</sub> <strong>formatting</strong> works. <em>More</em> more <mark>and</mark> more</p>

Можно заметить что некоторые элементы похожи между собой. Однако они имеют различные значения и в современных реалиях служат не только для форматирования, но и поддержки семантики html кода.

<b> и <strong> элементы

<b> определяет простой полужирный текст. Элемент <strong> определяет текст с большой важностью. Содержимое обоих тегов внутри обычно выделено жирным шрифтом. Но различие у них все таки есть. Для описывания других элементов, на сайте появятся отдельные уроки. Спасибо за внимание, до скорых встреч.

Новый коментарий
Реклама