Основы гипертекстового конструирования. Создание сайтов.

Годом рождения World Wide Web считается 1989 - в этом году был изобретен язык, ставший впоследствии основным языком web-документов - это язык – HTML. Автором языка HTML является Тим Бернерс-Ли HTML (Hyper Text Markup Language) - это специальный язык форматирования электронных документов (веб-страниц в формате *.html или *.htm). Создание документов на языке HTML чем-то напоминает программирование. Вот только, в нашем случае на выходе получится не отлаженная программа, а веб-страница, основу по-другому называющийся набором тегом. При просмотре страницы, теги выполняют ту же роль, что и стандартные команды в программировании. составляет HTML-код, которой

HTML-документ задает информацию и правила показа этой информации на экране монитора. это программа, которая – каждой платформы Для специальная программа-интерпритатор («браузер»), которая должна выполнять HTML-программу по стандартным единым правилам. создается Браузер – это специальное приложение-интерпритатор, которое HTML-программу, отображать экране компьютера гипертекстовый документ позволяет, выполняя на

Самыми популярными браузера являются: •Microsoft Internet Explorer •Opera •Mozilla Firefox •Konqueror •Netscape Browser •Maxthon

Существуют 2 способа  создания сайтов Текстовый (ручной) Графический (визуальный, с использованием конструктора )

По уровню персонификации сайты  классифицируются: Сайты Корпоративные  Персональные

Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag -  специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб- браузером не отображается.

'<' и заканчиваются Все теги начинаются символом символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

Информация

стартовым тегом является а Здесь завершающим -

. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш). Браузер, читающий HTML- документ, отображает его в окне, используя структуру HTML-тегов. должны присутствовать три главных части: каждом HTML-документе тег

, В

Рассмотрим общую структуру типичного простейшего документа HTML: Тело документа - текст, фотографии и всё остальное, что будут видеть посетители Вашего сайта.

- идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML.

Начертание текста Для задания начертания текста используются следующие элементы: B - полужирное начертание I - курсивное начертание U - подчёркнутый текст S - перечеркнутый текст BIG - увеличенный размер шрифта SMALL - уменьшенный размер шрифта SUP - верхний индекс SUB - нижний индекс TT - моноширный шрифт BLINK - мерцающий текст

текст с полужирным начертанием
текст с курсивным начертанием
подчёркнутый текст
перечеркнутый текст
увеличенный размер шрифта
уменьшенный размер шрифта
^{верхний индекс}текст _{нижний индекс}
моноширный шрифт
подчёркнутый текст с полужирным курсивным начертанием

Форматирование текста. По умолчанию браузер отображает текст в одну строку по ширине окна с выравниванием по левому краю. Для перехода на следующую строку можно использовать одиночный тег BR. Тег можно вставлять в любом месте текста. При использовании тега BR браузер отображает текст как один абзац, для разделения текста на абзацы используется элемент P, который задаётся парными тегами

....

. Закрывающий тег

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

....

. При использовании этого элемента тест сохраняет исходное форматирование и отображается моноширным шрифтом.

Текст разрывается
в указанных местах
при помощи элемента BR

Элемент PRE:
Текст отображается
с сохранением исходного 
форматирования
моноширным шрифтом.

Для обозначения заголовков текста в языке HTML существуют специальные элементы - H1, H2, H3, H4, H5 и H6 (номера определяют важность заголовка от 1 до 6) Для заголовков можно задать следующие свойства: align - выравнивание заголовка title - текст подсказки (всплывает при наведение указателя) Элемент FONT Заголовки Для задания отображения части текста отличного от изображения используемого по умолчанию используется элемент FONT, который может иметь следующие атрибуты: face - название шрифта size - размер шрифта от 1 до 7 (по умолчанию используется 3) color - цвет текста

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

Использование элемента FONT для отображения текста

Для обеспечения соответствия между внешним видом документа в браузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега : BGCOLOR - цвет фона документа; BACKGROUND - URL графического изображения, для создания фона; BGPROPERTIES - режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES=FIXED - стационарный фон); TEXT - цвет текста документа; LINK - цвет выделения элементов-якорей ссылок; ALINK - цвет выделения активных элементов-якорей ссылок; VLINK - цвет выделения элементов-якорей просмотренных ссылок;

Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям: BLACK=#000000 GREEN=#008000 GRAY=#808080 RED=#FF0000 YELLOW=#FFFF00 BLUE=#0000FF WHITE=#FFFFFF SILVER=#C0C0C0 MAROON=#800000 OLIVE=#808000 NAVY=#000080 PURPLE=#800080 TEAL=#008080 LIME=#00FF00 FUSHSIA=#FF00FF AQUA=#00FFFF

