6. Украшение странички. Цвета для Web-странички.

1. Повторение.

а) Какие атрибуты тега <body> для задания цвета вы знаете?
Ответ:
BGCOLOR=”…” - Определяет цвет фона ;
BACKGROUND=”…”-Определяет файл для фона;
TEXT=”…” - Задает цвет текста;
LINK=”…” - Задает цвет ссылок;
VLINK=”…” - Задает цвет ссылок, где пользователь уже побывал.

б) Какой тэг используется, чтобы изменить шрифт части текста?
Ответ: Тэг <font>

2. Цвет для Web-странички.

Константа
Значение
Цвет на экране монитора
Black
0
Черный
Blue
1
Синий
Green
2
Зеленый
Cyan
3
Сине-зеленый
Red
4
Красный
Magenta
5
Красно-синий(фиолетовый)
Brown
6
Коричневый
LightGray
7
Светло-серый
DarkGray
8
Темно-серый
LightBlue
9
Ярко-синий
LightGreen
10
Ярко-зеленый
LightCyan
11
Ярко-сине-зеленый
LightRed
12
Ярко-красный
LightMagenta
13
Ярко-красно-синий
Yellow
14
Желтый
White
15
Бклый

 

 Для цвета используем систему цветов RGB: RED – GREEN – BLUE(КРАСНЫЙ – ЗЕЛЕНЫЙ – СИНИЙ). На каждый цвет отводится 256 значений, обозначающих присутствие того или иного компонента в окончательном цвете. Максимум какого-то цвета обозначаются цифрами FF в шестнадцатеричной системе.


Например, установка цвета фона выглядит следующим образом: BGCOLOR=”#шестнадцатеричное значение”.

 Чтобы установить фон красного цвета надо использовать:
<BODY BGCOLOR=”#FF0000”>

 Для установки текста зеленого цвета используем тэг: <BODY BGCOLOR=”#00FF00”>
Далее следуют цвета:
“#0000FF” – синий цвет;

“#FFFFFF” – белый цвет;
“#000000” – черный цвет.

Используя различные комбинации этих цветов, можно получить самые разнообразные оттенки цвета. Фоном на WEB – странички может быть также какое- то изображение из файла, например, обои. Это имя указывают в атрибуте BACKGROUND = “имя файла”.

 Пример.
<body bgcolor=”FFFF00” background = “file.jpg” text=”0000ff” link=”Cyan” Vlink=”magenta”>


Действие атрибута TEXT распространяется на весь текст, кроме тех фрагментов, которые выделены тэгом
<font color=”цвет">.

3. Фрагменты теста можно также выделить шрифтом.

 

 <B> текст</B> BOLD – полужирный шрифт;
<U> текст</U> Underline - подчеркивание;
<I> текст</I> Italic - курсив.

 Изображение.

Можно также изменить высоту и ширину изображения и выполнить выравнивание.
Пример
.
<IMAGE SRC=”Members.JPG” WIDTH=155 HEIGHT=130 >
Здесь Width - ширина в пикселях, Height - высота в пикселях.

 4. Текст без изменений.

Для того, чтобы передать на страничке текст в неизменном виде, используя те же элементы форматирования, что и в оригинале, используют парные тэги <pre>текст</pre>.

 5. Списки.

Списки бывают маркированные, нумерованные и вложенные.


Парные тэги <UL>список</UL> - Начало и конец маркированного списка.
Необязательные атрибуты тэга <UL> определяют тип маркера.
<UL type = “circle”> - кружок;
<UL type =”disk”> - пустой кружок;
<UL type =”square” - квадратик.

Парные тэги <OL>список</OL> Начало и конец нумерованного списка.
Необязательные атрибуты тэга <OL> определяют тип нумерации.
<OL start = “n” type = “m”> Здесь N - начало нумерации, m – в кавычках пишутся буквы или цифры.
Type=”A” - Нумерация заглавными буквами(A,B,C);
Type=”a” -
Нумерация строчными буквами(a,b,c);
Type=”1”
- Нумерация арабскими цифрами(1.2.3 – эта нумерация по умолчанию).
<LI> -
строка списка.

Ниже представлен листинг странички Page13.htm ,
На Web-странице представлены различные виды шрифтов, цвет, нумерованные, маркированные и вложенные списки. В маркированный список вложен нумерованный список. Абзацы выровнены вправо и влево.

Здесь также используется Бегущая строка MARQUEE, которая подробно будет рассмотрена в следующей главе.

6. Практическая работа. Внесите аналогичные изменения и добавления в свою WEB-страничку.
<HTML><HEAD><TITLE>Вуокса</TITLE>
</HEAD>
<BODY text=#0000f0 vLink=#0c0a00 link=#0ae0a0 bgColor=#0fff00>
<H1>
<MARQUEE DIRECTION=RIGHT BGCOLOR=RED HEIGHT = 100 LOOP =3>
Поход на Вуоксу<BR><IMG SRC=flag.gif></MARQUEE>
</H1>
<FONT face=Arial color=red size=4>
<P align=left>Школьники из Санкт-Петербурга</P>
<P align=left>желают поехать на <U>Вуоксу.</U></P>

<P align=left>Там мы хотим снять видеофильм,</P>
<P align=left>осмотреть острова около</P>
<P align=left><I>Приозерска</I>,сплавиться на байдарке</P>
<P align=left>по реке Вуокса.</P></FONT>
<HR>
<P align=right>Приглашаем спонсоров,</P>
<P align=right>рекламодателей,</P>
<P align=right>активных попутчиков.</P></FONT>
<PRE> Там вас ждет:
Романтика, приключения, песни у костра.
Нас будут сопровождать повсюду:
- Дружеские беседы
- самодеятельные концерты
- веселые соревнования.

</PRE><BR>
<P><B>Мы приглашаем следующих участников:</B>
<UL>
<LI>умеющих хорошо управлять байдаркой
<LI>компанейских людей
<OL>
<LI>хороших певцов
<LI>неутомимых рассказчиков
<LI>верных друзей </LI></OL>
<LI>хорошо ориентирующихся на местности </LI></UL>
<CENTER><IMG height=150 alt="Водные просторы" src="Vuoxa.JPG" width=230></FONT>
<CENTER> <HR> <A href="Page2.html">Далее</A> </CENTER>
</CENTER>
</BODY>
</HTML>


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 На Главную портала

Только подписка гарантирует Вам оперативное получение информации о новинках данного раздела

 

Желтые стр. СИРИНА - Новости - подписка через Subscribe.Ru

Copyright © КОМПАНИЯ ОТКРЫТЫХ СИСТЕМ. Все права сохраняются. Последняя редакция: августа 11, 2013 21:51:01.