Изучите основы HTML для начинающих всего за 15 минут

Thu Nghiem

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

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

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Если вы предпочитаете видео, вы можете посмотреть его здесь

Что такое HTML?

HTML, что расшифровывается как Hypertext Markup Language, является довольно простым языком. Он состоит из различных элементов, которые мы используем для структурирования веб-страницы.

Что такое HTML?

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

Элементы HTML

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

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

Все, что находится внутри открывающего и закрывающего тегов, является содержимым.

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

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

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

Как вложить элементы HTML

или элемент неупорядоченного списка. Аналогично внутри
элемента есть 3
или элементов списка.

Базовая вложенность довольно проста для понимания. Но когда страница становится больше, вложенность может стать сложной.

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

Что такое атрибуты HTML?

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

В приведенном выше примере элемент имеет 2 атрибута: src или source для указания пути к изображению и width для указания ширины изображения в пикселях.

На этом примере вы можете увидеть следующие характеристики атрибутов:

• Между атрибутами и именем элемента есть пробел.
• Атрибуты добавляются в открывающий тег
• Элементы могут иметь много атрибутов
• Атрибуты обычно имеют имя и значение: name=”value”.

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

В данном примере, если мы хотим отключить кнопку, нам достаточно передать атрибут disabled без каких-либо значений. Это означает, что наличие атрибута означает истинное значение, а отсутствие – ложное.

Общие элементы HTML

Всего существует более 100 элементов. Но 90% времени вы будете использовать только около 20 наиболее распространенных. Я объединил их в 5 групп:

Элементы раздела

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

Текстовое содержимое

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

Формы

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

Изображения и ссылки

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

Другие

Эти элементы используются для добавления разрыва на веб-страницу.

Вы можете найти все элементы на сайте developer.mozilla.org. Но для начинающих достаточно знать самые распространенные из них.

Элементы HTML на уровне блоков и встраиваемые элементы

По умолчанию элемент может быть либо блочно-уровневым, либо инлайн-элементом.

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

Инлайн-элементы – это элементы, которые не начинаются с новой строки и занимают только ту ширину, которая необходима.

Блочный уровень и встроенные элементы HTML

Двумя элементами, которые представляют собой блочные и встроенные элементы, соответственно, являются и . В этом примере видно, что элементы занимают 3 строки, в то время как элемент занимает только 1 строку.

Но возникает вопрос: как узнать, какие из них являются элементами блочного уровня, а какие – инлайн-элементами? К сожалению, их нужно запомнить. Самый простой способ – запомнить, какие из них являются инлайн-элементами, а остальные – блочными.

Если мы вспомним наиболее распространенные элементы HTML, то к инлайн-элементам относятся: , , , , , , , .

Как комментировать в HTML

Целью комментариев является включение в код заметок для объяснения логики или просто для организации кода.

Комментарии HTML обернуты в специальные маркеры: и игнорируются браузером.

Как использовать сущности HTML

Что если вы хотите показать текст: тег

тег определяет абзац. но браузер интерпретирует

как открывающий тег для нового элемента? В этом случае мы можем использовать сущности HTML, как в следующем примере:

Как использовать эмодзи в HTML

В современном вебе мы можем довольно легко отображать emoji в HTML, например, так:

Распространенные ошибки новичков в HTML

1. Имена тегов/элементов

Имена тегов/элементов являются cAse-inSensitive. Это означает, что они могут быть написаны в нижнем или верхнем регистре, но рекомендуется писать все в нижнем регистре: не .

2. Закрывающий тег

Отсутствие закрывающего тега – распространенная ошибка новичков. Поэтому всякий раз, когда вы создаете открывающий тег, сразу же ставьте закрывающий тег.

3. Вложенность

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

4. Одинарные кавычки и двойные кавычки

Это минимальный код, который должен быть в HTML-документе для создания веб-сайта. И здесь мы имеем:

1. : Сначала у нас есть Doctype. По какой-то странной исторической причине в HTML мы должны указывать doctype для каждого файла.
2. : Второй мета-элемент определяет область просмотра браузера. Эта настройка предназначена для сайта, оптимизированного для мобильных устройств.
3. Документ
4. : Это
5. элемент. Он задает заголовок страницы.
6. Как создать страницу с рецептом блинов
7. Во-первых, давайте дадим элементу контент рецепта блинов. Вы увидите, как изменится текст на вкладке веб-страницы. В элементе создадим 3 элемента: , и представляющие 3 раздела.

1. Создайте раздел заголовка

В заголовке мы хотим разместить логотип и навигацию. Поэтому создадим div с содержимым ALL RECIPE для логотипа.

для создания неупорядоченного списка. Мы хотим иметь 3

элемента для трех ссылок: Ингредиенты, Шаги и Подписаться. Код заголовка выглядит следующим образом:

2. Создайте основной раздел

В главном разделе, во-первых, мы хотим иметь заголовок и изображение. Мы можем использовать h1 для заголовка и
для изображения (мы можем бесплатно использовать изображение из Unsplash):

для создания упорядоченного списка и для создания флажка.

Но перед этим мы можем использовать для начала новый блок контента. Мы также хотим добавить атрибут id для того, чтобы ссылка в навигации знала, куда идти:После ингредиентов мы хотим перечислить все шаги. Мы можем использовать для заголовка шага и

для содержания шага:

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

3. Построение раздела нижнего колонтитула

В нижнем колонтитуле мы хотим разместить форму подписки и авторский текст.

Для формы подписки мы можем использовать элемент. Внутри него мы можем разместить элемент для ввода текста и кнопку отправки.

Для текста авторского права мы можем просто использовать элемент . Заметьте, здесь мы можем использовать HTML-сущность $copy; для символа авторского права.

Мы можем добавить некоторое пространство между формой подписки и текстом об авторских правах:

Ну вот, теперь все готово! Вот полный код для справки:

Заключение

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

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

Тху Нгьем

Изучение основ HTML для начинающих всего за 15 минут

Screen-Shot-2021-01-11-at-1.16.17-PM