Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Владимирский государственный университет им. Столетовых

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

HTML.doc

Скачиваний:

Добавлен:

08.07.2019

Размер:

1.05 Mб

Скачать

☆

<<< < Предыдущая 12 / 22

16 Основных цветов

	Black (#000000)		Navy (#000080)
	Gray (#808080)		Blue (#0000ff)
	Silver (#c0c0c0)		Purple (#800080)
	White (#ffffff)		Fuchsia (#ff00ff)
	Green (#008000)		Maroon (#800000)
	Lime (#00ff00)		Red (#ff0000)
	Teal (#008080)		Olive (#808000)
	Aqua (#00ffff)		Yellow (#ffff00)

Пример:

<font color="#ff0000" > Шрифт красного цвета </font> или <font color="Red" > Шрифт красного цвета </font> <font color="#0000ff" > Шрифт синего цвета </font> или <font color="Blue" > Шрифт синего цвета </font> <font color="#008000" > Шрифт зеленого цвета </font> или <font color="Green" > Шрифт зеленого цвета </font> и т.д. и т.п.

3)Для атрибута FACE (шрифт) используем значения которые символизируют название шрифтов. Например Arial, Times Roman или Courier

<font face="Times Roman" > текст (шрифт Times Roman)</font> <font face="Arial">текст (шрифт Arial)</font> <font face="Courier">текст (шрифт Courier)</font>

Можно использовать сразу несколько параметров или все сразу. <font color="#ff0000" size="3"> Шрифт красного цвета+размер шрифта №3</font>

<font color="#ff0000" size="3" face="Courier" > Шрифт красного цвета+размер шрифта №3+названия шрифта Courier</font>

Ниже представлена палитра из 216 цветов которые считаются "безопасными" (browser-safe), т.к. хорошо отображаются браузерами на мониторах в 256-цветном режиме. Т.е. будет корректно отображаться почти у всех.

Цветовая палитра

В палитре над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе например Adobe Photoshop) и HEX (для обозначения цвета в HTML).

255.255.204	255.255.153	255.255.102	255.255.51	255.255.0	204.204.0
FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	CCCC00

255.204.102	255.204.0	255.204.51	204.153.0	204.153.51	153.102.0
FFCC66	FFCC00	FFCC33	CC9900	CC9933	996600

255.153.0	255.153.51	204.153.102	204.102.0	153.102.51	102.51.0
FF9900	FF9933	CC9966	CC6600	996633	663300

255.204.153	255.153.102	255.102.0	204.102.51	153.51.0	102.0.0
FFCC99	FF9966	FF6600	CC6633	993300	660000

255.102.51	204.51.0	255.51.0	255.0.0	204.0.0	153.0.0
FF6633	CC3300	FF3300	FF0000	CC0000	990000

255.204.204	255.153.153	255.102.102	255.51.51	255.0.51	204.0.51
FFCCCC	FF9999	FF6666	FF3333	FF0033	CC0033

204.153.153	204.102.102	204.51.51	153.51.51	153.0.51	51.0.0
CC9999	CC6666	CC3333	993333	990033	330000

255.102.153	255.51.102	255.0.102	204.51.102	153.102.102	102.51.51
FF6699	FF3366	FF0066	CC3366	996666	663333

255.153.204	255.51.153	255.0.153	204.0.102	153.51.102	102.0.51
FF99CC	FF3399	FF0099	CC0066	993366	660033

255.102.204	255.0.204	255.51.204	204.102.153	204.0.153	153.0.102
FF66CC	FF00CC	FF33CC	CC6699	CC0099	990066

255.204.255	255.153.255	255.102.255	255.51.255	255.0.255	204.51.153
FFCCFF	FF99FF	FF66FF	FF33FF	FF00FF	CC3399

204.153.204	204.102.204	204.0.204	204.51.204	153.0.153	153.51.153
CC99CC	CC66CC	CC00CC	CC33CC	990099	993399

204.102.255	204.51.255	204.0.255	153.0.204	153.102.153	102.0.102
CC66FF	CC33FF	CC00FF	9900CC	996699	660066

204.153.255	153.51.204	153.51.255	153.0.255	102.0.153	102.51.102
CC99FF	9933CC	9933FF	9900FF	660099	663366

153.102.204	153.102.255	102.0.204	102.51.204	102.51.153	51.0.51
9966CC	9966FF	6600CC	6633CC	663399	330033

204.204.255	153.153.255	102.51.255	102.0.255	51.0.153	51.0.102
CCCCFF	9999FF	6633FF	6600FF	330099	330066

153.153.204	102.102.255	102.102.204	102.102.153	51.51.153	51.51.102
9999CC	6666FF	6666CC	666699	333399	333366

51.51.255	51.0.255	51.0.204	51.51.204	0.0.153	0.0.102
3333FF	3300FF	3300CC	3333CC	000099	000066

102.153.255	51.102.255	0.0.255	0.0.204	0.51.204	0.0.51
6699FF	3366FF	0000FF	0000CC	0033CC	000033

0.102.255	0.102.204	51.102.204	0.51.255	0.51.153	0.51.102
0066FF	0066CC	3366CC	0033FF	003399	003366

153.204.255	51.153.255	0.153.255	102.153.204	51.102.153	0.102.153
99CCFF	3399FF	0099FF	6699CC	336699	006699

102.204.255	51.204.255	0.204.255	51.153.204	0.153.204	0.51.51
66CCFF	33CCFF	00CCFF	3399CC	0099CC	003333

153.204.204	102.204.204	51.153.153	102.153.153	0.102.102	51.102.102
99CCCC	66CCCC	339999	669999	006666	336666

204.255.255	153.255.255	102.255.255	51.255.255	0.255.255	0.204.204
CCFFFF	99FFFF	66FFFF	33FFFF	00FFFF	00CCCC

153.255.204	102.255.204	51.255.204	0.255.204	51.204.204	0.153.153
99FFCC	66FFCC	33FFCC	00FFCC	33CCCC	009999

102.204.153	51.204.153	0.204.153	51.153.102	0.153.102	0.102.51
66CC99	33CC99	00CC99	339966	009966	006633

102.255.153	51.255.153	0.255.153	51.204.102	0.204.102	0.153.51
66FF99	33FF99	00FF99	33CC66	00CC66	009933

153.255.153	102.255.102	51.255.102	0.255.102	51.153.51	0.102.0
99FF99	66FF66	33FF66	00FF66	339933	006600

204.255.204	153.204.153	102.204.102	102.153.102	51.102.51	0.51.0
CCFFCC	99CC99	66CC66	669966	336633	003300

51.255.51	0.255.51	0.255.0	0.204.0	51.204.51	0.204.51
33FF33	00FF33	00FF00	00CC00	33CC33	00CC33

102.255.0	102.255.51	51.255.0	51.204.0	51.153.0	0.153.0
66FF00	66FF33	33FF00	33CC00	339900	009900

204.255.153	153.255.102	102.204.0	102.204.51	102.153.51	51.102.0
CCFF99	99FF66	66CC00	66CC33	669933	336600

153.255.0	153.255.51	153.204.102	153.204.0	153.204.51	102.153.0
99FF00	99FF33	99CC66	99CC00	99CC33	669900

204.255.102	204.255.0	204.255.51	204.204.153	102.102.51	51.51.0
CCFF66	CCFF00	CCFF33	CCCC99	666633	333300

204.204.102	204.204.51	153.153.51	153.153.102	153.153.0	102.102.0
CCCC66	CCCC33	999966	999933	999900	666600

255.255.255	204.204.204	153.153.153	102.102.102	51.51.51	0.0.0
FFFFFF	CCCCCC	999999	666666	333333	000000

Структурное форматирование

Ранее мы уже рассматривали некоторые элементы, которые так или иначе отвечают за работу с текстом. Сейчас постараемся рассмотреть оставшиеся элементы.

1. Элемент div - используется для отделения блока HTML-документа от остальной части документа. Находящиеся между начальным (<div>) и конечным тэгами (</div>) текст или HTML-элементы оформляются как отдельный параграф. Функционирует во многом подобно элементу <p>. Если закрывающий тэг </p>опущен, то <div> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, и значения left, center, right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <div align ="right"> Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. </div>В меню вид выберите пункт просмотр HTML-кода. </body> </html>

Строчка: " Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. " будет начинаться с новой строки и располагаться в центре. Вместо текста между тегами <div></div> может располагаться и любые другие HTML-элементы (таблицы, изображения)

2. Элемент br - используется для разрыва текста и перехода на новую строчку. По сути дела это как нажатие Enter в текстовом редакторе. Он не имеет конечного тэга.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p > Сама по себе аббревиатура HTML расшифровывается так - <br> Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <br> Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. <br> В меню вид выберите пункт <br> просмотр HTML-кода.</p> </body> </html>

3. Элемент address - используют для оформления контактной информации. Такой как телефон, E-mail, или почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом.

Пример:

Пишите по адресу: <address> Москва. ул. Каки-Наки (да это не шутка, такая улица есть), д.13 <br> Морякову П.В. </address>

Вставьте этот пример в html-файл и посмотрите что получиться.

4. Элемент hr - используют для проведения горизонтальной черты. Вот такой.

Этот элемент не имеет конечного тега и может иметь следующие атрибуты:

size - определяет толщину линии в пикселах. color - определяет цвет линии noshade – отменяет объемность. Этот параметр является флагом и не требует указания значения. width - определяет длину линии в пикселах или процентах от ширины окна браузера. align- выравнивание горизонтальной линии. Этот параметр может принимать следующие значения: left – (выравнивание по левому краю документа); right – (выравнивание по правому краю документа); center – (выравнивание по центру документа, используется по умолчанию)

Пример:

(1) <Hr align="right"> (center или left)

(2) <Hr width="50%"> (ширина линии в процентах/пикселях)

(3) <Hr size="7"> (толщина линии)

(4) <Hr noshade> (отмена объемности)

(5) <Hr color="#003399">

5. Элемент blockquote - используют для цитирования больших объемов. Цитируемый текст отображается отдельным абзацем с увеличенным отступом.

Пример:

Я предлагая Вам прочесть это гениальное стихотворение состоящее всего из 2-х фраз. <blockquote> Ромашки спрятались, <br> Поникли лютики, <br>Ромашки спрятались, <br> Поникли лютики, <br> и так до бесконечности ... </blockquote>

Вставьте этот пример в html-файл и посмотрите что получиться.

6. Элемент center - центрирует текст.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p> <center> Сама по себе аббревиатура HTML расшифровывается </center> так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

7. Элемент nobr -помещение текста внутри этого тега гарантирует, что он не будет перенесен на следующую строку. (если строка будет слишком длинная, то для ее просмотра придется пользоваться скроллингом)

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p> <nobr> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </nobr> </body> </html>

Форматирование символов

1. Элемент basefont - используют для задания параметров основного шрифта для текста в документе. (с помощью этого тега Вы задаете определенные размер и используемый шрифт) Он не имеет конечного тэга, а так же действие элемента не распространяется на текст, заключенный в ячейки таблиц. Атрибуты:

size - обязательный параметр. Определяет базовый размер шрифта. Возможные значения от 1 до 7. face - определяет используемый шрифт.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body> <basefont size="3" face="Times" > <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

Допустим где то на странице нам необходимо использовать не основной шрифт, а какой то другой (большего, меньшего размера или использовать другой шрифт). Для этого используем элемент FONT. Для задания размера шрифта делаем тек: size=”+2” ( это означает что если основной шрифт был задан номером 3, то этот шрифт будет номером 5 (3+2=5)

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body> <basefont size="3" face="Times" > <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <font size="+2" >Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. </font>В меню вид выберите пункт просмотр HTML-кода. </body> </html>

2. Элемент em - практически идентичен по действию с элементом I, так как обычно результат выделяется курсивом. Используется для логического ударения.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p> <em> Сама по себе аббревиатура HTML расшифровывается </em> так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

3. Элемент cite - используют для коротких цитат. Цитируемый текст отображается курсивом.

Пример:

<html> <head> <title>Изучаем HTML </title> </head> <body><p> Сама по себе аббревиатура HTML расшифровывается так - <cite> Hyper Text Markup Language </cite> , по-русски - язык гипертекстовой разметки. <p>Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

Пример 2:

Как сказал Ф. Вольтер: <cite>"Соперничество - пища для гения."</cite>

Результат: Как сказал Ф. Вольтер: "Соперничество - пища для гения."

4. Элемент var - используют для обозначения в тексте переменных. Обычно результат выделяется курсивом

Пример:

Переменная <var>IndexX</var> равна 25+4y. Переменная IndexX равна 25+4y.

5. Элемент kbd - используют для диалога пользователя с компьютером. Как правило текст, выделяется жирным моноширинным шрифтом.

Пример:

Чтобы войти наберите этот пароль <kbd>"DROFA"</kbd> большими буквами. Чтобы войти наберите этот пароль "DROFA" большими буквами.

6. Элемент code, samp - данные элементы оформляют текст, как формулу или программный код. Текст при этом как правило отображается моноширинным шрифтом.

Пример:

Запомните формулу: <code> n=((y*15-kx/1.25)/4x+10)^5 </code>

Спецсимволы

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

Пример:

Допустим нам надо сделать вот такую фразу: < Спецсимволы- это головная боль > Сделаем это так.

< Спецсимволы- это головная боль > или вот так (результат один и тот же) &#60 Спецсимволы- это головная боль &#62

Списки

Теперь поговорим о списках. В начале выясним, что это такое. Примеры списков:

Физика
Химия
История

Физика
Химия
История

Надеюсь теперь понятно что такое списки. Очень часто списки используют для создания оглавления.

Списки бывают:

пронумерованные
непронумерованные
списки описаний

Пронумерованные списки

Пример пронумерованных списков:

Физика
Химия
История

Пронумерованный список начинается стартовым тегом <ol> и завершается тегом </ol>. А каждый элемент списка начинается с тега <li>.

Пример:

<ol> <li>Физика <li>Химия <li>История </ol>

Вместо обычных цифр можно сделать список начинающийся с латинских букв (A,B,C...) и римских цифр (I,II,III...). Для этого используем атрибут type . У этого атрибута могут быть следующие значения:

A - большие латинские буквы (A,B,C...) a - маленькие латинские буквы (a,b,c...) I - большие римские цифры (I,II,III...) i - маленькие римские цифры (i,ii,iii...) 1 - обычные цифры (1,2,3...)

Используем конструкцию <тег атрибут="значение">, получаем <ol type="A">

Рассмотрим всевозможные примеры:

1).	Физика Химия История	<ol type ="A"> <li>Физика <li>Химия <li>История </ol>

2).	Физика Химия История	<ol type ="a"> <li>Физика <li>Химия <li>История </ol>

3).	Физика Химия История	<ol type ="I"> <li>Физика <li>Химия <li>История </ol>

4).	Физика Химия История	<ol type ="i"> <li>Физика <li>Химия <li>История </ol>

5).	Физика Химия История	<ol type ="1"> <li>Физика <li>Химия <li>История </ol>

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

Рассмотрим примеры:

1).	Физика Химия История	<ol type ="1" start ="13"> <li>Физика <li>Химия <li>История </ol>

2).	Физика Химия История	<ol type ="i" start ="103"> <li>Физика <li>Химия <li>История </ol>

