Использование HTML-списков
Информация в виде списка позволяет разбить большие массивы данных на отдельные, четкие фрагменты информации, которые человеку гораздо удобнее воспринимать, нежели весь поток информации целиком. Списки позволяют создавать понятную и логичную внутреннюю структуру информационных данных, ориентироваться в которой-дело простое и удобное.
Нумерованные списки.
Нумерованный список часто называется упорядоченным списком и представляет собой определенную последовательность элементов. То есть, каждый последующий пункт такого списка будет на единицу больше предыдущего.
Для создания нумерованного списка используется тэг <OL> ... </OL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает специальный тэг <LI>(List Item-пункт списка или элемент списка)
<OL> <LI>Иван; <LI>Данила; <LI>Игорь</OL> | получится вот такой список:
|
Маркированные списки.
Другим распространенным способом структуризации информационных данных является создание маркированных списков. Маркированный список предоставляет собой ненумерованный или неупорядоченный (Unordered List)перечень элементов, для заголовка которых используются специальные маркеры. В качестве маркеров выступает специальные символы, называемые буллитами. Для создания маркированных списков применяется тэг <UL>...</UL> внутри которого располагаются элементы самого списка <LI>.
Например, чтобы создать вот такой список:
необходим вот такой HTML-текст: <UL> <LI>Иван; <LI>Данила; <LI>Игорь</UL> |
|
Обратите внимание: у метки <LI> нет парной закрывающей метки.
Тэг <OL> может иметь следующие параметры:
Атрибут | Функция |
TYPE = “ ”: | |
A - | большие латинские буквы (А, В, С, D, ...) |
a - | маленькие латинские буквы (а, b, с, d, ...) |
I - | большие римские цифры (І, ІІ, ІІІ, ІV,…) |
i - | маленькие римские цифры (і, іі, ііі, іv, ...) |
1 - | обычные цифры (1, 2, 3, 4,...) |
START - устанавливает число, с которого будет начинается отсчет.
Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:
<OL TYPE="I" START="8"> <LI> Восемь <LI> Девять <LI> Десять <LI> Одиннадцать <LI> Двенадцать </OL> | VIII. Восемь IX. Девять X. Десять XI. Одиннадцать XII. Двенадцать |
Параметры тэга <UL>
Тэг маркированного списка: <UL> может содержать два основных параметра: TYPE иCOMPACT. ПараметрTYPE отвечает за форму отображаемого браузером маркера. Существуют три возможных значения данного параметра:
Атрибут | Функция |
<UL TYPE=disc><LI> disc </UL> | · disc |
<UL TYPE=circle><LI> circle </UL> | o circle |
<UL TYPE=square><LI> square </UL> | § square |
Пример 3.
<html> <title> Пример </title> <body bgcolor="Red"><h1><font color="green"> Электронные услуги в здравоохранении.</h1> <font color="red"> <img src="C:Documents and SettingsAll 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 мин
Освоение практических навыков: Решение типовых и ситуационных задач.
Литература:
1. Ш.Д.Шарф HTML 3.2. Справочник-С.-ПБ.,1998.
2. Морис Б. HTML в действии-С.-ПБ., 1997
3. Гончаров М.В. Введение в Internet. Часть 7. Интернет для бизнесменов,
предпринимателей и банкиров.-М.,2001.
4. Под редакцией С.В.Симоновича. Информатика. Базовый курс.
Учебник для ВУЗов 2001, 640 с.
Перерыв - 10 мин
Совместная работа студента с преподавателем - 25 мин
После выполнения практической части работы, преподаватель проверяет правильность и последовательность действий студентов, достигли они конечного результата. Затем преподаватель проводит опрос студентов с анализом темы. Выясняет практическое его применение.
Контроль заключительного уровня знании - 20 мин
Преподаватель проводит анализ результатов практической работы студентов, выясняет осознанно ли выполнили работу. Затем студенты сдают тесты для контроля знаний.