Базовый 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>
Результат нашего примера:
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>
Результат нашего примера:
HTML перевод строки
Тег <br> устанавливает перевод строки в том месте, где этот тег обозначен. Данный тег является одиночным используется без закрывающего тега.
Рассмотрим пример в котором оформим фрагмент стихотворения, обращённого к Анне Керн небезызвестного поэта:
<!DOCTYPE html> <html> <head> <title>HTML перевод строки </title> </head> <body> <p>А.С. Пушкин</p> <p> Я помню чудное мгновенье:<br> <!-- обратите внимание, что текст стихотворения помещен в отдельный абзац --> Передо мной явилась ты,<br> Как мимолетное виденье,<br> Как гений чистой красоты.</p> </body> </html>
Результат нашего примера:
Перенос длинных слов
Тег <wbr>
(англ. word break opportunity) предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или адрес URL).
Отличие тега <wbr> от <br> заключается в том, что в месте расположения тега <br> браузер обязательно переносит содержимое на новую строку, а встречая в коде элемент <wbr> только по необходимости.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <wbr></title> </head> <body> Текст в котором встречается оченьоченьоченьоченьдлинное<wbr>словооченьдлинное. </body> </html>
Результат нашего примера будет виден при изменении размеров окна, браузер перенесет содержимое на новую строку в месте, где мы указали одиночный тег <wbr>:
HTML Изображения
Любую HTML страницу тяжело представить без изображений, чтобы добавить изображение на страницу, то необходимо определить тег <img>.
Очевидно, что тег <img> бесполезен сам по себе, так как он не дает возможности уточнить, какое изображение мы хотим использовать. В этом случае не обойтись без специальных атрибутов, которые уточняют или корректируют элемент (выступают инструкцией для элемента).
Синтаксис для атрибутов следующий:
имя_атрибута="значение" <!-- не забываейте помещать значение атрибута в кавычки -->
Атрибуты указываются внутри тега сразу после его имени, отделяясь от названия тега пробелом. В элементах, не являющихся пустыми, атрибуты указываются только в открывающем теге:
<тег имя_атрибута = "значение"> <!-- одиночный тег --> <тег имя_атрибута = "значение">содержимое тега</тег> <!-- парный тег -->
В теге можно перечислить несколько атрибутов в любом порядке, разделяя их пробелом.
<тег имя_атрибута1 = "значение" имя_атрибута2 = "значение" имя_атрибута3 = "значение" >
Давайте рассмотрим основные атрибуты тега <img>, которые вы будете применять в повседневной работе с изображениями:
- исходный файл (src) – местонахождение файла (если указано только наименование файла, а не путь, то браузер ожидает найти файл в той же папке, где находится и веб-страница).
- альтернативный текст (alt) - текст, который пользователь сможет увидеть, если элемент по каким-либо причинам не удается отобразить, также служит для интерпретации приложениями, читающими с экрана.
- размер (width и height) - ширина и высота. Рекомендуется всегда указывать ширину и высоту изображения. Если ширина и высота не указаны, то браузер не резервирует место под изображение и при медленной загрузке страница будет «прыгать».
- всплывающая подсказка (title) – при наведении на картинку, значение атрибута будет отображаться в виде всплывающей подсказки.
Обращаю Ваше внимание, что элемент <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>
В этом примере для нашего изображения установили следующие значения:
- атрибутом src указали наименование файла и путь к файлу (изображение находится в той же папке где и веб-страница). Обязательный атрибут.
- атрибутом alt указали альтернативный текст, который пользователь сможет увидеть, если элемент по каким-либо причинам не удается отобразить. Обязательный атрибут.
- задали ширину (width) и высоту (height) изображения равной 200 пикселей.
- атрибутом title указали текст, который будет отображаться при наведении на картинку мышью в виде всплывающей подсказки.
Обращаю Ваше внимание, что если Вы не указываете размеры изображения, то оно добавляется на страницу с той шириной и высотой, которое имеет. Если указываете только один параметр, то второе значение будет масштабироваться браузером автоматически. Вы можете указывать значения меньшие или большие чем изображение, но учтите тот факт, что оно может потерять качество при масштабировании, либо значительно исказиться.
Результат добавления изображения, с помощью тега <img> на страницу:
Подробнее об использовании атрибутов читайте в следующей статье.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображением:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 2.