Оформить отчет и предъявить работу преподавателю
Лабораторная работа №8
Часть 1. «Создание простейшего HTML-документа.
Форматирование текста».
Цель выполнения: ознакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.
Теоретический материал:
Структура html-документа:
HTML-код страницы помещается внутрь контейнера <HTML> ... </HTML>, заголовок страницы в контейнер <HEAD> Заголовок </HEAD>.
Контейнер обязательно содержит открывающий и закрывающий теги.
В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).
Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <BODY> содержание </BODY> (содержание страницы).
<HTML> {начало страницы}
<HEAD> {описание страницы, заголовка}
<TITLE> название </TITLE> {имя страницы}
</HEAD> {закрытый тэг описания заголовка}
<BODY> {содержание страницы}
Текст
</BODY> {закрытый тэг описания страницы}
</HTML> {конец страницы}
Основные тэги форматирования html-документа:
Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)
Заголовок страницы целесообразно выделить самым крупным шрифтом: <H1> заголовок страницы </H1> (например, <H1> Все о компьютере </H1>)
</H1> заголовок страницы </H6> - в данном случае заголовок будет записан самым мелким шрифтом;
Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: <H1 ALIGN = “RIGHT”> Все о компьютере </H1>
<ALIGN = “RIGHT”> {выравнивание текста по правому краю}
<ALIGN = “CENTER”> {выравнивание текста по центру}
<ALIGN = “LEFT”> {выравнивание текста по левому краю}
Для задания параметров форматирования используется контейнер <FONT>...</FONT>, при этом используя различные атрибуты:
Атрибут FACE позволяет задать гарнитуру шрифта;
Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);
Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));
Например, <FONT SIZE = “7” FACE = “Arial” COLOR = “Blue> ... </FONT> (шрифт размера 7, тип шрифта – Arial, цвет - голубой);
Также можно задавать начертание текста или фрагмента текста:
<B> текст </B> - полужирный шрифт;
<I> текст </I> - начало текста курсивом;
<U> текст </U> - подчёркивание;
Комбинированное выделение осуществляется следующим образом:
<Тэг-1><Тэг-2> фрагмент текста </Тэг-2></Тэг-1>
Например, <B><U> фрагмент текста </U></B> (текст полужирный и подчеркнутый);
При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);
Например, <BODY BGCOLOR = “blue” TEXT = “red”> - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)
Списки:
Ненумерованный список располагается внутри контейнера <UL>…</UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск),
“square” (квадрат), “circle” (окружность). Например,
(маркированный список, маркер в виде окружности)
<UL TYPE = CIRCLE>
<LI> текст </LI>
<LI> текст </LI>
<LI> текст </LI>
</UL>
Ход работы:
1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.
2. Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;
3. Задать цвет фона страницы – бирюзовый цвет;
4. Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;
5. Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;
6. Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;
7. Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;
8. В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;
Листинг html-программы:
<HTML>
<HEAD>
<TITLE> ИПС </TITLE>
</HEAD>
<BODY bgcolor='orange'>
<font face='Comic Sans Ms' color='red'>
<H1 ALIGN = 'CENTER'> <u> Все про информационный поиск </u> </H1>
</font>
<p align='left'> <font face='Monotype Corsiva' color='white' size=7> На этом сайте вы сможете получить различные сведения про информационный поиск, современные информационно-поисковые системы и их разновидностях. </font></p>
<p align='center'> <font face='Arial' color='lime' size=6> Терминологический словарь познакомит вас с понятиями информационного поиска. </font> </p>
<p align='right'> <font face='Calibri' color='yellow' size=5> На этом сайте вы можете узнать много новой и полезной информации для вас.</p>
<font color='aqua'>
<ul type=circle>
<li> <b> ИПС </b> </li>
<li> <b> Терминологический словарь </b> </li>
<li> <b> Современные ИПС </b> </li>
</ul>
</font>
</BODY>
</HTML>
Часть 2. «Вставка изображений в html-документ»
Цель выполнения: изучить основные тэги для вставки изображений в html-документ и для их преобразования.
Теоретический материал:
<IMG SRC = “имя файла.jpg (gif, png)”>
<IMG SRC = “C:\Documents and Settings\User\ Мои документы\....jpg”>
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “RIGHT”> выравнивание по правому краю
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “LEFT”> выравнивание по левому краю
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “TOP”> выравнивание текста по верхней кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “BOTTOM”> выравнивание текста по левой кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” ALIGN = “MIDDLE”> выравнивание текста по средней кромке изображения
<IMG SRC = “ имя файла. jpg (gif, png)” BORDER = “3”> обрамление графического объекта
<IMG SRC = “ имя файла. jpg (gif, png)” HSPACE = “30” VSPACE = “30”> вставка пустой области вокруг изображения
<IMG SRC = “ имя файла. jpg (gif, png)” WIDTH = “110” HEIGHT = “220”> изменение размера изображения
<EMBED SRC = “ имя файла. wav> вставка звуковых объектов
<EMBED SRC = “ имя файла. wav WIDTH = “ ” HEIGHT = “ ”> атрибуты для задания размеров экранных элементов
Ход работы:
1. Вставить изображение в текст:
выравнивание текста по верхнему краю рисунка
выравнивание текста по центру рисунка
выравнивание текста по нижнему краю рисунка
2. Использовать рамки вокруг рисунка:
рисунок без рамки
рамка 2 пикселя
рамка 5 пикселей
рамка 10 пикселей
3. Создать плавающие рисунки с обтекающим текстом вокруг них:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
4. Изменить размеры изображения:
a. 
Без изменения размера
b. Параметр height=60
c. Параметр width=55
d. 
Не пропорциональное изменения размера: height=40 width=80
5. Создание плавающих рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей вокруг них
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
6. Вставить звук на страницу.
7. Сохранить этот документ под любым именем с расширением .htm.
Листинг html-программы:
<HTML>
<HEAD>
<TITLE> ИПС </TITLE>
</HEAD>
<BODY bgcolor='«#008080'>
<font face='Comic Sans Ms' color='blue'>
<H1 ALIGN = 'CENTER'> <u> Все про информационный поиск </u> </H1>
</font>
<img src='D:\Лабораторная работа\dp_ua.gif' style='vertical-align:top' border='1'>
<font face='Monotype Corsiva' color='white' size=2> На этом сайте вы сможете получить различные сведения про информационный поиск, современные информационно-поисковые системы и их разновидностях.</font> <br>
<img src='D:\Лабораторная работа\dp_ua.gif' style='vertical-align:middle' border='1'>
<font face='Arial' color='pink' size=2> Терминологический словарь познакомит вас с понятиями информационного поиска. </font> <br>
<img src='D:\Лабораторная работа\dp_ua.gif' border='1'>
<font face='Calibri' color='yellow' size=2> На этом сайте вы можете узнать много новой и полезной информации для вас.</font> <br>
<hr>
<img src='D:\ Лабораторная работа \dp_ua.gif'> <br>
<img src='D:\ Лабораторная работа \dp_ua.gif' border='2'> <br>
<img src='D:\ Лабораторная работа \dp_ua.gif' border='5'> <br>
<img src='D:\ Лабораторная работа \dp_ua.gif' border='10'> <br>
<hr>
<img src='D:\Лабораторная работа\dp_ua.gif' align='left'> <img src='D:\ Лабораторная работ\dp_ua.gif' align='right'> <font color='red' size=6><b> ИПС </b></font> - совокупность информационно-поискового языка, правил перевода с естественного языка на информационно-поисковый и обратного перевода, а также критерия соответствия, предназначенная для осуществления информационного поиска.
<hr>
<img src='D:\Лабораторная работа\для лаб.jpg' width='39' height='53'><br>
<img src='D:\Лабораторная работа\для лаб.jpg' width='39' height='60'><br>
<img src='D:\Лабораторная работа\для лаб.jpg' width='55' height='53'><br>
<img src='D:\Лабораторная работа\для лаб.jpg' width='80' height='40'><br>
<hr>
<font face='Calibri' color='pink' size=5>
Публикации во Всемирной паутине реализуется с помощью web-сайтов.
<img src='D:\Лабораторная работа\dp_ua.gif' align='left' hspace='10' vspace='10'>
<img src='D:\Лабораторная работа\dp_ua.gif' align='right' hspace='10' vspace='10'>
Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и web-сайт состоит из компьютерных web-страниц. Сайт является интерактивым средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может
<img src='D:\Лабораторная работа\dp_ua.gif' align='left' hspace='20' vspace='20'>
<img src='D:\Лабораторная работа\dp_ua.gif' align='right' hspace='20' vspace='20'>
зарегестрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы. Гиперссылки также имеются на других web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту. Web-сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию.</font>
<EMBED SRC = “ имя файла. wav WIDTH = “ ” HEIGHT = “ ”>
</BODY>
</HTML>
Оформить отчет и предъявить работу преподавателю.