- вставка графического изображения в виде файла lycos.gif. Вставляем изображения Для добавления на веб-страницу изображений используется одиночный тег IMG, который может иметь следующие атрибуты: scr - задаёт URL изображения alt - текст, который отображается на месте изображения, если браузер не может отобразить само изображение border - толщина границы вокруг изображения в пикселях align - задаёт выравнивание изображения height - задаёт высоту изображения в пикселях width - задаёт ширину изображения vspace - задаёт величину свободного пространства сверху и снизу от изображения hspace - задаёт величину свободного пространства слева и справа от изображения

Здесь специально указан не существующий URL изображения и поэтому оно не может быть отображено

Гиперссылки Для навигации и связывания документов между собой в языке гипертекстовой разметки HTML предусмотрена возможность создания гиперссылок. Для этого используется элемент A, который задаётся парными тегами ..... Обычно браузеры выделяют гиперссылки, чтобы их сразу можно было отличить от остального содержимого страницы - подчёркивание и синий цвет. Для создания ссылки нужно задать атрибуту href элемента A URL нужного ресурса. Например: Первая страница сайта Вторая страница сайта В данном случай показан пример задания гиперссылки на документ, который находится в той же папке, что и ссылающаяся страница, для задания ссылки на документ находящийся на другом сайте необходимо указывать его полный URL: Яндекс

Первая страница сайта
Вторая страница сайта
Яндек с

- гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif. [email protected] - гиперссылка на адрес электронной почты.

Маркированные списки Для перечисления информации удобно применять маркированные или нумерованные списки. В таких списках каждый новый элемент выделяется маркером или ему присваивается порядковый номер. Маркированные списки задаются парными тегами

.....

Элементы списка начинаются с тега

, закрывающий тег

не обязателен. Например:

• первый элемент списка
• второй элемент списка

При помощи атрибута type можно задать следующие типы маркера: circle - круг без заливки dist - круг с заливкой (используется по умолчанию) sguare - квадрат

Нумерованные списки Нумерованный список обозначается парными тегами

...

Например:

1. первый элемент списка
2. второй элемент списка

Атрибутом type можно задать тип нумерации: 1 - используются арабские цифры A и a - большие или малые буквы латинского алфавита I и i - большие или малые римские цифры Атрибутом start можно задать номер первого элемента в списке.

Горизонтальные линии Для вставки горизонтальной линии применяется одиночный тег HR, который может иметь следующие атрибуты: align - выравнивает линейку в окне браузера, может принимать следующие значения: left - выравнивание по левому краю right - выравнивание по правому краю center - выравнивание по центру noshade - булев атрибут (значение не присваивается), отображает линейку плоской size - толщина линейки, численное значение width - ширина линейки, может задаваться в пикселах или в процентах от ширины окна браузера По умолчанию линейка выравнивается по центру и имеет ширину 100% от окна браузера.

Создание бегущей текстовой строки (только для Internet Explorer): Интернет - это окно в мир! Атрибут behavior : right - текстовая строка бежит вправо left - текстовая строка бежит влево alternate – текстовая строка бежит влево и вправо.

Таблицы Важным элементом для упорядочивания данных являются таблицы, если Вы посмотрите на сайты в Интернет, то увидите, что многие из них построены именно на таблицах. Примечание: Посмотреть исходный код любой веб-страницы можно щелкнув правой кнопкой на любом свободном от ссылок и картинок месте и выбрав в всплывающем меню пункт "Просмотр HTML-кода" в Internet Explorer или "Исходный код" в Opere. Таблицы задаются парными тегами ... и состоит из строк, задаваемых элементом TR - парные теги ... (закрывающий тег не обязателен) и ячеек - элемент TD, с парными тегами ... (закрывающий тег так же не обязателен). Для таблицы имеется возможность создавать заголовок, задаваемый парными тегами ..., который должен располагаться непосредственно за открывающим тегом

Пример таблицы с заголовком

1	11	111
2	22	222

Атрибуты таблиц Многие параметры отображения таблицы задаются соответствующими атрибутами элемента TABLE, рассмотрим некоторые из них: align - задаёт положение таблицы в окне браузера bgcolor - цвет фона таблицы border - толщина внешней границы bordercolor - цвет границ таблицы cellpadding - размер пустого пространства между границами и содержимым ячейки width - ширина таблицы height - высота таблицы frame - задаёт отображаемые части внешней таблицы Атрибуты для строк таблицы TR: align - задаёт горизонтальное выравнивание текста valign - задаёт вертикальное выравнивание текста bgcolor - цвет фона строки bordercolor - цвет рамки строки Атрибуты для ячеек таблицы: Атрибуты для строк таблицы TR: align - задаёт горизонтальное выравнивание текста valign - задаёи вертикальное выравнивание текста bgcolor - цвет фона ячейки bordercolor - цвет рамки ячейки