Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

МНИ_лаб_раб_7_HTML

.pdf
Скачиваний:
7
Добавлен:
24.02.2016
Размер:
625.59 Кб
Скачать

ЛАБОРАТОРНАЯ РАБОТА №7 Тема: Базовый HTML. Общий вид HTML-документа.

КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Общий вид HTML-файла, теги

M в аббревиатуре HTML означает "mark-up" -- разметка. Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки "<" и ">" (больше-меньше). Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста. Отмечают же его для того, чтобы браузер показывал текст на экране в заданном тегами виде.

В приведенном после горизонтальной линейки примере три пары тегов:

<HTML> -- </HTML>

Пара, которая показывает, что содержимое файла - документ в формате HTML.

<HEAD> -- </HEAD>

Пара обрамляющая текст, не выводимый на экран, и предназначенный для машин.

<BODY> -- </BODY>

Пара обрамляющая текст, выводимый на экран.

Закрывающий тег отличается от открывающего наличием косой черты "/". Пример 1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HEAD>

</HEAD>

<BODY>

Так выглядит

простейший HTML-файл.

</BODY>

</HTML>

Создайте текстовый файл. Стандартный Блокнот вполне подойдет, но гораздо удобнее пользоваться редактором Notepad++. Сохраните файл с расширением htm или html. Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш HTML-документ. Обратите внимание на разницу в виде.

На вид текста на экране влияют только теги, и не влияют ни пробелы, ни разбивка текста

на строки.

<!DOCTYPE>

Первый тег <!DOCTYPE> - это идентификатор применяемого стандарта HTML. На сегодняшний актуальной является версия HTML 4.01. Она имеет три стандарта синтаксиса: строгий, переходный и с применением фреймов. В приведенном примере задано соответствие строгому синтаксису стандарта 4.01, принятому организацией W3C (атрибут "-//W3C//DTD HTML 4.01//EN"). Инструкции по данному стандарту находятся на "http://www.w3.org/TR/html4/strict.dtd".

Пример переходного синтаксиса:

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Что такое строгий и переходный синтаксис? Какой стандарт выбрать? Как соответствовать выбранному стандарту.

Форматирование простого текста, параграфы

Разбить текст на параграфы можно тегами <P> -- </P>. В большинстве случаев, если опустить закрывающий тег </P>, то все равно ясно, что начало следующего параграфа означает конец предыдущего, но для остальных тегов подобное неверно.

У открывающего тега <P> может быть атрибут (аргумент, параметр) ALIGN (выравнивание), который принимает значения CENTER, RIGHT или значение принятое по умолчанию (то есть когда атрибут опущен) -- LEFT. Например тег <P ALIGN=CENTER> задает параграф, строки которого центрированы. Этот атрибут могут иметь большинство парных тегов.

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

Атрибуты <BR CLEAR={LEFT | RIGHT | ALL | NONE}>

Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю, <BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL> сделает то же самое и к левому и к правому краям одновременно. Например, если рядом с текстом слева встречается рисунок, то можно использовать тег <BR> для смещения текста ниже рисунка.

Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую

Во избежание неприятностей с элементом <NOBR> вы можете предложить браузеру читателя альтернативное место перевода строки при помощи тега <WBR> ("мягкий" перевод строки). Эта инструкция будет выполнена только в том случае, если браузер не сможет вывести вашу фразу одной строкой в пределах окна просмотра

Для проведения горизонтальной линии используется тег <HR>

Атрибуты <HR>

Назначение

ALIGN

Выравнивает по краю или центру; имеет значения LEFT,

 

CENTER,RIGHT.

WIDTH

Устанавливает длину линии в пикселах или процентах от

 

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

 

% и значение обязательноа заключается в кавычки

SIZE

Устанавливает ширину линии в пикселах.

NOSHADE

Отменяет рельефность линии.

COLOR

Указывает цвет линии. Используется формат RGB.

Обратите внимание на различие между парными тегами <P> -- </P>, которые обрамляют начало и конец куска текста, и непарным тегом <BR>, который отмечает место вставки некоторого элемента.

Вот вам пример, использующий еще и теги заголовков <H1> -- </H1> (самый крупный), <H3> -- </H3> и самый маленький <H6> -- </H6> . Здесь закрывающий тег необходим.

<H1 ALIGN=CENTER> Весенняя гроза</H1> <H3 ALIGN=CENTER>Федор Тютчев</H3> <P ALIGN=LEFT>

Люблю грозу в начале мая,<BR>

Когда весенний, первый гром,<BR>

Как бы резвятся и играя,<BR>

Грохочет в небе голубом.

<P ALIGN=CENTER>

Гремят раскаты молодые,<BR>

Вот дождик брызнул, пыль летит,<BR>

Повисли перлы дождевые,<BR>

И солнце нити золотит.

<P ALIGN=RIGHT>

С горы бежит поток проворный,<BR>

В лесу не молкнет птичий гам,<BR>

И гам лесной, и шум нагорный --<BR>

Все вторит весело громам.

<P>

Ты скажешь: ветреная Геба,<BR>

Кормя Зевесова орла,<BR>

Громокипящий кубок с неба<BR>

Смеясь, на землю пролила.

<H6 ALIGN=RIGHT> 1828,1854</H6>

Парные теги влияют на вид следующего за ними текста, непарные влияют только на место вставки. Закрывающему тегу атрибуты не нужны.

Выделение текста и шрифты

Не стоит задавать шрифты их названиями. Нет никакой гарантии, что нужный шрифт есть у читателя. Лучше задать его стандартными тегами: хоть результат и зависит от средства просмотра и его настроек, зато наверняка текст будет изображен во-первых похоже, а во-вторых в едином стиле. Вот эти теги:

<В>

Выделяет текст полужирным шрифтом.

<I>

Выделяет текст курсивом.

<TT>

Выводит текст шрифтом фиксированной ширины.

<U>

Элемент подчѐркивания.

<STRIKE>

Элемент зачеркивания. Отображается текст, перечеркнутый

 

горизонтальной линией.

<BIG>

Выводит текст шрифтом большего размера.

<SMALL>

Выводит текст шрифтом меньшего размера.

<SUB>

Сдвигает текст ниже уровня строки и выводит его шрифтом

 

меньшего размера.

<SUP>

Сдвигает текст выше уровня строки и выводит его шрифтом

 

меньшего размера.

<CENTER>

Центрирует блок текста, отменяет действие <P>

Цитаты, переменные, адреса

<CITE>

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

 

при этом текст обычно выводится курсивом.

<CODE>

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

 

(для больших листингов используется тег <PRE>) шрифтом

 

фиксированной ширины.

<EM>

Выделение важных фрагментов текста. Браузеры обычно

 

отображают такой текст курсивом.

<KBD>

Элемент, выделяющий шрифтом фиксированной ширины текст,

 

вводимый пользователем с клавиатуры.

<SAMP>

Используется для выделения нескольких символов шрифтом

 

фиксированной ширины.

<STRONG>

Сильное выделение важных фрагментов текста. Браузеры обычно

 

отображают такой текст полужирным шрифтом.

<VAR>

Используется для отметки имен переменных. Обычно такой текст

 

отображается курсивом.

<ADDRESS>

Служит для идентификации автора документа и для указания

 

адреса автора

<BLOCKQUOTE>

Для выделения цитаты. Современные браузеры смещают текст

 

цитаты вправо.

<BLINK>

Мигание, работает только в NC

Неформатированный текст

Для предотвращения форматирования используется тег <PRE> -- </PRE>. Текст, заключенный между двумя этими тегами выводится точно так, как он набран в исходном документе. Это бывает нужно, например, в текстах программ.

<PLAINTEXT> Переводит вывод текста в шрифт фиксированной ширины, а также выключает HTMLобработку текста до тех пор, пока браузер не встретит </PLAINTEXT> тег.

<FONT>

имя

атрибута

FACE

SIZE

COLOR

возможные

описание

 

 

 

примечания

 

 

 

значения

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Это весьма полезное свойство, так как

 

 

 

 

 

 

 

 

платформы

Windows

и Macintosh

Times

New

позволяет

указать

имеют почти идентичные шрифты,

Roman,

 

как

один,

так

и

называющиеся по-разному. Весь

Courier,

Arial,

несколько

шрифтов

список будет просмотрен

слева

Helvetica

 

(через запятую).

 

направо, и первый из имеющихся на

 

 

 

 

 

 

 

 

машине

пользователя

будет

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

Принято

считать,

что

размер

 

 

Этот атрибут служит

"нормального" шрифта соответствует

 

 

для

 

 

указания

числу 3. Размер может быть указан

1-7, +/- 1-7

размера

шрифта

в

как абсолютной величиной (SIZE=5),

 

 

условных

единицах

так и относительной (SIZE=+2).

 

 

от 1 до 7

 

 

 

Последний

метод

чаще

 

 

 

 

 

 

 

 

употребляется.

 

 

 

 

Этот

 

 

атрибут

 

 

 

 

 

 

устанавливает

цвет

 

 

 

 

 

 

шрифта,

который

 

 

 

 

 

 

может

быть

указан

 

 

 

 

 

 

как в формате RGB,

 

 

 

 

 

 

так

и

стандартным

 

 

 

 

именем

Например:

<FONT SIZE=3 FACE="Verdana, Arial, Helvetica" COLOR="">--</FONT>

<FONT SIZE=+1>

<A HREF="txt.htm" target="verz">Простейший HTML-документ.</A>

</FONT>

<BASEFONT>

Тег <BASEFONT> служит для указания размера, типа и цвета шрифта, стандартных для данного документа. Эти величины обязательны для всего документа, если только не переназначаются при помощи элемента FONT. После закрытия элемента FONT значения тега <BASEFONT> восстанавливаются. Значения атрибутов BASEFONT могут быть изменены другим тегом <BASEFONT> в любом месте документа. Обратите внимание, что это не контейнер и закрывающего тега не существует. Тег <BASEFONT> использует те же самые атрибуты, что и элемент FONT.

Списки, Меню

Для перечисления списка по пунктам используются такие теги

Для простых списков:

o Для задания типа списка:

1.<UL> -- </UL> : Для обрамления ненумерованного списка.

2.<OL> -- </OL> : Для обрамления нумерованного списка. У этого тега есть аттрибут start="число", которое задает номер первого элемента, и по умолчанию равно 1.

3.<DIR> -- </DIR> Для обрамления списка директории.

4.<MENU> -- </MENU> -аналогично UL

Атрибут COMPACT сокращенные промежутки между элементами o Для обозначения очередного пункта списка:

1.<LI> -- </LI>. Здесь ситуация как с параграфами: закрывающий тег можно опустить, поскольку

начало очередного пункта списка или конец списка автоматически означает конец предыдущего.Для списков определений:

o Для задания типа списка:

1. <DL> -- </DL>. Список определений -- это список пар (скажем, термин и определение). o Для обозначения очередного пункта списка:

1.<DT> -- </DT> : Для обрамления термина.

2.<DD> -- </DD> : Для обрамления определения.

Авот как выглядит текст предыдущего параграфа в исходном коде документа (заодно, обратите внимание символ "<" пришлось заменить на "<" для того, чтобы отличить его от тега;

<P>Для перечисления списка по пунктам используются такие теги

<UL>

<LI>Для простых списков:</LI>

<UL>

<LI>Для задания типа списка:</LI>

<OL>

<LI><UL> -- </UL>, для ненумерованного списка.</LI>

<LI><OL> -- </OL>, для нумерованного списка.

У этого тега есть атрибут start="число", которое задает номер первого элемента,

и по умолчанию равно 1.</LI>

</OL>

<LI>Для обозначения очередного пункта списка:</LI>

<OL>

<LI><LI> -- </LI>. Здесь ситуация как с параграфами: закрывающий тег можно опустить, поскольку начало очередного пункта списка или конец списка

автоматически означает конец предыдущего.</LI>

</OL>

</UL>

<LI>Для списков определений:</LI>

<UL>

<LI>Для задания типа списка:</LI>

<OL>

<LI start="3"><DL> -- </DL>. Список определений -- это список пар

(скажем, термин и определение).</LI>

</OL>

<LI>Для обозначения очередного пункта списка:</LI>

<OL>

<LI start="2"><DT> -- </DT>, для термина.</LI>

<LI><DD> -- </DD>, для определение.</LI>

</OL>

</UL>

</UL>

Атрибуты для списков UL, DIR, MENU:

возможные имя атрибута описание

значения

TYPE

DISC, SQUARE,

стиль тега (звездочка “*”, плюс “+” и символ “o”.)

 

CIRCLE

 

Атрибуты для списков OL:

 

имя атрибута

возможные

описание

значения

 

 

TYPE

1, a, A, i, I

стиль нумерации

START

целое

начальная цифра последовательности, по умолчанию 1

VALUE

целое

последовательные числа

В HTML 3.0 вы можете вместо обычного тега поместить GIF или специальный символ.

Атрибут РLAN= создает ненумерованные списки без тегов. Разумеется, простейший способ это сделать - воспользоваться списком определений, но если вы все же захотите вставить в список одиндва тега, то лучше применяйте данный атрибут.

Атрибут SRС= используется для того, чтобы задать GIF-файл вместо обычного тега GIF, наиболее употребительный в HTML графический формат. Вместо того чтобы помещать GIF перед строкой с тегом <ВR> в конце, вы можете создать собственные изящные теги и затем использовать их в списке. В этом случае вы получите все преимущества ненумерованного списка и вдобавок симпатичные GIF-картинки

вкачестве тегов. Атрибут SRC= можно задать в теге <UL>, определив сразу все теги списка, а можно указать разные GIF для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. В любом случае для того чтобы атрибут SRС= работал с тегом <UL>, нужно задать атрибут РLAN=.

Атрибут DINGВАТ= позволяет создавать специальные типографские символы dingbats, поддерживаемые броузером. Эти символы имеют вид картинок, которые используются в качестве тегов

всписках. Приведем список стандартных dingbats: Text, Audio, Folder, Disc drive, Form, Home,

Next.

Для задания dingsbat нужно указать его имя в теге <LI>. Например, для того чтобы задать home (домик), записывайте тег <LI DINGBAT="home" >.

Dingsbat можно также применять с тегом заголовка.

Тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.

<ОL ТYРЕ=1> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т. д. <ОL ТYРЕ=A> Тег создает список с нумерацией в формате А., В., С., В. и т. д. <ОL ТYРЕ=a> Тег создает список с нумерацией в формате а., b., с., d. и т. д.

<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III., IV. и т. д.

Специальные символы

изображение

символ

код

описание

"

"

"

двойная кавычка

&

&

&

амперсанд

<

<

<

меньше, чем

>

>

>

больше, чем

 

 

 

непрерывный пробел

©

©

©

копирайт

®

®

®

зарегистрировано

º

º

º

копье Марса

ª

ª

ª

зеркало Венеры

промилле

π

π

π

пи

Адреса файлов

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

Относительный адрес

Файл, который находится в том же (текущем) каталоге, что и читаемый документ задается своим именем. Файл document.html, который находится в подкаталоге directory текущего каталога, задается как directory/document.html . Обратите внимание, в отличие от MS-DOS, каталог обозначается прямой, а не обратной, косой чертой. Родительский каталог обозначается двумя точками ../ .

Если вместо имени файла задать каталог, то в зависимости от настройки сервера, будет использован файл index.html этого каталога, сгенерирован файл с оглавлением каталога, или возвращена ошибка.

Абсолютный адрес

Если полное имя файла начинается с косой черты, то указан его путь относительно корневого каталога документов, который не совпадает с корневым каталогом компьютера.

Адрес на другом компьютере

Адрес на другом компьютере состоит из трех частей:

Протокол. Как правило, это "http://", но может быть и "ftp://", если доступ к документу по ftp, и другие.

Сервер. Символьный или цифровой адрес сервера. Например, "kulichki.rambler.ru".

Абсолютный адрес файла относительно корневого каталога документов, например,

"puzzles/collection.html".

Вместе это выглядит как "http://kulichki.rambler.ru/puzzles/collection.html". Для так заданного имени файла существует название: Универсальный Локатор Ресурса (URL). URL текущего документа выводится в строке состояния средства просмотра.

Ссылки

Основное свойство гипертекста (H в слове HTML) -- удобство передвижения не только вперед и назад: к сноскам, поясняющим документам -- и возвращаться обратно. Строятся ссылки с

помощью анкера (Anchor) - тега <A> -- </A>.

Атрибуты:

имя возможные атрибута значения

HREF URL

NAME

REL

REV

METHOD

TITLE

описание

примечания

Задание адреса гиперссылки

в URL формате

задает символическую метку внутри документа, для переходов в это место документа

Определяет систему связей для документа.

Определяет систему связей для документа.

methods of HTTP protocol

Определяет заголовок, который появляется когда мышь "находит" на ссылку или во время загрузки документа.

Ссылка на метку внутри документа начинается со знака #. Ссылка на метку другого документа имеет вид url#label

Работает только при наличии атрибута HREF. Содержит, разделенные запятыми, отношения - список докуметов, которые имеют отношение к данному документу.

Тоже самое, что и REL только отношения имеют обратный порядок - список документов, к которым данный документ имеет отношение

URN

uniform resource name

 

 

 

 

 

 

 

Этот

атрибут

используется

при

 

 

 

использовании

многооконных

 

 

 

документов,

определяемых

 

 

 

командой FRAME

 

 

 

 

window – имя активного окна, куда

 

 

 

следует загрузить докумет (окно

 

 

 

должно быть ранее описано в

 

 

 

задании FRAMEs). Если окно с

window,_blank,

Определяет

место

этим

именем

отсутствует,

то

TARGET _parent, _self,

(окно)

загрузки

открывается новое окно.

 

_top

документа.

 

_blank - закрузка документа в новое

 

 

 

окно (без имени).

 

 

 

 

_parent – загрузка документа в

 

 

 

"родительское" окно по отношению

к текущему.

_self – загрузка документа в то же самое окно, откуда он был вызван. _top - загрузка документа в основное окно.

Примеры:

Задание метки

<A NAME="first"></A>

Ссылки внутри одной страницы

<A HREF="#second">переход в конец текста</A>.

Ссылки на другой файл на том же сервере

<A HREF="2.html">Предыдущий урок</A>

<BR><A HREF="4.html">Следующий урок</A>

<BR><A HREF="index.html">Оглавление</A>

<BR><A HREF="0.html">Список тегов и аттрибутов</A>

Для задания базового пути, отличного от текущего используется тег <BASE>, размещаемый в заголовке. Например:

<BASE HREF="//kdg.htmlweb.ru/">

Ссылки на файл на другом сервере

А тут надо задать полный URL.

<A HREF="http://vsetaksi.ru/msc/index.htm">Московские такси</A>

Ссылки на метку в другом файле

Для задания полного URL метки в другом файле достаточно объединить URL файла и ссылку на метку

<A HREF="3.html#first">переход в начало текста</A>.

Ссылки на адрес электронной почты(E-Mail)

<А HREF="mailto:me@mycom.ru">Send me E-mail</A>.

Связь с FTP

<А HREF="ftp://ftp.newusers.ru">FTP</A>

FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.

Картинки

Форматы.

GIF.

Это наиболее часто используемый во Всемирной паутине формат (Graphical Interchange Format). Точное название – GIF89A. Он был разработан для сети CompuServe. После ряда усовершенствований он приобрел много важных свойств, включающих:

Сжатие данных без потерь.

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

Чересстрочный вывод на экран, что дает возможность рассмотреть изображение до конца загрузки.

Поддержку большинством программ просмотра.

Примечание:

Этот формат, как и некоторые другие, использует алгоритм сжатия LZW, запатентованный компанией Unisys. В конце 1994 года эта компания объявила, что любому разработчику программных продуктов, использующих формат GIF, впредь будет требоваться лицензия от Unisys. Это требование касалось только разработчиков и не затрагивало конечных пользователей. В специальном заявлении компания также уточнила, что использование GIF в WWW допустимо и не нуждается в лицензировании.

JPEG.

Другим популярным форматом для графики является JPEG. Он был создан группой экспертов в области фотографии (Joint Photographic Experts Group) в результате разработки стандартного метода сжатия фотографических изображений "с потерями". Ниже кратко перечислены основные свойства формата:

Сжатие происходит "с потерями", поэтому изображение теряет некоторые (несущественные) детали.

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

Поддержка 16,7 миллионов цветов, что обеспечивает очень хорошее качество цветопередачи.

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

PNG. (произносится "пинг")

Этот формат (Portable Network Graphics) был разработан в 1995 году, чтобы прийти на смену формату GIF после действий Unisys по защите авторских прав на алгоритм сжатия LZW. Одновременно были переработаны некоторые технические характеристики, в частности, улучшено сжатие и увеличено количество поддерживаемых цветов. В настоящее время распространяются подключаемые программные модули для браузеров Netscape Navigator и Microsoft Internet Explorer, позволяющие использовать формат PNG.

ВМР.

Этот формат (bitmap) широко используется операционными системами Windows и OS/2. Файлы в этом формате хранятся без сжатия и поэтому требуют много времени при загрузке. Поддерживается только программой Microsoft Internet Explorer. Не рекомендуется использование этого формата.

Для вставки в текст картинки используется одиночный тег <IMG SRC="адрес графического файла"> с одним обязательным атрибутом SRC. Адрес задается так же, как и адрес ссылки.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]