На всякий случай, сообщу, что до этого места доходят 12% от взявшихся. Моя правая передняя лапа так и тянется к вашему рукопожатию! Продолжим?
Поговорим сегодня о цветах.
Пестики и тычинки оставим ботаникам, а сами вспомним, из чего состоит белый цвет?
Сейчас вы мне скажите, что из 7-ми цветов радуги.
- Фу, быть такими!
Мы ж вебМАСТЕРА, а не какие-нибудь зеваки-туристы, исступленно вглядывающиеся в эффекты преломления солнечного света в воздушно-капельной взвеси близ водопада!
У нас с Вами есть только 3 базовых цвета, а именно:
Красный, Зеленый и Синий. Именно так: Red Green & Blue
Вот так, всего 3 цвета. Зато, какие эти 3 цвета – каждый из них имеет 256 ступеней интенсивности от 0 до 255.
Злобные составители HTML придумали так, что мы должны говорить и писать не 255 а FF. А что это за FF? Это и есть число 255, но в шестнадцатеричной системе исчисления:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 A B C D E F
Вот, такое Безобразие… А, ведь так хорошо всё начиналось!
Ну, уж, не без ложки дегтя в бочке мёда.
Тех дяденек уже поругали и сказали, что если есть цвет, мы желаем называть по-человечески, соответственно:
черный – "black", а не "000000"
белый - white, а не "FFFFFF"
красный – red, а не "FF0000"
зеленый – green, а не "00FF00"
синий – blue, а не "0000FF"
Дяденьки добавили в язык HTML названия стандартных оттенков, которые Саня ленится выучить, потому, что давно привык к шестнадцатеричному коду.
Итак, любой оттенок цветовой гаммы HTML мы можем получить с помощью смешения этих трёх цветов.
Технология RGB (red-green-blue)
Чёрный цвет = красного 0 + Зелёного 0 + Синего 0
Белый цвет = красного 255 + Зелёного 255 + Синего 255
Желтый цвет = красного 255 + Зелёного 255 + Синего 0
Именно так выглядит описание цвета в большинстве программ, работающих с изображениями. И когда нам необходимо "попасть в цвет", например, чтобы фон страницы и фон картинки совпадали, средствами графического редактора мы можем определить код оттенка.
С помощью стандартной программы Пуск ->Программы-> Стандартные -> Калькулятор, мы можем легко перевести десятичное число в шестнадцатеричное и наоборот.
В "калькуляторе" для этого надо выбрать в меню ВИД->Инженерный, набрать нужное число и выбрать систему в которую хотим конвертировать его.
HEX – шестнадцатеричная DEC – десятичная.
Слышали про компьютерный подбор краски для автомобиля? Очень похожая задача.
Как видите, шестнадцатеричный код цветового оттенка состоит из шестизначного числа, которое надо разбить на 3 пары, чтобы его расшифровать RRGGBB
Посещая страницы с удачными цветовыми решениями, вы можете просмотреть html код этой страницы и сделать запись в любом текстовом файле для использования этой цветовой композиции на своей странице, а именно оттенок шрифта, фон основной текстовой зоны, общий фон страницы и т.д.
Уверен, что в конце этого занятия Вас вовсе не затруднит поиск оттенков в коде любой страницы.
Посмотрим на практике, как применяются цвета в тэгах.
Создайте файл 03.html и впишите туда следующий код (это с виду он большой и страшный, на самом деле он очень простой):
<html>
<head>
<title>Занятие. Цвета радуги</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<!--Так пишут коментарии, чтоб в коде не заблудиться -->
<body bgcolor="#000000"><!-- Задаём черный фон странице -->
<h1 align="center">
<font color="#FF0000">Красный </font><!-- Задаём красный цвет шрифту -->
<font color="#00FF00">Зеленый</font>
<font color="#0000FF">Синий</font>
</h1>
<p align="center">
<font color="#FFFFFF">Семь цветов радуги</font>
</p>
<p align="center">
<font color="#FF0000">Цвет FF0000</font>
<br>
<font color="#FF8000">Цвет FF0000 </font>
<br>
<font color="#FFFF00"> Цвет FFFF00</font>
<br>
<font color="#00FF00">Цвет 00FF00</font>
<br>
<font color="#00FFFF">Цвет 00FFFF</font>
<br>
<font color="#0000FF">Цвет 0000FF</font>
<br>
<font color="#FF00FF">Цвет FF00FF</font>
</p>
<h1 align="center">
<font color="#FF0000">Р</font>
<font color="#FF9900">А</font>
<font color="#FFFF00">Д</font>
<font color="#00FF00">У</font>
<font color="#00FFFF">Г</font>
<font color="#0000FF">А</font>
<font color="#FF00FF">!</font>
</h1>
</body>
</html>
Обратите внимание на синтаксис: color="#FF0000" – так положено писать, но если будет написано color=#FF0000 или color=ff0000 – любой браузер вас поймет, а я подумаю, что вы лентяй. Хотя некоторые мастера вообще в HTML намеренно не ставят кавычки по разным соображениям, в том числе и потому, что если они случайно не закрыты – возникает ошибка кода, которую очень сложно найти глазами.
А Вы заметили, что уже без труда можете разобраться в HTML коде?
Задание:
Внесите свои дополнения к коду страницы 03.html
Главное, чтобы была видна ваша индивидуальная работа с фоном и цветами, постарайтесь почувствовать как изменится оттенок, если вы вносите изменение в его код.
Например, что это за цвет?
<p align="center">
<font color="#CC0000">
темно-красный
</font>
</p>
или
#808080 – серый, не так ли? Так и запишем:
<p><font color="#808080">СЕРЫЙ</font></p>
а можно и так:
<p><font color="gray">СЕРЫЙ</font></p>
а так - НЕЛЬЗЯ!
<p><font color="#gray">СЕРЫЙ</font></p>
Решеткка (#) ставится только перед цифровым кодом цвета.
Держите подарок по теме цветов. Вместо цифрового кода можно вставлять следующие стандартные цвета:
|
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray |
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgreen
lightgrey
lightpink
lightsalmon |
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred |
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen |
Чтож, оставляю вас художничать - ваяйте страницу 03.html, красок не жалейте.
Уважаемые коллеги, пристегните ремни и воздержитесь от курения на время занятия!
Сейчас мы поговорим "О ГЛАВНОМ"
Так что же это "ГЛАВНОЕ" в HTML?
Разумеется, таблицы. Таблицы и ещё раз они же.
Фактически вся разметка веб-страницы состоит из таблиц.
Они бывают довольно сложной структуры, и вручную их сейчас никто не пишет – есть множество html-редакторов, я, например пользуюсь Macromedia MX, но многие предпочитают Front Page, т.к. он идет в комплекте пакета MS office, но нормальный, чистый код, без лишних тэгов от Microsoft, которые игнорируются браузерами и лишь засоряют Вашу страницу, значительно увеличивая её килобайты, Front Page начал создавать только в MS office 2003.
Наш курс не предусматривает использование каких-либо редакторов HTML, но Вы неизбежно придете к необходимости их использования.
Именно зная, как должен выглядеть код страницы без мусорных тэгов, вы сможете правильно выбрать свой редактор.
А сейчас, громко скажите: "Поехали!" и взмахните рукой!
Создаём файл 04.html и рисуем в нем нашу первую таблицу.
Пусть она будет состоять из 3-х столбцов и 3-х строк.
<html>
<head>
<title>Тема:"Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<!--задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы-->
<table width="700" align="center">
<tr><!-- этим тэгом мы начали первую строку будущей таблицы-->
<td><!-- этим тэгом мы начали первую ячейку первой строки-->
a1
</td><!-- этим тэгом мы закончили первую ячейку первой строки-->
<td><!-- этим тэгом мы начали ячейку первой строки-->
a2
</td><!-- впишите сами комментарий-->
<td><!-- впишите сами комментарий-->
a3
</td><!-- впишите сами комментарий-->
</tr><!-- впишите сами комментарий-->
<tr><!-- начинаем вторую строку таблицы-->
<td>b1</td> <td>b2</td> <td>b3</td>
</tr>
<tr><!-- начинаем третью строку таблицы-->
<td>c1</td><td>c2</td><td>c3</td>
</tr>
</table><!-- закончили таблицу-->
</body>
</html>
Теперь поэкспериментируем с тэгами таблицы
<table width="700" align="center">
добавим в него дополнительные параметры.
<table width="700" align="center" border="1">
Вносим изменения в наш 04.html и смотрим, что изменилось.
Увидели, как выглядит теперь наша таблица? – появился "бордюр" - назовем его так, чтобы проще запомнить название параметра border. Соответственно если border="2" или "3" и до бесконечности, то он будет только тоще и толще и это отвратительно - ужасно некрасиво. А давайте лучше изменим его цвет?
<table width="700" align="center" border="1" bordercolor="#0000FF">
Замечу, что последовательность написания параметров внутри любых тэгов HTML совершенно произвольная.
Например, можно и так:
<table bordercolor="#0000FF" align="center" border="1" width="700">
WARNING! А вот так делать не надо:
<bordercolor="#0000FF" align="center" border="1" width="700" table>
т.е. тэг <table ….> начинается с table, а не с чего-то другого.
Так , что там у нас с таблицей? Всё ещё продолжает ужасно и кошмарно выглядеть – зачем ей двойные линии какие-то?
- Линии стали двойными, потому, что браузер отобразил бордюр дважды, сначала по периметру таблицы, а потом каждую ячейку в отдельности. Дело в том, что по умолчанию, в тэге <table> подразумевается отступ от края, дабы текст, который мы туда можем вставить, не касался краёв нашей таблицы. Но в данном случае нам эта услуга не нужна, и мы отменим сейчас этот отступ:
<table width="700" align="center" border="1" bordercolor="#0000FF" cellspacing="0">
Внесите эти изменения и посмотрите, что получилось.
Да, линии жирноваты. Но вместо bordercolor мы можем использовать ещё два параметра:
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#000080" bordercolorlight="#8080FF">
Вставляем и пробуем.
Как видите, это две составляющие прежнего параметра bordercolor, получается объёмный вид у нашего бордюра. Чтоб увидеть, как это достигается, поменяйте цвета:
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FF0000" bordercolorlight="#0000FF">
Теперь вы можете визуально представить как происходит объём – краcная и синяя линии. Соответственно если bordercolordark – темный оттенок какого-либо цвета, а bordercolorlight – светлый оттенок того же цвета – у нас получится обьёмное изображение бордюра.
А если нам этого не надо, и мы желаем получить аккуратненькую таблицу с тонкими линиями – тогда присвоим одному из этих двух параметров цвет фона. В нашем случае фон белый.
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF">
или так:
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#0000FF" bordercolorlight="#FFFFFF">
Поэкспериментируйте с этими параметрами на своей страничке 04.html
А что бы нам ещё такого интересного, сделать с этим тэгом? Может подкрасим фон таблицы?
Тег <body> мы уже подкрашивали, <table> - подкрашивается точно также:
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF" bgcolor="#C1C1FF">
А теперь подкрасим первую строку таблицы синим цветом, а ячейку a3 серым:
<html>
<head>
<title>Тема "Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<!--задаем таблицу шириной 700 пикселей (точек) и располагает её посередине-->
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF" bgcolor="#C1C1FF">
<!-- задаём первую строку таблицы-->
<tr bgcolor="#0000FF"><!-- красим строку в синий цвет-->
<td><!-- этим тэгом мы начали первую ячейку первой строки-->
a1
</td><!-- этим тэгом мы закончили первую ячейку первой строки-->
<td><!-- этим тэгом мы начали ячейку первой строки-->
a2
</td><!-- впишите сами комментарий-->
<td><!-- впишите сами комментарий-->
a3
</td><!-- впишите сами комментарий-->
</tr><!-- впишите сами комментарий-->
<tr><!-- начинаем вторую строку таблицы-->
<td>b1</td>
<td bgcolor="#CCCCCC"><!-- красим ячейку в серый цвет -->
b2
</td>
<td>b3</td>
</tr>
<!-- начинаем третью строку таблицы-->
<tr><td>c1</td><td>c2</td><td>c3</td></tr>
</table><!-- закончили таблицу-->
</body>
</html>
Как поменять расположение содержимого наших ячеек?
И что это за вопрос? А вот, надо! Сами увидите.
Теперь Вы знаете про таблицы многое, но это ещё не всё!
Мы уже задали размер 700 пикселей нашей таблице.
<tr align="center"> <!—расположит содержимое всех ячеек в строке по центру -->
<tr align="right"> <!—выровняет содержимое всех ячеек в строке по правому краю -->
Тоже самое можно сделать для отдельно взятой ячейки.
<td align="center">
или
<td align="right">
Кроме параметра align есть еще и valign.
<td valign="top"> <!-- выровнять содержимое по
верхнему краю ячейки -->
<td valign="bottom"> <!-- выровнять содержимое по
нижнему краю ячейки-->
<td valign="middle"> <!--выровнять содержимое
по середине ячейки-->
Я специально употребил слово "содержимое", потому, что содержать наши таблицы будут не только текст, но и изображения и… может быть, однажды, даже встроенные внутрь одной из ячеек - другие наши таблицы.
Пора бы поработать над размерами наших ячеек.
<td width="120" height="125"> 120 точек в ширину и 125 в высоту</td>
как только мы зададим высоту ячейки, то и вся строка подрастет в высоту до её уровня, т.е. остальным ячейкам указывать этот параметр не обязательно. А вот ширину желательно будет подсчитать и внести в каждую ячейку. 120+500+80=700
Внимание! Когда перенесете идущий ниже код в 04.html и посмотрите, как изменилась таблица, вернитесь обратно и пробегитесь взглядом по коду, задавая себе вопрос – а что это мы сделали в этом тэге, а что в следующем и т.д. Задача убедиться, что Вы всё поняли, и мы можем приступать к созданию нашей главной страницы – index.html
<html>
<head>
<title>Тема "Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<!--задаем таблицу шириной 700 пикселей (точек) и
располагает её посередине-->
<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF" bgcolor="#C1C1FF"><!-- впишите сами комментарий-->
<tr align="center" bgcolor="#0000FF"> <!-- этим тэгом мы
начали первую строку будущей таблицы-->
<td valign="middle" width="125" height="120"> <!-- этим тэгом
мы начали первую ячейку первой строки ширина 125 пикселей высота 120-->
a1
</td> <!-- этим тэгом мы закончили первую ячейку первой строки-->
<td width="500" valign="bottom"><!-- этим тэгом мы начали
ячейку первой строки шириной 500 пикселей и выровняли
содержимое по низу-->
a2
</td>
<td width="80" align="left" valign="top"> <!-- впишите сами комментарий-->
a3
</td>
</tr><!-- закончили первую строку-->
<tr><!-- начали вторую строку-->
<td height="400"> b1 </td><!-- впишите сами комментарий-->
<td bgcolor="#CCCCCC">b2</td><!-- впишите сами комментарий-->
<td>b3</td>
</tr>
<!-- третья строка таблицы-->
<tr><td align="right">c1</td> <td align="center">c2</td> <td>c3</td></tr>
</table><!-- закончили таблицу-->
</body>
</html>
Надеюсь, все прошло успешно?
Очень прошу, отнестись к проделанному максимально серьёзно!
Таблицы, это основа-основ в HTML. Значительную часть этой темы мы уже знаем, но чтобы двигаться дальше, надо её хорошенько закрепить.
А можете ли вы прокомментировать все тэги и их параметры которые мы прошли?
Уверен, что можете!
Для продолжения жмем сюда>
| 
