Лекция 2. Текст, гиперссылки, изображения

Весь текст в HTML размечем с помощью тегов. В тексте чаще всего встречаются теги заголовков. Они обозначаются буквами от H1 до H6. H1 — самый главный заголовок HTML страницы. Рекомендуют не употреблять его более чем один раз на странице. Пример написания заголовков показан ниже:

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>

See the Pen Заголовки в HTML by Alex (@Asmodey) on CodePen.

В HTML различают два вида элементов: блочные и строчные. Блочные элементы расталкивают текст, занимая всю строку, в не зависимости от того, какого размера сами. Заголовки — блочные элементы.

Также блочными элементами являются параграфы, которые обозначаются тегом <p></p>. Пример использования параграфа приведен ниже:

<p>Пример параграфа.</p>
<p>Обратите внимание, что блочные элементы занимают всю доступную горизонталь.</p>

See the Pen Параграф by Alex (@Asmodey) on CodePen.

Для того, чтобы вставить изображение используется тег img. Обратите внимание, он непарный. Адрес изображения указывается с помощью атрибута src. Пример:

<img src="https://cdn3.iconfinder.com/data/icons/pink-hearts-set/154/pic7-128.png" >

<img src="https://cdn3.iconfinder.com/data/icons/pink-hearts-set/154/pic10-128.png" >

See the Pen Вставка изобаржения by Alex (@Asmodey) on CodePen.

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

Одним из самых важных элементов HTML страниц являются гиперссылки. Гиперссылки связывают все страницы в единое пространство. Гиперссылка — парный элемент. Пример его применения:

1
<a href="http://ya.ru">Пример</a>

На странице будет отображено только слово «Пример», причем слово будет подчеркнуто, а при наведении курсор мыши превратится в указатель. Это говорит о том, что если мы кликнем по ссылке, то выполним переход на связанный с ней элемент. Сам связанный элемент мы указываем с помощью атрибута href. Пример:

See the Pen Примеры гиперссылок by Alex (@Asmodey) on CodePen.

Обернуть гиперссылкой можно и картинку, как показано на предыдущем примере. При клике на изображении мы переходим по указанному адресу.

В зависимости от того, на что указывает атрибуту href в гиперссылке возможны варианты поведения браузера:

  • Если href указывает на html страницу — браузер загрузит (выполнит переход) данную страницу
  • Если href указывает на файл и браузер может открывать данный файл — браузер загрузит данный файл во временную папку и откроет
  • Если href указывает на файл и браузер не может открыть этот файл — браузер предложит сохранить файл и открыть его с помощью другой программы.

Задание

Задание 1. Выполните верстку следующего примера. Правильное решение можно посмотреть во вкладке html.

See the Pen Задание по верстке 1 by Alex (@Asmodey) on CodePen.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *