Создание Web-страниц

Язык HTML позволяет создавать простые Web-страницы. По своей сути HTML документ представляет собой обычный текстовой документ, самым простым редактором для его создания является блокнот (при сохранении в блокноте HTML – кода, необходимо указывать расширение файла html, или htm ), встроенный в операционную систему Windows.

Пример простой HTML – страницы:

<HTML>

<HEAD>

<TITLE> здесь пишется название страницы</TITLE>

</HEAD>

<BODY>

А здесь пишется текст

</BODY>

</HTML>

</…> - это закрывающий тег, завершающий команду

Тег <P> отделяет абзацы друг от друга, а <br> служит для перехода на новую строку.

Атрибуты тега <BODY>

bgcolor=”…” – задаёт цвет фона документа
background=”…” – указывает адрес фонового рисунка (при написании адреса необходимо указывать расширение файла gif, jpg и др.)
text=”…” – указывает цвет текста
alink=”…” – указывает цвет активной ссылки
link=”…” – указывает цвет не просмотренной ссылки
vlink=”…” – указывает цвет просмотренной ссылки
topmargin=”…” – определяет границу верхнего поля
leftmargin=”…” – определяет границу левого поля
bgproperties=”fixed” – фоновое изображение не прокручивается в месте с текстом.

Пример:

<HTML>

</HTML>

или

<HTML>

</HTML>

При введении такого HTML-кода у вас появится страница с зелёным фоном

Таблица базовых цветов bgcolor

Aliceblue F0F8FF	Antiquewhite FAEBD7	Aqua 00FFFF	Aquamarine 7FFFD4
Azure F0FFFF	Beige F5F5DC	Bisque FFE4C4	Black 000000
Blanchedalmond FFEBCD	Blue 0000FF	Blueviolet 8A2BE2	Brown A52A2A
Burlywood DEB887	Cadetblue 5F9EA0	Chartreuse 7FFF00	Chocolate D2691E
Coral FF7F50	Cornflowerblue 6495ED	Cornsilk FFF8DC	Crimson DC143C
Cyan 00FFFF	Darkblue 00008B	Darkcyan 008B8B	Darkgoldenrod B8860B
Darkgray A9A9A9	Darkgreen 006400	Darkkhaki BDB76B	Darkmagenta 8B008B
Darkolivegreen 556B2F	Darkorange FF8C00	Darkorchid 9932CC	Darkred 8B0000
Darksalmon E9967A	Darkseagreen 8FBC8F	Darkslateblue 483D8B	Darkslategray 2F4F4F
Darkturquoise 00CED1	Darkviolet 9400D3	deeppink FF1493	Deepskyblue 00BFFF
Dimgray 696969	Dodgerblue 1E90FF	Firebrick B22222	Floralwhite FFFAF0
Forestgreen 228B22	Fuchsia FF00FF	Gainsboro DCDCDC	Ghostwhite F8F8FF
Gold FFD700	Goldenrod DAA520	Gray 808080	Green 008000
Greenyellow ADFF2F	Honeydew F0FFF0	Hotpink FF69B4	Indianred CD5C5C
Indigo 4B0082	Ivory FFFFF0	Khaki F0E68C	Lavendar E6E6FA
Lavenderblush FFF0F5	Lawngreen 7CFC00	Lemonchiffon FFFACD	Lightblue ADD8E6

Размер текста можно задавать тегами <H1> (Самый большой шрифт) - <H6> (самый мелкий шрифт), необходим закрывающий тег.

Атрибут align позволяет выравнивать текст, рисунок (этот атрибут является атрибутом тега <P>):

align=”left” – выравнивает объект по левому краю
align=”right” – выравнивает объект по правому краю
align=”center” – выравнивает объект по центру

Пример:

<P align=”left”>текст</P>

Стили форматирования текста:

Тег (<Тег>Текст<Тег>)	Результат использования данного тега
<B>…</B>	Текст
<I>…</I>	Текст
<U>…</U>	Текст
Текст<SUP>…</SUP> или Текст<SUB>…</SUB>	Текст ^Текст Текст_Текст
<BIG>…</BIG>	Текст
<SMALL>…</SMALL>	Текст
<STRIKE>…<STRIKE>	~~Текст~~

