|
3. Основны Языка html. Часть 2 |
Цель: |
Познакомиться с тем как в HTML создаются изображения, таблицы, списки и формы для ввода. |
Tags: |
HTML, tag, img, table, ul, form … |
Оглавление
Оглавление 1
Введение 2
Специальные символы HTML 2
Изображения 2
Карты ссылок 4
Таблицы 5
Списки 9
Формы 10
Атрибут CHECKBOX 11
Атрибут RADIO 11
Атрибут SELECT 11
Атрибут SUBMIT 12
Атрибут TEXTAREA 12
Заключение 12
Дополнительный материал: 13
Литература 13
Введение
В общих чертах, что такое HTML, мы с Вами познакомились на предыдущей лекции. Чтобы полностью представить, что с его помощью можно сделать, необходимо ознакомиться с некоторыми его тэгами и их атрибутами.
Сейчас ни один сайт нельзя представить без изображений, таблиц, списков и форм. Как добавить их на страницу мы с Вами и познакомимся.
Специальные символы 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="http://www.html.net/logo.png">
Во-вторых, изображения могут быть ссылками:
<a href="http://www.html.net"><img src="logo.png"></a>
Примечание: При использовании аттрибутов width и height, неплохо помнить, что реальный размер файла изображения в килобайтах останется неизменным, и этот файл будет занимать то же время для загрузки, как и раньше, хотя и будет выглядеть на экране уменьшенным. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height. Вместо этого уменьшайте размер изображения в программе редактирования.