Цветовая гамма html-документа
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY> . Вот список этих атрибутов:
Атрибут |
Функция |
bgcolor |
Определяет цвет фона документа. |
text |
Определяет цвет текста документа. |
Кроме того, метка <BODY> может включать атрибут background="[имя файла]" , который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета .
Имя |
код |
Имя |
Код |
Blaсk (черный) |
“#000000” |
Green (зеленый) |
“#008000” |
Silver (серебристый) |
“#C0C0C0” |
Lime (лимонный) |
“#00FF00” |
Gray (серый) |
“#808080” |
Olive (оливковый) |
“#808000” |
White(белый) |
“#FFFFFF” |
Yellow (желтый) |
“#FFFF00” |
Maroon (бордовый) |
“#800000” |
Navy (тёмно-синий) |
“#000080” |
Red (красный) |
“#FF0000” |
Blue (голубой) |
“#0000FF” |
Purple (фиолетовый) |
“#800080” |
Teal (темно-зелёный) |
“#008080” |
Fuchsia(фукцированный красный) |
“#FF00FF” |
Aqua (бело-голубой ) |
“#00FFFF” |
Изображения в html-документе
Как интересный журнал или проспект теряет в своей привлекательности без цветных иллюстраций, так любой HTML-документ кажется сухим и невзрачным без использования графики. Значение графических изображений в аспекте создания электронных документов нельзя переоценить: реклама и коммерческие предложения компаний и юридических лиц становятся более выразительными и яркими, иллюстрации и схемы способны превратить скучный перечень услуг или расценок в интересный информативный материал, любой художественный рассказ или произведение будет восприниматься легче и естественнее при наличии картинок или фотографий.
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="имя файла"> Здесь слово IMG (Image) означает изображение, а параметр
SRC (Source)-источник.
<IMG SRC="picture.gif">
В качестве источника необходимо указать имя файла с изображением. Разумеется, если файл находится в другой, нежели страница, директории, то надо указать его местоположение. Изображение будет размещено в том месте на странице, где находится ярлык.Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]" , например: <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif . Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя .
Параметры HSPACE и VSPACE- определяет размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений-в пикселях. По умолчанию, значения обоих типов отступа равно нулю.
Параметры тэга <IMG> может включать следующие атрибуты:
Атрибут |
Функция |
SRC= “файл” |
Указание пути к встраиваемому изображению |
BORDER= “n” |
Указание рамки рисунка |
WIDTH=n(%) |
Определение ширины изображения |
HEIGHT=n(%) |
Определение высоты изображения |
ALIGN |
Указание типа выравнивания рисунка |
HSPACE=n |
Определение горизонтального отступа между рисунком и текстом |
VSPACE=n |
Определение вертикального отступа между рисунком и текстом |
ALT |
Указание альтернативного текста |
TITLE |
Создание информационной подсказки к изображению |
Пример 3.
<html> <title> Пример </title> <body bgcolor="Red"><h1><font color="green"> Электронные услуги в здравоохранении.</h1> <font color="red"> <img src="C:\Documents and Settings\All Users\Документы\Мои рисунки\Образцы рисунков\Закат.jpg" align="left" border="1" width=50% ><нspace="20" vspace="20"><b>Базовые услуги Электронного правительства в соответствие с основными сферами жизнедеятельности граждан. </b></br></BODY></html> |
|
Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так: <BODY BACKGROUND="images.gif"> Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь.
Таблицы
Одним из наиболее мощных и гибких средств представления информационных данных в HTML по праву являются таблицы. В HTML таблицы являются не только удобным средством структурирования информации. Сегодня таблица становиться основой большинство электронных документов, структура которых может включать самые разнообразные элементы HTML.
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Любая таблица состоит из ряда (тэг-контейнер <TR>…</TR>, Table Row), содержащего определенное количество ячеек (тэг-контейнер <TD>…<TD>, Table Data). Тэг <TD> предназначен для указания данных в таблице, а для размещения заголовков в ячейке используется тэг <TH>…</TH> (Table Header).
Метка <TABLE> может включать несколько атрибутов:
Атрибут |
Функция |
ALIGN |
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
WIDTH
|
Ширина таблицы. Ее можно задать в пикселях (например, WIDTH= “400”) или в процентах от ширины страницы (например, WIDTH= “80%” ). |
BORDER |
Устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER= “4”). Если атрибут не установлен, таблица показывается без рамки. |
CELLSPACING |
Устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING= “2”). |
CELLPADDING
|
Устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING= “10”). |
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
Атрибут |
Функция |
ALIGN
|
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо). |
VALIGN
|
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=CENTER (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю). |
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
Атрибут |
Функция |
NOWRAP |
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
COLSPAN |
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN= “3” означает, что ячейка простирается на три колонки. |
ROWSPAN |
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN= “2” означает, что ячейка занимает две строки. |
WIDTH |
Устанавливает ширину ячейки в пикселях (например, WIDTH= “200”). |
HEIGHT |
Устанавливает высоту ячейки в пикселях (например, HEIGHT= “40”). |
BORDERCOLOR="#FFFFFF" |
Определяет цвет рамки #FFFFFF-белый цвет |
BACKGROUND="image.gif" |
Фоновая картинка таблицы. |
Пример 4.
<HTML>
<HEAD>
<TITLE>Пример
</TITLE>
</HEAD>
<body bgcolor="#FFFFFF" Text="black" Link="#00FF00" Alink="#00FF00" Vlink="blue" Lftmargin="40" Rightmargin="40" Marginwidth="40">
<table align="center" border="3" cellspacing="0" cellpadding="5" width="80%" Height="150">
<tr Align="center" bgcolor="#CECECE">
<th Colspan="2"> <i><b><h1>Казахский Национальный Медицинский Университет
им. С.Д. Асфендиярова</h1></i></b></th>
</tr>
<tr>
<td align="center" rowspan="5"><i><b><h1>Факультеты </h1></i></b></td>
<td align="center">лечебный</td>
</tr>
<tr>
<td align="center">педиатрический </td>
</tr>
<tr>
<td align="center"> медико-профилактическое дело</td>
</tr>
<tr>
<td align="center">стоматологический</td>
</tr>
<tr>
<td align="center">фармацевтический</td>
</tr>
</table></ body></html
Перерыв - 10 мин
Методы обучения и преподавания: информационные технологии обучения.
Методы контроля формируемых на занятии компетенций:
решение ситуационных задач (студент должен выполнить индивидуальное задание для получения определенных навыков по решению типовых задач);
коммуникативные навыки оцениваются с помощью оценочного листа.
Самостоятельная работа студентов - 50 мин
Освоение практических навыков: Решение типовых и ситуационных задач.
Литература:
Ш.Д.Шарф HTML 3.2. Справочник-С.-ПБ.,1998.
Морис Б. HTML в действии-С.-ПБ., 1997
Гончаров М.В. Введение в Internet. Часть 7. Интернет для бизнесменов,
предпринимателей и банкиров.-М.,2001.
Под редакцией С.В.Симоновича. Информатика. Базовый курс.
Учебник для ВУЗов 2001, 640 с.
Перерыв - 10 мин
Совместная работа студента с преподавателем - 25 мин
После выполнения практической части работы, преподаватель проверяет правильность и последовательность действий студентов, достигли они конечного результата. Затем преподаватель проводит опрос студентов с анализом темы. Выясняет практическое его применение.
Контроль заключительного уровня знании - 20 мин
Преподаватель проводит анализ результатов практической работы студентов, выясняет осознанно ли выполнили работу. Затем студенты сдают тесты для контроля знаний.
Контроль
Вопросы:
Какие возможности предоставляет служба World Wide Web?
Какой формат у Web-документов? Какая разница между ними и обычными текстовыми документами?
Что называют браузером? Какую функцию он выполняет?
Как устроена страница в Internet.
Что такое гипертекстовый язык.
Как создать MS Internet Explorer Web–страницу?
Как сохранить документ на Internet Explorer?
Структура HTML-документа.
Какие тэги включаются при оформлении заголовка HTML-документа.
Назовите правила оформления текстовой информации.
Назовите правила оформления списков.
Назовите правила оформления рисунков.
Назовите правила оформления таблиц.
Тесты: См. Сборник тестовых заданий по «Информатике», тема «Основы языка HTML»
Общая оценка знаний - 5 мин
Преподаватель анализирует компетенций: знаний, коммуникативные навыки по данной теме, проводит разбор общих ошибок допущенных студентами при выполнении заданий. Затем преподаватель анализирует достижения и недостатки студента с выставлением итоговой оценки в журнал по трем параметрам (за знания, коммуникативные навыки).
Стр.
Подготовили: Жусипбекова Ш.Е. Рахимбаева Г.С.