При использовании тега <PRE>…</PRE> текст заключённый в них будет отображаться как он был записан в исходном коде Web-страницы.

Тег <BASEFONT>:

face=”…” – задаёт имя шрифта (шрифт берётся из набора установленных на компьютере шрифтов)
size=”…” – задаёт размер шрифта от 1 до 7
color=”…” – задаёт цвет текста

Гиперссылки

Для определения ссылки используется тег <А> с атрибутом href=”…”

Пример:

<A href=”Адрес или имя документа на который ссылается данная ссылка”>текст который будет отражаться на экране</A>

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

Пример:

<HTML>

<BODY>
<A href=”#имя”>Текст ссылки</A>

<A name=”имя”>Объект на который ссылается ссылка расположенная выше<A>

</HTML>

</BODY>

Вставка графических изображений

Для вставки графических изображений используется тег <IMG> со следующими атрибутами:

src=”…” – указывает адрес данного файла (допускается использование файлов в формате GIF, JPG, BMP)
height=”…” – указывает высоту изображения
width=”…” – указывает ширину изображения
alt=”…” – текстовое описание изображения
– вокруг изображения появляется рамка (толщина рамки указыватся числом: 1,2,3,…)

Пример:

<HTML>

</HTML>

</BODY>

Рисунок может служить ссылкой

<HTML>

</HTML>

</BODY>

Бегущая строка

Она задаётся контейнером <MARQUEE>…</MARQUEE>, с атрибутами:

height=”…” – указывает высоту бегущей строки
width=”…” – указывает ширину бегущей строки
bgcolor=”…” – указывает цвет фона бегущеё строки
behavior=”…” этот атрибут имеет следующие значения:

1. scroll – циклическая прокрутка бегущей строки

2. slide – текст появляется у одного края и исчезает у другого

3. alternate – движется подобно маятнику

direction=”…” – задаёт направление движения текста (right (вправо), left(влево), up(вверх), down(вниз))
scrolldelay=”…” – указывает задержку в миллисекундах перед появлением следующего текстового блока
loop=”…” – задаёт число повторов бегущей строки, при указании значения -1 текст будет постоянно повторяться

Создание списков

Для их создания используются следующие теги:

<UL>
<OL>
<DL>

а элементы списка отмечаются тегом <LI>, <DT>, <DD>. Для нумерованного списка используют атрибут type=”…”, этот атрибут имеет следующие значения: disc, circle, square. Нумерованный список создают используя теги <OL>, <LI>.

Пример:

<OL>

<LI>а

<LI>б

Обработанный код выглядеть будет так:

атрибут type=”…” определяет тип нумерации

order-type=”A” – большие латинские буквы

order-type=”a” – маленькие латинские буквы

order-type=”I” – римские цифры

order-type=”l” – арабские цифры

Оформление текста

background-image – указывает рисунок, который необходимо использовать в качестве фона текста

p {background-color: 0000FF;}

</STYLE>

<BODY>

<P>

Текст

</P>

</BODY>

background-color – устанавливает фон текста

Пример:

<STYLE>

p {background-image: url(имя файла или адрес данного изображения)}

</STYLE>

<P>

Текст

</P>

Создание полей

Для создания полей используются следующие параметры тегов:

margin-left
margin-right

Пример:

<HEAD>

body {margin-left: 5%; margin-right: 5%; }

</STYLE>

</HEAD>

<BODY>

Текст

</BODY>

Встроенный фрейм

Такой фрейм задаётся тегом <IFRAME>

scr=”…” – указывает путь Web-страницы, которая будет загружена в данный фрейм

height=”…” – указывает высоту фрейма

width=”…” – указывает ширину фрейма
frameborder=”…” – разрешает или запрещает отображения рамки (0 – нет, 1 – да)
scrolling=”…” – задаёт отображение линий прокрутки для фрейма (YES – отображает линии прокрутки NO – не отображает линии прокрутки)

Используемая литература:

С. В. Глушаков, И. А. Жакин, Т. С. Хачиров; Программирование Web-страниц (учебный курс); Москва 2003
Другие источники