Введение. 1. Сценарий и структура Web-документа .. 4

Оглавление

Введение………………………………………………………………………..3

1. Сценарий и структура Web-документа……………………………..……...4

2. Цвета документа…………………………………………………………….9

3. Создание таблиц……………………………………………………………13

4. Оформление текста HTML страниц………………………………………16

5. Вставка графических изображений……………………………………….19

6. Создание обычной гиперссылки………………………..............................21

7. Мета-теги…………………………………………………………………..24

8. Фреймы…………………………………………………………………….26

9. Как поместить свою HTML-страницу в интернет……………………….28

Заключение…………………………………………………………………...29

Список используемой литературы…………………………………………..30

Приложения

Введение.

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

Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

Иными словами, средства, предназначенные для работы с Сетью, стали

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

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

Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети.

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

1.Сценарий и структура Web-документа.

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может быть использован любой текстовый редактор.

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

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

< p> Информация< /p>

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

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

A) Объявление HTML;

B) Заголовок;

C) Тело документа.

A) Объявление HTML

< HTML > и < /HTML >. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег < HTML > (в самом начале документа), а последним - < /HTML > (в самом конце документа).

< HTML>

< /HTML>

B) Заголовочная часть.

< HEAD> и < /HEAD >. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках " Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами < TITLE> и < /TITLE>.

< HTML>

< HEAD>

< TITLE> Моя первая страница< /TITLE>

< /HEAD>

< /HTML>

C) Тело документа.

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

< HTML>

< HEAD>

< TITLE> Моя первая страница< /TITLE>

< /HEAD>

< BODY>

< /HTML>

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

Любой Web-документ состоит из тегов, причем обычно начальные теги

пишутся большими буквами, а конечные - маленькими.

Итак, рассмотрим основные теги, входящие в каждый Web-документ(Полный список тегов в Приложении 1).

Отличительный признак HTML-документа. Одним из принципов языка являетсямногоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница.

Если сравнить исходные тексты различных Web-страниц, можно легко

увидеть сходство их структур. Это объясняется тем, что документы создаютсяпо определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO8879: 1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значения принято заключать в кавычки. Тег < BODY> имеет атрибуты, которые перечислены ниже:

• bgcolor="..." - определяет цвет фона документа. Работа с цветами в HTML-документах будет рассмотрена ниже;
• background="..." - указывает браузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;
• text="..." -устанавливает цвет текста;
• alink=".." - определяет цвет активной ссылки;
• link="..." - определяет цвет не просмотренной ссылки;
• vlink="..." - определяет цвет просмотренной ссылки;
• topmargin="..." - устанавливает границу верхнего поля;
• leftmargin="..." - граница левого поля;
• bgproperties=" fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;
• onload="..." - определяет те действия браузера, которые должны произойти после загрузки документа из сети.

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

2.Цвета документа.

Выбор цвета можно производить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Язык HTML поддерживает следующие имена Цветов: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW. Номер цвета RGB задается тремя двухзначными шестнадцатеричными числами, причем каждое число принадлежит интервалу от 00 до FF и определяет интенсивность соответствующего цвета. Например, номер цвета #FFOOOO соответствует красному цвету, так как имеет максимальную интенсивность для красного цвета, а зеленый и голубой имеют значения, равные нулю. Соответственно, номер #OOFFOO кодирует зеленый цвет, а номер #OOOOFF - синий. Белый цвет образуется в результате насыщения всех основных цветов, т.е. его кодом будет число #FFFFFF. В случае полного отсутствия всех трех цветов можно получить абсолютно черный цвет (код #000000). Очевидно, что, используя такую комбинацию шестнадцатеричных чисел, можно получить очень большое количество цветов. Для удобства, основные шестнадцать цветов, их коды и названия приведены в таблице

Гиперссылки

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

< А HREF=" filename" target=" _self" > текст ссылки< /A>

Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename - имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

• _top - открытие документа в текущем окне
• _blank - открытие документа в новом окне
• _self - открытие документа в текущем фрейме
• _parent - открытие документа в родительском фрейме

Значение по умолчанию: _self

Примеры:

• < A href=" photo/my_photo.html" target=" _blank" > Moй фотоальбом< /A>
  ссылается на файл my_photo.html, расположенный в каталоге photo, вложенном в текущую папку, и образует ссылку в виде текста " Мой фотоальбом". Документ откроется в новом окне.
• < A href=" aboutme.html" target=MainFrame > Немного обо мне< /A>
  откроет страницу aboutme.html, расположенную в текущей папке, и образует ссылку в виде текста " Немного обо мне". Документ откроется во фрейме " MainFrame".
• < A href=" mailto: support@rol.ru" > письмо в техподдержку< /A>
  выполнят макрокоманду загрузки почтовой программы с автозаполнением адреса получателя.

Теперь попробуем применить наши новые знания на практике. Добавим в нашу страничку атрибуты тега < BODY> и ссылку на страничку в интернете.

Изменим код странички:

< HTML>

< HEAD>

< TITLE> Моя домашняя страничка< /TITLE>

< /head>

< body bgcolor=" #000000"

background=" Stars.gif"

text=" #ffffff"

alink=" #DDOOOO"

link=" #0000FF"

vlink=" #FF00FF" >

< br>

< br>

Добро пожаловать на мою домашнюю страничку!

< br>

< br>

< a href=" https://www.aport.ru" target=" _blank" >

Поиск в интернете

< /a>

< /BODY>

< /HTML>

В данном примере был использован еще один тэг < BR>, который позволяет задать принудительный перевод строки в пределах абзаца, и является тегом прерывания строки.

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

Таблицы очень часто используют для позиционирования различных элементов на Web-странице.

Описание таблиц в HTML-документах осуществляется с помощью контейнера < TABLE>...< /TABLE>. Таблица задается двумя контейнерами тегов:
< TR>...< /TR> - описание строки таблицы и
< TD>...< /TD> - описание ячейки таблицы.

По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.

Рассмотрим пример простейшей таблицы:

< HTML>

< HEAD>

< TITLE> Таблица< /TITLE>

< /HEAD>

< BODY>

< TABLE border=" 2" > <! -- Начало таблицы -->

< TR>

< TD colspan=2 align=center>

< B> Заголовок Таблицы.< /В>

< /TD>

< /TR>

< TR>

< TD align=" center" >

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

< /TD>

< TD align=" center" >

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

< /TD>

< /TR>

< TR>

< td align=" center" >

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

< /TD>

< TD align=" center" >

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

< /TD>

< /TR>

< /TABLE> <! -- конец таблицы -->

< /BODY>

< /HTML>

Результат этого кода вы можете посмотреть здесь.

Ширина таблицы задается атрибутом width="..." для тега < TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов < TR> или < TD>.

Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру.

Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

Допускается добавлять к таблице, к строке или столбцу заголовок. Тег < CAPTION>, который располагается после тега < TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега < TH> после тегов < TR> или < TD> соответственно.

Атрибут border="..." тега < TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов < TD> и < TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег < IMG> Допускается использование файлов в формате GIF или JPG/JPEG, поскольку большинство браузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла):

< IMG src=foto.jpg width=" 542" height=" 407" alt=" picture " >

Здесь атрибут src=" " определяет URL-адрес графического файла В приведенном примере файл будет размещен в области шириной 542 и высотой 407 пикселей соответственно. Если размеры, указанные атрибутами height=" " (высота) и width=" " (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Но для больших графических файлов рекомендуется всегда задавать их размеры для ускорения работы браузера. Если размеры не заданы, то, встретив рисунок, браузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.

Пример вставки рисунка:

< HTML>

< HEAD>

< ТIТLЕ> Вставка pисунка< /TITLE>

< /HEAD>

< BODY>

< IMG src=foto.jpg width=" 542" height=" 407"

alt=" picture " >

< /BODY>

< /HTML>

Атрибут alt="..." указывает браузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или из-за разрыва соединения файл не был загружен.

Картинку можно так же использовать для указания на гиперссылку. Например:
< A HREF=" index.html" > < IMG SRC=" snail.gif" border=" 0" alt=" На главную страничку" height=" 84" width=" 92" > < /A>

По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы убрать рамку используют атрибут border="..." в теге < IMG> с нулевым значением

6. Создание обычной гиперссылки.

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

< a href=" url" target=" Окно" title=" Подсказка" > Название ссылки< /a>

Параметры элемента < A> представлены в таблице: