Возможные значения атрибута type :
"A" – заглавные буквы A, B, C ...
"a" – строчные буквы a, b, c ...
"I" – большие римские числа I, II, III ...
"i" – маленькие римские числа i, ii, iii ...
"1" – арабские числа 1, 2, 3 ...
<ol start=2 type="I">
<li> Чай </li>
<li> Сахар </li>
<li> Можно предложить</li>
<li> Конфетки </li>
</ol>
Ссылки
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность ссылок состоит в том, что она может вести не только на HTML-документ, но и на документ любого типа, причём он может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к документу можно указать в адресной строке браузера, и документ при этом будет открыт, то на него можно сделать ссылку.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью элемента <a>.
Атрибут href определяет адрес документа, на который следует перейти, а содержимое элемента <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчёркивается.
Ссылка на <a href="http://www.google.com"> гугл </a>
Внутреняя <a href="page_2.html">ссылка</a> на страницу page_2 расположенную в той же папке, что и текущая страница
|
|
<a href="page_2.html target="_blank">Ссылка</a>, которая откроется в новой вкладке
Изображения
Добавление изображения происходит в два этапа: вначале готовится графический файл в нужном формате и желаемого размера, затем файл отображается на странице с помощью элемента <img>.
Форматы изображений:
- GIF - использует всего 256 цветов. В основном используется для анимированных изображений.
- JPEG - использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков).
- PNG - По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.
Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border ="0" в тег <img>.
Дополнительные атрибуты тега <img>
alt - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
|
|
title - добавляет поясняющий текст к изображению в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на изображении.
<img src="picture.jpeg" title="Подсказка" alt="кот">
Вложения
HTML допускает возможность вложения одних элементов в другие, однако при этом имеются следующие ограничения:
· Блочные элементы могут содержать блочные или строчные элементы.
· Строчные элементы могут содержать только другие строчные элементы (за исключением элемента <a>).
Содержит открывающие и закрывающие теги | Самозакрывающие | |
Блочные элементы | <p> </p> <ul> </ul> <ol> </ol> | Невозможно |
Строчные элементы | <a> </a> <strong> </strong> <em> </em> | <br> <img> |
Так же следует соблюдать порядок вложения.
Правильное вложение:
<em><strong>Текст</strong></em>
Неправильное вложение:
<em><strong>Текст</em></strong>
Комментарии
В коде HTML разработчик может писать свои комментарии, которые никак не отображаются в браузере. Такие комментарии нужны для пояснения своего кода и для заметок себе и другим разработчикам. Комментарий начинается с <!-- и закрывается -->. Всё что находится между этими тегами является комментарием и выводиться в браузере не будет.
|
|
<!-- Это предложение будет игнорироваться браузером -->
<p> Привет, мир! </p>
Структура HTML документа
До сих пор мы рассматривали отдельные фрагменты кода HTML. Но HTML-документ (или веб-страница, что означает то же самое) требует определённой структуры для того, чтобы стать валидным.
- валидный документ корректно отображается в браузере.
- некорректный код HTML может вызвать ошибки, сложные для выявления.
- валидный документ легче обновлять позже, даже кому-то другому.
Доктайп
Первой информацией которую мы пишем, является тип HTML-документа — доктайп.
Раньше сосуществовало несколько версий HTML (XHTML и HTML 4.01 были конкурирующими стандартами). В настоящее время нормой является HTML5.
Чтобы сообщить браузеру, что HTML-документ представляет собой HTML5 необходимо начать документ со строки:
<!DOCTYPE html>
Элемент <html>
Помимо строки с доктайпом, весь ваш HTML-документ должен располагаться внутри элемента <html>.
<!DOCTYPE html>
<html>
</html>
<head>
Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.
|
|
Например, заголовок страницы (отображается на вкладке) находится в <head>:
<head>
<title> Заголовок страницы </title>
</head>
<body>
В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где мы пишем всё наше содержимое. Всё внутри <body> будет отображаться в окне браузера.
Дата добавления: 2018-11-24; просмотров: 177; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!