Лабораторная работа №4. Создание Web – страничек.
Основа каждой странички — язык разметки гипертекста, или HTML (сокращение от английского Hypertext Markup Language).
Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или «тэги». Тэги объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью тэгов формируются связи с другими web – сайтами и ресурсами Интернет. Просмотреть файл, написанный на языке HTML, можно в программе просмотра (Microsoft Internet Explorer, Netscape Navigator). Как пользоваться программой Вы уже знаете.
Тэги – это определенные последовательности символов, заключенные между знаками < (больше) и > (меньше).
Символ < — начало флага
Символ > — конец флага
Прописные и строчные буквы в написании флагов значения не имеют. Компьютер одинаково отреагирует на записи <title> и <TITLE>.
Любой HTML – документ, состоит из двух частей: заголовка и тела.
Все, что заключено между тэгами <HTML> и </HTML>, является документом HTML.
Между этими двумя флагами располагается то, что будет выводиться на экран программой просмотра – текст, картинки, видеофрагменты, тело странички, которое заключается между двумя флагами <BODY> и </BODY>.
Тэги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тэга является символ /.
Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тэгами <B> и </B>.
Все форматирующие тэги всегда следуют парами и для открывающего тэга должен существовать закрывающий тэг.
Тэги могут быть и непарными. Например, для перехода на новую строку используется непарный тэг <BR>.
Заголовок и название
Информация о документе, которая не выводится на экран, называется заголовком. Он заключается между тэгами <HEAD> и </HEAD>. В заголовке HTML – документа содержится название странички, которое появится в рамке окна программы просмотра. Название странички располагается между флагами <TITLE> и </TITLE>. Например, <TITLE>Моя страничка</TITLE>.
Упражнение 1.
Попробуем создать самый простой HTML документ.
Для этого воспользуемся простым текстовым редактором «Блокнот».
Создайте на своем пользовательском диске папку HTML. В ней будут храниться все Ваши HTML – документы и графические файлы. Наберите в текстовом редакторе следующее:
<HTML>
<HEAD>
<TITLE>Моя страничка (заголовок)</TITLE>
</HEAD>
<BODY>
Привет! Это моя личная домашняя страничка!
</BODY>
</HTML>
Сохраните этот файл под названием ind1.htm в папке HTML. Затем откройте программу просмотра (например Microsoft Internet Explorer). Щелкните мышкой в графе меню по надписи «Файл», затем с помощью команды «Открыть» откройте Ваш файл.
Вы увидите примерно следующее…
Параграфы
Предположим, что Вы хотите разбить текст на параграфы. Для этого нужно перед началом параграфа поставить тэг <p>. Когда программа просмотра обнаружит этот тэг, то она сама вставит перед началом параграфа пустую строку.
Из рассмотренного ниже примера видно, что закрывает параграф тэг </p>
<p> текст </p>
Вместе с флагом параграфа можно задать параметры выравнивания (ALIGN):
§ По центру (CENTER)
§ По левому краю (LEFT)
§ По правому краю (RIGHT)
Рассмотрите примеры оформления текстов и постарайтесь запомнить соответствующие тэги.
Тэг <p align = left> обеспечит выравнивание текста параграфа по левому краю. При этом правый край окажется неровным, «рваным». Такой текст хотя и выглядит не очень аккуратным, но его все-таки легко читать.
(этот абзац выровнен по левому краю)
Чтобы выровнять текст абзаца по правому краю, используйте тэг <a align = right>. Тогда Ваш текст будет выглядеть так же, как этот. Такое выравнивание текста значительно затрудняет чтение, но привлекает к себе внимание. Поэтому его часто используют для оформления заголовков и эпиграфов.
Такого расположения текста можно добиться с помощью тэга
<p align = center>.
Его используют для оформления коротких заголовков, но большой текст, выровненный по центру, читать очень тяжело.
(этот текст выровнен по центру)
Использование заголовков в тексте
Заголовки (Headings) служат для выделения логических частей текста. Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть шесть).
Как и любой текст, заголовки можно выравнивать по левому или правому полю, по центру.
Давайте усовершенствуем нашу страничку, используя заголовки и параграфы.
Упражнение №2
Откройте файл ind1.htm в текстовом редакторе и отредактируйте его так, как показано ниже.
<HTML>
<HEAD>
<TITLE>Моя страничка (заголовок)</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = Center> Привет! Это моя личная домашняя страничка! </H1>
<HR>
<H2> Мой город </H2>
<P> Я живу в Самаре
<H3 ALIGN = Left> Мой Университет </H3>
<P ALIGN = LEFT> Я учусь в СамГУ
<H4 ALIGN = CENTER> Моя специальность </H4>
<p ALIGN = CENTER> Менеджмент
<H5 ALIGN = RIGHT> Мои увлечения </H5>
<P ALIGN = RIGHT> Мои увлечения — музыка, спорт. </P>
<HR>
<H6 ALIGN = CENTER> Design “Luch” </H6>
</BODY>
</HTML>
Сохраните файл как ind2.htm.
Теперь запустите программу просмотра и сравните изображение на экране с рисунком.
Выделение текста
Когда Вы с кем-нибудь разговариваете, то обязательно выделяете интонацией те или иные слова. Так Вы показываете собеседнику, на что нужно обратить особое внимание. Письменная же речь лишена интонационной окраски. Здесь на помощь приходят различные способы выделения слов.
Фрагмент текста можно выделить полужирным шрифтом. Тогда он будет выглядеть так же, как этот абзац (используются тэги <B> и </B>)
Отдельные слова можно подчеркнуть (используются теги <U> и </U>).
Часто для выделения используют курсивный шрифт (используются тэги <I> и </I>).
Для выделения логических частей текста используют горизонтальные линии. Размер и толщина линии задаются с помощью параметров Size и Width: <HR SIZE=2 WIDTH=”10%”>
Размер шрифта
Размер шрифта измеряется в пунктах (один пункт равен 1/72 дюйма, или 0,353 мм). Он задается относительно размера, установленного в программе просмотра по умолчанию:
<font size= +n > Текст </font>
<font size= -n > Текст </font>
где n – число пунктов, на которое вы хотите увеличить или уменьшить размер шрифта. Шрифт текста, расположенного между тэгами <font size= ± n > и </font> будет увеличен или уменьшен.
Упражнение №3
Применим полученные знания к нашей страничке. Отредактируем файл ind2.htm и запишем его как файл ind3.htm.
<HTML>
<HEAD>
<TITLE>Моя страничка (заголовок)</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = Center> Привет! Это моя личная домашняя страничка! </H1>
<HR>
<H2> Мой город </H2>
<P> Я живу в <FONT SIZE = +2> Самаре </FONT>
<H3 ALIGN = Left> Мой Университет </H3>
<P ALIGN = LEFT> Я учусь в <U>СамГУ</U>
<H4 ALIGN = CENTER> Моя специальность </H4>
<p ALIGN = CENTER> Менеджмент
<H5 ALIGN = RIGHT> Мои увлечения </H5>
<P ALIGN = RIGHT> Мои увлечения — <B>музыка</B>, спорт. </P>
<HR>
<H6 ALIGN = CENTER> Design “Luch” </H6>
</BODY>
</HTML>
На экране программы просмотра мы увидим:
Списки
Очень важный элемент Web – страничек — списки. Они бывают:
нумерованными, например,
ОБУЧЕНИЕ И РАБОТА
1. автомеханик (отеч и иномарок).
(обучение 3 мес.)
2. бух учет – аудит (3 мес.)
3. делопроизводство (3 мес.)
4. парикмахер широкого профиля (2 мес.)
маркированными, например,
ВСЕРОССИЙСКОЕ
ОБЩЕСТВО СЛЕПЫХ
Продает:
· Электромоторы 180, 270 Вт
· Электромоторы 5,5 кВт
· Деревообрабатывающий станок
вложенными, то есть сочетающие в себе элементы того и другого списка.
Как показать их в своей страничке?
В нумерованном списке (Ordered List) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать флаги разметки
<ol>
<li>
<li>
<li>
</ol>
В маркированном списке (Unordered List) каждому элементу списка предшествует символ (пуля). Для создания маркированного списка используются следующие тэги:
<ul>
<li>
<li>
<li>
</ul>
Вложенный список (Nested Lists) включает элементы обоих списков, поэтому для его создания используются флаги нумерованного и маркированного списков:
<ol>
<li>
<ul>
<li>
<li>
</ul>
<li>
</ol>
Упражнение №4
Попробуем создать страничку, в которой текст будет организован с помощью списков трех видов. Создайте файл ind4.htm следующего содержания:
<HTML>
<HEAD>
<TITLE>Советы по изготовлению страничек</TITLE>
</HEAD>
<BODY>
<H2 ALIGN = LEFT> Советы по изготовлению страничек </H2>
<OL>
<LI>По возможности вовсе избегайте пиктограммы «В процессе производства»
<LI>Используйте соответствующий язык
<OL>
<UL>
<LI>Проверяйте как можно чаще ссылки на вашей странице
<LI>Не забывайте обновлять свою страничку!
</UL>
<OL>
<LI>Перед тем как положить готовую страничку на сервер надо:
<UL>
<LI>Проверить грамматические ошибки
<LI>Просмотреть свою страничку в разных программах просмотра
</UL>
</OL>
</BODY>
</HTML>
Откройте файл ind4.htm в программе просмотра и сравните изображение на экране с приведенным рисунком.
Цвет
Вы научились делать простые HTML документы. Теперь самое время раскрасить их, добавить графику. Рассмотрим простой способ изменения цвета.
У тэга <BODY> есть несколько параметров:
BGCOLOR — цвет фона;
TEXT — цвет текста;
LINK — цвет гипертекстовой связи;
VLINK — цвет гипертекстовой связи, уже посещенной в прошлом;
ALINK — цвет активной гипертекстовой связи;
Цвет можно указывать при помощи шестнадцатеричного значения или, в случае не очень сложных цветов, используя названия цвета
Некоторые из названий приведены в таблице:
| Black | Черный |
| White | Белый |
| Red | Красный |
| Purple | Пурпур |
| Green | Зеленый |
| Lime | Ярко-зеленый |
| Olive | Олива |
| Yellow | Желтый |
| Blue | Голубой |
Можно также подобрать и смешанные оттенки (использовать, например, таблицу цветов)
Упражнение №5
Создайте в текстовом редакторе HTML – файл ind5.htm.
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY bgcolor = black text = red>
<p>На данной страничке текст и изображения будут располагаться на черном фоне</P>
<p>Шрифт может быть<FONT COLOR=YELLOW> разного </FONT> цвета. </P>
</BODY>
</HTML>
Запустите программу просмотра и посмотрите, что у Вас получилось.
«Обои»
«Обои» представляют собой графический файл, обычно с расширением.GIF или.JPG. Это тот фон, на котором будет располагаться вся Ваша информация. В некоторых случаях они рисуются специально, с изображением логотипа или названием фирмы. Это довольно сложно, но если у Вас есть опыт работы в графических редакторах, то можно попытаться сделать «обои» самостоятельно.
Небольшая прогулка по WWW покажет Вам, как много разных серверов предлагает различные варианты «обоев» для Ваших страничек.
Возьмите любые понравившиеся Вам «обои» с какой-нибудь странички и сохраните файл в каталоге HTML, где хранятся все Ваши HTML документы. Назовите его bg1.jpg.
Упражнение №6
Создайте файл ind6.htm следующего содержания:
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY background = “bg01.jpg”>
<p><font size=+3> <b> На данной страничке текст и изображения будут располагаться на фоне «обоев»</b>
</font></P>
</BODY>
</HTML>
Обратите внимание на то, что размер шрифта увеличен специально для того, чтобы текст не сливался с фоном и хорошо читался.
Откройте файл ind6.htm в программе просмотра и просмотрите, что у Вас получилось.
В зависимости от используемого фона будут получаться разные результаты. Примеры двух возможных вариантов приведены ниже:
