HTML Урок 1.1. Структура и история языка HTML
Цель урока: рассмотрение хронологического развития версий языка HTML. Изучение структурных элементов языка и основных тегов.
История версий html
Историю развития версий языка HTML можно рассмотреть на изображении: —>
Структурные элементы языка
- Единицей языка HTML является тег — команда, заключенная в угловые скобки.
- Теги бывают открывающие (запускающие действие команды) и закрывающие (останавливающие действие команды, соответственно).
- Закрывающий тег отличается наличием прямого слэша / .
- Команды тегов распространяются на их содержимое:
- Целиком пара открывающий-закрывающий тег называется элементом или контейнером.
- Помимо элементов, которые содержат и открывающий и закрывающий тег, есть пустые элементы, в которых содержание как бы отсутствует, и, соответственно у них нет закрывающего тега. Хотя на самом деле их содержанием является сам открывающий тег.
Пример пустых элементов:
Пример html-документа с разъяснениями:
Еще пример HTML-страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
html> head> . Служебная информация. /head> body> h1>Мой первый HTML документ/h1> hr> p>Некоторый текст. Основное содержание текущей страницы. Первый абзац p>Второй абзац. Для форматирования текста используют разные элементы языка HTML./p> /body> /html>
. Служебная информация.
Мой первый HTML документ
Некоторый текст. Основное содержание текущей страницы. Первый абзац
Второй абзац. Для форматирования текста используют разные элементы языка HTML.
На языке html комментарии ставятся при помощи символов
комментария блочного-->
Такой комментарий может быть как строчным, т.е. занимать одну строку документа, так и блочным, занимающим несколько строк.
Важно: Для того, чтобы не было проблем с кодировкой символов, необходимо указать тип кодировки в области head (т.е. после открывающего тега head — головная часть документа)
Элементы могут быть вложены друг в друга, тогда это выглядит примерно вот так:
p>Это em>очень/em> интересно/p>
Это очень интересно
Схематично родительские теги и вложенные (дочерние) выглядят так:
Блочные и строчные элементы
Все элементы языка html делятся на строчные (inline) и блочные (block). Строчные элементы отличаются тем, что они позволяют разместиться на «своей» строке следующим за ними элементам (позволяют «встать» рядом).
Тогда как блочные элементы займут всю строку, не «пуская» на нее следующие за ними элементы. Схематично это выглядит так:
This is a Level 1 Heading
Управляющие коды форматирования символов можно разделить на две подгруппы: коды физических атрибутов символов и коды логических атрибутов символов. Эти коды всегда парные, и вы вставляете их прямо в поток символов; они не влияют на отступы, промежутки и переводы строк. Коды физических атрибутов соответствуют параметрам форматирования, применяемым в текстовых процессорах:
<B> Полужирный шрифт <I> Курсив <U> Подчеркивание <TT> «Телетайпный» текст — равноширинный шрифт (Курьер)
Например, последовательность текста
Второе <B>слово</B> в этом <I>предложении</I> выделено полужирным шрифтом, а пятое — курсивом. <P>
будет выглядеть на экране так:
Второе слово в этом предложении выделено полужирным шрифтом, а пятое — курсивом.
Коды логических атрибутов более абстрактны и более многочисленны и примерно соответствуют стилям символов из таблицы стилей текстового процессора:
| <ADDRESS> | Информация для контакта с автором документа HTML |
| <CITE> | Цитата |
| <CODE> | Используется для директив HTML |
| <DFN> | Определение |
| <EM> | Выделение (обычно курсивом) |
| <KBD> | Клавиатурный символ |
| <SAMP> | Пример вывода команды |
| <STRONG> | Усиленное выделение (полужирным шрифтом) |
| <VAR> | Переменная в программе |
Когда вы используете управляющие коды логических атрибутов форматирования символов, в действительности вы не можете предсказать, как конкретная программа просмотра Web их обработает. В настоящее врем большинство программ просмотра отображают различные коды логических атрибутов в <B>, <I> и <TT> и часто больше ничего с ними не делают. В то же врем использование логических стилей открывает множество возможностей на будущее, поскольку данные коды сообщают программе просмотра нечто важное о природе текста и о его виде. Так что авторам Web лучше там, где это возможно, использовать коды логических, а не физических атрибутов.
Кстати, может возникнуть соблазн попытатьс использовать коды форматирования символов в сочетании, например так: <B><I><U>Некоторый текст</U></I></B>. Ведь это обычный способ применять несколько атрибутов форматирования к символам в текстовом процессоре! Однако правильное поведение программ просмотра Web в ответ на такую последовательность не гарантируется: одни могут доблестно попытаться выполнить все ваши указания, другие просто выберут какой-то один атрибут и применят его, а некоторые могут просто ничего не сделать. Мой совет — избегать использовать коды форматирования символов в сочетаниях.
На рисунках 3 и 4 показаны примеры управляющих кодов форматирования символов и их действие. Рис.3. Этот исходный текст HTML показывает различные коды форматирования символов HTML. <HTML> <HEAD> <TITLE>HTML Character Formatting</TITLE> </HEAD> <BODY> <H1>Examples of HTML Character Formatting</H1> <HR> <B>This is «bold» text</B><BR> <I>This is «italic» text</I><BR> <T>This is «typewriter» text</TT><BR> <E>This is «emphasized» text</EM><BR> <STRONG>This is «strong» text</STRONG><BR> <CITE>This is «citation» text</CITE><BR> <SAMP>This is «sample» text</SAMP><BR> <KBD>This is «keyboard» text</KBD><BR> <VAR>This is «variable» text</VAR><BR> <DFN>This is «definition» text</DFN><BR> <HR> <ADDRESS> Created 3/13/95 / Last Modified 3/13/95/<BR> Cedars-Sinai Medical Center / duncan@csmc.edu </ADDRESS> </BODY> </HTML> Рис. 4. Примеры форматирования символов, сформатированные программой просмотра Web по исходному тексту HTML на рис. 3
Examples of HTML Character Formatting
This is «bold» text
This is «italic» text
This is «typewriter» text
This is «emphasized» text
This is «strong» text
This is «citation» text
This is «sample» text
This is «keyboard» text
This is «variable» text
Created 3/13/95 / Last Modified 3/13/95/
Cedars-Sinai Medical Center / duncan@csmc.edu
КОМАНДЫ ФОРМАТИРОВАНИЯ СПИСКОВ.
Версии 0.9/1.0 и 2.0 HTML предусматривают три типа списков: упорядоченные списки, неупорядоченные списки и списки определений, которые обозначаются соответственно метками <OL>, <UL> и <DL>. Упорядоченные списки предназначены для последовательных операций или алгоритмов, и программа просмотра Web автоматически генерирует номера для каждого пункта в списке. Неупорядоченные списки используются, например, при составлении перечня покупок, когда порядок несуществен и перед каждым элементом в выводимом на экран списке будет стоять буллит (специальный «списковый» значок). Списки определений обеспечивают специальное форматирование, как в словарях, или глоссариях, дл терминов и связанных с ними описаний.
Отдельные элементы в упорядоченном и неупорядоченном списке помечаются одиночным кодом <LI>, а элементы в списках <DL> — кодами <DT> и <DD> для термина и его значения соответственно. Например, последовательность HTML
- Это элемент списка
- Это другой элемент
- Это последний элемент
Вложенные списки поддерживаются в полной мере, и некоторые программы просмотра даже делают попытку использовать разумную иерархию буллитов разной формы или цвета для неупорядоченных списков. Висячие отступы, промежутки и другие важные аспекты списков, к сожалению, пока недоступны для настройки. В существующих версиях HTML списки — практически единственный способ наглядно отобразить структурированную информацию, однако на самом деле они — весьма слабое средство. Когда HTML 3.0 получит широкое распространение вместе с программами просмотра Web, полностью обеспечивающими работу с таблицами HTML 3.0, можно ожидать, что многие теперешние варианты использования кодов форматирования списков будут забыты.
Дополнительные примеры применения списков разных типов приводятся на рисунках 5 — 8. Рис.5. Этот исходный текст HTML демонстрирует упорядоченные (нумерованные) и неупорядоченные (с буллитами) списки HTML. <HTML> <HEAD> <TITLE>HTML Ordered and Unordered Lists</TITLE> </HEAD> <BODY> <H1>This is an Unordered (Bulleted) List</H1> <HR> <UL> <LI>This is 1st item. <LI>This is 2nd item. <LI>This is 3rd item. </UL> <HR> <OL> <H1>This is an Ordered (Numbered) List</H1> <HR> <OL> <LI>This is 1st item. <LI>This is 2nd item. <LI>This is 3rd item. </OL> <HR> <ADDRESS> Created 3/13/95 / Last Modified 3/13/95/<BR> Cedars-Sinai Medical Center / duncan@csmc.edu </ADDRESS> </BODY> </HTML> Рис.6. Упорядоченные (нумерованные) и неупорядоченные (с буллитами) списки, сформированные программой просмотра Web по исходному тексту HTML на рис. 5.
This is an Unordered (Bulleted) List
- This is 1st item.
- This is 2nd item.
- This is 3rd item.
This is an Ordered (Numbered) List
- This is 1st item.
- This is 2nd item.
- This is 3rd item.
Рис. 7 Этот исходный текст HTML демонстрирует вложенные списки и списки определений. <HTML> <HEAD> <TITLE>HTML Nested and Definition Lists</TITLE> </HEAD> <BODY> <H1>This Demonstrates Nested Lists</H1> <HR> <UL> <LI>This is the 1st item. <UL> <LI>This is a nested bulleted item. <LI>This is another nested bulleted item. </UL> <LI>This is the 2nd item. <OL> <LI>This is a nested numbered item. <LI>This is another nested numbered item. </OL> <LI>This is a 3rd item. </UL> <HR> <H1>This is Definition List</H1> <HR> <DL> <DT>This is first term. <DD>This is a description of the first term. The description can be very long. This is more description of the first term. <DT>This is second term. <DD>This is a description of the second term. The description can be very long. This is more description of the second term. </DL> <HR> <ADDRESS> Created 3/13/95 / Last Modified 3/13/95/<BR> Cedars-Sinai Medical Center / duncan@csmc.edu </ADDRESS> </BODY> </HTML> Рис. 8. Вложенные списки и списки определений, сформированные программой просмотра Web по исходному тексту HTML на рис. 7
This Demonstrates Nested Lists
- This is the 1st item.
- This is a nested bulleted item.
- This is another nested bulleted item.
- This is a nested numbered item.
- This is another nested numbered item.
This is Definition List
This is first term. This is a description of the first term. The description can be very long. This is more description of the first term. This is second term. This is a description of the second term. The description can be very long. This is more description of the second term. Created 3/13/95 / Last Modified 3/13/95/
Cedars-Sinai Medical Center / duncan@csmc.eduСПЕЦИАЛЬНЫЕ СИМВОЛЫ
Спецификация HTML определяет набор символов дл документов HTML как набор 8-разрядных однобайтовых символов ISO 8859/1, который также известен как Латинский алфавит N 1 (Latin-1). Это набор из 256 символов, который содержит много графических элементов и символов с диакритическими знаками, необходимых дл текстов на большинстве европейских языков, в том числе и на английском. Младшие 128 кодов символов ISO 8859/1 практически те же, что и в ASCII, и этот поднабор иногда называют International Reference Version, или ISO-646.
На практике из-за ограниченного набора символов клавиатуры и в целях переносимости на другие процессоры и платформы большинство документов HTML содержат знаки только из первой половины кодовой таблицы ASCII. Но в издательской деятельности часто необходимы многие иные символы, например с диакритическими знаками или преобразованные другим способом, значки валют, торговой марки и копирайта, не входящие в набор ASCII. Кроме того, нам понадобится какой-то способ вывода символов, которые могли бы быть интерпретированы как части команд форматирования HTML: < (меньше), > (больше), & (амперсанд) и " (кавычка).
Чтобы сделать это, HTML предусматривает специальные «escape-последовательности», которые могут использоваться для кодирования символов, не входящих в таблицу ASCII, и ограничителей команд HTML. В спецификациях HTML эти escape-последовательности называются символьными объектами (character entities). Вот наиболее важные из них:
Escape-последовательность Отображается как < < > > & & " " Специальные символы могут также кодироватьс цифровой escape-последовательностью, где число соответствует коду символа ISO 8859.
Escape-последовательность Отображается как &#60; < &#62; > &#38; & &#34; " &#169; © &#174; ® Полный список escape-последовательностей весьма длинен; лучший перечень содержится в спецификации HTML 2.0, которая доступна в виде гипертекста во многих узлах системы WWW (попробуйте сперва http://info.cern.ch).
Отметим, что, согласно спецификации HTML, escape-последовательности для специальных символов чувствительны к регистру символов. Но некоторые программы просмотра (в том числе Netscape Navigator) воспринимают символы верхнего регистра так же, как и нижнего.
КОМАНДЫ ВСТАВКИ ГРАФИКИ.
Одно из самых захватывающих свойств WWW — ее мультимедиа-возможности, т. е. вставка рисунков, пиктограмм, видеоклипов и звука наравне с текстом и представление результатов в визуально насыщенном, привлекательном и цельном виде. Эта базовая ориентаци на графику, как я полагаю, — главная причина стремительного взлета World-Wide Web, появившейся в 1994 г. буквально из ничего и практически сразу затмившей своих чисто текстовых предшественников, медленно росшей глобальной сети клиентов и серверов Gopher.
Однако безболезненная интеграция графики, которую ощущают пользователи программы просмотра Web, скорее кажущаяся, чем реальная. С точки зрения автора документа, правильная работа с графикой требует огромных расходов времени. Ведь нужно решить множество проблем: приобретение информации и соблюдение прав собственности, эстетические проверки корректности гипертекстовых связей, технические вопросы работы с графическими форматами и отображения палитры и, наконец, чрезвычайно важные вопросы производительности.
На простейшем уровне графические элементы вставляются в текст с помощью управляющего кода <IMG>. Он содержит унифицированный адрес ресурса URL, определяющий действительное положение графического объекта в отдельном файле, и некоторые подробности его вывода на экран. Другими словами, графика на самом деле не включается в документ HTML, а вызывается по ссылке. Адрес может быть абсолютным или относительным, так что сам графический объект может находиться или на той же машине, что и обращающийся к нему документ HTML, или на любом другом адресуемом сервере Web, или даже на собственном жестком диске пользователя. Полный вид кода <IMG> такой:
<IMG SRC=»URL» [ALIGN=TOP|MIDDLE|BOTTOM] [ALT=»text»]>
Когда пользователь просматривает документ HTML, программа отдельными транзакциями извлекает все графические объекты, упоминающиеся в документе, и затем объединяет их в выводимый объект в соответствии с дополнительным параметром выравнивания (по умолчанию — BOTTOM). Необязательный параметр ALT задает текст, который будет выведен вместо рисунка программами просмотра Web, работающими только в текстовом режиме, например Lynx. Большинство графических программ просмотра могут работать со встраиваемыми изображениями нескольких типов, в том числе с JPEG-файлами, растровыми изображениями формата X и GIF-файлами из CompuServe. Чаще всего используется формат GIF, хот из-за недавних юридических разборок положение в 1996 г. может быстро измениться.
Давайте посмотрим простой пример встраиваемой графики. Приведенный ниже фрагмент в документе HTML отображает графический файл JOHNDOE.GIF в левой части окна просмотра, а текст «John Doe» — в правой, при этом линейка, на которой располагается текст, будет находиться на половине высоты рисунка.
<P> <IMG SRC=»JOHNDOE.GIF» ALIGN=MIDDLE> John Doe<P>
Заметьте, что адрес графического файла — относительный, так что программа просмотра будет пытаться найти его там же, где и сам документ HTML, содержащий ссылку на него.
Проверка адреса и вопросы производительности — больное место для мультимедиа-публикаций Web. Поскольку документы HTML и их встроенная графика в действительности находятся в разных файлах на сервере Web, ссылка на файл в документе и реальный файл легко могут рассогласоваться. Путешествуя по сети, вы часто можете видеть, что ваша программа просмотра Web отображает вместо некоторого вставляемого рисунка обобщенную пиктограмму, означающую: «Я не могу найти нужный файл по адресу, указанному в коде <IMG>». Могут происходить и менее серьезные ошибки, например, когда содержимое графического файла было исправлено или полностью изменено после создания документа HTML, содержащего на него ссылку, либо когда при коллизии имен файлов на удаленной системе или при ошибке в задании адреса будет показано не то изображение. Когда в Web появятся более сложные авторские системы,, проблемы этого рода, несомненно, станут менее значительными.
Проблемы производительности в обозримом будущем тоже никуда от нас не уйдут. Несколько килобайт кодированного текста HTML могут превратиться во многие страницы форматированного текста на экране, но даже крохотный графический объект с 256 цветами, отличный от пиктограммы, займет как минимум несколько килобайт, а полноэкранная картинка легко может потребовать более 100 Кбайт. Несложно представить, до чего замедлитс производительность программы просмотра при интенсивном использовании графики, особенно для тех пользователей, кто связывается с Internet с помощью модема со скоростью 14,4 кбит/с и соединения SLIP или по арендованной линии с пропускной способностью 56 кбит/с.
Первая широко используемая программа просмотра Web — Mosaic 1.0.3 — не позволяла пользователю делать что-либо, пока все графические файлы, упоминаемые в документе HTML, не будут получены, если только загрузка рисунков не была отменена полностью. Когда я впервые начал использовать Mosaic, у моей фирмы было только относительно низкоскоростное (56 кбит/с) соединение со скелетом Internet. Помню, как я скрипел зубами в ожидании, пока Mosaic покажет рассредоточенный между пиктограммами, большими картами и рисунками документ Web, созданный бездумным автором на машине с мультимегабитным доступом к Internet, наивно полагающим, что и все остальные в мире имеют такой же.
Программы просмотра второго поколения, такие, как Netscape Navigator, до некоторой степени обходят проблему производительности, проводя получение графических файлов в «фоновом» режиме и позвол пользователю листать текст документа или переходить к другому документу до окончания загрузки файла. Но как автор документов Web вы можете лучше позаботиться о читателе, используя графические элементы только там, где это действительно необходимо, и предусмотрительно помещая в документ маленькие копии («thumbnail») иллюстраций, позволяющие быстро переключиться на свои полноразмерные оригиналы.
КОМАНДЫ ГИПЕРТЕКСТОВЫХ СВЯЗЕЙ.
Эти управляющие коды применяются для кодировани гипертекстовых связей — выделенных цветом или подчеркиванием кусочков текста или растровых изображений в специальной рамке, щелчком на которых пользователь может перейти к другому документу или к другому месту того же документа. Основная форма кода гипертекстовой связи такая:
<A HREF=»URL»>некоторый текст</A>
где «некоторый текст» — это то, что видит пользователь, а URL — «место назначения» гипертекстовой связи. Адрес этого места может быть абсолютным, с полным именем сервера и именем файла документа назначения; относительным, означающим, что имя сервера и начальный каталог предполагаются теми же, что и у документа, содержащего код гипертекстовой связи; или даже локальным, если файл находится на компьютере, где запущена программа просмотра Web, а не на сервере Web. Между кодами <A> и </A> можно поместить текст любого объема, код <IMG> для вставки графики или сочетание того и другого.
Обычно, когда пользователь щелкает на гипертекстовой связи, программа просмотра извлекает документ, форматирует его и затем показывает, начиная с верхней части окна просмотра. Однако код связи позволяет также немедленно прокрутить документ до метки в документе назначения. Вот общий вид кода гипертекстовой связи такого вида:
<A HREF=»URL#метка»>некоторый текст</A>
Метка должна находиться в HTML-документе назначени и иметь такой вид:
<A NAME=»метка»>текст, который увидит пользователь</A>
Поддержка меток в документах HTML дает возможность создания гипертекстовых связей, которые просто заставляют программу просмотра менять положение просматриваемого документа в окне. Такие коды имеют вид
<A HREF=»#метка»>некоторый текст</A>
Обратите внимание на отсутствие адреса URL и обязательное наличие символа #. Гипертекстовые связи такого типа стали очень популярны в документах Web, которые часто начинаются с плана (outline) документа (реализованного как упорядоченный или неупорядоченный список), где каждый элемент на самом деле представляет собой код гипертекстовой связи, адресующий к соответствующему разделу документа. Единственный неудачный момент таких внутридокументных связей — это то, что кнопка возврата (Back) программы просмотра Web никогда не действует так, было бы естественно ожидать!
КАК СВЯЗАТЬСЯ С АВТОРОМ.
Ваши комментарии и предложения шлите мне по любому из адресов:
Фразовые теги в HTML
Главная составляющая веба — тексты. Тексты состоят из параграфов, строк и слов с разным форматированием. Какие-то слова выделены курсивом или подчёркнуты, у параграфов есть отступы, а у строк разрывы.
В HTML тексты внутри параграфов и их форматирование называют фразовым контентом. Кроме фразового есть и другие категории контента. Полный список смотрите в Руководстве веб-разработчика.
Фразовый контент может состоять из ссылок, терминов, сокращений, цитат и других фраз. Их обозначают с помощью фразовых тегов. Вы с ними наверняка уже сталкивались. Это теги , , , , и другие.
Фразовые теги отвечают за форматирование. Форматирование бывает визуальным и логическим.
Визуальное форматирование — любые видимые нам изменения текста. Практически всем фразовым тегам по умолчанию в браузерах заданы стили. Так что напрямую за визуальное форматирование отвечает CSS.
Логическое форматирование — это форматирование на уровне смысла и содержания. Оно нужно браузерам, вспомогательным и голосовым технологиям. Это особенно важно для программ чтения с экранов — скринридеров.
В этой статье расскажу о том, в каких случаях используют фразовые теги и как это правильно делать.
Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.
К тегам визуального форматирования относятся:
А это список тегов логического форматирования:
Сейчас расскажу подробнее о каждом фразовом элементе.
span — это контейнер для текста.
span используют, если нужно выделить другим цветом отдельные слова, словосочетания и предложения, изменить размер шрифта, добавить другой фон, обвести рамкой участок текста.
Со span можно использовать атрибуты class=»» , title=»» , lang=»» и xml:lang=»» . Последний — это аналог lang в XHTML-документах.
-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в .-- CSS --
.scary color: tomato;
>Так отобразится этот текст в браузере:
span не семантический тег и влияет только на внешний вид элементов, если ему заданы стили. Для скринридеров и поисковых роботов он не имеет значения, но есть одно исключение.
Это исключение — трюк с атрибутом lang=»» . Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.
В примере сайт на русском языке, но в тексте встречаются слова на английском. Укажем для неё другой язык:
.
.
.Я больше не мёрджу бездумно. Как говорится, enough is enough.
По умолчанию фраза внутри span не будет отличаться от остального текста.
и
br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.
br пригодится для форматирования стихов, текстов песен или адресов. Во всех остальных случаях для разбиения на абзацы нужно использовать тег p .
Это одиночный тег и его не нужно закрывать.
Я сидел на пустом берегу.
Голубая вода Онтарио отражала череду моих мыслей —
Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.В браузере этот текст выглядит так:
wbr (word break opportunity) ставит потенциальный разрыв строки.
Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr . Он подходит для случаев, когда вы не уверены в месте переноса строки.
wbr тоже одиночный тег.
Сэло не удивился, узнав, что солнечные пятна действуют на его друзей, попавших в хроно-синкластический инфундибулум.Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.
Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса (-):
ЭйяфьядлайёкюдльПеренос сработает, когда ширина контейнера уменьшится.
С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.
Простой пример использования:
https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибарПо умолчанию ссылки подчёркнуты. Оттенок синего и стиль подчёркивания зависят от браузера.
Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.
Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:
В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden; .
При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target=»» .
В примере ссылке задано значение _blank . Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel=»noopener noreferrer» . Это поможет пользователям избежать фишинговых атак.
Якорные ссылки — это ссылки внутри одного документа.
Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id=»» . Для якоря укажите путь через атрибут href=»#нужный-id» . Ссылку для скринридеров можно описать в атрибуте aria-label=»» . Закрепим на примере:
В следующем параграфе я подробнее расскажу о том, как правильно стричь кошек в теле.Тег a — важная часть логической разметки.
и
em (emphasis) — эмфатическое ударение.
Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.
Используйте em , если нужно сделать на части текста эмоциональный акцент и подчеркнуть его эмоциональную важность. Когда мы говорим, то делаем это при помощи интонации и громкости. В вебе для этого есть тег em .
Эмфатическое ударение может понадобиться при уточнении или исправлении неверного слова, например, когда речь идёт о распространённом заблуждении. Ещё его используют, когда приводится контраргумент, чтобы выделить его значимую часть. Также эмфатическое ударение используется в сарказме. Ещё один случай использования — намёки.
Слово, на котором стоит эмфатическое ударение, может изменить значение всего предложения.
Обычно в тег em оборачивают одно или два слова. Если информация срочная или автор настаивает на своей точке зрения, то em можно выделить всё предложение.
-- Пример 1 --
Нет, это он выложил релиз в прод (не я).-- Пример 2 --
Да, мне определённо не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. Нам нужно срочно эвакуироваться!Текст внутри em выделяется курсивом.
Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.
i (italic) делает текст наклонным.
Этот тег нужен для визуального форматирования. В i оборачивают названия, термины и иностранные слова. Он подходит также для обозначения прямой речи, мыслей, идиом и метафор.
-- Пример 1 --
Низкоуровневый язык программирования — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора.-- Пример 2 --
Пришлось читать документацию, c'est la vie.Такой текст выделяется курсивом:
Если пишите слова на иностранном языке, то для i можно задать атрибут lang=»» или xml:lang=»» в XHTML-документах. Это поможет скринридерам и поисковым роботам.
Я работаю простым cleaning manager.�� Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using wrong».и
strong — логическое ударение.
Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.
С помощью strong подчёркивают важность слов и предложений.
Придумайте пароль. Не 1234 или qwerty. Никому не сообщайте его!Пользователь увидит такой текст полужирным, а скринридеры выделят интонацией.
b (bold) делает текст полужирным.
Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong .
Используйте b , если нужно выделить названия книг, фильмов, имён, ключевые слова и тому подобное. В статьях с его помощью выделяют лид — первый абзац статьи.
Играю в The Elder Scrolls со времён пылевых бурь и скальных наездников.В браузере строчка отобразится так:
�� strong нужен для логического форматирования, а b — для визуального.
mark — контекстное выделение текста.
Представьте, что готовитесь к экзамену. Вы распечатали ответы на вопросы и вооружились текстовыделителем, чтобы отметить самое главное. mark похож на текстовыделитель, только в вебе.
Этот тег нужен для визуального выделения слов, которые имеют значимость для конкретного автора и в определённом контексте.
Используйте mark , когда нужно выделить какое-то важное для контекста слово, новый элемент в списке, показать текущую дату в календаре и совпадения с поисковыми запросами.
-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая фосфоресценция, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «Все мои знакомые говорят, что пользуются YotaPhone и ездят на ё-мобилях».Хотя с точки зрения семантики mark более значим, чем span , это всё равно тег визуального форматирования.
mark автоматически заданы стили background-color: yellow; и color: black; .
s зачёркивает текст.
Используйте s , когда нужно зачеркнуть неправильный или устаревший текст. Это может быть старая цена или неактуальное предложение. Олдскульные любители форумов и Хабра используют перечёркивание в шутках, построенных на оговорке.
2+2=54К s применяется свойство text-decoration: line-through; .
Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content .
Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through; .
-- HTML --
Невероятное предложение! Коробок спичек всего за 999 $.-- CSS --
.crossout text-decoration: line-through;
>В браузере строка отображается так:
Раньше тексты можно было зачеркнуть с помощью тега strike . Сейчас он исключён из спецификации.
�� s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del .
u (underline) подчёркивает текст.
Случаев использования u не так много. Чаще всего его используют для выделения слов с орфографическими ошибками и для подчёркивания имён собственных в китайском языке. Это могут быть географические названия, организации, имена.
Во втором случае в тег взято название страны 德國 — Германии.
-- Случай 1 --
Мышь (кродётся).-- Случай 2 --
我來自德國。К содержимому u применяется свойство text-decoration: underline; .
Этот тег отвечает за визуальное форматирование.
�� Не используйте u , если подчёркнутый текст можно перепутать со ссылкой.
и
ins (insert) определяет добавленный в документ текст.
Используйте ins когда нужно показать, какой текст был добавлен во время последнего обновления страницы.
С этим тегом можно использовать атрибуты cite=»» и datetime=»» . В cite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.Браузер подчеркнёт этот текст.
del (delete) определяет удалённый или потерявший актуальность текст.
Тег del понадобится, если нужно показать различия между несколькими версиями страницы.
Для del доступны те же атрибуты, что и для ins : cite=»» и datetime=»» .
Маск не запустит Falcon Heavy.В браузере текст отобразится как зачёркнутый.
Когда в документе заменяют часть содержимого, то ins используют вместе с del .
Маск вряд ли запустит Falcon Heavy.
Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.Этот код глазами браузера.
ins и del нужны для логического форматирования.
q (quote) — короткая цитата.
Используйте q , когда дословно цитируете кого-то в предложении.
Для q можно задать атрибут cite=»» , в котором указывается источник цитаты.
Митник прав:Это естественно — стремиться к абсолютной безопасности, но это желание заставляет многих людей соглашаться с ложным чувством защищённости
.Тег q нужен для логического форматирования текста. Так поисковый робот поймёт, что в тексте есть цитаты из других источников.
Браузеры добавят для такого текста двойные кавычки.
q display: inline;
>q:before content: open-quote;
>q:after content: close-quote;
>Так браузер отобразит текст внутри q .
Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.
q quotes: "\201c" "\201d";
>Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».
Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”; .
q quotes: "\00ab" "\00bb";
>�� Если нужно выделить большую цитату, которая занимает несколько строк или целый абзац, используйте тег blockquote .
cite — источник цитаты.
Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b .
Аарон Густафсон написал книгу Adaptive Web Design в 2011 году. В ней он …Содержимое тега cite отображается по умолчанию курсивом.
Тег cite семантический.
abbr (abbreviation) — аббревиатура или акроним.
Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.
Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.
В abbr можно можно раскрыть аббревиатуру в атрибуте title=»» .
HTML — это стандартизированный язык разметки документов в вебе.Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.
В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title=»» .
Hypertext Markup Language (HTML) — это стандартизированный язык разметки документов в вебе.Тег abbr семантический.
Помните, одна аббревиатура — один abbr . Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.
�� Раньше для акронимов использовали отдельный тег acronym , но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.
dfn (definition) — термин.
Используйте этот тег для терминов, которые упоминаете впервые.
В dfn можно вкладывать abbr , если это термин-аббревиатура.
HTML — это стандартизированный язык разметки документов в вебе.Вместе с dfn можно использовать атрибут title=»» . В нём приводится определение термина.
Во втором примере в dfn вложен abbr . В этом случае аббревиатура раскрывается в атрибуте title=»» .
-- Пример 1 --
Капибара — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
HTML — это стандартизированный язык разметки документов в вебе.В браузере текст станет наклонным.
dfn — тег логического форматирования.
code — фрагмент компьютерного кода.
Используйте code для названий элементов языков программирования или целых строк кода.
Тегcodeиспользуется для того, чтобы показать фрагмент JS-кода.Отображается как текст, написанный моноширинным шрифтом .
code можно использовать внутри pre , если нужно сохранить исходное форматирование. В этом случае сохранятся авторские пробелы и переносы.
ul
each val in [1, 2, 3, 4, 5]
li= valПолучим такое форматирование:
Тег code нужен для логического форматирования.
samp (sample) — результат вывода компьютерной программы или скрипта.
Тег samp полезен, когда в тексте цитируются системные ошибки и приводятся примеры вывода данных системой.
Поиск выполнен.
Обработано объектов: 82.
Найдено подходящих объектов: 2.Браузеры сделают текст моноширинным .
samp можно комбинировать с pre и code .
console.log(2.3 + 2.4)
4.699999999999999Получим такой текст:
samp — тег логического форматирования.
�� Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.
kbd (keyboard) — названия клавиш.
Используйте kbd , если пишите названия клавиш и голосовые команды.
Чтобы выйти, нажмите сначала Esc, потом :, затем q и Enter.Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.
Скопируйте, нажав Ctrl+C.Текст внутри kbd написан моноширинным шрифтом .
kbd может содержать тег samp или быть вложенным в него.
В kbd вкладывают samp , если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:
Найдите пункт с настройками по пути
File →
SettingsТак отобразит текст браузер.
В samp вкладывают kbd , когда нужно показать как система интерпретировала пользовательский ввод.
yarn start:theproject does not exist, did you mean:
yarn start:the-projectБраузер использует для текста всё тот же моноширинный шрифт :
Тег kbd нужен для логического форматирования.
var (variable) — переменная.
Используйте var для математических и программных переменных. В этот тег можно оборачивать любые фразы, которые легко заменить конкретными значениями.
-- Пример 1 --
У нас есть число 1 и число 2.-- Пример 2 --
Она написала E = mc2.Браузеры выделят var курсивом.
�� Для сложных математических формул и расчётов используйте специальный язык разметки MathML.
small — дополнительная информация.
Используйте small для небольших сносок и комментариев. Это могут быть предостережения, оговорки, информация о лицензии, авторских правах и тому подобное.
© 2013-2018, команда капибар
Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller; , которое уменьшает шрифт на одну условную единицу.
Можно вкладывать один тег small в другой.
Всем, всем, всем!
У нас самая выгодная ставка по ипотеке.
Предложение действительно, если ваш доход выше 100 веточек в месяц.
В этом случае размер текста будет меньше с каждым уровнем вложенности.
�� Раньше small использовался для физического форматирования вместе с big . В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.
и
sup (superscript) — надстрочный текст.
Надстрочным текстом пишут сноски или математические знаки и символы.
-- 1 пример --
В день нужно платить всего 0,666 % *-- 2 пример --
an × ak= an+kНадстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller; .
sub (subscript) — подстрочный текст.
Подстрочный текст используется в формулах.
H2SO4Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller; .
�� Для сложных математических формул используйте язык разметки MathML.
ruby — верхняя или нижняя текстовая аннотация.
Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.
В теге указывается, как произносятся иероглифы в китайском, японском и других восточно-азиатских языках.
Внутрь ruby вкладываются теги rt и rp .
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby . Если браузер поддерживает ruby , то текст не отобразится.
東
京Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.
Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.
東
南
の方角Текст в браузере отобразится так:
Тег ruby нужен для визуального форматирования.
и
bdo (bi-directional override) — изменение направления текста.
Тег bdo будет полезен, если на сайте несколько языков, один из которых читается справа налево или наоборот. Справа налево пишут в арабском языке и иврите.
В bdo обязательно нужно указывать атрибут dir=»» , который задаёт направление текста:
rtl — справа налево;
ltr — слева направо.קביברה в переводе с иврита означает «капибара».В браузере предложение выглядит так:
bdi (bi-directional isolate) — отмена изменения направления текста.
Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.
В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.
-- HTML --
-- CSS --
.content-rtl direction: rtl;
>По умолчанию для bdi задан атрибут dir=»auto» .
Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate; . Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi .
�� На сентябрь 2018 bdi поддерживается браузерами частично.
time — дата и время в машиночитаемом формате.
Используйте time , если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.
Этот тег не стоит использовать, если:
- дата неточная;
- дата в формате, который использовался до григорианского календаря.
Внутри time можно использовать несколько атрибутов:
datetime=»» — дата и время в машиночитаемом формате;
pubdate=»» — дата публикации документа;
title=»» — дополнительная информация.Время указывается внутри time или в атрибуте datetime . Во втором примере в datetime указаны число и месяц.
-- Пример 1 --
.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в .-- Пример 3 --
Мем опубликован .Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.
Формат времени в datetime=»» жёстко определён.
- Год: 1985.
Должен состоять из четырёх и более цифр. - Год и неделя: 1984-W38.
W — номер недели. - Год и месяц: 1985-10.
- Год, месяц, день: 1985-10-25.
- Месяц и день: 10-25.
- Часы и минуты: 1:15.
- Часы, минуты, секунды: 1:15:39.
- Часы, минуты, доли секунд: 1:54:39.929.
Доли нужно округлять до трёх знаков. - Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
- Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
Двоеточие можно не использовать. - Местная дата и время: 1985-10-25T1:15Z.
- Временной интервал: P2T4H18M3S.
P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать. - Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
w — недели, d — дни, h — часы, m — минуты, s — секунды.
Можно писать слитно, а буквы могут быть в любом регистре.
time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.
Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет как «16:00時». «時» означает «час».
И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.
Выводы
Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.
Визуальное форматирование помогает пользователям быстрее читать, ориентироваться в текстах и находить важные фразы. Логическое форматирование нужно для браузеров, вспомогательных и речевых технологий и помогает им интерпретировать тексты.
Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.
Если у разметки чёткая структура, то в ней сможете разобраться не только вы, но и другие разработчики. Это избавит команду от лишней головной боли и борьбы с легаси мельницами. Для поисковиков это тоже важно. У страниц с чёткой структурой больше шансов продвинутся вверх в поисковой выдаче.
Предсказуемость разметки означает, что браузеры отобразят страницу так, как это описано в стандартах.
Наконец, благодаря фразовым тегам вспомогательные технологии могут понимать тексты.
Введение в HTML. Форматирование текста в HTML
Для подготовки html -файла можно использовать текстовый редактор Блокнот.
< TITLE >Название окна Web -страницы
Меня зовут Светлана. Мне 16 лет.
Я хочу стать Web -дизайнером.
Это моя первая Web -страница. Тут я могу писать любой текст, например, про меня и мои интересы. Я помещу файл на сервере, и мою страницу смогут увидеть в разных концах мира.
В середине пары тегов < BODY параметры>… записывают (то есть программируют) то, что должно отображаться в окне броузера.
Задание 1. Создайте с помощью текстового редактора приведенный выше html -файл и сохраните его в своей папке с названием file _1. html . Тег < BODY >запишите так < BODY TEXT =” red ”>. Откройте файл в броузере, т.е. перейдите в свою папку и дважды щелкните на файле file _1. html . Обратите внимание, что текст на экране расположен по другому, чем в файле: нет абзацев и абзацного отступа, текст выровнен по левому краю. Проэксперементируйте с разными значениями параметров BGCOLOR и TEXT . Для переключения между режимом просмотра WEB -страницы в браузере и текстом HTML -файла используйте меню ВИД ð В виде HTML
Задание 2. Отформатируйте текст в файле file 1. htm следующим образом и сохраните его в файле file 2. htm :
Привет !
< H 4>Я хочу стать Web -дизайнером.
Это моя < B >вторая попытка создать Web -страницу. Я уже умею пользоваться заголовками, формировать текстовые абзацы, вставлять линии. Позже я научусь вставлять < I >фотографии, картинки, звук путем гиперссылок на соответствующие < U >графические, звуковые или видеофайлы .
Я сохраню этот файл на диске и открою его в броузере.
Эту Web -страницу я буду усовершенствовать. Ее еще рано размещать на сервере.
Просмотрите этот файл с помощью броузера и проэксперементируйте с тегами форматирования текста. Проэксперементируйте с размерами окна, в котором демонстрируется документ и удостоверьтесь, что броузер автоматически заменяет расположение текста, чтобы его можно было просматривать без горизонтальной линии прокрутки (текстовые редакторы этого не делают).
Просмотрено: 0%
Просмотрено: 0%Рабочие листы к Вашему уроку:
Рабочие листы
к вашим урокамВыбранный для просмотра документ HTML_1.ppt
Рабочие листы
к вашим урокамОписание презентации по отдельным слайдам:
1 слайд HTML
Первые шаги.
© М.Е.Макарова http://uchinfo.com.ua
2 слайд Hyper
Text
Markup
Language
Язык разметки гипертекста
3 слайд Цель урока:
Познакомиться со структурой WEB-документа.
Изучить основные команды форматирования WEB-документа.
Узнать, как создавать простейшие WEB-документы.
Получить практические навыки их создания.
4 слайд Знакомство с языком HTML
Гипертекст – это электронный документ, который содержит гиперссылки на другие документы.
Гипертекстовый документ предназначен для вывода информации на экран компьютера.
Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют в компьютерных энциклопедиях и учебных программах, прикладных программах для работы со справочной информацией и для организации доступа к информации в W W W, т.е. при работе с WEB-документами.
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.
5 слайд Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами.
Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом.
WEB-сайты создают WEB-дизайнеры.
WEB-дизайн – это совокупность правил и рекомендаций, которыми должны руководствоваться авторы, чтобы их сайты были информативными и выглядели привлекательно.
6 слайд Команды языка HTML называются теги и они записываются в < >. Большинство тегов – парные …
Документ HTML имеет три структурных типа содержимого:
Теги – команды в < >.
Комментарии –пояснения к документу. Они помогают разобраться в его содержании .
Текст – то, что пользователь видит на экране браузера.
Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.
7 слайд теги и атрибуты
Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ).
Тег со всеми атрибутами желательно располагать на одной строке.
Для большинства тегов нужен закрывающий тег:
Добро пожаловать!
