Быстрый поиск

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

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

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

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