3).	Физика Химия История	<ol type ="A" start ="55"> <li>Физика <li>Химия <li>История </ol>

Непронумерованные списки

Пример непронумерованных списков:

Физика
Химия
История

Как вы видите для непронумерованных списков используют маркер для пометки элемента списка. Пронумерованный список начинается стартовым тегом <ul> и завершается тегом </ul>. А каждый элемент списка начинается с тега <li>.

Пример:

<ul> <li>Физика <li>Химия <li>История </ul>

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

disk- получаем закрашенный кружок, используется по умолчанию circle - полый кружок square - квадратик

Используем конструкцию <тег атрибут="значение">, получаем <ul type="square">

Рассмотрим всевозможные примеры:

1).	Физика Химия История	<ul type ="circle"> <li>Физика <li>Химия <li>История </ul>

2).	Физика Химия История	<ul type ="disk"> <li>Физика <li>Химия <li>История </ul>

3).	Физика Химия История	<ul type ="square"> <li>Физика <li>Химия <li>История </ul>

Списки описаний

Допустим нам надо сделать список где будет присутствовать термин и его описание.

Пример списка описания:

Отдел маркетинга

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

Финансовый отдел

Данный отдел занимается всеми финансовыми операциями

Отдел кадров

Данный отдел занимается учетом и набором новых сотрудников фирмы.

Список описания начинается стартовым тегом <dl> и завершается тегом </dl>.

Каждый термин начинается тэгом <dt> , а описание - тэгом <dd>.

Пример:

<dl> <dt> Химия <dd> Наука о веществах их составе и свойствах <dt> Физика <dd> Наука о физических явлениях <dt> Русский <dd> Русский язык должен знать каждый </dl>

Получаем:

Химия

Наука о веществах их составе и свойствах

Физика

Наука о физических явлениях

Русский

Русский язык должен знать каждый

Вложенные списки

Пример вложенных списков:

Отдел рекламы
- Иванов И.И.
- Петров К.В.
Отдел продаж
- Сидоров Е.Л.
- Дудников Д.М.

А теперь как это сделать: Просто вставляем между пунктами пронумерованного списка непронумерованный список.

пронумерованный список выделен красным цветом. непронумерованный список выделен синим цветом

<ol> <li> Отдел рекламы <ul> <li> Иванов И.И. <li> Петров К.В. </ul> <li> Отдел продаж <ul> <li> Сидоров Е.Л. <li> Дудников Д.М. </ul> </ol>

Таблица спецсимволов

Мнемонический код	Числовой код	Символ	Описание
			неразрывный пробел
¡	¡	¡	перевернутый восклицательный знак
¢	¢	¢	цент
£	£	£	фунт стерлингов
¤	¤	¤	денежная единица
¥	¥	¥	иена или юань
¦	¦	¦	разорванная вертикальная черта
§	§	§	параграф
¨	¨	¨	трема
©	©	©	знак copyright
ª	ª	ª	женский порядковый числитель
«	«	«	левая двойная угловая скобка
¬	¬	¬	знак отрицания
			место возможного переноса
®	®	®	знак зарегистрированной торговой марки
¯	¯	¯	знак долготы над гласным
°	°	°	градус
±	±	±	плюс-минус
²	²	²	верхний индекс 'два' - "в квадрате"
³	³	³	верхний индекс 'три' - "в кубе"
´	´	´	знак ударения
µ	µ	µ	микро
¶	¶	¶	символ параграфа
·	·	·	точка
¸	¸	¸	седиль (орфографический знак)
¹	¹	¹	верхний индекс 'один'
º	º	º	мужской порядковый числитель
»	»	»	правая двойная угловая скобка
¼	¼	¼	дробь - одна четверть
½	½	½	дробь - одна вторая
¾	¾	¾	дробь - три четверти
¿	¿	¿	перевернутый вопросительный знак
À	À	À	латинская заглавная буква А с тупым ударением
Á	Á	Á	латинская заглавная буква А с острым ударением
Â	Â	Â	латинская заглавная буква А с циркумфлексом (диакритический знак над гласной)
Ã	Ã	Ã	латинская заглавная буква А с тильдой
Ä	Ä	Ä	латинская заглавная буква А с тремой (знак над гласной для произнесения ее отдельно от предшествующей гласной)
Å	Å	Å	латинская заглавная буква А с верхним кружком
Æ	Æ	Æ	латинские заглавные символы AE
Ç	Ç	Ç	латинская заглавная буква C с седилем
È	È	È	латинская заглавная буква E с тупым ударением
É	É	É	латинская заглавная буква E с острым ударением
Ê	Ê	Ê	латинская заглавная буква E с циркумфлексом (диакритический знак над гласной)
Ë	Ë	Ë	латинская заглавная буква E с тремой
Ì	Ì	Ì	латинская заглавная буква I с тупым ударением
Í	Í	Í	латинская заглавная буква I с острым ударением
Î	Î	Î	латинская заглавная буква I с циркумфлексом
Ï	Ï	Ï	латинская заглавная буква I с тремой
Ð	Ð	Ð	латинские заглавные символы ETH
Ñ	Ñ	Ñ	латинская заглавная буква N с тильдой
Ò	Ò	Ò	латинская заглавная буква O с тупым ударением
Ó	Ó	Ó	латинская заглавная буква O с острым ударением
Ô	Ô	Ô	латинская заглавная буква O с циркумфлексом
Õ	Õ	Õ	латинская заглавная буква O с тильдой
Ö	Ö	Ö	латинская заглавная буква O с тремой
×	×	×	знак умножения
Ø	Ø	Ø	латинская заглавная буква O со штрихом
Ù	Ù	Ù	латинская заглавная буква U с тупым ударением
Ú	Ú	Ú	латинская заглавная буква U с острым ударением
Û	Û	Û	латинская заглавная буква U с циркумфлексом
Ü	Ü	Ü	латинская заглавная буква U с тремой
Ý	Ý	Ý	латинская заглавная буква Y с острым ударением
Þ	Þ	Þ	латинская заглавная буква THORN
à	à	à	латинская строчная буква А с тупым ударением
á	&##225;	á	латинская строчная буква А с острым ударением
â	&##226;	â	латинская строчная буква А с циркумфлексом
ã	ã	ã	латинская строчная буква А с тильдой
ä	ä	ä	латинская строчная буква А с тремой
å	å	å	латинская строчная буква А с верхним кружком
æ	æ	æ	латинская строчные буквы АE
ç	ç	ç	латинская строчная буква А с седилем
è	è	è	латинская строчная буква E с тупым ударением
é	é	é	латинская строчная буква E с острым ударением
ê	ê	ê	латинская строчная буква E с циркумфлексом
ë	ë	ë	латинская строчная буква E с тремой
ì	ì	ì	латинская строчная буква I с тупым ударением
í	í	í	латинская строчная буква I с острым ударением
î	î	î	латинская строчная буква I с циркумфлексом
ï	ï	ï	латинская строчная буква I с тремой
ð	ð	ð	латинская строчные символы eth
ñ	ñ	ñ	латинская строчная буква N с тильдой
ò	ò	ò	латинская строчная буква O с тупым ударением
ó	ó	ó	латинская строчная буква O с острым ударением
ô	ô	ô	латинская строчная буква O с циркумфлексом
õ	õ	õ	латинская строчная буква I с тильдой
ö	ö	ö	латинская строчная буква I с тремой
÷	÷	÷	знак деления
ø	ø	ø	латинская строчная буква O со штрихом
ù	ù	ù	латинская строчная буква U с тупым ударением
ú	ú	ú	латинская строчная буква U с острым ударением
û	û	û	латинская строчная буква U с циркумфлексом
ü	ü	ü	латинская строчная буква U с тремой
ý	ý	ý	латинская строчная буква Y с острымударением
þ	þ	þ	латинская строчная буква thorn
ÿ	ÿ	ÿ	латинская строчная буква Y с тремой
ƒ	ƒ	ƒ	знак функции
Греческие буквы
Α	Α	Α	греческая заглавная буква альфа
Β	Β	Β	греческая заглавная буква бета
Γ	Γ	Γ	греческая заглавная буква гамма
Δ	Δ	Δ	греческая заглавная буква дельта
Ε	Ε	Ε	греческая заглавная буква эпсилон
Ζ	Ζ	Ζ	греческая заглавная буква дзета
Η	Η	Η	греческая заглавная буква эта
Θ	Θ	Θ	греческая заглавная буква тета
Ι	Ι	Ι	греческая заглавная буква иота
Κ	Κ	Κ	греческая заглавная буква каппа
Λ	Λ	Λ	греческая заглавная буква лямбда
Μ	Μ	Μ	греческая заглавная буква мю
Ν	Ν	Ν	греческая заглавная буква ню
Ξ	Ξ	Ξ	греческая заглавная буква кси
Ο	Ο	Ο	греческая заглавная буква омикрон
Π	Π	Π	греческая заглавная буква пи
Ρ	Ρ	Ρ	греческая заглавная буква ро
Σ	Σ	Σ	греческая заглавная буква сигма
Τ	Τ	Τ	греческая заглавная буква тау
Υ	Υ	Υ	греческая заглавная буква ипсилон
Φ	Φ	Φ	греческая заглавная буква фи
Χ	Χ	Χ	греческая заглавная буква хи
Ψ	Ψ	Ψ	греческая заглавная буква пси
Ω	Ω	Ω	греческая заглавная буква омега
α	α	α	греческая строчная буква альфа
β	β	β	греческая строчная буква бета
γ	γ	γ	греческая строчная буква гамма
δ	δ	δ	греческая строчная буква дельта
ε	ε	ε	греческая строчная буква эпсилон
ζ	ζ	ζ	греческая строчная буква дзета
η	η	η	греческая строчная буква эта
θ	θ	θ	греческая строчная буква тета
ι	ι	ι	греческая строчная буква иота
κ	κ	κ	греческая строчная буква каппа
λ	λ	λ	греческая строчная буква лямбда
μ	μ	μ	греческая строчная буква мю
ν	ν	ν	греческая строчная буква ню
ξ	ξ	ξ	греческая строчная буква кси
ο	ο	ο	греческая строчная буква омикрон
π	π	π	греческая строчная буква пи
ρ	ρ	ρ	греческая строчная буква ро
ς	ς	ς	греческая строчная буква сигма (final)
σ	σ	σ	греческая строчная буква сигма
τ	τ	τ	греческая строчная буква тау
υ	υ	υ	греческая строчная буква ипсилон
φ	φ	φ	греческая строчная буква фи
χ	χ	χ	греческая строчная буква хи
ψ	ψ	ψ	греческая строчная буква пси
ω	ω	ω	греческая строчная буква омега
Стрелки
←	←	←	стрелка влево
↑	↑	↑	стрелка вверх
→	→	→	стрелка вправо
↓	↓	↓	стрелка вниз
↔	↔	↔	стрелка влево-вправо
Прочие символы
♠	♠	♠	знак масти 'пики'
♣	♣	♣	знак масти 'трефы' - shamrock
♥	♥	♥	знак масти 'червы' - valentine
♦	♦	♦	знак масти 'бубны'
"	"	"	двойная кавычка
&	&	&	амперсанд
<	<	<	знак 'меньше'
>	>	>	знак 'больше'
ˆ	ˆ	ˆ	символ циркумфлекса (диакритический знак над гласной)
˜	˜	˜	тильда
™	™	™	знак торговой марки
Знаки пунктуации
•	•	•	bullet - маленький черный кружок
…	…	…	многоточие ...
′	′	′	одиночный штрих - минуты и футы
″	″	″	двойной штрих - секунды и дюймы
‾	‾	‾	надчеркивание
⁄	⁄	⁄	косая дробная черта
Общая пунктуация
–	–	–	тире
—	—	—	длинное тире
‘	‘	‘	левая одиночная кавычка
’	’	’	правая одиночная кавычка
‚	‚	‚	нижняя одиночная кавычка
“	“	“	левая двойная кавычка
”	”	”	правая двойная кавычка
„	„	„	нижняя двойная кавычка

Рисунки на WEB-страничке

На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры. Допускается вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).

Для вставки рисунка используем элемент img (от английского image - изображение). Элемент img не имеет конечного тэга.

1). Допустим нам надо вставить рисунок с названием 1.jpg находящийся в том же каталоге (директории, папке). Сделаем мы это так: <img src="1.jpg">

То что написано между кавычками (после src=) является адресом или URL (путь к картинке). src - от английского source - источник

2). Теперь рассмотрим как вставить ту же самую картинку находящиеся в поддиректории cat. <img src="cat/1.jpg">

Теперь путь к картинке выглядит так: cat/1.jpg

3). Вставим ту же самую картинку которая лежит на уровень выше. <img src="../1.jpg">

Теперь путь к картинке выглядит так: ../1.jpg

4). Если картинка лежит на другом сайте, то путь прописывается полностью: <img src="img src="http://stroimsait.h10.ru/1.jpg">

П роведем эксперимент. Нажмите на эту картинку правой кнопкой мыши, выберете пункт меню свойства и найдите строчку Адрес (URL). Вы увидите адрес этой картинки.

Практика:

1).Создадим папку под названием site. Создадим в этой папке документ с расширением html или используйте ранее созданный файл Текстовый документ.html (см. как это делалось ранее).

2).Вставляем туда.

<html> <head> <title>Изучаем HTML </title> </head> <body><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

3).Положим в папку site рисунок 1.jpg; Сделаем это так:

нажмите на эту ссылку (откроется новое окно)
нажмите правой кнопкой мыши на рисунок и выберете пункт меню сохранить рисунок как…
найдите папку site и сохраните рисунок там под именем 1.jpg .

4).Теперь вставим сам рисунок.

<html> <head> <title>Изучаем HTML </title> </head> <body> <img src="1.jpg"> <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

5). Теперь сохраните эти изменения и посмотрите результат. Вы должны увидеть текст и рисунок.

Еще один пример:

1). Создадим еще одну папку в папке site. И назовем ее cat. 2). Перемести туда наш файл 1.jpg 3). Откроем файл Текстовый документ.html; Если Вы теперь не видите рисунок значит Вы все сделали правильно.

4). Для того что бы увидеть рисунок необходимо правильно написать путь. Для нашего примера он будет выглядеть cat/1.jpg

<html> <head> <title>Изучаем HTML </title> </head> <body> <img src="cat/1.jpg"> <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

Надеюсь понятно как правильно написать путь.

Рассмотрим возможные атрибуты у элемента img.

SRC- указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH- определяют ширину и высоту изображения. Если указанные значения не совпадают с реальным размером изображения, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок.

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

left- выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа. right- выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева. top и texttop- выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки. middle- выравнивает базовую линию текущей текстовой строки с центром изображения. absmiddle- выравнивает центр текущей текстовой строки с центром изображения. bottom и baseline- выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. absbottom- выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

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

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

BORDER- определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

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

Пример:

В этом примере мы задали ширину и высоту изображения (width="189" и height="316" ), выровняли по правому краю (align="right"), определили текст который должен отображаться на месте изображения (alt="Прикольная картинка"), задали отступ картинки от других объектов документа (hspase="10" и vspace="10") и наконец определили ширину рамки (border="5").

<html> <head> <title>Изучаем HTML </title> </head> <body> <img src="1.jpg" width="189" height="316" align="right" alt="Прикольная картинка" hspase="10" vspace="10" border="5" > <p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода. </body> </html>

Попробуйте поэкспериментировать с параметрами у атрибутов и посмотрите, что будет меняться с каждым Вашим изменением.

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

Ссылки

Все мы знаем, что сайт состоит из множества страниц. Переходить с одной страницы на другую позволяют ссылки. Так же у каждого сайта есть главная страница. Допустим набирая адрес http://stroimsait.h10.ru вы попадаете на главную страницу сайта, а затем уже выбрав раздел, жмете на ссылку и попадаете в нужный раздел или на нужную страницу. Главная страница должна обязательно называться index.html. И уже с нее мы делаем ссылки на другие страницы. Остальные страницы могут называться как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html и тд. и тп.).

Для создания ссылки используем тег <a></a>

Используем следующую конструкцию

<a href="URL">Название ссылки </a>

Рассмотрим атрибуты.

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

У атрибута HREF могут быть следующие значения:

http://... - создает ссылку на www-документ; ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл; mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&"; Это делается при помощи параметров (запомните указывать эти параметры не обязательно)

?subject - Тема пиcьма &Body- Текст вашего сообщения &cc- Копии письма через запятую &bcc- Скрытые копии письма через запятую

Пример: <a href="mailto:stroimsait@front.ru?subject=Вопрос&Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net ">Мое мыло</a>

news:.. - создает ссылку на конференцию сервера новостей; telnet://... - создает ссылку на telnet-сессию с удаленной машиной; wais://... - создает ссылку на WAIS - сервер; gopher://...- создает ссылку на Gopher - сервер;

В значениях мы можем указать абсолютный путь, то есть указывается полный адрес странички (например, http://stroimsait.h10.ru) и относительный, (в качестве отправной точки используется адрес текущего документа. Например, линк <a href="stroit/title.html"> ссылка </a> будет ссылаться на файл title.html в подкаталоге stroit относительно текущего.

TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Рассмотрим пока только одно значение (хотя есть и другие значения)

_blank- указывает, что документ должен отображаться в новом окне;

Примеры использования:

Ссылка на HTML файл <a href="http://stroimsait.h10.ru/HTML/primer.html">Пример</a>

Ссылка на ZIP файл <a href="http://stroimsait.h10.ru/HTML/primer.zip">Пример</a>

Ссылка на TXT файл <a href="http://stroimsait.h10.ru/HTML/primer.txt">Пример</a>

Ссылка по протоколу ftp <a href="ftp://ftp.cdrom.com">Пример</a>

Ссылка на e-mail <a href="mailto:stroimsait@front.ru">Пример</a>

Ссылка на e-mail, с автоподставлением темы <a href="mailto:stroimsait@front.ru?Subject=Teмa">Пример</a>

Ссылка на e-mail, с автоподставлением темы и текста послания <a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания">Пример</a>

Ссылка на e-mail, с автоподставлением темы, текста послания, а также адресов для отправки копии письма и скрытой копии <a href="mailto:stroimsait@front.ru?Subject=Teмa &BODY=Тeкст послания&cc=name@domen.ru&bcc=name1234@domen.ru"> Пример</a>

Ссылка на группу новостей <a href="news:comp.infosystems.www.announce">Пример</a>

Практика:

1) Создайте папку под названием site (ранее мы ее уже создавали, можете использовать ее).

2) Сделайте файл с названием index.html и поместим ее в папку. Это наша главная страница.

3) Сделайте еще 2 файла. С названиями me.html (тут будет изложена автобиография) и link.html (с ссылками).

4) На главной странице сделаем ссылки на 2 другие страницы (выделено красным цветом) и ссылку на e-mail (выделено синим цветом).

Итак, это нужно будет вставить в index.html.

<html> <head> <title> Главная страница </title> </head> <body> <center> <a href="me.html">автобиография</a> :::: <a href="link.html">ссылки</a> </center> <font color="#ff0000"> <h3 align ="center">Главная страница </h3> </font> <p align ="justify"> Добрый день, усталый путник. Ты попал на личную страничку Василия Ивановича. Ну и т.д. и т.п. (придумайте сами, что ни будь) <a href="mailto:name@domen.ru?Subject=Teмa ">Написать мне</a> </body> </html>

Надеюсь Вы разобрались что к чему.

5) Теперь рассмотрим файл me.html. Там будет 2 ссылки: Домой (возвращает на главную страницу) и ссылки (переносит на страницу с ссылками).

<html> <head> <title> Автобиография </title> </head> <body> <center> <a href="index.html">домой </a> :::: <a href="link.html">ссылки</a> </center> <font color="#ff0000"> <h3 align ="center">Автобиография </h3> </font> <p align ="justify"> Я Василий Иванович родился в 1956 году, в селе Солнечное. Получил образование и поехал в Москву, где поступил в МГУ. Ну и так далее </body> </html>

6)Теперь рассмотрим файл link.html. Надеюсь Вы уже догадались, что эта страница будет содержать ссылки на другие Web-ресурсы. По этому путь будем указывать абсолютным, то есть указывать полный адрес (например, http://www.netscape.com). В нашем примере ссылки на другие Web-ресурсы выделены синим цветом. P.S. Что бы ссылки на другие Web-ресурсы открывались в новом окне используем атрибут TARGET со значением _blank (выделено желтым цветом).

<html> <head> <title> Cсылки </title> </head> <body> <center> <a href="index.html">домой </a> :::: <a href="me.html">автобиография</a> </center> <font color="#ff0000"> <h3 align ="center"> Cсылки </h3> </font> <a target="_blank" href="http://www.netscape.com">ссылка на www.netscape.com </a><br> <a target="_blank" href="http://www.microsoft.com">ссылка на www.microsoft.com </a><br> <a target="_blank" href="http://www.macromedia.com">ссылка на www.macromedia.com</a><br> <a target="_blank" href="http://www.adobe.com ">ссылка на www.adobe.com </a> </body> </html>

Картинка в роли ссылки

Cссылкой можно сделать и любой графический файл. Для этого вместо в место названия ссылки нужно прописать графический элемент (выделен красным).

А вот что получиться:

Картинка стала ссылкой. А вокруг картинки появилась рамочка. Эту рамочку можно оставить (если она Вам нравиться), а можно убрать задав параметр у картинки border="0".

Закладки

Иногда необходимо сделать ссылку на определенное место в тексте в том же или в другом документе. Допустим нажав сюда вы попадете в середину этой страницы.

Что бы сделать закладку нужно знать следующее:

Ссылка на закладку в том же документе имеет следующий вид:

<a href="#Имя закладки">Название раздела </a>

А так выглядит ссылка на закладку в другом документе: <a href="Имя документа#Имя закладки">Название раздела </a>

Сама закладка будет такой: <a name="Имя закладки" > </a>

Щелкнув на Название раздела пользователь будет попадать на определенную Вами закладку.

Пример:

Сделаем вверху страницы содержание, а чуть ниже текст.

Вставьте этот пример в html-файл и посмотрите. что вышло.

<html> <head> <title>Пример использования закладок </title> </head> <body> <ol> <li><a href="#1">1-я часть</a> <li><a href="#2">2-я часть </a> <li><a href="#3">3-я часть </a> <li><a href="#4">4-я часть</a> </ol> <h4><a name="#1"> 1-я часть </a> </ h4> <p>Из дневника канадского эмигранта... <br>15-е августа. Вот мы и в Канаде!!! Я очарован этой страной! Здесь восхитительно! Горы так прекрасны. С нетерпением жду, когда увижу их покрытые снегом. <br>14-е октября. КАНАДА! Это самое чудесное место на земле! Листья на деревьях пожелтели и приобрели все оттенки спектра, от красного до оранжевого. Вчера совершил увлекательную поездку за город, в сельскую местность. Вы не поверите! Видел диких оленей! На воле, они так красивы и грациозны. Поистине это самые очаровательные животные на планете. Ну просто милашки! Нет, здесь действительно рай! <h4><a name="#2">2-я часть </a> </ h4> <p>11-е ноября. Скоро открывается сезон охоты на оленей. Это ужасно! Не могу себе представить, что у кого-то может подняться рука на это милое, безобидное создание. Со дня на день ожидаем снег. Мне здесь нравится! <br>2-е декабря. Наконец-то! Этой ночью выпал снег УРА!!! Проснувшись поутру, мы обнаружили очаровательную картину за окном. Все покрыто белоснежным, пушистым покрывалом. Вид как на удивительной рождественской открытке! Я восхищен! Мы с женой радостно выбежали из дому, и быстренько очистив крыльцо и парковку перед домом, мы с хохотом стали кидаться снежками (Я победил!) Внезапно снегоочиститель проехал мимо нас, завалив всю парковку снегом. Но это не расстроило нас, и я быстренько откидал снег обратно. Как здесь хорошо! Я люблю Канаду! <h4><a name="#3">3-я часть </a> </ h4> <p>12-е декабря. Этой ночью опять выпал снег. Снегоочиститель повторил свою выходку и завалил парковку. <h4><a name="#4">4-я часть </a> </ h4> <p>19-е декабря. Опять шел снег этой ночью. Я так и не смог очистить парковку и уехать на работу. Здесь, конечно, великолепно, но я уже обессилел, постоянно очищая парковку от снега. Идиотский снегоочиститель! </body> </html>

Создание карты изображений

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

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

Карты задаются тегом мap. Между начальным тегом <мap> и завершающим тегом </мap>. ставиться тег аrea. Тег area определяют геометрические области внутри карты (прямоугольник, круг или многоугольник). У него нет конечного тэга.

Рассмотрим возможные атрибуты у тега мap.

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

Рассмотрим возможные атрибуты у тега area.

SHAPE - описывает форму выделяемой области, возможные значения:

rect - прямоугольник circle - круг poly - многоугольник default - определяет всю область, т.е весь рисунок может стать ссылкой

COORDS- определяет координаты навигационной области на карте. Для разных типов областей, координаты задаются по разному.

Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов (левый x, верхний y, правый x, нижний y) Для круга три координаты: две из них- это центр круга, третья – радиус (центр x, центр y, радиус) Для многоугольника это описание каждого угла в двух координатах (x1,y1,x2,y2,x3,y3,...;)

Все координаты считаются с нуля, поэтому для описания области 100 на 100 используется описание: <area cords ="0,0,99,99" ...>

HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

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

ALT - определяет альтернативный текст-подсказку для данной области.

TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

Мы рассмотрели как написать карту изображения. Но ее еще надо связать с картинкой. Для этого вставим атрибут usemap (а в качестве значения для этого атрибута впишем имя карты которое мы указали в теге <map>) в картинку: <img src="mat.gif" usemap="#имя_карты"> P.S. значок # обязателен всегда.

Пример: <img src="mat.gif" usemap="#map"> ...... <map name="map"> <area ...> ...... <area ...> </map>

Практика Сделаем карту изображения для этого рисунка. Название нашего рисунка monster.jpg

1) Для начала вставим этот рисунок в документ. <html> <head> <title>Карта изображений </title> </head> <body> <img src="monster.jpg" width="160" height="188"> </body> </html>

