UMKD_KSIM
.pdfСоздание простейших файлов HTML
Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
1.Создайте папку HTML, в которой мы будем сохранять созданные Web-страницы.
2.Запустите стандартную программу Блокнот (Notepad).
3.Наберите в окне редактора простейший текст файла HTML:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
расписание занятий на вторник
</body>
</html
4.Сохраните файл под именем RASP.HTM
5.Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
6.Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор – Browse) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.
Задание 2. Управление расположением текста на экране
1.При необходимости выполните п.п. 5-6 задания 1.
2.Откройте первоисточник Web-страницы – в меню броузера Вид (View )– Просмотр HTML-кода откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах
HTML.
3.Внесите изменения в текст файла HTML, расположив слова «Расписание», «занятий», «на вторник» на разных строках:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
расписание
занятий на вторник
150
</body>
</html>
4.Сохраните внесенные изменения в файле RASP.HTM, с помощью команд Файл (File), Сохранить (Save). Закройте программу Блокнот (Notepad).
5.Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью команд Вид(View), Обновить (Refresh). Изменилось ли изображение текста на экране?
Примечание
В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.
Задание 3. Тэги перевода строки и абзаца
1. Внесите изменения в текст файла HTML:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
расписание<p> занятий<br> на вторник
</body>
</html>
2.Сохраните внесенные изменения в файле RASP.HTM.
3.Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу. Как изменилось изображение текста на экране?
Задание 4. Выделение фрагментов текста Информация. Тэги выделения фрагментов текста позволяют управ-
лять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным, <I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
1. Внесите изменения в файл RASP.HTM: <html>
151
<head>
<title> учебный файл html </title> </head>
<body>
<b> расписание </b><i>занятий</i> <u> на вторник</u>
</body>
</html>
2. Посмотрите новую полученную Web-страницу.
Задание 5. Использование стилей заголовка
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
<h1> расписание </h1><i>занятий</i> <u> на вторник</u>
</body>
</html>
2. Посмотрите новую полученную Web-страницу.
Задание 5. Задание размера текущего шрифта.
Информация. Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
<font size=«7»> расписание </font>
занятий на вторник
</body>
</html>
2.Самостоятельно измените размер шрифта для текста «занятия на вторник», используя тэг <FONT>.
3.Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.
152
Задание 6. Гарнитура и цвет шрифта
Примеры записи цвета в формате RGB приведены в таблице 4: Таблица 4.
|
Цвет |
RRGGBB |
|
Цвет |
RRGGBB |
black |
черный |
000000 |
purple |
фиолетовый |
FF00FF |
white |
белый |
FFFFFF |
yellow |
желтый |
FFFF00 |
red |
красный |
FF0000 |
brown |
коричневый |
996633 |
green |
зеленый |
00FF00 |
orange |
оранжевый |
FF8000 |
azure |
бирюзовый |
00FFFF |
violet |
лиловый |
8000FF |
blue |
синий |
0000FF |
gray |
серый |
A0A0A0 |
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
<u><i><b> <font color= «#ff0000» face= «arial» size= «7»> расписание
</font> ></b></i></u>
занятий на вторник
</body>
</html>
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Задание 7. Выравнивание текста по горизонтали
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body>
<p align=center>
<font color= «#008080» size= «7»><b> расписание </b></font><br>
<font size= «6»><i>занятий на вторник</i></font>
</p>
</body>
</html>
153
Задание 8. Задание цвета фона и текста
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body bgcolor= «#ffffcc» text= «#330066»> <p align=center>
<font color= «#008080» size= «7»><b> расписание </b></font><br>
<font size= «6»><i>занятий на вторник</i></font> </p>
</body>
</html>
Лабораторная работа № 8. Вставка изображение в HTML-документ
Задание 1. Размещение графики на Web-странице
Информация. Тэг <IMG …> позволяет вставить изображение в документ. Изображение появится в том месте документа, в котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге HTML, где находится и наша Webстраница.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body bgcolor= «#ffffff» text= «#330066»> <p align=center>
<font color= «#008080» size= «7»><b> расписание </b></font><br>
<font size= «6»> <i>занятий на вторник</i></font><br><br>
<img src= «wagon.gif»>
</p>
</body>
154
</html>
Тэг <IMG …> имеет немало атрибутов (см. таблицу 5), которые можно задавать дополнительно. Они могут располагаться где угодно в тэге после кода IMG.
Таблица 5. Атрибуты изображения
Атрибут |
Формат |
|
Описание |
|
|
|
ALT |
<IMG |
Если броузер не воспринимает |
||||
|
SRC=«Wagon.gif» |
изображение, вместо него появ- |
||||
|
ALT= «картина»> |
ляется заменяющий текст. |
|
|||
|
|
|
|
|
||
BORDER |
<IMG |
Задает |
толщину рамки |
вокруг |
||
|
SRC=«Wagon.gif» |
изображения. |
Измеряется |
в |
||
|
BORDER= «3»> |
пикселах. |
|
|
|
|
ALIGN |
<IMG |
Выравнивает |
изображение |
от- |
||
|
SRC=«Wagon.gif» |
носительно текста: |
|
|
||
|
ALIGN=TOP> |
по верхней части изображения |
||||
|
|
– TOP, |
|
|
|
|
|
|
по нижней – BOTTOM, |
|
|
||
|
|
по средней – MIDDLE. |
|
|
||
HEIGHT |
<IMG |
Задает |
вертикальный |
размер |
||
|
SRC=«Wagon.gif» |
изображения внутри окна бро- |
||||
|
HEIGHT=111> |
узера. |
|
|
|
|
WIDTH |
<IMG |
Задает |
горизонтальный |
размер |
||
|
SRC=«Wagon.gif» |
изображения внутри окна бро- |
||||
|
WIDTH=220 > |
узера. |
|
|
|
|
VSPACE |
<IMG |
Добавляет верхнее и |
нижнее |
|||
|
SRC=«Wagon.gif» |
пустые поля. |
|
|
|
|
|
VSPACE= «8»> |
|
|
|
|
|
HSPACE |
<IMG |
Добавляет левое и правое пус- |
||||
|
SRC=«Wagon.gif» |
тые поля. |
|
|
|
|
|
HSPACE= «8»> |
|
|
|
|
|
Задание 2. Атрибуты изображения.
1. Самостоятельно внесите изменения в файл RASP.HTM, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH.
Примечание. Всегда обращайте внимание на размеры (объем в байтах) своего графического файла, т.к. это влияет на время загрузки Webстраницы.
Задание 3. Фоновое изображение графики на Web-странице Информация. Фоновое изображение – это графический файл с изо-
155
бражением небольшой прямоугольной плашки. При просмотре в броузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY> в начале файла HTML.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title> </head>
<body background= «bgr.gif» text= «#330066»> <p align=center>
<font color= «#008080» size= «7»><b> расписание </b></font><br>
<font size= «6»> <i>занятий на вторник</i></font><br><br> </p>
</body>
</html>
На экране вы увидите (рис. 54):
Рис. 54.
На самом деле графический файл BGR.GIF выглядит так ( рис. 55):
156
Рис. 55.
Задание 4. Таблицы.
Информация. Таблицы представляют собой особую часть HTMLдокумента. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой.
Ячейки могут содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:
•название таблицы,
•заголовки столбцов,
•ячейки.
Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Теги оформления таблиц
Тег |
Форма записи |
Примечание |
|
TABLE |
<TABLE> |
|
Объявление таблиц |
|
текст</TABLE> |
|
|
TR |
<TR>текст</TR> |
|
Тег строки |
TD |
<TD>текст</TD> |
Тег данных |
|
|
Атрибуты тега <TABLE> |
||
Атрибут |
Форма записи |
Примечание |
|
BORDER |
<TABLE |
BOR- |
Задает рамку вокруг табли- |
|
DER=X> |
|
цы |
WIDTH |
<TABLE |
|
Задает ширину таблицы как |
|
WIDTH=XX%> |
|
ХХ% от ширины страницы |
|
|
|
или как ХХ пикселов |
BGCOLOR |
<TABLE BGCOLOR= |
Задает цвет фона таблицы |
|
|
«#RRGGBB»> |
|
|
|
157 |
|
|
Атрибуты тегов <TD> и <TR>
Атрибут |
|
Форма записи |
Примечание |
|
ALIGN |
<TD ALIGN=X> |
Устанавливает |
выравнива- |
|
|
|
|
ние по горизонтали (Right, |
|
|
|
|
Left, Center) |
|
VALIGN |
<TD VALIGN=X> |
Устанавливает |
выравнива- |
|
|
|
|
ние по вертикали (Top, Mid- |
|
|
|
|
dle, Bottom, Baseline) |
|
BGCOLOR |
<TD |
BGCOLOR= |
Задает цвет фона ячейки |
|
|
«#RRGGBB»> |
|
|
|
1.Запустите стандартную программу Блокнот (Notepad).
2.Наберите в окне редактора:
<html>
<head>
<title> Расписание занятий 5 классов </title> </head>
<body bgcolor= «#ffffff»> <p align=center>
<font color= «red» size= «6» face= «arial»><b> 5 класс </b></font><br>
</p>
<font color= «blue» size= «4» face=«courier»> <b> понедельник </b></font><br>
<table border=«1» width=100% bgcolor=«#99cccc»> <tr bgcolor=«#ccccff» align=center>
<td>урок</td> <td>5 а</td> <td>5 б</td> <td>5 в</td> </tr>
<tr>
<td>1</td> <td>русский язык</td> <td>литература</td> <td>история</td>
</tr>
<tr>
<td>2</td> <td>алгебра</td> <td>информатика</td> <td>англ.язык</td>
</tr>
<tr>
<td>3</td> <td>история</td> <td>информатика</td> <td> алгебра </td>
</tr>
</table>
</body>
</html>
158
3.Сохраните файл под именем 5.HTM
4.Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
Задание 5.
1. Дополните полученную Web-страницу по аналогии расписанием на последующие дни: ВТОРНИК, СРЕДУ, ЧЕТВЕРГ, ПЯТНИЦУ, СУББОТУ.
Лабораторная работа № 9. Списки и гиперссылки
Задание 1. Маркированные и нумерованные списки
1.Создайте новый документ HTML. Назовите его Список.htm
2.Ниже тега <body> введите
<h2 align=center> Список предстоящих экзаменов </h2>
3. Создайте маркированный список предстоящих экзаменов. Для создания маркированного списка используется пара тегов <ul> </ul> которая ограничивает список. Каждый элемент списка должен начинаться тегом <li>, причем нет необходимости закрывать данный тег. Для указания конкретного вида маркера в теге <li> предусмотрен атрибут type. Значение атрибута disk задает отображение маркера в виде закрашенных кружков, circle – в форме пустых окружностей, square – в виде закрашенных квадратиков. По умолчанию маркеры имеют форму окружности.
Пример.
<ul> <li>Математика <li>Информатика <li>История <li>Философия <li>Биология
</ul>
4. Ниже списка экзаменов создайте заголовок «список зачетов» и введите их пронумерованный список. Для этого воспользуйтесь тегом <ol>...</ol>. Каждый элемент списка должен начинаться тегом <li>. Тег <ol> имеет следующие атрибуты:
type – указывает вид нумерации в списке. Значение атрибута 1 задает нумерацию в виде арабских цифр. А – с помощью прописных латинских букв, а– в виде строчных латинских букв, I – с помощью больших римских цифр, i – и виде маленьких римских цифр. По умолчанию элементы списка
159