Файл: Общие Языки гипертекстовой разметки (Элементы дизайна Web-страниц).pdf

Форматировать текст можно и с помощью традиционных элементов: выделять фрагменты курсивом, полужирным, выбирать шрифт и т.д. Рассмотрим эти элементы. Для них могут быть использованы стандартные атрибуты id. class, lang, dir. title, style, атрибуты событий, а также атрибуты, определяющие уникальные свойства определенных элементов.

Элемент абзаца paragraph - один из самых полезных. Он позваляег использовать только начальный тег, так как следующий элемент Р обозначает не только начато следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца можно использовать и конечный тег. В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца но и выполнит функцию тега <BR> (разрыв строки). Вместе с элементом абзаца можно

Элементы содержания. Существует большая фуппа элементов, которые используются не столько для форматирования ^[6]текста, сколько для выделения смысла абзацев и слов. Поскольку для таких элементов не определены заранее эффекты форматирования, разные программы могут по-разному воспроизводить текст, заключенный внутри этих элементов.

<ЕМ> </ет> и <DFN> </dfn> элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны но своему действию элементу 1, то есть в большинстве случаев позволяют выделить текст курсивом.

С точки зрения дизайна документа эти элементы ничем особенным не отличаются. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста. находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае, не может точно знать, какой именно шрифт будет использован: это определяется каждым броузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.

Эти и другие элементы содержания могут иметь стандартные атрибуты: id. class, lang, dir, title, style, атрибуты событий.

BLOCKQUOTED blockquote- -обозначение цитаты. Этот элемент требует наличия конечного тега Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях. Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования:

---

=« Л0ресоокулшта->крва1кттн11ка''11ре;1!ю.гаж!ся, что адрес задается в виде URL.

Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы. К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:

Элемент. имя стиля (Свойство 1: значение; свойство 2: значение:... j) В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том. что преобразованию подвергаются все элементы, заключенные внутри цемента с заданным стилем. Так. определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.

В соответствии с правилами HTML, ^[7]автор, использующий стили, должен включить в заголовок документа (элемент HEAD) соответствующее мета-определение:

<МЕТА http-equi\=«Content-Style-Type» content-»text/css»>

Броузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. «^[8]Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько иные.

В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона.

Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берёт на себя. Гели список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения, В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяю! общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.

---

Самым простым является ненумерованный список (unordered list). Его шаблон имеет вид

<UL>

<L1>ПУНКТ

<L!> ПУНКТ!

<L1> ПУНКТ 1<1.1> ПУНКТ1 <ДЛ.>

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

<OL> <[.!> </ol> - тго структура нумерованного списка (ordered list) похожа на предыдущую:

<OL><LI>ПУHKTl<LI> ПУНКТ1<[Л>ПУНКТ1<1Л> ПУНКТ 1</OL>

Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:

Произвольный текст < A h ref> = « Адрес ссылки» текст to щелчка - а

Или такой:

<А hre>f=«Aдpec ссылки» • <IMCi «гс= «Ссылка на рисунок» </а>

Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.

Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file. то есть содержать указание на протокол.

Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета, В этом смысле можно сказать, что Интернет - это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпыотерной связи и т.д.как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:

е -доступ к файлу на локальном диске;-доступ к архивам файлов но прогокол> передачи файлов (tile transfer protocol):- доступ к WWW;- отправка сообщения по электронной почте;- доступ к новостям USENET:- доспи к новостям USENET по протоколу NNTP:- подключение но протоколу telnet:. - подключение к системе поиска WAIS.

---

Когда гиперссылка используется для указания адреса электронной почты, её выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размешают в конце страницы для обеспечения связи с Web-мастером или автором страницы.

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

В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:

< name-» http: Файл . 1пт1#мегка»> </>

Для перехода метке используется по такому :

Текст подсказки < Ьге1=«£метка»> для щелчка </>

Для элемента предусмотрены различные . Атрибут hreflang, аналогии с lang. позволяет язык, который на адресу странице.

В гиперссылок заложена создания сложных документов, доступных Интернет. Предполагается, такие документы состоять из HTML-страниц перекрестными ссылками. пользователь мог управлять документом, должен оптимизировать с отдельными , например, загружать , которые могут пользователю, в режиме. Для необходимо снабдить информацией о ссылок.

Для этой задачи подразделяются на (forward) и (reverse). Ссылка, переход с страницы, называется . Соответственно, при броузера или ссылки может выполнен и переход. Для более точного ссылки используются атрибута (один прямых. другой - обратных ссылок). следующие стандартные ссылок: alternate - версия документа; lesheet - таблица в виде файла;

Фрейм - определенная область, которую грузится . Таким образом , что вы , собирается из HTML. Собственно, то же и SSI, PHP и других языков , скриптов и .п.

Фреймы еще на становления HTML облегчения создания большого размера. позволяли хранить, , меню в файле, и - не перелопачивая , сотни и некоторых даже html-страничек того, чтобы или убрать меню. Очень , казалось бы..., - система фреймирования -то не (я бы сказал, - почти !) правильно воспринимается поисковиков. Рейтинг страничек в поисковиков меньше, точно тех страничек, с тем же , но со меню без

Эксперимент со показал, что самом низу оказалась страничка фреймах, выше была страничка SSI технологии PHP инклюдах. сути, эти технологии, с заменившие устаревшие , показали равную и удобство. говоря уж куда большей использования. Но разбирающихся в вопросах программеров указали на PHP перед в плане их использования сервера.

Графика сайт привлекательным понятным. В grafika.htm следующий текст.

<IMG SRC=//файл.gif> в том , которое предназначено размещения диаграммы, , рисунка или . В данном рисунок появится левом верхнем экрана, так он - единственный тела HTML-.

---

Справа от равенства записывают gif-файла, графический объект. данном примере имя horse. записано без пути, так файлы horse. и grafika. находятся в каталоге (в папке). Если файл horse. находился в dir1, вложенной папку, содержащую grafika.htm, справа от равенства следовало записать dir1/.gif.

Для графики на необходимы gif- jpg-файлы. графический редактор , поставляемый фирмой , не позволяет файлы с .gif или .. Поэтому можно , например, графический LView Pro, под операционными Microsoft Windows 95 Windows NT. LView Pro прочесть bmp-, созданный посредством , и сохранить как gif- jpg-файл.

сначала bmp-. Для этого предварительно уяснить, затем выполнить действия.

Запустить Paint, используя “Пуск” на задач:

ПУСК => => СТАНДАРТНЫЕ => Paint

в окно процессора MS , щелкнув мышью кнопке на задач.

Создать окно текстового MS Word, команду операционного {Окно, Новое } или щелкнув по кнопке меню “Стандартное”.

операционного меню {, Упорядочить все} на дисплее два окна: методичкой и . Курсор должен в новом . Командой операционного MS Word {, Рисунок...} открыть панель “Вставить ”.

Из списка -файлов в части диалоговой выбрать щелчком файл 1stplace.wmf. рисунок, появившийся правой части панели.

Повторяя , указанные в 6, просмотреть несколько . Выбрать понравившийся рисунок, щелкнув кнопке OK левой нижней диалоговой панели. рисунок появится новом окне Word.

Расположить мыши на и щелкнуть клавишей мыши. рисунок в обмена, используя операционного меню {, Копировать} или мышкой по инструментального меню “”.

Закрыть окно рисунком, используя команду [Ctrl_]. Сделать максимальными окна с , щелкнув мышью кнопке максимизации этого окна.

в окно редактора Paint, мышью по на панели .

Вставить рисунок буфера обмена, команду операционного Paint {Edit, }.

Сохранить рисунок рабочем каталоге, команду операционного Paint {File, } и выбрав 24-bit Bitmap.

LView Pro bmp-файл, посредством Paint, сохраним его gif-файл, и выполнив этого следующие .

Запустить проводник, кнопку “Пуск” панели задач:

=> ПРОГРАММЫ => ПРОВОДНИК

диске D: папку LWPRO запустить редактор Pro двойным на имени Lviewpro.exe.

bmp-файл, посредством Paint, команду операционного LView Pro {, Open}.

Сохранить в рабочем как gif-, используя команду меню LView {File, Save } и выбрав файла

Цвета документах HTML задаваться двумя - указанием кода или указанием цвета на языке. При способе код записывается в шестнадцатеричного числа, шесть цифр: две цифры интенсивность красного , вторые - зеленого, - синего. При способе используются названия цветов: (черный), maroon (-красный), green (), olive (оливковый), (синий), purple (), teal (зеленовато-), gray (серый), (серебристый), red (), lime (известковый), (желтый), blue (), fuchsia (ярко-), aqua (морской ) и white ().

---