Одна из самых важных вещей, необходимых для веб-разработки, - это HTML. Это стандартный язык, который используется для создания веб-страниц и веб-приложений. Каждый раз, когда вы заходите на веб-сайт, сервер отправляет HTML-файл на ваш компьютер, а ваш браузер интерпретирует и отображает информацию, содержащуюся в этом файле. Фактически, вся информация, которую вы сейчас читаете, - это просто данные, которые были сохранены в файле HTML и отправлены в ваш браузер.
Итак, что такое HTML?
HTML означает язык гипертекстовой разметки, что может сбить с толку многих новичков. Лучший способ объяснить HTML - изучить значение каждого слова. Он был создан в 1990 году Тимом Бернерсом-Ли, которого также приписывают изобретению Интернета.
Гипертекст - это текст, содержащий ссылки на другие тексты. Разметка - это специальные символы или коды, которые вставляются в документ, чтобы сообщить веб-браузеру, как отображать данные документа. Например, код разметки может указывать браузеру отображать фразу в тексте полужирным или курсивом или может сообщать браузеру, какие части документа являются заголовками, а какие - абзацами. Язык относится к идее стандартизации кода.
Зачем вам изучать HTML?
Обладая базовыми знаниями HTML (а также немного CSS), вы можете создать действительно уникальный веб-сайт, который вы сможете редактировать и обновлять самостоятельно, и вам не придется платить дорогостоящие ежемесячные сборы за обслуживание.
Изучение HTML также считается первым шагом на пути к изучению более сложных и востребованных языков программирования.
Как HTML связан с другими языками программирования?
Если вы изучали веб-разработку и дизайн, вы наверняка встречали статьи или руководства, в которых упоминаются CSS и JavaScript.
HTML, CSS и JavaScript - три основных языка, которые используются для создания большинства веб-страниц. У каждого из языков своя функция и разные правила, но все они работают вместе, чтобы обеспечить содержание, дизайн и функциональность веб-страниц. Как упоминалось ранее, HTML является основой любого сайта. Код HTML содержит основную структуру и контент сайта, включая весь текст, ссылки, таблицы, ссылки на изображения и другие подобные элементы.
CSS (каскадные таблицы стилей) используются для определения дизайна страницы, включая такие параметры, как размер каждого элемента и его внешний вид.
JavaScript - более сложный язык, который используется для создания интерактивных элементов на вашей странице. Когда вы нажимаете продукт на веб-сайте покупок, и ваша корзина покупок автоматически обновляется, это пример JavaScript.
CSS и JavaScript могут добавить сайту дизайн и функциональность, но без HTML у вас не будет сайта. Фактически, большинство сайтов по-прежнему будут отображать данные HTML, даже если код CSS и JavaScript поврежден.
Как выглядит HTML-код?
‹Html›
‹Title› Название страницы ‹/title›
‹H1› Это заголовок. ‹/H1›
‹P› Это абзац. ‹/P›
‹/Html›
Отсюда мы можем увидеть и понять синтаксис HTML.
Если вы сохраните этот код в текстовый файл с расширением «.html» и откроете его в своем браузере, он должен отобразить такую страницу:
Что такое HTML-теги?
Угловые скобки, которые используются в приведенном выше примере (и код внутри них), называются тегами. Теги используются для отделения HTML-кода от обычного текста.
Любой текст, написанный в угловых скобках, не будет отображаться в браузере. Текст внутри угловых скобок просто используется для указания браузеру, как отображать или преобразовывать обычный текст, расположенный между открывающим тегом (также называемым начальным тегом) и закрывающим тегом. (также называемый конечным тегом).
Теги обычно бывают парами, и разница между открывающим тегом и закрывающим тегом заключается в том, что первым символом в скобках закрывающего тега является косая черта «/».
Например, вот пара тегов h1 (используется для обозначения текста заголовка) с некоторым содержанием между ними:
‹H1› Это контент. ‹/H1›
В этом примере ‹h1› - это открывающий тег, а ‹/h1› - закрывающий.
Давайте посмотрим на некоторые основные элементы HTML-
Все элементы HTML начинаются с открытия ‘‹ ›’, они также должны закрываться закрытием ‹/›
1. ‹title› - HTML для добавления заголовка. Для закрытия мы используем ‹/tiltle›.
2. ‹p› - используется для добавления абзаца. Он должен быть закрыт, т.е. ‹/p›
HTML-документ будет выглядеть так:
Если вы предварительно просматриваете документ в браузере, форматированный текст должен выглядеть следующим образом:
3. ‹br› - используется для разрыва строки, которая будет работать без закрывающего тега, потому что разрывы строк не содержат и не могут содержать содержимое внутри.<br>
4. ‹h1› Заголовки и подзаголовки
Существуют различные типы заголовков, от h1 (заголовок 1) до h6 (заголовок 6), и ваша тема обычно стилизует их для соответствующего размера.
Вот примеры:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading6</h6>
В браузере это будет выглядеть так:
5. ‹em› - Курсив в HTML-коде: <em>. Em - это сокращение от ударения.
<em>This text is italicized, I am for gentle emphasis</em>
6. ‹strong› - HTML-код, выделенный полужирным шрифтом: is<strong>
<strong>This text is bold, I am for strong emphasis</strong>
7. ‹li› - используется для хранения списка <li>
8. ‹ol› - Упорядоченные списки отображаются как ряд пронумерованных элементов. Это полезно при написании списка, в котором порядок имеет значение . <ol>
‹Ol›
‹li› Пункт 1 ‹/li›
‹li› Пункт 2 ‹/li›
‹li› Пункт 3 ‹/li›
‹/ol›
Приведенный выше код превращается в:
1. Пункт 1
2. Пункт 2
3. Пункт 3
9. ‹ul› - Неупорядоченные списки - это, по сути, маркированные списки. ‹/Ul›
‹Ul›
‹li› Пункт 1 ‹/li›
‹li› Пункт 2 ‹/li›
‹li› Пункт 3 ‹/li›
‹/ul›
И этот превращается в следующий список маркеров (так как он неупорядочен).
· Пункт 1
· Пункт 2
· Пункт 3
Все мы знаем, насколько полезны списки, и они также помогают разбить ваш контент и сделать его более интересным.
10. Чтобы добавить цвет, стиль, размер к тексту- ‹p style =” color: red; ”› Это красный текст. ‹/p›
‹P style =” font-family: courier; ”› Это текст с использованием шрифта courier. ‹/P›
‹P style =” font-size: 300%; ”› Это очень большой текст. ‹/P›
HTML-документ будет выглядеть так:
Если вы предварительно просматриваете документ в браузере, форматированный текст должен выглядеть следующим образом:
На этот раз все! Следите за новостями об HTML и веб-разработке.
