Атрибуты и свойства тегов <img> и <a>

Реферат

По информатике

 

Тема «Атрибуты и свойства тегов <img> и <a>» 

СОДЕРЖАНИЕ:

 

 

Что такое атрибут

 

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

<тег1 атрибут1="значение" атрибут2="значение">...</тег1>

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

В первой строке показаны атрибуты парного тега, во второй — пустого. Указывать их можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные кавычки (" ").

Пример правильного использования атрибутов тегов

<span style="color:green">Зеленый текст</span>

<span style="color:red">Красный текст</span>

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

Пример неправильного использования атрибутов тегов:

<span style="color:green" style="color:red">НЕПРАВИЛЬНО</span>

Неправильно написанные параметры при написании тегов, атрибутов браузеры просто проигнорируют.

Атрибуты, как и теги, можно указывать в одну или несколько строк. В следующем примере показан один и тот же, но написанный по-разному, тег.

Пример переноса строк внутри тега:

<img src="images/image.png" width="100" height="80" alt="Атрибуты тегов">

<img src="images/image.png"

width="100" height="80"

alt="Атрибуты тегов">

Указание тегов на разных строках повышает удобочитаемость HTML-кода, а написание атрибутов на одной строке - его часто снижает.

 

 

ПОРЯДОК УКАЗАНИЯ АТРИБУТОВ ТЕГОВ

 

Атрибуты тегов можно указывать абсолютно в любой последовательности.

Пример указания атрибутов в разном порядке:

<img src="images/image.png" width="100" height="80" alt="Атрибуты тегов">

<img width="100" src="images/image.png" alt="Атрибуты тегов" height="80">

 

ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ, ОБЯЗАТЕЛЬНЫЕ АТРИБУТЫ

 

Многие теги уже изначально имеют определенные значения своих атрибутов, поэтому, если нет необходимости их менять, то и атрибуты можно не указывать в принципе. Главное — следить и не забывать о том, что существуют обязательные атрибуты тегов, которые необходимо проставлять всегда.

 

Тег <img /> и его атрибуты

 

Вставить изображение на web страницу можно, используя элемент <img />. Этот элемент должен содержать атрибут src, указывающий адрес файла изображения.

Пример вставки изображения, расположенного по адресу "C:\images\image1.jpg":

<img src="file:///c:/image/image1.jpg" />

Элемент img может иметь следующие специальные атрибуты:  
src - абсолютный или относительный адрес файла изображения (Обязателен!)  
alt - альтернативный текст (Обязателен!)  
width - ширина изображения  
height - высота изображения  
align - выравнивание изображения (Отменен!)  
hspace - отступы от границ изображения по горизонтали (Отменен!)  
vspace - отступы от границ изображения по вертикали (Отменен!)  
Обязательными являются только два из них: src и alt.

 

ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЯ

 

Атрибут src должен содержать адрес файла рисунка. Адрес, или путь, можно указать в двух различных формах: абсолютно и относительно.

Абсолютное указание пути используют в тех случаях, когда необходимо адресовать ресурс расположенный на другом сайте, другом компьютере в сети или другом логическом диске (если речь идет об адресации файла локально, в пределах одной машины).

Например - страница расположена на сайте "http://www.somehost.com/index.html", изображение "image.jpg" расположено в папке Images на сайте "http://www.otherhost.com". Тогда код для подключения данного изображения будет иметь вид:

<img src="http://www.otherhost.com/Images/image.jpg" />

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

Таким образом, если необходимо указать путь к изображению "image.jpg", расположенному в каталоге "Images", дочернему по отношению к текущему, используют следующий адрес:

<img src="Images/image.jpg" />

АЛЬТЕРНАТИВНЫЙ ТЕКСТ

Атрибут alt используется для текстового описания изображения. Если браузер посетителя web-узла не поддерживает изображения, или они в данный момент отключены, то, вместо изображений, пользователь на странице увидит следующее:  
 

Альтернативный текст может дать пользователю хоть какую-нибудь информацию о данном изображении. Это вдвойне важно в тех случаях, когда изображение является, так же, и ссылкой.

В случае же, когда изображение отобразилось успешно, альтернативный текст выступает в качестве всплывающей подсказки, возникающей при наведении курсора мыши на изображение: 
 
 
 
ВЫРАВНИВАНИЕ ИЗОБРАЖЕНИЯ

 

Для выравнивания изображений относительно границ страницы можно использовать свойство стиля float. Это свойство может принимать следующие значения:  
"left" - изображение размещается слева, текст "обтекает" его справа;  
"right" - изображение размещается справа, текст "обтекает" его слева.

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

Пример:

<h2>finalFlares v1.0</h2>  
<img src="sample_img_3.3.1.jpg" style="float: left;" ... /> 
<p style="text-align: justify;">

В ряде случаев обтекание изображения требуется прекратить. Например, необходимо начать новый раздел сразу под изображением. В таком случае, сразу за элементом, после которого обтекание необходимо прекратить, вставляют элемент <br style="clear: both;" />.

Например:

<img src="someimage.jpg" alt="Какое-то изображение" style="float: left;" /> 
<p>Текст абзаца, который обтекает изображение ...</p>  
<br style="clear: both;" /> 
<p>Этот абзац располагается уже под изображением, не обтекая его.</p>

Для выравнивания изображения по центру вложите элемент img в элемент div или p, выровненный по центру:  
<div style="text-align: center;"> 
<img src="sample_img_3.3.1.jpg" alt="По центру!" /> 
</div>

РАЗМЕРЫ ИЗОБРАЖЕНИЯ

Помимо прочих атрибутов, рекомендуется, так же задавать размеры изображения с помощью атрибутов width и height. При этом, следует указывать реальные размеры изображения в пикселях. Это нужно для того, чтобы браузер сразу, еще перед непосредственной загрузкой изображения с сервера выделил пространство под элемент и не нарушал в дальнейшем структуру страницы. Кроме того, с помощью атрибутов width и height можно масштабировать изображение по вашему желанию.

Например, если вы хотите в 2 раза увеличить изображение с размерами 160x120, то достаточно указать только один из размеров (высоту или ширину), увеличив его в 2 раза. Второй размер будет подогнан автоматически так, чтобы сохранить пропорции изображения:  

Масштабирование изображения

<img src="sample_img_3.3.1.jpg" alt="Исходное изображение" /> 
<img src="sample_img_3.3.1.jpg" alt="Увеличенное изображение" width="320" />

При изменении обоих атрибутов width и height для изображения есть риск его искажения. Поэтому, рассчитывать новую высоту и ширину изображения необходимо таким образом, чтобы не изменять отношение сторон. Пример искажения изображения:

<img src="sample_img_3.3.1.jpg" alt="Искаженное изображение" width="520" height="120"/>

В любом случае, изменять размеры изображений, которые используются на web-страницах, рекомендуется с помощью специализированного ПО, например - Photoshop. Не стоит масштабировать изображения средствами HTML. У специализированных программ гораздо более продвинутые и эффективные алгоритмы интерполяции изображений и, следовательно, уменьшается нежелательный эффект пикселизации при масштабировании. 

HTML тег ссылки <a> и его атрибуты

 

Web-сайт - это совокупность связанных между собой страниц, объединенных общей идеей. Связать страницы между собой позволяют гиперссылки. 

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

тег <a>

Гиперссылки создаются с помощью элемента <a>. Помимо общих атрибутов, элемент a может иметь следующие атрибуты: 

href - адрес ресурса, на который необходимо сослаться.  
target - определает, окно браузера, в которое должен быть загружен ресурс. Чаще всего используется совместно с фреймами(изучаются в одном из последующих занятий). Может принимать следующие значения:  
blank - ресурс загружается в новое окно;  
parent - ресурс загружается в родительском окне текущего документа;  
top - ресурс загружается в окне верхнего уровня фреймовой структуры;  
self - ресурс загружается в текущем окне. Является значением по умолчанию;  
"имя окна" - ресурс загружается в заданном окне (фрейме).  
tabindex - число, определяющее последовательность активизации элемента кнопкой "Tab".  
accesskey - символ, используемый как комбинация клавиш в сочетании с клавишей Alt.

Нажатие сочетания активизирует ссылку. Этот атрибут не получил широкого применения. 
 
Способы адрессации

 

Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате file://диск:\папка\...\папка\файл. 
Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате file://\\хост\папка\...\папка\файл. Здесь "хост" - имя компьютера или его IP адрес. 
HTTP ссылка. Указывает адрес ресурса, доступного по протоколу HTTP (Протокол Передачи Гипертекста). Используется следующий формат: http://хост:порт/папка/.../папка/файл.

Компонент "порт", впрочем, не является обязательным и используется в основном для соединения по защищенному каналу, или когда HTTP сервер работает не на порту по умолчанию (по умолчанию 80). 
FTP ссылка. Ссылка на ресурс, доступный по протоколу FTP (Протокол передачи файлов). Формат: ftp://пользователь:пароль@хост:порт/папка/.../папка/файл.

Имя пользователя и пароль используются для входа по учетной записи. Когда необходимо войти на сервер анонимно (если разрешен анонимный доступ к FTP серверу), их указывать не требуется. Компонент "порт" так же не является обязательным. 
Почтовая гиперссылка. Запускает диалоговое окно системного почтового клиента для создания нового сообщения электронной почты. Клиентом по умолчанию для MS Windows является MS Outlook/ Формат почтовой гиперссылки:mailto:пользователь@хост. 
Относительная ссылка. Используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения: 
/ - корневой каталог web-сервера или логического диска  
./ - текущий каталог  
../ - родительский каталог  
каталог/ - дочерний каталог. 

В частном случае, когда адресуемый ресурс находится в одном каталоге с документом, в качестве адреса достаточно указать имя файла.

Относительные ссылки обычно используют для указания адресов "внутренних" ресурсов сайта. Такой подход позволяет сделать перенос сайта быстрым и легким процессом, без последствий в виде перенастройки ссылок. 
 

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ:

 

http://samoychka.org/forum/viewthread.php?forum_id=33&thread_id=30

http://citysurvey.ru/html-v-podrobnostyax/html-teg-img-izobrazheniya-i-ego-atributy/

http://citysurvey.ru/html-v-podrobnostyax/html-teg-ssylki-i-ego-atributy/