Базовый HTML

HTML заголовки

Заголовки определяются тегами от <h1> до <h6>: тег <h1> определяет наиболее важные заголовки, а <h6> определяет наименее важные заголовки (<h1> заголовки должны быть основными заголовками на странице, затем следуют заголовки <h2> и так далее). Браузеры автоматически добавляют пустое пространство до и после каждого заголовка.


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


Рассмотрим пример в котором поочередно укажем заголовки от <h1> до <h6>:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML заголовки</title>
	</head>
	<body>
		<h1>Здесь содержится заголовок первого уровня</h1>
		<h2>Здесь содержится заголовок второго уровня</h2>
		<h3>Здесь содержится заголовок третьего уровня</h3>
		<h4>Здесь содержится заголовок четвертого уровня</h4>
		<h5>Здесь содержится заголовок пятого уровня</h5>
		<h6>Здесь содержится заголовок шестого уровня</h6>
	</body>
</html>

Результат нашего примера:

Рис. 7 Применение заголовков от <h1> до <h6> на странице.
Рис. 7 Применение заголовков от <h1> до <h6> на странице.

HTML горизонтальная линия

Тэг <hr> создает горизонтальную линию на странице. Элемент <hr> может использоваться в роли тематического разрыва. Тег является одиночным и используется без закрывающего тега.

В следующем примере мы после каждого параграфа (тег <p>) будем использовать элемент <hr>, который будет тематически разделять нашу страницу.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <hr> на странице</title>
	</head>
	<body>
		<p>Первый параграф</p>
		<hr>
		<p>Второй параграф</p>
		<hr>
		<p>Третий параграф</p>
		<hr>
	</body>
</html>

Результат нашего примера:

 Рис. 8 Использование тегов <p> и <hr> в HTML документе.
Рис.8 Использование тегов <p> и <hr> в HTML документе.

HTML перевод строки

Тег <br> устанавливает перевод строки в том месте, где этот тег обозначен. Данный тег является одиночным используется без закрывающего тега.

Рассмотрим пример в котором оформим фрагмент стихотворения, обращённого к Анне Керн небезызвестного поэта:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML перевод строки </title>
	</head>
	 <body>
		<p>А.С. Пушкин</p>
		<p> Я помню чудное мгновенье:<br> <!-- обратите внимание, что текст стихотворения помещен в отдельный абзац -->
		Передо мной явилась ты,<br>
		Как мимолетное виденье,<br>
		Как гений чистой красоты.</p>
	</body>
</html>

Результат нашего примера:

Рис.9 Пример использования тегов <br> и <p> в HTML документе.
Рис.9 Пример использования тегов <br> и <p> в HTML документе.

Перенос длинных слов

Тег <wbr>html5 (англ. word break opportunity) предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или адрес URL).

Отличие тега <wbr>html5 от <br> заключается в том, что в месте расположения тега <br> браузер обязательно переносит содержимое на новую строку, а встречая в коде элемент <wbr>html5 только по необходимости.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <wbr></title>
	</head>
	<body>
		Текст в котором встречается оченьоченьоченьоченьдлинное<wbr>словооченьдлинное.
	</body>
</html>

Результат нашего примера будет виден при изменении размеров окна, браузер перенесет содержимое на новую строку в месте, где мы указали одиночный тег <wbr>html5:

 Рис. 9а Перенос длинных слов по необходимости.
Рис. 9а Пример переноса длинных слов по необходимости.

HTML Изображения

Любую HTML страницу тяжело представить без изображений, чтобы добавить изображение на страницу, то необходимо определить тег <img>.

Очевидно, что тег <img> бесполезен сам по себе, так как он не дает возможности уточнить, какое изображение мы хотим использовать. В этом случае не обойтись без специальных атрибутов, которые уточняют или корректируют элемент (выступают инструкцией для элемента).

Синтаксис для атрибутов следующий:

имя_атрибута="значение" <!-- не забываейте помещать значение атрибута в кавычки -->

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

<тег имя_атрибута = "значение"> <!-- одиночный тег -->
<тег имя_атрибута = "значение">содержимое тега</тег> <!-- парный тег -->

В теге можно перечислить несколько атрибутов в любом порядке, разделяя их пробелом.

<тег имя_атрибута1 = "значение" имя_атрибута2 = "значение" имя_атрибута3 = "значение" >

Давайте рассмотрим основные атрибуты тега <img>, которые вы будете применять в повседневной работе с изображениями:


Обращаю Ваше внимание, что элемент <img> имеет два обязательных атрибута: src, который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес, подробнее об этом будет рассмотрено в статье "HTML ссылки") и alt, который указывает альтернативный текст для изображения (например, если изображение не было загружено).


Рассмотрим пример в котором добавим изображение на страницу:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <img></title>
	</head>
	<body>
		<img src = "10.jpg" alt = "ничоси" width = "200" height = "200" title = "ничоси">
	</body>
</html>

В этом примере для нашего изображения установили следующие значения:


Обращаю Ваше внимание, что если Вы не указываете размеры изображения, то оно добавляется на страницу с той шириной и высотой, которое имеет. Если указываете только один параметр, то второе значение будет масштабироваться браузером автоматически. Вы можете указывать значения меньшие или большие чем изображение, но учтите тот факт, что оно может потерять качество при масштабировании, либо значительно исказиться.


Результат добавления изображения, с помощью тега <img> на страницу:

Рис. 10 Пример использование тега <img> в HTML документе.
Рис. 10 Пример использование тега <img> в HTML документе.

Подробнее об использовании атрибутов читайте в следующей статье.



Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображением:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 2.

Практическое задание № 2.