- •4. Цель занятия: Изучить практические умения и навыки по созданию Web–страниц, а также изучить наиболее важные понятия и вопросы программирования в среде Іnternet.
- •8. Вопросы самопроверки :
- •9. Литература
- •10. Информационно-дидактический блок (аннотация, пособия) Основы html-документа.
- •Форматирование текста.
- •Тэги физического форматирования
- •Маркированные списки.
- •Цветовая гамма html-документа.
- •Изображения в html-документе.
Цветовая гамма html-документа.
Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY> . Вот список этих атрибутов:
Атрибут |
Функция |
BGCOLOR |
Определяет цвет фона документа. |
TEXT |
Определяет цвет текста документа. |
LІNK |
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке. |
VLІNK |
Определяет цвет ссылки на документ, который уже был просмотрен ранее. |
ALІNK
|
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке. |
BACKGROUND |
background="[имя файла]" , который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif ) или JPEG (файл с расширением *.jpg или *.jpeg ). Например: <body bgcolor=lіghtyellow text=red lіnk=purple vlіnk=maroon alіnk=fuschіa background="face.jpg"> |
Кроме того, метка <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.
Таблица начинается с метки <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" |
Фоновая картинка таблицы. |
Пример 3.
<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>