2) Теперь вставим карту с именем map_cap (name="map_cap") P.S. Сейчас тег area стоит условно. Далее мы рассмотрим, что надо делать с ним подробно.

<html> <head> <title>Карта изображений </title> </head> <body> <img src="monster.jpg" width="160" height="188"> <map name="map_cap"> <area ...> ...... <area ...> </map> </body> </html>

3) Свяжем нашу картинку с картой, вставив туда атрибут usemap, а в качестве значения укажим имя карты (в нашем случае usemap="#map_cap"). И не забывайте про знак #.

<html> <head> <title>Карта изображений </title> </head> <body> <img src="monster.jpg" width="160" height="188" usemap="#map_cap"> <map name="map_cap"> <area ...> ...... <area ...> </map> </body> </html>

4) Рассмотрим тег area. Как мы помним он определяют геометрические области внутри карты (прямоугольник, круг или многоугольники) и у него нет конечного тэга. В нашем рисунке я решила выделить следующие области: ноги, руки, глаз и рот.

4.a.)Определим какую форму мы будем задавать для разных областей: Для глаза возьмем круг, для рта будем использовать прямоугольник, а для всех остальных областей многоугольники.

5) Теперь зададим для этих фигур координаты и ссылки.

Как мы помним для разных типов областей, координаты задаются по разному.

5.a.)Для круга нам нужны координаты центра и радиуса. В нашем случае X=79 Y=44 R=21 Получаем: <area shape="circle" coords="79,44,21" href="primer.html" target="_blank" title="Глаз"> Рассмотрим элементы по отдельности: shape="circle" -описывает форму выделяемой области, в нашем случае это круг coords="79,44,21" – координаты (для круга это координаты центра и радиус) href="primer.html"- ссылка на документ primer.html (при нажатии на область откроется документ primer.html) target="_blank"- открывает документ в новом окне. title="Глаз" - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

5.b.)Для прямоугольника нам нужны координаты левого верхнего и правого нижнего углов. В нашем случае X₁=61 Y₁=82 и X₂=97 Y₂=104 Получаем: <area shape="rect" coords="61,82,97,104" href="primer1.html" target="_blank" title="Рот">

5.с.) Для многоугольников нам нужны координаты всех углов.

Для левой руки это: X₁=29 Y₁=138; X₂=37 Y₂=136; X₃=50 Y₃=157; X₄=45 Y₄=167; X₅=26 Y₅=164 Получаем: <area shape="poly" coords="29,138,37,136,50,157,45,167,26,164" href="primer2.html" target="_blank" title="Левая рука">

Для правой руки это: X₁=131 Y₁=136; X₂=139 Y₂=137; X₃=143 Y₃=163; X₄=131 Y₄=169; X₅=126 Y₅=157 Получаем: <area shape="poly" coords="131,136,139,137,143,163,131,169,126,157" href="primer3.html" target="_blank" title="Правая рука">

6.)Соединяем все, что у нас есть:

<html> <head> <title>Карта изображений </title> </head> <body> <img src="monster.jpg" width="160" height="188" usemap="#map_cap"> <map name="map_cap"> <area shape="circle" coords="79,44,21" href="primer.html" target="_blank" title="Глаз"> <area shape="rect" coords="61,82,97,104" href="primer1.html" target="_blank" title="Рот"> <area shape="poly" coords="29,138,37,136,50,157,45,167,26,164" href="primer2.html" target="_blank" title="Левая рука"> <area shape="poly" coords="131,136,139,137,143,163,131,169,126,157" href="primer3.html" target="_blank" title="Правая рука"> </map> </body> </html>

Вот что мы получили:

Таблицы. Теория (описание тегов, атрибутов и значений)

Таблицы создаются тегом <table></table>. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации.

Но это еще не все: необходимо указать строчки и столбцы таблицы. <tr></tr> - строчка таблицы. <td></td> - ячейка (столбец) таблицы.

А так же к таблицам можно отнести следующие теги: <th></th>- создает ячейку, но определяет ее как ячейку-заголовок. В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован. <caption></ caption >- заголовок таблицы. при этом содержание заголовка должно состоять только из текста.

Рассмотрим возможные атрибуты для всех тегов:

Внимание! Далее рассматривается применение всех элементов доходчиво и подробно. Смотри практику.

Итак, возможные атрибуты у тега table:

BORDER-определяет ширину внешней рамки таблицы (в пикселах). Если этот параметр не указан или BORDER="0" рамка отображаться не будет.

ALIGN-определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Возможные значения: left, center, right.

WIDTH-определяет ширину таблицы. Ширина задается либо в пикселях, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT-определяет высоту таблицы. Высота задается либо в пикселях, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.

BGCOLOR-устанавливает цвет фона для всей таблицы. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета.

BACKGROUND-позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать адрес (URL) рисунка.

CELLPADDING-определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING-определяет расстояние (в пикселях) между границами соседних ячеек.

Рассмотрим возможные атрибуты у тега tr:

ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

VALIGN- определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения:

top-содержимое будет находится наверху. bottom-содержимое будет находится внизу. middle-содержимое будет находится в центре.

BGCOLOR-определяет цвет фона для всех ячеек данного ряда. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета.

Рассмотрим возможные атрибуты у тега td и th:

HEIGHT-определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к ширине таблицы.

WIDTH-определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы.

ALIGN-определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.

VALIGN-- определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру, если значение этого параметра не было задано ранее в элементе TR.

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

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

NOWRAP-автоматический перенос слов в пределах текущей ячейки.

BGCOLOR-определяет цвет фона ячейки.

BACKGROUND-- заполняет ячейку фоновым рисунком. В качестве значения необходимо указать адрес (URL) рисунка.

Рассмотрим возможные атрибуты у тега caption:

ALIGN-определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:

top - помещает заголовок над таблицей (по умолчанию). bottom - помещает заголовок под таблицей.

Практика

Сделаем таблицу состоящую из 2-х строчек и 2-х столбцов. Получается по 2 ячейки в каждой строчке, а всего 4 ячейки.

1) В начале указываем сколько строчек в таблице тегом <tr></tr>

2) А затем уже в каждой строчке задаем число столбцов тегом <td></td>

3) Теперь впишем сюда что нибудь.

<table> <tr> <td> 1-я ячейка </td> <td> 2-я ячейка </td> </tr> <tr> <td> 3-я ячейка </td> <td> 4-я ячейка </td> </tr> </table>

Вот что мы получили:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

4) Чтобы раскрасить ячейки используем атрибут bgcolor, а в качестве значение используем цвет (bgcolor="цвет_фона"). Таким способом фон можно задавать как для таблицы в целом, так и для строки и(или) ячейки. В нашем случае зададим цвет для каждой ячейки.

<table > <tr> <td bgcolor="#d3d7f3"> 1-я ячейка </td> <td bgcolor="#f3efd3"> 2-я ячейка </td> </tr> <tr > <td bgcolor="#f3efd3"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

Вот что у нас получилось:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

5) Но ячейки слишком маленькие, хотелось бы сделать их пошире и длиннее. Необходимо задать ширину и высоту атрибутами width и height, а значения можно задавать как в пикселях так и в процентах

height="35" width="50" (в пикселях) height="15%" width="25%" (в процентах)

Напомню что ширину и высоту Вы можете задать как для всей таблицы в целом, так и для ячеек. Мы будем задавать значения для ячеек:

<table > <tr> <td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td> <td bgcolor="#f3efd3" width="120"> 2-я ячейка </td> </tr> <tr > <td bgcolor="#f3efd3" height="45"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

А вот и результат:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

Внимание!!!! Мы задавали ширину и высоту не в каждой ячейке. Почему? Ответ прост: Если в ряду вы задаете для какой-либо ячейки высоту большую, чем для других то, все ячейки вашего ряда станут по высоте равны наибольшей. Тоже самое с рядами, если вы зададите для какой-либо ячейки наибольшую ширину, то весь столбец выровняются по этому наибольшему значению. Следовательно можно задать один раз ширину ячейки, и весь столбец станет такого же размера. Можно задать в одной ячейки высоту, и вся строчка станет такой высоты. В этом примере мы задали высоту в одной ячейке и вся строчка стала такой высоты. Так же мы задали ширину в одной ячейке и весть столбец стал такой ширины.

6)Теперь рассмотрим как разместить текст не только по середине (по умолчанию), но вверху или внизу. Для этого используем атрибут valign. Сделаем в первой строчке выравнивание по верхнему краю, а во второй строке по нижнему краю.

<table > <tr valign="top"> <td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td> <td bgcolor="#f3efd3" width="120"> 2-я ячейка </td> </tr> <tr valign="bottom" > <td bgcolor="#f3efd3" height="45"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

Смотрим, что вышло:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

