Форматирование HTML-документа

К форматированию документа можно отнести изменение внешнего вида документа: форматирование страницы, разбиение текста на абзацы, выделение заголовков, форматирование символов и др.

Настройка внешнего вида страницы

Задавая параметры у тега < BODY>, можно изменять внешний вид всей web-странички.

Тег < BODY> может иметь следующие параметры:

· bgcolor – задает цвет фона страницы;

· text – задает цвет текста всей страницы по умолчанию;

· link, vlink, alink – задает цвет ссылки, еще не посещенной, уже посещенной, активной (в момент нажатия на нее) соответственно;

· background – задает фоновый рисунок страницы;

· leftmargin, rightmargin, topmargin, bottommargin – задают левое, правое, верхнее и нижнее поля страницы соответственно (в пикселях, px).

Задание цвета фона и текста странички

Цвет можно задавать тремя способами:

1. Через английский эквивалент названия цвета. Например, < BODY bgcolor=″ red″ >

2. Через RGB-формат ″ #XXXXXX ″, где X – это число от 0 до F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара – за насыщенность зеленого, третья пара – синего. Например, < BODY bgcolor=″ #FF0000″ >

3. Через RGB-формат rgb(Х, Х, Х), где Х – это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая – за насыщенность зеленого, третья – синего.
Например, < BODY bgcolor=rgb(255, 0, 0) >

Для задания цвета фона и текста используйте параметры тега < BODY> – bgcolor и text:

< BODY bgcolor=″ #D2B48C″ text=″ darkgreen″ >

Примечание. Основные оттенки цветов web-палитры можно посмотреть в Приложении 1 «Web-палитра цветов».

Задание фонового рисунка

Фон страницы можно сделать не одним цветом, а текстурой. Текстура – это небольшое изображение, которым «мостят» фон, т. е. оно многократно копируется как по вертикали, так и по горизонтали. Для создания текстур обычно применяют специальные графические редакторы, в которых есть инструменты создания текстур – текстуризаторы. Однако можно создать текстуру с помощью простых редакторов и инструментов, соблюдая следующие правила:

· Рисунок не должен быть очень контрастным, т. е. пестрым.

· Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».

· Если рисунок яркий, то шрифт документа должен быть темным, и наоборот.

· Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.

Текстурный рисунок должен быть сохранен в формате GIF или JPG, после чего в параметре background тега < BODY> нужно указать путь к фоновому рисунку:

Путь к рисунку указывается в зависимости от его расположения:

1. если рисунок лежит в том же каталоге (директории, папке), в которой лежит и HTML-документ, то путь к ней будет выглядеть так: < BODY background=″ fon.gif″ >

2. если рисунок лежит в поддиректории (например, “images”), то путь к ней будет выглядеть так: < BODY background=″ images/fon.gif″ >

3. если рисунок лежит на уровень выше, а документ находится в поддиректории, то путь к ней будет выглядеть так: < BODY background=″../fon.gif″ >

4. если рисунок лежит на другом сайте, то путь прописывается полностью:

< BODY background=″ http: //www.mypage/images/fon.gif″ >

Задание полей странички

Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например, < BODY leftmagin=″ 100″ topmargin=″ 40″ >

Задание 1.2. Отформатируйте вашу первую страничку. После выполнения каждого пункта просмотрите изменения странички в браузере.

1. Задайте желтовато-коричневый цвет фона и темно-зеленый цвет текста. Используйте параметры тега < BODY> – bgcolor и text, для задания цвета фона используйте английский эквивалент названия цвета, а для цвета текста – RGB-формат;

2. В графическом редакторе «Paint» создайте простейший фоновый рисунок. Сохраните его в папку, где находится ваша страничка под именем fon.jpg. Для тега < BODY> задайте параметр background.

3. Установите поля страницы: левое – 100 пикселей, правое – 80 пикселей, верхнее и нижнее – 50 пикселей.

Форматирование символов в HTML-документе

Физическое форматирование символов

Для физического форматирования используются следующие теги:

· < B> < /B> – полужирный шрифт

· < I> < /I> – курсив

· < U> < /U> – подчеркнутый

· < S> < /S> – выделение перечеркиванием

· < TT> < /TT> – текст отображается шрифтом фиксированной ширины (чаще всего шрифт Courier)

· < BIG> < /BIG> – текст отображается больше, чем основной шрифт

· < SMALL> < /SMALL> – текст отображается меньше, чем основной шрифт

· < SUB> < /SUB> – нижний индекс

· < SUP> < /SUP> – верхний индекс

Примечание. Обратите внимание, что при использовании комбинации парных тегов следует быть внимательным с порядком их расположения. Последовательность закрывающих тегов должна быть «зеркальной» по отношению к последовательности открывающих тегов. То есть, если первым из открывающих тегов стоит < B>, а затем < I>, то сначала следует написать тег < /I>, а затем уже < /B>.

Работа со шрифтом

Некоторые теги вообще не имеет смысла применять без атрибутов. К таким тегам можно отнести тег < FONT> < /FONT>.

Тег < FONT> применяется при работе со шрифтом и имеет следующие параметры:

· size – задает размер шрифта (задается в пунктах; по умолчанию равен 3);

· face – задает тип шрифта. Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя – в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, в противном случае пользователь увидит текст иначе, чем вы. К стандартным шрифтам можно отнести шрифты, поставляемые с Windows, MS Office;

· color – задает цвет шрифта. Способы задания цвета см. ранее.

Специальные символы

Некоторые символы невозможно просто набрать с клавиатуры: это буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML-документ, могут быть неверно поняты браузером: например, символы «< » и «> » используются браузером для указания тегов и, возможно, могут быть интерпретированы только так.

Вместо символов этой группы необходимо использовать замену. Например, символ « < » - замена & lt; символ « > » - замена & gt;

Примечание. Полную таблицу специальных символов можно посмотреть в Приложении 2 «Таблица замены специальных символов».

Создание бегущей строки

Текст абзаца можно сделать «движущимся», т. е. оформить его в виде бегущей строки. Для этого используйте тег < MARQUEE>..< /MARQUEE>

Тег < MARQUEE> имеет следующие параметры:

· bgcolor – задает цвет фона;

· height – задает высоту фоновой полосы (в пикселях или процентах от высоты окна бруазера);

· width – ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера;

· direction – задает направление бегущей строки ( left – справа налево (используется по умолчанию), right – слева направо, up – снизу вверх, down – сверху вниз);

· behavior – управляет поведением бегущей строки ( scroll – дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны, slide – строка, достигнув края окна, останавливается, alternate – строка, достигнув противоположного края окна, меняет свое направление);

· hspace, vspace – задает горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях);

· loop – задает количество переходов строки по экрану;

· scrollamount – задает скорость движения строки (в пикселях в секунду);

· scrolldelay – определяет временной интервал (в миллисекундах) между шагами.

Форматирование абзацев в HTML-документе

Параграфы

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

Тег < P> имеет следующие параметры:

· title – краткое описание параграфа (всплывает в виде подсказки при наведении на текст параграфа);

· align – задает выравнивание абзаца ( сenter – по центру, left – по левому краю, right – по правому краю, justify – по ширине экрана).

Заголовок

Большинство документов имеют заголовок. Для его создания используют теги < Hx> < /Hx>, где x – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок соответствующего уровня.

⇐ Предыдущая1234567Следующая ⇒

Поделиться: