Возможные значения атрибута 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; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!