Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...

Методика измерений сопротивления растеканию тока анодного заземления: Анодный заземлитель (анод) – проводник, погруженный в электролитическую среду (грунт, раствор электролита) и подключенный к положительному...

Интересное:

Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...

Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...

Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Дескрипторы логических стилей.

2017-05-23

449

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Дескриптор	Описание
<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%

<P>Черная линия без тени

</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>

<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>

<OL> Мальчики 9а класса

<LI> Алексеев Тимофей

<LI> Арсентьев Вадим

<LI> Иванов Николай

</OL>

<OL> Мальчики 9б класса

<LI> Авдеев Игорь

<LI> Матрос Николай

<LI> Исаев Сергей

</OL>

</BODY>

</HTML>

Обратите внимания учащихся на то, что каждый список находится внутри контейнера <OL>,</OL>, включая и название списка. При создании нескольких списков создаются и столько же контейнеров.

Для нумерации упорядоченных списков определены типы нумерации, которые приведены в следующей таблице.

⇐ Предыдущая 123 Следующая ⇒

Поделиться с друзьями:

Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...