Желательно скопировать изображение в папку, где располагается файл Визитка.htm.




Выравнивание рисунка по горизонтали задаётся в теге <P>. Например: <p align="center" >

<img src="i.gif" width="400" height="200"></p>.

В теге IMG с помощью атрибутов WIDTH (ширина) и HEIGHT (высота) можно указать размер выводимой картинки (в пикселях). Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left, right. Разместите своё изображение определённого размера с применением различных значений атрибута ALIGN.

 

7. Для выделения фрагментов текста используется тег <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE – размер символов. Например:

<font size="3" color="FF00FF" face="Arial"> Текст… </FONT>.

Выравнивание текста по горизонтали задаёт атрибут ALIGN. Все возможные значения: left – выравнивание по левому краю, center – по центру, right – по правому краю. Например, выровнять заголовок по центру страницы:

<h1 align="center"> Заголовок </h1>.

8. Связать Web – страницу с другими документами можно с помощью универсального тега <A> и его атрибута HREF, указывающих, в каком файле хранится вызываемый ресурс.

<a href="FILE.htm">Указатель ссылки</a>

FILE.htm – путь к файлу или его URL – адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web – страница, то можно указать только имя файла. Указатель ссылки в окне браузера выделяется подчёркиванием и особым цветом. При указании на него мышью ее курсор превращается в значок «рука». Щелчок мыши по указателю вызывает переход на документ, указанный в гиперссылке.

Готовая Web – страница представлена на рис. 2.

 

 

Рис. 2. Отображение страницы в браузере

 

 

Примерный текст программы:

 

<html>

<head>

<title >Визитная карточка</title>

</head>

<body bgcolor="FFFFCC" background="2.jpg"

text="993300" link="55FFAA" alink="FF0000" vlink="00FF00">

<h1 align="center">Иванов Александр Иванович</h1>

<h2 align="center"><b>Привет всем Вам!!!!</b></h2><font size="3" color="FF00FF" face="Arial">

<dt ><i>Меня зовут Александр. Я родился в 1987 году, и это означает, что мне сейчас 19 лет. Я учусь на факультете транспортных систем в группе № 160. В КГУ мне учиться нравится. Каждый день узнаёшь много нового и интересного. Здесь некогда скучать. В перерывах между занятиями я общаюсь со своими друзьями. После занятий мы вместе ходим на тренировки, учимся вождению. Я выбрал этот факультет, потому что моё увлечение - <a href="авто.htm">легковые автомобили</a>. Я могу говорить об этом часами. Покупаю автомобильные журналы, общаюсь на эту тему с друзьями </i></dt></font>

<p align="center" ><b><font size="5" color="993300" >Я рад <a href="я.htm">познакомиться </a>со всеми, кто разделяет мои увлечения</b></p></font>

<p align="center" > <img src="i.gif" width="400" height="200"></p>

</body>

</html>

 

 

4. ВАРИАНТЫЗАДАНИЙ

1. Создать Web – страницу на тему «Моя личная страничка», которая должна следующую содержать информацию:

Ø Фамилию, имя, отчество и краткую информацию о создателе, которая должна быть представлена на сером фоне. Текст должен отображаться синим цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – фиолетовым, цвет просмотренной ссылки – коричневый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 300Х300 пикселей должен располагаться справа от текста.

Ø Ссылку на страницу, которая содержит информацию о хобби владельца и 2 – 3 рисунка, иллюстрирующие это хобби.

Примечание. При оформлении станицы о хобби должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

2. Создать Web – страницу на тему «Автосалон», которая должна следующую содержать информацию:

Ø Название, адрес и краткую информацию о салоне, продающем автомобили. Информация должна отображаться на светло-зеленом фоне. Текст должен отображаться черным цветом (шрифт – Times New Roman, размер шрифта – 16), текст ссылки – фиолетовым, цвет просмотренной ссылки – темно-зеленый.

Ø Заголовок должен быть отформатирован по центру и задан фиолетовым цветом.

Ø Рисунок в формате gif размером 400Х300 пикселей должен располагаться слева от текста.

Ø Две ссылки на страницы, которые содержат информацию о конкретных марках автомобилей, продаваемых в салоне. На каждой из этих страниц должно располагаться по одному рисунку.

Примечание. При оформлении станицы о моделях должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

3. Создать Web – страницу на тему «Университет», которая должна следующую содержать информацию:

Ø Название и адрес университета, а также краткую информацию о специальностях, которые можно получить в университете. Информация должна быть представлена на светло-голубом фоне. Текст должен отображаться синим цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – фиолетовым, цвет просмотренной ссылки – зеленый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 400Х400 пикселей должен располагаться слева от текста.

Ø Ссылку на страницу, которая содержит информацию об одной из специальностей университета подробно. На данной странице расположите 2 – 3 рисунка, иллюстрирующие эти специальности.

Примечание. При оформлении станицы о специальности должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

4. Создать Web – страницу на тему «Моя будущая профессия», которая должна следующую содержать информацию:

Ø Название профессии, фамилию, имя и отчество создателя Web-страницы и краткую информацию о будущей профессии. Информация должна отображаться на светло-сером фоне. Текст должен отображаться фиолетовым цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – красным, цвет просмотренной ссылки – оранжевый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 200Х400 пикселей должен располагаться слева от текста.

Ø Ссылку на страницу, которая содержит информацию об известных людях, посвятивших себя этой профессии. На данной странице расположите 2 – 3 рисунка, иллюстрирующие выбранную профессию.

Примечание. При оформлении данной станицы должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

5. Создать Web – страницу на тему «Мой город», которая должна следующую содержать информацию:

Ø Название и краткую информацию о родном городе. Информация должна отображаться на светло-желтом фоне. Текст должен отображаться синим цветом (шрифт – Times New Roman, размер шрифта – 16), текст ссылки – зеленым, цвет просмотренной ссылки – черный.

Ø Заголовок должен быть отформатирован по центру и задан бирюзовым цветом.

Ø Рисунок в формате gif размером 400Х400 пикселей должен располагаться после текста внизу в центре.

Ø Ссылку на страницу, которая содержит информацию о достопримечательностях города. На данной странице расположите 3 рисунка, иллюстрирующие городские достопримечательности.

Примечание. При оформлении станицы о городских достопримечательностях должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

6. Создать Web – страницу на тему «Каким я хочу видеть мой родной город», которая должна следующую содержать информацию:

Ø Название и краткую информацию о родном городе и перспективы его развития. Информация должна отображаться на светло-зеленом фоне. Текст должен отображаться бирюзовым цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – коричневым, цвет просмотренной ссылки – синий.

Ø Заголовок должен быть отформатирован по центру и задан фиолетовым цветом.

Ø Рисунок в формате gif размером 300Х300 пикселей должен располагаться справа от текста.

Ø Ссылку на страницу, которая содержит информацию об известных людях города. На данной странице расположите 2 – 3 рисунка, иллюстрирующие достижения известных людей города и напишите, каким Вы бы хотели видеть в будущем свой родной город.

Примечание. При оформлении данной станицы должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

7. Создать Web – страницу на тему «Компьютерный салон», которая должна следующую содержать информацию:

Ø Название и адрес компьютерного салона, а также краткую информацию о представленной в салоне продукции. Информация должна отображаться на светло-сером фоне. Текст должен отображаться зеленым цветом (шрифт – Arial, размер шрифта – 14), текст ссылки – синим, цвет просмотренной ссылки – фиолетовый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 350Х300 пикселей должен располагаться после текста внизу в центре страницы.

Ø Ссылку на 2 страницы, которые содержат более подробную информацию об устройствах компьютера и цены на них. На данных страницах расположите по одному рисунку, иллюстрирующему устройство.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

8. Создать Web – страницу на тему «Известная личность» (об ученом, писателе или спортсмене), которая должна следующую содержать информацию:

Ø Фамилию, имя, отчество и краткую информацию о личности, про которую создается сайт. Информация должна отображаться на светло-сером фоне. Текст должен отображаться фиолетовым цветом (шрифт – Times New Roman, размер шрифта – 16), текст ссылки – синим, цвет просмотренной ссылки – коричневый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 400Х350 пикселей должен располагаться после текста внизу в центре страницы.

Ø Ссылку на страницу, которая содержит более подробную информацию о данном человеке, его интересах, открытиях или достижениях. На данной странице расположите 2 – 3 рисунка.

Примечание. При оформлении данной станицы должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

9. Создать Web – страницу на тему «Турфирма», которая должна следующую содержать информацию:

Ø Наименование и краткую информацию о туристической фирме, предлагающей отдых за рубежом. Информация должна отображаться на светло-желтом фоне. Текст должен отображаться синим цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – бирюзовым, цвет просмотренной ссылки – фиолетовый.

Ø Заголовок должен быть отформатирован по центру и задан оранжевым цветом.

Ø Рисунок в формате gif размером 400Х400 пикселей должен располагаться после текста внизу в центре страницы.

Ø Ссылку на 2 страницы, которые содержат более подробную информацию о двух турах и цены на них. На данных страницах расположите по одному рисунку, иллюстрирующему отдых в этой стране.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

10. Создать Web – страницу на тему «Куда пойти учиться», которая должна следующую содержать информацию:

Ø Наименование и краткую информацию об учебных заведениях города, где можно получить профессию после окончания школы. Информация должна отображаться на желтом фоне. Текст должен отображаться синим цветом (шрифт – Times New Roman, размер шрифта – 14), текст ссылки – зеленым, цвет просмотренной ссылки – фиолетовый.

Ø Заголовок должен быть отформатирован по центру и задан красным цветом.

Ø Рисунок в формате gif размером 200Х350 пикселей должен располагаться слева от текста.

Ø Ссылку на 2 страницы, на которых содержится более подробная информация о двух учебных заведениях. На данных страницах расположите по одному рисунку.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

11. Создать Web – страницу на тему «Автосервис», которая должна следующую содержать информацию:

Ø Наименование фирмы, адрес и краткую информацию об услугах по ремонту автомобилей. Информация должна отображаться на черном фоне. Текст должен отображаться белым цветом (шрифт – Times New Roman, размер шрифта – 16), текст ссылки – светло-желтым, цвет просмотренной ссылки – светло-зеленый.

Ø Заголовок должен быть отформатирован по центру и задан светло-серым цветом.

Ø Рисунок в формате gif размером 250Х400 пикселей должен располагаться справа от текста.

Ø Ссылку на 2 страницы, на которых содержится более подробная информация о двух услугах. На данных страницах расположите по одному рисунку.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

12. Создать Web – страницу на тему «Моя школа», которая должна следующую содержать информацию:

Ø Номер и адрес школы, в которой учился, а также краткую информацию о ней. Информация должна отображаться на светло-зеленом фоне. Текст должен отображаться черным цветом (шрифт – Arial, размер шрифта – 14), текст ссылки – оранжевым, цвет просмотренной ссылки – фиолетовый.

Ø Заголовок должен быть отформатирован по центру и задан оранжевым цветом.

Ø Рисунок в формате gif размером 250Х300 пикселей должен располагаться слева от текста.

Ø Ссылку на 2 страницы, на которых содержится более подробная информация о двух учителях школы и предметах, которые они преподают. На данных страницах расположите по одному рисунку.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

13. Создать Web – страницу на тему «Новости кино», которая должна следующую содержать информацию:

Ø Названия 4 – 5 фильмов и их краткое содержание. Информация должна отображаться на бирюзовом фоне. Текст должен отображаться белым цветом (шрифт – Times New Roman, размер шрифта – 16), текст ссылки – желтым, цвет просмотренной ссылки – оранжевый.

Ø Заголовок должен быть отформатирован по центру и задан белым цветом.

Ø Рисунок в формате gif размером 200Х350 пикселей должен располагаться справа от текста.

Ø Ссылку на 2 страницы, на которых содержится более подробная информация о двух фильмах, режиссерах этих фильмов и актерах. На данных страницах расположите по одному рисунку.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

14. Создать Web – страницу на тему «Музыкальная страничка», которая должна следующую содержать информацию:

Ø Музыкальные исполнители (4 – 5) и их альбомы, краткие сведения о каждом исполнителе. Информация должна отображаться на синем фоне. Текст должен отображаться белым цветом (шрифт – Arial, размер шрифта – 12), текст ссылки – светло-зеленым, цвет просмотренной ссылки – желтый.

Ø Заголовок должен быть отформатирован по центру и задан желтым цветом.

Ø Рисунок в формате gif размером 400Х300 пикселей должен располагаться слева от текста.

Ø Ссылку на 2 страницы, на которых содержится более подробная информация о двух музыкантах и их музыке. На данных страницах расположите по одному рисунку.

Примечание. При оформлении данных станиц должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

15. Создать Web – страницу на тему «Поиск работы», которая должна следующую содержать информацию:

Ø Фамилию, имя, отчество и подробное резюме. Информация должна отображаться на светло-зеленом фоне. Текст должен отображаться синим цветом (шрифт – Arial, размер шрифта – 12), текст ссылки – черным, цвет просмотренной ссылки – фиолетовый.

Ø Заголовок должен быть отформатирован по центру и задан зеленым цветом.

Ø Рисунок в формате gif размером 400Х300 пикселей должен располагаться справа от текста.

Ø Ссылку на страницу, которая содержит информацию о хобби ищущего работу и 2 – 3 рисунка, иллюстрирующие это хобби.

Примечание. При оформлении станицы о хобби должны быть использованы различные размеры шрифта, различные цвета текста, заголовки, списки, способы выравнивания текста.

 

 

СПИСОК ЛитературЫ

 

1. Информатика. Базовый курс.– 2-е издание / Под ред. С.В. Симоновича. – СПб.: Питер, 2006. – 640с.

2. Рамазин Д.В. Как сделать свою страницу в Интернете.– М.: Айрис-пресс, 2005. – 288с.

3. Леонтьев В.П. Большая энциклопедия компьютера и Интернета. – М.: ОЛМА Медиа Групп, 2006. – 1084с.

4. Угринович Н.Д. Практикум по информатике и информационным технологиям.– М.: Бином. Лаборатория занятий, 2002. – 400с.

 

 

СОДЕРЖАНИЕ

 

Введение………………………………………………………………………….3

1. Структура Web-страницы…………………………………………………….4

2. Основные теги HTLM…………………………………………………………4

3. Цветовая схема, вставка изображений и гиперссылок………………………6

4. Варианты заданий……………………………………………………………..10

Список литературы…..………………………………………………………….16

 


 

Соколова Наталья Николаевна

 

Введение в web-дизайн

 

Методические указания

к проведению лабораторных занятий

по курсу «Информатика»

для студентов

по направлениям 190000, 200000, 260000, 280000

специальностей 140211, 150202, 151001

190601, 190603, 190702, 200503, 260601, 280101

 

 

Редактор Н.А. Леготина

 

…………………………………………………………………………………

Подписано к печати Формат 60*84 1/16. Бумага типа N1

Печать трафаретная Усл. п. л. 1,25 Уч. – изд. л. 1,25

Заказ Тираж 100 Цена свободная

………………………………………………………………………………….

РИЦ Курганского государственного университета.

640669, г. Курган, ул. Гоголя, 25.

Курганский государственный университет.

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-06-12 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: