Преподаватель который помогает студентам и школьникам в учёбе.

ОСНОВЫ ПРОГРАММИРОВАНИЯ НА ЯЗЫКЕ HTML

Содержание:

Введение

Данная работа посвящена веб-программированию и созданию сайтов на языке HTML.

World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети. Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрал такую тему для своей курсовой работы. В своем реферате я сделал попытку разобраться в том, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания Web-страниц и как его эффективно использовать.

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

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

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

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

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Mozila firefox, Google Chrome, Internet Explorer или другими браузерами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

1. Макет

HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами.

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

Документ HTML состоит из трёх частей:

• строка, содержащая информацию о версии HTML,

• объявляющий раздел head "шапка" (ограниченный элементом HEAD),

• тело, содержащее собственно сам документ.

Тело может содержаться в элементах BODY или FRAMESET. Пробельные символы (пробелы, символы новой строки, символы табуляции и комментарии) могут появляться до или после этого раздела.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<HTML>

<HEAD>

<TITLE> Simple page </TITLE>

</HEAD>

<BODY>

<H1>Hello world!</H1>

</BODY>

</HTML>

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

После этого можно видеть открывающей тег элемента <html>. Это оболочка вокруг всего документа. Закрывающий тег </html> является последним объектом в любом документе HTML.

Внутри элемента html имеется элемент head. Он содержит информацию о документе (метаданные). Внутри head находится элемент title, который определяет заголовок "Simple page" в панели меню.

После элемента head следует элемент body, который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня (h1), который содержит текст "Hello world!".

Элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.

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

2. Синтаксис элементов html

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

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

<h1>Основы

HTML

</abbr>

</h1>

</div>

В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id, для которого задано значение masthead. Элемент div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title, значение которого задано как Hypertext Markup Language.

Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму: ключевое_слово="значение". Значение должно быть помещено в одиночные или двойные кавычки (в некоторых ситуациях кавычки могут отсутствовать, но это не слишком хорошо с точки зрения предсказуемости, понимания).

Атрибуты и их возможные значения определяются в основном спецификациями HTML, поэтому - нельзя создавать свои собственные атрибуты. Единственными реальными исключениями являются атрибуты id и class, значения полностью которых предназначены для добавления в документы вашего собственного значения и семантики.

Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше abbr является потомком h1, который в свою очередь является потомком div. И наоборот, div является "предком" элемента h1.

3. Элементы блочного уровня и строковые элементы

Имеется две основные категории элементов в HTML, которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы.

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

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

4. Заголовок

Заголовок HTML-документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузера (вкладки браузера). Это достигалось за счет элемента разметки TITLE:

<HTML>

<HEAD>

<TITLE>Это заголовок</TITLE>

...

</HEAD>

<BODY>

...

</BODY>

</HTML>

Еще одной функцией заголовка HTML-документа является управление HTTP-обменом через элемент разметки META. При современной практике размещения Веб-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность - через заголовок HTML-документа.

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

Основные теги заголовка - это элементы HTML-разметки, которые наиболее часто встречаются в заголовке HTML-документа, т.е. внутри элемента разметки HEAD:

• TITLE (заглавие документа);

• BASE (база URL);

• ISINDEX (поисковый шаблон);

• META (метаинформация);

• LINK (общие ссылки);

• STYLE (описатели стилей);

• SCRIPT (сценарии).

Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP-обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей таблиц стилей.

Элемент разметки HEAD содержит заголовок HTML-документа. Данный элемент разметки не является обязательным. При наличии тега начала элемента разметки желательно использовать и тег конца элемента разметки. По умолчанию элемент HEAD закрывается, если встречается либо тег начала контейнера BODY, либо тег начала контейнера FRAMESET.

Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.

Элемент разметки TITLE служит для именования документа в World Wide Web. При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом, так как является заголовком окна браузера.

Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

<TITLE>название документа</TITLE>

Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.

Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер.

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

Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML.

5. Элемент разметки meta

META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа, например с помощью атрибута Content-type можно задать перекодировку документа на стороне клиента.

С помощью META также можно задать и другие операторы. Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META-тег вида:

В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператора Cache-Control. Для получения такого же результата, как в случае с Pragma, в заголовке HTML-документа достаточно указать:

<META HTTP-EQUIV="Cache-Control"

CONTENT="no-cache">

Можно запретить хранение документа после пересылки:

<META HTTP-EQUIV="Cache-Control"

CONTENT="no-store">

Точно так же можно задать время последней модификации (Last-Modified) или дату истечения актуальности документа (Expire).

META-тег часто используется для описания поискового образа документа.

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

<TITLE> Веб-технологии</TITLE>

<META NAME="description"

http-equiv="description"

content="Учебный курс Веб-технологии.

Тема: Основы программирования на языке HTML.">

<META NAME="keywords" HTTP-EQUIV="keywords"

CONTENT="учебный курс; Веб-технологии;

HTML 4.1; язык гипертекстовой разметки;

заголовок HTML-документа; заголовок; HTML;

документ; контейнер; элемент; разметка">

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

<META [name=имя]

[HTTP-EQUIV=имя_HTTP-оператора]

CONTENT=текст

6. Элемент разметки link

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

Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй - целью (target). Собственно, это и отражено в названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью).

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

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

Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в веб-браузерах. CSS (Cascade STYLE Sheets, каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок. Контейнер LINK позволил загружать внешние описатели стилей:

<LINK REL=stylesheet href="../css/style.css"

TYPE="text/css"

В данном случае атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.

В общем случае контейнер LINK имеет следующий вид:

<LINK [REL=тип_отношения] [HREF=URL]

[TYPE=тип_содержания]

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

7. Элемент разметки style

Элемент разметки STYLE предназначен для размещения описателей стилей. При этом описание стиля из данного элемента разметки, если оно совпадает по имени класса и/или идентификатору подкласса со стилем, описанным во внешнем файле, заменяет описание стиля из внешнего файла. С точки зрения влияния на весь документ, описатели стилей задают правила отображения контейнеров HTML-документа для всей страницы.

В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт открывающим тегом, то он должен завершаться закрывающим тегом. В общем виде запись элемента STYLE выглядит так:

описание стиля/стилей

</STYLE>

8. Элемент разметки script

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. В принципе, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:

<SCRIPT TYPE="text/javascript"

SRC=script.code

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

JavaScript / VBScript - код

</SCRIPT>

или

<SCRIPT [TYPE=тип_языка_сценариев]

[SRC=URL]>

</SCRIPT>

Веб-браузерами поддерживается несколько сценарных языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.

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

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

• иерархических контейнеров и заставок;

• заголовков (от Н1 до Н6);

• блоков (параграфы, списки, формы, таблицы, картинки и т.п.);

• горизонтальных отчеркиваний и адресов;

• текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);

• математических описаний, графики и гипертекстовых ссылок.

10. Тело документа - контейнер body

Описание тегов тела документа следует начинать с тега BODY. В отличие от тега HEAD, тег BODY имеет атрибуты.

Атрибут BACKGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

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

Атрибут	Описание
MARGINHEIGHT	определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape.
TOPMARGIN	определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.
MARGINWIDTH	определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.
LEFTMARGIN	определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.
BACKGROUND	определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR	определяет цвет фона документа.
TEXT	определяет цвет текста в документе.
LINK	определяет цвет гиперссылок в документе.
ALINK	определяет цвет подсветки гиперссылок в момент нажатия.
VLINK	определяет цвет гиперссылок на документы, которые вы уже просмотрели.

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:

<HTML>

<BODY BACKGROUND="image.jpg" BGCOLOR="black"

TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565" MARGINHEIGHT="25" TOPMARGIN="25" LEFTMARGIN="45" MARGINWIDTH="45">

Текст документа.

</BODY>

</HTML>

12. Теги управления разметкой

Теги	Описание тегов	Атрибуты	Описание атрибутов
от <Н1> до <Н6>	Заголовки. Обозначают начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>.
<P>	Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.	АLIGN	Позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Возможные значения атрибута: justify, left, right, center
<ВR>	Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки.	СLЕАR	Используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Возможные значения атрибута: LEFT, RIGHT, ALL.
<NOBR>	Дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в <NOBR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки.

11. Списки в html

Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:

• ненумерованный список (тег <UL>);

• нумерованный список;

• список определений.

Ненумерованный список записывается в виде последовательности:

<UL>

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

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

<LI>третий элемент списка

</UL>

Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:

• <UL TYPE=DISC> Стандартные маркеры списков первого уровня (по умолчанию).

• <UL TYPE=СIRCLE> Маркеры в виде окружностей.

• <UL TYPE=SQUARE> Квадратные маркеры.

Тег <OL> вместе с атрибутом TYPE позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:

<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3...

<ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С...

<OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с...

<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...

Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :

<DL>

<DT>Термин</DT>

<DD>Определение</DD>

</DL>

14. Комментарии

Комментарии HTML начинаются с символа "". Содержимое комментариев браузер не выводит на экран.

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

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является HREF. Простую ссылку можно записать в виде

<А НREF="http://www.example.com">

Пример гипертекстовой ссылки

</А>

Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.

16. Графика в html

Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.

Пример:

<IMG SRC="myimage.gif" ALT="Картинка">.

Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :

Тег <IMG> имеет один обязательный атрибут SRC и несколько необязательных: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут	Описание
SRC	Указывает файл изображения и путь к нему
ALT	Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику
АLIGN	Определяет положение изображения относительно окружающего его текста
USEMAP	Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет переход по ссылке на документ, заданный для этой области
BORDER	Определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует
HSPACE	Задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом.
VSPACE	Задает вертикальное расстояние между строками текста и изображением
WIDTH , HEIGHT	Задают значения размеров изображения по горизонтали и по вертикали соответственно

13. Средства описания таблиц в html

Для описания таблиц используется тег <ТАВLЕ>. Строки таблицы задается с помощью тегов <ТR></ТR>. Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН>. Эти теги подобны <ТD></ТD>, однако текст, заключенный между тегами <ТН></ТН>, автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тег <CAPTION> позволяет создавать заголовки таблицы.

Атрибут	Описание
NOWRAP	При использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
СОLSPAN	Если требуется сделать какую-нибудь ячейку шире, чем верхняя или нижняя, то можно воспользоваться атрибутом СОLSPAN, чтобы расширить ее на любое количество обычных ячеек.
ROWSPAN	Подобен атрибуту СОLSPAN, только он задает число строк, на которые расширяется ячейка.
WIDТН	Можно поместить его в тег <ТАВLЕ>, чтобы задать ширину всей таблицы, или можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах.
СЕLLРАDDING	Определяет ширину пустого пространства между содержимым ячейки и ее границами.
АLIGN, VALIGN	Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали. VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали.
BORDER	В теге <ТАВLЕ> определяет, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу.
СЕLLSPACING	Определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам.
BGCOLOR	Позволяет установить цвет фона. В зависимости от того, с каким тегом он применяется, цвет фона может быть установлен для всей таблицы (TABLE), для строки (TR) или для отдельной ячейки (TD). Значением данного атрибута является RGB-код или стандартное название цвета.
BACKGROUND	Задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.

18. Пользовательские формы

Элемент FORM описывает форму на веб-странице и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT>, размещенных внутри пары <FORM> и </FORM>. В форме в качестве атрибутов для описания обработки данных, вводимых пользователем в форму используются как метод (method) так и действие (action).

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

Тип элемента	Описание
text	Используется, если необходимо ввести небольшое количество текста (одну или несколько строк). Кроме того, задается атрибут NAME для определения наименования переменной поля. Имеет еще три дополнительных атрибута. MAXLENGTH - ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. SIZE - определяет размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. MAXLENGTH - если его значение больше, чем SIZE, браузер будет прокручивать данные в окне. VALUE - обеспечивает начальное значение поля ввода.
checkbox	Применяется для создания флажков с независимым выбором. Должны также присутствовать атрибуты NAME, и VALUE. В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED.
radio	Применяется в случае, когда требуется организовать выбор одного из нескольких возможных значений. Должны быть также указаны атрибуты NAME и VALUE.
image	Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Должны быть указаны также атрибуты NAME и SRC. Атрибут SRC содержит URI файла - источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>.
password	Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.
button	Используется для размещения кнопок на веб-странице. Имеет атрибуты NAME и VALUE.
file	Элемент управления для запуска диалогового окна выбора файла. Для задания имени файла по умолчанию можно использовать атрибут VALUE.
submit	Используется как элемент интерфейса для завершения ввода данных. Может содержать два дополнительных атрибута: NAME и VALUE.
reset	Используется как элемент интерфейса для сброса всех введеных в поля формы данных. Дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.
hidden	Позволяет включить в отправляемую форму значения атрибутов NAME и VALUE, недоступные для изменения пользователем.

Тег <TEXTAREA> используется для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS (число колонок, содержащихся в текстовой области), NAME и ROWS (количество видимых строк текстовой области).

Тег SELECT используют для определения списка пунктов, задаваемых тегами <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

Атрибут	Описание
MULTIPLE	Позволяет выбрать более чем одно наименование.
NAME	Определяет наименование объекта.
SIZE	Определяет число видимых пользователю пунктов списка

В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE. Атрибут SELECTED используется для первоначального выбора значения элемента по умолчанию. Атрибут VALUE указывает на значение, возвращаемое формой после выбора пользователем данного пункта.

Пример:

<BR>Ваш выбор

<OPTION VALUE="Вариант 1">Вариант 1

<OPTION VALUE="Вариант 2">Вариант 2

<OPTION VALUE="Вариант 3">Вариант 3

<OPTION SELECTED>Вариант 4

</SELECT>

14. Работа с фреймами

Экран с фреймами описывается в НТМL-странице, в контейнере FRAMESET. Содержимое фрейма - отдельная HTML-страница, которая физически может находиться в другом месте где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой содержимого фреймов нет.

Пример:

<HTML>

<HEAD>

<TITLE>Пример фреймов</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Для того, чтобы при щелчке на ссылке со страницы menu.html загружались и отображались в правом окне другие страницы. следует добавить атрибут TARGET (TARGET="main") в тег этих ссылок. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме index. Если не определен атрибут TARGET, то страница появится там, где щелкнули гиперссылку - т.е.в левом фрейме.

Если посетитель с устаревшим браузером окажется на вашей странице с фреймовой структурой, то все, что находится на ней между тегами <NOFRAMES> и </NOFRAMES>, будет выглядеть корректно - браузер просто проигнорирует фреймы.

У тега <FRAMESET> только два возможных атрибута: ROWS, задающий число строк, и COLS, задающий число столбцов.

Тег <FRAME> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Тег <FRАМЕ> имеет следующие атрибуты: NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE и SRC.

Заключение

XHTML - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума W3C в 2001 году.

Буква "X" в XHTML означает "расширяемый. Основные различия между XHTML и HTML показаны в таблице:

Различия между HTML и XHTML
HTML	XHTML
Для элементов и атрибутов не различается регистр символов.	Для элементов и атрибутов различается регистр символов; они используют символы нижнего регистра.
Некоторым элементам не требуется закрывающий тег (например, параграфы, <p>), в то время как другие (называемые "пустыми элементами") запрещают закрывающий тег (например, изображения, <img>).	Все элементы должны быть явно закрыты. Элементы без содержимого могут быть закрыты с помощью косой черты в конце начального тега (например, <br/> ).
	Если XHTML обрабатывается как text/html, то необходимо использовать сокращенный синтаксис для всех элементов, которые определены как "пустой", и помещать пробел перед косой чертой. Необходимо использовать длинную форму (с раздельными начальным и конечным тегами) для любого элемента, не определенного как пустой - даже если он не имеет никакого контента.
Некоторые значения атрибутов могут записываться без кавычек.	Значения атрибутов должны быть заключены в кавычки.
Для некоторых атрибутов можно использовать сокращения (например, <option selected>).	Для всех атрибутов должна использоваться полная форма атрибута (например, <option selected="selected">)
Серверы должны доставлять клиенту HTML документ с MIME типом text/html	XHTML должен использовать MIME тип application/xhtml+xml, но может использовать application/xml, text/xml или text/html.

Список литературы

Основная:

1.Пауэлл Т.А. Полное руководство по HTML. [Текст]/ Т.А. Пауэлл- Москва: ООО "Попурри", 2001. -912 с.

2.Дубаков М.А. Создание Web-страниц: искусство верстки. [Текст]/ М.А Дубаков- Москва: Новое знание, 2004. –287 с.

3. Браун М., Ханикатт Д. HTML в подлиннике. [Текст]/ Д. Ханикатт, М. Браун-СПб: Издательство “БХВ-Петербург” –2002. -1048с.

4.Титтел Эд, Бурмейстер Мэри. HTML для “чайников". 5-е издание. [Текст]/ -Бурмейтсер Мэри, Титтел Эд- Москва: Издательский дом “Диалектика -Вильямс” –2007. -368с.

5. Молли Э, Хольцшлаг. Использование HTML и XHTML. Специальное издание. [Текст]/ Хольцшлаг, Э. Молли- Москва: Издательский дом “Вильямс” –2004. -563c.

6. Дакетт Д. HTML и CSS Разработка и создание веб-сайтов. [Текст]/ Д. Дакетт- Москва: Издательство «Эксмо» 2016. -137с.

Дополнительная:

7. Коржинский С.Н. Настольная книга Web-мастера: эффективное применение HTML, CSS и Javascript. [Текст]/ С.Н. Коржинский- Москва: Издательский торговый дом "Кнорус", 2000. -320с.

8. Гончаров А. Самоучитель HTML. [Текст]/А. Гончаров- СПб.: Питер, 2002. –240с.

9. Шафран Э. Создание Web-страниц: самоучитель. [Текст]/ Э.Шафран- СПб.: Питер, 2001. -320 с.

10. Белунцов В. Новейший самоучитель по разработке Web-страниц. [Текст]/ В.Белунцов- Москва, издательство "ДЕСС-КОМ", 2000. -448 с.

11. Федорчук А. Как создаются Web-сайты. Краткий курс. [Текст]/ А.Федорчук- СПб.: Издательство "Питер", 2000. -224с.

12. Шапошников И.В. Web-сайт своими руками. [Текст]/ И.В. Шапошников- СПб.: БХВ-Санкт-Петербург, 2000. -224 с.