HTML, аббревиатура от HyperText Markup Language - это основной строительный блок любого веб-сайта и ключевая часть современного веб-дизайна. Это простой язык кодирования, который используется для создания структуры и содержимого веб-страниц, таких как текст, изображения и гиперссылки.
Проще говоря, без HTML не было бы веб-сайтов, которые мы знаем и любим сегодня.🔥11😁2
HTML играет ключевую роль в структуре сайта, предоставляя основу для создания и организации содержимого веб-страниц. Разработчики используют HTML-элементы, также известные как теги, для определения структуры и содержимого страницы.
Когда браузер читает HTML-документ, он отображает содержимое в визуальном формате, создавая макет и внешний вид страницы.
HTML также является основой для CSS и Java(Type)Script, которые используются для придания сайту стиля и интерактивности.
Когда браузер читает HTML-документ, он отображает содержимое в визуальном формате, создавая макет и внешний вид страницы.
HTML также является основой для CSS и Java(Type)Script, которые используются для придания сайту стиля и интерактивности.
👍8
HTML возник в начале 1990-х, когда Тим Бернерс-Ли создал первую версию этого языка разметки. Его цель была - дать людям простой способ обмениваться информацией в Интернете.
С тех пор HTML постоянно развивался и совершенствовался, чтобы соответствовать растущим потребностям веб-разработки. Появлялись новые версии с дополнительными возможностями.
Самая последняя версия - HTML5, вышедшая в 2014 году. Она содержит много новых тегов для мультимедиа, графики и семантики, что помогает создавать более интерактивные и удобные веб-сайты
С тех пор HTML постоянно развивался и совершенствовался, чтобы соответствовать растущим потребностям веб-разработки. Появлялись новые версии с дополнительными возможностями.
Самая последняя версия - HTML5, вышедшая в 2014 году. Она содержит много новых тегов для мультимедиа, графики и семантики, что помогает создавать более интерактивные и удобные веб-сайты
👍9
Основная структура
Веб-страница - это файл с расширением .html. Внутри него есть три основных элемента:
1. Тег <html> - это как "контейнер", в котором находится вся остальная информация страницы.
2. Тег <head> - в нем содержатся данные, которые нужны браузеру для работы со страницей. Например, заголовок окна, описание, ключевые слова.
3. Тег <body> - это основное содержимое страницы, которое видит пользователь в окне браузера. Сюда помещается весь текст, картинки, ссылки и другие элементы.
#теория
Веб-страница - это файл с расширением .html. Внутри него есть три основных элемента:
1. Тег <html> - это как "контейнер", в котором находится вся остальная информация страницы.
2. Тег <head> - в нем содержатся данные, которые нужны браузеру для работы со страницей. Например, заголовок окна, описание, ключевые слова.
3. Тег <body> - это основное содержимое страницы, которое видит пользователь в окне браузера. Сюда помещается весь текст, картинки, ссылки и другие элементы.
#теория
Таким образом, минимальная HTML-страница состоит из тегов <html>, <head> и <body>. Все остальные теги размещаются внутри этой основной структуры.
👍8
Теги в HTML - это специальные команды, которые задают, как нужно показывать информацию на веб-странице. Они выглядят вот так: <имя_тега [атрибуты]>. Обычно теги идут парами - есть начальный и конечный тег, между которыми помещается нужный текст или другой контент.
#теория
#теория
👍7
Атрибуты - это дополнительные свойства, которые можно добавлять к тегам. Они помогают изменять и улучшать то, как выглядит и работает содержимое внутри тега.
Атрибуты пишутся внутри открывающего тега, после его названия. Они состоят из двух частей:
1. Имя атрибута
2. Значение атрибута - пишется после знака "=" и заключается в кавычки
#теория
Атрибуты пишутся внутри открывающего тега, после его названия. Они состоят из двух частей:
1. Имя атрибута
2. Значение атрибута - пишется после знака "=" и заключается в кавычки
#теория
👍8
Комментарии(пояснение либо отзыв) в HTML
начинаются с <!-- и заканчиваются на -->.
Не забывайте о восклицательном знаке в начале тега! Но вам не нужно добавлять его в конце.
HTML-комментарии не отображаются в браузере. Комментарии к коду очень важны при работе в команде, поэтому не ленитесь их писать)
начинаются с <!-- и заканчиваются на -->.
Не забывайте о восклицательном знаке в начале тега! Но вам не нужно добавлять его в конце.
HTML-комментарии не отображаются в браузере. Комментарии к коду очень важны при работе в команде, поэтому не ленитесь их писать)
👍7
Спецсимволы HTML, или символы-мнемоники, используются для вставки специальных символов в текст веб-страницы, которые недоступны на стандартной клавиатуре или не поддерживаются кодировкой страницы. Это могут быть символы пунктуации, математические символы, буквы других алфавитов, специальные значки и т.д.
Чтобы вставить спецсимвол, необходимо использовать его HTML-код или мнемонику, например, © для символа копирайта ©. Спецсимволы чувствительны к регистру, поэтому их необходимо вводить точно так, как указано в таблице символов.
Если спецсимвол не имеет мнемоники, его можно вставить с помощью номерного кода, записанного в десятичной или шестнадцатеричной системе счисления, например, ☰ или ☰ для символа "гамбургер" ☰ 🍔.
Спецсимволы могут использоваться как внутри тегов HTML, так и в качестве значений свойств CSS, например, в свойстве content. При этом они наследуют цвет от родительского элемента, но его можно изменить с помощью свойства color или тега <span>.
Чтобы вставить спецсимвол, необходимо использовать его HTML-код или мнемонику, например, © для символа копирайта ©. Спецсимволы чувствительны к регистру, поэтому их необходимо вводить точно так, как указано в таблице символов.
Если спецсимвол не имеет мнемоники, его можно вставить с помощью номерного кода, записанного в десятичной или шестнадцатеричной системе счисления, например, ☰ или ☰ для символа "гамбургер" ☰ 🍔.
Спецсимволы могут использоваться как внутри тегов HTML, так и в качестве значений свойств CSS, например, в свойстве content. При этом они наследуют цвет от родительского элемента, но его можно изменить с помощью свойства color или тега <span>.
👍8✍4
Тег <html> и его атрибуты (lang, dir)
Атрибут lang для элемента html определяет основной язык документа.
Атрибут dir определяет направление письма для содержания элемента. Возможны следующие значения:
ltr — слева-направо;
rtl — справа-налево;
auto — направление письма для данного элемента следует определить автоматически, независимо от направления письма для родительского элемента.
Атрибут lang для элемента html определяет основной язык документа.
Атрибут dir определяет направление письма для содержания элемента. Возможны следующие значения:
ltr — слева-направо;
rtl — справа-налево;
auto — направление письма для данного элемента следует определить автоматически, независимо от направления письма для родительского элемента.
👍8
Поговорим еще про теги
Тег <head> никак не отображается в браузере, а просто является контейнером для следующих элементов:
Тег <noscript> это заголовок страницы и один из самых важных для поисковиков элементов метаданных. С его помощью алгоритмы понимают, насколько контент на странице соответствует запросу пользователя.
Тег <meta> используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся.
Тег <head> никак не отображается в браузере, а просто является контейнером для следующих элементов:
Тег <noscript> это заголовок страницы и один из самых важных для поисковиков элементов метаданных. С его помощью алгоритмы понимают, насколько контент на странице соответствует запросу пользователя.
Тег <meta> используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся.
✍6
Тег body предназначен для хранения содержания веб-страницы, отображаемого в окне браузера.
Атрибуты тега body:
alink — устанавливает цвет активной ссылки;
background — задаёт фоновый рисунок на веб-странице;
link — цвет ссылок на веб-странице;
vlink — цвет посещённых ссылок.
...
Их очень много, но всё это можно будет задать и в css-свойствах
Атрибуты тега body:
alink — устанавливает цвет активной ссылки;
background — задаёт фоновый рисунок на веб-странице;
link — цвет ссылок на веб-странице;
vlink — цвет посещённых ссылок.
...
Их очень много, но всё это можно будет задать и в css-свойствах
👍7
Тег div в HTML разбивает документ на отдельные части, которые отличаются друг от друга.
Его можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка).
Обычно теги div применяют для разделения веб-страницы на отдельные участки (например, шапка, область меню, раздел содержимого, подвал и т.п.).
Также его используют для выделения участков содержимого, которые должны отличаться по стилю от основного текста (например, для отображения на веб-страницы исходных кодов программ).
Для более эффективного применения тега div можно добавить атрибуты id и/или class, которые позволяют конкретному разделу дать уникальное имя и задать свои свойства (такие как шрифт, цвет текста, выравнивание и т.п.).
Его можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка).
Обычно теги div применяют для разделения веб-страницы на отдельные участки (например, шапка, область меню, раздел содержимого, подвал и т.п.).
Также его используют для выделения участков содержимого, которые должны отличаться по стилю от основного текста (например, для отображения на веб-страницы исходных кодов программ).
Для более эффективного применения тега div можно добавить атрибуты id и/или class, которые позволяют конкретному разделу дать уникальное имя и задать свои свойства (такие как шрифт, цвет текста, выравнивание и т.п.).
👍6
Тег span применяется к внутренним (inline) элементам страницы, то есть к словам и фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и т. п.
Тег span можно использовать для следующих задач:
Выделение участка текста определённым цветом, фоном или фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например, подсветка синтаксиса кода и т. п.
Тег span можно использовать для следующих задач:
Выделение участка текста определённым цветом, фоном или фоновым изображением.
Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
Создание различных форматирующих стилей для выбранного участка текста.
Использование скриптовых языков программирования к выбранным текстовым участкам, например, подсветка синтаксиса кода и т. п.
👍7
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой.
Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
👍5
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.
Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
👏5
Тег <a> используется для создания ссылки на что-либо в интернете. Эта ссылка может вести на другую веб-страницу, на какое-то место внутри той же веб-страницы, на файл, электронный адрес или на любое другое место.
Ссылкой может быть не только текст, но и любой другой элемент, например, картинка или кнопка, если его поместить внутри тега <a>.
Самый важный атрибут тега <a> - это атрибут "href", который содержит адрес, на который ведет ссылка. Этот атрибут указывает, куда именно будет вести ссылка при ее нажатии.
Короче говоря, тег <a> позволяет создавать активные ссылки на разные объекты в интернете, чтобы пользователь мог переходить по ним.
Ссылкой может быть не только текст, но и любой другой элемент, например, картинка или кнопка, если его поместить внутри тега <a>.
Самый важный атрибут тега <a> - это атрибут "href", который содержит адрес, на который ведет ссылка. Этот атрибут указывает, куда именно будет вести ссылка при ее нажатии.
Короче говоря, тег <a> позволяет создавать активные ссылки на разные объекты в интернете, чтобы пользователь мог переходить по ним.
👍4🫡2
Тег <abbr> используется для обозначения сокращений, аббревиатур и акронимов на веб-странице. Это очень полезно, потому что не все пользователи могут быть знакомы со всеми сокращениями, которые используются.
Основное назначение тега <abbr> - это предоставить расшифровку сокращения с помощью атрибута "noscript". Когда пользователь наводит курсор на элемент, обозначенный тегом <abbr>, он видит всплывающую подсказку с полным значением сокращения.
Основное назначение тега <abbr> - это предоставить расшифровку сокращения с помощью атрибута "noscript". Когда пользователь наводит курсор на элемент, обозначенный тегом <abbr>, он видит всплывающую подсказку с полным значением сокращения.
👍4👌3
Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
👍4🔥1😁1