-
Лабораторная работа №1 Тема: «Создание простейшего HTML-документа. Форматирование текста».
СКАЧАТЬ:
Лабораторная работа №1
Тема: «Создание простейшего HTML-документа.
Форматирование текста».
Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.
Оборудование и программное обеспечение: ПК, ОС WindowsXP, InternetExplorer, текстовый редактор Блокнот.
Теоретический материал:
Структура 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”);
Например, <BODYBGCOLOR = "blue” TEXT = "red”> - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)
Списки:
Ненумерованный список располагается внутри контейнера <UL>…</UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc” (диск),
"square” (квадрат), "circle” (окружность). Например,
(маркированный список, маркер в виде окружности)
<UL TYPE = CIRCLE>
<LI>текст</LI>
<LI> текст </LI>
<LI> текст </LI>
</UL>
Ход работы:
- Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.
- Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - ComicSans MS, размер – 1, цвет шрифта – голубой, подчеркивание;
- Задать цвет фона страницы – бирюзовый цвет;
- Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;
- Цвет текста в первом абзаце задать белым цветом, тип шрифта - MonotypeCorsiva, размер – 7;
- Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;
- Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;
- В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;
Листинг html-программы:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY bgcolor='orange'>
<font face='Comic Sans Ms' color='red'>
<H1 ALIGN = 'CENTER'><u> Все о компьютере </u></H1>
</font>
<palign='left'><fontface='MonotypeCorsiva' color='white' size=7> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </font></p>
<palign='center'><fontface='Arial' color='lime' size=6> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font></p>
<palign='right'><fontface='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-документ и для их преобразования.
Оборудование и программное обеспечение: ПК, ОС WindowsXP, InternetExplorer, текстовый редактор Блокнот.
Теоретический материал:
<IMGSRC = "имя файла.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”>выравниваниеполевомукраю
<IMGSRC = " имя файла.jpg (gif, png)” ALIGN = "TOP”> выравнивание текста по верхней кромке изображения
<IMGSRC = " имя файла.jpg (gif, png)” ALIGN = "BOTTOM”> выравнивание текста по левой кромке изображения
<IMGSRC = " имя файла.jpg (gif, png)” ALIGN = "MIDDLE”> выравнивание текста по средней кромке изображения
<IMGSRC = " имя файла.jpg (gif, png)” BORDER = "3”> обрамление графического объекта
<IMGSRC = " имя файла.jpg (gif, png)” HSPACE = "30”VSPACE = "30”> вставка пустой области вокруг изображения
<IMGSRC = " имя файла.jpg (gif, png)” WIDTH = "110”HEIGHT = "220”> изменение размера изображения
<EMBEDSRC = " имя файла.wav> вставка звуковых объектов
<EMBEDSRC = " имя файла.wavWIDTH = " ” HEIGHT = " ”> атрибуты для задания размеров экранных элементов
Ход работы:
- Вставить изображение в текст:
выравнивание текста по верхнему краю рисункавыравнивание текста по центру рисункавыравнивание текста по нижнему краю рисунка- Использовать рамки вокруг рисунка:
рисунок без рамки
рамка 2 пикселя
рамка 5 пикселей
рамка 10 пикселей- Создать плавающие рисунки с обтекающим текстом вокруг них:
тексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттекст- Изменить размеры изображения:
Без изменения размера - Параметр height=60
- Параметр width=55
Не пропорциональное изменения размера:
height=40 width=80 - Создание плавающих
рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей
вокруг них
текст тексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттекст
тексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттекст
тексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттексттекст
- Вставить звук на страницу.
- Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB.
- Листинг html-программы:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY bgcolor='«#008080'>
<font face='Comic Sans Ms' color='blue'>
<H1 ALIGN = 'CENTER'><u> Все о компьютере </u></H1>
</font>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' style='vertical-align:top' border='1'>
<fontface='MonotypeCorsiva' color='white' size=2> На этом сайте вы сможете получить различную информацию о компьютере, его про
граммном обеспечении и ценах на компьютерные комплектующие.</font><br>
<imgsrc='D:\работа, учеба\длякурсовика\dp_ua.gif' style='vertical-align:middle' border='1'>
<fontface='Arial' color='pink' size=2> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font><br>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' border='1'>
<fontface='Calibri' color='yellow' size=2> На этом сайте вы можете узнать много новой и полезной информации для вас.</font><br>
<hr>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif'><br>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' border='2'><br>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' border='5'><br>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' border='10'><br>
<hr>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='left'><imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='right'><fontcolor='red' size=6><b> Процессор </b></font> - это центральное устройство, производящее обработку информации в двоичном коде.
<hr>
<imgsrc='D:\работа, учеба\для курсовика\для лаб.jpg' width='39' height='53'><br>
<imgsrc='D:\работа, учеба\для курсовика\для лаб.jpg' width='39' height='60'><br>
<imgsrc='D:\работа, учеба\для курсовика\для лаб.jpg' width='55' height='53'><br>
<imgsrc='D:\работа, учеба\для курсовика\для лаб.jpg' width='80' height='40'><br>
<hr>
<font face='Calibri' color='pink' size=5>
Публикации во Всемирной паутине реализуется с помощью web-сайтов.
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='left' hspace='10' vspace='10'>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='right' hspace='10' vspace='10'>
Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и web-сайт состоит из компьютерных web-страниц. Сайт является интерактивым средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='left' hspace='20' vspace='20'>
<imgsrc='D:\работа, учеба\для курсовика\dp_ua.gif' align='right' hspace='20' vspace='20'>
зарегестрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную
страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы. Гиперссылки также имеются на других web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту. Web-сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию.</font>
<EMBED SRC = " имяфайла. wav WIDTH = " ” HEIGHT = " ”>
</BODY>
</HTML>
Вернуться
Просмотров: 8 767
При использовании материалов ссылка на источник обязательна. TatMan.ru Copyright 2016
