скачать книгу бесплатно
И здесь у нас даже есть ссылка «назад к началу», которая указывает на начало документа – тег 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>
