Каталог Рефератов - Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов


	Главная \| Карта сайта


	РАЗДЕЛЫ


	ПАРТНЕРЫ


	АЛФАВИТ

... А Б В Г Д Е Ж З И К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Э Ю Я


	ПОИСК

Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов

Тег <BODY> имеет множество параметров:

- ALINK= "цвет" – определяет цвет активной ссылки.

- BACKGROUND= "URL- адрес" – указывает на URL- адрес изображения, которое используется в качестве фонового.

- BOTTOMARGIN = "число" –устанавливает границу нижнего поля

документа в пикселях.

- BGCOLOR= "цвет" – определяет цвет фона документа.

- <BODY bgcolor = "#E6F2FF"> или < BODY bgcolor = blue>

- BGPROPERTIES= если установлено значение fixed, фоновое

изображение не прокручивается.

- LEFTMARGIN="число" – устанавливает границу левого поля

документа в пикселях.

- LINK= "цвет" – определяет цвет еще не просмотренной ссылки.

- RIGHMARGIN="цвет" – устанавливает границу правого поля

документа в пикселях.

- SCROLL- устанавливает наличие или отсутствие полос прокрутки окна браузера.

- TEXT= "цвет" – определяет цвет текста.

- TOPMARGIN= "число" – устанавливает границу верхнего поля

документа в пикселях.

- VLINK= "цвет" – определяет цвет уже просмотренной ссылки.

Следует оговорить, что в данном исследовании мы рассматриваем только небольшую часть тегов.

Документ HTML состоит из нескольких составляющих. Одной

такой составляющей является текст. Поэтому далее мы рассмотрим основные средства форматирования текста.

§2.1.2 Основные средства форматирования текста

Для форматирования текста HTML – документов предусмотрена целая группа тегов, которую можно условно разделить на теги логического и физического форматирования. Теги логического форматирования обозначают (своими именами) структурные типы своих текстовых фрагментов. Теги физического форматирования определяют формат отображения указанного в них фрагмента текста в окне браузера.

Теги логического форматирования:

Ø <ABBR>…</ABBR> - отмечает текст как аббревиатуру.

Ø <ACRONYM>…</ACRONYM> - отмечает акронимы.

< ACRONYM TITLE = ˝Московский городской педагогический университет˝>МГПУ </ACRONYM> - один из ведущих вузов Москвы!

Ø <CITE>…</CITE> - используется для отметки цитат или названий книг и статей, ссылок на другие источники и т.д.

<CITE> Комсомольская правда</CITE> является одной из наиболее популярных газет Москвы.

Ø <DFN>…</DFN> - отмечает свой текстовый фрагмент как определение.

<DFN> Internet Explorer</DFN> - это популярный WEB- браузер.

Ø <EM>…</EM> - используется для выделения важных фрагментов текста.

Пример выделения <EM>отдельных слов</EM> текста.

Ø <KBD>…</KBD> - отмечает текст как вводимый пользователем с клавиатуры.

Чтобы запустить текстовый редактор, напечатайте <KBD>notepad</KBD>

Ø <Q>…</Q> - отмечает короткие цитаты в тексте.

Ø <SAMP>…</SAMP> - отмечает текст как образец.

В результате работы программой будет напечатано <SAMP>Привет!!!</SAMP>

Ø <STRONG>…</STRONG> - используется для выделения важных фрагментов текста.

<STRONG> Выделяет текст</STRONG>

Ø <VAR>…</VAR> - отмечает имена переменных программ.

Задайте значение переменной <VAR>n</VAR>

Отображение примеров, приведенных при описании тегов логического форматирования текста, показано на рисунке 1.

Рис.1. Примеры логического форматирования текста

Теги физического форматирования текста.

Ø <B>…</B> - отображает текст полужирным шрифтом.

Это <B>полужирный </B> шрифт.

Ø <I>…</I> - отображает текст курсивом.

Выделение<I>курсивом </I>.

Ø <TT>…</TT> - отображает текст моноширинным текстом.

Это <TT>моноширинный </TT> шрифт.

Ø <U>…</U> - отображает текст подчеркнутым.

Пример <U>подчеркивания </U> текста.

Ø <STRIKE>…</STRIKE> и <S>…</S> - отображает текст, перечеркнутый горизонтальной линией.

Пример<STRIKE>зачеркнутого </STRIKE>текста.

Ø <BIG>…</BIG> - выводит текст большего размера.

Шрифт <BIG>большего /BIG> размера.

Ø <SMALL>…</SMALL> - выводит текст шрифтом меньшего размера.

Шрифт<SMALL>меньшего </SMALL>размера.

Ø <SUB>…</SUB> - сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера.

Пример шрифта для<SUB>нижнего</SUB>индекса.

Ø <SUP>…</SUP> - сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера.

Пример шрифта для <SUP>верхнего</SUP>индекса.

Отображение примеров, проведенных при описании тегов физического

форматирования текста, показано на рисунке 2.

Рис.2.Примеры физического форматирования текста

Последний пример на рисунке 2 отображает использование вложенных

друг друга тегов.

А здесь текст <B><I>полужирный и курсивный </B></I>

Ø <FONT>…</FONT>- указывает параметры шрифта.

Параметры тега:

- FACE= ˝тип шрифта˝ – служит для указания типа шрифта, которым

программа просмотра пользователя будет выводить текст. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми.

Пример задания названия шрифта </FONT>

- SIZE= ˝число˝- служит для указания размеров шрифта в условных

единицах от 1 до 7. Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+2).

<FONT SIZE =2> Шрифт размера 2 </ FONT >

- COLOR = ˝цвет˝ - устанавливает цвет шрифта, который может

задаваться с помощью стандартных имен или в формате #RRGGBB.

<FONT COLOR= GREEN>текст зеленого цвета </FONT>или

<FONT COLOR= #FF0000>текст красного цвета</FONT>

Отображение примеров, проведенных при описании параметров тега <FONT>, показано на рисунке 3, а запись документа на языке HTML выглядит так:

<HTML>

<HEAD>

<TITLE>параметры тега FONT</TITLE>

</HEAD>

<BODY>

Текст, записанный шрифтом по умолчанию.<BR>

<FONT FACE= Verdana, Arial, Helverica> Пример задания названия шрифта

</ FONT> <BR>

<FONT SIZE=1> Шрифт размера 1 </ FONT >

<FONT SIZE =2> Шрифт размера 2 </ FONT >

<FONT SIZE =3> Шрифт размера 3 </ FONT >

<FONT SIZE =4>Это шрифт 4 </ FONT >

<FONT SIZE =5> Шрифт размера 5 </ FONT >

<FONT SIZE =6> Шрифт размера 6 </ FONT t>

<FONT SIZE =7> Шрифт размера 7 </ FONT >

<FONT FACE=Arial SIZE=5 COLOR=blue >Пример задания текста типа Arial, синего цвета, размера 5 </ FONT>

</BODY>

</HTML>

Рис.3. Применение параметров тега <FONT>

Ø <BASEFONT>…</BAZEFONT> - используется для указания размера, типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны для всего документа.

Любой документ необходимо форматировать. Документ HTML не исключение. Рассмотрим основные элементы форматирования HTML- документа.

§2.1.3 Форматирование HTML документа

Как и в Word, основной структуры текста в HTML является абзац.

Ø <P>…</P> - служит для выделения абзаца. Закрывающийся тег </P> не обязателен.

Параметры тега:

- LEFT- выравнивание текста по левой границе окна браузера.

- CENTER- выравнивание текста по центру окна браузера.

- RIGHT- выравнивание текста по правой границе окна браузера.

- JUSTIF - выравнивание текста по ширине окна браузера.

Ø <BR> - принудительный перевод строки.

Ø <NOBR> и <WBR>- запрещают перевод строки.

Ø <H1>…</H1>,…,<H6>…</H6>- заголовки. Заголовок с номером 1 – самый крупный, а с номером 6 – самый мелкий.

Параметр тега:

- ALIGN= ˝значение˝- горизонтальное выравнивание. Имеет значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

На рисунке 4 пример использования заголовков разного уровня с

различным выравниванием.

<HTML>

<HEAD>

<TITLE>Заголовки</TITLE>

</HEAD>

<BODY>

<H1> Заголовок размера 1 </H1>

<H2> Заголовок размера 2 </H2>

<H3 ALIGN= CENTER > Заголовок размера 3 </H3>

