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

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

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

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

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

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

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

< ACRONYMTITLE = ˝Московский городской педагогический университет˝>МГПУ </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.

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

<FONTCOLOR= #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> - это служит для создания гиперссылки. В общем виде ссылку можно записать так:

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

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