Сборник лабораторных работ по дисциплине: Мировые Информационные Ресурсы - Html программирование. Создание Web-документа

Подождите немного. Документ загружается.

9. Оформите лабораторную работу в письменном виде

(преподавателю лабораторную работу следует сдавать и

в письменном и в электронном виде).

Примечание: после каждого изменения в файле “Проба сил в HTML”

необходимо сохранить сделанные изменения и затем обновить

страницу.

Задачи для самостоятельного решения. Предлагается

самостоятельно применить дескриптор <BR>, чтобы посмотреть, как

изменяется расположение написания заголовка.

Контрольные вопросы:

1. Как написать закрывающий тэг <BR> в выше приведенном

фрагменте?

2. Как в HTML 3.2 специально отформатировать местоположение

элемента?

3. Почему в HTML применяются дескрипторы отдельного

форматирования текста?

4. Можно ли разделительную линию <hr> сделать короче?

5. В каком порядке располагается дескриптор <BR> и, с какими

атрибутами?

ЛАБОРАТОРНАЯ РАБОТА № 5

HTML. ЗАГОЛОВКИ

Цель работы: изучение дескрипторов <H>, </H> и приобретение

умения создания заголовков в документе WEB.

Заголовки — прекрасный инструмент структурной организации

содержимого Web-страницы. Обычно пользователю бывает достаточно

пробежать глазами набор заголовков, чтобы быстро отыскать

интересующую его информацию. Умело подобранные заголовки

улучшают общий вид и дизайн WEB-страницы.

Создание заголовков. Стандарт HTML предусматривает возможность

использования заголовков шести уровней вложенности. Заголовки

уровня 1 (обозначаемые дескриптором <H1>) отображаются самым

крупным шрифтом, а уровня 6 (<Н6>) — самым мелким (см. рис. 5-1).

Заголовки, обозначаемые дескрипторами <Hl>, <H2> и <H3>, обычно

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

разделов документа, а тяги <H5> и <Н6> часто применяют для

выделения фрагментов текста, содержащих сведения об авторских Рис.

5-1. Создание заголовков.

правах и иную подобную информацию официального характера. Шрифт

заголовков, форматируемых с помощью дескриптора <H4>, как правило,

не отличается по размеру от шрифта, которым набран основной текст

страницы.

Последовательное и сообразное использование заголовков разных

уровней существенно облегчит восприятие информации читателями. Во

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

Web-страницы заголовки более трех различных уровней вложенности.

Web-броузеры обычно отображают заголовки полужирным шрифтом,

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

умолчанию выравнивает текст заголовков влево. Атрибут ALIGN

позволяет отступить от этого правила. Хотя атрибут ALIGN все еще

поддерживается всеми популярными Web-броузерами, в настоящее

время более предпочтительным считается применение листов стилей.

Применение листов стилей поможет гарантировать сообразность

использования заголовков в тексте WEB-страницы. Лист стилей дает

возможность единовременного определения внешнего вида заголовков

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

отображались с помощью шрифта Pragmatica Condensed (в Word > Ч) с

эффектом подчеркивания.

Ход работы:

1. Ознакомиться с данной инструкцией.

2. Вызовите броузер WEB щелчком «мыши» по иконке.

3. В меню “файл→открыть” откройте файл созданный в

лабораторной работе № 4.

4. Добавьте в тело <body> ниже приведенный текст (в

шаблоне, ранее созданном в лабораторной работе №4

«Калоев HTM. Лаб.4) в графическом редакторе Блокнот.

5. Документ HTML, содержащий форматирование абзаца,

должен иметь описательный элемент <H>.

В итоге, документ HTML будет выглядеть следующим образом:

<html>

<TITLE> Моя первая проба сил в HTML</TITLE><!-- тег названия

страницы-->

<STYLE>

H2 (font-family: "Pragmatica Condensed"; text-decoration: underline)

</STYLE>

</HEAD>

<BODY>

<Н2>Мой первый заголовок</Н2>

<Н2>Второй заголовок</Н2>

<Н2>ПРОБА - ШАБЛОН</Н2>

Примечание: таблицы стилей позволяют быстро форматировать

заголовки Web-страниц.</H2>

</BODY>

</html>

6. Сохраните набранный текст под тем же именем (под

названием включающем Вашу фамилию, например: Калоев

HTML. Лаб. 5) и расширением «.html» в отдельной папке в

корневом каталоге или в папке «Мои документы».

7. Запустите полученный файл в броузере Internet Explorer и в

открывшемся окне Вы увидите набранный абзац «Проба

сил в HTML».

8. Проанализируйте набранный код фрагмента программы,

поэкспериментировать, изменяя написание приведенных

дескрипторов (тэгов) в редакторе Блокнот (не забудьте

сохранить изменения и обновить страницу).

9. Оформите лабораторную работу в письменном виде

(преподавателю лабораторную работу следует

сдавать и в письменном и в электронном виде).

Задачи для самостоятельного решения.

Предлагается самостоятельно применить дескриптор <font size = ”…”>

для задания шрифта заголовка? Чтобы посмотреть, как изменяется

размер шрифта написания заголовка. Измените в контейнере <H2> </

H2> название заголовка. Измените атрибут 2, чтобы посмотреть

изменение написания заголовка, например на 6 или на 3.

Контрольные вопросы:

1. Какие тэги вы применили в выше приведенном фрагменте?

2. Почему в HTML применяются дескрипторы отдельного

форматирования заголовков?

3. Почему в HTML 3.2 применяют специальные листы стилей

форматирования?

4. Можно ли применить листы стилей в HTML 2.0?

5. В каком порядке располагаются дескрипторы HTML и атрибуты?

6. Чем отличаются атрибуты от дескрипторов?

ЛАБОРАТОРНАЯ РАБОТА № 6

HTML. ПАРАМЕТРЫ ШРИФТА

Цель работы: изучение дескрипторов форматирования шрифтов и

приобретение умения задания типа шрифта и умения применения

специальных символов в документах WEB.

Спецификация HTML предусматривает набор кодов,

соответствующих специальным символам, которые можно включить в

текст WEB – страницы. Это позволяет воспользоваться многими

необычными символами, такими как, например, математические

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

При необходимости вставки специального символа вы должны

указать его числовой или мнемонический код (см. рис. 6-1). Числовой

код состоит из знаков амперсанда (&), фунта (#), номера символа и

точки с запятой (;). Мнемонический код включает в себя знак

амперсанда, наименование символа и точку с запятой. Средства вставки

специальных символов полезны, в частности, в тех ситуациях, когда

Рис. 6-1. Вставка специальных символов.

необходимо использовать в тексте один из "служебных" знаков,

применяемых при проектировании Web-страниц, — скажем, знаки <, >, "

или &, которые броузер обрабатывает специальным образом (например,

символ угловой открывающей скобки, <, обычно воспринимается в

качестве начала дескриптора).

Примите к сведению, что внешний вид специальных символов,

введенных в текст Web-страницы, зависит от настройки броузера

пользователя и состава набора шрифтов, установленных на его

компьютере. Перечень специальных символов приведен в приложении.

Ход работы:

1. Ознакомиться с данной инструкцией.

2. Вызовите броузер WEB щелчком «мыши» по иконке.

3. В меню “файл→открыть” откройте файл, созданный в

лабораторной работе №2.

4. Наберите ниже приведенный текст (набранный ранее в

шаблоне, созданном в лабораторной работе № 5 «Калоев

HTML. Лаб. 5») в графическом редакторе Блокнот.

5. Документ HTML, поддерживающий форматирование абзаца,

должен содержать описательный элемент <P>. В итоге,

документ HTML будет выглядеть следующим образом:

<html>

<TITLE> Моя первая проба сил в HTML</TITLE><!-- тег названия

страницы-->

<head> ПРОБА - ШАБЛОН</head>

<body>

<Hl><CENTER><FONT FACE=”Arial, Times New Roman Cyr”>МОЯ

ПОЭТИЧЕСКАЯ СТРАНИЧКА</CENTER></Hl>

<BR>Я люблю стихи, в том числе и собственного сочинения.

Можете прочесть, вот одно из последних. Э-э-э-э... Эти удались,

особенно финал:</BR>

<PRE>

Мораль сей басни такова

Хоть стой, хоть ляг, хоть встань.

Как сплетнику нужна молва

И как певцу - слова,

И как огню нужны дрова,

Как к чаю сладкая халва,

Как к пиву мелкая плотва

Так нужен WEB-дизайн!

</PRE>

</body>

</html>

6. Сохраните набранный текст под тем же расширением «.html» в

отдельной папке в корневом каталоге или в папке «Мои

документы» под названием, включающей Вашу фамилию,

например: Калоев HTML. Лаб. 6).

