Домой Программирование HTML/CSS HTML заметки

HTML заметки

Каждый HTML-документ должен начинаться с декларации до версии 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> и с декларации для более поздних версий: <!DOCTYPE html>

Для правильного указания броузеру в какой кодировке документ используется тег meta внутри тега head:  <meta charset="имя кодировки"> Самым правильным будет использования utf-8, но что используется windows-1251. Этот тег используется корректно только в том, случае если сервер не выдает кодировку документа, то этот мета тег поможет броузеру понять кодировку документа. Но важно помнить, что если сервер выдает в ответе на запрос страницы имя кодовой страницы, но значение с сервера все равно переопределит значение в этом теге.

Мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы.  <meta name="keywords" content="разные, ключевые, слова"> при этом в атрибуте content через запятую перечисляются самые важные слова из содержания страницы. Кроме того существует мета тег description задающий краткое описание страницы:  <meta name="description" content="краткое описание"> , которое часто используется поисковиками при отображении страницы в результате поиска.

Комментарий внутри HTML:  <!-- комментарий --> , но внутри CSS это  /* комментарий */ .

Подключение внешних стилей  <link href="style.css" rel="stylesheet">

 

У тега html есть важный атрибут — lang. С помощью него браузер определяет язык содержимого HTML-страницы. Благодаря этому со страницей может корректно работать браузерный переводчик или программа для голосового чтения содержимого.

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

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

Список определений

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

  1. dl обозначает сам список определений;
  2. dt обозначает термин;
  3. dd обозначает определение термина.

Теги выделения текстовых фрагментов

Тег strong определяет важность отмеченного текста, а тег b – просто выделение. Тег em определяет текст на который сделан особый акцент, а тег i – просто выделение курсивом, текста которые не является более важным, например названия иди термины.(Еще один смысл при использовании голосового воспроизведения содержимого страницы, тэг strong и em будут выделяться интонацией).

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

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

Тег del выделяет текст, который был удалён в новой версии документа.

Тег ins выделяет текст, который был добавлен в новой версии документа.

Оба тега имеют атрибут datetime, в котором можно указать дату и время, когда была внесена та или иная правка. Атрибут datetime предназначен не для людей, а для компьютеров, поэтому дату и время там пишут в стандартизованном формате. При такой разметке программам легче разбирать документы и анализировать, когда произошли те или иные изменения. Простейшим примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом del, если найдена новая ошибка, то её добавляют в список и помечают тегом ins.

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

Цитаты

В HTML существует несколько тегов для обозначения цитат:

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

 

Тег label –  связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле. Иногда обернуть поле и текст подписи в тег label нельзя. Например, когда они размещены в разных ячейках таблицы. В этом случае можно связать подпись с полем с помощью атрибута for в котором указывается id поля который нужно связать.

Форматированный текст

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

Таблицы

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так: table { border-collapse: collapse; } убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину. А значение:  border-collapse: separate   «расклеивает» ячейки, и это значение по умолчанию.

Тег caption – это подпись к таблице.

Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева. По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно. По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS. За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right. За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

Цветами можно управлять с помощью этих свойств:

  • background-color — задаёт цвет фона,
  • color — цвет текста,
  • border-color — цвет рамок.

Например:

По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. Чем меньше содержимого, тем меньше размеры таблицы. С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы. Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось. Особое значение auto включает расчёт размеров по умолчанию.

Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.

Валидность HTML

Корректность разметки проверяется сервисом http://validator.w3.org/nu/ и зависит от типа указанного документа, означает что документ если он прошел валидацию соответствует требованием изложенным в соответствующей версии спецификации.

Правила разметки

Разметка страниц должна быть:

  • простой (для разметки элемента используется минимум необходимых тегов с максимально простой структурой);
  • понятной (использование понятных имен классов описывающих назначение элемента, но НЕ ее внешний вид. Сюда же можно отнести и использование обобщающих родительских блоков);
  • читабельной (форматирование кода за счет отступов и переносов в коде);
  • логичной (не содержит логических ошибок и учитывает особенности предметной области);
  • модульной (применение пространств имен, которое позволяет пере использовать фрагменты).

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

Замечание по ссылкам – все элементы которые потенциально вызывают переход куда-то это ссылка, все остальное это кнопки (тег button).

 

Обсуждение закрыто.