Главная

Категории:

ДомЗдоровьеЗоологияИнформатикаИскусствоИскусствоКомпьютерыКулинарияМаркетингМатематикаМедицинаМенеджментОбразованиеПедагогикаПитомцыПрограммированиеПроизводствоПромышленностьПсихологияРазноеРелигияСоциологияСпортСтатистикаТранспортФизикаФилософияФинансыХимияХоббиЭкологияЭкономикаЭлектроника






Структура ссылок в HTML-документе


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

________________________________________

Введение

Основные понятия

Английская аббревиатура WWW означает World Wide Web, что на русский язык переводится как Всемирная паутина.

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

Гипертекстовые ссылки – выделенные области документа, позволяющие переходить к другому документу, содержащему связанную информацию.

С помощью гипертекстовых ссылок пользователь может обращаться к информации в других документах, связанных с данной темой. Выбирая подсвеченные слова, выделенные изображения и графику в тексте документа и щелкая по ним мышью, Вы можете перемещаться в любом направлении и «перескакивать» на другие интересующие Вас документы, независимо от того, где эти документы находятся.

Web-сервер – очень большой и мощный компьютер, который хранит и пересылает документы и другие информационные ресурсы Интернет.

Home page – (Домашняя страница) начальная или первая страница какого-либо Веб-сервера или логически связанной группы HTML документов.

Web-сайт – группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение.

URL (universal resource locator) – универсальный указатель ресурсов, указывает местонахождение документов в Интернет, является адресом Web-узла.

Адрес выглядит следующим образом:

 

Web-browser – программное обеспечение навигации и просмотра, выдающее запросы и визуализирующее HTML-документы и другие информационные ресурсы Интернет.

Что такое HTML?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB.

Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или «тэги» (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет. Просмотреть файл, написанный на языке HTML, можно в броузере (например Internet Explorer). Броузер, выполняя программу (интерпретируя HTML-текст), формирует на экране документ, который видит пользователь.

 

Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Как создаются HTML документы?

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

Вы можете пользоваться различными Web-редакторами, например FrontPage, там многие команды вставляются автоматически. Но чтобы понять строение HTML-документов и лучше запомнить тэги, нужно познакомиться с азами языка HTML. Для этого можно использовать текстовый редактор NotePad.


Основные теги

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

<title> Заголовок документа </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа.

Структура документа

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>
...

</HEAD>

 

 

Заголовок документа <TITLE>

Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

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

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.


Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>. Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна

Создание первой страницы

Мы изучили основные теги, теперь попробуем создать простой HTML-документ. Вы можете пользоваться различными Web-редакторами, например FrontPage, там многие команды вставляются автоматически. Но чтобы понять строение HTML-документов и лучше запомнить тэги, нужно познакомиться с азами языка HTML. Для этого можно использовать текстовый редактор NotePad.

Вот пример простейшей странички:

<HTML>

<HEAD>

<META http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

<TITLE>Пример простейшей странички</TITLE>

</HEAD>

<BODY>

<CENTER>

<H1>Наша первая страничка</H1>

</CENTER>

Просто какой-то текст.

</BODY>

</HTML>

В заголовочной части документа в тэге <META> содержится информация о кодировке, в которой написан текст HTML-документа. В данном случае задана стандартная кодировка Windows.

Сохраним этот файл как my_page.html. Затем откроем Internet Explorer и загрузим созданный нами файл (в меню File выбрать команду Open). Второй вариант – найти наш файл в проводнике Windows и дважды щелкнуть на нем мышкой.

 

Получилось? Теперь попробуем изменить нашу страницу, используя теги заголовков разных уровней и тег абзаца. Давайте добавим после заголовка «Наша первая страничка» заголовок второго уровня, который будет содержать сегодняшнюю дату, а после него будет располагаться заголовок третьего уровня с фамилией и именем.


Дополнительные теги

Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:

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

Комментарии могут встречаться в документе где угодно и в любом количестве.

Разрыв строки <BR>

Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:

Алексей Ярцев <BR>
Дмитровское шоссе, <BR>
д.9Б, офис 326 <BR>

Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес:

<P>
<BLOCKQUOTE>
Сегодня один из величайших дней для нашей компании. <BR>
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.
</BLOCKQUOTE>

Тэги списков

Существует два основных вида списков в HTML-документе:

· пронуменрованный

· непронумерованный

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

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

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

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</OL>

Тэг <OL> может иметь параметры:

<OLTYPE=A|a|I|i|1 START=n>

где:

TYPE– вид счетчика:

· A - большие латинские буквы (A,B,C...)

· a - маленькие латинские буквы (a,b,c...)

· I - большие римские цифры (I,II,III...)

· i - маленькие римские цифры (i,ii,iii...)

· 1 - обычные цифры (1,2,3...)

START=n -число, с которого начинается отсчет.

Попробуйте самостоятельно изменить параметры списка в вышеуказанном примере так, чтобы список был пронумеровани римскими цифрами, и начинался не с 1, а с 15.

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

Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера. Непронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL>
<LI> Программирование
<LI> Алгоритмизация
<LI> Проектирование
</UL>

Тэг <UL> может иметь параметр:

<ULTYPE=disc|circle|square>

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Вложенные списки

Дадим пример вложенных списков:

<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>
<BODY>
<H2> Список сотрудников нашей фирмы </H2>
<H3> Составлено : 23 ноября 2004 года </H3>
Данный список содержит фамилии, имена и отчества всех сотрудников нашей

компании. <P>
Список может быть использован только в служебных целях. <P>
<OL>
<LI> Дирекция
<UL>
<LI> Иванов И.И.
<LI> Петров К.В.
</UL>
<LI> Отдел маркетинга
<UL>
<LI> Сидоров С.С.
<LI> Пупкин В.С.
</UL>
</OL>
</BODY>
</HTML>

Ну, как, получается? Тогда идем дальше.


Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его броузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

Внимание!Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако, HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.

Графика внутри HTML-документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

ALT="text"

Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

Данный необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2

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

ALIGN

Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.

Фоновые рисунки

Большинство броузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">

Задание стандартных цветов

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR

Цвет фона документа

TEXT

Цвет простого текста документа

LINK

Цвет ссылки

Цвет задается шестизначным числом в шестнадцатиричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия

Используя тэг <HR> вы можете разделить текст горизонтальной чертой.

Формат тэга:

<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>

Параметры тэга:

SIZE

Толщина линии в пикселах.

WIDTH

Ширина линии в пикселах или процентах от ширина окна броузера.

ALIGN

Расположение на экране (слева | по центру | справа).

NOSHADE

По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

HTML Таблицы

Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.

Основные тэги таблицы

Таблица: <TABLE>...</TABLE>

Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.

Строка таблицы: <TR>...</TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: <TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы:<TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблицы

BORDER

Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.
Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

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

ROWSPAN

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

COLSPEC

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

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

<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR>
</TABLE>

 

Список базовых тэгов HTML

Стартовый Завершающий Описание
<HTML> </HTML> Обозначение HTML-документа
<HEAD> </HEAD> Заголовочная часть документа
<TITLE> </TITLE> Заголовок документа
<BODY> </BODY> Тело документа
Параметры тега <BODY>
BGCOLOR= Фоновый рисунок
BACKGROUND= Цвет фона
<H1> </H1> Заголовок абзаца первого уровня
<H2> </H2> Заголовок абзаца второго уровня
<H3> </H3> Заголовок абзаца третьего уровня
<H4> </H4> Заголовок абзаца четвертого уровня
<H5> </H5> Заголовок абзаца пятого уровня
<H6> </H6> Заголовок абзаца шестого уровня
<P> </P> Абзац
Параметры тега <P>
ALIGN=left|center|right Выравнивание текста
<PRE> </PRE> Форматированный текст
<BR> Не требуется Перевод строки без конца абзаца
<BLOCKQUOTE> </BLOCKQUOTE> Цитата
<CENTER> </CENTER> Центрирование элементов документа
<B> </B> Выделение текста жирным
<I> </I> Выделение текста курсивом
<U> </U> Подчеркнутый текст
<OL> </OL> Пронумерованный список
Параметры тега <OL>
TYPE=A|a|I|i|1 Тип нумерации
START= Число, с которого начинается отсчет
<UL> </UL> Маркированный список
Параметры тега <UL>
TYPE=disk|circle|square Тип маркера
<LI> Не требуется Элемент списка (внутри тегов <OL> и <UL>

<A> </A> Гипертекстовая ссылка
Параметры тега <A>
  HREF= Адрес документа
<IMG> Не требуется Вставка картинки
Параметры тега <IMG>
  ALT= Подпись к рисунку
  HEIGHT= Высота рисунка
  WIDTH= Ширина рисунка
  ALIGN=top|middle|bottom Выравнивание рисунка
<HR> Не требуется Горизонтальная линия
Параметры тега <HR>
  SIZE= Толщина
  WIDTH= Ширина (в пикселах или процентах)
  ALIGN= Выравнивание
  NOSHADE Без тени
<BIG> </BIG> Текст большими буквами
<SMALL> </SMALL> Текст маленькими буквами
<SUB> </SUB> Надстрочный индекс
<SUP> </SUP> Подстрочный индекс
<FONT> </FONT> Шрифт
Параметры тега <FONT>
  SIZE= Размер
  COLOR= Цвет
  FACE= Шрифт
<TABLE> </TABLE> Таблица
Параметры тега <TABLE>
  BORDER= Граница
  ALIGN= Выравнивание
  ROWSPAN= Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки
  COLSPAN= Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки
<TR> </TR> Строка таблицы
<TD> </TD> Ячейка таблицы
<TH> </TH> Заголовок таблицы
Параметры тега <TH>
  BOLD Заголовок жирным
  ALIGN= Выравнивание
<CAPTION> </CAPTION> Подпись таблицы

 

 

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

________________________________________

Введение

Основные понятия

Английская аббревиатура WWW означает World Wide Web, что на русский язык переводится как Всемирная паутина.

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

Гипертекстовые ссылки – выделенные области документа, позволяющие переходить к другому документу, содержащему связанную информацию.

С помощью гипертекстовых ссылок пользователь может обращаться к информации в других документах, связанных с данной темой. Выбирая подсвеченные слова, выделенные изображения и графику в тексте документа и щелкая по ним мышью, Вы можете перемещаться в любом направлении и «перескакивать» на другие интересующие Вас документы, независимо от того, где эти документы находятся.

Web-сервер – очень большой и мощный компьютер, который хранит и пересылает документы и другие информационные ресурсы Интернет.

Home page – (Домашняя страница) начальная или первая страница какого-либо Веб-сервера или логически связанной группы HTML документов.

Web-сайт – группа HTML-документов, объединенных по смыслу и имеющих одинаковое дизайнерское решение.

URL (universal resource locator) – универсальный указатель ресурсов, указывает местонахождение документов в Интернет, является адресом Web-узла.

Адрес выглядит следующим образом:

 

Web-browser – программное обеспечение навигации и просмотра, выдающее запросы и визуализирующее HTML-документы и другие информационные ресурсы Интернет.

Что такое HTML?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB.

Документ, который написан на языке HTML, представляет собой простой текст, в который вставлены флаги разметки, или «тэги» (markup tags). Флаги разметки объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее. С помощью флагов разметки формируются связи с другими web-сайтами и ресурсами Интернет. Просмотреть файл, написанный на языке HTML, можно в броузере (например Internet Explorer). Броузер, выполняя программу (интерпретируя HTML-текст), формирует на экране документ, который видит пользователь.

 

Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Как создаются HTML документы?

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

Вы можете пользоваться различными Web-редакторами, например FrontPage, там многие команды вставляются автоматически. Но чтобы понять строение HTML-документов и лучше запомнить тэги, нужно познакомиться с азами языка HTML. Для этого можно использовать текстовый редактор NotePad.


Основные теги

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

<title> Заголовок документа </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа.

Структура документа

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> ...тело документа... </HTML>

Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>
...

</HEAD>

 

 

Заголовок документа <TITLE>

Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

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

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.


Центрирование элементов документа

Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>. Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна



Последнее изменение этой страницы: 2016-07-22

headinsider.info. Все права принадлежат авторам данных материалов.