Лабораторная работа № 8
Тема: Подготовка информации к публикации в Интернете и размещение ее на Web-сервере
Цель работы
Закрепить полученные на лекциях знания по основам работы с гипертекстовыми документами и приобрести практические навыки по подготовки информации к размещению на WEB-сервере в виде гипертекстовых документов.
Лабораторное оборудование
Персональный компьютер на базе Pentium IV, с установленным программным обеспечением и выходом в глобальную сеть Интернет.
Основные теоретические положения
HTML (Hypertext Markup Language) – язык разметки гипертекста, предназначенный для описания структуры страниц, которые могут быть просмотрены при помощи браузера. HTML позволяет форматировать текстовую информацию, а также создавать ссылки на другие ресурсы. Основой HTML являются так называемые тэги (tags).
Тэг – специальная метка HTML-метка, предназначенная для того, чтобы дать указание Web-браузеру, как именно необходимо интерпретировать расположенный после него текст. Представляет собой специальное служебное слово, заключенное в угловые скобки. Большинство тэгов имеют свою закрывающую пару, которая отменяет его действие. Тэговая пара в точности повторяет сам тэг, но отличается косой чертой (слешем), идущей сразу за открывающей угловой скобкой.
HTML-документ начинается тэгом <HTML> и заканчивается его парой </HTML>. Он имеет “голову” и “тело”, соответственно, тэговые пары <HEAD> </HEAD> и <BODY> </BODY>. Web-браузер выводит на экран ту информацию, которая размещена в теле HTML-документа. Следовательно, любой HTML- документ имеет следующую структуру:
< HTML >
<HEAD> </HEAD>
<BODY> </BODY>
</ HTML >
Любой текст, который записан внутри этой тэговой пары <TITLE>, будет выводиться, как заголовок окна Web-браузера при открытии этого документа. В секции <BODY> размещен простейший текст, который выводится в рабочем поле браузера.
Можно управлять внешним видом выводимого текста. Для этого существует тэговая пара <FONT></FONT>. У этого тэга есть несколько атрибутов. Атрибут FACE указывает Web-браузеру, каким именно шрифтом следует вывести текст, расположенный внутри этой тэговой пары:
<FONT FACE=”Arial”> Этот текст необходимо вывести шрифтом Arial</FONT >
У тэга <FONT> есть и другие атрибуты. Атрибут SIZE отвечает за размер символов выводимого текста. По умолчанию браузер выводит любой текст так, как будто бы атрибут SIZE равен 3. Если для этого атрибута указать число, больше 3, то соответственно и текст будет выведен шрифтом большего размера, если меньше – меньшего:
<FONT SIZE=5>Крупный шрифт</FONT>
<FONT SIZE=1>Мелкий шрифт</FONT>
Еще один важный атрибут – COLOR, управляющий цветом выводимого текста. В атрибуте COLOR любой цвет устанавливается, как комбинация красной, зеленой и синей составляющей (Red, Green, Blue – RGB). Указывается не процент того или иного цвета, содержащегося в комбинации, а некое число от 0 до 255, которое характеризует процентное соотношение данного цвета в комбинации. Все числа указываются не в десятичном, а в шестнадцатеричном виде.
Шестнадцатеричное число, это число, составленное из десяти цифр (от 0 до 9) и шести первых литер латинского алфавита (А, В, С, D, E, F). Например: 12, 3Е, 9F, А4, С2, FF и т.д. Атрибуту COLOR указывается цвет в виде триады: COLOR=#RGB:
<FONT COLOR=#FF0000>Красный шрифт</FONT>
<FONT COLOR=#00FF00>Зеленый шрифт</FONT>
<FONT COLOR=#0000FF>Синий шрифт</FONT>
<FONT COLOR=#C0C0C0>Серый шрифт</FONT>.
Следует кратко коснуться и остальных тэгов, которые чаще всего используются для создания дополнительных визуальных эффектов при работе с текстом. Применительно к оформлению текста, нас интересуют атрибуты BGCOLOR и TEXT. Атрибут BGCOLOR устанавливает цвет фона, а атрибут TEXT – цвет текста. Оба атрибута используют цветовую триаду RGB. В нижеприведенном фрагменте показана установка красного цвета символов на черном фоне для всего HTML –документа:
<BODY BGCOLOR=#000000 TEXT=#FF0000>
В любом месте документа цвет символов можно изменить с использованием уже известного нам тэга <FONT>, но вот цвет фона изменить нельзя.
Любой текстовый редактор позволяет менять начертание шрифта, делая текст жирным (bold),наклонным (italic) или подчеркнутым (underline). Все три варианта начертания можно получить, используя тэги, соответственно: <B></B>, <I></I>, <U></U>.
Существуют тэги, для заголовков. В последующем примере описано шесть заголовков, причем каждый последующий выводится шрифтом меньшего размера. Первый заголовок выводится самым крупным шрифтом:
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3>Заголовок 3</H3>
<H4>Заголовок 4</H4>
<H5>Заголовок 5</H5>
<H6>Заголовок 6</H6>
Пара тэгов <BIG> и </BIG> увеличивает размер символов, заключенных между ними на единицу. Причем речь идет о внутренних единицах HTML-документа. Уменьшение на единицу достигается тэгами <SMALL> и </SMALL>. Несколько подряд идущих тэгов увеличения (уменьшения) изменяют размер шрифта на несколько единиц.
Текст можно представить в виде списков. Чаще всего используются нумерованный список (тэговая пара <OL>) и маркированный список (тэговая пара <UL>). Каждый элемент списка обрамляется тэговой парой <LI>.
Сохранение HTML-документа в редакторе Notepad (Блокнот)
1.Выберите из меню «Файл» пункт «Сохранить как».
2.В появившейся диалоговой панели «Сохранение файла» из раскрывающегося списка «Тип файла» выберите «Все файлы» (По умолчанию стоит «Текстовые документы»).
3.В строке «Имя файла» введите: 03_01.htm (так будет называться наш первый HTML-документ).
4.В случае необходимости установите нужный каталог (на своей дискете).
5.Нажмите кнопку «Сохранить».
Фрейм (frame) — рамка, область страницы — позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы или Web-узла.
Для задания фреймов используется парный тег <Frameset> … </Frameset>, а для их описания — тэг <Frame>.
Для задания расположения и размеров фреймов в тэге <Frameset> используются атрибуты cols (столбцы) и rows (строки).
Дляописания содержания каждой области в тэге <Frame> используется атрибут src=имя_страниц.html
Примеры:
a) <Frameset Cols=«30%, 30%, *» >
<Frame src= “s1.html” >
<Frame src= “s2.html”>
<Frame src= “s3.html” >
</Frameset>
делит страницу на 3 вертикальные области, отводя на 1 и 2 по 30%, а на 3 – оставшуюся часть. И размещает в каждой части соответственно s1.html, s2.html и s3.html страницы.
b) Если в примере а) заменить Cols на Rows =«30%, 30%, *», то страница будет разделена на 3 горизонтальные области, 1 и 2 по 30%, а на 3 – оставшаяся часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.
c) <Frameset Cols= «30%, *» >
<Frame src= “s1.html” >
<Frameset Rows= «50%,50%» >
<Frame src= “s2.html” >
<Frame src= “s3.html”>
</Frameset>
</Frameset>
Страница будет разделена на 2 вертикальные области, отводя на 1 – 30%, и оставшуюся часть на вторую. Вторая область в свою очередь разделена на 2 горизонтальные области, по 50% на каждую часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.
Пример а) |
Пример b) |
Пример c) |
Замечание. Разбиение страницы на части можно выполнить так же с помощью тэга <Table> и парного тэга <Iframe></Iframe> (организовывает “плавающий” фрейм), внутри которого можно отобразить какой-либо документ или объект.
Другие атрибуты тэга <Frameset>:
- border=n – ширина границы фрейма;
- bordercolor=цвет – цвет границы фрейма.
Другие атрибуты тэга <Frame>:
- noresize – запрет изменения размера фрейма;
- frameborder=yes|no – соответственно оставить границу| убрать границу;
- scrolling=yes|no|auto – соответственно полосы прокрутки всегда присутствуют | полос прокрутки нет | полосы прокрутки присутствуют при необходимости;
- marginwidth=n и marginheight=n – управляют отступом изображения внутри фрейма (n – целое число)
- name=имя_фрейма – позволяет задать фрейму имя, которое затем может использоваться, например при создании гиперссылок.
Связь между фреймами. Для того чтобы страница, вызванная по гиперссылке, открылась в нужном фрейме, необходимо в тэге <A> в атрибуте target указать имя этого фрейма.
Например, если фрейму, отображающему страницу 2 задать имя «nomber2»:
<Frameset cols= «30%, *» >
<Frame src=s1.html >
<Frame src=s2.html name=nomber2>
</Frameset>
a в документе s1.html поместить ссылку:
<A href=s3.html target=nomber2> стр3 </A>
то страница 3 откроется не в первом, а во втором фрейме.
Содержание работы
Познакомиться с основами языка HTML.
1. Познакомиться со способами создания гипертекстовых документов.
2. Создать страницу index.html и несколько связанных с ней страниц (не менее 3). Темы страниц определяются автором.
3. Переслать созданные файлы в вашу личную папку на сервере ("ваша группа"\"ваш номер)".
4. Запустить Internet Explorer.
5. Перейти по ссылкам на вашу страницу и проверить результаты работы.
Вариант создания гипертекстовых документов:
- Создать документ Word в котором указать фамилию автора и группу, а также разместить информацию, которую вы желаете опубликовать на сервере.
- Сохранить этот документ в формате.rtf.
- При помощи html-редактора конвертировать этот файл в формат.html.
Требования к зачётным страницам:
- страницы должны быть посвящены какой-либо теме;
- в заголовке <title> файла index.html должны быть фамилия и группа автора;
- должны быть применены списки, таблицы, форматирование текста - вид, размер, цвет шрифта, ссылки на все подготовленные страницы (с возможностью возврата на вашу начальную страницу и между страницами), а также вставленные рисунки.