7. Запустите полученный файл в броузере Internet Explorer и в

открывшемся окне Вы увидите набранный стих в WEB-

странице «Проба сил в HTML » .

6. Проанализируйте набранный код фрагмента программы,

поэкспериментируйте, изменяя написание приведенных

дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить

изменения и обновить страницу).

7. Введите в набранный код 3-4 специальных символа из таблицы

приведенной в приложении 6-1 к данной лабораторной работе.

8. Оформите лабораторную работу в письменном виде

(преподавателю лабораторную работу следует сдавать и в

письменном и в электронном виде).

Задачи для самостоятельного решения.

Предлагается самостоятельно применить символ «µ» в тексте.

Измените в контейнере <PRE></PRE> структуру стихотворения

(расположение строк).

Вставьте соответствующий атрибут, чтобы изменить написание шрифта

в строке заголовка. Измените шрифт по умолчанию строки «МОЯ

ПОЭТИЧЕСКАЯ СТРАНИЧКА» на шрифт Lucida Calligraphy.

Контрольные вопросы.

1. Какие тэги вы применили в выше приведенном фрагменте?

2. Почему в HTML применяются дескрипторы отдельного

форматирования текста?

3. В HTML v.3.2 можно опустить специальные дескрипторы

форматирования?

4. В каком порядке располагаются дескрипторы HTML и

атрибуты?

5. Чем отличаются атрибуты от дескрипторов?

Приложение 6-1

СПЕЦИАЛЬНЫЕ СИМВОЛЫ

Символ Числовой

код

Мнемони-

ческий код

Символ Числовой

код

Мнемони-

ческий код

Символ Числовой

код

Мнемони-

ческий код

" " " ¿ ¿ ¿ à à &agrave

& & & À À &Agrave á á &aacute

< & #60; < Á Á &Aacute â â â

> > > Â Â Â ã ã ã

¡ ¡ ¡ Ã Ã Ã ä ä ä

¢ ¢ ¢ Ä Ä &Аuml; å å å

£ £ £ Å Å Å æ æ æ

¤ ¤ ¤ Æ Æ Æ ç ç &ссеdil;

¥ ¥ &уеn; Ç Ç &Ссеdil; è è &egrave

¦ й#166; &bvrbar; È È &Egrave é é &eacute

§ § § É É &Eacute ê ê ê

¨ ¨ ¨ Ê Ê Ê ё ë &еuml;

ª ª ª Ì Ì Ì í í í

« « « Í Í Í î î î

¬ ¬ ¬ Î Î Î ï ï &ium1;

® ® ® Ï Ï Ï ð ð ð

¯ ¯ Ð Ð &ЕТН; ñ ñ ñ

° ° ° Ñ Ñ Ñ ò ò &ograve

± &№177; ± Ò Ò &Ograve ó ó ó

² ² ² Ó Ó Ó ô ô ô

³ & #179; ³ Ô Ô Ô õ õ õ

´ ´ ´ Õ Õ &Оtildе; ö ö &оuml;

µ µ µ Ö Ö &Оuml; ÷ ÷ ÷

¶ ¶ &раrа; × × × ø ø ø

· · · Ø Ø Ø ù ù ù

¸ ¸ ¸ Ù Ù &Ugravе ú ú &uacute

¹ ¹ ¹ Ú Ú Ú û û û

º º º Û Û Û ü ü ü

» » » Ü Ü Ü ý ý ý

1/4 ¼ ¼ Ý Ý Ý þ þ þ

1/2

½ &fгас12; Þ Þ

&THOR

N; ÿ ÿ ÿ

3/4 ¾ & frac34; ß ß ß

ЛАБОРАТОРНАЯ РАБОТА № 7

HTML. СМЫСЛОВОЕ ВЫДЕЛЕНИЕ ТЕКСТА

Цель работы: приобрести навыки применения дескрипторов <I>(italic),

<B>(bold), <U> и <STRIKE>, приобрести умение выделения текста

шрифтом «жирным» и «курсив» в документе WEB.

Смысловое выделение фрагиентов текста. Чтобы придать

фрагменту текста смысловой акцент, удобно использовать средства

изменения начертания шрифта. Так фрагменты полужирного и

курсивного текста полезно использовать при вводе новых терминов или

выражения важных мыслей.

В спецификации HTML для этой цели применяются дескрипторы

<I>(italic), <B>(bold), <U> и <STRIKE>. Дескриптор <В> позволяет

обозначить отрывок текста полужирным (bold) шрифтом, а <I> дает

возможность отобразить текст курсивом (italic). Дескриптор <U>

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

использовании признака подчеркивания, поскольку читатели Вашей

Рис. 7-1. Смысловое выделение фрагиентов текста.

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

Дескриптор <STRIKE> снабжает указанный фрагмент текста признаком

зачеркивания и используется, скажем, для обозначения устаревших

разделов Web-страницы. Например, при необходимости указания новых,

сниженных, цен на товары удачным решением будет поместить их

рядом со старыми, помеченными дескриптором зачеркивания, чтобы

потребитель тотчас проникся мыслью о покупке.

Хотя дескрипторы <U> и <STRIKE> все еще поддерживаются всеми

популярными Web-броузерами, в настоящее время более

предпочтительным считается применение листов стилей.

Ход работы:

1. Ознакомьтесь с данной инструкцией, вызовите броузер WEB

щелчком «мыши» по иконке, откройте в нем «пустую»

страницу. Откройте ее в виде HTML.

2. Наберите в открывшемся блокноте пример показанный на

рисунке п. 2, сохраните изменения в меню файл→сохранить и

обновите страницу.

3. Затем в меню “файл→открыть” откройте файл созданный в

лабораторной работе № 6 (набранный ранее в шаблоне

созданном в лабораторной работе № 6 «Калоев HTML»).

4. Внесите в него ниже приведенные изменения (см. текст

ниже), в графическом редакторе Блокнот (см. п. 5).

5. В новом документе, применены согласно спецификации

HTML, также описательный элемент <BR>, и дескрипторы -

<I>(italic), <B>(bold), <U> и <STRIKE>.

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

<html>

<TITLE> Моя первая проба сил в HTML</TITLE><!-- тег названия

страницы-->

<head> <I><B>ПРОБА - ШАБЛОН</B></I></head><!-- тег

заголовков-->

<body>

<Hl><CENTER><B><FONT FACE=”Arial, Times New Roman

Cyr”>МОЯ ПОЭТИЧЕСКАЯ СТРАНИЧКА</B></CENTER></Hl>

<P>Я люблю стихи, в том числе и собственного сочинения.

Можете прочесть, вот одно из последних. </P>

<P>Эти удались, особенно финал:</P>

<PRE>

Мораль сей басни такова

Хоть стой, хоть ляг, хоть встань.

Как сплетнику нужна молва

И как певцу - слова,

И как огню нужны

дрова,

Как к чаю сладкая халва,

Как к пиву мелкая плотва

Так нужен WEB-дизайн!

</PRE>

</body>

</html>

6. Сохраните набранный текст под тем же именем и

расширением «.html» в отдельной папке в корневом каталоге

или в папке «Мои документы» под названием включающей

Вашу фамилию, например: Калоев HTML. Лаб. 7).