Автор: Бабаев С

Автор: Бабаев С.

Тема: Основы НТМL

1.1. Создание простого HTML документа

<HTML>

<HEAD>

<TITLE> Web страница </TITLE>

</HEAD>

<BODY>

Это самая простая Web - страница

</BODY>

</HTML>

Теги: <HTML>, <HEAD>, <TITLE>, <BODY>, должны иметь соответствующую команду с символом </…>. Первые три из выше перечисленных тегов обязательно должны присутствовать в документе. В большинстве случаев используется и <BODY>, но исключение могут составить (именно могут, но не всегда составляют) фреймы, о которых мы поговорим позже. Как вы уже, наверное, догадались <TITLE> используется для ввода заголовка страницы. В <BODY> осуществляется ввод непосредственно тела страницы.

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

Атрибуты представлены в таблице 1.

bgcolor = “…”

определяет цвет фона

background = “…”

определяет цвет обоев

text = “…”

определяет цвет текста

alink = ”…”

определяет цвет активной ссылки

link = “…”

определяет цвет не просмотренной ссылки

vlink = “…”

определяет цвет просмотренной ссылки

topmargin = “…”

устанавливает границу верхнего поля

leftmargin = “…”

устанавливает границу левого поля

bgproperties = “fixed”

в случае установки fixed изображение не будет прокручиваться вместе с текстом

onload = “…”

действия которые будет выполнять страница после загрузки

1.3.Создание абзацев

Абзацы создаются следующим способом: между тегами <BODY> вписывается тег , после которого и идёт текст. Например:

<html>
<head>
<title></title>
</head>
<body background="1212.bmp" vlink=#800000 alink=#00FF00>
<a>Список игр:
<A href="GameAuto.htm">Создаём гонку</a>
Инструкция по созданию простенького симулятора автогонок.Желателен некотороый
опыт программирования в среде Visual Basic, VBA или QBasic

<A href="vb.rar">Стерелялка</a>
(размер 500kb. Для полноценной работы желательно наличие Visual Basic 6.0).
В игре вы управляете одним из трёх предлогаемых караблей, и стреляете в
противников.

<A href="shotit.rar">Стрелялка2</a>
(размер 347kb. Для полноценной работы желательно наличие Visual Basic 6.0)
Игра с видом от первого лица. На небольшой территории время от времени
появляются люди которых и надо уничтожить за определённое количество времени.

<A href="GameZmeika.htm">Тетрис.</a>
Инструкция по созданию тетриса, впервые созданного нашими программистами в
90-х годах.

<A href="GameSnake.htm">Змейка</a>
Подробное описание по созданию одноимённой игры змейка на Visual Basic.

<HR>
В будующем намечается расширение списка
 <a href = "Left.html">Вернуться на главную страницу.
</body>
</html>

Здесь мы видим несколько атрибутов тега . Конечно это не все атрибуты, но основные мы сейчас рассмотрим: .Он принимает значения приведённые в таблице 2.

left

выравнивание по левому краю

center

выравнивание по центру

right

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

1.4.Создание заголовка.

Заголовки устанавливаются при помощи ввода текста между тегами <H1></H1> и т.д. Заголовок в теге <H1> наиболее крупный далее идёт <H2> поменьше, <H3> ещё меньше и т.д.

1.5.Стили форматирования.

Форматирование может непосредственным или авторским. <PRE> позволяет отформатировать текст вручную и является авторским. Текст ведённый между его парными тегами останется в таком виде в каком его предоставил автор. Например:

<Pre>Алгоритм
1....
2....
</Pre>
</body>
</html>
Также можно использовать следующие парные теги:

<HR>

проводит линию

делает текст полужирным

выделяет текст курсивом

<TT>

моноширный шрифт

уменьшенный и сдвинутый вверх текст

уменьшенный и сдвинутый вниз текст

перечёркивает предложение

<BIG>

выводит текст большего шрифта

выводит текст меньшего шрифта

1.6.Атрибуты шрифтов

Начнём с примера:

Текст

</body>
</html>
Также можно просто увеличить или уменшить уже существующий шрифт, например:

Текст

</body>
</html>
Для уменьшения шрифта в теге соответственно используется –1, -2, -3 и т.д.

1.7.Гиперссылки

Синтаксис следующий <A href = “…”>текст являющийся ссылкой</A>. В кавычках может быть указано имя другой страницы или файла (для закачки соответственно). Для вставки изображений используется ссылка немного другого вида <IMG SRC = “…”>. Её атрибуты приведены в таблице 3:

width

ширина изображения

height

высота изображения

alt

текст выводимый при проведении мышкой над изображением.

1.8.Фреймы

Объяснение начну с примера:

Cols разделяет окно на два одинаковых окна по вертикали, а Rows по горизонтали. <Frame SRC = ”Название сайта на который ссылается в данном случае левый фрейм”>, name – его имя. Для форматирования фреймов необходимо создать два окна с соответствующими именами и редактировать их.