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

E-mail Печать PDF
Рейтинг пользователей: / 17
ХудшийЛучший 
Индекс материала
Интернет
История
История развития Интернет в России
TCP/IP
Ресурсы Интернета
Почтовые адреса людей
Браузеры
Запуск браузера
Работа в браузере
Электронная почта
Бесплатный почтовый ящик
Телеконференции
Службы рассылок
Поисковые системы
Работа с поисковыми серверами
Информационно-поисковая система Rambler
Поисковая система Yandex
Англоязычные поисковые системы
Виртуальные библиотеки
Информационные сайты
FTP
Программы для работы с FTP
Средства поиска файлов по FTP-серверам
Наиболее популярные FTP-серверы
Чат
Этикет в IRC
Программное обеспечение для «разговора»
mIRC
Разговор в Web
ICQ
Базовые возможности ICQ:
Система защиты ICQ
Электронная коммерция
Преимущества электронной торговли:
Недостатки электронной торговли:
Виртуальные магазины
Интернет-трейдинг
Internet-консалтинг
Аукционы
IP-телефония
Создание web-страниц
Размещение страницы
Все страницы

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

Все web-страницы построены с использованием языка гипертекстовой разметки HTML (Hyper Text Markup Language). Все остальное наполнение: картинки, клипы, звук, анимация, добавляется поверх и не является обязательным для отображения браузером.

HTML

HTML-документы можно создавать в любом текстовом редакторе. В Блокноте, с помощью Word, в редакторе файлового менеджера FAR. Файл HTML-документа должен иметь расширение htm или html.

Каждый HTML-документ обязан начинаться со строки декларации версии HTML, которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">. Эта строка поможет браузеру определить, как правильно интерпретировать данный документ.

В зыке HTML операторы, которые дают инструкции браузеру, что и как отображать, называются тегами. Для выделения тегов используют угловые скобки. Тэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака «/»). Большинство тегов парные, но существуют теги, которые не требуют закрывающей «половинки».

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Любой HTML-документ открывается тэгом <HTML> и им же закрывается.

Между тэгами <HTML> и </HTML> следует разместить заголовок <HEAD> и тело документа <BODY>.

В общем виде базовый HTML-файл выглядит следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">

<HTML>

<HEAD>

<TITLE>название документа</TITLE>

</HEAD>

<BODY>Текст документа

</BODY>

</HTML>

Для выделения заголовка в теле документа используют парные теги <H1>, <H2>...<H6>, где <H1> ? самый крупный заголовок, а <H6> ? самый мелкий.

<H1>Это самый крупный заголовок</H1>

<H6> Это самый мелкий заголовок </H6>

Некоторые теги не требуют закрывающей «половинки», например тег <HR> дает браузеру инструкцию нарисовать горизонтальную линию.

Большинство тегов могут иметь специальные дополнительные инструкции - атрибуты, которые уточняют действие тега. Например:

<H2 ALIGN=CENTER> Заголовок выровнен по центру </H2>.

Если допустить ошибку в написании тега, браузер будет рассматривать его как обычный текст.

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

<!--Это комментарий-->

Для изменения параметров шрифта текста используется тег <FONT>. Например:

<FONT SIZE="3" COLOR="BLUE"> Синий текст 3 размера</FONT>

или

<FONT SIZE="+2" COLOR="#AA0000">Увеличенный красный шрифт</FONT>

где SIZE - определяет размер шрифта. Возможные значения: числа от 1 до 7, или относительный размер с указанием знаков «+» или «-».

COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.


Black Черный

Gray Серый

Silver Светло-серый

White Белый

Red Красный

Fuchsia Фуксия

Maroon Вишневый

Purple Пурпурный

Navy Темно-синий

Blue Синий

Aqua Светло-бирюзовый

Green Зеленый

Lime Салатовый

Teal Морская волна

Yellow Желтый

Olive Оливковый


Для выделения абзацев используется тег перевода строки <BR> и парный тег <P>. Например:

<P>

Первая строка <BR> Вторая строка

</P>

При использовании тега <P> появляется возможность изменения выравнивания параграфа. Свойство ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: left, center, right. По умолчанию имеет значение left.

Для форматирования данных используется тег <TABLE>. По умолчанию таблица печатается без рамки. Ячейки внутри таблицы создаются с помощью элементов TR, TD и TH.

Параметры:

ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.

VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.

BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.

WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию определяется в зависимости от объема содержащегося в таблице материала.

HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию определяется в зависимости от объема содержащегося в таблице материала.

BGCOLOR - определяет цвет фона ячеек таблицы.

Элемент TR создает новый ряд (строку) ячеек таблицы. Допустимые параметры ALIGN, VALIGN, BGCOLOR.

Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Допустимые параметры ALIGN, VALIGN, WIDTH, HEIGHT, BGCOLOR. Также существуют параметры:

COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Пример таблицы:

<TABLE>

<TR>

<TD> Левая ячейка первой строки

