Сайт начинающего верстальщика

Теги dl, dt и dd, список описаний

А вот и новая запись блога про «болезни» верстальщика, которыми вы не заразитесь, если внимательно пройдёте эту часть. У каждой болезни есть описание, а у некоторых их даже несколько. Для разметки такой информации лучше всего подойдёт последний вид списков — список описаний.

Список описаний хорош для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

  • (сокращение от «description list») обозначает сам список описаний;
  • (сокращение от «description term») обозначает термин;
  • (сокращение от «description definition») обозначает описание или определение.

Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

 
HTML
Язык гипертекстовой разметки
CSS
Каскадные таблицы стилей
Язык для оформления HTML-документов

По умолчанию браузер добавляет небольшой отступ слева от определений.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 18 сентября по 20 ноября 2023. Только 3 дня цена 19 900 ₽ 22 900 ₽

Блог

Читайте также:  What is java community process

День четвёртый. Как я чуть не заболел

Сегодня я узнал, что верстальщиком быть опасно. Когда ты только начинаешь свой путь, ты ещё неопытен и легко можешь заразиться какой-нибудь болезнью. Вот некоторые из опасностей, которые могут подстерегать:

Диватоз Острый страх семантики Таблицефобия Избегание таблиц Стремление сверстать таблицу на дивах Классянка Навязывание классов каждому тегу

Подвал сайта

Источник

Конспект «Разметка текста»

    (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

    могут находиться только теги
    (сокращение от «list item»), которые обозначают элементы или пункты списка:

    отмечаются маркерами такого же цвета, как цвет текста.

Упорядоченный список

    (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

  1. Я первый и только первый пункт
  2. Я не я, если я не второй пункт
  3. Третий после стольких лет? Всегда!

    ставится их порядковый номер.

  1. Я первый и только первый пункт
  2. Я не я, если я не второй пункт
  3. Третий после стольких лет? Всегда!

    может быть несколько атрибутов: start , reversed и type .

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.

Список описаний

Тег (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

  • обозначает сам список описаний;
  • (сокращение от «description term») обозначает термин;
  • (сокращение от «description definition») обозначает описание или определение.

Теги и пишутся внутри . Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

 
HTML
Язык гипертекстовой разметки
CSS
Каскадные таблицы стилей
Язык для оформления HTML-документов

По умолчанию браузер добавляет небольшой отступ слева от определений.

Преформатированный текст и код

Тег (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .

Пример преформатированного текста с сохранёнными пробелами и переносами строк

Пример преформатированного текста с сохранёнными пробелами и переносами строк

Тег . Используется для обозначения фрагментов кода.

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

Тег ul — это неупорядоченный список.

Тег можно вкладывать внутрь тега .

Цитаты

Небольшие цитаты

Тег (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.

Источник цитат

Тег . В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое в браузере выделяется курсивом.

По словам Чарльза БуковскиИнтеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.

По словам Чарльза Буковски — Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.

Тег может быть самостоятельным и не привязываться к цитате:

Какой доктор ваш любимый (в сериале Доктор Кто)?

Длинные цитаты

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

 

Ум ценится дорого, когда дешевеет сила.

Джейсон Стэтхэм

В браузере контенту тега обычно добавляется дополнительный отступ слева и справа.

Ум ценится дорого, когда дешевеет сила.

Джейсон Стэтхэм

Разметка фрагментов текста

Символы-мнемоники

Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):

Перенос строк

Тег
(сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Верхний и нижний индексы

Теги и . Названия образованы от слов «superscript» и «subscript».

Тег отображает текст в виде верхнего индекса, а отображает текст в виде нижнего индекса.

Их используют для указания единиц измерения или для написания простых формул:

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

Дата и время

Тег . С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:

   

Браузер отображает только содержимое тега, а содержимое datetime не отображается.

Акцентирование внимания

Теги и . Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.

Тег определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Я просто обожаю холодные зимние дни!

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

Он взглянул в окно и подумал — такого просто не может быть!

Выделение и придание важности

Теги и . Название образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.

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

Внимание! Это место опасно. Вы можете упасть в пропасть, если подойдёте близко к краю.

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

Вы входите в небольшую комнату. Ваш меч загорается ярче. Крыса стремительно пробегает вдоль стены.

Описание изменений

Теги и . Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.

Тег выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.

Тег выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.

Разделение контента

Теги и . Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

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

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

 

Текст, в котором выделена фраза

Записывайтесь на трансляцию 27 июля в 13:00

Источник

Теги dl, dt и dd, список описаний

А вот и новая запись блога про «болезни» верстальщика, которыми вы не заразитесь, если внимательно пройдёте эту часть. У каждой болезни есть описание, а у некоторых их даже несколько. Для разметки такой информации лучше всего подойдёт последний вид списков — список описаний.

Список описаний хорош для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

  • (сокращение от «description list») обозначает сам список описаний;
  • (сокращение от «description term») обозначает термин;
  • (сокращение от «description definition») обозначает описание или определение.

Каждый список может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

 
HTML
Язык гипертекстовой разметки
CSS
Каскадные таблицы стилей
Язык для оформления HTML-документов

По умолчанию браузер добавляет небольшой отступ слева от определений.

Блог

День четвёртый. Как я чуть не заболел

Сегодня я узнал, что верстальщиком быть опасно. Когда ты только начинаешь свой путь, ты ещё неопытен и легко можешь заразиться какой-нибудь болезнью. Вот некоторые из опасностей, которые могут подстерегать:

Диватоз Острый страх семантики Таблицефобия Избегание таблиц Стремление сверстать таблицу на дивах Классянка Навязывание классов каждому тегу

Подвал сайта

Источник

Теги div и span, контейнеры для стилизации

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

Но раз такое выделение «бессмысленно», то и делать его «смысловыми» тегами нельзя? Да, это так.

Но есть два специальных тега у которых «смысла» нет. Это теги (сокращение от «division») и . Это «чистые» элементы, которые отлично подходят для визуальной группировки других элементов. Использовать эти теги рекомендуется, если более подходящих семантических тегов не нашлось.

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

Тег обычно используется для группировки крупных элементов, например, нескольких абзацев, или в качестве контейнера для создания сеток страниц. А используется для выделения мелких текстовых элементов: частей слов, отдельных слов или фраз, состоящих из нескольких слов:

 

Мы два красивых выделенных абзаца.

С жёлтеньким фоном!

Текст, в котором выделена фраза.

В этом задании мы используем в качестве обёртки для пунктов списка определений. В таком случае в теге не должно находиться не обёрнутых в пунктов списка. Мы либо оборачиваем все элементы, либо оставляем все теги и без обёрток. Смешение обёрнутых и не обёрнутых в определений внутри одного списка считается ошибкой.

После выполнения этого шага, можно скачать промежуточное состояние нашего Сайта начинающего верстальщика по этой ссылке.

Мы подготовили стили для выделения текста и блока. Обратите внимание на вкладку style.css .

Блог

День четвёртый. Как я чуть не заболел

Сегодня я узнал, что верстальщиком быть опасно. Когда ты только начинаешь свой путь, ты ещё неопытен и легко можешь заразиться какой-нибудь болезнью. Вот некоторые из опасностей, которые могут подстерегать:

Диватоз
Острый страх семантики
Таблицефобия
Избегание таблиц
Стремление сверстать таблицу на дивах
Классянка
Навязывание классов каждому тегу

Подвал сайта

Источник

Оцените статью