Каковы основы HTML?
Опубликовано: 2023-09-25HTML (язык гипертекстовой разметки) является фундаментальным строительным блоком веб-дизайна в округе Ориндж. Это язык разметки, используемый для создания структуры и содержания веб-страницы, и он является основой всех веб-сайтов. Наверное, все веб-дизайнеры сталкивались в своей карьере с HTML!
HTML — это стандартный язык, используемый для создания статических веб-страниц, которые не изменяются без ручного редактирования HTML-кода, а это означает, что пользователи не могут на них повлиять.
Основы 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/.