4.2.Контрольные вопросы
1.Основные атрибуты CSS для форматирования.
2.Атрибуты CSS для управления шрифтами.
3.Свойства CSS для управления видом текста.
4.Опций CSS для определения цвета фона и текста.
4.3.Контрольные задания
1.Отформатируйте произвольный фрагмент текста, состоящий из 3 абзацев в соответствии с вариантом.
|
|
|
Варианты |
|
|
|
|
|
|
|
|
|
|
|
1 |
2 |
3 |
4 |
5 |
6 |
|
Отступ первой |
Отступ первой |
Отступ первой |
Отступ сверху и |
Рамка вокруг |
Вертикальную |
|
строки в 15 мм, |
строки на |
строки на |
снизу абзаца, |
текстового блока, |
линию справа от |
1 абзац |
выравнивание |
расстояние, равное |
расстояние на 10 % |
выравнивание текста |
оформленная стилем, |
текста, задав ее тип, |
текста по ширине, |
10 % открытого окна |
превышающее |
по центру, цвет |
создающим эффект |
толщину и цвет |
|
|
цвет желтый |
браузера, шрифтом |
размер шрифта |
розовый |
выпуклости |
|
|
|
типа Courier |
абзаца |
|
|
|
|
|
|
|
|
|
|
|
перечеркнутый |
Мигание текста, |
Все слова текста |
Все буквы |
Шрифт размером |
Шрифт текста типа |
|
полужирный |
шрифт размером |
начинать с |
прописные, |
22 pt красный цвет, |
Times New Roman, |
2 абзац |
шрифт, |
14 pt, цвет синий, |
прописных букв, |
наклонный шрифт |
полужирный |
размер шрифта |
размер12 pt, цвет |
подчеркнутый |
шрифт текста типа |
зеленого цвета |
|
большого базового |
|
|
красный |
|
Arial, курсив, |
размером 20 pt |
|
размера, нормальной |
|
|
|
размер18 pt |
|
|
жирности |
|
Выровнять по |
Выровнять по |
Выровнять по |
Выровнять по |
Выровнять по |
Выровнять по |
3 абзац |
центру, расстояние |
правому краю, |
левому, расстояние |
ширине, расстояние |
правому краю, |
центру, расстояние |
|
между буквами |
расстояние между |
между буквами |
между словами |
расстояние между |
между словами |
|
10 мм |
словами 10 мм |
15 мм |
20 мм |
буквами 5 мм |
30 мм |
2. Оформите фон сайта, используя фоновый рисунок, который прокручивается вместе с документом.
56
Лабораторная работа № 5
ГИПЕРССЫЛКИ И ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ
Цель работы: научиться использовать статические и динамические графические изображения в WWW-документах; научиться реализовывать связи между гипертекстовыми файлами и ссылки на точки внутри HTML-документа.
Методические указания
При рассмотрении понятия «ссылка» следует выделить две ее составляющие части: место размещения ссылки в документе (элемент привязки, или якорь) и направление перехода по данной ссылке (адрес ссылки).
В качестве элементов привязки могут выступать: слова, группы слов (текстовые элементы) или изображения (графические элементы).
Текстовые элементы привязки обычно выделяются цветом и подчеркиваются, графические элементы (изображения) не подчеркиваются и не выделяются цветом, но часто обводятся рамкой. К графическим элементам привязки относятся маркеры, пиктограммы, реклама и др.
Ссылки на URL (адрес Web-страницы) подразделяются на относительные и абсолютные.
Относительной ссылкой называют путь к файлу относительно корневого каталога узла.
Абсолютная ссылка − это полный путь к файлу с указанием доменного адреса узла и пути к файлу на данном узле.
За организацию ссылок в языке HTML отвечает тег < А >< /а >, который чаще всего использует следующий шаблон:
•Произвольный текст <А href= "Адрес ссылки"> текст для щелчка по нем мышью < /а >.
•Атрибут href тега <А> может указывать на метку внутри страницы (внутренние ссылки), файл на локальном диске или ресурс Internet.
Организация внутренних ссылок, ссылок на закладку, позволяющая
57
осуществлять переход внутри текущей страницы, выполняется в два этапа: а) сначала в нужных местах Web-страницы устанавливается метка
<А пате = "Метка" > < /а>;
б) на втором этапе определяется ссылка на метку по следующему шаблону: Текст подсказки <А href' = "#Метка"> текст для щелчка </а>.
Если в качестве адреса ссылки должно быть размещено указание на файл на локальном диске, то атрибут href принимает значение вида
href= "file: //Диск: \ Путь к файлу".
Общий шаблон атрибута href: href= "URL" или href = "Протокол: // Адрес ссылки".
Для обеспечения доступа к различным протоколам используются схемы доступа, представленные в табл. 5.1.
|
Таблица 5.1 |
|
|
|
|
Обозначение ресурса |
Название ресурса |
|
|
|
|
ftp |
Доступ к архивам файлов при помощи протокола |
|
|
|
|
Gather |
Доступ к системе Gopher |
|
http |
Доступ к WWW |
|
mailto |
Отправка сообщения по электронной почте |
|
news |
Доступ к новостям USENET |
|
|
|
|
telnet |
Подключение к протоколу telnet |
|
|
|
|
wais |
Подключение к системе поиска WAIS |
|
|
|
|
Приведем насколько примеров записи тега < А > < /а >. Пример 1. Организация гиперссылки на Web-страницу: <A href= "http: //www.bspu.unibel.by" > БНТУ </а>
Пример 2. Формирование ссылки для отправки сообщения по электронной почте:
<A href= "mailto: me@mycomp.com" > Пишите < а/ >
Пример 3. Ссылка на раздел новостей USENET:
<A href = "news: news.newusers.questions" > Новости < /а >
58
Добавление изображений
Для хранения изображений используются десятки различных форматов: gif, jpeg, pcx, png, wmf, bmp и др. Однако для работы с изображениями в документах HTML обычно выбирают форматы, которые распознаются браузерами gif, jpg, png . Для вставки изображения используется тег < Img > с атрибутом src, который указывает URL графического файла
< Img src = "URL">
Тег < IMG > использует атрибуты, значения которых имеют большую важность при размещении изображения на Web-странице. Основные атрибуты тега < Img > представлены в табл. 5.2.
Название
атрибута
Align
Height
Width
Border
Vspace
Hspace
Таблица 5.2
Назначение /значение атрибута Выравнивание текста по:
top – верхнему краю изображения middle – средней части изображения bottom – нижнему краю изображения
left – показывает изображение слева
right – показывает изображение в правой части окна Указывает высоту изображения в пикселях или процентах Указывает ширину изображения в пикселях или процентах Присваивает значение ширины рамки в пикселях вокруг изображения Расширяет свободное пространство в пикселях вокруг
изображения по вертикали Расширяет свободное пространство в пикселях вокруг изображения по горизонтали
Пример 4. Выведите на Web-странице стандартную вставку для Windows из файла Облака.bmp по середине страницы высотой 250 пикселей, шириной 200
59