Изображения. Специальные символы HTML

Оглавление

Оглавление. 1

Введение. 3

Специальные символы HTML. 3

Изображения. 3

Карты ссылок. 5

Таблицы.. 7

Списки. 10

Формы.. 11

Атрибут CHECKBOX.. 12

Атрибут RADIO.. 12

Атрибут SELECT. 13

Атрибут SUBMIT. 13

Атрибут TEXTAREA.. 13

Заключение. 14

Дополнительный материал: 14

Литература. 15

Введение

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

Сейчас ни один сайт нельзя представить без изображений, таблиц, списков и форм. Как добавить их на страницу мы с Вами и познакомимся.

Специальные символы HTML

Изображения

Для того чтобы вставить изображение используется тег < img>. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег < img> в контейнер < a>. При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег < img>. Также изображение можно маштабировать, указав в атрибутах width и height, желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения. Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align, который может принимать пять значений: bottom, left, middle, right, top.

· bottom — Выравнивание нижней границы изображения по окружающему тексту.

· left — Выравнивает изображение по левому краю окна.

· middle — Выравнивание середины изображения по базовой линии текущей строки.

· right — Выравнивает изображение по правому краю окна.

· top — Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Вот полный список атрибутов тега < img>:

· align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.

· alt — Альтернативный текст для изображения.

· border — Толщина рамки вокруг изображения.

· height — Высота изображения.

· hspace — Горизонтальный отступ от изображения до окружающего контента.

· ismap — Говорит браузеру, что картинка является серверной картой-изображением.

· longdesc — Указывает адрес документа, где содержится аннотация к картинке.

· src — Путь к графическому файлу.

· vspace — Вертикальный отступ от изображения до окружающего контента.

· width — Ширина изображения.

· usemap — Ссылка на тег < map>, содержащий координаты для клиентской карты-изображения.

Вам необходимо знать ещё две вещи. Во-первых, вы можете легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:

< img src=" images/logo.png" >

< img src=" https://www.html.net/logo.png" >

Во-вторых, изображения могут быть ссылками:

< a href=" https://www.html.net" > < img src=" logo.png" > < /a>

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