6.a) Определим способ горизонтального выравнивания. Для этого используем атрибут align В нашем случае мы расположим все по центру.

<table > <tr valign="top" align="center"> <td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td> <td bgcolor="#f3efd3" width="120"> 2-я ячейка </td> </tr> <tr valign="bottom" align="center"> <td bgcolor="#f3efd3" height="45"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

Смотрим, что вышло:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

7) Давайте изменим пространство между ячейками атрибутом cellspacing. Мы возьмем значение равное 0 (cellspacing ="0"), по этому расстояние между ячейками исчезло вообще. Если бы в качестве значения мы выбрали 5 (cellspacing ="5"), то оно увеличилось бы до 5 пикселей.

<table cellspacing="0" > <tr valign="top" align="center"> <td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td> <td bgcolor="#f3efd3" width="120"> 2-я ячейка </td> </tr> <tr valign="bottom" align="center"> <td bgcolor="#f3efd3" height="45"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

Результат на лицо:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

8)Теперь рассмотрим атрибут cellpadding. Как мы помним он определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

<table cellspacing="0" cellpadding="10"> <tr valign="top" align="center"> <td bgcolor="#d3d7f3" height="50" width="100"> 1-я ячейка </td> <td bgcolor="#f3efd3" width="120"> 2-я ячейка </td> </tr> <tr valign="bottom" align="center"> <td bgcolor="#f3efd3" height="45"> 3-я ячейка </td> <td bgcolor="#d3d7f3"> 4-я ячейка </td> </tr> </table>

А вот и результат:

1-я ячейка	2-я ячейка
3-я ячейка	4-я ячейка

9) Ну и последнее на этом этапе. Сделаем фоном 4-й ячейки картинку. Для этого используем атрибут background.

Заметьте, что если картинка по каким либо причинам не будет загружена, цвет ячейки будет голубым. Это происходит, потому что мы сохранили атрибут bgcolor (bgcolor="#d3d7f3").

Продолжаем создавать таблицы.

1) Создадим таблицу из 3-х строк и 3-х столбцов.

2) Напишем туда что ни будь и зададим ширину и высоту ячеек.

<table> <tr> <td height="60" width="100"> 1-я ячейка </td> <td width="100"> 2-я ячейка </td> <td width="100"> 3-я ячейка </td> </tr> <tr> <td height="60" >4-я ячейка</td> <td>5-я ячейка</td> <td>6-я ячейка</td> </tr> <tr> <td height="60" >7-я ячейка</td> <td>8-я ячейка</td> <td>9-я ячейка</td> </tr> </table>

3) Раскрасим ячейки разными цветами.

<table> <tr> <td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td> <td width="100" bgcolor="#f3efd3"> 2-я ячейка </td> <td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td> </tr> <tr> <td height="60" bgcolor="#f3efd3">4-я ячейка</td> <td bgcolor="#d3d7f3">5-я ячейка</td> <td bgcolor="#f3efd3">6-я ячейка</td> </tr> <tr> <td height="60" bgcolor="#d3d7f3" >7-я ячейка</td> <td bgcolor="#f3efd3">8-я ячейка</td> <td bgcolor="#d3d7f3">9-я ячейка</td> </tr> </table>

Вот что у нас вышло:

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

4) Растянем первую ячейку на две используя атрибут colspan (colspan="2") Обращаю ваше внимание что при этом нужно удалить одну ячейку (в нашем примере это 2-я ячейка ) т.к. ее место займет первая. Так же необходимо изменить ширину этой ячейки. Так как она стала занимать две ячейки ее ширина должна увеличится вдвое. (width="200")

<table> <tr> <td height="60" width="200" colspan="2" bgcolor="#d3d7f3" > 1-я ячейка </td> <td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td> </tr> <tr> <td height="60" bgcolor="#f3efd3">4-я ячейка</td> <td bgcolor="#d3d7f3">5-я ячейка</td> <td bgcolor="#f3efd3">6-я ячейка</td> </tr> <tr> <td height="60" bgcolor="#d3d7f3" >7-я ячейка</td> <td bgcolor="#f3efd3">8-я ячейка</td> <td bgcolor="#d3d7f3">9-я ячейка</td> </tr> </table>

Вот что у нас вышло:

1-я ячейка		3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

4.а) Растянем первую ячейку вертикально на две ячейки используя атрибут rowspan (rowspan="2") принцип действия тот же. Не забудьте убрать ячейку 4 и поменять размеры высоты, так как ее место заняла ячейка 1.

P.S. Если Вы пробуете сделать этот пункт после предыдущего пункта (номер 4), то вам еще надо будет вернуть ту ячейку которую мы удалили из первой строки (ячейка номер 2) и изменить параметр width с 200 на 100.

<table> <tr> <td height="120" width="100" rowspan="2" bgcolor="#d3d7f3" > 1-я ячейка </td> <td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td> <td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td> </tr> <tr> <td bgcolor="#d3d7f3">5-я ячейка</td> <td bgcolor="#f3efd3">6-я ячейка</td> </tr> <tr> <td height="60" bgcolor="#d3d7f3" >7-я ячейка</td> <td bgcolor="#f3efd3">8-я ячейка</td> <td bgcolor="#d3d7f3">9-я ячейка</td> </tr> </table>

Вот что вышло:

1-я ячейка	3-я ячейка	3-я ячейка
1-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

6) Что бы закрепить пройденное. Попробуйте сделать сами такую таблицу. Внизу написан ее код что бы вы могли сравнить ее со своим. Не торопитесь подглядывать. Ведь Вы делаете это для себя.

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка		3-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка

А вот ее html-код.

<table> <tr> <td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td> <td width="100" bgcolor="#f3efd3"> 2-я ячейка </td> <td width="100" bgcolor="#d3d7f3" rowspan="2" > 3-я ячейка </td> </tr> <tr> <td height="60" bgcolor="#f3efd3" colspan="2">4-я ячейка</td> </tr> <tr> <td height="60" bgcolor="#d3d7f3">7-я ячейка</td> <td bgcolor="#f3efd3">8-я ячейка</td> <td bgcolor="#d3d7f3">9-я ячейка</td> </tr> </table>

7) А сейчас рассмотрим как сделать заголовок таблицы. Для этого используем атрибут caption. Так как мы будем использовать значение bottom наш заголовок будет располагаться внизу таблицы.

<table> <caption align="bottom">Заголовок таблицы </caption> <tr> <td height="60" width="100" bgcolor="#d3d7f3"> 1-я ячейка </td> <td width="100" bgcolor="#f3efd3"> 2-я ячейка </td> <td width="100" bgcolor="#d3d7f3"> 3-я ячейка </td> </tr> <tr> <td height="60" bgcolor="#f3efd3">4-я ячейка</td> <td bgcolor="#d3d7f3">5-я ячейка</td> <td bgcolor="#f3efd3">6-я ячейка</td> </tr> <tr> <td height="60" bgcolor="#d3d7f3" >7-я ячейка</td> <td bgcolor="#f3efd3">8-я ячейка</td> <td bgcolor="#d3d7f3">9-я ячейка</td> </tr> </table>

Вот что у нас вышло:

1-я ячейка	2-я ячейка	3-я ячейка
4-я ячейка	5-я ячейка	6-я ячейка
7-я ячейка	8-я ячейка	9-я ячейка
Заголовок таблицы

Хождение по фреймам

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

К практике.

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

2) В фрейм-документах вместо тега body, мы используем тег frameset.

<html> <head> <title>Применяем фреймы </title> </head> <frameset> </frameset> </html>

3) Допусти мы хотим разбить наше окно на две части. В левой части мы расположи меню и в правой будет располагаться основная часть.

Мы должны написать, что наше окно делится на два фрейма. Сделаем это атрибутом cols, а в качестве значений укажем какой ширины в пикселях они должны быть. Значения записываться через запятую. P.S. Ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна (напр. <frameset cols="25%,75%">)

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*"> </frameset> </html>

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

В нашем примере мы задали ширину первого фрейма равную 150 пикселей, а второй фрейм будет занимать все оставшееся место.

4) Теперь необходимо задать какие документы нужно открывать в наших фреймах. Сделаем это с помощью тега frame. Адрес документов указываем с помощью атрибута src.

(Вставьте этот HTML-код в ранее созданный файл frame.html и посмотрите в окне браузера что вышло, мы видим 2 фрейма)

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>

В первом, узком фрейме будет открываться файл menu.html, а в большом фрейме будет открывать файл content.html.

5) Создадим файлы: menu.html и content.html и разместим их в папке frame.

HTML-код для файла menu.html

<html> <head> </head> <body> <a href="content.html">главная </a> <p><a href="me.html">автобиография</a> <p><a href="link.html">ссылки</a> </body> </html>

HTML-код для файла content.html

<html> <head> </head> <body> <font color="#ff0000"> <h3 align ="center">Главная страница </h3> </font> <p align ="justify"> Добрый день, усталый путник. Ты попал на личную страничку Василия Ивановича. Ну и т.д. и т.п. (придумайте сами, что ни будь) </body> </html>

Вставьте HTML-код в файлы и сохраните. Теперь откройте файл frame.html. Комментарии излишни.

6) Проведите самостоятельно эксперимент и поменяйте атрибут у тега frameset с cols на rows. Результат очевиден.

При помощи rows мы разбиваем окно на горизонтальные фреймы и задаем какую высоту будет иметь каждый фрейм, при помощи cols разбиваем окно на вертикальные фреймы и задаем какую ширину будет иметь каждый фрейм. Но это так к месту. А мы продолжим экспериментировать.

7) Создадим файлы на которое ссылается наше меню (me.html и link.html) и сохраним все в той же папке.

HTML-код для файла me.html

<html> <head> </head> <body> <font color="#ff0000"> <h3 align ="center">Автобиография </h3> </font> <p align ="justify"> Я Василий Иванович родился в 1956 году, в селе Солнечное. Получил образование и поехал в Москву, где поступил в МГУ. Ну и так далее </body> </html>

HTML-код для файла link.html

