Реферат: HTML и создание сайтов
хотите сформировать собственное мнение о названных программах, пользуйтесь им.
Но работа с HTML - это способ усвоить особенности создания документов в
стандартизированном языке, используя расширения, только когда это действительно
необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими
широко распространенными броузерами, и, возможно, станет основой почти всего
имеющего отношение к Web программного обеспечения.
3.1. Структура HTML документа
Символы, заключенные в угловые скобки <> являются HTML командами, по которым
“браузер” распознает, как следует преобразовать части текста, заключенные между
этими командами.
Документ в целом должен быть отмечен как документ в формате HTML. Для этого он
должен начинаться командой <HTML> и заканчиваться командой </HTML>.
Документ состоит из 2 частей:
Заголовка (Head),
Собственно документа (Body).
Для выделения заголовка следует ввести: <HEAD> Заголовок документа <HEAD>
Каждый WWW - документ имеет название, которое вводится в титульной строке
“браузера”.
Для ввода титульной строки в заголовок документа следует воспользоваться
следующими командами: <HEAD> <TITLE> TITLE List </TITLE> </HEAD>
Следует отметить, что титульная строка должна быть на английском языке в
латинской кодировке так как она отображается в специальных полях браузера.
Для записи основного текста следует ввести: <BODY> Основной текст </BODY>
Таким образом, общая схема документа в формате HTML выглядит следующим образом:
<HTML>
<HEAD> <TITLE> Титульная строка документа </TITLE> </HEAD>
<BODY> Основной текст документа </BODY>
</HTML>
При написании команд HTML не имеет значение, какими буквами - строчными или
прописными Вы пишете команды.
Создание заголовков
Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>, причем
при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.
Например,
Отображаемый текстЗапись в формате HTML
Заголовок1<H1> Заголовок1 </H1>
Заголовок2<H2> Заголовок2 </H2>
Заголовок3<H3> Заголовок3 </H3>
Заголовок4<H4> Заголовок4 </H4>
Заголовок5<H5> Заголовок5 </H5>
Заголовок6<H6> Заголовок6 </H6>
3.3. Создание списков
Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
1.Неупорядочные списки,
2.Упорядочные списки,
3.Списки - определения.
Неупорядоченный список использует для выделения записей специальные символы.
Неупорядоченный список определяется следующими командами начала и конца списка:
<UL> и <UL>
Каждый элемент списка начинается с команды: <LI>
В команде <LI> может быть параметр TYPE, который определяет внешний вид символа,
используемого для выделения строки в списке и может иметь следующие значения:
<LI TYPE=DISK> - круглая жирная точка,
<LI TYPE=CIRCLE> - окружность,
<LI TYPE=SQUARE> - маленький черный квадрат.
В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами начала и конца списка:
<OL> и </OL>
Каждый элемент списка начинается с команды: <LI>
В команде <LI> может быть параметр TYPE, который определяет тип нумерации и
может иметь следующие значения:
<LI TYPE = A> - прописными буквами,
<LI TYPE = a> - строчными буквами,
<LI TYPE = I> - прописными римскими цифрами,
<LI TYPE = i> - строчными римскими цифрами,
<LI TYPE = 1> - арабскими цифрами.
В списке - определении все записи сдвинуты влево при помощи табуляции.
Список - определение определяется следующими командами начала и конца списка:
<DL> и </DL>
Каждый элемент списка начинается с команды: <DD>
3.4 Форматирование параграфов и вывод текста в несколько столбцов.
В документе HTML невозможно создать абзац, используя клавишу [Enter].
Использование этой клавиши улучшает внешний вид исходного текста, но не влияет
на полученное изображение.
Для перехода на следующую строку воспользуйтесь командой <br>
Для создания пустой строки воспользуйтесь командой <p>
Для создания горизонтальной черты воспользуйтесь командой <hr>
Если черта создается не на всю строку, а на какую - то ее часть, например, на
40%, то команда выглядит следующим образом: <hr width= 40 %>
Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях)
<hr size= 10 >
Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ задайте соответственный параметр
ALIGN=LEFT/RIGHT/CENTER
Черная линия задается наличием параметра NOSHADE.
Вы можете расположить текст по центру спомощью следующих команд: <CENTER>
Иногда необходимо создать текстовый документ, расположение строк которого
(табуляция, отступы, выравнивание) определяется разработчиком домашней страницы,
а не программой - редактором.
Для создания такого текста воспользуйтесь командами: <PRE> текст </PRE>
Полученный в “браузере” образ текста будет точно соответствовать тексту в
исходном HTML файле.
Аналогичные функции выполняет пара команд: <LISTING> текст </LISTING>
Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном
формате с помощью команд <MULTICOL> и </MULTICOL>.
Ниже приводится формат команд:
<MULTICOL COLS= “N” GUTTER= “M”> текст </MULTICOL>.
Здесь N - количество столбцов, M - расстояние между столбцами.
“Браузеры”, не поддерживающие вывод текста в несколько столбцов, обеспечат вывод
текста нормально, в 1 столбец.
3.5 Форматирование символов
Для выделения отдельных частей текста можно воспользоваться следующими стилями:
B - жирный (Bold);
I - курсив (Italic);
U - с подчеркиванием (Underline);
S - с перечеркиванием (STRIKE);
Ниже представлена таблица команд выделения текста.
Отображаемый текст Запись в формате HTML
Выделение текста жирным шрифтомВыделение <b> текста </b> жирным шрифтом
Выделение текста курсивомВыделение <i> текста </i> курсивом
Выделение текста подчеркиваниемВыделение <u> текста </u> подчеркиванием
Выделение текста перечеркиваниемВыделение <strike> текста </strike>
перечеркиванием
Для изменения размера текстовых символов воспользуйтесь командами:
<FONT SIZE = +i > </FONT>, где i в пределах от 1 до 7 относительно начального
размера букв.
Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд <BIG> и
<SMALL>. Эти команды используются в паре с командами </BIG> и </SMALL>.
Еще две пары команд:
<SUB> и </SUB> - подстрочный индекс, например, H2SO4.
<SUP> и </SUP> - надстрочный индекс, например, (a2 - b2) = (a - b)(a + b).
Все вышеприведенные команды определяют физическое форматирование символов. Вы
задаете конкретное изменение характеристик символов.
Кроме того, есть логическое форматирование символов - Вы даете описание, а
браузер решает как изменять характеристики. В общем, кто доверяет браузеру -
пользуйтесь этими командами. Они выглядят следующим образом:
<CITE>Цитата<CITE>
<EM>Особо важный текст</EM>
<STRONG>Сильное выделение текста</STRONG>
<KBD>Текст, введенный пользователем</KBD>
<CODE>Листинг программы</CODE>
<SAMP>Последовательность литералов</SAMP>
<VAR>Имя переменной</VAR>
Браузер пользователя сам выбирает шрифт, если Вы его конкретно не задали в
описании страницы. Если в странице задан шрифт, которого нет у пользователя,то
Вы можете задать список, состоящий из нескольких шрифтов, и браузер выберет
самый левый, а если его в системе нет, то следующий и т. д. Если ни одного из
шрифтов нет, браузер выбирает свой шрифт.
Фонт задается с помощью команды: FONT FACE
3.6 Управление цветом
Цвета и изображения фона задаются с помощью команды <BODY>.
Эта команда может задаваться только в начале HTML файла и не может быть изменена
в дальнейшем. Ее параметры:
bgcolor = “# код цвета” - цвет фона документа,
text = “# код цвета” - цвет текста документа,
link = “# код цвета” - цвет текста, используемого в качестве ссылки,
vlink = “# код цвета” - цвет ссылки на просмотренный ранее документ,
alink = “# код цвета” - цвет ссылки в момент нажатия на нее правой кнопки мыши.
Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел.
Важно отметить, что цвет фона не отображается на бумаге при выводе HTML -
документа на печать. Ниже приводятся коды простейших цветов:
Белый = FFFFFFМалиновый = FF00FF
Желтый = FFFF00Бирюзовый = 008080
Красный = FF0000Темносиний = 000080
Серый = 808080Коричневый = 808000
Синий = 0000FFГолубой = 00FFFF
Зеленый = 00FF00Темнозеленый = 008000,
Черный = 000000Индиго = 800080
Пурпурный = CC33FFТемнокрасный = 800000
Для изменения цвета текущего текста можно в любом месте домашней страницы
воспользоваться командами: <FONT COLOR= Код цвета > Текущий текст </FONT COLOR>
Определено несколько именованных цветов. Их значения видны из таблицы:
<FONT COLOR = black >
Если Вы хотите создать “обои”, то есть цветной фон с использованием 8301_ -
файла с именем, например, Ground.gif, то вместо параметра BGCOLOR записываем:
BACKGROUND = “Ground.gif”
Если при этом вы хотите, чтобы фоновое изображение не двигалось, т.е. чтобы
создался эффект “водяных знаков”, то задайте дополнительный параметр:
BACKGROUND = “Ground.gif” BGPROPERTIES=FIXED
3.7 Использование специальных символов
В языке HTML символ < используется как первый символ каждой команды.
Этот символ не может быть использован для обозначения отношения “меньше”. Для
отображения на экране символа < (“меньше”) и некоторых других символов в HTML
приняты специальные обозначения:
Отображаемый текстЗапись в формате HTML
<<
>>
&&
“"
Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного,
независимо от того, сколько пробелов было в исходном тексте. Для задания
необходимого количества подряд расположенных пробелов следует воспользоваться
специальным символом пробела:  .
Например, в следующей записи исходного текста: (A B) в
отображаемом тексте между символами A и B будет 3 пробела.
При необходимости изобразить на экране команду языка HTML возникает
дополнительная проблема - редактор может преобразовать ее в соответствующую
команду прямо в исходном тексте.
И вместо отображения соответствующей команды на экране Вы получаете
расположенный по центру текст в следующих строках. Чтобы этого избежать, можно,
например, вставить внутрь команды две парные команды. Например, вышеприведенную
команду следует записать следующим образом:<<u></u>CENTER>
3.8. Создание таблиц
Таблица создается с помощью команд <TABLE> и </TABLE>.
Команда <TABLE> может иметь следующие параметры:
UNITS - может принимать значение RELATIVE или PIXELS. Определяет единицы
измерения в других параметрах. По умолчанию, UNITS = PIXELS.
BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии
задается командой BORDER = N.
CELLPADDING - Определяет минимальный промежуток вокруг содержимого таблицы.
BGCOLOR - Определяет цвет фонового изображения в таблице. Во всех таблицах
данного документа я использую BGCOLOR= WHITE
Есть еще несколько команд, задающих цвет обрамления: BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLORLIGHT, но они используются только в Explorer.
Для формирования таблицы, состоящей из нескольких строк, воспользуйтесь командой
<TR> , разделяющей строки. Команды <TH> и </TH> используются для обозначения
заголовка столбца клеток.
Параметры ROWSPAN и COLSPAN команд <TD> и <TH> используются для формирования
клеток данных, объединяющих более одной строки или столбца.
3.9. Встраивание гипертекстовых ссылок
Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла следует ввести необходимый
текст в двух местах:
Записать метку в том месте HTML - файла, куда необходимо перейти.
Записать переход на эту метку в том месте, откуда будет выполнен переход.
Для организации метки запишите: <A NAME = “МЕТКА” ></A>, где МЕТКА - любое имя,
состоящее из букв английского алфавита и цифр.
Для перехода на эту метку запишите:<A href=МЕТКА >Перейти на метку. </A>
Переход в другой документ той же домашней страницы.
Для перехода из любого места HTML - файла h1.html в начало HTML - файла h2.html
следует записать: <A href = “h2.html”>Переход к разделу h2 </A>
Переход в другой документ.
В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ
или файл.
Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора
ресурсов - URL.
Этот локатор определяет правила написания различных видов ссылок.
Ниже приводятся важнейшие префиксы для URL:
Префикс URLФункция
FTP://Ссылка на сервер FTP
HTTP://Ссылка на объект, который будет передаваться с использованием
протокола HTTP
FILE://localhostСсылка на локальный диск
GOPHER://Ссылка на сервер Gopher
MAILTO://Ссылка на электронный почтовый адрес
NEWS://Ссылка на электронную конференцию
NNTP://Ссылка на сервер электронной конференции
TELNET://Ссылка на сервер электронной конференции
Для записи гипертекстовой ссылки в HTML - файл используйте следующую команду: <A
href = “URL”> Переход по гипертекстовой ссылке. </A>
При нажатии левой кнопки мыши на текст Переход по гипертекстовой ссылке. Вы
перейдёте на ресурс, заданный в URL. Для возврата воспользуйтесь клавишей “Back”
“браузера”.
Вывод изображения на экран.
Изображения могут быть выведены на экран так же, как текст. Файлы изображения
могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF
(файлы *.gif) и JPEG (файлы *.jpg).
Ниже приводится формат команды:
<IMG SRC= “ИМЯ ФАЙЛА” ALT = “Текст” ALIGN = DIRECTION WIDTH = WIDTH HEIGHT =
HEIGHT >, где:
ИМЯ ФАЙЛА - это имя данного файла в вашей домашней странице или полное имя пути
и файла, если файл не принадлежит данной домашней странице.
Текст - это текст, выводимый вместо изображения, если файл изображения по какой
- -либо причине недоступен.
DIRECTION - место расположения изображения. Принимает следующие возможные
значения:
ALIGN=TOP - последующий текст располагается в верхней части изображения.
ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает
изображение справа.
ALIGN=MIDDLE - изображение находится в центре листа.
ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает
изображение слева.
WIDTH = WIDTH - ширина требуемого изображения на экране,
