Made in HTML/CSS – Telegram
Made in HTML/CSS
1.37K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
Теги в HTML - это специальные команды, которые задают, как нужно показывать информацию на веб-странице. Они выглядят вот так: <имя_тега [атрибуты]>. Обычно теги идут парами - есть начальный и конечный тег, между которыми помещается нужный текст или другой контент.
#теория
👍7
🫡12
Атрибуты - это дополнительные свойства, которые можно добавлять к тегам. Они помогают изменять и улучшать то, как выглядит и работает содержимое внутри тега.

Атрибуты пишутся внутри открывающего тега, после его названия. Они состоят из двух частей:

1. Имя атрибута

2. Значение атрибута - пишется после знака "=" и заключается в кавычки

#теория
👍8
Комментарии(пояснение либо отзыв) в HTML

начинаются с <!-- и заканчиваются на -->.

Не забывайте о восклицательном знаке в начале тега! Но вам не нужно добавлять его в конце.

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

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

Если спецсимвол не имеет мнемоники, его можно вставить с помощью номерного кода, записанного в десятичной или шестнадцатеричной системе счисления, например, ☰ или ☰ для символа "гамбургер" ☰ 🍔.

Спецсимволы могут использоваться как внутри тегов HTML, так и в качестве значений свойств CSS, например, в свойстве content. При этом они наследуют цвет от родительского элемента, но его можно изменить с помощью свойства color или тега <span>.
👍84
Тег <html> и его атрибуты (lang, dir)

Атрибут lang для элемента html определяет основной язык документа.

Атрибут dir определяет направление письма для содержания элемента. Возможны следующие значения:


ltr — слева-направо;
rtl — справа-налево;
auto — направление письма для данного элемента следует определить автоматически, независимо от направления письма для родительского элемента.
👍8
Поговорим еще про теги

Тег <head> никак не отображается в браузере, а просто является контейнером для следующих элементов:

Тег <noscript> это заголовок страницы и один из самых важных для поисковиков элементов метаданных. С его помощью алгоритмы понимают, насколько контент на странице соответствует запросу пользователя.

Тег <meta> используется для передачи метаданных о странице, т.е. с его помощью можно сообщить браузеру и роботам о том, какие данные и в каком виде на этой странице находятся.
6
Тег body предназначен для хранения содержания веб-страницы, отображаемого в окне браузера.

Атрибуты тега body:

alink — устанавливает цвет активной ссылки;
background — задаёт фоновый рисунок на веб-странице;
link — цвет ссылок на веб-странице;
vlink — цвет посещённых ссылок.
...
Их очень много, но всё это можно будет задать и в css-свойствах
👍7
Тег div в HTML разбивает документ на отдельные части, которые отличаются друг от друга.

Его можно использовать исключительно для отделения одной части (например, текста) от другой (например, рисунка).

Обычно теги div применяют для разделения веб-страницы на отдельные участки (например, шапка, область меню, раздел содержимого, подвал и т.п.).

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

Для более эффективного применения тега div можно добавить атрибуты id и/или class, которые позволяют конкретному разделу дать уникальное имя и задать свои свойства (такие как шрифт, цвет текста, выравнивание и т.п.).
👍6
Тег span применяется к внутренним (inline) элементам страницы, то есть к словам и фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и т. п.

Тег span можно использовать для следующих задач:

Выделение участка текста определённым цветом, фоном или фоновым изображением.

Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.

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

Использование скриптовых языков программирования к выбранным текстовым участкам, например, подсветка синтаксиса кода и т. п.
👍7
Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой.

Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
👍5
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину.

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

Ссылкой может быть не только текст, но и любой другой элемент, например, картинка или кнопка, если его поместить внутри тега <a>.

Самый важный атрибут тега <a> - это атрибут "href", который содержит адрес, на который ведет ссылка. Этот атрибут указывает, куда именно будет вести ссылка при ее нажатии.

Короче говоря, тег <a> позволяет создавать активные ссылки на разные объекты в интернете, чтобы пользователь мог переходить по ним.
👍4🫡2
Тег <abbr> используется для обозначения сокращений, аббревиатур и акронимов на веб-странице. Это очень полезно, потому что не все пользователи могут быть знакомы со всеми сокращениями, которые используются.

Основное назначение тега <abbr> - это предоставить расшифровку сокращения с помощью атрибута "noscript". Когда пользователь наводит курсор на элемент, обозначенный тегом <abbr>, он видит всплывающую подсказку с полным значением сокращения.
👍4👌3
Тег <address> используется для выделения контактной информации владельца сайта либо автора статьи. В качестве контактной информации для обратной связи может быть указан адрес, телефон, e-mail, ссылка на сайт и т.д.
👍3
Тег <article> в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.

Тегом <article> размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.

Не используйте <article> для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
👍4🔥1😁1
Тег aside представляет содержимое, которое косвенно связано с остальным контентом веб-страницы и может рассматриваться независимо от него.

Этот элемент можно использовать, например, для
рекламных блоков,
блоков навигационных элементов
👍4
Тег <audio> предназначен для встраивания аудиоконтента на веб-страницу. Он позволяет добавлять аудиофайлы, которые могут проигрываться в браузере.

Основные атрибуты тега <audio>:

1. src - указывает путь к аудиофайлу, который необходимо воспроизвести.
2. controls - добавляет элементы управления воспроизведением аудио (play, pause, volume и т.д.).
3. autoplay - позволяет автоматически запускать воспроизведение аудио при загрузке страницы.
4. loop - заставляет аудио проигрываться в бесконечном цикле.
5. muted - изначально выключает звук аудио.
👍3
Тег <b> (от англ. «bold» — полужирный) предназначен для выделения текста полужирным начертанием в целях привлечения к нему внимания пользователя, упрощения восприятия им текста и т.д.

При этом выделенный текст не считается более важным и не должен читаться в альтернативном голосе или настроении.

Элемент <b> идеально подходит в следующих ситуациях:
ключевые моменты текста;
ключевые объекты и персонажи;
название продуктов в обзоре;
имена и названия организаций;
👍3
Тег <blockquote> используется для обозначения цитаты или выдержки из другого источника на веб-странице. Он отображает текст с дополнительным отступом, что визуально выделяет его из общего контекста.
👍3