Сайтостроение. Теги.

Списки

• Маркированный список:

• Первый пункт списка

• Второй пункт списка

• Третий пункт списка

• Атрибут TYPE определяет внешний вид маркера:

• disc – закрашенные круглые маркеры (по умолчанию); circle – не закрашенные круглые маркеры; square – квадратные маркеры.
• disc – закрашенные круглые маркеры (по умолчанию);
• circle – не закрашенные круглые маркеры;
• square – квадратные маркеры.

Списки

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

1. Первый пункт списка

2. Второй пункт списка

3. Третий пункт списка

• Атрибут TYPE определяет вид символа списка:

• А – прописные латинские буквы ( A, B, C … ); a – строчные латинские буквы ( a, b, c … ); I – большие римские цифры ( I, II, III … ); i – маленькие римские цифры ( I, II, III … ); 1 – арабские цифры (1, 2, 3 …) – по умолчанию.
• А – прописные латинские буквы ( A, B, C … );
• a – строчные латинские буквы ( a, b, c … );
• I – большие римские цифры ( I, II, III … );
• i – маленькие римские цифры ( I, II, III … );
• 1 – арабские цифры (1, 2, 3 …) – по умолчанию.
• START=n – начальное значение списка.

Г ипер с с ы лки

Гипертекстовая ссылка – основной элемент всех

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

Задается тегами , обязательно наличие одного из атрибутов HREF и NAME .

Ссылка за пределы данного документа:

Текст для щелчка Атрибут NAME позволяет перейти к отмеченному якорем

месту этого же документа:

Текст для щелчка

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

• - элемент для создания ссылки на графический

файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи

атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в

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

Необходимым атрибутом является src - указатель на

файл графики:

• src="Ссылка на файл".
• Например:

- обычный рисунок

" width="640"

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

• Атрибуты тега
• HEIGTH - длина
• WIDTH - ширина
• ALIGN - позиционирование на экране ( top , middle , bottom , left , right )
• BORDER - толщина обрамления
• VSPACE - размер пустого пространства над и под изображением
• HSPACE - размер пустого пространства слева и справа от изображения

SRC=“URL” ALT=“ Текст ” HEIGTH =“ длина ”

- горизонтальная линия (по умолчанию объемная с тенью) позволяет разделить длинный формально неограниченный текст на отдельные разделы. Атрибуты: SIZE – толщина линии в пикселях; SIZE – толщина линии в пикселях; WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера; WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера; ALIGN – положение на экране (слева, справа, по центру); ALIGN – положение на экране (слева, справа, по центру); NOSHADE – линия представляется простой однотонной темной полосой. NOSHADE – линия представляется простой однотонной темной полосой. " width="640"

Горизонтальная линия

• HR - горизонтальная линия (по умолчанию

объемная с тенью) позволяет разделить длинный формально неограниченный текст на отдельные разделы.

• Атрибуты:

• SIZE – толщина линии в пикселях;
• SIZE – толщина линии в пикселях;

• WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера;
• WIDTH – ширина линии в пикселях или в процентах от ширины окна браузера;

• ALIGN – положение на экране (слева, справа, по центру);
• ALIGN – положение на экране (слева, справа, по центру);

• NOSHADE – линия представляется простой однотонной темной полосой.
• NOSHADE – линия представляется простой однотонной темной полосой.

Внимание!!! MARQUEE MARQUEE src=“ Велосипедист. gif” MARQUEE Атрибуты: ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE, ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE, нижней BOTTON области бегущей строки; BEHAVIOR – управление бегущей строки на экране: BEHAVIOR – управление бегущей строки на экране: SCROLL – текст пересекает экран (по умолчанию); SLIDE – текст выдвигается на экран и останавливается; ALTERNATE – текст выдвигается, затем перемещается взад-вперед. BGCOLOR – цвет фона; DIRECTION – направление движения текста ( LEFT, RIGHT ); HEIGHT – высота в пикселях или в %; WIDTH – ширина в пикселях или в %; LOOP – количество проходов бегущей строки; SCROLLAMOUNT – скорость перемещения текста (1 – min , 2000- max ); SCROLLDELAY – время в млс для перерисовки текста. SCROLL – текст пересекает экран (по умолчанию); SLIDE – текст выдвигается на экран и останавливается; ALTERNATE – текст выдвигается, затем перемещается взад-вперед. SCROLL – текст пересекает экран (по умолчанию); SLIDE – текст выдвигается на экран и останавливается; ALTERNATE – текст выдвигается, затем перемещается взад-вперед. BGCOLOR – цвет фона; DIRECTION – направление движения текста ( LEFT, RIGHT ); HEIGHT – высота в пикселях или в %; WIDTH – ширина в пикселях или в %; LOOP – количество проходов бегущей строки; SCROLLAMOUNT – скорость перемещения текста (1 – min , 2000- max ); SCROLLDELAY – время в млс для перерисовки текста. " width="640"

Бегущая строка MARQUEE WIDTH =200 BGCOLOR = #99ccff Внимание!!! MARQUEE

MARQUEE src=“ Велосипедист. gif” MARQUEE

• Атрибуты:

• ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE,
• ALIGN – позволяет разместить текст в верхней TOP, средней MIDDLE,

нижней BOTTON области бегущей строки;

• BEHAVIOR – управление бегущей строки на экране:
• BEHAVIOR – управление бегущей строки на экране:

• SCROLL – текст пересекает экран (по умолчанию); SLIDE – текст выдвигается на экран и останавливается; ALTERNATE – текст выдвигается, затем перемещается взад-вперед. BGCOLOR – цвет фона; DIRECTION – направление движения текста ( LEFT, RIGHT ); HEIGHT – высота в пикселях или в %; WIDTH – ширина в пикселях или в %; LOOP – количество проходов бегущей строки; SCROLLAMOUNT – скорость перемещения текста (1 – min , 2000- max ); SCROLLDELAY – время в млс для перерисовки текста.
• SCROLL – текст пересекает экран (по умолчанию); SLIDE – текст выдвигается на экран и останавливается; ALTERNATE – текст выдвигается, затем перемещается взад-вперед.
• SCROLL – текст пересекает экран (по умолчанию);
• SLIDE – текст выдвигается на экран и останавливается;
• ALTERNATE – текст выдвигается, затем перемещается взад-вперед.
• BGCOLOR – цвет фона;
• DIRECTION – направление движения текста ( LEFT, RIGHT );
• HEIGHT – высота в пикселях или в %;
• WIDTH – ширина в пикселях или в %;
• LOOP – количество проходов бегущей строки;
• SCROLLAMOUNT – скорость перемещения текста (1 – min , 2000- max );
• SCROLLDELAY – время в млс для перерисовки текста.

bgcolor - цвет bgcolor=“green” bgcolor=“#00FF00” " width="640"

Фон

• Атрибуты тега BODY
• bgcolor - цвет

bgcolor=“green”

bgcolor=“#00FF00”

BACKGROUND – задает графическое изображение, которое, как кафельная плитка, заполнит фон документа. BACKGROUND =“путь_имя_файла.jpeg” TOPMARGIN – верхняя граница в пикселях; BOTTOMMARGIN – нижняя граница в пикселях; LEFTMARGIN – левая граница в пикселях; RIGHTMARGIN – правая граница в пикселях. LINK - цвет гиперссылки; ALINK – цвет активной гиперссылки. " width="640"

Фон

• Атрибуты тега BODY
• BACKGROUND – задает графическое изображение, которое, как кафельная плитка, заполнит фон документа.

BACKGROUND =“путь_имя_файла.jpeg”

• TOPMARGIN – верхняя граница в пикселях;
• BOTTOMMARGIN – нижняя граница в пикселях;
• LEFTMARGIN – левая граница в пикселях;
• RIGHTMARGIN – правая граница в пикселях.
• LINK - цвет гиперссылки;
• ALINK – цвет активной гиперссылки.

Т а б ли ц ы

• Таблицы являются очень удобным средством форматирования данных на

Web-станице. Они позволяют решать чисто дизайнерские задачи:

выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением.

• При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в с строке TD.

• - внешний элемент таблицы
• Подпись таблицы
• - элемент, задающий строку таблицы
• - элемент, задающий ячейку таблицы

• - столбец таблицы Например:

Таблица из 2 строк, в первой строке - 2 ячейки, во втрой – 3.

1.1	1.2
2.1	2.2	2.3

Таблицы

• ALIGN – выравнивание (LEFT, RIGHT, CENTER);
• BORDER – толщина границы (BORDER=3);
• BACKGROUND – фоновое изображение для всей таблицы;
• BGCOLOR – фоновый цвет;
• BORDERCOLOR – цвет рамки;
• CELLPADDING – расстояние от границ ячейки до ее содержимого;
• CELLSPACING – расстояние между ячейками в пикселах;
• HSPACE – свободное пространство от таблицы слева и справа;
• SPACE - свободное пространство от таблицы снизу и сверху;
• COLSPEC – столбцы фиксированной ширины в символах или в процентах;
• WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%) .

Таблицы

• ALIGN – выравнивание (LEFT, RIGHT, CENTER);
• BORDER – толщина границы (BORDER=3);
• BACKGROUND – фоновое изображение для всей таблицы;
• BGCOLOR – фоновый цвет;
• BORDERCOLOR – цвет рамки;
• CELLPADDING – расстояние от границ ячейки до ее содержимого;
• CELLSPACING – расстояние между ячейками в пикселах;
• HSPACE – свободное пространство от таблицы слева и справа;
• SPACE - свободное пространство от таблицы снизу и сверху;
• COLSPEC – столбцы фиксированной ширины в символах или в процентах;
• WIDTH – ширина таблицы в пикселах или в процентах от текущей ширины окна браузера (WIDTH=256, WIDTH=100%) .

Вопросы и задания

• Что понимается под публикацией Web-сайта?
• Какие цели может преследовать автор Web-сайта?
• Что такое HTML?

• С помощью каких программных средств можно создавать Web-страницы?

• Какова роль гиперссылок на Web-страницах?

• Предложите ряд тем для Web-сайтов, которые бы, с вашей точки зрения, могли иметь общественный

интерес?

Выполните все задания по ссылке http://mif.vspu.ru/books/html123/