В этом примере вы можете увидеть новый тег header, который содержит такую информацию о документе, как логотип компании, слоган, навигацию.
HTML тег <nav> содержит ссылки, ведущие на другие страницы сайта или на разделы текущей веб-страницы. Эти ссылки позволяют пользователю перемещаться по сайту.
Большинство сайтов имеют горизонтальное или вертикальное меню, располагающееся в верхней части страницы, это и является содержимым элемента <nav>.
В этом примере, у нас есть также элементы section. И внутри каждого тега section у нас есть элементы article.
Элемент section представляет общий раздел документа. И раздел section в этом контексте представляет собой тематическую группу контента, обычно с заголовком.
Элемент article представляет собой полную или автономную композицию в документе. Это может быть сообщение на форуме, статья, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента.
Когда элементы article являются вложенными, внутренние элементы article представляют статьи, которые в принципе связаны с содержимым внешней статьи. Например, запись в блоге на сайте может представлять комментарии пользователей как вложенные элементы статьи.
Обычно статья помещается внутри элемента section. Тем не менее, это не всегда так, и, конечно же, нет жесткого правила по этому поводу. Вполне возможно, что в статье также могут быть разделы.
Далее в этом примере у нас есть тег aside.
Тег aside – это элемент, который сообщает, что внутри него есть что-то, что связано с основным содержимым страницы, но не в такой прямой связи, как основное содержимое.
И содержимое тега <aside> часто размещается в документе в виде боковой панели.
И, наконец, у нас есть тег <footer> нижнего колонтитула или подвала, который содержит некоторую информацию о сайте, такую как авторские права, контакты, карта сайта и т.д.
И в одном документе может быть несколько элементов <footer>.
Теперь следует отметить, что все эти теги являются элементами блочного уровня. Так что визуально мы могли бы просто везде использовать теги div. Однако, если вы посмотрите на код, станет очевидным, насколько легче его читать и понимать с этими специальными тегами и понимать структуру этой HTML-страницы, так как эти элементы передают некий смысл.
Теперь, давайте поговорим о HTML-списках.
И списки – это невероятно полезная структура HTML, позволяющая группировать связанный контент. Если подумать, мы, как обычные люди, думаем о различных вещах в терминах списков. Списки дел, списки покупок и так далее. И поэтому совершенно естественно, что списки есть и в HTML.
И в HTML есть два вида списков – упорядоченные списки и неупорядоченные.
Для того чтобы создать неупорядоченный список, нужно указать тег ul и заключить в него весь контент списка. При этом каждый элемент в списке находится в теге li.
При отображении в браузере такого списка, каждый его элемент помечается кружком.
Если мы скопируем и вставим этот HTML-код в валидатор W3C, он покажет, что наша HTML-страница действительна. Но давайте посмотрим, что произойдет, если мы возьмем один из элементов ненумерованного списка и просто удалим теги li вокруг него.
Если мы проверим этот код снова в валидаторе W3C, мы увидим, что HTML код теперь недействителен, и причина в том, что внутри тега ul не разрешен текст.
Единственное, что разрешено внутри элемента ul, – это элемент li. Все остальное не допускается.
Для создания упорядоченного списка тег ul заменяется тегом ol, но элементы li при этом точно такие же.
В браузере элементы упорядоченного списка помечаются порядковым номером.
Теперь, что касается контента, так как HTML использует определенные символы для своего синтаксиса, нам нужен способ различать эти символы как HTML код и те же символы как содержимое.
Если мы хотим, чтобы браузер интерпретировал специальные символы HTML как обычный контент, нам нужен способ указать браузеру не интерпретировать их как HTML код.
В частности, есть три символа, которые всегда следует экранировать, чтобы они не вызывали проблем с рендерингом.
Это символы <, > и &. И эти символы зарезервированы в HTML. Например, если вы используете в тексте знаки меньше (<) или больше (>), браузер может перепутать их с тегами.
И для отображения зарезервированных символов в HTML используются сущности символов.
Вместо использования символа меньше <, вы должны использовать объект HTML, который начинается с амперсанда &, а затем следует lt;. и браузер интерпретирует это как символ меньше <.
Аналогично, для символа больше > нужно использовать >.
А для символа амперсанда & нужно использовать &.
На самом деле HTML содержит целую массу сущностей символов HTML.
И одним из наиболее распространенных является символ авторского права. И основная причина, по которой мы используем для него сущность символа, заключается в том, что этот символ не очень-то и легко найти на любой клавиатуре.
Поэтому мы можем использовать вместо символа авторского права – ©.
Еще одна полезная сущность HTML, которая очень часто используется, это , что означает неразрывный пробел. При этом слова с неразрывным пробелом всегда будут на одной строке, то есть браузером эти слова будут переноситься на новую строку вместе.
Когда мы сожмем браузер и сделаем его чуть менее широким, эти слова либо вместе переместятся на следующую строку, либо останутся на одной строке, но они не будут разделены.
Теперь, давайте поговорим о ссылках на другие документы и способы их создания на HTML-странице.
Итак, первый тип ссылок, который мы собираемся рассмотреть, – это внутренние ссылки.
И мы создаем ссылки с помощью элемента <а> с атрибутом href.
Атрибут href указывает гипертекстовую ссылку. И значение href может быть как относительным, так и абсолютным URL-адресом.
В нашем случае, так как мы обсуждаем внутренние ссылки, которые указывают на внутренние веб-страницы сайта, ссылки являются относительными URL-адресами.
Также полезно указывать атрибут title для тега a. Атрибут title используется программами чтения с экрана, которые помогают слабовидящим людям просматривать веб-страницу.
Далее, содержимое между открывающим и закрывающим тегами элемента <а> – это содержимое, по которому вы сможете щелкнуть, чтобы перейти к ссылке href.
Теперь, обратите внимание на второй пример тега a. В этом примере мы окружаем тег div тегом а. Другими словами, этот тег div будет контентом ссылки, по которому можно будет щелкнуть.
Таким образом, первая ссылка является встроенным тегом, так как она не инициирует переход на новую строку. Но во втором случае, мы окружаем блочный тег div тегом a.
А тег a в HTML5 одновременно является и встроенным элементом, и элементом уровня блока. Именно это позволяет нам взять тег a и вложить в него тег div, контент которого начинается с новой строки.
Авторы спецификации HTML5 знали, что во многих случаях нужно иметь возможность щелкнуть по целой области HTML документа, например по логотипу компании, чтобы перейти на ее сайт.
До HTML5 приходилось использовать всевозможные приемы, чтобы добиться такого же эффекта, потому что тег a был только встроенным тегом, и мы не могли обернуть тег a вокруг тега div.
Теперь, о внешних ссылках.
На самом деле во внешних ссылках нет ничего особенного, кроме того, что их значение href обычно начинается с http://, потому что обычно внешние ссылки указывают на документы других веб-сайтов.
Однако здесь есть одна особенность элемента a, которая довольно часто используется в сочетании с внешними ссылками. И это целевой атрибут target.
Когда для атрибута target установлено значение _blank, это заставляет браузер открывать страницу по ссылке в новой вкладке или в новом окне.
Таким образом сайт не закрывается, а новая страница открывается в новой вкладке, так что вернуться на сайт после просмотра страницы по ссылке будет удобно.
Следующий тип ссылки – это ссылка на фрагмент страницы. Эта ссылка позволяет навигацию по большому документу, так что не нужно прокручивать его и искать нужный вам фрагмент документа.
Такая ссылка имеет специфический формат атрибута href. Здесь есть символ #, за которым следует идентификатор фрагмента, как в этом примере section1, section2.
Таким образом эта ссылка указывает на раздел страницы внутри элемента, который имеет идентификатор с атрибутом id.
И вы можете использовать любой тег с идентификатором раздела.
Обратите внимание, что имя раздела не содержит знака #. Только ссылка на этот раздел содержит знак #.
И здесь у нас даже есть ссылка «назад к началу», которая указывает на начало документа – тег h1 с идентификатором top.
И если вы щелкнете по такой ссылке, идентификатор фрагмента появится в URL-адресе, например index.html#section1, и вы можете скопировать и использовать этот URL-адрес в качестве другой ссылки. Так что при открытии страницы можно будет сразу перейти к разделу, на который указывает идентификатор.
Теперь, давайте поговорим о том, как включать изображения в HTML-документы.
В этом примере первое изображение отображается прямо перед цитатой.
И здесь у нас есть соответствующий комментарий. Так выглядит HTML-комментарий.
Комментарий в HTML начинается с угловой скобки, восклицательного знака, далее тире, тире, а затем комментарий закрывается тире, тире, и угловой скобкой.
И браузер полностью проигнорирует этот комментарий и не отобразит его.
Теперь давайте посмотрим на тег изображения <img>.
Изображение отображается в HTML с помощью этого тега img, который является сокращением от слова image. А атрибут src тега img – это URL-адрес, указывающий на файл изображения.
И вы можете заметить, что этот URL-адрес ничем не отличается от href, который вы видели у тега ссылки <a>. Это может быть относительный URL-адрес или абсолютный URL-адрес, если он содержит внешнюю ссылку.
Далее мы указываем ширину и высоту изображения. Хотя это и не обязательно, рекомендуется всегда указывать ширину и высоту. И еще есть атрибут alt, который используется программами чтения с экрана, помогающими людям с нарушениями зрения.
Как вы видите, это изображение отображается в браузере в одной строке с текстом, так как тег img является встроенным элементом. Если бы это было не так, изображение было бы на своей собственной строке.
Теперь давайте посмотрим на другой тег img. Здесь используется внешняя ссылка, указывающая на изображение в Интернете.
И здесь не указана высота и ширина изображения. Поэтому оно будет отображаться со своими изначальными размерами. И если эти размеры очень большие, изображение может занять всю вашу HTML страницу, не оставив места для остального контента. Вот почему рекомендуется указывать высоту и ширину изображения.
И еще, если для загрузки изображения требуется время, страница может дергаться во время загрузки. Но если вы используете ширину и высоту изображения, вы говорите браузеру, чтобы он зарезервировал пространство для изображения и загружал его в эту область. Тогда страница не будет дергаться.
Вы можете моделировать скорость загрузки в инструментах разработчика браузера. Здесь вы можете установить ограничение сети и посмотреть, как выглядит страница во время загрузки изображения.
Еще хуже, если вы полагаетесь на изображение, чтобы создать какой-то визуальный макет для своей страницы, и по какой-то причине изображение не загрузилось, например, URL-адрес может быть неверным. Если мы полагаемся на определенное пространство между цитатой и нижним колонтитулом страницы, мы больше не сможем видеть это пространство, так как изображение не загружается.
Однако, если мы укажем ширину и высоту изображения, даже несмотря на то, что изображение не загружается, визуальный интервал и визуальный макет остаются правильными.
Вопросы
Вопрос 1
Основная цель HTML состоит в том, чтобы
(подсказка: что-то, что не сможет выполнить обычный текстовый файл с содержимым)
Отобразить содержимое веб-страницы для пользователя
Сообщить структуру контента
Сообщить браузеру, как расположить и выровнять содержимое в окне браузера.
Сообщить браузеру, что должно произойти после загрузки страницы
Вопрос 2
W3C (Консорциум World Wide Web) – единственная организация, которая диктует, как браузеры должны реализовывать HTML5.
Истина
Ложь
Вопрос 3
ВСЕ теги HTML5 должны иметь
Наличие открывающего тега
Наличие закрывающего тега
Иметь хотя бы 1 атрибут
Быть в нижнем регистре, т.е. <p>
Вопрос 4
Определите правильное объявление страницы HTML5
Вопрос 5
Что произойдет, если вы не укажете объявление HTML5?
Ничего. HTML5 очень либерально относится к своему объявлению, и это всего лишь рекомендация по его использованию.
Браузер автоматически вернется к предыдущей версии HTML.
Страница будет интерпретироваться в режиме причуд.
Страница вообще не отобразится.
Вопрос 6
Браузеры ВСЕГДА интерпретируют HTML последовательно, сверху вниз.
Истина
Ложь
Вопрос 7
Определите недопустимый фрагмент кода HTML ниже
1.<div>Hey there!
I am just a lonely quiz answer. Will you click me? I am bored!
</div>
2. <section>
<p>The sale numbers are in…
</section> You ARE a closer, Johnson!
</p>
3. <article>
<h2>Wow!
</h2>
<p>You're ignoring all the other answers just to
look at me?! I AM special!
…
Wait! Where are you going?
What if I AM the answer you've been searching for???!
</p>
</article>
Вопрос 8
Метатеги передают информацию о браузере на сервер.
Истина
Ложь
Вопрос 9
Без применения каких-либо дополнительных стилей следующий фрагмент кода будет отображаться в браузере как какое количество строк текста? (Предположим, что браузер растянут достаточно широко, чтобы ни одна строка не переносилась).
<div>Dear all,
<span>I took this really cool book
</span></div>
<span> I think it's
my favorite book I've EVER taken!
Here is the URL for it:
</span>
<a href="…">about HTML, CSS and JS</a>
<div>
Does anyone know how I can give this book 6
out of 5 stars?
</div>
<div>
Thank you,
–Yaakov.... !
</div>
Вопрос 10
Используя только HTML, как бы вы удостоверились, что 3 слова в HTML-документе ВСЕГДА появляются вместе в 1 строке, даже если текст переносится по словам, потому что окно браузера слишком узкое для этой текстовой строки?
Невозможно выполнить только с помощью HTML!
Поместите &nowrap; перед 1-м словом и после 3-го слова
Поместите после 1-го слова и после 2-го слова (без пробелов)
Поместите перед 1-м словом и после 3-го слова
Вопрос 11
Как заставить браузер открывать ссылку в новом окне или вкладке?
Укажите несколько специальных метатегов как часть страницы
Попросите пользователя щелкнуть ссылку правой кнопкой мыши и выбрать «Открыть в новой вкладке».
Включить атрибут target='_blank' как часть тега <a>
Включите атрибут target="new" как часть тега <a>
Вопрос 12
Несмотря на то, что атрибуты ширины и высоты тега img не требуются, всегда полезно их использовать.
Истина
Ложь
Введение в CSS
Мы уже говорили о том, что в Интернете главное – контент. И мы говорили о том, что HTML определяет структуру этого контента.
Но, хотя контент и является основой, очень важно и то, как пользователи воспринимают этот контент. И когда дело доходит до реального веб-сайта, одной структуры недостаточно, вы должны оформить свой контент таким образом, чтобы он был приятным и полезным для пользователя.
И использование цвета, позиционирования, размера и прочего является частью этого оформления.
