телекомун_практики_2 сем / лаб_ 1 / Лаб1
.docЛабораторная работа № 1
Создать в редакторе документ HTML на основании примеров и просмотреть в Web-браузере.
Цель: Приобретение практических навыков создания простейших HTML-страниц
Задачи лабораторной работы:
-
Создайте на диске отдельную директорию (папку) для будущей страницы.
D:\users\ek-01-1\fio Теперь откроем блокнот и наберем следующий текст: <html> <head> <title>Моя первая страница </title> </head> <body>
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ УКРАИНЫ
НАЦИОНАЛЬНАЯ МЕТАЛЛУРГИЧЕСКАЯ АКАДЕМИЯ УКРАИНЫ
КАФЕДРА ЭКОНОМИЧЕСКОЙ ИНФОРМАТИКИ
ОТЧЕТ
о выполнении лабораторных работ по дисциплине “Интернет технологии”
Выполнил: Ст.гр. ЕК-01-1
ФИО
Принял: ст. преподов.
ФИО
Днепропетровск 2005
</body> </html>
Здесь тэги: <html> … </html> начало и конец страницы
head> </head> - голова документа для заголовка в Internet Explore(IE) <body> </body> - тело документа <title> - заголовок. А теперь сохраним этот документ, присвоив ему имя 1.html D:\ users\ek-01-1\fio\1.html Теперь откроем Internet Explore (блокнот не закрывать). Файл - Открыть - кнопка Обзор - Наш документ (1.html). Там вы увидите вашу страницу. Текст страницы не отформатирован и подается одной строкой.
При каждом обновлении документа в блокноте обязательно его «Сохранить»(CTR+S) и выполнить в IE меню«Вид – Обновить(F5)» или на панели инструментов.
-
Перейдите в блокнот и отформатируйте текст используя тэг <br> (перенос текста на другую строку, что-то вроде Enter). Вставте его между тэгами Body и посмотрите IE, что получится. Каждая строка документа должна быть отдельно.
Сохраним документ и откроем IE(блокнот не закрывать). Файл - Открыть - кнопка Обзор - Наш документ (1.html).
-
Окрасим документ в синий цвет.Цвета в документе задаватся в теге <body>: <body text="#336699"> Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным). Окрасим слово ОТЧЕТ в black - черный.
<font color="black"> ОТЧЕТ </font>
Существует 16 основных цветов: aqua - бирюзовый; black - черный; blue - синий; gray - серый; green - зеленый; lime - ярко-зеленый; maroon - темно-красный; white - белый; navy - темно-синий; olive - оливковый; purple - фиолетовый; red - красный; silver - светло-серый; teal - ярко-голубой; yellow - желтый; fuchsia - ярко-фиолетовый.
Кроме указанных основных цветов, есть дополнительные цвета:brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового, pink - розовый и др. Вместо указанных терминов для задания цвета можно использовать RGB-коды, например: #FFFFFF -белый (white), #FF0000 -красный (red). Меняя RGB-коды, можно подбирать желаемые цвета текста и фона.
Сохраним документ и откроем IE
-
Цвет фона в документе устанавливается в тэге <body>: <body text="#336699" bgcolor="yellow"> Здесь устанавливается желтый цвет (bgcolor="yellow). Если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body. Сохраним документ и откроем IE.
-
Для выравнивания и центровки текста используются параграфы. Они вводятся тэгом: <p></p>
С помощью параграфов можно:
Центрировать текст: <p align="center">текст</p>
Выровнять текст по левому краю: <p align="left">текст</p>
По правому краю: <p align="right">текст</p>
Выравнивает текст по обоим краям:
<p align="justify">текст</p>
Теперь преобразум документ к виду в пункте 1.
Сохраним документ и откроем IE.
-
Для выделения текст можно использовать заголовки и функции тэга <font></font>.
Заголовки:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Применим заголовки к следующей строке:
<H3> о выполнении лабораторных работ по дисциплине “Интернет технологии” </H3>
Заголовки предназначены для выделения небольшой части текста (строки, фразы), но, для выделения большого фрагмента текста, или только одно слово, при этом без переноса строки, то используется тэг <font></font>: <font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>
Применим тэг к следующему тексту:
<font size="+4"> ОТЧЕТ </font>
Сохраним документ и откроем IE.
-
Применение шрифтов к тексту. Как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>
<tt> fixed - фиксированный шрифт </tt>
Применим к одному фрагменту текста сразу несколько тэгов: <tt><b><i> Днепропетровск 2005</i></b> </tt>
Сохраним документ и откроем IE
8. Ответить на контрольные вопросы по лабораторной работе.
Контрольные вопросы по лабораторной работе № 1
1. Что такое Web-страница и какие существуют способы ее создания?
2. Дайте определения следующиму термину языка HTML - тег.
3. Какова общая структура документа HTML?
4. Какие теги форматирования текстового потока и абзацев Вы знаете?
5. Как задать цвет текста?
6. Как задать шрифты?
7. Как задать цвет фона?