Основы HTML

Наша сегодняшняя задача- создать простой html- документ. Отметим сразу, что html- документ- это текстовый файл, который сделан по определенным правилам для того, чтобы его можно было разместить в сети Интернет.
Определенные правила заключаются в том, что внутри документа есть два вида текста:1) собственно, текст, который будет виден и 2) управляющие конструкции, называемые тегами, которые указывают браузеру как выводить текст.
Браузер- если кто не знает- это программа, которая способна выводить на экран различные html- страницы, расположенные на серверах ( компьютерах, подключенных к сети Интернет) и способна также обрабатывать запросы пользователя по приему\ передаче его запросов к различным серверам.
Например, если пользователь запустил браузер Internet Explorer (или любой другой) и ввел в адресную строку путь: www.microsoft.сom, то браузер ( при условии, что на компьютере установлено соединение с сетью Интернет) выдаст главную страницу данного сервера, которая имеет адрес:http:\\ www.microsoft.сom\index.html
Другими словами, браузер выведет на экран пользователя файл index.html, который находится в определенном месте и оформлен по определенным правилам. Наша сегодняшняя задача- научиться создавать простейший файл html- формата и запустить его на нашем компьютере.
Замечание. Несмотря на то, что на наших компьютерах нет соединения с Интернетом, мы сможем запустить файл, так как браузер "увидит" его в вашем каталоге…

Обязательная структура документа

<HTML> - границы документа <HEAD> - заголовок документа <TITLE>текст</TITLE> - название документа </HEAD> <BODY> - границы текста документа тело документа <div align="center">Хостинг от <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Body -тело документа

Oсновной синтаксис
<body>тело документа</body>
Возможные атрибуты
BGCOLOR= - фоновый цвет документа
TEXT= - цвет для текста документа
LINK= - цвет для не посещенной гипертекстовой связи
VLINK= - цвет для посещенной гипертекстовой связи
ALINK= - цвет для активной гипертекстовой связи
BACKGROUND= - URL фонового образа

Определены следующие стандартные цветовые константы: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow.

Следует отметить, что какой - либо цвет или оттенок цвета может быть задан при помощи специального RGB - формата. Название этого формата происходит от названия трех цветов: Red, Green, Blue. Каждому из этих цветов должна быть поставлена в соответствии требуемая интенсивность. При задании интенсивности следует учитывать, что нулю соответствует самая низкая интенсивность, а числу 255 - самая высокая. Интенсивность каждого из трех цветов указывается в шестнадцатеричном коде. Последовательно указав цветовые интенсивности каждого цвета, можно получить желаемый цвет или оттенок.

Например, "004А51". В данном примере цвету Red соответствует нулевая интенсивность, цвету Green - "4A", а цвету Blue - "51" в шестнадцатеричном коде.

FONT - размер и цвет шрифта

Oсновной синтаксис
<Font Size=n>текст</Font> или
<Font Color=цветовая спецификация>текст</Font>
Возможные атрибуты
SIZE= - размер шрифта; цифра в диапазоне 1-7 целое со знаком, например, "+1" или "-2"
COLOR= - цвет содержимого элемента Font

P - обычный абзац

Oсновной синтаксис
<P>абзац тела</P>
Возможные атрибуты
ALIGN= - выравнивание абзаца (LEFT, CENTER, RIGHT,JUSTIFY)

CENTER - центрирование

Oсновной синтаксис
<Center>часть текста</Center>

BR - перевод строки

Oсновной синтаксис
<Br>
Возможные атрибуты
CLEAR= - управление текстовым потоком
Возможные значения
Left - передвинет образ к левому краю
Right - к правому краю
All - сделает тоже самое и к левому и к правому краю

SAMP - образец вывода

Oсновной синтаксис
<Samp>текст</Samp>

H1,H2,H3,H4,H5,H6 -заголовки

Oсновной синтаксис
<Hn>заголовок текста<Hn>
Возможные атрибуты
ALINGH - выравнивание заголовка (LEFT, CENTER, RIGHT)

HR - горизонтальная линия

Oсновной синтаксис
<HR>
Возможные атрибуты
ALINGH - горизонтальное выравнивание черты (LEFT, CENTER, RIGHT)
NOSHADE - задает отображение черты в одном цвете
SIZE - высота черты
WIDTH - ширина черты

I - курсив (представление текста курсивов)

Oсновной синтаксис
<I>текст</I>

SMALL - малый шрифт (меньше чем обычный)

Oсновной синтаксис
<Small>текст</Small>

U - подчеркивание (для подчеркивания текста)

Oсновной синтаксис
<U>текст</U>

STRONG - сильное подчеркивание

Oсновной синтаксис
<Strong>текст</Strong>

B - жирный шрифт

Oсновной синтаксис
<B>текст</B>

BIG - большой шрифт

Oсновной синтаксис
<Big>текст</Big>

STRIKE - перечеркнутый текст

Oсновной синтаксис
<Strike>текст</Strike>

SUB - подстрочный знак

Oсновной синтаксис
<SUB>текст</SUB>

SUP - надстрочный знак

Oсновной синтаксис
<SUP>текст</SUP>

IMG - линейные изображения

Чтобы вставить рисунок в html - документ его необходимо поместить в тот же каталог, что и html - документ и воспользоваться тегом IMG. Допускается вставка рисунков формата JPEG или GIF. На самом деле есть еще несколько форматов рисунков, которые можно вставлять, но два выше упомянутых - основные.

Основной синтаксис
<IMG SRC="URL" ALT="текст">
Пример:

Возможные атрибуты
STR= - адрес изображения
ALT= - текстовое описание изображения
ALIGN= - позиционирование изображения (TOP, MIDDLE, BOOTTOM, LEFT, RIGHT)
HEIGHT= - высота
WIDTH= - ширина
BORDER= - ширина бордюра (рамки)
HSPACE= - ширина не заполненного пространства
VSPACE= - высота не заполненного пространства
USEMAP= - фрагмент идентификации для сайта клиента с картой образа
ISMAP= - показывает, что изображение является картой образа, реагирующей на нажатие клавиши мыши
Значение ALIGN имеют следующий смысл:
Align=Top - позиционирует верх изображения с верхом текущей текстовой строки. Браузеры по разному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке после него.
Align=Middle - выравнивает середину изображения по основной текстовой строке.
Align=Bottom - (по умолчанию), выравнивает низ изображения по основной строке.
Align=Left - перемещает изображение к текущему левому краю.
Align=Right - перемещает изображение к текущему правому краю.

Video и audio

Чтобы вставить видео в html - документ его необходимо поместить в тот же каталог, что и html - документ и можно воспользоваться тегом IMG.

Основной синтаксис
<IMG dynsrc="URL" start="fileopen,mouseover" loop="Infinite">
Пример:

Также для просмотра видио или вставки звуковых файлов можно воспользоваться тегом <EMBED>.

Основной синтаксис
<embed src="URL">
Пример:

Возможные атрибуты
ALIGN= - позиционирование изображения (TOP, MIDDLE, BOOTTOM, LEFT, RIGHT)
HEIGHT= - высота
WIDTH= - ширина
BORDER= - ширина бордюра (рамки)
AUTOSTART= - включен/выключен проигрователь (True/False)
Пример:

А - якоря, гиперсвязи, и т.д.

Основной синтаксис
<A HREF="цель">текст якоря</A>
или <A NAME="имя">text</A>
Пример:
microsoft
Возможные атрибуты
NAME - имя для связанного конца
HREF - сетевой адрес для связанного ресурса
REL - указание связи вперед
REV - указание обратной связи
TITLE - заголовок для связанного ресурса

LI - списковый элемент

Основной синтаксис
<LI>содержание элемента списка</LI>

OL - упорядоченные (нумерованные) списки

Основной синтаксис
<OL>
<LI> элемент списка 1
<LI> элемент списка 2
…
</OL>
Возможные атрибуты
TYPE - стиль нумерации
START - начальная цифра последовательности
COMPACT - сокращенное расстояние между элементами

TABLE - таблица

Основной синтаксис
<TABLE>строки таблицы</TABLE>
Возможные атрибуты
ALIGN - горизонтальное выравнивание всей таблицы
WIDTH - ширина всей таблицы
BORDER - ширина рамки
CELLSPACING - промежуток между ячейками
CELLSPADDING - промежуток между содержимом ячейки и рамкой вокруг ячейки

CAPTION - заголовок для таблицы

Основной синтаксис
<CAPTION>строки таблицы</CAPTION>
Возможные атрибуты
ALIGN - размешение заголовка относительно таблицы (TOP, BOTTOM)

TR - табличная строка

Основной синтаксис
<TR>заголовок ячеек(TH элементы) и данные ячеек(TD элементы)</TR>
Возможные атрибуты
ALIGN - горизонтальное выравнивание в ячейке(LEFT, CENTER, RIGHT)
VALIGN - вертикальное выравнивание в ячейке(TOP, MIDDLE, BOTTOM, BASELINE)

TH - табличный заголовок(ячейка)

Основной синтаксис
<TH>текст<TH>
Возможные атрибуты
NOWRAP - подавляет перенос слов
ROWSPAN - число строк охваченных ячейков
COLSPAN - число столбцов охваченных ячейков
ALIGN - горизонтальное выравнивание данных в ячейках
VALIGN - вертикальное выравнивание данных в ячейках
WIDTH - ширина ячейки
HEIGHT - высота ячейки

TD - табличныe данные

Основной синтаксис
<TD>данные<TD>
Возможные атрибуты
NOWRAP - подавляет перенос слов
ROWSPAN - число строк перекрываемых ячеек
COLSPAN - число столбцов перекрываемых ячеек
ALIGN - горизонтальное выравнивание данных в ячейках
VALIGN - вертикальное выравнивание данных в ячейках
WIDTH - ширина ячейки
HEIGHT - высота ячейки
Пример:

1 2 3

4 5 6

7 8 9

FORM - заполняемая форма

Основной синтаксис
<Form Action="URS">содержание формы</Form>
Возможные атрибуты
ACTION - адрес сервера, который использует форма(HTTP или URL)
METHOD - метод передачи данных, полученных от пользователя, на сервер (GET, POST)
ENCTYPE - механизм, используемый для кодирования содержимого формы

INPUT - поля ввода в формах

Основной синтаксис
<INPUT TYPE=тип_оля_вода другие_араметры>
Возможные атрибуты
TYPE - тип поля для ввода (TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE)
NAME - имя для идентификации поля, когда его содержимое передается серверу
VALUE - первоначальное значение вводного поля
CHECKED - когда TYPE=RADIO или CHECKBOX, инициализирует поле к установленному состоянию
SIZE - видимый размер поля, количество символов
MAXLENGTH - максимальное количество символов, разрешенных в текстовом поле
SRC - адрес изображения
ALIGN - выравнивание изображения для графических управляющих (TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
Различные значения атрибута TYPE соответствуют различным видам вводных полей.
TYPE=TEXT - одностроковое текстовое поле
Пример:

TYPE=PASSWORD - вводимые символы представляются в виде *
Пример:

TYPE=CHECKBOX - используется для простых булевых атрибутов (истина/ложь)
Пример:

TYPE=RADIO - может принимать единственное значение из множества.
Пример:

TYPE=SUBMIT - определяет кнопку, которую пользователь может нажать, чтобы передать содержимое формы серверу.
Пример:

TYPE=RESET - чтобы вернуть поля формы к исходному состоянию
Пример:

TYPE=FILE - позволяет прикрепить файл к содержимому формы.
Пример:

TYPE=HIDDEN - этот тип поля не отображается пользователю.
Пример:

TYPE=IMAGE - используется для графических кнопок отсылок, отображаемых изображением.
Пример:

SELECT (ВЫБРАТЬ) - меню выбора в форме

Основной синтаксис
<SELECT name=имя>элементы OPTION</SELECT>
Возможные атрибуты
NAME - имя, которое используется для идентификации выбора меню
SIZE - устанавливает число одновременно видимых опций
MULTIPLE - означает, что пользователь может сделать множественный выбор из меню

OPTION - элемент выбора в меню Основной синтаксис
<OPTION>текст</OPTION>
Основной синтаксис
SELECTED - задает опцию по умолчанию
VALUE - значение свойства используется, когда серверу передается содержимое формы; это свойство сочетается со свойством имени, задаваемым атрибутом NAME из внешнего элемента SELECT

Пример:
TEXTAREA - многострочное текстовое поле

Основной синтаксис
<TEXTAREA NAME=имя ROWS=m COLS=n>
текст </TEXTAREA>
Пример:
Ночевала тучка золотая На груди утеса- великана Рано утром в путь она пустилась Но остался влажный след в утесе
Возможные атрибуты
NAME - имя, которое используется для идентификации поля с текстовым содержимым.
ROWS - количество линий видимого текста
COLS - число, задающее видимую ширину текста

BUTTON - кнопка

Основной синтаксис
<Button>Простая кнопка</Button>
Пример:

возможные атрибуты
ONCLICK - обработка одиночного клика левой кнопки мыши
ONDBLCLICK - при двойном щелчке кнопки мыши
ONMOUSEDOWN - при нажатии кнопки мыши
ONMOUSEUP - при отпускании кнопки мыши и т.д.

Фреймы

Создадим документ, который разбивает область экрана на две части. Левая часть содержит оглавление разделов документа, который располагается в правой части. При выборе пункта оглавления в левой части появляется соответствующий раздел документа в правой части. Разобьем область экрана на два фрейма. Левый фрейм занимает m% ширины всего окна и будет содержать оглавление разделов документа, который загрузим в правый фрейм. Фреймовая структура задает способ организации экрана и определяет, какие документы должны быть первоначально загружены во фреймы. Создать описанную фреймовую структуру можно, если использовать документ, содержащий HTML-код :<.p>

<frameset cols="m, n"> - ширина левой и правой части <frame src=имя документа1 name=left> - адреса документов первоначально загружаемых во фрейм <frame src= имя документа2 name=right> </frameset>

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

<base target=right> <OL> <a href="имя документа">имя ссылки</a><br> … </OL>

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

Коплю на кросовки

Хостинг от uCoz