<H4 ALIGN= RIGHT > Заголовок размера 4 </H4>

<H5> Заголовок размера 5 </H5>

<H6> Заголовок размера 6 </H6>

Основной текст документа

</BODY>

</HTML>

Рис.4. Отображение заголовков различного размера

Ø <HR>…</HR> - позволяет провести рельефную горизонтальную линию.

Параметры тега:

- ALIGN= ˝значение˝ - выравнивает по краю или центру. Имеет

значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

- WIDTH= ˝число˝ - устанавливает длину линии в пикселях или

процентах от ширины окна браузера.

- SIZE= ˝число˝ - устанавливает толщину линии в пикселях.

- NOSHADE – отменяет рельефность линии.

- COLOR= ˝цвет˝ - указывает цвет линии.

Ø <PRE>…</PRE> - служит для включения в документ отформатированного текста. Такой текст будет отображаться, как он выглядит в обычном текстовом редакторе.

Ø <DIV>…</DIV> - служит для выделения фрагмента документа.

Ø <CENTER>…</CENTER> - предназначен для горизонтального выравнивания всех элементов окна браузера.

Ø <BLOCKQUOTE>…</ BLOCKQUOTE> - для выделения длинных цитат в тексте.

Ø <ADDRES>…</ADDRES> - применяется для идентификации автора документа и для указания адреса автора.

Специальные символы.

Некоторые специальные символы не входят в базовую часть таблицы

кодировок ACSII. Существуют символы непосредственно используемые в HTML-документах. Они будут интерпритированны не так, как задумал автор.

В таких случаях нужно вводить символ в HTML- документ при помощи специальных кодов:

- &lt- знак ˝меньше˝

- &gt- знак ˝больше˝

- &nbsp - неразрывный пробел

- &copy - знак copyright

- &amp - амперсанд

- &quot - знак ˝кавычки˝

Одним из важнейших понятий для HTML- документа являются ссылки.

О них и пойдет речь в следующем параграфе.

§2.1.4 Гиперссылки

Гиперссылками (или просто ссылками) называют выделенные области документа, позволяющие перейти к другой его части или к другому документу в Сети.

Гиперссылка состоит из ˝внутренней˝ части, то есть, адреса документа, на которой она ссылается, и ˝внешней˝ части, видимой на экране и называемой якорем гиперссылки. Якорь гиперссылки может представлять из себя слово или группу слов, картинку или часть картинки. Если подвести указатель ˝мыши˝ к ссылке, он примет форму ладони с вытянутым указателем пальцем – и это самый надежный способ ее определить. При этом в строке состояния браузера можно будет прочитать адрес, на который указывает ссылка.

Кроме того, практически всегда текстовые ссылки выделены другим цветом и очень часто подчеркнуты. Графические ссылки часто заключены в рамку того же цвета, которым выделяются текстовые ссылки. По умолчанию это синий цвет, но каждая Web- страница может использовать свое собственное оформление. Цвет ссылок, которые уже выбрались пользователем, обычно отличается от цвета не посещенных ссылок и выглядит более ˝бледным˝ (по умолчанию - фиолетовый).

Ø <A>…</A> - это служит для создания гиперссылки. В общем виде ссылку можно записать так:

<A HREF=˝ адрес˝ TARGET= ˝окно˝>текст ссылки</A>

Об адресах документов сказано ниже. Параметр TARGET может быть не указан, в этом случае документ открывается в текущем окне браузера, или указан в виде TARGET= ˝_BLANK˝>, тогда документ открывается в новом окне. Текст ссылки внутри тега <A> может быть любым. Точно так же в тег <A> можно поместить и изображение.

Чтобы научиться создавать ссылки, нужно иметь представление о том, как адресуются документы в Сети.

Полный адрес документа в сети называется URL (Uniform Resource Locator; принято читать ˝урл˝), URL может состоять из следующих частей:

Ø префикс протокола, то есть, указание на используемую сетевую службу. Основные протоколы, с которыми Вы столкнетесь:

- httr:// - основной протокол, обеспечивающий доступ к Web

страницам. Используется по умолчанию, потому часто не указывается в URL/

- ftr:// - протокол передачи файлов FTR, позволяющий при

помощи программы FTR- клиента обмениваться файлами с удаленным компьютером.

- mailto; - доступ к электронной почте. Вслед за mailto: указывается

адрес электронной почты, имеющий общий вид

имя_пользователя@адрес_почтового_домена.

- file:// - указывается вместо имени протокола при обращении к Web-странице, расположенной на локальной машине.

Ø доменное имя компьютера или его IP-адрес вместо доменного имени. Например, сервер МТУ-Интел имеет доменное имя www.intel.ru и IP-адрес 195.34.32.11;

Ø номер порта, через который происходит взаимодействие с сервером. Перед номером порта ставится двоеточие. С точки зрения пользователя указание порта бывает полезно, например, для ˝принудительной˝ перекодировки документа. Так. Адреса http://www.newmail.ru:8100 и http://www.newmail.ru:8101 адресуют один и тот же сервер, но в первом случае документ читается в кодировке KOI-8, а во втором - в кодировке Windows. Вообще же, номер порта включается в URL только при нестандартных настройках сервера;

Ø имя файла на сервере, которое может включать и путь от корневого каталога сервера. В записи пути по дереву каталогов сервера используется символ ‘/’ , а не ‘\’, как принять в Dos и Windows. Корневой каталог на сервере – совсем не обязательно ˝ головной ˝ каталог ˝диска˝, как на локальной машине, а при соединении с сервером мы получаем доступ не ко всем его папкам и файлам, а только к тем, которые на нем специальным образом ˝размещены˝ и открыты для просмотра через WWW.

Ø закладка, позволяющая перейти в нужную часть документа. Имя закладки отделяется от имени файла символом ˝#˝.

В целях совместимости имена файлов, размещаемых в Интернет, обычно строятся по правилам DOS- то есть, состоят из латинских букв, цифр и символа подчеркивания и имеют длину не более 8 символов. С другой стороны, web-страницы принято давать расширение *.html, а не *.hml.

Следует помнить, что URL чувствителен к регистру символов, то есть, http://www.TNT.ru и http://www.tnt.ru – это не один и тот же адрес.

Если в URL не указано имя html- файла, это означает, что документ имеет имя по умолчанию, которое может назначаться при администрировании сервера. Чаще всего это имя index.html, так что URL http://www.host.ru может означить то же самое, что http://www.host.ru/ index.html.

Ссылки бывают:

Ø абсолютная- ссылка, в которой указан полный URL документа.

Абсолютные ссылки используются для связи с внешним ресурсами

Интернет, URL которых известен нам и не меняется.

Ø относительная – ссылка, которая ссылается на документ, опуская общую адресную часть. Например, если из документа index.html нужно сослаться на документ test.html, находящийся в той же папке, это можно сделать ссылкой вида:

<A HREF =˝test.html˝>документ test.html </A>

При использовании относительной ссылки можно ссылаться на папки, которые являются как вложенными, так и родительскими по отношению к папке, в которой расположен исходный документ.

Например, ссылка на рисунок с именем my.jpg, находящийся во вложенной папке images может иметь вид:

<A HREF =˝ images/ my.jpg ˝>посмотрите рисунок </A>

Ø внутренняя – ссылка предназначена для навигации в пределах документа. Они имеют вид:

<A HREF =˝ #закладка˝>якорь ссылки </A>

Для создания закладки служит тег вида:

<A HREF =˝ закладка ˝>якорь закладки </A>.

Имена закладок должны быть уникальным в пределах документа.

При разработке собственного web-сайта для перехода между его страницами используются, как правило, относительные ссылки, что позволяет просматривать сайт на локальной машине, не внося в него изменений, а также при необходимости легко переместить сайт на другой сервер.

Далее рассмотрим одну из наиболее употребляемых форм представления данных.

обучение информатика гипертекст школьник

§2.1.5 Списки

HTML поддерживает нумерованный и маркированный списки.

Рассмотрим каждый из них.

Маркированный список.

Ø <UL>…<UL> - служит для создания маркированного списка. Внутри него располагаются все элементы списка.

Параметры тега:

- COMPACT – указывает браузеру, что список надо выводить в компактном виде.

- TYPE= ˝значение˝ - указывает вид маркера:

- circle – отображается закрашенными кружочками.

- disk - отображается не закрашенными кружочками.

- square - отображается закрашенными квадратами.

Ø <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.

Отображение браузером маркированного списка показано на рисунке 5, а запись документа на языке HTML выглядит так:

<HTML>

<HEAD>

<TITLE>Маркированный список </TITLE>

</HEAD>

<BODY>

<B>Знаки зодиака: </B>

<LI>Телец</LI>

<LI>Близнецы</LI>

<LI>Скорпион</LI>

<LI>Стрелец</LI>

<LI>Козерог</LI>

<LI>Водолей</LI>

</UL>

</BODY>

</HTML>

Рис.5. Отображение браузером маркированного списка

Нумерованный список.

Ø <OL>…<OL> - служит для создания нумерованного списка. Внутри него располагаются все элементы списка.

Ø Параметры тега:

- COMPACT - указывает браузеру, что список надо выводить в

компактном виде.

- TYPE= ˝значение˝ - указывает вид маркера:

- А – отображается в виде прописных латинских букв.

- а – отображается в виде строчных латинских букв.

- I - отображается в виде больших римских букв.

- i - отображается в виде маленьких римских букв.

- 1 - отображается в виде арабских цифр.

- START = ˝число˝ - позволяет начать нумерацию с цифры, отличной от 1 или буквы, отличной от A.

Ø <LI>…</LI> - заключает каждый элемент списка. Этот тег закрывать необязательно.

Для нумерованного списка можно изменить нумерацию, указав в теге

<LI> параметр VALUE= ˝число˝.

Отображение браузером маркированного списка показано на рисунке 6, а запись документа на языке HTML выглядит так:

<HTML>

<HEAD>

<TITLE>Нумерованный список </TITLE>

</HEAD>

<BODY>

<OL>

<P><B>Знаки зодиака: </B></P>

<LI>Телец</LI>

<LI>Близнецы</LI>

<LI>Скорпион</LI>

<LI>Стрелец</LI>

<LI>Козерог</LI>

<LI>Водолей</LI>

</OL>

</BODY>

</HTML>

Рис.6. Отображение браузером нумерованного списка

Список определений.

Списки определений являются особым видом списков. Каждый элемент такого списка состоит из двух частей. В первой части элемента списка записывается определяемый термин, а во второй части – текст в форме словарной статьи, раскрывающий значение термина.

Ø <DL>…</DL> - задает списки определений.

Ø <DT>…</DT> - отмечает определяемый термин.

Ø <DD>…</DD> - отмечает абзац с его определением.

В общем список определений записывается следующим образом:

<DL>

<DT> Термин

<DD> Определение термина

</DL>

Параметр тега <DL>:

- COMPACT – указывает браузеру, что список надо выводить в компактном виде.

Отображение браузером списка определений показано на рисунке 7, а запись документа на языке HTML выглядит так:

<HTML>

<HEAD>

<TITLE> Список определений </TITLE>

</HEAD>

<BODY>

<DL>

<H1>Виды сетей </H1>

<DT> Локальные сети.

<DD> Объединяют несколько компьютеров, рассоложены в одном здании, дает возможность пользователям совместно использовать ресурсы компьютеров, а также подключенных к сети периферийных устройств(принтер, сканеров, модемов и др.) <BR><BR>

<DT> Региональные сети.

<DD> Объединяют множество компьютеров находящихся на большом расстоянии, в пределах одного региона, города. <BR><BR>

<DT> Корпоративные сети.

<DD>Сети организаций, которые хотят сохранять свою информацию в тайне <BR><BR>

<DT> Глобальные сети.

<DD> Объединяет компьютеры, находящиеся на огромном расстоянии, для общего пользования мировых информационных ресурсов.

</DL>

</BODY>

</HTML>

Рис.7. Отображение браузером списка определений

Комбинированные списки.

Для создания комбинированных списков теги нумерованных и маркированных списков можно вкладывать друг в друга. Простейший пример комбинированного списка показан на рисунке 8.

Страницы: 1, 2, 3, 4, 5, 6, 7


	НОВОСТИ


	ВХОД


	ТЕГИ

Рефераты бесплатно, реферат бесплатно, курсовые работы, реферат, доклады, рефераты, рефераты скачать, рефераты на тему, сочинения, курсовые, дипломы, научные работы и многое другое.
Copyright © 2012 г. При использовании материалов - ссылка на сайт обязательна.