</TD>

<TD> Правая ячейка первой строки

</TD>

</TR>

<TR>

<TD> Левая ячейка второй строки

</TD>

<TD> Правая ячейка второй строки

</TD>

</TR>

</TABLE>

Что получается в результате

 

Левая ячейка первой строки

Правая ячейка первой строки

Левая ячейка второй строки

Правая ячейка второй строки

 

Примеры таблиц


Пример 1:

<TABLE BORDER>

<TR>

<TH ROWSPAN=2> Группа Л-200</TH>

<TD> Иванов </TD><TD ALIGN="right"> Иван </TD>

</TR>

<TR>

<TD> Петров </TD><TD ALIGN="right"> Петр</TD>

</TR>

</TABLE>

Результат:

Группа Л-200

Иванов

Иван

Петров

Петр

 

 

 

 

Пример 2:

<TABLE BORDER>

<TR>

<TH COLSPAN=2> Группа Л-200</TH>

</TR>

<TR>

<TD> Иванов </TD><TD ALIGN="right"> Иван </TD>

</TR>

<TR>

<TD> Петров </TD><TD ALIGN="right"> Петр </TD>

</TR>

</TABLE>

Результат:

Группа Л-200

Иванов

Иван

Петров

Петр



Все виды гиперссылок создаются с помощью парного тега <A>. Например:

<A href= «страница2.htm»>Идем на вторую страницу</A>

Параметр HREF определяет адрес гиперссылки. Адрес гиперссылки в окне браузера не отображается, текст, заключенный между тегами, подчеркивается и выделяется цветом. Вместо текста можно вставить тег рисунка.

<A href= «страница2.htm»><IMG src= «picture.gif»></A>

Вместо имени файла можно указать URL-адрес в Интернете:

<A href= «http://www.anekdots.ru»>Анекдоты</A>

Также можно создавать гиперссылки на почтовый адрес, чтобы сразу вызывалась почтовая программа с бланком нового письма с заполненной адресной строкой.

<A href= «mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript »>Пишите письма</A>

Для добавления рисунков, используется одинарный тег <IMG>. Его параметры:

SRC - обязательный параметр. Указывает имя или адрес (URL) файла с изображением.

HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно.

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Необходимо при обтекании изображения текстом.

ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

right - выравнивает изображение по правому краю. Прилегающий текст обтекает изображение слева.

top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

Middle, absmiddle, bottom, absbottom.

ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER - определяет ширину рамки вокруг изображения в пикселах.

 

Пример 1: <IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.

 

Пример 2: Использование изображения в качестве гиперссылки:

<A href="/carlson.html">

<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">

</A>

Для просмотра досье нажмите на кнопку справа.

 

Чтобы сделать красиво и не слишком сложно, профессиональные дизайнеры используют для форматирования элементов таблицы с невидимыми границами. Как бы набрасывая сеть на все объекты, заставляя их держаться вместе.

Нововведением в HTML стала технология динамического HTML (DHTML), под которой понимается возможность автоматического изменения содержания web-страницы и ее внешнего вида в зависимости от действий пользователя и внешних событий.

Например, можно сделать так, что при наведении курсора мыши на таблицу, цвет таблицы будет меняться.

<table id=table1

onMouseOver="table1.bgColor='red'"

onMouseOut="table1.bgColor='white'"

bgcolor=white border=1>

<tr> <td>

Цвет таблицы изменится, когда на нее будет наведен курсор мыши.

</td> </tr>

</table>

По мере развития Интернет было придумано много различных способов придания web-страницам большей выразительности. Например, компания Macromedia (macromedia.com)предлагает технологию Flash, которая позволяет использовать web-анимацию и интерактивную векторную графику. С помощью этой технологии было создано несколько серий популярного мультфильма про Масяню.

Язык VRML (Virtual Reality Modeling Language) позволяет реализовать трехмерный виртуальный мир. Технология Realplayer позволяет отображать видеоролики (изображение и звук одновременно).

Кроме того, существуют специальные программы для создания web-страниц. Это такие программы, как например, Netscape Composer и FrontPage, и т.д. Подобные программы можно найти на серверах Tucows (tucows.com), Download (download.ru) и ListSoft (listsoft.ru).

Кроме того, можно создавать web-страницы при помощи редактора Word. Для этого необходимо создать обычные текстовый документ, добавить заголовки и рисунки и сохранить файл в формате HTML (Файл/Cохранить в формате HTML). Word автоматически проанализирует текст документа и добавит нужные теги.

Наиболее простым вариантом создания сайта является создание сайта при помощи шаблонов, предлагаемых пользователям на сервере Narod.ru.



 
Комментарии (1)
1 01.03.2009 10:50
Администратор
Интернет

Добавьтe Ваш комментарий

Ваше имя (псевдоним):
Ваш адрес почты:
Заголовок:
Комментарий:

Комментарии, категория: "IT"

Интересное




Похожие материалы

Партнёры