|
Если после элемента следует
,
,
,
,
,
,
,
,
,
,
,...,
,
,
,
,
,
,
,
,
,
,
,
.
|
Если после элемента следует
или
.
|
|
Если после элемента следует
или
.
|
|
Если после элемента следует
или он последний у родителя.
|
|
Если после элемента следует
,
или он последний у родителя.
|
|
Если первым внутри идёт
и не следует перед другим элементом
.
|
|
|
|
Если после элемента следует
или
.
|
|
Если первым внутри идёт |
и не следует перед
,
или
у которых опущен закрывающий тег.
|
Если после элемента следует
или
или он последний у родителя.
|
|
Если после элемента следует
или он последний у родителя.
|
|
Если после элемента следует |
или он последний у родителя.
|
Если после элемента следует |
или
или он последний у родителя.
|
|
Если после элемента следует |
или
или он последний у родителя.
|
Если открывающий тег содержит один или несколько атрибутов, то тег должен указываться обязательно.
Из-за того, что многие теги можно не указывать, т.к. они подразумеваются по умолчанию, любой документ сводится к следующим частям.
Необязательная метка порядка байтов (byte order mark, BOM).
.
.
До и после доктайпа разрешается вставлять любое количество пробелов или комментариев. Таким образом, доктайп не обязательно должен располагаться в первой строке кода.
В примере 1 показан минимальный код HTML для вывода традиционного приветствия.
Пример 1. Минимальный HTML
HTML5
IE
Cr
Op
Sa
Fx
Привет, мир!
Метка порядка байтов состоит из кода символа U+FEFF в начале документа, где она используется для определения кодировки. Рекомендуется убирать этот символ, поскольку его наличие приводит к ошибкам отображения документа в некоторых браузерах. Для этого можно использовать редактор Notepad++, в меню «Кодировки» выбрать пункт «Кодировать в UTF-8 (без BOM)» (рис. 3).
Рис. 3. Выбор кодировки
Полезные ссылки
- Подробнее о метке порядка байтов
http://unicode.org/faq/utf_bom.html#bom1
- Редактор Notepad++
Любой язык имеет синтаксис, т.е. набор правил построения фраз, позволяющий определить осмысленные предложения в этом языке. С изучения этих правил мы и начнем изучение языка HTML. Для начала откроем наш Dremweaver и создадим какой-нибудь несложный HTML-документ в привычном нам визуальном режиме. Посмотрим, какой HTML-код соответствует нашему документу.
Как Вы помните, переключение в режим просмотра HTML-кода производится с помощью кнопки Code View. В Dremweaver"е есть ещё один режим, очень удобный, особенно когда у Вас большой монитор. Это "промежуточный" режим который показывает одновременно и код, и соответствующий ему документ. Так гораздо проще разобраться, где у нас что: мы отмечаем некий фрагмент в визуальном режиме и тут же видим этот фрагмент в режиме HTML-кода. Итак, вы можете заметить, что HTML содержит наш исходный текст в чистом виде и, кроме того, массу каких-то непонятных слов, заключенных в угловые скобки. Эти непонятные конструкции и есть основные строительные блоки нашего языка. Называются они тэгами. Тег состоит из названия тега, заключенного в угловые скобки. Названия тегов могут быть написаны как строчными, так и прописными буквами - это не важно.
Если вы присмотритесь повнимательнее, то заметите, что многие теги имеют свою "вторую половину", дополненную косой чертой. И такие "пары" окружают фрагменты нашего "содержательного" текста. Например, заголовок окружен тегами и , абзац окружен тегами . Такая конструкция называется Элементом. Элемент - это и есть единица разметки. Элемент состоит из Открывающего тэга, данных (т.е. содержательной информации) и закрывающего тега. Таким образом, назначение тегов состоит в обозначении границ элементов.
Давайте попробуем изменить разметку текста: например, заголовок вместо элемента заключим в элемент . Когда мы что-то меняем в коде, то изменения не сразу отображаются в визуальном режиме, а в панели свойств появляется сообщение, что мы изменили код и, дабы увидеть изменения, необходимо нажать кнопку "refresh" или клавишу "F5".
Вместо заголовка мы получили обычный абзац текста. Поздравляю! Вы сделали первый шаг к ручному редактированию HTML-кода. При разметке текста на элементы очень важно, чтобы открывающему тегу соответствовал такой же закрывающий. Если бы мы изменили открывающий тег на А закрывающий оставили - это было бы грубейшей ошибкой. Dreamweaver способен "отлавливать" такие ошибки и сообщать нам об этом. Бывают элементы, для которых указывать закрывающий тег не обязательно. Таким элементом, например, является элемент P. Конец первого абзаца может быть обозначен началом второго.
Бывают элементы, которые вообще не могут иметь закрывающего тега, состоит только из открывающего. Это случается, когда элемент предназначен не для разметки текста, а несет самостоятельную смысловую нагрузку. Например изображение, элемент . Элементы могут быть вложены друг в друга. Например, элемент вложен в элемент Это значит, что картинка находится внутри абзаца. Мы можем вложить в этот абзац и другие элементы.
Например, давайте какой-нибудь фрагмент текста заключим в элемент . Этот фрагмент выделился курсивом. Элементы не должны не должны при этом "пересекаться": если элемент открылся внутри элемента То закрыться он должен также внутри Если же мы закроем элемент "снаружи" его родительского элемента, это будет грубейшей ошибкой, о чём Dreamweaver нам так же сообщит. Вот, он сообщает, что у нас имеются пересекающиеся теги. Некоторые теги помимо имени могут включать в себя атрибуты, содержащие дополнительную информацию о данном конкретном элементе. Атрибут состоит из имени атрибута и значения, разделенных знаком равенства. Например, тег содержит атрибут width, отвечающий за ширину изображения.
Мы можем изменить значение этого атрибута, и ширина картинки изменится. Особыми атрибутами являются id и class. Эти атрибуты применимы почти к любому элементу. Id позволяет дать элементу некоторое уникальное имя и таким образом выделить его из ряда аналогичных элементов. Это имя затем может использоваться: Во-первых, для нестандартного оформления конкретного элемента(например, у нас есть 2 абзаца - одинаковые элементы, выглядят,соответственно, одинаково; присвоив им имена с помощью атрибута id, мы можем контролировать оформление каждого из них по отдельности). Во-вторых, id может использоваться в качестве цели в гиперссылке, т. е. мы можем ссылаться не просто на страницу, а на конкретное её место. В-третьих, для программистских нужд (для определенных манипуляций с конкретным элементом). Class, в отличие от id, не должен быть уникальным. Он задает принадлежность одного или нескольких элементов к определенному классу. Классы используются в основном для оформительских нужд.
Например, мы можем пометить несколько абзацев как принадлежащих к одному классу. Сейчас у нас этот и этот абзацы принадлежат к одному классу и мы можем теперь одним махом изменить их оформление. Помимо тегов в HTML используются так называемые " подстановки" (entities). Они нужны в двух случаях: для вставки в документ символов, отсутствующих на клавиатуре (например, "правильных" кавычек) и для вставки символов, имеющих в HTML служебное значение. Например, если нам нужна угловая скобка и мы напишем её в коде как есть, то, естественно, это будет воспринято браузером как тег. В данном случае вместо угловых скобок нужно указать специальные подстановки, которые будут восприняты браузером, как угловые скобки.
Подстановки имеют следующий вид: &код; Код может быть либо мнемоническим, специальные слова, либо числовым, когда мы просто
указываем номер символа. Числовой код предваряется "решеткой". Существует огромное количество мнемонических кодов, для самых разных символов, но с помощью числового кода мы можем указать абсолютно любой символ, имеющийся в данном шрифте, даже такой, для которого не существует мнемонического кода.
Итак, элементы, теги, атрибуты и подстановки - это основные "кирпичики", из которых строится HTML-документ. Но в любом строительстве мы должны придерживаться некоторых базовых правил: сначала заложить фундамент, возвести стены, накрыть строение крышей и т.д. В строительстве HTML-документа также есть свои законы, которые находят отражение в структуре документа. С разметкой текста мы более-менее разобрались. Вы убедились, что в основе документа лежит ваш текст, разбитый на элементы с помощью тегов. Однако вы можете видеть ещё ряд элементов, непонятно к чему относящихся. Располагаются они строго определенным образом.
Начинается документ с такой строки: . Это так называемая декларация версии HTML. Дело в том, что, как Вы помните, за недолгую, но насыщенную историю своего развития, HTML вышел в нескольких версиях. Чтобы браузер мог правильно показать данный документ, он должен знать, на каком из HTML-ей он написан. В данном случае в этой строке указано, что мы имеем дело с HTML версии 4.01. После декларации начинается сам документ. Он заключен в элемент . Мы видим открывающий тег, и в конце документа находится закрывающий.
Внутри элемента располагаются друг за другом два обязательных элемента: и, следом за ним, . , т.е. заголовок, содержит служебную информацию, не отображаемую в окне браузера, например, элемент содержит название документа, которое выводится в заголовке окна. - это тело документа - оно в себя включает содержимое нашего документа, т.е. то, что мы видим в окошке браузера.
Если всё это изобразить графически, то получится следующая схема. Интересно заметить, что с точки зрения спецификации минимальный HTML-документ должен содержать только два элемента: декларацию версии HTML и элемент TITLE - название документа. Все остальные элементы, строго говоря, являются опциональными. Правда, понятно, что информационная ценность такого документа будет весьма сомнительна.
Интернет представляет собой всемирную сеть, объединяющую компьютерные сети по всему миру на базе единых стандартных соглашений (протоколов) о способах обмена информациейи единой системой адресации.
К настоящему времени сеть Интернет получила беспрецедентное распространение. По оценкам экспертов Интернет объединяет более 100 миллионов компьютеров. Услугами Интернет пользуется свыше300 миллионов человек в 170 странах мира.
С функциональной точки зрения Интернет представляет собой:
ü
недорогое быстродействующее средство общения между абонентами по всему миру;
ü
не имеющее аналогов хранилище информации по любым областям знаний;
ü
новую перспективную среду длядеятельности.
Влияние Интернет распространяется не только на технологическую область компьютерных коммуникаций, оно имеет также социальную направленность и пронизывает все общество по мере того, как все более широкое распространение получают оперативные средства получения знаний, электронной коммерции.
Самым распространенным и востребованным сегодня является такой сервис Интернет, как
WWW
(World
Wide
Web
− всемирная паутина). Информацияв WWW представлена в виде так называемых гипертекстовых (или, более широко, гипермедийных) документов,которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты.Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши.Активными могут быть фрагменты текста, целые изображения и их части;щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.
Чтобы научиться размещать материалы в Интернет, прежде всего необходимо познакомиться с языком разметки гипертекста
HTML
(H
yperT
ext M
arkup L
anguage)
Основы языка HTML
Язык разметки гипертекстовых документов HTML представляет собой совокупностькоманд, называемых тегами(от английского tag
).Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа.
Просмотр HTML-документов осуществляется с помощью программ-браузеров
(от английского browser
), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам. Наиболее распространенными являются браузеры
Microsoft
Internet
Explorer
фирмы
Microsoft
Corporation
и
Netscape
Navigator
фирмы
Netscape
Communications
Corporation
.
Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (Notepad
), но это очень трудоемко. Чаще используют специализированные редакторы, предназначенные именно для подготовки HTML-документов, которые позволяют вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах, например, Macromedia
Dreamweaver,
Microsoft
FrontPage
,
HomeSite
и др.
HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.Значительно эффективнее пользоваться специальными HTML - редакторами.
Синтаксис HTML-тегов
HTML-тег записывается в угловых скобках (символы)и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный). Имена и атрибуты представляют собой английские слова и аббревиатуры.
Теги условно можно разделить на две группы:
Парные
теги (называемые также контейнерами
) имеют два компонента: открывающий (начальный) и закрывающий (конечный); закрывающий компонент имеет то же название, но при записи перед названием ставится косая черта(символ /
). Между открывающим и закрывающим компонентами может располагаться текст документа и другие теги. Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега.Например, текст, расположенный между тегамии
, будет выведен полужирным начертанием (название тега - от английского bold
). Парные теги могут быть вложены друг в друга, но не должны пересекаться.
Непарные
теги (называемые также автономными
) не имеют конечного компонента.При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег , встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif .
Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки;последовательность записи атрибутов несущественна. Подавляющее большинство атрибутов употребляются в виде парыназвание атрибута = значение атрибута
. В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки.
В закрывающих компонентах тегов атрибуты не указываются.
Вот пример тега с атрибутами:
Название тега
Название атрибута
|
Привет
!
Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера(SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег.
Регистр символов в записи тегов и атрибутов значения не имеет.
Структура HTML-документа
HTML-документ заключается в теги и.Между этими тегами располагаются две секции:секция заголовка (между тегами и) и секция тела документа (между тегами и).Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера.Секция тела документа содержит основной текст, предназначенный для отображения браузером, теги форматирования, размещения рисунков, таблиц, гиперссылок и т.д.
HTML
-код простейшего документа, пригодного для размещений в Интернет, выглядит так:
<
TITLE
>
Наша первая страничкаTITLE
>
Самый
простой
HTML-
документ
Данный кодможет быть набран в текстовом редакторе Блокнот и сохранен как файл с расширением.
htm
или.
html
− в этом случай документ откроется в браузере, установленном на вашем компьютере по умолчанию. Браузер отобразит этот документ, выведя в своем окне строку "Самый простой HTML-документ", расположенную в секции тела документа. Фраза "Наша первая страничка" будет отображаться в строке заголовка браузера.
Раздел
HEAD
Секция заголовка обычно содержит теги, незаметные для пользователя, но тем не менее способные активно влиять не внешний вид документа.
Тег
|
Назначение
|
|
Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.
|
|
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент не имеет конечного тэга. Обязательно присутствие хотя бы одного из аргументов:
HREF
- определяет базовый адрес (URL) текущего документа.
TARGET
- определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это может вам пригодиться, если вы хотите открывать все ссылки документа в другом фрейме.
|
<
STYLE
TYPE=
"text
/css
"
>
|
Используется для вставки в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE − обязательный атрибут, значением которого, как правило, является "text
/css
".
|
<
МЕТА
…>
|
Элемент МЕТА используется для технического описания документа. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.
NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
CONTENT - присваивает значение мета-записи, определенной в параметре NAME.
|
Раздел
BODY
Этот раздел включает в себя основное содержание веб-страницы − текст документа, изображения, таблицы и т.п. Элемент BODY должен встречаться в документе не более одного раза и может включать следующие атрибуты:
Синтаксис атрибута
|
Назначение
|
MARGINHEIGHT=число
|
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Netscape
|
TOPMARGIN= число
|
Определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer
|
MARGINWIDTH= число
|
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Netscape
|
LEFTMARGIN= число
|
Определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer
|
BACKGROUND= URL
|
Определяет изображение для "заливки" фона (фонового рисунка). Значение задается в абсолютного или относительного адреса изображения (см. раздел Размещение рисунков)
|
BGCOLOR=цвет
|
Определяет цвет фона документа.
Microsoft
Internet
Explorer
поддерживает 16 стандартных имен цветов (aqua
,
black
,
blue
,
fuchsia
,
gray
,
green
,
lime
,
maroon
,
navy
,
olive
,
purple
,
red
,
silver
,
teal
,
yellow
,
white
)
Другим способом является использование кода цвета в виде шестиразрядного шестнадцатеричного числа, задающее интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ#.
Например, запись
COLOR
="#0000
FF
" означает синий цвет
Несмотря на принципиальную возможность задать миллионы цветов, надо учитывать, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра.В этой палитре браузер подберет цвет, наиболее близкий к заданному
|
TEXT=цвет
|
Определяет цвет текста в документе
|
LINK=цвет
|
Определяет цвет гиперссылок в документе
|
ALINK=цвет
|
Определяет цвет подсветки гиперссылок вмомент нажатия
|
VLINK
|
Определяет цвет гиперссылок на уже просмотренные документы
|
Форматирование текста
Форматирование символов
Все теги форматирования символов имеют как открывающий, так и закрывающий компонент и действуют на заключенные между ними текст.
Основным является тег ...
FONT>, обязательно использующийся с одним или несколькими атрибутами, изменяющими размер, цвет и гарнитуру шрифта:
Синтаксис атрибута
|
Назначение
|
SIZE = значение
|
Размер задается либо в форме абсолютного значения (число от 1 до 7),либо относительно размера основного шрифта (в форме +nили -n).
|
COLOR = цвет
|
Цвет
|
FACE = список шрифтов
|
Гарнитуры для отображения текста; названия перечисляются в порядке предпочтения через запятую, например,
FACE
="
Verdana
,
Helvetica
,
Arial
,
Sans
-
Serif
"
Можно указывать и одну из гарнитур, но следует учитывать, что данный шрифт может быть не установлен на компьютере пользователя, и "экзотические" шрифты отображаться браузером не будут
|
Кроме того, используются теги, позволяющие изменить начертание символов:
.
.. (от английского bold) − полужирный шрифт;
..
. (от английского italic) − курсив;
... (от английского TeleType) − моноширинный шрифт;
... (от английского u
nderline) − подчеркнутый;
...
S
> (от английского
s
trikethrough
) − перечеркнутый;
... (от английского s
ubscript
) − нижний индекс;
... (от английского superscript
) − верхний индекс.
Текст, заключенный между тегами
и(от английского preformatted
), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.
Форматирование абзацев
Текст выводится в окно браузера слово за словом, при достижении правой границы окна очередное слово автоматически переносится на новую строку. Даже если в коде страницы было введено несколько пробелов или текст записывался с новой строки, при просмотре в браузере эти действия отображены не будут. Поэтому чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги.
Тег (от английского break
)разрывает текстовый поток и вставляет новую строку без образования нового абзаца.Несколько последовательных тегов интерпретируются как несколько пустых строк.Межстрочный интервал одинарный.Закрывающего компонента тег не имеет, как и атрибутов.
Тег(от английского paragraph
)начинает абзац;новый абзац отделяется от предыдущего двойным межстрочным интервалом.Абзац пустым быть не может, то есть несколько последовательных тегов
интерпретируются как один (в отличие от тега ).Закрывающий компонент
не обязателен, так как предыдущий абзац заканчивается там, где начинается новый.Тег имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца, который может принимать значенияLEFT, CENTER, RIGHT и
JUSTIFY
, задающие выравнивание соответственно по левому краю, центру, правому краю и по ширине. По центру будет выровнен и текст, заключенный в теги
...
Если закрывающий компонент
опустить, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, или до конца документа.
HTML позволяет создавать форматировать абзацы как нумерованные или маркированные списки. Фрагмент текста, представляющий собой список, заключается в теги:
упорядоченный (нумерованный) список (от английского ordered
list
)
неупорядоченный (маркированный) список (от английского unordered
list
)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги ... (от английского list
item
). При выводе текста каждый элемент списка будет располагаться с новой строки, обозначенной номером или маркером. Кроме того, у списка может быть заголовок, который задается тегом (от английского
l
ist
h
eader
). Закрывающие теги и не обязательны.
|
Нумерованный список
|
Маркированный список
|
Элемент кода
|
<
O
L>
Заголовок
Первый элемент
Второй элемент
Третий элемент
|
<
U
L>
Заголовок
Первый элемент
Второй элемент
Третий элемент
U
L>
|
Отображение в браузере
|
Заголовок
1. Первый элемент
2. Второй элемент
3. Третий элемент
|
Заголовок
·
Первый элемент
·
Второй элемент
·
Третий элемент
|
Многоуровневый список может быть организован посредством комбинации нумерованных и маркированных списков.
Тегимеет необязательные атрибуты:
Синтаксис атрибута
|
Назначение
|
TYPE = формат
|
формат нумерации может иметь значения:
|
|
арабские цифры (по умолчанию)
|
|
прописные буквы
|
|
строчные буквы
|
|
большие римские цифры
|
|
маленькие римские цифры
|
START = значение
|
первый номер в списке (по умолчанию 1)
|
Тегимеет необязательный атрибут
Синтаксис атрибута
|
Назначение
|
TYPE = формат
|
формат маркера может иметь значения:
|
Disc
|
диск (по умолчанию)
|
Circle
|
окружность
|
Square
|
Квадрат
|
Абзацы можно оформить и в видезаголовков уровня (от
n
=1 до
n
=6), для этого используют теги вида ... n>.
Заголовок первого уровня выводится наиболее крупным шрифтом.
Теги
, ... ,
могут иметь атрибут выравниванияALIGNсо значениямиLEFT,RIGHT и CENTER.
Размещение рисунков
Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата
gif
,
jpg
(jpeg
) или
png
, а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег , имеющий один обязательный и ряд необязательных атрибутов..
Обязательный атрибут:
|
SRC = url
|
Адрес графического файла (относительный или абсолютный)
|
|
ALT = текст
|
Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки)
|
BORDER = значение
|
Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию)
|
BORDERCOLOR
= цвет
|
Задает цвет обрамляющей рамки
|
HEIGHT = значение
|
Высота изображения в пикселях(по умолчанию оригинальная) либо в процентах от высоты окна браузера
|
WIDTH = значение
|
Ширина изображения в пикселях(по умолчанию оригинальная) либо в процентах от ширины окна браузера
|
HSPACE = значение
|
Свободное пространство слева и справа от изображения в пикселях
|
VSPACE = значение
|
Свободное пространство сверху и снизу от изображения в пикселях
|
ALIGN = значение
|
Выравнивание изображения по горизонтали.
Если заданы значения
LEFT
либо
RIGHT
, изображение соответствующим образом будет выровнено по горизонтали,задание этих значений обеспечивает обтекание изображения текстом
|
Рассмотрим подробнее абсолютный и относительный способы адресации файла.
Адресация в абсолютной форме
используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL
(Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере,это протокол http
.Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /
), в именах файлов и каталогов различаются прописные и строчные буквы
, пробелы не допускаются. Вот примеры URL:
http://www.
vshu
.
kirov
.ru/
site
/
images
/
picture
1.
jpg
http://195.21.123.13:8110
ftp://everything.com/soft/prog.zip
mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.
Последний URL, указывающий на протокол mailto
и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты.
Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется.
Адресация в относительной форме
используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /
), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы ..
). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы:
SHAPE\* MERGEFORMAT
Page1.htm
Page2.htm
Pict1.jpg
Pict2.jpg
|
В этом случае возможны, например, такие варианты записи тега
IMG
:
ü
<
IMG
SRC
=
Picture
.
jpg
> (изображение
Picture
.
jpg
располагается на страничке
Index
.
htm
)
ü
<
IMG
SRC
=
Images
/
Pict
1.
jpg
> (изображение
Pict
1.
jpg
располагается на страничке
Index
.
htm
)
ü
<
IMG
SRC
=../
Picture
.
jpg
> (изображение
Picture
.
jpg
располагается на страничке
Page
1.
htm
)
ü
<
IMG
SRC
=../
Images
/
Pict
1.
jpg
> (изображение
Pict
1.
jpg
располагается на страничке
Page
1.
htm
)
Несмотря на то, что формально обязательным является только атрибут SRC,на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка. Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране.
Гиперссылки
Гиперссылкой называют объект (текст, изображение, фрагмент изображения), при щелчке мышью по которому происходит переход к новому документу или фрагменту документа. Именно гиперссылки позволяют организовать переходы между любыми размещенными в сети Интернет документами.
Текстовые гиперссылки
Связь между HTML-документами и фрагментами документов организуется с помощью тега ...
(от английского a
nchor - якорь
).
Тегупотребляется как для создания ссылки на другой документ, так и для ссылки на фрагмент документа.
Обязательный атрибут:
|
HREF = url
|
Адрес целевого документа (может быть представлен в абсолютной и относительной форме)
|
Основные необязательные атрибуты:
|
NAME="имя
"
|
Помечает находящийся между <
A
> и A
> фрагмент документа как возможный объект для ссылки. В качестве значения нужно латиницей
написать любое слово-указатель, уникальное для данного документа. Например, тег Раздел1
создает так называемую метку (закладку) для перехода к разделу 1.
В этом случае можно ссылаться на помеченную область простым указанием ее имени после имени документа (перед именем метки ставится #).
Так, <
A
HREF
="
Index
.
html
#
part
1">К разделу 1
A
>
отправит вас в раздел "
part
1" файла
Index
.
html
, а <
A
HREF
="#
part
2"> К разделу 2
A
> −
в раздел "
part
2" текущего документа при условии, что в документе имеется соответствующая метка
|
TARGET = "имя"
|
Имя кадра (фрейма) или окна для вывода целевого документа.
Этот атрибут используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self
- указывает, что определенный в параметре HREF документ должен отображаться в текущем фрейме; _parent
- указывает, что документ должен отображаться во фрейме-родителе текущего фрейма (целиком занять окно браузера);
_blank
- указывает, что документ должен отображаться в новом окне
|
TITLE=
"текст
"
|
Выводит всплывающую подсказку при наведении указателя мыши на гиперссылку
|
Текст и изображения, размещенные между тегамистановятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветами, указанными как значение атрибутов LINK,
A
LINK,
V
LINK тега (либо цветом по умолчанию).
Гиперссылки-картинки
Чтобы сделать гиперссылкой целое изображение, также применяется тег ...
., только вместо текста (или вместе с текстом) между <
A
>
и
A
>
располагается тег <
IMG
…> со всеми соответствующими атрибутами.
Например
, .
Карта гиперссылок
Тег позволяет сделать активной зоной текстовый фрагмент или изображение целиком
; для того же, чтобы разные фрагменты
одного изображения ссылались на разные целевые документы, придется использовать тег, реализующий изображение-карту.
У тега-контейнера единственным обязательным атрибутом является NAME
, значением которого будет имя (например, NAME="
mymap
"
, которое должно быть использовано при описании атрибута USEMAP
тега IMG, описывающего изображение, призванного служить картой (при этом к имени карты приписывается слева # − USEMAP ="#
mymap
")
Внутри контейнера каждой чувствительной к перемещению мыши зоне изображения должен соответствовать тег с атрибутами:
Синтаксис атрибута
|
Назначение
|
COORDS = список
|
Список через запятую координат активной зоны (зависит от типа заданной формы зоны)
|
HREF = url
|
|
SHAPE = форма
|
Определяет форму активной зоны. Возможные значения этого атрибута:
circle
(окружность – задается координатами центра и радиусом в пикселях);
rect
(прямоугольник - задается координатами левого верхнего и правого нижнего угла);
poly
(многоугольник - задается координатами своих вершин)
Координаты во всех случаях отсчитываются от верхнего левого угла изображения в пикселях, ось Х направлена вправо, ось
Y
− вниз.
|
NOREF
|
иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет
|
Таблицы
Таблицы в HTML-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью расположения фрагментов текста и изображений друг относительно друга.
Таблицы в
HTML
строятся построчно. Все табличные данные заключаются в теги
; описание каждого ряда ячеек (строк) заключается в теги ...
; содержимое каждой ячейки заключается в теги ...
(обычные ячейки) или ...
H
>
(заголовки).
Таким образом, для описания, например, таблицы из двух строк, каждая из которых содержит по две ячейки, придется создать следующую конструкцию:
Ячейки таблицы могут содержать текст, изображения, вложенные таблицы и т.д. Не следует оставлять ячейки таблицы незаполненными; если какая-то ячейка должна выглядеть пустой, поместите в нее неразрывный пробел.
Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером; текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.
Ячейки таблицы могут охватывать несколько строк или столбцов;при описании таких ячеек используется атрибуты ROWSPAN (ячейка, тег которой содержит данный атрибут, "растягивается" на указанное количество строк) и COLSPAN (ячейка "растягивается" на несколько столбцов). Приведем пример организации таблицы с объединенными ячейками:
<
TR
>
<
TD
ROWSPAN=2> 1-1 TD
>
Теги, описывающие таблицы, имеют целый ряд необязательных атрибутов.
Атрибуты тегазадают параметры таблицы в целом:
|
Синтаксис атрибута
|
Назначение
|
ALIGN = значение
|
Выравнивание относительно текстового потока;возможны значенияleft, right и center
|
|
BACKGROUND = url
|
Фоновое изображение для всей таблицы
|
|
BGCOLOR = цвет
|
Фоновый цвет
|
|
BORDERCOLOR =
цвет
|
Цвет границы
|
|
BORDERCOLORDARK
=
цвет
|
Окрашивает в заданный цвет правый и нижний край основной рамки и левый и верхний край каждой ячейки
|
|
BORDERCOLORLIGHT
=
цвет
|
Окрашивает в заданный цвет левый и верхний край основной рамки и соответственно правый и нижний край каждой ячейки
|
|
CELLPADDING = значение
|
Расстояние от границ ячейки до ее содержимого в пикселях
|
|
CELLSPACING = значение
|
Расстояние между ячейками в пикселях
|
|
HSPACE = значение
|
Свободное пространство слева и справа от таблицы в пикселях
|
|
VSPACE = значение
|
Свободное пространство сверху и снизу от таблицы в пикселях
|
|
WIDTH = значение
|
Ширина таблицы (задается в пикселях или в процентах от текущей ширины окна браузера)
|
|
|
|
|
|
|
Атрибуты тегазадают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге, отменяются).
Выравнивание содержимого ячеек;возможны значенияleft, right и center
|
|
Атрибуты тега задают параметры данной ячейки(при возникновении противоречий атрибуты, заданные в тегах и, отменяются).
При работе с таблицами учтите, что указанное значение атрибута WIDTHво многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).
Бегущая строка
Использование бегущей строки на веб-странице делает ее более динамичной, позволяет создать эффект движения объекта. Создается бегущая строка с помощью тега <
MARQUEE
> … MARQUEE
>.
Между <
MARQUEE
> и MARQUEE
> могут располагаться текстовые фрагменты и рисунки. Текст может быть отформатирован с помощью соответствующих тегов, а рисунок вставляется с использованием .