Заголовок1
Заголовок2 Заголовок2
Заголовок3 Заголовок3
Заголовок4 Заголовок4
Заголовок5 Заголовок5
Заголовок6 Заголовок6
Пример простой HTML страницы, созданной в редакторе Notepad++
Создание списков Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
1.Неупорядочные списки,
2.Упорядочные списки,
3.Списки - определения.
Неупорядоченный список использует для выделения записей специальные символы.
Неупорядоченный список определяется следующими командами начала и конца списка:
и
Каждый элемент списка начинается с команды:
В команде - может быть параметр TYPE, который определяет внешний вид символа,
используемого для выделения строки в списке и может иметь следующие значения:
- - круглая жирная точка,
- - окружность,
- - маленький черный квадрат.
В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами начала и конца списка:
и
Каждый элемент списка начинается с команды:
В команде - может быть параметр TYPE, который определяет тип нумерации и
может иметь следующие значения:
- - прописными буквами,
- - строчными буквами,
- - прописными римскими цифрами,
- - строчными римскими цифрами,
- - арабскими цифрами.
В списке - определении все записи сдвинуты влево при помощи табуляции.
Список - определение определяется следующими командами начала и конца списка:
и
Каждый элемент списка начинается с команды:
Форматирование параграфов и вывод текста в несколько столбцов
В документе HTML невозможно создать абзац, используя клавишу [Enter].
Использование этой клавиши улучшает внешний вид исходного текста, но не влияет
на полученное изображение.
Для перехода на следующую строку воспользуйтесь командой
Для создания пустой строки воспользуйтесь командой
Для создания горизонтальной черты воспользуйтесь командой
Если черта создается не на всю строку, а на какую - то ее часть, например, на
40%, то команда выглядит следующим образом:
Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях)
Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ задайте соответственный параметр
ALIGN=LEFT/RIGHT/CENTER
Черная линия задается наличием параметра NOSHADE.
Вы можете расположить текст по центру спомощью следующих команд:
Иногда необходимо создать текстовый документ, расположение строк которого
(табуляция, отступы, выравнивание) определяется разработчиком домашней страницы,
а не программой - редактором.
Для создания такого текста воспользуйтесь командами: текст
Полученный в “браузере” образ текста будет точно соответствовать тексту в
исходном HTML файле.
Аналогичные функции выполняет пара команд: текст
Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном
формате с помощью команд и .
Ниже приводится формат команд:
текст .
Здесь N - количество столбцов, M - расстояние между столбцами.
“Браузеры”, не поддерживающие вывод текста в несколько столбцов, обеспечат вывод
текста нормально, в 1 столбец.
Форматирование символов
Для выделения отдельных частей текста можно воспользоваться следующими стилями:
B - жирный (Bold);
I - курсив (Italic);
U - с подчеркиванием (Underline);
S - с перечеркиванием (STRIKE);
Ниже представлена таблица команд выделения текста.
Отображаемый текст Запись в формате HTML
Выделение текста жирным шрифтомВыделение текста жирным шрифтом
Выделение текста курсивомВыделение текста курсивом
Выделение текста подчеркиваниемВыделение текста подчеркиванием
Выделение текста перечеркиваниемВыделение текста
перечеркиванием
Для изменения размера текстовых символов воспользуйтесь командами:
, где i в пределах от 1 до 7 относительно начального
размера букв.
Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд и
. Эти команды используются в паре с командами и .
Еще две пары команд:
и - подстрочный индекс, например, H2SO4.
и - надстрочный индекс, например, (a2 - b2) = (a - b)(a + b).
Все вышеприведенные команды определяют физическое форматирование символов. Вы
задаете конкретное изменение характеристик символов.
Кроме того, есть логическое форматирование символов - Вы даете описание, а
браузер решает как изменять характеристики. В общем, кто доверяет браузеру -
пользуйтесь этими командами. Они выглядят следующим образом:
Цитата
Особо важный текст
Сильное выделение текста
Текст, введенный пользователем
Листинг программы
Последовательность литералов
Имя переменной
Браузер пользователя сам выбирает шрифт, если Вы его конкретно не задали в
описании страницы. Если в странице задан шрифт, которого нет у пользователя,то
Вы можете задать список, состоящий из нескольких шрифтов, и браузер выберет
самый левый, а если его в системе нет, то следующий и т. д. Если ни одного из
шрифтов нет, браузер выбирает свой шрифт.
Фонт задается с помощью команды: FONT FACE
Управление цветом
Цвета и изображения фона задаются с помощью команды .
Эта команда может задаваться только в начале HTML файла и не может быть изменена
в дальнейшем. Ее параметры:
bgcolor = “# код цвета” - цвет фона документа,
text = “# код цвета” - цвет текста документа,
link = “# код цвета” - цвет текста, используемого в качестве ссылки,
vlink = “# код цвета” - цвет ссылки на просмотренный ранее документ,
alink = “# код цвета” - цвет ссылки в момент нажатия на нее правой кнопки мыши.
Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел.
Важно отметить, что цвет фона не отображается на бумаге при выводе HTML -
документа на печать. Ниже приводятся коды простейших цветов:
Белый = FFFFFF Малиновый = FF00FF
Желтый = FFFF00 Бирюзовый = 008080
Красный = FF0000 Темно-синий = 000080
Серый = 808080 Коричневый = 808000
Синий = 0000FF Голубой = 00FFFF
Зеленый = 00FF00 Темно-зеленый = 008000,
Черный = 000000 Индиго = 800080
Пурпурный = CC33FFТемно-красный = 800000
Для изменения цвета текущего текста можно в любом месте домашней страницы
воспользоваться командами: Текущий текст
Определено несколько именованных цветов. Их значения видны из таблицы:
Если Вы хотите создать “обои”, то есть цветной фон с использованием 8301_ -
файла с именем, например, Ground.gif, то вместо параметра BGCOLOR записываем:
BACKGROUND = “Ground.gif”
Если при этом вы хотите, чтобы фоновое изображение не двигалось, т.е. чтобы
создался эффект “водяных знаков”, то задайте дополнительный параметр:
BACKGROUND = “Ground.gif” BGPROPERTIES=FIXED
Использование специальных символов
В языке HTML символ < используется как первый символ каждой команды.
Этот символ не может быть использован для обозначения отношения “меньше”. Для
отображения на экране символа < (“меньше”) и некоторых других символов в HTML
приняты специальные обозначения:
<<
>>
&&
“"
Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного,
независимо от того, сколько пробелов было в исходном тексте. Для задания
необходимого количества подряд расположенных пробелов следует воспользоваться
специальным символом пробела:  .
Например, в следующей записи исходного текста: (A B) в
отображаемом тексте между символами A и B будет 3 пробела.
При необходимости изобразить на экране команду языка HTML возникает
дополнительная проблема - редактор может преобразовать ее в соответствующую
команду прямо в исходном тексте.
И вместо отображения соответствующей команды на экране Вы получаете
расположенный по центру текст в следующих строках. Чтобы этого избежать, можно,
например, вставить внутрь команды две парные команды. Например, вышеприведенную
команду следует записать следующим образом:
Цвет
| Код
| Цвет
| Код
| Цвет
| Код
| Цвет
| Код
| Aqua
| #00FFFF
| Black
| #000000
| Blue
| #0000FF
| Fuchsia
| #FF00FF
| Gray
| #808080
| Green
| #008000
| Lime
| #00FF00
| Maroon
| #800000
| Navy
| #000080
| Olive
| #808000
| Purple
| #800080
| Red
| #FF0000
| Silver
| #c0c0c0
| Teal
| #008080
| White
| #FFFFFF
| Yellow
| #FFFF00
|
Создание таблиц Таблица создается с помощью команд .
Команда может иметь следующие параметры:
UNITS - может принимать значение RELATIVE или PIXELS. Определяет единицы
измерения в других параметрах. По умолчанию, UNITS = PIXELS.
BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии
задается командой BORDER = N.
CELLPADDING - Определяет минимальный промежуток вокруг содержимого таблицы.
BGCOLOR - Определяет цвет фонового изображения в таблице. Во всех таблицах
данного документа я использую BGCOLOR= WHITE
Есть еще несколько команд, задающих цвет обрамления: BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLORLIGHT, но они используются только в Explorer.
Для формирования таблицы, состоящей из нескольких строк, воспользуйтесь командой
, разделяющей строки. Команды и | используются для обозначения
заголовка столбца клеток.
Параметры ROWSPAN и COLSPAN команд и | используются для формирования
клеток данных, объединяющих более одной строки или столбца.
Встраивание гипертекстовых ссылок Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла следует ввести необходимый
текст в двух местах:
Записать метку в том месте HTML - файла, куда необходимо перейти.
Записать переход на эту метку в том месте, откуда будет выполнен переход.
Для организации метки запишите: , где МЕТКА - любое имя,
состоящее из букв английского алфавита и цифр.
Для перехода на эту метку запишите:Перейти на метку.
Переход в другой документ той же домашней страницы.
Для перехода из любого места HTML - файла h1.html в начало HTML - файла h2.html
следует записать: Переход к разделу h2
Переход в другой документ.
В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ
или файл.
Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора
ресурсов - URL.
Этот локатор определяет правила написания различных видов ссылок.
Ниже приводятся важнейшие префиксы для URL:
Префикс URLФункция
FTP://Ссылка на сервер FTP
HTTP://Ссылка на объект, который будет передаваться с использованием
протокола HTTP
FILE://localhostСсылка на локальный диск
GOPHER://Ссылка на сервер Gopher
MAILTO://Ссылка на электронный почтовый адрес
NEWS://Ссылка на электронную конференцию
NNTP://Ссылка на сервер электронной конференции
TELNET://Ссылка на сервер электронной конференции
Для записи гипертекстовой ссылки в HTML - файл используйте следующую команду: href = “URL”> Переход по гипертекстовой ссылке.
При нажатии левой кнопки мыши на текст Переход по гипертекстовой ссылке. Вы
перейдёте на ресурс, заданный в URL. Для возврата воспользуйтесь клавишей “Back”
“браузера”.
Вывод изображения на экран.
Изображения могут быть выведены на экран так же, как текст. Файлы изображения
могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF
(файлы *.gif) и JPEG (файлы *.jpg).
Ниже приводится формат команды:
HEIGHT >, где:
ИМЯ ФАЙЛА - это имя данного файла в вашей домашней странице или полное имя пути
и файла, если файл не принадлежит данной домашней странице.
Текст - это текст, выводимый вместо изображения, если файл изображения по какой
- -либо причине недоступен.
DIRECTION - место расположения изображения. Принимает следующие возможные
значения:
ALIGN=TOP - последующий текст располагается в верхней части изображения.
ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает
изображение справа.
ALIGN=MIDDLE - изображение находится в центре листа.
ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает
изображение слева.
WIDTH = WIDTH - ширина требуемого изображения на экране,
HEIGHT = HEIGHT - высота требуемого изображения на экране.
Гипертекстовая ссылка с помощью изображения.
Допустим, что Вы выводите на экран изображение 8301_ - файл, который называется,
например, 8301_.gif.
Если Вы хотите организовать домашнюю страницу так, чтобы при нажатии левой
кнопки мыши на изображение, перейти на другую домашнюю страницу, например, на :
HTTP://WWW.HOME.COM ,
то следует записать следующую команду:
Создание ссылки на почтовый адрес.
Например мой почтовый адрес в GEOCITIES.COM: family_katz@geocities.com
Для организации ссылки в моей домашней странице на мой почтовый адрес я записал
в конце главного раздела домашней страницы:
Перейти на мой почтовый адрес
В следующей строчке я задал такую же ссылку с помощью аппликации MAIL12.GIF
вместо текста:
Кадры Команды работы с кадрами.
Вы можете разделить экран на несколько независимых оконных кадров, каждый из
которых отображает отдельный HTML документ.
На экране кадры представляют собой прямоугольники. В HTML используются следующие
команды работы с кадрами:
- определяют состав и размеры кадров на экране,
, - определяют HTML файл для каждого кадра,
, - для сообщений “браузеру”, не обрабатывающему кадры.
Формат команды FRAMESET.
Команда делит целое окно (или часть окна, определенное предыдущей командой
FRAMESET ) на несколько вертикальных (параметр COLS ) или горизонтальных
(параметр ROWS ) кадров. Каждый из этих кадров может определять HTML - файл,
отображаемый в ней (с помощью команды FRAME ) или, соответственно, делиться
дальше по тем же правилам со вложенной командой FRAMESET.
По концу определения кадров, задаваемых командой FRAMESET , не забудьте записать
команду /FRAMESET, иначе они могут быть построены неправильно.
Формат параметров COLS и ROWS.
Эти параметры позволяют определить размеры и количество построенных вертикально
(параметр COLS) или горизонтально (параметр ROWS) кадров.
Атрибуты параметров задаются в одной из 3 форм:
абсолютный размер в пикселях,
заданный процент в общей длине или ширине,
остаток после задания предыдущих кадров.
Символ “*” означает выделение кадру оставшейся площади. Например, команда:
|
|