Введение в язык HTML.
Назначение языка. Теги.
Опр. HTML документы - это файлы в обычном ( также известный как ASCII) текстовом формате, который может создаваться любым текстовым редактором ( к примеру - NE, Лексикон, Emacs и др.). Пара просмотрщиков Web ( tkWWW for X Window System и CERN's Web для компьютеров NeXT) включают простейшие HTML редакторы, позволяющие работать в стиле WYSIWYG. Сечас имеется несколько WYSIWIG редакторов (например, HotMetal for Sun Sparcstations, HTML Edit for Macintoshes). Вы можете попробовать один из них перед тем, как разбираться в деталях HTML.
Минимально возможный HTML документ
Клише HTML документа:
<TITLE>Простейший HTML пример</TITLE>
<H1>Это заголовок первого уровня</H1>
Добро пожаловать в мир HTML.
Это первый параграф.<P>
А это второй.<P>
HTML использует термины гипертекста для информирования просмоторщика о способе вывода текста. Вышеприведенный пример использует :
· <TITLE> tag ( термин, пометка, описание элемента - будем использовать слово tag) (и соответствующий ему </TITLE> tag), которые определяют заголовок документа.
· <H1> tag заголовка (и соответствующий </H1>)
· <P>tag - разделитель параграфов
Опр. HTML tag-и состоят из знака меньше (<), за ним следует имя tag-а и оканчивается знаком больше (>). Tag-и обычно парные, заключительный tag выглядит также, как и начальный за исключением slash'а (/), предшествующего тексту внутри скобок. Например: <H1> информирует просмотрщика о начале заголовка первого уровня </H1> говорит о том, что заголовок завершен.
Правило: Основным исключением из правила пар является <P> tag. Tag </P> не существует. HTML не различает больших и малых букв. <title> эквивалентно <TITLE> или <TiTlE>. Не все tag-и поддерживаются всеми просмотрщиками WWW. Если просмотрщик не поддерживает tag, то он его игнорирует.
Основные элементы языка. Название документа
Каждый HTML документ должен иметь название. Оно обычно располагается отдельно от документа и используется преимущественно для идентификации документа (например, WAIS поиск). Можно обходиться полудюжиной слов для описания цели (сути) документа.
Заголовки
HTML имееет 6 уровней заголовков, пронумерованных от 1 до 6, где первый выделен наиболее сильно. Заголовки показываются фонтами типа Large или Bold чаще, чем применяемыми для обычного текста. Первый заголовок каждого документа нужно обозначать <H1>. Синтаксис tag-а заголовка : <Hy>Текст заголовка </Hy > ,
где y - это число между 1-им и 6-ю, определяющие уровень заголовка.
Например, код для строки заголовка ``Заголовок'' определяется так: <H3>Заголовок</H3>
Параграфы
В отличие от большинства текстовых процессоров, в HTML файлах разбиение на строки не принципиально. Переход на новую строку может произойти в любой точке Вашего файла, последовательные пробелы превращаются в один. (Есть пара исключений, например, пробел который следует за <P> или <Hy> tag, игнорируется.) Заметьте, что в нашем примере первый параграф записывается как: Это первый параграф. <P>
В исходном файле между предложениями есть перевод строки. А Web просмотрщик игнорирует этот перевод строки и начинает новый параграф только когда достигается <P> tag.
Вы должны отделять параграфы с помощью <P>. Просмотрщик игнорирует пробелы и пустые строки в исходном тексте. HTML почти всегда полагается на инструкции форматирования и без <P> tag-а весь документ становится одним большим параграфом. (Исключение составляет текст, определенный как ``предформатированный'', который описан ниже).
Например: <TITLE> Это простейший HTML пример</TITLE><H1> Заголовок первого уровня</H1>Добро пожаловать в мир HTML. Это первый параграф.<P>. А это второй.<P>
будет давать тот же результат, что и наш первый пример.
Однако, чтобы сохранить читаемость HTML файлов, заголовки должны быть на различных строках и параграфы отделены пустой строкой (В дополнении к <P> tag-у).
HTML+, развивает текущий стандарт HTML, где <P> становится ``контейнером'' для текста, также как текст заголовков первого уровня ``содержится'' внутри
<H1> ... </H1>: <P>. Это параграф в HTML+.</P>
Вся разница заключается в том, что </P> заключительный tag может быть всегда пропущен. ( То есть, если просмотрщик видит <P>, то он предполагает существование </P> в конце предыдущего параграфа.) Другими словами, в HTML+, <P> является указателем начала параграфа.
Преимуществом этого изменения в том, что Вы можете устанавливать параметры форматирования параграфа. Например, в HTML+, Вы можете отцентрировать параграф, определив: <P ALIGN=CENTER>
Ссылки на другие документы
Основная мощь HTML происходит из его возможности связывать части текста (и даже изображения) с другими документами. Просмотрщик выделяет эти области (обычно цветом и/или подчеркиванием) показывая, что это гипертекстовая ссылка (часто сокращаемое до гиперссылки или просто ссылки).
Одиночный гипертекстовый связующий HTML tag: <A>, его называют anchor (якорь). Чтобы включить anchor в свой документ:
1. Начните anchor с <A . (После A стоит пробел.)
2. Определите документ, на который будет указывать ссылка, введя параметр HREF="имя_файла" и, после этого, закрывающую скобку: >
3. Наберите текст, который будет служить гипертекстовой ссылкой в текущем документе.
4. Завершите anchor набрав tag: </A>.
Вот пример гипертекстовой ссылки:
<A HREF="MaineStats.html">Maine</A>
Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html расположенный в поддиректории AtlanticStates будет выглядеть так:
<A HREF="AtlanticStates/NJStats.html">New Jersey</A>
Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.
Относительные ссылки в сравнении с абсолютными путями до файлов
В основном используются относительные ссылки, потому что
a) Меньше набирать текста.
b) Легче переместить группу документов в другое место, потому что относительные ссылки останутся корректными.
Значение Port может быть опущено. (Не указывайте это, пока кто-нибудь явно не укажет Вам на необходимость использования).
К примеру, для включения ссылки на этот пример в свой документ, Вы должны использовать:
<A HREF = "http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
NCSA's Beginner's Guide to HTML</A>
Ссылки на конкретные места в других документах
Ссылки (anchors) также могут быть использованы для перехода к определенным частям других документов. Предположим, вы хотите сделать ссылку из документа А на некоторую часть документа В. (Назовем этот файл documentB.html.) Во-первых, Вам необходимо создать named anchor (именованный якорь, ссылка с именем) в документе В.
Например, чтобы создать anchor с именем ``Jabberwocky'' в документе В, наберите:
Это <A NAME = "Jabberwocky">некоторый текст</a>
Теперь, когда вы будете создавать ссылку из документа А, включите в нее не только имя файла с документом В, но и конкретное место в нем, разделенные символом (#).
Это моя <A HREF = "documentB.html#Jabberwocky">ссылка</A> на документ В.
Теперь нажатие на слово ``ссылка'' в документе А отправит читателя сразу к словам ``некоторый текст'' в документе В.
Ссылки на конкретные места в текущем документе
Техника построения ссылок такая-же, за исключением того, что имя файла не требуется.
К примеру, для ссылки на ``Jabberwocky'' anchor изнутри того-же самого файла (документ В), надо использовать:
Это <A HREF = "#Jabberwocky">ссылка на Jabberwocky</A> изнутри документа В.
Дополнительные Tag-и языка
Всего описанного ранее достаточно для написания простейших HTML документов. Для более сложных документов в HTML есть tag-и для различных списков, заранее отформатированных секций, цитат, расширенного выделения, форматирующих символов и т.п.
Списки.
HTML поддерживает ненумерованные, нумерованные и списки-определений.
Ненумерованные списки
Правило: Для создания ненумерованного списка,
1. Начните с открытия списка с помощью <UL> tag-а.
2. Наберите <LI> tag и, за ним, элемент списка. (Закрывающий tag </LI> не нужен.)
3. Наберите tag, закрывающий список </UL>.
Пример: пример списка из двух элементов:
<UL>
<LI> яблоки
<LI> бананы
</UL>
На выходе увидим:
· яблоки
· бананы
Элемент <LI> может содержать в себе множество параграфов. Не забудьте разделять параграфы с помощью <P>.
Нумерованные списки
Нумерованный список (также называемый "порядковым" списком. От него происходит название tag-а) идентичен ненумерованному списку, исключая использование <OL> вместо <UL>. Элементы определяются использованием tag-а <LI>.
Пример: Следующий HTML текст
<OL>
<LI> апельсины
<LI> персики
<LI> виноград
</OL>
будет приводить к выводу:
1. Апельсины
2. Персики
3. Виноград
Встроенные изображения
Большинство просмотрщиков могут выводит встроенные изображения (такие как, изображения после текста) в форматах X Bitmap (XBM) или GIF. Каждое изображение требует времени для обработки и замедляет процесс вывода документа, так что Вы не должны включать слишком много или чрезмерно большие изображения.
Для включения изображения используйте: <IMG SRC=image_URL>,
где image_URL это URL на файл изображения. Синтаксис для IMG SRC URL идентичен тому, который используется в anchor HREF. Если файл изображения это GIF файл, то часть image_URL соответствующая имени файла должна заканчиваться на .gif. Имена файлов X Bitmap должны заканчиваться .xbm.
По умолчанию низ изображения выравнивается с текстом, как показано в этом параграфе.
Добавьте ALIGN=TOP опцию если Вы хотите, чтобы просмотрщик выровнял текст с верхом изображения, как показано в этом параграфе. Полный tag встроенного изображения с верхним выравниванием:
<IMG ALIGN=top SRC=image_URL>
ALIGN=MIDDLE выравнивает текст с центром изображения.
Внешние изображения, звуки и анимация
Вы можете пожелать иметь открытое изображение, как отдельный документ, когда пользователь переходит по ссылке, выбрав встроенную версию изображения, включенного в Ваш документ. Оно может рассматриваться как внешнее и это очень полезно, если не хотите замедлять загрузку главного документа с большими встроенными изображениями.
Для включения ссылки на внешнее изображение, используйте:
<A HREF = image_URL>описание ссылки</A>
Используйте аналогичный синтаксис для ссылок на внешние файлы анимации и звука. Единственное отличие заключается в расширении подсоединяемого файла. Например:
<A HREF = "QuickTimeMovie.mov">описание ссылки</A>
определяет ссылку на QuickTime видео
Литература: 2осн.., [187-195]; 9 доп., [395-398],2осн., [197-201], [205-207]; 9доп., [402-405].
Контрольные вопросы:
1. Что такое тэг?
2. Какова структура Web- страницы?
3. Какие форматы графических файлов могут быть использованы?
4. Что такое Anchor –область?
5. Виды ссылок, используемых в документах?
6. Теги и атрибуты, создания нумерованных списков?
7. Теги и атрибуты, создания маркированных списков?
Дата добавления: 2015-08-08; просмотров: 838;