Методические указания ППП. 2 часть
.pdf7. Для изменения цвета, размера или начертания шрифта используется тэг <FONT ></FONT>.
Окрасьте слова Добро Пожаловать в красный, добавив в ваш документ следующее:
<FONT COLOR=red>Добро пожаловать!</FONT>
8.Измените цвет слов Добро Пожаловать на любой другой.
9.Измените открывающий тэг <BODY> на <BODY TEXT =blue> , и посмотрите, как изменился вид вашей страницы.
10.Задайте для всего текста страницы зеленый цвет (green или
#008000)
11.Цвет фона устанавливается параметром BGCOLOR в тэге
<BODY>: <BODY BGCOLOR =black>. Это значит, что фон в вашем документе будет черным.
12.Измените цвет фона на любой другой.
13.Создайте HTML документ с фоном зеленого цвета и шрифтом красного цвета, содержащий вложенный список по образцу, приведенному ниже.
Список сотрудников нашей фирмы Составлено: 30 июля 1996 года
Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.
Список может быть использован только в служебных целях.
1.Дирекция
o Иванов И.И. o Петров К.В.
2.Отдел маркетинга
Варшавская Е.Л.
Самсонов Д.М.
Контрольные вопросы:
1.Файлы с каким расширениями относятся к документам
HTML?
2.Что такое тэг?
3.Какие виды тэгов вам известны?
4.Обозначают ли тэги <TITLE> и <title> одно и тоже?
5.Какие существует способы задания цвета в HTML документе?
6.Для создания списка какого вида используется тэг
<OL> </OL>?
7.Какие параметры может иметь тэг для создания не пронумерованного списка?
Лабораторная работа N2.
Цель работы: получение практических навыков по
–работе с параграфами в HTML документе;
–использованию специальных символов.
Краткие теоретические сведения:
1.1 Работа с параграфами.
Для того, чтобы отформатировать текст в вашем HTML документе, нужно выделить нужную часть текста с помощью тэгов абзаца. Параграфы(или абзацы) вводятся тэгом: <Р></Р>.
При просмотре браузером абзацы отделяются друг от друга пустой строкой. Надо заметить, что в существующих версиях HTML закрывающий тэг </P> не используется. Но все-таки рекомендуется его употреблять, так как он может быть введен в последующих версиях. К ошибке это не
приведет - браузер просто проигнорирует все незнакомые тэги. А вам потом не придется переделывать свои документы.
По умолчанию, абзацы всегда выровнены по левому краю (т.е. прижаты к левому краю окна).
С помощью параграфов можно:
центрировать текст |
<center>текст</center> |
выровнять текст по левому краю |
<p align="left">текст</p> |
выровнять текст по правому краю |
<p align="right">текст</p> |
выровнять текст по ширине |
<p align="justify">текст</p> |
Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между абзацами), применяется тэг <BR>. Закрывающего тэга у него нет.
2.2Использование специальных символов.
ВHTML и, соответственно, в браузерах реализована возможность прорисовки символов по их кодам. Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки двух видов - мнемонические и числовые. Первые имеют вид &мнемонический код;
например: & для & или < для <. Набор мнемонических кодов, определенный в стандарте HTML, включает в себя, в частности, весь символьный ряд Latin-1 (почти все символы, употребляющиеся в письменностях западноевропейских языков - французского, немецкого, испанского и т. д.).
Вчисловых подстановках вместо мнемонического кода используется код нужного символа с добавлением впереди символа # (например, - для символа неразрываемого пробела, © - для знака авторского права).
В таблице приведен набор часто используемых символов.
Таблица 1. Символы и их кодировка
Симво
л
"
&
<
>
™
§
©
®
|
|
Код |
|
Числовая |
|
Мнемоническ |
Название |
|
символ |
|
кодировк |
|
|
|
|
а |
|
а |
|
ая кодировка |
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Прямая |
|
34 |
|
" |
|
" |
кавычка |
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
Амперсанд |
|
38 |
|
& |
|
& |
|
|
|
|
|
|
|
Знак "меньше" |
|
60 |
|
< |
|
< |
|
|
|
|
|
|
|
Знак "больше" |
|
62 |
|
> |
|
> |
|
|
|
|
|
|
|
Знак ТМ |
|
153 |
|
|
|
™ |
|
|
|
|
|
||
Знак параграфа |
|
167 |
|
§ |
|
§ |
|
|
|
|
|
|
|
Знак копирайта |
|
169 |
|
© |
|
© |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Знак |
|
|
|
|
|
|
"зарегистрирован |
|
174 |
|
® |
|
® |
о" |
|
|
|
|
|
|
|
|
|
|
|
|
|
° |
|
Знак градуса |
|
176 |
|
° |
|
° |
|
|
|
|
|
|
|
|
|
µ |
|
Знак "микро" |
|
181 |
|
µ |
|
µ |
|
|
|
|
|
|
|
|
|
Для отделения кода символа от остального текста следует использовать точку с запятой. Например, для того, чтобы в окне браузера вывести формулу 2 < 3, в тексте HTMLдокумента придется записать: 2 < 3
Здесь еще стоит упомянуть о символе - неразрываемый пробел - (nobreackspacing). Последовательность символов интерпретируемая браузером как одиночный текстовый пробел, который, в отличие от обычных пробелов, не сливается с соседними пробелами, не исчезает в конце строки и в начале абзаца, а главное - не позволяет браузеру вставить перенос строки между символами, вплотную к которым он стоит (отсюда и его название - "неразрываемый пробел" не позволяет разорвать строку), может использоваться
для предотвращения неблагозвучных или затрудняющих чтение межсловных переносов.
Задание 1.
1. Отредактируйте созданный вами ранее документ (index.html) следующим образом:
<html>
<head>
<title>Мой первый шаг </title> </head>
<body text=green bgcolor=yellow>
<center>
<font color=red>Добро пожаловать!</font></center> <br>
<p align="right"> Здравствуйте, это моя первая страница.
<br></p>
Меня зовут …. , и я хочу рассказать немного о себе…..
</body>
</html>
Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю.
2.Измените документ таким образом, чтобы текст Добро пожаловать! был выровнен по правому краю, а текст
Здравствуйте, это моя первая страница. Меня зовут …. , и я хочу рассказать немного о себе….. - по центру.
3.Добавьте в ваш документ следующий текст и выровняйте его по ширине:
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появиться еще один виртуальный друг? :)
4. Создайте самостоятельно еще одну страничку используя различные способы выравнивания текста (по образцу приведенному ниже).
Компьютерные сети - основные понятия.
Накопленная человечеством информация является одним из наиболее ценных продуктов. Любые достижения в науке, технике, технологиях, бизнесе, образовании в конечном итоге стали таковыми, благодаря сбору, обработке и надлежащему использованию информации.
Компьютерная сеть совокупность компьютеров и терминалов, соединенных с
помощью каналов связи в единую систему и удовлетворяющих требованиям распределенной обработки данных.
Локальная сеть Если компьютеры находятся недалеко друг от друга, используют общий комплект сетевого оборудования и управляются одним пакетом программного обеспечения, то такую сеть называют локальной.
Специально выделенный управляющий компьютер называют файловым сервером.
Контрольные вопросы:
1.Для чего в HTML документе служат параграфы?
2.Как будет выровнен текст в абзаце после выполнения тэга <p
align="right">текст</p>?
3.Каким тэгом нужно воспользоваться, чтобы перейти на новую строку, не прерывая абзаца
4.Каким образом можно ввести в HTML документ символы, отсутствующие на клавиатуре?
Лабораторная работа N3.
Цель работы: получение практических навыков по
–способам выделения текста;
–созданию бегущей строки;
–создание формул в HTML документе.
Краткие теоретические сведения:
1.1Выделение текста размером, толщиной, подчеркиванием и курсивом.
Для выбора размера шрифта можно использовать тэги так называемых логических стилей. <H1>...</H1>- <H6>...</H6>. Их всего 6 и обычно они используются для определения заголовков различного уровня. При переходе от первого стиля к шестому постепенно уменьшаются размер и толщина букв шрифта. Заголовок автоматически выделяется жирным текстом, что очень удобно.
Например, запись
<H1> Заголовок 1-ого уровня </H1>
задает вывод текста Заголовок 1-ого уровня шрифтом, соответствующим первому логическому стилю.
Заголовки выравниваются точно так же как и абзацы, т.е. метка <Hi> может содержать дополнительный атрибут ALIGN, который принимает значения RIGHT (выравнивание по правому краю), LEFT(по левому),CENTER(по центру).
Например:
<H3 align=right >Текст</H3>.
Заголовки предназначены для выделения небольшой части текста (строки, фразы), но, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то стиль шрифта для каждого отдельного фрагмента текста можно определять с помощью параметров тэга <FONT>.
Параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом
<FONT size=размер шрифта>. Диапазон возможных значений от 1 до 7.
Для задания цвета шрифта используется параметр color <FONT color=цвет>.
Для задания гарнитуры шрифта используется атрибут face <FONT face=имя шрифта>.
Например:
<FONT face=arial size=5 color=#0000ff>Привет! </FONT> -
вывод слова Привет! шрифтом Arial синего цвета и 5-ого размера.
Кроме этого, можно изменять начертание шрифта при помощи специальных тэгов.
Например:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i> <u> Подчеркнутый текст </u>
<tt> Пиш ущ ая м аш и н ка </tt>
В математических формулах, а также для подстрочных замечаний часто применяются индексы, которые отличаются от основного текста положением (чуть выше или ниже) и размером.
Для этой цели служат тэги <sup> и <sub> соответственно для верхних и нижних индексов.
Пример: 2 x 3
5 x
HTML код: (5+x<sup>2</sup>)<sup>x+3</sup>
1.2 Бегущая строка.
Internet Explorer поддерживает тэг <MARQUEE> </MARQUEE>, который позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле.
Характеристики бегущей строки задаются следующими атрибутами:
Bgcolor
Этот атрибут задает цвет фона бегущей строки.
<MARQUEE bgcolor="цвет">
Height
Этот атрибут задает высоту бегущей строки в пикселях или процентах от всего окна.
<MARQUEE height=число>
Width
Этот атрибут задает ширину бегущей строки в пикселях или процентах от всего окна.
<MARQUEE width =число>
Align
Этот атрибут задает выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom.
<MARQUEE align= “...”>
Direction
Этот атрибут задает направление движения бегущей строки: left влево, right вправо, up вверх, down вниз.
<MARQUEE direction="...">
Behavior
Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю.
<MARQUEE behavior="...">
Hspace, Vspace
Эти атрибуты задают интервалы по горизонтали и вертикали соответственно между текстом строки и краями ее поля
<MARQUEE hspace=число> <MARQUEE vspace=число>
Loop
Этот атрибут задает количество проходов бегущей строки. Если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова infinity. <MARQUEE loop=число>
Scrollamount
Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро.
<MARQUEE scrollamount=число>
Scrolldelay
Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками.
<MARQUEE scrolldelay=число>
В следующем примере бегущая строка «бесконечно» прокручивается на желтом поле шириной 75% от ширины окна браузера.
<html>
<head> <title>Бегущая строка</title></head> <body>
Ниже расположена "бегущая строка"
<marquee height=50 width=75% hspace=5 vspace=5 align=top bgcolor=yellow
direction=left loop=infinity behavior=scroll scrollamount=5 scrolldelay=100>
<h1> Это сообщение будет прокручиваться на экране справа налево </h1>
</marquee>
</body>
</html>
Не следует забывать, что использованием тэга <MARQUEE> не нужно злоупотреблять, так как он поддерживается только Internet Explorer.
Задание 1.
1. Создайте самостоятельно html документ вида: