logo
Электронный маркетинг / ux5eebnik / Учебник / GL_9

Основы html

HTML является приложением языка SGML (Standard Generalized Markup Language), стандартизированного ISO в 1986 г.. SGML был разработан для пакетной компьютерной обработки документов.

Базовый синтаксис и семантика языка HTML определены в стандарте, разрабатываемом под эгидой консорциума WorldWideWebConsortium(W3C). Спецификации стандартов и проекты новых предложений представлены на сайтеhttp://www.w3.org. Этот стандарт постоянно расширяется, главным образом за счет включения новых тегов, предлагаемых разработчиками браузеров. В настоящее время действует, то есть поддерживается большинством браузеров, стандартHTML4.01. Однако фирмы-разработчики, такие какMicrosoftиNetscape, включают в свои браузеры собственные расширения, не входящие в стандарт. При разработкеHTML-документов лучше ограничиться набором тегов, используемых в большинстве популярных браузеров.

Необходимо обратить внимание на следующие особенности HTML-документов:

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

Любая HTML-страница состоит из двух логических частей: заголовка и тела. Заголовок документасодержит основную информацию о документе, в том числе название HTML-документа, которое отображается в строке заголовкаWeb-браузера.Тело документаинтерпретируется браузером как содержимоеWeb-страницы.

HTML-страница состоит из размеченного тегами текста. Теги представляют собой определенную последовательность символов, заключенную между символами "<" и ">". Большинство тегов парные, закрывающий тег начинается с символа "/". Следующий фрагмент отображает базовую структуруHTML-документа:

<HTML>

<HEAD>

<TITLE> Электронный маркетинг </TITLE>

</HEAD>

<BODY>

Концепция электронного маркетинга.

</BODY>

</HTML>

Здесь представлены парные теги:

<HTML>…</HTML>– начальный и конечный теги всего HTML-документа. Данный тег предназначен для того, чтобы браузер определил тип документа (HTML) и соответствующим образом его отобразил.

<HEAD>…</HEAD> – начальный и конечный теги заголовка документа. Тег заголовка должен быть указан сразу после тега<HTML>и не должен присутствовать в теле документа. Он отмечает общее описание документа и позволяетHTTP-серверу получить информацию о документе.

<TITLE>…</TITLE> – начальный и конечный теги названия страницы. Название, заключенное в теги <TITLE>…</TITLE>, должно размещаться внутри тегов<HEAD>…</HEAD>. Название страницы не является ее содержимым, а отображается в заголовке окна браузера,

<BODY>…</BODY> - начальный и конечный теги тела документа. Эти теги обязательно должны присутствовать в любом документе. Они определяют содержимое документа, которое отображается в браузере. Между тегами <BODY> и </BODY> заключены все теги, размечающие документ.

Все теги относятся к одному из следующих трех форматов:

<ИМЯ_ТЕГА>

<ИМЯ_ТЕГА> … </ИМЯ_ТЕГА>

<ИМЯ_ТЕГА имя_атрибута1=значение1 имя_атрибута2=значение2 …>… </ИМЯ_ТЕГА>

Первый формат используется для непарных тегов. Например, непарным является тег <BR>, указывающий переход на новую строку.

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

Третий формат используется для тегов, имеющих дополнительные атрибуты, задающие конкретные параметры. Атрибуты тега следуют за именем и отделяются от него и друг от друга пробелами или знаками табуляции. Последовательность атрибутов в теге значения не имеет. Если в таких тегах, а их большинство, атрибуты не указывать, то принимаются некоторые значения по умолчанию. Значения атрибутов заключаются в одинарные или двойные кавычки, кроме случаев, когда значением атрибута является одно слово или число. Некоторые атрибуты не принимают значения и присутствуют в теге в виде <ИМЯ_ТЕГА имя_атрибута>. Например, в теге<H1>, описывающем заголовок текста, можно использовать атрибутsы выравнивания и задания размера:

<H1 ALIGN=Right Size=4 >

Перечень основных тегов представлен в табл. 9.1

Таблица 9.1 Основные теги языка гипертекстовой разметки HTML.

Теги HTML

Описание тега

Основные теги web-документа

Тип документа

<HTML></HTML>

Сообщает браузеру, что документ написан на языке HTML

Имя документа

<TITLE></TITLE>

Заголовок

<HEAD><HEAD>

Отмечает вводную и заголовочную часть HTML- документа

Тело

<BODY></BODY>

Отмечает основной текст и информацию

Определение структуры

Заголовки

<Hi></Hi>

Оформление заголовка первого уровня

Заголовок с выравниванием

<Hi ALIGN=LEFT|CENTER|RIGHT></H?>

Оформление заголовка с выравниванием

Адрес автора

<ADDRESS></ADDRESS>

Содержит адрес электронной почты

Разделители

Абзац

<P></P>

<P

ALIGN=LEFT|CENTER|RIGHT></P>

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

Возможно использование атрибута выравнивания ALIGN

Новая строка

<BR>

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

Горизонтальный разделитель

<HR>

ALIGN=LEFT|RIGHT|CENTER>

Отображение горизонтальной линии.

Возможно использование атрибута выравнивания ALIGN

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

Жирный

<B></B>

Отображение текста полужирным шрифтом.

Курсив

<I></I>

Отображение текста курсивом.

Подчеркнутый

<U></U>

Отображение текста с подчеркиванием.

Форматированный

<PRE></PRE>

Предписывает браузеру сохранение авторского формата текста.

Управление шрифтом

<FONT COLOR =Name SIZE=I FACE="Courier New, Arial,… ></FONT>

Управление цветом и размером шрифта.

Оформление списков

Нумерованный

<OL><LI></OL>

<LI> перед каждым элементом cсписка.

Маркированный

<UL><LI></UL>

<LI> перед каждым элементов списка

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

Цвет фона

<BODY BGCOLOR="#$$$$$$">

Предписывает браузеру цвет фона документа.

Цвет текста

<BODY TEXT="#$$$$$$">

Предписывает браузеру цвет текста в документе.

Таблицы

Определить таблицу

<TABLE>теги описания строк </TABLE>

<TABLE BORDER= ></TABLE>

<TABLE WIDTH=>

<TABLE WIDTH="%">

Сообщает браузеру, что между данными тегами следует описание таблицы

Задает обрамление таблицы

Определение ширины таблицы в пикселах.

Определение ширины таблицы в % от ширины страницы

Строка таблицы

<TR></TR>

Определяет каждую строку таблицы.

Ячейка таблицы

<TD></TD>

<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM>

Определяет текст каждой ячейки.

Возможно использование атрибута выравнивания ALIGN

Ссылки и графика

Ссылка

<A HREF="URL"></A>

Обеспечивае переход по URL-адресу

Графика

<IMG SRC="URL">

<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

<IMG SRC="URL" ALT="***">

Предписывает браузеру просмотр графи-ческого изображения. Возможно выравнива-ние изображения относительно строки текста и задание альтернативного текста

Разработка сайта с использованием языка HTML(Index.htm)

Познакомившись с основными тегами языка гипертекстовой разметки, разработайте Web- страницы сайта, задачами которого является информирование читателя о новых поступлениях в библиотеку. Возможный внешний вид страниц. представлен на Рис.9.6, Рис.9.7. Начните работу с создания в текстовом редакторе Блокнот файлов Index.htm и Annotation.htm, листинг которых приведен в данном упражнении. Обеспечьте переход с первой страницы на страницу Аннотация. Просмотрите Web- страницы с помощью браузера.

Рис. 9.6. Отображение документа (файл Index.htm) в окне браузера

Разработка сайта с использованием языка HTML(Annotation.htm)

Рис. 9.7. Отображение документа (файл Annotation.htm) в окне браузера

Файл INDEX.HTM

<HTML>

<HEAD>

<TITLE>Информационный лист</TITLE>

</HEAD>

<BODY >

<H1>Информация о новых поступлениях в библиотеку</H1>

<IMG SRC="CONTACTS.GIF" ALIGN=RIGHT>

<HR>

<H2>Рекомендуемая литература по дисциплине "Электронный маркетинг "</H2>

<P>Представленная на сайте информация может быть полезна студентам и аспирантам экономических специальностей. </P>

<H2 ALIGN=CENTER> <B><FONT SIZE="4">Добро пожаловать!

</FONT></B> </H2>

<TABLE WIDTH="100%" BORDER="1">

<TR>

<TD><B>Название</B></TD>

<TD><B>Автор</B></TD>

<TD><B>Год издания</B></TD>

</TR>

<TR>

<TD>Энциклопедия Интернет -бизнеса </TD>

<TD>И. Успенский</TD>

<TD>2001</TD>

</TR>

<TR>

<TD>Интернет-маркетинг . Краткий курс.</TD>

<TD>В. Холмогоров</Td>

<TD>2001</TD>

</TR>

</TABLE>

<P><A HREF="annotation.htm">Аннотация</A></P>

<A Href="mailto:Library@rea.ru">Ваши предложения</A>

</BODY>

</HTML>

Файл ANNOTATION.HTM

<HTML>

<HEAD>

<TITLE>Аннотации</TITLE>

</HEAD>

<BODY BGCOLOR="#99CCCC" TEXT="#000000">

<H2>Энциклопедия Интернет - бизнеса И. Успенский</H2>

<PRE>Издание является ценным теоретическим и практическим

руководством по созданию проектов электронной коммерции. </PRE>

<P> <A HREF=#index.htm> Назад</A> </p>

<HR>

<H2>Интернет-маркетинг . Краткий курс. В. Холмогоров</H2>

<PRE>Эта книга - исчерпывающий справочник и подробный самоучитель

по Интернет - маркетингу</pre>

<P> <A HREF=#index.htm> Назад</A> </P

</BODY>

</HTML>