Файл: Основы программирования на языке HTML (Язык HTML и его назначение).pdf

Атрибут: Align

Обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

Left

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

Right

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

top и texttop

Выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

Middle

Выравнивает базовую линию текущей текстовой строки с центром изображения.

Absmiddle

Выравнивает центр текущей текстовой строки с центром изображения.

Absbottom

Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

<img src=«http://site.ru/images/kartinka.gif» align=«left»>

Здесь можно посмотреть действие всех значений атрибута «Align» элемента <Img>

bottom и baseline

Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

Атрибут: Name

Указывает имя изображения, уникальное для данного документа. Имя можно указывать любое без пробелов с использованием латинских символов и цифр. Если необходимо, то нужно осуществлять доступ к изображению, например, из JavaScript-сценариев.

Обычно это для изображения, не связанного ни с чем, этот параметр совсем не обязательный.

<img src=«http://site.ru/images/kartinka.gif» name=«risunok»>

Атрибут: Alt

Это атрибут, который при ошибке выводит вместо картинки, если браузер по какой - либо причине не смог отобразить изображение (не найдена или пользователь настроил свой обозреватель так, что тот не показывает картинки). Помимо того, при наваждении курсора мыши можно увидеть этот текст в виде подсказки, когда курсор мыши находится на рисунке.

<img src=«http://site.ru/images/kartinka.gif» alt=«Это сообщение, об ошибке, которое выводится вместо картинки»>

Атрибут: Border

Он позволяет создать рамку в ширину вокруг изображения в пикселах. Рамка не появляется при условии, если этот атрибут не указан в теге <Img>, только если изображение является гипертекстовой ссылкой. В таких случаях значение Border обычно указывают равным нулю.

Записывается так:

<img src=«http://site.ru/images/kartinka.gif» border=«2»>

Атрибут: Lowsrc

Указывает адрес (URL) графического файла с расширением с альтернативным изображением более низкого качества, чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

<img lowsrc=«http://site.ru/images/mini.gif» src=«http://site.ru/images/ kartinka.gif»> [8]

2.3 Работа с таблицами

В Web-странице находится один из самых главных инструментов, является таблица.

Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки

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

Основные тэги таблицы

Таблица:<TABLE>...</TABLE>

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

Строка таблицы:<TR>...</TR>

Сколько присутствует пар <TR>..</TR>, такое количество строк таблицы определяется в таблице. Строки могут иметь атрибут VALIGN и ALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы:<TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки. [19]

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись:<CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION>должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION>имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблицы

WIDTH

Определяет размер в процентах от ширины экрана. Используется в тегах <TABLE>, <TR>, <TH>.

Например WIDTH=«60%»;

BGCOLOR

Задаёт фоновый цвет. Используется в тегах <TABLE>, <TR>, <TH>.

BORDERCOLOR

Задаёт цвет рамки. Используется в тегах <TABLE>, <TR>, <TH>.

CELLPADDING

Задает расстояние между содержимым ячейки и ее рамкой в пикселях. Используется в теге <TABLE>.

CELLSPACING

Задает расстояние между ячейками таблицы в пикселях. Используется в теге <TABLE>.

BORDER

Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION>и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.

Если атрибут ALIGN встречается внутри ;<TR>, <TH>или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH>и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top(вверху), bottom(внизу), middle(по середине) и baseline(все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию 1.

ROWSPAN

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию 1. [12]

2.4. Гиперссылки

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

При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Когда создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Создавая графическую гиперссылку, некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит тег <A>

Пример:

HTML-код:

<a href=« http://htmlbook.ru/ «>Ссылка на главную страницу сайта</a>

<a href=«htmlbook.ru/»>Ссылка на главную страницу сайта</a> Отображение в браузере:

Ссылка на главную страницу сайта

Ссылка на главную страницу сайта

Гиперссылка в пределах html страницы

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

Для того чтобы создать ссылку на область внутри текущей страницы, нужно задать этой области название при помощи атрибута NAME тэга <A>. Имя должно состоять только буквы и цифры.

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

Пример:

HTML-код:

<a href=«#Начальная страница»>Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

<a name=«Начальная страница»></a> Отображение в браузере:

Наверх страницы

Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, необходимо указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.[10]

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

Пример:

HTML-код:

<a href=«mailto:admin@on-line-teaching.com?subject=Письмо автору»title=«Письмо автору с сайта > Отображение в браузере:

admin@on-line-teaching.com

Открытие html страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код:

<a href=«../index.html»target=«_blank»«>Ссылка на главную страницу сайта</a> Отображение в браузере:

Ссылка на главную страницу сайта

Цвет текста гиперссылок

Атрибуты которые задают цвет для гиперссылок LINK, ALINK, VLINK.

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

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам.

Также некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

Следует сказать, что атрибутом TABINDEX можно пользоваться для выбора других объектов, например, графических изображений.[7]

Основная особенность гипертекстового документа - это способность получить

сложные эффекты форматирования простыми и наглядными методами.

2.5. Списки

В текстовых редакторах можно использовать списки. Так же и в языке HTML существует возможность создания различных списков. Для этого используются теги как <UL>, <OL> и <DL>, в первых двух случаях элемент списка отмечается тегом <LI> и третий тег <DT> отмечается <DD>, при этом допускаются вложенные списки любой глубины.

Пример маркированного списка и использования тегов <UL> и <LI>:

<UL>

<LI>центр</LI>

<LI>лево</LI>

<LI>право</LI>

<LI>верх</LI>

<LI>низ</LI>

</UL>

Рис.5 Пример маркированный список

Для маркированного списка можно использовать атрибут type=”…”, указывающий на тип маркера каждого элемента списка. Допускается использовать следующие значения:

type=”disc”

type=”circle”

type=”square”

Нумерованный список создают, используя теги <OL> и <LI>. Например:

<OL>

<LI>один</LI>

<LI>два</LI>

<LI>три</LI>

<LI>четыре</LI>

<LI>пять</LI>

</OL>

Рис.6 Пример нумерованного списка

Если не прописывать атрибут type, то по умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Если же используя атрибуты тега <OL>, то можно изменить стиль оформления списка. Атрибут type=”…” определяет стиль нумерации (буквы или цифры), при этом допускаются следующие его значения:

type=”A”- использовать большие латинские буквы;

type=”a”- использовать маленькие буквы;

type=”I”- использовать большие римские цифры;

type=”i”- использовать маленькие римские цифры;

type=”1”- использовать арабские цифры.[14]

Атрибут start=”…” определяет начальное значение списка, например, start=”3”.

И наконец, третий тип списков – это список определений. Он позволяет перечислить не только пункты списка, но так же и их описания. Такой тег удобно использовать для терминов и его описания. Такой список заключается в теги <DL> и <DL>, каждый пункт располагается в контейнере <DT>…<DT>, а его описание – в контейнере <DD>…<DD>.

Пример: