html лаб 2

World Wide Web (сокр. WWW или Web или W3, в переводе на русский означает - Всемирная паутина), изначально

придуманная для обмена исследовательской информацией, стала теперь частью повседневной жизни

множества людей.

World Wide Web (сокр. WWW или Web или W3, в переводе на русский означает - Всемирная паутина), изначально

придуманная для обмена исследовательской информацией, стала теперь частью повседневной жизни

множества людей.

WWW – одна из самых популярных служб Internet, поскольку доступ туда может получить каждый, кто имеет

компьютер и модем. Модем (слово «модем» - происходит от сокращения двух терминов: Модулятор/ДЕМодулятор), это

такое устройство расширения компьютера, которое позволяет передавать информацию от одного компьютера к другому в закодированном виде (сигналами определённой

частоты и громкости) через телефонную линию.

WWW – одна из самых популярных служб Internet, поскольку доступ туда может получить каждый, кто имеет

компьютер и модем. Модем (слово «модем» - происходит от сокращения двух терминов: Модулятор/ДЕМодулятор), это

такое устройство расширения компьютера, которое позволяет передавать информацию от одного компьютера к другому в закодированном виде (сигналами определённой

частоты и громкости) через телефонную линию.

Прошло немного времени с тех пор, как в ноябре 1990 г. Тим Бернес-Ли из

Европейского центра ядерных исследований (CERN) создал прототип первого сервера Всемирной паутины

(WWW-сервера), который впоследствии коренным образом изменил облик

Internet.

Прошло немного времени с тех пор, как в ноябре 1990 г. Тим Бернес-Ли из

Европейского центра ядерных исследований (CERN) создал прототип первого сервера Всемирной паутины

(WWW-сервера), который впоследствии коренным образом изменил облик

Internet.

Но несмотря на то, что концепция функционирования сервера WWW, была уже создана, практическое применение этого сервиса было невозможно

вплоть до февраля 1993 г., когда в суперкомпьютерном центре Иллинойского университета была создана альфа (первая, пригодная для публикации) версия NCSA Mosaic – самой первой программы просмотра

документов на серверах WWW. Именно с этого момента определился взрывной характер роста Internet.

Но несмотря на то, что концепция функционирования сервера WWW, была уже создана, практическое применение этого сервиса было невозможно

вплоть до февраля 1993 г., когда в суперкомпьютерном центре Иллинойского университета была создана альфа (первая, пригодная для публикации) версия NCSA Mosaic – самой первой программы просмотра

документов на серверах WWW. Именно с этого момента определился взрывной характер роста Internet.

WWW – это глобальная система гипертекста. Гипертекст - текст со вставленными в него словами

(командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д.

К 1989 году гипертекст представлял новую, многообещающую технологию, которая имела относительно

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

гипертекстовых систем, которые носили скорее описательный характер и были навеяны успехом

реляционного подхода описания данных.

WWW – это глобальная система гипертекста. Гипертекст - текст со вставленными в него словами

(командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д.

К 1989 году гипертекст представлял новую, многообещающую технологию, которая имела относительно

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

гипертекстовых систем, которые носили скорее описательный характер и были навеяны успехом

реляционного подхода описания данных.

Идея Т. Бернерс-Ли заключалась в том, чтобы применить гипертекстовую модель к информационным ресурсам, распределенным в сети, и сделать это максимально простым способом. Он заложил три краеугольных камня системы из четырех существующих ныне, разработав: • язык гипертекстовой разметки документов HTML (HyperText Markup

Language),• универсальный способ адресации ресурсов в сети URL (Universal Resource

Locator),• протокол обмена гипертекстовой информацией HTTP (HyperText Transfer

Protocol).

Идея Т. Бернерс-Ли заключалась в том, чтобы применить гипертекстовую модель к информационным ресурсам, распределенным в сети, и сделать это максимально простым способом. Он заложил три краеугольных камня системы из четырех существующих ныне, разработав: • язык гипертекстовой разметки документов HTML (HyperText Markup

Language),• универсальный способ адресации ресурсов в сети URL (Universal Resource

Locator),• протокол обмена гипертекстовой информацией HTTP (HyperText Transfer

Protocol).

Позже команда NCSA добавила к этим трем компонентам четвертый: - универсальный интерфейс шлюзов CGI (Common Gateway Interface).

Позже команда NCSA добавила к этим трем компонентам четвертый: - универсальный интерфейс шлюзов CGI (Common Gateway Interface).

Идея HTML – пример чрезвычайно удачного решения проблемы построения гипертекстовой системы при

помощи специального средства управления отображением.

В HTML гипертекстовые ссылки встроены в тело документа и хранятся как его часть. Часто в системах

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

создания гипертекстовой базы данных была решена чрезвычайно просто.

Идея HTML – пример чрезвычайно удачного решения проблемы построения гипертекстовой системы при

помощи специального средства управления отображением.

В HTML гипертекстовые ссылки встроены в тело документа и хранятся как его часть. Часто в системах

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

создания гипертекстовой базы данных была решена чрезвычайно просто.

В качестве базы для разработки языка гипертекстовой разметки был выбран SGML.

В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalised Markup Language

(SGML)».

В качестве базы для разработки языка гипертекстовой разметки был выбран SGML.

В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalised Markup Language

(SGML)».

Стремясь завоевать лидерство в сфере продуктов и программ для WWW, две крупнейшие компании – Netscape, первой утвердившиеся на этом рынке, и вездесущая (там, где есть деньги) Microsoft Corp., которая тоже не может упустить такой лакомый кусок, - наперебой вводили все

новые дополнения и расширения в HTML.

Стремясь завоевать лидерство в сфере продуктов и программ для WWW, две крупнейшие компании – Netscape, первой утвердившиеся на этом рынке, и вездесущая (там, где есть деньги) Microsoft Corp., которая тоже не может упустить такой лакомый кусок, - наперебой вводили все

новые дополнения и расширения в HTML.

В течение конца 1995-начала 1996 года обе фирмы (Netscape и MS) делали все возможное, чтобы следующая версия

стандарта HTML – третья – включала в себя именно их усовершенствования.

В течение конца 1995-начала 1996 года обе фирмы (Netscape и MS) делали все возможное, чтобы следующая версия

стандарта HTML – третья – включала в себя именно их усовершенствования.

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

К сожалению, ни к чему хорошему это не привело – Консорциум W3, оказавшись не в силах довести до конца

проект HTML3, решил прервать работу над этим стандартом, а вместо него подготовил в сотрудничестве с Microsoft,

Netscape, Sun и другими фирмами версию стандарта HTML 3.2, которая почти полностью копирует вариант этого языка

фирмы Netscape.

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

К сожалению, ни к чему хорошему это не привело – Консорциум W3, оказавшись не в силах довести до конца

проект HTML3, решил прервать работу над этим стандартом, а вместо него подготовил в сотрудничестве с Microsoft,

Netscape, Sun и другими фирмами версию стандарта HTML 3.2, которая почти полностью копирует вариант этого языка

фирмы Netscape.

И с появлением в мае 1996-го HTML 3.2 возможности самого

языка были значительно расширены. В частности были реализованы так называемые

таблицы стилей (style sheets), усовершенствованны средства

форматирования, появились новые средства компоновки, возможность разделения документа на разделы,

введена поддержка математических символов

(основанная на языке LaTeX) и апплетов языка Java.

И с появлением в мае 1996-го HTML 3.2 возможности самого

языка были значительно расширены. В частности были реализованы так называемые

таблицы стилей (style sheets), усовершенствованны средства

форматирования, появились новые средства компоновки, возможность разделения документа на разделы,

введена поддержка математических символов

(основанная на языке LaTeX) и апплетов языка Java.

Во время чтения гипертекста вы видите подсвеченные (выделенные) в тексте слова. Если «наехать» на них курсором

мыши и нажать клавишу или на кнопку мышки, то высветится то, на что ссылалось это слово, например, другой параграф той же главы

этого же текста. Такое представление переходов называется ссылками (URL, Uniform Resource Locator – Унифицированный

указатель ресурсов)

Во время чтения гипертекста вы видите подсвеченные (выделенные) в тексте слова. Если «наехать» на них курсором

мыши и нажать клавишу или на кнопку мышки, то высветится то, на что ссылалось это слово, например, другой параграф той же главы

этого же текста. Такое представление переходов называется ссылками (URL, Uniform Resource Locator – Унифицированный

указатель ресурсов)

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

обеспечение, а просто гипертекст. Увы, создание гипертекстовых редакторов с человеческим лицом (дружественным интерфейсом,

отладчиком и т.д.) задача не из простых и еще не решенная.

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

обеспечение, а просто гипертекст. Увы, создание гипертекстовых редакторов с человеческим лицом (дружественным интерфейсом,

отладчиком и т.д.) задача не из простых и еще не решенная.

WWW напоминает паутину, в которой каждый узел или WWW-страница

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

числом страниц. Последняя составляющая технологии WWW - это уже плод работы группы NCSA -спецификация Common Gateway Interface.

WWW напоминает паутину, в которой каждый узел или WWW-страница

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

числом страниц. Последняя составляющая технологии WWW - это уже плод работы группы NCSA -спецификация Common Gateway Interface.

CGI была специально разработана для расширения возможностей WWW за счет подключения всевозможного

внешнего программного обеспечения.

CGI была специально разработана для расширения возможностей WWW за счет подключения всевозможного

внешнего программного обеспечения.

Кроме CGI так же имеется такой инструмент, как форма. Формы являются составляющими той же модели взаимодействия, что и CGI-сценарии, и

позволяют вводить данные для своего запроса или в качестве ответа, - например, делать заказ на

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

книге какого-либо сайта и т.п. Это – «внешний интерфейс», с которым пользователи взаимодействуют.

Кроме CGI так же имеется такой инструмент, как форма. Формы являются составляющими той же модели взаимодействия, что и CGI-сценарии, и

позволяют вводить данные для своего запроса или в качестве ответа, - например, делать заказ на

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

книге какого-либо сайта и т.п. Это – «внешний интерфейс», с которым пользователи взаимодействуют.

CGI-сценарии составляют скрытую от глаз пользователя часть

интерактивного взаимодействия.

CGI-сценарии составляют скрытую от глаз пользователя часть

интерактивного взаимодействия.

HTML – это язык разметки документов в среде WEB. То, что мы видим при просмотре страницы в Internet, это

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

списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и

занимается язык html.

HTML – это язык разметки документов в среде WEB. То, что мы видим при просмотре страницы в Internet, это

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

списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и

занимается язык html.

Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют

одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в

закрывающем имеется слэш "/". Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не

обязательно.

Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют

одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в

закрывающем имеется слэш "/". Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не

обязательно.

Пример :<h1> Крупный заголовок </h1>

<h2> Заголовок чуть поменьше </h2>

Пример :<h1> Крупный заголовок </h1>

<h2> Заголовок чуть поменьше </h2>

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

атрибута, заключённые в двойные кавычки.

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

атрибута, заключённые в двойные кавычки.

Пример:<h1> Крупный заголовок </h1>

<h2 align="center"> Заголовок чуть поменьше </h2>

Пример:<h1> Крупный заголовок </h1>

<h2 align="center"> Заголовок чуть поменьше </h2>

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

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

<html></html> Указывает программе просмотра страниц что это

HTML документ.

<html></html> Указывает программе просмотра страниц что это

HTML документ.

<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и

теги для поисковых машин.

<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и

теги для поисковых машин.

<body></body> Определяет видимую часть документа

<body></body> Определяет видимую часть документа

<title></title> Помещает название документа в оглавление программы

просмотра страниц

<title></title> Помещает название документа в оглавление программы

просмотра страниц

<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет. <body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 -

зеленый цвет.

<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 -

зеленый цвет.

<body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде

RRGGBB - пример: 333333 - серый цвет.

<body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде

RRGGBB - пример: 333333 - серый цвет.

<body alink=?> Устанавливает цвет гиперссылок при нажатии. <body alink=?> Устанавливает цвет гиперссылок при нажатии.

<pre></pre> Обрамляет предварительно отформатированный текст <pre></pre> Обрамляет предварительно отформатированный текст

<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок <h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок

<h6></h6> Создает самый маленький заголовок <h6></h6> Создает самый маленький заголовок <b></b> Создает жирный текст <b></b> Создает жирный текст <i></i> Создает наклонный текст <i></i> Создает наклонный текст

<tt></tt> Создает текст - имитирующий стиль печатной машинки <tt></tt> Создает текст - имитирующий стиль печатной машинки

<cite></cite> Используется для цитат, обычно наклонный текст. <cite></cite> Используется для цитат, обычно наклонный текст. <em></em> Используется для выделения из текста слова (наклонный или жирный текст)

<em></em> Используется для выделения из текста слова (наклонный или жирный текст) <strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)

<strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)

<font size=?></font> Устанавливает размер текста в пределах от 1 до 7. <font size=?></font> Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB. <font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.

<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.

<a href="mailto:EMAIL"> </a> Создает гиперссылку вызова почтовой программы для

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

<a href="mailto:EMAIL"> </a> Создает гиперссылку вызова почтовой программы для

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

<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.

<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.

<a href="#NAME"></a> Создает гиперссылку на часть текущего документа. <a href="#NAME"></a> Создает гиперссылку на часть текущего документа.

<p> Создает новый параграф <p> Создает новый параграф <p align=?> Выравнивает параграф относительно одной из

сторон документа, значения: left, right, или center <p align=?> Выравнивает параграф относительно одной из

сторон документа, значения: left, right, или center

</blockquote> Создает отступы с обеих сторон текста. </blockquote> Создает отступы с обеих сторон текста.

<dl></dl> Создает список определений. <dl></dl> Создает список определений.

<dt> Определяет каждый из терминов списка <dt> Определяет каждый из терминов списка

<dd> Описывает каждое определение <dd> Описывает каждое определение

<ol></ol> Создает нумерованный список <ol></ol> Создает нумерованный список

<li> Определяет каждый элемент списка и присваивает номер <li> Определяет каждый элемент списка и присваивает номер

<ul></ul> Создает ненумерованный список <ul></ul> Создает ненумерованный список

<li> Предваряет каждый элемент списка и добавляет кружок или квадратик<li> Предваряет каждый элемент списка и добавляет кружок или квадратик

<br> Вставляет перевод строки. <blockquote> <br> Вставляет перевод строки. <blockquote>

<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в

таблицах стилей

<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в

таблицах стилей

<img src="name"> Добавляет изображение в HTML документ <img src="name"> Добавляет изображение в HTML документ

<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle <img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

<img src="name" border=?> Устанавливает толщину рамки вокруг изображения <img src="name" border=?> Устанавливает толщину рамки вокруг изображения

<hr> Добавляет в HTML документ горизонтальную линию. <hr> Добавляет в HTML документ горизонтальную линию.

<hr size=?> Устанавливает высоту(толщину) линии <hr size=?> Устанавливает высоту(толщину) линии

<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах. <hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

<hr noshade> Создает линию без тени. <hr noshade> Создает линию без тени.

<hr color=?> Задает линии определенный цвет. Значение RRGGBB. <hr color=?> Задает линии определенный цвет. Значение RRGGBB.

<table></table> Создает таблицу. <table></table> Создает таблицу.

<tr></tr> Определяет строку в таблице. <tr></tr> Определяет строку в таблице.

<td></td> Определяет отдельную ячейку в таблице. <td></td> Определяет отдельную ячейку в таблице.

<td></td> Определяет отдельную ячейку в таблице. <td></td> Определяет отдельную ячейку в таблице.

<table border=#> Задает толщину рамки таблицы. <table border=#> Задает толщину рамки таблицы.

<table cellspacing=#> Задает расстояние между ячейками таблицы. <table cellspacing=#> Задает расстояние между ячейками таблицы.

<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой. <table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.

<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа. <table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. <tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. <tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

<td colspan=#> Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)

<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)

<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры

<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров

<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров

<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров

<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров

<frame> Определяет единичный кадр или область в таблице кадров<frame> Определяет единичный кадр или область в таблице кадров

<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры. <noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.

<frame src="URL"> Определяет какой из HTML документов будет показан в кадре.

<frame name="name"> Указывает Имя кадра или области, что позволяет выводить информацию в этот кадр или область из других кадров.

<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.

<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.

<frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

<frame noresize> Препятствует изменению размеров кадра.

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

интерфейс формы.

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

интерфейс формы.

<form></form> Создает формы <form></form> Создает формы

<select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

<select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

<option> Указывает каждый отдельный элемент меню <option> Указывает каждый отдельный элемент меню

<select name="NAME"></select> Создает ниспадающее меню <select name="NAME"></select> Создает ниспадающее меню

<option> Указывает каждый отдельный элемент меню <option> Указывает каждый отдельный элемент меню

<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст. <input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.

<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст

Параметром Size указывается длина в символах. <input type="submit" value="NAME"> Создает кнопку "Принять" Параметром Size указывается длина в символах. <input type="submit" value="NAME"> Создает кнопку "Принять"

<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение <input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение

<input type="reset"> Создает кнопку "Отмена" <input type="reset"> Создает кнопку "Отмена"

Заголовок HTML-документа определяется элементом HEAD. Тег <HEAD> не имеет атрибутов. Элемент HEAD размещается сразу после тега HTML, перед основной

частью Web-страницы:<HTML> <HEAD>

<! - Здесь размещается заголовок документа>

</HEAD> • • •

</HTML> Элемент HEAD (как элемент HTML) не

отображается при просмотре Web-страницы, он дает браузеру общую

информацию о HTML-файл.

Заголовок HTML-документа определяется элементом HEAD. Тег <HEAD> не имеет атрибутов. Элемент HEAD размещается сразу после тега HTML, перед основной

частью Web-страницы:<HTML> <HEAD>

<! - Здесь размещается заголовок документа>

</HEAD> • • •

</HTML> Элемент HEAD (как элемент HTML) не

отображается при просмотре Web-страницы, он дает браузеру общую

информацию о HTML-файл.

К заголовку документа входит обязательный элемент, который представлен

контейнером <TITLE> . Все, что находится между парой тегов <TITLE> и </TITLE> ,

интерпретируется браузером как название Web-страницы.

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

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

мыши. Элемент TITLE по отношению к

элементу HEAD является дочерним, т.е. вложенным в контейнер <HEAD> :

< HTML > <HEAD>

<TITLE > Название Web-страницы </TITLE>

• • • </HEAD>

• • • < /HTML >

К заголовку документа входит обязательный элемент, который представлен

контейнером <TITLE> . Все, что находится между парой тегов <TITLE> и </TITLE> ,

интерпретируется браузером как название Web-страницы.

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

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

мыши. Элемент TITLE по отношению к

элементу HEAD является дочерним, т.е. вложенным в контейнер <HEAD> :

< HTML > <HEAD>

<TITLE > Название Web-страницы </TITLE>

• • • </HEAD>

• • • < /HTML >

Наличие в HTML-документе элемента BODY является формальным признаком того,

что данный документ имеет обычную структуру.

Тег <BODY> размещается непосредственно после элемента HEAD, а

конечный тег </BODY> является предпоследним тэгом документа:

< HTML ><HEAD>

<TITLE >Название Web-страницы </TITLE>

</HEAD><!- - Содержание документа -->

• • • </BODY>< /HTML >

Начальный тег может дополняться несколькими атрибутами, которые определяют

внешний вид документа в целом.

Наличие в HTML-документе элемента BODY является формальным признаком того,

что данный документ имеет обычную структуру.

Тег <BODY> размещается непосредственно после элемента HEAD, а

конечный тег </BODY> является предпоследним тэгом документа:

< HTML ><HEAD>

<TITLE >Название Web-страницы </TITLE>

</HEAD><!- - Содержание документа -->

• • • </BODY>< /HTML >

Начальный тег может дополняться несколькими атрибутами, которые определяют

внешний вид документа в целом.

* ВАСКGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: <BODY> ВАСКGROUND ="(URL)(путь) имя файла">

* ВАСКGROUND Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: <BODY> ВАСКGROUND ="(URL)(путь) имя файла">

* ВGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов КОВ , или при помощи строчного литерала, соответствующего названию цвета. Синтаксис: <BODY ВGCOLOR ="#Я0000">или <BODY ВGCOLOR ="RED">

* ВGCOLOR Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов КОВ , или при помощи строчного литерала, соответствующего названию цвета. Синтаксис: <BODY ВGCOLOR ="#Я0000">или <BODY ВGCOLOR ="RED">

* ТЕХТ Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным. Синтаксис: <BODY ТЕХТ="цвет">

* ТЕХТ Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным. Синтаксис: <BODY ТЕХТ="цвет">

* LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис: <BODY LINK ="цвет">

* LINK Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. Синтаксис: <BODY LINK ="цвет">

* ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. Синтаксис: <BODY ALINK ="цвет">

* ALINK Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. Синтаксис: <BODY ALINK ="цвет">

* VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута 1ЛМС по понятным причинам. Синтаксис: <BODY VLINK ='’цвет">

* VLINK Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута 1ЛМС по понятным причинам. Синтаксис: <BODY VLINK ='’цвет">

Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:- STRONG Используется для выделения текста

жирным- EM Используется для выделения текста

курсивом- U Выделение текста подчеркиванием- S Перечеркивание текста- SUP Создание верхнего индекса

- STRONG Используется для выделения текста жирным

- EM Используется для выделения текста курсивом

- U Выделение текста подчеркиванием- S Перечеркивание текста- SUP Создание верхнего индекса- SUB Создание нижнего индекса

- FONT Изменение цвета, типа, размера шрифта- HR Вставляет в текст горизонтальную разделительную

линию

- SUB Создание нижнего индекса- FONT Изменение цвета, типа, размера шрифта- HR Вставляет в текст горизонтальную разделительную

линию

STRONG - Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег <BOLD> (или <b> ), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами.

STRONG - Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег <BOLD> (или <b> ), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами.

EM ( Emphasis ) - Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег <I> , однако его лучше не использовать т.к. это не приветствуется поисковыми системами.

EM ( Emphasis ) - Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег <I> , однако его лучше не использовать т.к. это не приветствуется поисковыми системами.

U(Underline) - Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:U(Underline) - Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:

S(Strike) - Текст, помещенный между открывающим <s> и закрывающим </s> тегами, будет перечеркиваться!S(Strike) - Текст, помещенный между открывающим <s> и закрывающим </s> тегами, будет перечеркиваться!

SUP ( Superscript) - Отображает текст, заключенный между открывающим <SUP> и закрывающим </SUP> тегами, как верхний индекс от основного текста.

SUP ( Superscript) - Отображает текст, заключенный между открывающим <SUP> и закрывающим </SUP> тегами, как верхний индекс от основного текста.

SUB(Subscript) - Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста.

SUB(Subscript) - Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста.

FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим <font> и закрывающим </font> тегами.FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим <font> и закрывающим </font> тегами.

Атрибуты:Атрибуты:

SIZE - Определяет размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7. SIZE - Определяет размер шрифта. Возможные значение - 1 , 2 , 3 , 4 , 5 , 6 , 7.

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

FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!

FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!

HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!

Атрибуты HR:Атрибуты HR:

WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.

SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут

может принимать следующие значения:

WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.

SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут

может принимать следующие значения: left – выравнивание по левому краю документа.right – выравнивание по правому краю документа.center – выравнивание по центру документа (используется по

умолчанию).

NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия

отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в

шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.

NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия

отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в

шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.

Например:Текст до линии <hr noshade width="50%" align="left">

После линии <br> А вот пример линии толщиной 2px и без флага

noshade <hr width="50%" align="left" size ="2">

Например:Текст до линии <hr noshade width="50%" align="left">

После линии <br> А вот пример линии толщиной 2px и без флага

noshade <hr width="50%" align="left" size ="2">

Списки двух видов: • упорядоченные (пронумерованные) • неупорядоченные (непронумерованные)

Списки двух видов: • упорядоченные (пронумерованные) • неупорядоченные (непронумерованные)

Элементы:- UL Создает неупорядоченный список- OLСоздает упорядоченный список- LI Создает пункты списка внутри элементов OL или UL UL (Unsorted List) - Создает неупорядоченный список.

Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Элементы:- UL Создает неупорядоченный список- OLСоздает упорядоченный список- LI Создает пункты списка внутри элементов OL или UL UL (Unsorted List) - Создает неупорядоченный список.

Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Атрибуты:Атрибуты:

START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала.START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала.

TYPE – определяет стиль нумерации пунктов списка. TYPE – определяет стиль нумерации пунктов списка.

Возможные значения:"A" – заглавные буквы A, B,

C ..."a" – строчные буквы a, b,

c ..."I" – большие римские

числа I, II, III ..."i" – маленькие римские

числа i, ii, iii ..."1" – арабские числа 1, 2,

3 ...Значение по умолчанию <OL

TYPE="1">.

LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.

LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.

Атрибуты:

VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Пример:Чтобы создать сайт на домашнем компьютере необходимо:

<ol >

<li> Выучить html </li>

<li value="5"> Выучить css </li><li> Ознакомиться с php </li>

</ol>

Пример:Чтобы создать сайт на домашнем компьютере необходимо:

<ol >

<li> Выучить html </li>

<li value="5"> Выучить css </li><li> Ознакомиться с php </li>

</ol>

<a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a><a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a>

Если нужно сделать ссылку между собственными страницами? Если нужно сделать ссылку между собственными страницами?

Если есть две страницы (к примеру page1.htm и page2.htm ) расположенные в одной папке , то код ссылки с page1 на page2

будет выглядеть так:<a href="page2.htm"> Для перехода на page2 щелкни здесь!

</a>Eсли страница page 2 находится в подпапке "subfolder", код

ссылки выглядит так:<a href="subfolder/page2.htm"> Для перехода на page2 щелкни

здесь! </a>Так будет выглядеть код html ссылки со страницы page 2 на

page1(в обратную сторону):<a href="../page1.htm"> Для перехода на page1 щелкни здесь!

</a>

Если есть две страницы (к примеру page1.htm и page2.htm ) расположенные в одной папке , то код ссылки с page1 на page2

будет выглядеть так:<a href="page2.htm"> Для перехода на page2 щелкни здесь!

</a>Eсли страница page 2 находится в подпапке "subfolder", код

ссылки выглядит так:<a href="subfolder/page2.htm"> Для перехода на page2 щелкни

здесь! </a>Так будет выглядеть код html ссылки со страницы page 2 на

page1(в обратную сторону):<a href="../page1.htm"> Для перехода на page1 щелкни здесь!

</a>

Если надо сделать ссылку внутри страницы?Если надо сделать ссылку внутри страницы?

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

<h2 id="razdel1">Раздел 1</h2>

<h2> <a name="razdel1"></a> Раздел1: </h2>

Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.

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

<h2 id="razdel1">Раздел 1</h2>

<h2> <a name="razdel1"></a> Раздел1: </h2>

Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.

Вот как будет выглядеть ссылка на раздел1:

<a href="#razdel1"> Ссылка на Раздел 1 </a>

Вот как будет выглядеть ссылка на раздел1:

<a href="#razdel1"> Ссылка на Раздел 1 </a>

Пример:<h1 > Оглавление </h1> <br>

<a href="#razdel1">Раздел 1: как стать богатым</a> <br> <a href="#razdel2">Раздел 2: как стать счастливым</a><br>

<a href="#razdel3">Раздел 3: как быть здоровым</a><h2 id="razdel1">Раздел 1: как стать богатым </h2>

<p> Для того, чтобы стать богатым необходимо очень много трудиться ..... </p>

<h2 id="razdel2">Раздел 2: как стать счастливым </h2><p>Для того чтобы стать счастливым, нужно использовать каждую

минуту...</p><h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2><p>Для того чтобы быть здоровым нужно много заниматься

физкультурой...</p>

Пример:<h1 > Оглавление </h1> <br>

<a href="#razdel1">Раздел 1: как стать богатым</a> <br> <a href="#razdel2">Раздел 2: как стать счастливым</a><br>

<a href="#razdel3">Раздел 3: как быть здоровым</a><h2 id="razdel1">Раздел 1: как стать богатым </h2>

<p> Для того, чтобы стать богатым необходимо очень много трудиться ..... </p>

<h2 id="razdel2">Раздел 2: как стать счастливым </h2><p>Для того чтобы стать счастливым, нужно использовать каждую

минуту...</p><h2>Раздел3:<a name="razdel3"></a> как быть здоровым</h2><p>Для того чтобы быть здоровым нужно много заниматься

физкультурой...</p>

Ссылка на почту.Ссылка на почту.

Пример ссылки на е-mail сайта zno.com .<a href="mailto:[email protected]">Написать письмо админу zno.com

</a>В браузере будет выглядеть:

Написать письмо админу zno.com

Пример ссылки на е-mail сайта zno.com .<a href="mailto:[email protected]">Написать письмо админу zno.com

</a>В браузере будет выглядеть:

Написать письмо админу zno.com

Дополнительные атрибуты:Дополнительные атрибуты:

TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank".

TITLE - указывает заголовок ссылки, который появляется при наведении на нее.

Пример:<a href="http://www.zno.com" target="_blank">

Это ссылка на сайт zno .com, откроется в новом окне </a> <br> <br>

<a href="http://www. zno.com" title="Учебник создания сайта ">

Эта - тоже на zno.com. При наведении появится заголовок.

</a>Результат:

Это ссылка на сайт zno.com, откроется в новом окне


Пример:<a href="http://www.zno.com" target="_blank">

Это ссылка на сайт zno .com, откроется в новом окне </a> <br> <br>

<a href="http://www. zno.com" title="Учебник создания сайта ">


</a>Результат:

Это ссылка на сайт zno.com, откроется в новом окне


Изменение цвета ссылокИзменение цвета ссылок

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

LINK - цвет просто ссылок.ALINK(Active Link) - цвет активных ссылок (активная означает

в момент нажатия на нее)VLINK(Visited Link) - цвет уже посещенных ссылок

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

К примеру если при открытии тела документа, элементу body прописать:

<body link="red" vlink="green" alink="white">то все ссылки в данном документе станут красными, уже

посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.

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

LINK - цвет просто ссылок.ALINK(Active Link) - цвет активных ссылок (активная означает

в момент нажатия на нее)VLINK(Visited Link) - цвет уже посещенных ссылок

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

К примеру если при открытии тела документа, элементу body прописать:

<body link="red" vlink="green" alink="white">то все ссылки в данном документе станут красными, уже

посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте

зеленая? Тогда нужно внутри html ссылки прописать уже знакомый элемент

font с атрибутом цвета:<a href="http://www.zvirec.com"><font color="black">Черная

ссылка</font></a>Если сделать так, то данная ссылка будет черной.

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте

зеленая? Тогда нужно внутри html ссылки прописать уже знакомый элемент

font с атрибутом цвета:<a href="http://www.zvirec.com"><font color="black">Черная

ссылка</font></a>Если сделать так, то данная ссылка будет черной.

Подводя итог всему, что сказано выше, хочется отметить, что HTML стал тем форматом передачи

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

именно за HTML.

Подводя итог всему, что сказано выше, хочется отметить, что HTML стал тем форматом передачи

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

именно за HTML.

html лаб 2

Documents