Дескрипторы логических стилей.
| Дескриптор | Описание |
| <EM> | Выделенный текст( обычно курсивом) |
| <STRONG> | Сильно выделенный текст |
| <CITE> | Текст в виде цитаты |
| <CODE> | Текст, представляющий собой фрагмент HTML-кода |
| <DFN> | Текст, представляющий собой определение |
| <SAMP> | Текст, представляющий собой фрагмент кода |
| <KBD> | Текст, представляющий собой название клавиши |
| <VAR> | Текст, определяющий переменную или значение |
Для демонстрации назначения этих дескрипторов учащимся можно демонстрировать Web –страницы следующей структуры.
<HTML>
<TITLE> Дескрипторы логических стилей</TITLE>
<BODY>
<EM> ВЫДЕЛЕННЫЙ ТЕКСТ. ДЕЙСТВИЕ АНАЛОГИЧНО<BR>
ДЕЙСТВИЮ ДЕСКРИПТОРА <CODE>” I ”</CODE> </EM><BR>
<STRONG> Можно использовать дескриптор сильного выделения текста</STRONG>
<BR><CITE> Без труда не вынешь рыбу из пруда</CITE>
<H1>Заголовок 1 уровня</H1>
<H2>Заголовок 2 уровня</H2>
<H3>Заголовок 3 уровня</H3>
<H4>Заголовок 4 уровня</H4>
<SAMP> Для выравнивания текстов по центру применяется дескриптор выравнивания ALIGN="CENTER"</SAMP>
</BODY>
</HTML>
| В структуру страницы включены также заголовки различного уровня. Внимание учащихся должно быть уделено на использование дескриптора <SAMP>. В случае представление примеров в формате НТМL необходимо использовать этот дескриптор. Так же сравните дескрипторы <EM> и <CITE>. Они выделяют текст курсивом. В результате имеем следующую страницу. | |
| Здесь использован дескриптор <BR> для вывода текста с новой строки. С помощью элемента FONT можно определить размер и цвет шрифта. <FONT SIZE=значение>. Например, буквицу можно описать следующим образом: < FONT SIZE=7> Д<FONT SIZE=3>обро спасет < FONT SIZE=7>м <FONT SIZE=3>ир! <BR> | |
| Текст абзаца или заголовка можно выровнять по левому краю(по умолчанию), по правому краю или по центру броузера. <P ALIGN=”LEFT” –выравнивание влево, <P ALIGN=”RIGHT”-вправо и <P ALIGN= ”СENTER” – по центру. Пример выравнивания текстов. <P ALIGN=”LEFT”> Выравнивание влево. <P ALIGN=”CENTER”> Выравнивание по центру. <P ALIGN=”RIGHT”> Выравнивание вправо. | |
Очень часто для сохранения формата текстов набранных в других программах используется элемент <PRE>. Этот элемент удобно использовать для помещения на WEB – страницу стихов, так как для этого нужно особое расстояние между строками и по горизонтали и по вертикали.
Учащимся можно предложить поместить на WEB -страницу стихотворения С.Есенина “ C ДОБРЫМ УТРОМ!” в следующем формате.
С ДОБРЫМ УТРОМ!
Задремали звезды золотые,
Задрожало зеркало затона,
Брезжит свет на заводи речные
И румянит сетку небосклона.
Улыбнулись сонные березки,
Растрепали шелковые косы.
Шелестят зеленые сережки,
И горят серебряные росы.
У плетня заросшая крапива
Обрядилась ярким перламутром
И, качаясь, шепчет шаловливо:
“ C добрым утром!”
В теле WEB – страницы стихотворение наберем в нужном формате между <PRE> </ PRE>.
Таким образом, нет необходимости форматирования тестов с помощью дескрипторов стилей, так как можно сохранить форматы других программ, в данном случае редакторов текстов.
Очень часто при форматировании текстов в документы добавляются горизонтальные линии, котрые называются также линейками (rules). C помощью дескриптора <HR> можно создать линию с тенью, протянувшуюся вдоль окна броузера. Если пользователь изменит размер окна, то соответсвенно изменится и длина данной линии.
Приведем некоторые атрибуты дескриптора <HR>.
| Aтрибут | Описание |
| SIZE | Определяет толщину горизонтальной линии |
| WIDTH | Определяет длину горизонтальной линии |
| ALIGN | Определяет способ выравнивания линий |
| NOSHADE | Определяет черную линию без эффекта гравировки |
Приведем пример Web-страницы.
<HTML>
<BODY>
<P><FONT SIZE=2> Рисоване горизонтальных линий.
<P> Постая линия с теню
<HR>
<P> Толщина в 6%
<HR SIZE="6%">
<P>Черная линия без тени
<HR NOSHADE>
</HTML>
| Для закрепления знаний учащихся по форматированию текстов им предлагается создание Web-cтраниц со стихами любимых поэтов, списком книг личной библиотеки, странички объявлений, причем объявления разделяются горизонтальными линиями с различными атрибутами. |
Гипертекстовые ссылки
Существуют 3 основных типа гиперссылок, о которых учащимся необходимо знать: внутренние, внешние и относительные.
Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице.
Внешние (external links), или удаленные (distant links), ссылки - это ссылки на другие Web-серверы.
Относительные (relative links), или локальные (local links), ссылки - это ссылки на другие Web-страницы, расположенные на одном сервере со страницей, содержащей ссылки.
В основе ссылок лежат URL (Uniform Resource Locator), или унифицированный локатор ресурсов. URL – это адрес Web-страницы, который отображается в поле Адрес окна броузера. URL состоит из двух основных элементов: типа протокола и собственно адреса.
Тип протокола определяет вид ресурса internet, с которым устанавливается связь. Самым распространенным протоколом является http: // (HyperText Transfer Protocol – протокол передачи гипертекста). Протокол FTP (File Transfer Protocol) расшифровывается как протокол передачи файлов и является средством пересылки файлов от одного компьютера к другому.
Собстенно адрес (destination) – это имя файла, каталога или компьютера. Приведем пример URL:
http://www.rsl.ru
URL состоит из нескольких компонентов. Первый из них, префикс http://, определяет тип используемой службы Internet. Второй, www, представляет собой имя web-сервера; хотя на этом месте чаще всего стоит www, могут использоваться и другие имена. Нужно заметить, что иногда данная часть URL опускается. Следующий компонент rsl.ru определяет домен, в котором находится сервер. Косвенно по имени домена можно судить о географическом положении сервера. Компонент help.html определяет файл связи.
В HTML для гиперссылки используется следующий формат:
< A HREF=”URL” Текст ссылки</A>
Приведем пример Web-cтраницы со ссылками.
<HTML>
<HEAD>
<TITLE> Пример Web-страницы со ссылками на другие Web-страницы</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE=2> Выберите ссылку
<P><A HREF="Есенин.htm"> Cтихотворение С.Есенина</A>
<P><A HREF="Пушкин.htm"> Cтихотворение A.С.Пушкина</A>
</BODY>
</HTML>
| B броузере мы увидим следующее. |
С учащимися необходимо анализировать строки <P><A HREF="Есенин.htm"> Cтихотворение С.Есенина</A> ,<P><A HREF="Пушкин.htm"> Cтихотворение A.С.Пушкина</A> и обратить внимание на такие вопросы:
· Как создать ссылку в текущей строке?
· Как создать ссылку в новой строке?
· Какой бы вид имел URL, если файл “Пушкин.htm” находился в каталоге С:\ PUSHKIN?
· Можно ли в URL вместо Web-страниц указать программные или другие файлы?
· Что произойдет, если указанных в ссылках файлы на диске не окажутся?
· Создайте в Wеб-страницах “Пушкин.htm”,"Есенин.htm" cсылки для возврата на исходную страницу.
Можно предложить учащимся создание гипертекстов по следующим темам:
Алгоритмы
Стихи о природе.
Стихи о любви и т.д.
Теперь рассмотрим создание внутренних ссылок в документах.
Создавая ссылку на другую часть страницы, необходимо воспользоваться символом(#) и именем привязки:
<A HREF= “# торт”> Рецепты тортов</A>
Теперь нужно создать соответствующее имя объекта.
< A NAME =”торт” Рецепты тортов- Коллекция</A>
Рассмотрим пример.
<HTML>
<HEAD>
<TITLE> Пример Web-страницы с внутренними ссылками</TITLE>
</HEAD>
<BODY>
<A NAME="Начало">
<P><FONT SIZE=2> Сергей Есенин
<P><A HREF="#Есенин1"> Молитва Матери</A>
<P><A HREF="#Есенин2"> С добрым утром! </A><BR>
<BR>
<A NAME="Есенин1"> </A> Молитва Матери (отрывок)<BR>
<PRE>
На краю деревни старая избушка,
Там перед иконой молится старушка.
Молитва старушки сына поминает,
Сын в краю далеком родину спасает.
</PRE>
<P><A HREF="#Начало"> Начало </A><BR>
<BR>
<A NAME="Есенин2"> С добрым утром(отрывок)</A><BR>
<PRE>
Задремали звезды золотые,
Задрожало зеркало затона.
Брезжит свет на заводи речные
И румянит сетку небосклона.
</PRE>
<BR>
<P><A HREF="#Начало"> Начало </A><BR>
</BODY>
</HTML>
| Обратите внимание, как реализованы ссылки на начало, на первое и второе стихотворение и на последовательность их расположения в документе. Для закрепления знаний по созданию ссылок внутри документа и на другие Web-страницы учащимся предлагаются следующие примерные задания. Создать Web – страницы. а) Расписание занятий на неделю. б) Рецепты приготовления различных тортов. в) млекопитающие. г) график дежурства |
В дальнейшем, в зависимости от технической базы и профиля обучения учащихся рассматриваются создание ссылок на ресурсы мультимедиа, адреса электронной почты, на FTP-сервер.
Для воспроизведения музыкального фрагмента можно создать следующую ссылку.
<HTML>
<HEAD>
<TITLE> Ресурсы мультимедиа</TITLE>
</HEAD>
<BODY>
Музыка<A HREF ="C:\windows\media\passport.mid"</A > здесь<BR>
</BODY>
</HTML>
| В результате запускается универсальный проигрыватель и автоматически проигрывается мелодия. Точно так же с помощью ссылок можно отобразить на экране тексты. |
Создание списков.
Списки – это очень важное средство структурирования документа. Типы списков представлены ниже в таблице.
Типы списков HTML и соответствующие им дескрипторы.
| Тип списка | Дескриптор |
| Упорядоченный (нумерованный ) список | <OL> |
| Неупорядоченный список (маркированный) | <UL> |
| Список определений | <DL> |
| Список элементов меню (используется редко) | <MENU> |
| Список элементов каталогов (используется редко) | <DIR> |
Из перечисленных списков чаще всего используются упорядоченные, неупорядоченные и списки определений. Вначале учащимся предлагаются нумерованные списки и их внутренние элементы. Нумерованный список, как видно из таблицы, создается с помощью <OL>,</OL>, а каждый элемент внутри этого контейнера с помощью дескриптора <LI> (list item- элемент списка). При создании нумерованного списка используется следующий синтаксис:
<OL>
<LI> первый элемент списка
<LI> второй элемент списка
…
<LI> последний элемент списка
</OL>
Приведем пример. В этом документе приводится списки мальчиков двух 9 классов.
<HTML>
<HEAD>
<TITLE>
Нумерованные списки
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>
<OL> Мальчики 9а класса
<LI> Алексеев Тимофей
<LI> Арсентьев Вадим
<LI> Иванов Николай
</OL>
<OL> Мальчики 9б класса
<LI> Авдеев Игорь
<LI> Матрос Николай
<LI> Исаев Сергей
</OL>
</BODY>
</HTML>
Обратите внимания учащихся на то, что каждый список находится внутри контейнера <OL>,</OL>, включая и название списка. При создании нескольких списков создаются и столько же контейнеров.
Для нумерации упорядоченных списков определены типы нумерации, которые приведены в следующей таблице.