Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроение (уроки по HTML, PHP, MySQL, веб-дизайну)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку ""Свой сайт - это просто! Создание, продвижение, SEO"" на которую и рекомендуем вам подписаться.

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

←   Апрель 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
tmorozova.ru

Статистика

17.902 подписчиков
-41 за неделю
←   Все выпуски   →

Сайтостроение (уроки по HTML, PHP, mySQL , WEB-дизайн)


Информационный Канал Subscribe.Ru - www.lycos.ru

Сайтостроение. Основы HTML. Уроки с сайта http://progs.biz

Рассылка №7

Основы HTML. Урок 19. Параметры тега <BODY>.
Основы HTML. Урок 20. Работа со шрифтами.
Полные версии уроков (с картинками) можно найти по адресам
Урок 19. Параметры тега <BODY>.
Урок 20. Работа со шрифтами.

HTML. Урок 19. Параметры тега <BODY>

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

Начнем с использования на WEB-страничке некоторого изображения в качестве фона. Для этого подготовьте любое изображение в формате *.gif (предпочтительнее использовать именно этот формат, хотя возможны варианты и с другими). Пусть для определенности этот файл называется bg.gif и его размер 80 на 80 пикселов.

Добавьте для тега <body> вашей WEB-странички параметр background:

<html>
<body background="bg.gif">
<p>Добро пожаловать на ...</p>
</body>
</html>

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

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

А вот так можно изменить цвет фона (в данном случае на серый):

<html>
<body bgcolor="#c0c0c0">
<p>Добро пожаловать на ...</p>
</body>
</html>

В браузере данная страничка будет иметь серый фон.

Здесь цвет фона задается в шестнадцатеричном виде. Каждая из компонент (красная, зеленая и синяя меняются от 0 до 255 (или, в шестнадцатеричном виде, от 0 до FF)). Так, например, самый красный цвет будет обозначен как #FF0000, желтый - #FFFF00 и т. д.

Таким образом вы можете задавать своим WEB-страничкам картинку для фона или его цвет. Но мы задавали фон WEB-страничка в этом уроке не вполне грамотно. Представьте себе, что вы решили изменить цвет или картинку для фона на что-нибудь другое на всех страницах вашего сайта. Это что, на каждой странице менять атрибуты тега <body>? Нет, конечно, и именно здесь мы и можем применить CSS, изученные на прошлых уроках. Для этого текст нашей WEB-странички должен выглядеть приблизительно так:

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Добро пожаловать на ...</p>
</body>
</html>

Обратите внимание, что мы присоединили таблицу стилей styles.css и что в теге <body> мы никаких атрибутов не пишем.

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

body{
    background-image: url(bg.gif);
}

Здесь bg.gif - это имя файла с картинкой (у вас, возможно, оно будет другим). А если мы потом захотим избавиться от картинки-фона и просто покрасить его, например, в серый цвет, то для этого достаточно изменить файл styles.css следующим образом:

body{
    background-color: Silver;
}

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

Наверх

HTML. Урок 20. Работа со шрифтами

Для задания разных параметров шрифтов у тега <font> существует несколько параметров. Параметры, отвечающие за оформление шрифта - это color (цвет), size (размер) и face (гарнитура). Вот сразу пример использования этих параметров:

<font color="#008040" size="+2" face="Courier New">Пример текста</font>

Отобразится этот пример соответствующим цветом, размером и гарнитурой:

Пример текста

Обратите внимание на параметр size. Значение для него можно указывать как абсолютное, так и относительное. В данном случае мы написали

...size="+2" ...

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

<font color="#008040" size="2" face="Courier New">Пример текста</font>

то результат был бы совсем другим:

Пример текста

В этом случае мы используем абсолютное значение.

Разумеется, и для относительного, и для абсолютного значений можно писать не только двойку, но и любое число от 1 до 7.

Кроме того, для шрифта вы можете задать полужирное, курсивное или подчеркнутое начертание. Это мы уже обсуждали в уроке 3. Отметим только, то теги <b>, <i> считаются устаревшими. Они оставлены в стандарте HTML 4 только для совместимости. Это не означает, что браузеры сейчас их интерпретируют неправильно - нет, все отображается именно так, как и задумывалось. Но сейчас для задания тех же атрибутов для полужирного или курсивного начертания рекомендуется использовать теги <strong> и <em> соответственно. Устаревшим, кстати, считается и тег <font>, что не мешает его повсеместному распространению. Вместо него рекомендуется использовать таблицы стилей, которые мы обсуждали на прошлых уроках.

Наверх

Copyright Алексеев Игорь, 2002

Copyright сайт progs.biz, 2002

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное