Автор: Пользователь скрыл имя, 07 Декабря 2012 в 19:34, лабораторная работа
Цель работы: изучение языка гипертекстовой разметки, получение практических навыков работы по оформлению и подготовке материалов к публикации в Интернет, созданию документов, имеющих формат, принятый в Интернете, а также Web-страниц, написанных на языке HTML..
Цель работы: изучение языка гипертекстовой разметки, получение практических навыков работы по оформлению и подготовке материалов к публикации в Интернет, созданию документов, имеющих формат, принятый в Интернете, а также Web-страниц, написанных на языке HTML..
В настоящее время создание собственной Web-страницы на каком-либо сервере стало непременным атрибутом престижа фирмы. Сложные по художественному оформлению и многостраничные Web-документы и базы данных разрабатывают профессионалы Web-дизайнеры.
Web-страницы создаются с помощью специальных средств (языков), и хранятся в формате HTML (HyperText Markup Language — язык разметки гипертекста), поэтому имена файлов, содержащих такие страницы, обычно имеют расширение .htm или .html.
Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты.
Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML
Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа.
Документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи. Разметка HTML во всех этих случаях должна быть принята во внимание. Язык HTML предназначен не для форматирования документа, а для его функциональной разметки.
Язык HTML представляет документы в обычном текстовом виде. Поэтому в нем для выделения ссылок и хранения служебной информации используются не управляющие коды, а специальные текстовые фрагменты – тэги (англ. tag – «ярлык, этикетка»).
В HTML есть два вида базовых элементов: символьные константы и тэги разметки.
Начинаются со знака амперсанд (&), за которым следует либо имя константы (если она определена заранее), либо знак фунта с последующим десятичным кодом символа. В конце символьной константы ставится точка с запятой. Например символ тильда ( ) будет сгенерирован последовательностью ~.
Приведем для примера
&It; знак меньше или левая угловая скобка;
> знак больше или правая угловая скобка;
& амперсанд;
© буква С в круге, знак копирайта;
® буква R в круге, знак регистрации.
Каждый тэг в разметки НТМL имеет свой идентификатор (ID) и, возможно, несколько атрибутов. В общем виде тэг выглядит так:
<тэг атрибут1=значение1 атрибут2=значение2…> текст </тэг>
или <тэг атрибут1=значение1 атрибут2=значение2…> текст или <тэг атрибут1=значение1 атрибут2=значение2…> , где
тэг – идентификатор тега,
атрибут – имя атрибута;
значение – значение атрибута;
текст – текст, на который распространяется действие тега.
Теги бывают пустыми и не пустыми. Непустые теги определяют действия над вложенным между открывающими и закрывающими тэгами текстом.
Открывающие тэги начинаются с левой угловой скобки (<), за которой непосредственно следует ID, и оканчиваются на правую угловую скобку (>). Закрывающие тэги выглядят совершенно так же, за исключением того, что после открывшей левой угловой следует символ слэш (/).
Комментарии могут располагаться в любом месте НТМL – документа и они игнорируются браузером. Они начинаются со строки <!-, содержат произвольный набор символов и оканчиваются на ->. При написании комментариев желательно размещать каждый комментарий на отдельной строке и избегать употребления внутри него служебных символов (>,<,& и т. п.).
Тэги для форматирования НТМL можно разделить на два класса: тэги для структуризации текста на странице, и тэги, которые изменяют стиль текста. В класс структуризации входят тэги заголовка, параграфов и списков. В классе стилей содержатся теги, производящие изменения со шрифтами текста. Классы могут пересекаться в отношении отдельных тэгов.
Заголовки определяют тэги: <Н1>,<Н2>,<Н3>,<Н4>,<Н5>,<Н6>.
НТМL поддерживает шесть уровней вложенности заголовков, обозначаемых тегами <Н1>,<Н2>,<Н3>,<Н4>,<Н5>,<Н6>. Этого вполне достаточно для подавляющего большинства гипертекстовых приложений, поскольку глубина структуризации текста в основном достигается с помощью гипертекстовых связей и дополнительных структур, описанных в списках. Н1 является наивысшим уровнем вложенности заголовков. На этом уровне обычно дается название страницы, фигурирующее как первый элемент основной части документа.
Выделение текста в качестве заголовка влечет изменение его стиля, включая перевод строки перед заголовком и после него, а также вставку необходимого количества пробелов, чтобы отметить уровень заголовка. Добавление тэгов изменения стиля для заголовка не требуется.
Заголовки должны использоваться в
иерархической
Тэги заголовков могут содержать атрибут – АLIGN, определяющий расположение заголовка относительно краев окна вывода. АLIGN может принимать значения right, center, left.
Коды перевода строки, табуляции и прочих служебных символов форматирования игнорируются НТМL-браузерами. Поэтому, чтобы отметить начало нового абзаца (параграфа), необходимо использовать тэг <P> (paragraph). Этот тэг является пустым, т. е. не имеет завершающей части. Абзацы могут начинаться с отступа (данное свойство целиком зависит от браузера). Большинство браузеров вставляет дополнительные пробелы, чтобы отделить параграфы друг от друга. Тэг параграфа может быть не пустым. В этом случае употребляется атрибут АLIGN, определяющий, как относительно краев окна вывода будет расположен вложенный текст.
Тэг перевода строки <BR> (break rule) во многом подобен тэгу параграфа, являясь его упрощенным вариантом. Он переводит текст, находящийся за тэгом, на следующую строку, начиная с ближайшей к левой границе позиции, без добавления каких-либо пробелов.
Другой способ отделения блоков текста друг от друга заключается в использовании линии, пересекающей по горизонтали окно вывода слева направо. Тэгом такой горизонтали является <HR> (horizontal rule). В этом случае браузер будет подгонять длину горизонтальной линии по ширине окна.
Известны четыре атрибута для тэга <HR>:
SIZE, WIDTH, ALIGN и NOSHADE.
Значение первого атрибута специфицирует толщину линии; значение второго – это длина линии в пикселях и процентах от ширины окна вывода. Третий атрибут может принимать значения left, center, right и отвечает за то, как линия располагается относительно краев окна вывода. Четвертый атрибут не принимает значений, его присутствие говорит о том, что при прорисовки линии не должны употребляться тени.
Список – это
НТМL поддерживает несколько типов списков, которые могут быть использованы в документе:
<OL></OL> - упорядоченный список, обычно содержит пронумерованные абзацы, разделенные пустыми строками;
<UL></UL> - неупорядоченный список, подобен упорядоченному списку, однако абзацы не имеют номеров;
<MENU></MENU> - список коротких элементов, обычно не превышающий длиной строку и разделенных более компактно, чем <UL>;
<DIR></DIR> - список очень коротких элементов, таких как имена файлов, возможно, размещенных в несколько колонок.
Списки могут группироваться, что делает их удобным инструментом для написания планов и оглавлений.
Существует тип списков, называемый списком определений, или глоссарием. Это список абзацев, каждый из которых имеет короткий заголовок. Глоссарий полезен для представления списка поименованных элементов, располагающих кратким пояснением или описанием. Список определений заключается между тэгами <DL> и </DL>. Тэг <DT> специфицирует заголовок элемента списка. После тэга дается текст, являющийся пояснением.
Для тэгов упорядоченного, неупорядоченного списков и списка глоссария существует один дополнительный атрибут – СОМРАСТ. Его присутствие говорит НТМL-браузеру, что названия элементов списка и пояснение к ним будут очень короткими. В этом случае браузеры не насыщают список пробелами и потребляют компактные шрифты. Для упорядоченных списков употребляется атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:
арабские цифры |
1, 2, 3, ... |
буквы нижнего регистра |
a, b, c, ... |
буквы верхнего регистра |
A, B, C, ... |
римские цифры в нижнем регистре |
i, ii, iii, ... |
римские цифры в верхнем регистре |
I, II, III, ... |
Тэги стиля могут быть проигнорированы некоторыми браузерами. Тэги стиля чаще всего являются непустыми, т.е. состоят из открывающей и закрывающей частей. Внутри тэгов стиля можно использовать большинство других тегов, хотя следует избегать подобных действий в отношении тэгов, создающих структуру страницы, например, заголовков и списков. Наиболее распространенными тэгами стиля в НТМL считаются:
<EM>,</EM> - выделение текста на общем фоне либо подчеркиванием, либо курсивом;
<STRONG>,</STRONG> - яркое выделение текста;
<CITE>,</CITE> - применяются для выделения наименований работ сторонних авторов подчеркиванием или курсивом;
<ТТ>,</ТТ> - шрифт пишущей машинки;
<В>,</В> - жирный шрифт (bold);
<I>,</I> - курсив (italic);
<U>,</U> - подчеркивание (underline);
<ADDRESS>,</ ADDRESS > - используется для выделения подписей, адресов и других видов информации об авторах, располагающихся обычно вначале или конце страницы. Текст адреса, как правило, дается курсивом и прижимается к правому краю окна вывода. Кроме того, тэг адреса делает перевод строки до и после текста, ограниченного тэгом;
< BLOCKQUOTE >,</ BLOCKQUOTE> - используется для пометки цитат, расположенных на странице. Текст, помеченный этим тэгом, прижимается к левому или правому краю окна вывода;
< PRE >,</PRE> - любой текст, заключенный между открывающим < PRE > и закрывающим </PRE> (преформатированный текст), появится в точности таким, каков он есть в исходном документе. Преформатированный текст печатается шрифтом пишущей манники, и все символы перевода строки и пробелы внутри него сохраняются.
Перед и после преформатированного текста производится перевод строки. Внутри текста запрещается использовать какие-либо тэги, изменяющие структуру текста, например тэги параграфа, заголовков, списков, адреса, цитатовыделения. Только тэги жирного шрифта, курсива, подчеркивания и тэги ссылок считаются разрешенными в преформатированном тексте.
<FRONT SIZE = sn>, где n может принимать значения от 1 до 7, а s – это необязательный знак (+или-), задает либо абсолютный размер шрифта относительно базового размера, например: <FRONT SIZE = +2>. Базовый размер шрифта, по умолчанию, равен 3.
Тэг <FONТ> может иметь два дополнительных атрибута:
FACE и COLOR.
Первый из них дает тип шрифта, которым будет печататься текст.
Второй специфицирует цвет букв. В общем виде употребление тэга <FONТ> сводится к заданию:
<FONТ SIZE= размер шрифта FACE=”тип шрифта 1, тип шрифта 2… ”COLOR=# шестнадцатеричный шестизначный номер цвета>.
Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web-документов. Сегодня графические элементы Web-страниц используют два основных формата — GIF и JPEG (новый формат PNG пока еще нельзя считать общепринятым). Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов.
Для подготовки изображений можно использовать любой графический редактор, например стандартное приложение Paint (в Windows), которое позволяет сохранять файлы в этих форматах.
Файлы формата GIF (Graphic Interchange Format) имеют расширение .GIF. Изображения в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растровый рисунок (например, в формате .BMP).
Спецификация формата GIF89a позволяет создавать файлы .GIF, обладающие специальными возможностями: