Справочник начинающего по HTML. Библиотека I2R. Представлена вся базовая информация по html для начинающих - создание HTML документов, форматирование, теги, спецсимволы, встраивание графики и звука, примеры кода.

Этот документ является примером для написания документов на HTML.

Создание HTML документов
Дополнительные таги стиля
Форматирование символов
Встроенные иллюстрации
- Альтернативный текст для просмоторщиков, которые не могут выводить иллюстрации
Внешние картинки, звуки и анимация
Большой пример

Создание HTML документов

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

Вы можете смотреть, как в действительности выглядят ваши документы в процессе их создания, с помощью NCSA Mosaic (и некоторых других Web просмоторщиков). Откройте документ с помощью команды Open Local меню File.

После того, как вы отредактируете HTML файл, сохраните изменения. Вернитесь к NCSA Mosaic и перегрузите(Reload) документ. Изменения будут отображены на вашем экране.

Минимальный HTML документ

Перед вами простейший пример HTML документа:


<TITLE>The simplest HTML example</TITLE>

<H1>This is a level-one heading</H1>

Welcome to the world of HTML. This is one paragraph.

<P> And this is a second.<P>

HTML использует специальные таги для того, чтобы сказать Web просмоторщику, как отображать текст. Предыдущий пример использует:

таг <TITLE> (и, соответственно, таг </TITLE>), который определяет титул документа.
таг заголовка <H1> (и, соответственно, </H1>)
таг <P>, являющийся разделителем параграфов

HTML таги состоят из левой скобки (<), собственно названия тага и закрывающей правой скобки (>). Таги обычно парные, т.е. <H1> и </H1>. Закрывающий таг выглядит подобно открывающему, за исключением символа (/) предваряющего текст в скобках. В нашем примере, <H1> говорит Web просмоторщику, что начинается заголовок первого уровня; </H1> говорит просмоторщику, что заголовок закончился.

Одним из исключений правила парности является таг <P>. Не существует тага типа </P>.

ЗАМЕЧАНИЕ: HTML не чувствителен к регистру. <title> эквивалентно <TITLE> или <TiTlE>.

Не все таги поддерживаются всеми World Wide Web просмоторщиками. Если просмоторщик не поддерживает таг, он его просто игнорирует.

Основные таги стиля документа

Титул

Каждый HTML документ должен иметь титул. Титул обычно отображается отдельно от документа и используется в основном для идентификации документа в других контекстах (например, WAIS поиск). Используйте около полудюжены слов, которые объясняют цели документа.

Формат тага титула:

<TITLE>Текст титула </TITLE >

Заголовки

В HTML есть шесть уровней заголовков, пронумерованных от 1 до 6, где 1 имеет наибольшее выделение. Заголовки отображаются шрифтами большего размера и/или более жирными шрифтами, чем используются для отображения обычного текста. Для заголовка первого уровня надо использовать таг <H1>. Синтаксис заголовочных тагов следующий:

<Hy>Текст заголовка </Hy >

где y это число от 1 до 6, определяющее уровень заголовка.l

Например, кодировка заголовка ``Headings'' следующая:


<H3>Headings</H3>

Параграфы

В отличие от документов большинства текстовых процессоров, клавиша Return в HTML файлах не имеет большого значения. Перенос строки может встречаться в любой точке вашего исходного документа; несколько пробелов будут объединены в один. Обратите внимание, что в рассмотренном нами простейшем примере первый параграф кодируется следующим образом:


Welcome to HTML. This is the first paragraph.

<P>

В исходном файле между документами есть перевод строки. Web просмоторщик его игнорирует и начинает новый параграф только тогда, когда ему встретится таг <P>.

Важно: Вы должны разделять параграфы с помощью тага <P>. Просмоторщик игнорирует все пустые строки в исходном файле. HTML практически целиком основывается на тагах формата, и без <P>, документ становится одним большим параграфом. (Исключение составляет текст, отмеченный как ``preformatted," предназначенные для этого таги описываются ниже.) Например, следующее будет отображено аналогично тексту нашего простейшего примера:


<TITLE>The simplest HTML example</TITLE>

<H1>This is a level one heading</H1>

Welcome to the world of HTML. This is one paragraph.

<P>And this is a second.

<P>

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

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

Чтобы сделать гипертекстовую ссылку, выполните следующую последовательность шагов:

Наберите <A . (После A стоит пробел.)
Определите документ, на который будет указывать ссылка, введя параметр HREF="filename". И, после этого, закрывающую скобку: >
Наберите текст, который будет служить гипертекстовой ссылкой.
Наберите закрывающий таг: </A>.

Вот пример гипертекстовой ссылки:


<A HREF="MaineStats.html">Maine</A>

Это выражение делает слово ``Maine'' гипертекстовой ссылкой на документ MaineStats.html, который находится в той же директории, что и первый документ. Вы можете сделать ссылку и на документ из другой директории, указав относительный путь из текущего документа к документу, на который делается ссылка. Например, ссылка на файл NJStats.html located in the subdirectory AtlanticStates будет выглядеть так:


<A HREF="AtlanticStates/NJStats.html">New Jersey</A>

Это называется относительной ссылкой. Вы можете использовать также полное имя файла. Для указания пути используйте стандартный синтаксис UNIX.

Ссылки на специфические части в других документах

Ссылки также могут быть использованы для перехода к определенным частям других документов. Предположим, вы хотите сделать ссылку из документа А на специфическую секцию документа В. (Назовите этот файл documentB.html.) Во-первых, вам надо поставить именной таг NAME в документе В. Например, чтобы установить таг, называющийся ``Jabberwocky'' в документе В, наберите:


Here's <A NAME = "Jabberwocky">some text</a>

Таким образом вы отметили место в документе В, на которое хотите сделать ссылку.

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


This is my <A HREF = "documentB.html#Jabberwocky">link</A> to document B.

Теперь переход по слову ``link'' в документе А отошлет читателя непосредственно к словам ``some text'' в документе В.

Ссылки на специфические части в текущем документе

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

Например, ссылка на место в документе В, называющееся "Jabberwocky", будет выглядеть следующим образом:


This is <A HREF = "#Jabberwocky">Jabberwocky link</A> from within Document B.

Дополнительные таги стиля

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

Списки

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

Ненумерованные списки

Чтобы сделать ненумерованный список:

Начните с открытия списка с помощью тага <UL>.
Наберите таг <LI> и, за ним, элемент списка. (Закрывающий таг </LI> не нужен.)
Наберите закрывающий таг </UL>.

Ниже представлен пример списка из двух элементов:


<UL>
<LI> apples

<LI> bananas
</UL>

Результат выглядит следующим образом:

apples
bananas

Элементы списка <LI> могут содержать несколько параграфов. Просто разделите параграфы с помощью соответствующего тага <P>.

Пронумерованные списки

Пронумерованные списки идентичны ненумерованным списком, единственно, что надо использовать <OL> вместо <UL>. Элементы списка указываются с помощью того же тага <LI>. Следующий HTML код


<OL>
<LI> oranges

<LI> peaches

<LI> grapes
</OL>

произведет такой отформатированный вывод:

oranges
peaches
grapes

Списки-определения

Список-определение обычно состоит из термина (его аббревиатура DT) и его определения (аббревиатура DD). Web просмоторщики обычно начинают определение с новой строки.

Ниже приведен пример списка-определения:


<DL>

<DT> NCSA

<DD> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.

<DT> Cornell Theory Center

<DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.</DL>

Его вывод выглядит следующим образом:

NCSA: NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering.
Cornell Theory Center: CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering.

<DT> и <DD> элементы могут содержать несколько параграфов, списков или другую определяющую информацию,

Вложенные списки

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

Пример вложенного списка:


<UL>
<LI> A few New England states:
<UL>

<LI> Vermont

<LI> New Hampshire

</UL>
<LI> One Midwestern state:

<UL>
<LI> Michigan
</UL>
</UL>

Этот вложенный список отображается так:

A few New England states:
- Vermont
- New Hampshire
One Midwestern state:
- Michigan

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

Используйте таг <PRE> для того, чтобы пробелы, новые строки и символы табуляции имели значение. (Т.е. несколько пробелов будут отображены как несколько пробелов, и переводы строки будут именно там, где они стоят в исходном файле.) Этот стиль полезен для листингов программ. Например, следующие строки


<PRE>

#!/bin/csh

cd $SCR

cfs

get mysrc.f:mycfsdir/mysrc.f

cfs

get myinfile:mycfsdir/myinfile

fc -02 -o mya.out mysrc.f

mya.out

cfs
save myoutfile:mycfsdir/myoutfile

rm *

</PRE>

будут отображены как

#!/bin/csh
cd $SCR
cfs
get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs
save myoutfile:mycfsdir/myoutfile
rm *

В секциях <PRE> могут быть использованы гипертекстовые ссылки. Тем не менее, вам следует стараться не использовать других HTML тагов внутри заранее отформатированных секций.

Обратите внимание, что так как символы <, >, and & имеют специальное значение в HTML, вам надо использовать их escape-последовательности (<, >, и &) для того чтобы отобразить эти символы.

Блоки с цитатами

Используйте так <BLOCKQUOTE> для включения цитат в отдельные блоки на экране. Большинство просмоторщиков обычно отделяют их от окружающего текста.

Пример:


<BLOCKQUOTE> I still have a dream. It is a dream deeply rooted in the American dream.

<P> I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

<P>

</BLOCKQUOTE>

Результат будет следующий:

I still have a dream. It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident that all men are created equal.

Адреса

Таг <ADDRESS> обычно используется для указания автора документа и его email адреса. Это обычно последняя часть документа.

Например, последняя строка online версии этого руководства следующая:


<ADDRESS> A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu</ADDRESS>

На экране отобразится:

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

ЗАМЕЧАНИЕ: Таг <ADDRESS> не используется для почтовых адресов, которые форматируются специальным образом.

Форматирование символов

Вы можете отображать отдельные слова или выражения специальными стилями. Существует два типа стилей: логический и физический. Логические стили используются для отображения текста в соответствии с его значением, в то время, как физические стили определяют специфическое отображение некоторой части текста. Например, в предыдущем предложении слова "Логические стили" были отформатированы как "определение" ("definition''). Тот же самый эффект (наклонное написание текста) мог бы быть достигнут посредством использования тага, который бы определил формат этих слов как "italic".

Используйте по возможности логические стили

Если и физические, и логические стили дают одинаковый эффект, зачем нужны оба типа стилей? Мы посвятим несколько параграфов философии SGML, которая кратко заключается в следующем:"Доверяй своему просмоторщику."

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

Другое преимущество логических стилей заключается в том, что они помогают визуализировать содержание ваших документов. Значительно легче использовать таг <H1>, чем запоминать, что заголовок первого уровня должен выводиться каким-то определенным шрифтом. Аналогично дело обстоит и со стилями для форматирования символов. Например, рассмотрим таг <STRONG>. Большинство просмоторщиков отображают его жирным шрифтом. Однако, вполне вероятно, что читатель предпочитает отображение такого текста красным цветом. Логические стили предоставляют возможность использования таких вариантов.

Логические стили

<DFN>: для определяемых слов. Обычно отображается наклонным шрифтом. (NCSA Mosaic World Wide Web просмоторщик.)
<EM>: для усиления. Обычно отображается наклонным шрифтом. (Watch out for pickpockets.)
<CITE>: для названий книг, фильмов, и т.п. Обычно отображается наклонным шрифтом. (A Beginner's Guide to HTML)
<CODE>: для вставок из компьютерного текста. Отображается непропорциональным шрифтом. (The <stdio.h> header file)
<KBD>: для пользовательского ввода с клавиатуры. Должен отображаться жирным непропорциональным шрифтом, но многие просмоторщики выводят его просто непропорциональным шрифтом. (Enter passwd to change your password.)
<SAMP>: для компьютерных сообщений. Отображается непропорциональным шрифтом. (Segmentation fault: Core dumped.)
<STRONG>: для особенного усиления. Обычно отображается жирным шрифтом. (Important)
<VAR>: для отображения переменных, которые пользователь должен заменить конкретными значениями. Обычно отображается наклонным шрифтом. (rm filename deletes the file.)

Физические стили

<B>: жирный текст
<I>: наклонный текст
<TT>: непропорциональный текст

Использование символьных тагов

Чтобы применить символьный стиль,

Начните с тага <tag>, где tag это таг желаемого вами стиля, чтобы указать начало форматируемого текста.
Введите форматируемый текст.
Завершите ввод тагом </tag>.

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

Escape-последовательности

Четыре ASCII символа -- (<), (>), (&) и (") -- имеют специальное значение в HTML и, поэтому, не могут быть использованы "в качестве текста".

Чтобы использовать один из этих символов в HTML документе, вы должны использовать его escape последовательность:

<: escape-последовательность для <
>: escape-последовательность для >
&: escape-последовательность для &
": escape-последовательность для "

Дополнительные escape-последовательности поддерживают т.н. "иностранные" символы. Например:

ö: escape-последовательность для маленького o с умляутом: o
ñ: escape-последовательность для маленького n с тильдой: n

Полный список поддерживаемых символов может быть найден на CERN.

ЗАМЕЧАНИЕ: В отличие от всего остального HTML, escape-последовательности чувствительны к регистру. Вы не можете, например, использовать &LT; вместо <.

Насильный перевод строки

Таг <BR> вызывает перевод строки без появления дополнительной пустой строки. (В противоположность этому, большинство просмоторщиков форматируют таг параграфа <P> с использованием дополнительной пустой строки.)

Одно из использований <BR> состоит в форматировании адресов:

National Center for Supercomputing Applications


<BR>

605 East Springfield Avenue

<BR>

Champaign, Illinois 61820-5518

<BR>

Горизонтальные линии

Таг <HR> вызывает показ горизонтальной линии во всю ширину окна просмоторщика.

Встроенные иллюстрации

Большинство Web просмотрщиков могут отображать встроенные в текст иллюстрации в формате .XBM или .GIF . Каждая картинка требует времени на ее обработку и замедляет загрузку документа, поэтому не стоит включать в документ большого количества иллюстраций или иллюстраций большого размера.

Чтобы вставить картинку используйте следующую конструкцию:

 <IMG SRC=image_URL>

где image_URL это URL файла с картинкой. Синтаксис для IMG SRC URL идентичен синтаксису, использующемуся в конструкции HREF. GIF файлы должны иметь расширение .gif; X Bitmap файлы должны иметь расширение .xbm.

По умолчанию текст выводится рядом с нижней частью картинки.

Добавьте опцию ALIGN=TOP, если вы хотите выравнять текст по веру картинки. Таким образом, полный таг для вставки картинок такой (с выравниванием по верху):

 <IMG ALIGN=top SRC=image_URL>

ALIGN=MIDDLE выводит текст по центру.

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

Некоторые World Wide Web просмоторщики, в основном те, которые работают на терминалах VT100, не могут отображать картинки. Опция ALT позволяет вам определить, какой текст будет выводиться в этой ситуации на месте картинки. Например:

 <IMG SRC = "UpArrow.gif" ALT = "Up">

где UpArrow.gif будет заменена в текстовых просмоторщиках, таких как lynx, на слово "Up."

Внешние картинки, звуки и анимация

Вы можете подключить внешний образ (который, например, может быть более подробным вариантом встроенной иллюстрации), используя конструкцию HREF:

 <A HREF = image_URL>link anchor</A>

Используйте аналогичный синтаксис для подключения внешних звуков и анимации. Единственное отличие заключается в расширении подсоединяемого файла. Например:

<A HREF = "QuickTimeMovie.mov">link anchor</A>

Некоторые общие типы файлов и их расширения:

Тип файла: Расширение
Plain text: .txt
HTML document: .html
GIF image: .gif
TIFF image: .tiff
XBM bitmap image: .xbm
JPEG image: .jpg or .jpeg
PostScript file: .ps
AIFF sound: .aiff
AU sound: .au
QuickTime movie: .mov
MPEG movie: .mpeg or .mpg

Имейте ввиду аудиторию для которой вы создаете свой документ. Например, большинство UNIX просмоторщиков не могут показывать QuickTime movies.

Большой пример

Перед вами пример более серьезного документа:


<HEAD>

<TITLE>A Longer Example</TITLE>

</HEAD>

<BODY>

<H1>A Longer Example</H1>

This is a simple HTML document. This is the first paragraph.

<P> This is the second paragraph, which shows special effects.

This is a word in <I>italics</I>.  This is a word in <B>bold</B>. Here is an in-lined GIF image: <IMG SRC = "myimage.gif">. <P> This is the third paragraph, which demonstrates links.  Here is a hypertext link from the word <A HREF = "subdir/myfile.html">foo</A> to a document called "subdir/myfile.html". (If you try to follow this link, you will get an error screen.) <P>

<H2>A second-level header</H2>

Here is a section of text that should display as a fixed-width font:

<P>

<PRE> On the stiff twig up there Hunches a wet black rook Arranging and rearranging its feathers in the rain ... </PRE>

This is a unordered list with two items:

<P>

<UL>

<LI> cranberries

<LI> blueberries

</UL>

This is the end of my example document.

<P>

<ADDRESS>Me (me@mycomputer.univ.edu)</ADDRESS>

</BODY>

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Справочник начинающего по HTML