Различные атрибуты могут применяться для большинства тэгов.

 

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

 

Имеется множество тэгов, есть и много атрибутов. Есть атрибуты, предназначенные специально для какого-то определённого тэга, а другие можно использовать в разных тэгах. И наоборот: некоторые тэги могут иметь только один какой-то определённый атрибуты, в то время как другие тэги - несколько атрибутов.

 

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

 

Примечание. Основная часть тэга называется элемент (например, p в < p> ). Таким образом, тэг состоит из элемента (например, < p> ), либо из элемента плюс один или более атрибутов (например, < p style=" background-color: #ff0000; " > ).

 

Лабораторная работа №3

Ссылки. Изображения.

Ссылки

 

Ссылки создаются для перехода с одной страницы на другую.

Для создания ссылки используется то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом позволит перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:

 

Пример 1:

 

< a href=" http: //www.html.net/" > Это ссылка на HTML.net< /a>

 

будет выглядеть в браузере:

 

Это ссылка на HTML.net

 

Элемент a обозначает " якорь/anchor". Атрибут href это сокращение от " hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

 

В примере атрибут href имеет значение " http: //www.html.net", которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что" http: //" всегда должно входить в состав URLов. Слова " Это ссылка на HTML.net" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг < /a>.

 

Ссылки между собственными страницами.

 

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

 

Пример 2:

 

< a href=" page2.htm" > Щёлкните здесь для перехода на page 2< /a>

 

Если page 2 помещена в подпапку " subfolder", ссылка выглядит так:

 

Пример 3:

 

< a href=" subfolder/page2.htm" > Щёлкните здесь для перехода на page 2< /a>

 

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

 

Пример 4:

 

< a href="../page1.htm" > Ссылка на page 1< /a>

 

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

 

Альтернативно вы всегда можете указать полный адрес файла (URL).

 

Ссылки внутри страницы.

 

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ " #".

 

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

 

< h1 id=" heading1" > heading 1< /h1>

 

Теперь можно создать ссылку на этот элемент с помощью знака " #" в атрибуте ссылки. Знак " #" сообщает браузеру, что это переход на той же самой странице. После " #" должен следовать id тэга, на который выполняется переход. Например:

 

< a href=" #heading1" > Ссылка на heading 1< /a>

 

Всё станет понятнее на примере:

 

Пример 5:

 

< html>

 

< head>

< /head>

 

< body>

 

< p> < a href=" #heading1" > Ссылка на heading 1< /a> < /p>

< p> < a href=" #heading2" > Ссылка на heading 2< /a> < /p>

 

< h1 id=" heading1" > heading 1< /h1>

< p> Text text text text< /p>

 

< h1 id=" heading2" > heading 2< /h1>

< p> Text text text text< /p>

 

< /body>

 

< /html>

 

выглядит в браузере (щёлкните по ссылкам):

 

Ссылка на heading1

 

Ссылка на heading2

 

Heading 1

 

Text text text text

 

Heading 2

 

Text text text text

 

(Примечание: атрибут id должен начинаться с буквы)

 

Ссылка на e-mail адрес.

 

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ.

 

Пример 6:

 

< a href=" mailto: [email protected]" > Отправить e-mail nobody на HTML.net< /a>

 

будет в браузере:

Отправить e-mail nobody на HTML.net

 

Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере.

 

Атрибут для краткого описания ссылки.

 

Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить атрибут title.

 

Пример 7:

 

< a href=" http: //www.html.net/" title=" Посещайте HTML.net и изучайте HTML" > HTML.net< /a>

 

будет выглядеть в браузере:

 

HTML.net

 

Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст " Посещайте HTML.net и изучайте HTML".

 

Изображения

 

Для того, чтобы пометить изображение на страницу, необходимо применить следующий тег:

 

Пример 1:

 

< img src=" david.jpg" alt=" David" >

 

будет выглядеть в браузере:

 

 

Необходимо сообщить браузеру, что вы хотите вставить изображение/image (img), и указать его размещение (src, сокращение для " source" ).

 

Примечание. Обратите внимание, что тэг img не требует наличия закрывающего тэга. Как и < br />, это команда не связана с буквенным текстом.

 

" david.jpg" это название файла изображения. " .jpg" - расширение файла, тип изображения. Как ".htm" указывает, что файл является HTML-документом, так и " .jpg" сообщает браузеру, что файл является изображением. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

· GIF (Graphics Interchange Format)

· JPG / JPEG (Joint Photographic Experts Group)

· PNG (Portable Network Graphics)

 

GIF-изображения обычно лучше всего для графики и рисунков, а JPEG - для фотографий. Для этого есть две причины: первая - GIF-изображения содержат только до 256 цветов, а JPEG - до миллионов цветов, и второе - формат GIF лучше сжимает простые изображения, чем JPEG, который оптимизирован под более сложные изображения. Чем выше сжатие, тем меньше файл изображения, тем быстрее загружается ваша страница. Как вы, вероятно, знаете из собственного опыта, пользователи не любят " тяжёлые" страницы.

 

Традиционно форматы GIF и JPEG являются преобладающими типами, но в последнее время становится всё более популярным формат PNG (прежде всего из-за издержек формата GIF). Формат PNG по многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие.

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: