Каковы основы HTML?

Опубликовано: 2023-09-25

HTML (язык гипертекстовой разметки) является фундаментальным строительным блоком веб-дизайна в округе Ориндж. Это язык разметки, используемый для создания структуры и содержания веб-страницы, и он является основой всех веб-сайтов. Наверное, все веб-дизайнеры сталкивались в своей карьере с HTML!

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

основы-языков-кодирования-HTML-в-веб-дизайне-округ-Ориндж-pinterest

Основы HTML

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

Объявление <!DOCTYPE>

Объявление <!DOCTYPE> служит вступительным актом для вашего HTML-документа, подготавливая почву, информируя браузер о конкретной версии HTML, которую вы используете. Воспринимайте это как дружеское вступление, в котором говорится: «Эй, браузер, мы собираемся танцевать в ритме HTML5!» HTML5 в настоящее время является звездой шоу в мире веб-разработки, и он предлагает множество интересных функций и улучшений. Таким образом, когда вы включаете это объявление, вы, по сути, говорите браузеру, что нужно подготовиться к современному, многофункциональному HTML-интерфейсу. Это ваш способ убедиться, что ваш веб-контент представлен правильно и использует все замечательные возможности HTML5.

<!DOCTYPE html>

Элемент <HTML>

Думайте об элементе <html> как о главном в вашем HTML-документе. Это главный начальник, главный пес и тот, кто поддерживает все в порядке. Подобно тому, как начальник управляет компанией, элемент <html> управляет всей вашей веб-страницей. Это отправная точка и контейнер для всех остальных элементов, которые вы будете использовать для создания веб-контента.

Внутри этого элемента <html> вы найдете схему вашей веб-страницы, включая элементы <head> и <body>. Элемент <head> содержит важную информацию о вашем документе, такую ​​как заголовок, метатеги и ссылки на внешние ресурсы. Между тем, элемент <body> содержит весь видимый контент, который видят пользователи, когда посещают ваш сайт.

Короче говоря, элемент <html> — это общая картина, главнокомандующий и главный органайзер вашего HTML-документа. Это гарантирует, что все работает гладко, а ваша веб-страница структурирована и правильно представлена ​​вашей аудитории.

Элемент <Head>

Элемент <head> — это мозг вашего документа, содержащий важную информацию, такую ​​как заголовок, метатеги и ссылки на такие интересные вещи, как таблицы стилей и скрипты. Таким образом, хотя элемент <head> может быть не виден на вашей веб-странице, он играет жизненно важную роль в том, чтобы ваш сайт выглядел великолепно, работал хорошо и эффективно взаимодействовал как с пользователями, так и с поисковыми системами. Это похоже на командный центр, который помогает вашей веб-странице функционировать наилучшим образом.

Элемент <Title>

Элемент <title> определяет заголовок документа, который отображается в строке заголовка браузера. Это не просто техническое требование, но и мощный инструмент коммуникации. Создание четкого, краткого и релевантного заголовка имеет важное значение для обеспечения того, чтобы ваша веб-страница была легко узнаваемой, доступной и привлекательной как для пользователей, так и для поисковых систем.

Элемент <Body>

Элемент <body> содержит все содержимое веб-страницы, такое как текст, изображения, видео и другие элементы. Это похоже на главную сцену театра — именно здесь в вашем HTML-документе происходят все действия. Это один из фундаментальных строительных блоков любой веб-страницы, и его роль довольно проста, но важна: он содержит весь видимый контент, который видят пользователи при посещении веб-сайта.

HTML-элементы

HTML-элементы заключаются в открывающие и закрывающие теги, заключенные в угловые скобки. Открывающий тег начинается с имени элемента, за которым следуют любые атрибуты в форме пар имя-значение. Закрывающий тег точно такой же, как и открывающий, но перед именем элемента имеет косую черту (/) как своего рода закрывающее замечание.

Например, следующий код создает простую HTML-страницу:

<!DOCTYPE html>

<html>

<голова>

<title>Моя первая HTML-страница</title>

</голова>

<тело>

<h1>Добро пожаловать на мой сайт</h1>

<p>Это моя первая HTML-страница.</p>

</тело>

</html>

Здесь элемент <html> является корневым элементом и содержит элементы <head> и <body>. Элемент <head> содержит элемент <title>, который определяет заголовок документа. Элемент <body> содержит содержимое страницы, включая заголовок и абзац. В типичном HTML-документе сначала следует начать с самого большого элемента (в данном случае HTML), а затем переходить к более мелким частям по мере создания страницы (например, заголовок, заголовок, тело и т. д.).

HTML-атрибуты

Атрибуты HTML предоставляют дополнительную информацию об элементе и включаются в открывающий тег. Они действуют как дескрипторы. К наиболее распространенным атрибутам относятся следующие:

Атрибут идентификатора

Атрибут id идентифицирует элемент и в JavaScript и CSS позволяет манипулировать этим элементом.

Атрибут класса

Атрибут class группирует элементы вместе, позволяя стилизовать их с помощью CSS.

Атрибут стиля

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

Атрибут Href

Атрибут href используется в ссылках для указания URL-адреса целевой страницы.

Заключение

HTML является основой веб-дизайна и необходим для создания хорошо структурированной веб-страницы. Это первые шаги к полноценному веб-сайту! Таким образом, понимание основ HTML необходимо каждому, кто хочет создать веб-сайт. HTML — это язык разметки, включающий элементы, атрибуты и контент. Каждый элемент представляет определенный компонент веб-страницы, а атрибуты предоставляют дополнительную информацию об элементе. С помощью HTML вы можете создать структурированный, визуально привлекательный и интерактивный веб-сайт.

См. соответствующую статью здесь: https://www.drivetrafficmedia.com/the- Different-coding-languages-of-web-design/.