Внесите изменения в текст файла HTML, расположив слова «Расписание», «занятий», «на вторник» на разных строках:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
расписание занятий на вторник
</body>
</html>
4. Сохраните внесенные изменения в файле RASP.HTM, с помощью команд Файл (File), Сохранить (Save) или сочетание клавиш ctrl+s.
5. Переключитесь на коно браузера и обновите страницу используя клавишу F5 или с помощью команд Вид(View), Обновить (Refresh). Изменилось ли изображение текста на экране?
Примечание
В дальнейшем после внесения изменений в исходный код html-страницы для того чтобы увидеть изменения всегда выполняйте п.п.4-5.
Задание 3. Тэги перевода строки и абзаца
1. Внесите изменения в текст файла HTML:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<p>расписание</p>
занятий<br>
на вторник
</body>
</html>
2. Сохраните внесенные изменения в файле RASP.HTM.
3. Обновите страницу в браузере. Как изменилось изображение текста на экране?
Новые теги в этом разделе:
<p> - новый абзац. Можно в конце абзаца
поставить </p>, но это не обязательно.
<br> - перевод строки, этот тег не нужно закрывать (не существует тега </br>)
Задание 4. Выделение фрагментов текста
Информация. Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<b> расписание </b><i>занятий</i> <u> на вторник</u>
</body>
</html>
2. Посмотрите новую полученную html-страницу.
Задание 5. Задание размера текущего шрифта.
Информация. Тэг шрифта <font> позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body>
<fontsize="7"> расписание занятий на вторник</font>
</body>
</html>
2. Самостоятельно измените размер шрифта для текста «занятия на вторник», используя тэг <font>.
3. Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца
Задание 6. Гарнитура и цвет шрифта
Информация. Примеры записи цвета в RGB приведены в таблице 4.
Таблица 4.
Атрибут face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
Внесите изменения в файл 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. Выравнивание текста по горизонтали
Информация. Атрибут align задает выравнивание содержимого колонок по горизонтали. Может принимать следующие значения:
Left - Выравнивание контента по левому краю.
Center - Выравнивание по центру.
Right - Выравнивание по правому краю.
Justify - Выравнивание по левому и правому краю.
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
Задание 8. Задание цвета фона и текста
Информация. Для задания цвета фона на стрнице используется атрибутbgcolorтега <body>, при установлении атрибутаtextэтого же тега цвет текста на странице будет изменен на указанный, кроме тех тегов, где был задан определенный цвет для текста.
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. Размещение графики на html-странице
Информация. Тэг <img> позволяет вставить изображение в документ. Изображение появится в том месте документа, в котором записан этот тэг. Команда записывается с одиночным тэгом, т.е. закрывающий тэг не применяется.
Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Для выполнения упражнения считаем, что графический файл Wagon.gif хранится в рабочем каталоге HTML, где находится и наша html-страница.
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>
</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. Задание фонового изображения на html-странице.
Информация. Для задания фонового изображения используется атрибут backgroundтега <body>, он определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады.
1. Внесите изменения в файл RASP.HTM:
<html>
<head>
<title> учебный файл html </title>
</head>
<body background="bgr.jpg" text= "#56c2dd">
<p align=center>
<font color= "#e8df7a" size= "7"><b> расписание
</b></font><br>
<font size= "6"> <i>занятий на вторник</i></font><br><br>
</p>
</body>
</html>
На экране вы увидите (рис. 54):
Рис. 54.
На самом деле графический файл BGR.GIF выглядит так ( рис. 55):
Рис. 55
Задание 5. Ссылки.
Информация. Для создания ссылки используется тег <a></a>. Чтобы эта ссылка на что-то указывала необходимо указать атрибуту hrefпуть. Пример: <a href="file.html">ссылка</a>.
Принципы прописывания пути:
(1) - <a href="file.html"> ссылка </a> (2) - <a href="folder/ file.html"> ссылка </a> (3) - <a href="http://www.homepage.ru/prf.html"> ссылка </a>
В случае (1) документ лежит в той же директории (папке), что и текущий, в случае (2) документ лежит в поддиректории /folder, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Ссылкой также может быть текст (фраза, слово), а может быть и картинка
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.