<html> <head> </head> <body> <font color="#ff0000"> <h3 align ="center"> Cсылки </h3> </font> <a target="_blank" href="http://www.netscape.com">ссылка на www.netscape.com </a><br> <a target="_blank" href="http://www.microsoft.com">ссылка на www.microsoft.com </a><br> </body> </html>

8) Откройте файл frame.html и попробуйте нажить на одну из ссылок (автобиография, главная или ссылки). Документ открывается в том же фрейме. А нам конечно хотелось, что бы он открывался в большом фрейме. Что бы документ открывался в другом фрейме нужно дать имя для того фрейма, в котором должна открываться ссылка (в нашем случае это большой фрейм). А сделаем это можно применяя атрибут name в теге frame. Наш фрейм мы назвали wild.

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*"> <frame src="menu.html" > <frame src="content.html" name="wind" > </frameset> </html>

9) А теперь вспомним наш файл с меню (menu.html). Укажем в каждой ссылке атрибут target, а в качестве значения укажем имя нашего фрейма (target="wind"). Если перевести на человеческий язык, мы сказали что ссылки надо открывать в фрейме с именем wind.

<html> <head> </head> <body> <a href="content.html" target="wind">главная </a> <p><a href="me.html" target="wind">автобиография</a> <p><a href="link.html" target="wind">ссылки</a> </body> </html>

Теперь открываем файл frame.html. Жмем на ссылки. Все работает.

P.S. Иногда нужно что бы документ открывался во всем окне. При этом остальные фреймы уничтожаться. Для такой ситуации для ссылки используют атрибут target со значением _top.

Пример: <a href="cat.html" target="_top">Кошки и их производные</a>

Далее рассмотрены и другие возможные значения у атрибута target.

10) Очень часто в одном фрейме делают меню с множеством ссылок, а в другом окне выводят информацию. И приходиться в каждой ссылке писать атрибут target, а в качестве значения указывать имя фрейма (напр. target="wind"). Если ссылок много, то это становиться трудным и нудным занятием. Что бы этого не сделать нужно сделать так, что бы все ссылки из данного документа открывались в определенном фрейме. Делается это с помощью тега <base>. У него нет конечного тега, и вставляется он между тегами <head></head>. Смотрим, как это делается. Заметьте, что атрибут target пропал из ссылок.

<html> <head> <base target="wind"> </head> <body> <a href="content.html">главная </a> <p><a href="me.html" >автобиография</a> <p><a href="link.html" >ссылки</a> </body> </html>

Хождение по фреймам (Часть 2)

Продолжаем наше исследование. Итак, теперь рассмотрим, что можно еще сделать с нашим примером.

1)Что бы избавиться от полосы прокрутки в маленьком фрейме вставим туда атрибут scrolling. У него есть 3 значения (no-полосы прокрутки не будет не при каких обстоятельствах; yes- полоса прокрутки будет всегда; auto- полоса прокрутки появиться только тогда, когда она нужна, используется по умолчанию). Мы возьмем значение no.

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*"> <frame src="menu.html" scrolling="no" > <frame src="content.html" name="wind" > </frameset> </html>

2) Размер рамок в пикселях задается атрибутом border. Что бы избавиться от рамок вообще, нужно вставить атрибут border в тег frameset со значением 0.

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*" border="0"> <frame src="menu.html" scrolling="no" > <frame src="content.html" name="wind" > </frameset> </html>

Основные моменты мы рассмотрели, хотя еще остались атрибуты, которые мы не проработали. Их Вы можете попробовать применить и сами.

Далее рассматриваются все теги их атрибуты и значения относящиеся к фреймам.

Различные варианты расположения фреймов

А сейчас рассмотрим различные варианты расположения фреймов. И их создание.

Самые распространенные варианты мы видим на этой картинки. Хотя еще можно сделать массу вариантов.

1) Как создать 1-й вариант мы уже знаем (или догадываемся). Вот HTML-код.

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "100,150,*"> <frame src="logo.html" > <frame src="menu.html" > <frame src="content.html"> </frameset> </html>

2) Как создать 2-й вариант мы тоже уже знаем.. Вот HTML-код.

<html> <head> <title>Применяем фреймы </title> </head> <frameset rows= "100,*,150"> <frame src="menu.html" > <frame src="content.html"> <frame src="logo.html" > </frameset> </html>

3)Теперь рассмотрим, как сделать третий вариант. Как мы помним мы можем делить окно только на вертикальные и горизонтальные фреймы. Но, еще мы можем разбить горизонтальный фрейм на несколько вертикальных, а вертикальный фрейм на несколько горизонтальных.

Итак для начала сделаем вот такой вариант:

<html> <head> <title>Применяем фреймы </title> </head> <frameset rows="100,*"> <frame src="logo.html" > <frame src="content.html"> </frameset> </html>

А теперь просто разобьем нижний фрейм (content) на 2 вертикальных фрейма. Для этого примени тег frameset. Смотрите как это делается.

Используя атрибут cols тэга <frameset></frameset> мы делим второй фрейм на два вертикальных фрейма (первый шириной 200 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame> (выделены синим цветом), определяют какие документы будут показаны в фреймах.

<html> <head> <title>Применяем фреймы </title> </head> <frameset rows="100,*"> <frame src="logo.html" > <frameset cols="200,*"> <frame src="menu.html" > <frame src="content.html"> </frameset> </frameset> </html>

Вот, что у нас вышло

4) Что бы получить 4-й вариант мы поступим следующим образом: Для начала сделаем такой вариант:

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "200,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>

А теперь разобьем 1-й вертикальный фрейм на 2 горизонтальных. Принцип действия такой же, как и в предыдущем варианте. Только там мы делили ряд на колонки, а здесь колонка делим на ряды. Смотрим:

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "200,*"> <frameset rows="150,*"> <frame src="logo.html" > <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html>

Вот и все.

Далее мы рассмотрим все теги, их атрибуты и значения. относящиеся к фреймам.

Теги, их атрибуты и значения которые можно отнести к фреймам

Рассмотрим возможные атрибуты у тега frameset.

ROWS-определяет количество и размеры горизонтальных фреймов в окне браузера. Значение задают список размеров фреймов через запятую. Значения можно задавать следующими способами:

в пикселях. Например: "75,25"

в процентах от высоты окна браузера. Например: "30%,30%,40%"

в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера.

Все три способа можно совмещать. Например, "25%,40,*" разобьет экран на три фрейма, первый из которых будет высотой в четверть окна браузера, второй - в 40 пикселов, а третий займет всю оставшуюся площадь.

COLS-определяет количество и размеры вертикальных фреймов в окне браузера. Значение задают список размеров фреймов через запятую. Размеры задаются так же, как и в параметре ROWS (см. ранее).

BORDER-определяет ширину рамок фреймов в пикселях.

FRAMEBORDER-определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:

Yes -отображать рамки;

No или 0-не отображать рамки;

Внимание !!!!!-Браузеры Netscape не поддерживают данный параметр, и для определения ширины рамок используйте атрибут BORDER.

FRAMESPACING-определяет расстояние между фреймами в пикселях. Он необходим для создания фреймов без рамок.

Рассмотрим возможные атрибуты у тега frame.

SRC-указывает адрес (URL) HTML-файла, отображаемого в данном фрейме. Если он отсутствует, то будет отображен пустой фрейм.

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

SCROLLING-определяет наличие или отсутствие полосы прокрутки. Могут применяться следующие значения:

no-полосы прокрутки не будет не при каких обстоятельствах.

yes-полоса прокрутки будет всегда.

auto-полоса прокрутки появиться только тогда, когда она нужна, используется по умолчанию.

NORESIZE-не позволяет изменять размеры фрейма. По умолчанию, размер фрейма можно изменить при помощи мыши (допустим как окно Windows) . NORESIZE отменяет данную возможность. Данный параметр является флагом и не требует указания значения.

FRAMEBORDER-определяет наличие рамок у фрейма. Возможные значения:

Yes -отображать рамки;

No или 0-не отображать рамки;

Внимание !!!!!-Браузеры Netscape не поддерживают данный параметр и для определения ширины рамок используйте атрибут BORDER тега FRAMESET.

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

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

Рассмотрим тег noframes.

Некоторые браузеры не могут отображать фреймы. И все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Тег noframes не имеет атрибутов и должен находиться внутри тега frameset.

Пример:

<html> <head> <title>Применяем фреймы </title> </head> <frameset cols= "150,*"> <noframes>Поменяй браузер, приятель.</noframes > <frame src="menu.html" > <frame src="content.html"> </frameset> </html>

Рассмотрим атрибут target (он является одним из атрибутов ссылок, так же его можно применять в тегах: BASE, AREA и FORM)

target- определяет окно(фрейм), на которое указывает гипертекстовая ссылка.

В качестве значения необходимо задать либо имя одного из существующих фреймов (например target="wind" где wind это имя фрейма. Как это применять на практике смотри в разделе практика).

Или использовать одно из следующих зарезервированных имен:

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

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

_parent -указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. То есть, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм.

_top -указывает, что документ должен отображаться во всем окне. При этом остальные фреймы уничтожаться.

Фреймы, отрицательные и положительные стороны

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

Рассмотрим положительные и отрицательные качества фреймов.

Отрицательные качества:

Недоступность материала для многих поисковых роботов
Несовместимость с разными браузерами. Некоторые браузеры не отображают фреймов вообще или отображают их некорректно.
Внутренние страницы нельзя добавить в "Избранное" (тут нужно отметить, что проделав ряд операций, все таки можно добавить в Избранное, но это доставляет некоторые неудобства). На какой бы странице не находился пользователь, адрес будет неизменным (то есть адрес сайта). И именно по этому невозможно добавить в избранное внутреннюю страницу, так как фреймы скрывают истинный адрес странички.
Иногда фреймы выглядят не очень эстетично, и портят внешний вид сайта.
Могут возникать проблемы связанные с тем, что истинный адрес странички скрыт, а пользователь не может понять, где именно он находится.
Браузер не "запоминает" или совершает не корректно перемещения по фреймам.
При попадании из вне (например, из поисковой системы) на Ваш сайт, но не на титульную страницу, то посетителю отобразится только страница для этого фрейма, а не всего сайта. (допустим не будет отображено меню сайта, и пользователь не будет знать куда ему идти дальше).
Возможны неудобства в навигации
Сайты созданные с фреймами считаться не очень солидными.

Положительные качества:

Фреймы дают экономию в объеме пересылаемых пользователю файлов
Независимость фреймов: при просмотри какого-либо фрейма другой фрейм всегда перед глазами
Удобство позиционирования материала и графический вставок
Изменение размеров областей. Можно изменять размеры фреймов "на лету", чего не позволяет сделать традиционная верстка HTML.
Быстрота в добавлении нового материала. Для добавления нового раздела придется модифицировать только один файл - файл с навигационными элементами.

Информация о документе - раздел HEAD

Как мы помним между элементом HEAD вписывается служебная информация.

Между тегами <HEAD></HEAD> можно использовать следующие элементы: TITLE, BASE, STYLE, LINK, META.

Рассмотрим каждый элемент отдельно.

TITLE – имя всего документа. Оно отображается в заголовке окна браузера.

Пример: <html> <head> <title>Заголовок документа </title> </head> <body> </body> </html>

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

HREF- определяет базовый адрес текущего документа (URL). TARGET- определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Применение этого атрибута смотри в главе о фреймах.

Рассмотрим на примере применение этого элемента:

Например, у нас задан: <base href="http://fox.com/index.html"> и элемент img: <img src="images/cool.gif">

Это приведет к формированию следующего адреса изображения http://fox.com/images/cool.gif

STYLE– используется для вставки в документ таблицы стилей. (CSS - Cascade Style Sheet). Подробнее о применение, будет в следующих выпусках. Возможные атрибуты.

TYPE- обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого параметра является "text/css". TARGET- имя создаваемой таблицы стилей. Может пригодиться, если вы собираетесь использовать несколько элементов STYLE в одном документе.

LINK– описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. В заголовке может содержаться несколько элементов LINK. Элемент не имеет конечного тэга. На текущий момент этот элемент не очень распространен.

HREF- URL объекта. REL - определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:

home - указывает главную страницу сайта. help- указывает на страницу с подсказками. index - указывает на файл, содержащий информацию для индексного поиска по текущему документу. toc, contents - указывают на файл, содержащий оглавление данного документа. stylesheet- указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. glossary- указывает на файл, содержащий перечень терминов, относящихся к текущему документу. copyright - указывает на страницу, в которой говорится о создателях сайта, авторских правах и т.п. up, parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта). child- указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта). next- указывает на следующую страницу в последовательности документов. Например в каталоге фотографий. previous- указывает на предыдущую страницу в последовательности документов. last, end - указывает на последнюю страницу в последовательности документов. first- указывает на первую страницу в последовательности документов.

TYPE - определяет MIME-тип для объекта, указанного в параметре HREF.

Пример использования: <link rel=copyright href="copyright.html">

META - используется для описания документа, которое представляет собой метаданные в виде пары : name и content. Элемент не имеет конечного тэга. С его помощью в документ вводиться информация, невидимая для пользователя, но являющейся весьма необходимой. Дополнительно о META-тегах в следующих выпусках.

NAME- определяет имя мета записи. HTTP-EQUIV - определяет имя мета записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке. CONTENT-присваивает значение мета записи, определенной в параметре NAME (или HTTP-EQUIV).

Элемент BODY

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

Рассмотрим возможные атрибуты и значения для этого элемента:

BGCOLOR – определяет цвет фона документа.Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета. Пример: <body bgcolor="#ff0000"> или <body bgcolor="RED">

BACKGROUND –определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате jpg или gif. Пример: <body background="http://fox.ru/frog/1.jpg">

TEXT –определяет цвет текста в документе. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета. Пример: <body text="#000099">

LINK – определяет цвет гиперссылок в документе (в большинстве браузеров цвет задан по умолчанию темно синим). Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета. Пример: <body link="#000099">

ALINK – определяет цвет подсветки гиперссылок в момент нажатия. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета. Пример: <body alink="#000099">

VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели. Значение задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета. Пример: <body vlink="#000099">

TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. Пример: уберем поля сверху и снизу, которые заданны по умолчанию. <body topmargin="0">

LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. Пример: уберем поля слева и справа, которые заданны по умолчанию. <body leftmargin="0">

MARGINHEIGHT – аналогичен topmargin, определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. Пример: уберем поля сверху и снизу, которые заданны по умолчанию. <body marginheight="0">

MARGINWIDTH – аналогичен leftmargin, определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. Пример: уберем поля слева и справа, которые заданны по умолчанию. <body leftmargin="0">

Внимание!!!! Что бы не кто не был в обиде, нужно задавать поля сразу для NN, и для IE. <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

Дополнительно о META-тегах

Еще раз, считаю своим долгом напомнить Вам, что мета-теги записываются непосредственно в заголовке документа между тегами <HEAD> и </HEAD>. Мета-теги несут исключительно служебную функции. Они не влияют на отображение страницы. Информация, указанная в мета-тегах используются браузером для действий, которые не предусмотрены текущей спецификацией HTML и поисковыми системами.

META - используется для описания документа, которое представляет собой метаданные в виде пары : name и content. Элемент не имеет конечного тэга. Возможные атрибуты:

NAME- определяет имя мета записи. HTTP-EQUIV - определяет имя мета записи. Практически аналогичен параметру NAME. CONTENT-присваивает значение мета записи, определенной в параметре NAME (или HTTP-EQUIV).

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

Основной синтаксис:

Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать.

Возможные значения для атрибута name.

<meta name="author" content="Имя автора"> Имя автора документа. Эта информация отображается в файле отчета поисковых машин
<meta name="keywords" content="Слово1,слово2,слово3,слово4 ..."> Этот мета-тег указывает поисковым системам ключевые слова, по которым можно найти данную страничку. Слова пишут через запятую.
<meta name="title" content="Название"> Название станицы.
<meta name="description" content="Содержание"> Краткое однострочное описание содержания документа (не сайта). Многие поисковые системы выводят эту информацию в поисковых результатах.
<meta name="copyright" content="Условия"> Условия копирования и распространения документа.

Build Classification Creation Document

Formatter Host Operator Rating

Site-languages Subject Template Version

<meta name="generator" content="Название"> Название приложения, в котором был создан документ. Данный тег вставляется практически всеми программами предназначенных для создания Веб-страниц, автоматически не спрашивая пользователя об этом. Этот тег был придуман разработчиками для рекламы собственных программных продуктов.
<meta name="robots" content="index,nofollow"> Важный мета тег! Указание индексации поисковыми роботами данного документа Можно применять следующие значения: all - индексировать всё. index - индексировать эту страницу. follow - индексировать ссылки на этой странице. none - не индексировать, игнорировать полностью. noindex - не индексировать, игнорировать эту страницу. nofollow - не индексировать ссылки на этой странице.
<meta name="document-state" content="dynamic"> Определяет единовременную либо постоянную индексацию документа поисковыми системами. Можно применять следующие значения: static - индексировать единожды. dynamic - индексировать многократно.

Теперь рассмотрим возможные значения для атрибута http-equiv.

<meta http-equiv="refresh" content="5;URL=http://www.fox.ru/frog/index.html"> Использование атрибута http-equiv со значением "refresh" позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом, что незаменимо при создании страниц, где публикуются непрерывно меняющиеся данные (скажем курсы акций). Значение элемента content в этом случае означает промежуток между обновлениями в секундах, так если оно равно нулевому значению - страница будет обновляться непрерывно.
<meta http-equiv="expires" content="Дата"> Дата, обозначающая срок годности документа, при его значении равном "0" документ будет подгружаться не из кэша а с сервера. Обязательно соблюдайте формат даты, как это делается смотри в примере. <meta http-equiv="expires" content="Thursday, 25-Sep-2003 17:58:06 GMT">
<meta http-equiv="reply-to" content="Ваш@адрес"> Адрес электронной почты указываемый в файлах отчета некоторых поисковых машин
<meta http-equiv="content-type" content="text/html; charset=windows-1251"> Описание типа и характеристик документа. Показывает тип документа и кодировку. Самый распространенный тип документа - text/html. Кодировка для документов на русском языке должна быть либо windows-1251, либо koi8-r.
<meta http-equiv="content-language content="en"> Описание языка документа.
<meta http-equiv="cache-control content="no-cache"> Контроль за кэшированием документа. Можно применять следующие значения: no-store - не сохранять. no-cache - не сохранять в кэш. public - доступен для любого кэширования. private - кэшируется в частных кэшах.
<meta http-equiv="window-target" content="_top"> Определяет способ появления новых окон браузера.
<meta http-equiv="set-cookie" content="name=имя; expires=дата; domain=имя домена;path=путь;secure"> имя - любая строка без запятых и пробелов дата - дата истечения срока хранения в формате: Sun, 25-Feb-01 12:00:01 GMT , если не задан, то cookie не сохраняется (необязательный парaметр) имя домена - домен для которого действительно значения cookie , если не задан, то тот сервер, где лежит сайт (необязательный парaметр) путь - путь к документам домена, для которого действительно значения cookie, если не задан, тогда тот каталог, где лежит сайт (необязательный парaметр) secure -указывается только тогда, когда применяется защищенный режим SSL, если не задан, тогда информация передается в обычном режиме (необязательный парaметр)

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

<<< < Предыдущая 12 / 22

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
21.03.20156.37 Mб375guide_analyst_5.2.0.pdf
#
21.09.201956.32 Кб0Hole.doc
#
11.11.2019353.79 Кб1Home Work ex. Со словами.doc
#
21.11.201951.2 Кб2hometask Our Institute.doc
#
21.03.201527.34 Mб34How To Rebuild Your Small-Block Ford.pdf
#
08.07.20191.05 Mб1HTML.doc
#
18.09.2019205.82 Кб21http://py4ki.3dn.ru/news/13-0-3 .doc
#
19.08.201969.63 Кб1HW-Present Perfect.doc
#
21.04.20192.31 Mб38IBIZI.doc
#
20.11.201965.78 Кб3IGPZS lektcii 1-3.docx
#
20.11.2019128.78 Кб8IGPZS lektcii 4-6.docx