Методические указания ППП. 2 часть

Заголовок 1-ого уровня Заголовок 2-ого уровня Заголовок 3-ого уровня Заголовок 4-ого уровня Заголовок 5-ого уровня Заголовок 6-ого уровня,

изменяя стили заголовков и используя для каждого заголовка отдельный цвет.

2. Создайте самостоятельно страницу по образцу:

@ @ @ @ @ @ @ @ @ @ @ @ @ @

(все символы разного цвета).

3. Создайте HTML документ, используя различные способы выравнивания текста и начертания шрифтов.

1-ый абзац – основной шрифт «Arial», размер 4, выравнивание по ширине.

2-ой абзац – основной шрифт «Courier», размер 3, выравнивание по центру.

3-ий абзац - основной шрифт «Times New Roman», размер 5, выравнивание по правому краю.

World Wide Web

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet.

Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере

отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

4. Создайте HTML документ с формулами, приведенными ниже:

	А) 3x y sin x				7 y3
					6x 2 5 y
	Б)	y y1		x x1		- уравнение прямой, проходящей через две
		y2 y1		x2 x1

точки с координатами (x1,x2) и (y1,y2).

5. Самостоятельно создайте «бегущую строку» со следующими параметрами:

Ширина – 80%, высота – 75 пикселей, положение текста – внизу, направление движения – слева направо, характер движения – любой, число повторений – 15, цвет поля – красный.

Контрольные вопросы:

1.Сколько существует логических стилей для изменения размера шрифта?

2.Для чего предназначены заголовки?

3.С помощью каких параметров тэга <font> можно

изменить стиль шрифта для каждого отдельного фрагмента текста?

4.Какие способы изменения начертания шрифта вам известны?

5.Какой тэг позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле?

Лабораторная работа N4.

Цель работы: получение практических навыков по

-вставке рисунков в WEB страницы;

-способам взаиморасположения текста и графики на странице;

-связыванию нескольких страниц документа с помощью гиперссылок;

Краткие теоретические сведения:

1.1.Вставка рисунков.

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. GIF содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят.

Для того, чтобы разместить рисунок на странице, нужен сам рисунок и строчка в HTML-тексте, указывающая браузеру, где этот рисунок находится:

<IMG SRC="picture.gif"> - рисунок "picture.gif"

находится в том же каталоге, что и текущий документ;

<IMG SRC="images/picture.gif"> - перейти в подкаталог "images" текущего каталога и взять файл оттуда;

<IMG SRC="../images/picture.gif"> - подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;

<IMG SRC="http://www.fortunecity.com/business/ practic/myphoto.gif"> - указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.

Утэга <IMG SRC> могут быть следующие атрибуты:

ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений

BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.

WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).

HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.

HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).

VSPACE="n" - вертикальный отступ от картинки в пикселах.

ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя атрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение атрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.

Значения n перечисленных выше атрибутов по умолчанию равны нулю.

1.2 Гиперссылки

Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:

<а href=''путь/имя файла"> текст ссылки </а>

Для того, чтобы увидеть описание ссылки при наведении указателя мыши на ссылку, используется параметр

TITLE тэга <а href>.

<а href=" путь/имя файла" titlе="описание ссылки"> текст ссылки </а>.

Любая картинка может стать гипертекстовой ссылкой.

<а href=="путь/имя файла"> <img src=image.jpg></a>

Задание 1.

1.Создайте html документ, содержащий три рисунка, размещенных по диагонали, используя тэг <р> </р> для выравнивания.

2.Создайте рамки разной толщины для этих рисунков.

3.Картинку можно сделать фоном документа. Это прописывается в открывающем тэге body:

<body bgcolor="#000000" bасkground="ваш_фон.jpg">

Параметр Background и указывает на то, где находится фоновая картинка.

5. Создайте страницу по образцу, приведенному ниже, используя в качестве фона любой рисунок

	История WWW началась в марте 1989			Рисунок 1
	года, когда Tim Berries Lee
	выступил	с	проектом
	телекоммуникационной		среды для

Рисунок 2

проведения совместных исследований в области физики высоких энергий. В 1991 году Европейская лаборатория практической физики (CERN) объявила на весь мир о создании новой глобальной информационной среды WWW.

Компьютерные сети разных стран стали объединяться, и в 90-х

годах сформировалась сеть INTERNET в сегодняшнем виде.

Одним из наиболее важных событий в истории INTERNETстала разработка так называемой всемирной паутины — среды World Wide Web (WWW).

Сейчас INTERNET объединяет тысячи разных сетей, расположенных по всему миру. Бурный рост числа пользователей INTERNET в России начался в 1996 году, когда все возможности

INTERNET стали доступны в нашей стране. Наряду с ростом числа пользователей сети INTERNET В РОССИИ, значительные изменения происходят в ee русской части.

6. Самостоятельно создайте не менее 7 страниц с описанием известных вам тэгов и их параметров, используя гиперссылки. Например:

Контрольные вопросы:

1.Какие параметры тэга <img src> вы знаете?

2.При помощи каких атрибутов можно изменить размеры рисунка на странице?

3.Можно ли сделать рисунок фоновым?

4.Для чего служат гиперссылки?

5.Может ли картинка быть ссылкой на другой документ?

6.На какой документ будет выполнен переход после выполнения

тэга <a href=news.html>Новости</a>?

Лабораторная работа N5.

Цель работы: получение практических навыков по

–созданию таблиц;

–размещению элементов на странице с помощью таблиц.

Краткие теоретические сведения:

Таблица представляет собой особую часть документа Html. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов (колонок) и горизонтальных рядов (строк). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и другую таблицу.

Таблицы состоят из трех основных частей – названия таблицы, заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с левого верхнего угла и заканчивая правым нижним. Каждая ячейка должна быть заполнена (для создания пустых ячеек используется специальный символ пробела - &nbsp).

Таблица задается тэгом <Table>. Каждый ряд ячеек (строка) начинается с тэга <TR> и заканчивается тэгом </TR>. Для того, чтобы разбить строку на ячейки, используется тэг

<TD> </TD>.

Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.

Метка <TABLE> может включать следующие атрибуты: Width- определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;

<TABLE width=число>

Align - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);

<TABLE align=right>

BORDER- устанавливает толщину рамки в пикселах. По умолчанию значениетаблица рисуется без рамки;

<TABLE border=5>

Cellspasing- определяет расстояние между рамками ячеек таблицы в пикселах;

<TABLE Cellspasing=0>

Cellpadding- определяет расстояние в пикселах между рамкой ячейки и текстом;

<TABLE Cellpadding=10>

Bgcolor - устанавливает цвет фона для всей таблицы

<TABLE bgcolor=#cc00aa>

Background- заполняет фон таблицы изображением;

<TABLE Background=”img/fon.gif”>

Frame="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:

VOID - рамки нет (значение по умолчанию); ABOVE - рисуется только граница сверху; BELOW - только граница снизу;

HSIDES - границы сверху и снизу; VSIDES - только границы слева и справа; LHS - только левая граница;

RHS - только правая граница;

BOX - рисуются все четыре стороны;

BORDER - также все четыре стороны.

<TABLE Frame=void>

Rules="значение" - управляет линиями, разделяющими ячейки таблицы. Возможные значения:

NONE - нет линий (значение по умолчанию); ROWS - только между рядами;

COLS - только между колонками;

ALL - между всеми рядами и колонками.

<TABLE Rules=cols>

Таблица может иметь заголовок - метки <CAPTION> и </CAPTION>. Располагаться он должен непосредственно после метки <TABLE>. Заголовок может иметь атрибут ALIGN, определяющий положение заголовка относительно таблицы:

	TOP	значение по умолчанию, заголовок над таблицей
		по центру;
	LEFT	заголовок над таблицей слева;
	RIGHT	заголовок над таблицей справа;

BOTTOM заголовок под таблицей по центру.

Тэг <TR> </TR> может иметь следующие атрибуты:

Align - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру)

и RIGHT (вправо);

<TR Align=right>

Valign- устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);

<TR Valign=top>

Bgcolor- устанавливает цвет фона для строки.

<TR Bgcolor=#45bb00>

Background - заполняет фон строки изображением.

<TR Background=img/pic.jpg>

Тэг <TD> </TD> может иметь следующие атрибуты:

Align- устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание