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

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

Содержание:

Введение

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

В работе рассматривается язык разметки гипертекста HTML (Hypertext Markup Language). Первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.

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

Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей (CSS), иногда присутствуют Java-апплеты. То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов.

Объектом исследования является процесс создания сайта с помощью HTML.

Предмет – язык гипертекстовой разметки HTML как средство создания сайта.

Цель работы состоит в общей характеристике языка разметки гипертекста HTML.

В соответствии с поставленной целью задачи работы сформулированы следующие:

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

Основные сведения о языке HTML

1.1 Понятие о языке гипертекстовой разметки HTML

Язык HTML (HyperText Markup Language, язык разметки гипертекста) относится к числу так называемых языков разметки текста (markup languages). Термин «разметка» относится к общей служебной информации, которая не отображается вместе с документом, но определяет, как должны выглядеть определенные части документа [5, 9]. Например, можно потребовать, чтобы слово выделялось полужирным шрифтом или курсивом, печатать отдельный абзац специальным шрифтом или делать заголовки более крупными.

HTML (Hypertext Markup Language, Язык разметки гипертекста) — это компьютерный язык, который лежит в основе World Wide Web. HTML основан на стандарте SGML гипертекстовый язык разметки документов для их представления в Web. Стандарты языка HTML, одного из ключевых стандартов Web, разрабатываются и поддерживаются консорциумом W3C. Основателем этого международного консорциума является Тим Бернес-Ли (Tim Berners-Lee). Консорциум помимо создания стандартов форматирования, является центром разработки Semantic Web (семантическая сеть). Средствами языка HTML обеспечивается форматная разметка документов, определяются гиперсвязи между документами и/или их фрагментами [1].

В качестве основы написания кода HTML был выбран обычный текстовый файл. Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки).

Разработчики HTML смогли решить две задачи [11]:

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

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

Еще одним важным моментом, который оказал влияние на судьбу HTML, стало то, что за основу был выбран обычный текстовый файл. Среда редактирования HTML - это нейтральная полоса между простейшим текстовым файлом и приложением WYSIWYG (what you see is what you get – что вы видите, то и получаете) [12]. Выбор среды редактирования дает все преимущества текстового редактирования.

Гипертекстовые ссылки, которые устанавливают связи между текстовыми документами, понемногу стали соединять самые разные информационные ресурсы, в том числе звуковые и видеоматериалы. Система гиперссылок HTML дает возможность построить систему взаимосвязанных документов по различным критериям. Язык HTML включает в состав команды (теги), которые позволяют управлять формой и размером шрифтов, размером и расположением картинок, позволяет переходить от фрагмента текста или иллюстрации к другим html - документом – так называемую гипертекстовую ссылку.

Документ в формате html – это текстовый файл, содержащий всю необходимую информацию об отображаемой на экране информации. Для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев, например, JavaScript, Java и VBScript. Формы для ввода пользователем данных, которые впоследствии обрабатываются и другой информации, могут быть обработаны с помощью специальных серверных программ (например, на PHP либо Perl). HTML дает возможность размещать гипертекстовые ссылки и интерактивные кнопки на страницах, которые соединяют веб-страницы с другими страницами того же веб-сайта, а также с другими веб-сайтами по всему миру.

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

1.2 Структура файла в формате HTML

Главными составляющими HTML можно назвать [14]:

Тег (tag). Тег HTML – это компонент, каковой передает команду Web- браузеру исполнить конкретную задачу типа формирования абзаца или вставки изображения.
Атрибут (либо аргумент). Атрибут HTML меняет тег. К примеру, можно выровнять абзац либо изображение изнутри тега.
Значение. Значения присваиваются атрибутам и определяют вносимые изменения. Например, если для тега используется атрибут выравнивания, то можно указать значение этого атрибута. Значения могут быть текстовыми, типа left или right, а также числовыми, как например ширина и высота изображения, где значения определяют размер изображения в пикселях.

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

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

Изучаемый элемент обладает лишь открывающий тег <!doctype>, каковой начинается восклицательным знаком [17]. В указанном теге располагаются сведения о виде документа.

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

<HTML>

...тело документа...

</HTML>

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

<HTML>

<HEAD>

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

</HEAD>

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

Пример 1. Структура элементарного WEB-документа

<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Title</title>

</head>

<body>

Hello, world!

</body>

</html>

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

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

Как можно заметить из примера 1, все сведения о форматировании документа сосредоточены в его фрагментах, которые заключены между знаками "<" и ">". Данный фрагмент (к примеру, <html>) именуется меткой (по-английски — tag, читается "тэг"). Большая часть HTML-меток — парные, другими словами на всякую открывающую метку вида <tag> существует своя закрывающая метка типа </tag> с таким же именем, однако с приставкой "/" [19]. Метки можно вводить как прописными, так и строчными буквами.

2. Основные элементы HTML- документа и разметка контента

2.1 Заголовки

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

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

Элементы Н1-Н6 нужны для определения заголовков разных уровней в составе документа. H1 задает заголовок первого, либо верхнего, уровня, Н2 — заголовок второго уровня, Н3 - третьего уровня и т. Д [2, 9].

Зачастую, раздел BODY может начинаться с заголовка первого уровня, включающего в состав тот же текст, что и элемент TITLE, который находится в разделе HEAD. В другой части документа заголовки второго уровня (Н2) применяются для определения заголовков разделов, НЗ - для подразделов и т. д.

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

Тип выравнивания может задаваться при помощи атрибута ALIGN, допустимыми значениями какового являются LEFT, RIGHT, CENTER и JUSTIFY [3, 4]. Если задано значение JUSTIFY, то заголовки, длина каковых превышает ширину окна браузера, располагаются так, что их левая и правая границы совпадают с границами окна. Примеры заголовков разных уровней указаны в примере 2. Заголовок третьего уровня показывается с подчеркиванием.

Пример 2. Документ с заголовками разных уровней

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTМL>

<HEAD>

<TIТLE>Уровни заголовков</TITLE>

</HEAD>

<ВODY>

<Н1>Заголовок 1-го уровня (H1)</Н1>

<Н2 ALIGN="СЕNTER"> Заголовок 2-го уровня (H2)</H2>

<H3><U>Заголовок 3-го уровня (H3)</U></H3>

<Н4 ALIGN="RIGНТ"> Заголовок 4-го уровня (H4)</H4>

<H5> Заголовок 5-го уровня (H5)</Н5>

<Н6> Заголовок 6-го уровня (H6)</H6>

</BОDY>

</НТML>

2.2 Встроенные и блочные элементы

Все элементы, отвечающие за представление контента, принято разделять на две большие группы: элементы уровня блока, или блочные (block) и встроенные, или элементы уровня текста (inline) [15].

Первые отделяют в тексте и вообще в контенте большие блоки (к примеру, заголовок, абзац, адрес автора публикации). Другие выделяют фрагмент изнутри строки (одно слово или фразу).

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

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

Пример 3. Блочная структура Web-страницы

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transit! onal//EN">

<html>

<head>

<TITLE>Заголовки,блоки,абзацы</TITLE>

</hЕАd>

<ВОdy leftmargin="100" bgcolor="#ffffff">

<Н1 align="center">

<Р>Часть первая

<Р>Старгородский лев

</h1>

<Н2>

<р>Глава 1<Р>Безенчук и &quotНимфы&#34

</Н2>

<Р>В уездном городе N было так много парикмахерских заведений и бюро похоронных процессий, что казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову вежеталем и сразу же умереть. А на самом деле в уездном городе N люди рождались, брились и умирали довольно редко. Жизнь города N была тишайшей.</р>

</div>

<р>Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова, хотя этими вопросами по роду своей службы он ведал с девяти утра до пяти вечера ежедневно с получасовым перерывом для завтрака.</р>

</ВОdy>

</hТml>

Делая обзор данной Web-страницы, есть возможность заметить следующее.

Строки 7-10: заголовок первого уровня.

Строки 11-13: заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.

Строки 14-16: блок <div>. Для наглядности он выделяется другим цветом текста и фоном, а кроме того смещен на сорок пикселей влево от линии других элементов.

Строка 17. Обычный абзац, который создан с помощью элемента <р>.

Все указанные элементы включены в элемент <body>. В терминологии программистов упоминается, что данный элемент является родительским, для вложенных элементов-потомков <h1>, <h2>, <div>, <р>. Элементы-потомки наследуют некоторые свойства элемента-родителя. К примеру, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элемент <div> выпадает из данного списка, так как для него явно указано левое поле.

Рисунок 1 – Блочная структура страницы

А вот элемент <р>, каковой включен в <div>, наследует от него смещенную левую границу (рисунок 1).

2.3 Списки

Для организации списков используются специальные элементы. Можно создавать нумерованные, маркированные списки и списки определений [16, 19].

Нумерованные списки могут размещаться в контейнере <ol>...</ol>, маркированные - в <ul>...</ul>. Всякий дальнейший элемент списка вкладывается в отдельный контейнер <li>. Закрывающий тег предполагается, однако может быть опущен, так как однозначно восстанавливается по присутствию следующего элемента или по концу списка [7].

Списки различных видов могут вкладываться друг в друга (рисунок 2), что может продемонстрировать такой пример 4.

Пример 4. Организация списков

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<ТITLE>Списки</TITLE>

</head>

<ВОdy>

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

<UL>

<LI>Следовательно, НКПС построит железнодорожную магистраль. Это-раз.

<LI>Два - это гостиницы и небоскребы для размещения гостей.

<LI>Три - поднятие сельского хозяйства в радиусе на тысяч километров..

<ОL>

<LI value="4">Дворец, в котором будет происходить турнир, четыре.

<LI>Пять - постройка гаражей для гостевого автотранспорта.

</ОL>

<LI>Для передачи всему миру сенсационных результатов турнира придется построить сверхмощную радиостанцию. Это – в шестых.

</UL>

</ВОdy>

</НТml>

Рисунок 2 – Пример реализации списков

Отдельный тип списков составляют непосредственно списки-определения, каковые организуют текст наподобие толкового словаря. В них задается слово-определение и создается его описание. Собственно, слово выравнивается по левому краю. Описание выводится с отступом вправо. Весь список может быть вложен в контейнер <dl>...</dl>, который определяет структуру списка и может включать в содержание лишь элементы <dt> (определение) и <dd> (описание) [8]. Формально элементы <dt> и <dd> являются контейнерами, однако соответствующие закрывающие теги зачастую не отмечаются.

2.4 Разметка текста

В практической деятельности все еще часто встречаются элементы физического форматирования текста, определяющие гарнитуру шрифта и его начертание. К примеру, контейнер <i> …</i> выведет заключенный в него текст курсивом.

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

Пример 5. Физическое форматирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HЕАD>

<TITLE>Физическое форматирование текста</TITLE>

</HEAD>

<bОdy bgcolor="white">

<Н1>Физическое форматирование текста</H1>

<В>Bold</B><BR>

<I>Italic</I><BR>

<ТТ>Teletype (Monospaced) </TТ><BR>

<U>Underlined</U><BR>

Subscripts: f<SUВ>0</SUB> + f <SUB>1</SUВ><ВR>

Superscripts: x<SUР>2</SUP> + y<SUP>2</SUР><BR>

<SMALL>Smaller</SМАLL><BR>

<BIG>Bigger</BIG><ВR>

<STRIKE>Strike Through</STRIKE><BR>

<B><I>Bold Italic</I></B><BR>

<ВIG><TT>Big Monospaced</TT></BIG><BR>

<SMАLL><I>Small Italic</I></SMALL><BR>

<FОNT COLOR="GRAY">Gray</FONT><BR>

<DЕL>Delete</DEL><BR>

<INS>Insert</INS><ВR>

</ВОDY>

</HTML>

Рисунок 3 – Отображение браузером элементов физического форматирования

В примере 6 показаны примеры логического форматирования. Итоги отображения указанных выражений в окне браузера продемонстрировано на рисунке 4.

Пример 6. Логическое форматирование

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТITLE>Логическое форматирование текста</TITLE>

</HEAD>

<H1>Логическое форматирование текста</H1>

<ЕМ>Emphasized</EM><BR>

<STRОNG>Strongly Emphasized</STRONG><BR>

<СОDE>Code</CODE><BR>

<SАMP>Sample Output</SAMP><BR>

<KВD>Keyboard Text</KBD><BR>

<DFN>Definition</DFN><BR>

<VАR>Variable</VAR><BR>

<CITE>Citation</CITE><ВR>

<EMXCODE>Emphasized Code</CОDE></EM><BR>

<FONT COLOR="GRAY"><СITE>Gray Citation</CITE></FONT><BR>

<ACRONYМ TITLE="Java Development Kit">JDK Acronym</ACRONYM>

</BODY>

</HTML>

Рисунок 4 – Отображение браузером элементов логического форматирования

Вместо явного указания шрифта для отображения данных, большинство авторов задает тип текста и предоставляют браузеру свободу выбора определенного представления данного текста. Для установления вида текста применяется логическое форматирование. К примеру, применяя контейнер <еm> … </еm>, можно указывать, что заключенный там текст должен быть выделен (по умолчанию курсивом) [17]. Но, если каскадные таблицы стилей не применяются, автор в определенной степени утрачивает контроль над внешним видом документа.

2.5 Таблицы

HTML-таблицы применяются не только классическим способом (другими словами для представления данных в виде двухмерной таблицы), но и для управления компоновкой и группировкой элементов. Таблицы могут содержать изображения, фрагменты текста, включая списки, и даже другие таблицы. Авторы Web-страницы имеют возможность запретить отображение рамки вокруг таблицы и границ между ячейками, в итоге содержимое таблицы выглядит как выровненные фрагменты данных [18].

Таблица является довольно сложной структурой, формируемой совокупностью элементов. Основных элементов, из каковых может быть организована минимальная таблица – 3. Это <TABLE> - который ограничивает всю таблицу (может включать необязательный элемент CAPTION, который задает имя таблицы), <TR> - который выделяет строку (вкладывается в <TABLE>), <TD> - который выделяет отдельные ячейки в строке (вкладывается в <TR>). Данные (текст, остальные таблицы, картинки, гиперссылки, формы и другое) находятся в контейнерах <TD>…</TD>. В содержание всякой строки таблицы могут входить элементы <TH>, содержащие заголовок таблицы. В составе элемента <TH> информация по умолчанию показывается полужирным шрифтом и может выравниваться по центру. Данные в элементе <TD> показываются обычным шрифтом и выравниваются по левому краю. Пример простой таблицы показан в примере 7. На рисунке 5 продемонстрирован внешний вид данной таблицы на экране браузера. Закрывающие теги </TR>, < /ТН> и </TD> необязательны, но способствуют прослеживанию структуры таблицы.

Пример 7. Простая таблица

<TАВLE BORDER=1>

<CАРTION>Название таблицы</CAPTION>

<ТR><TН>Заголовок1</TH> <TH>Заголовок2</ТН></TR>

<TR><TD>Строка1 Столбец1</TD><TD>Строка1 Столбец2</TD></TR>

<TR><ТD>Строка2 Столбец1</TD><TD>Строка2 Столбец2</TD></TR>

<TR><TD>Строка3 Столбец1</ТD><TD>Строка3 Столбец2</ТD></TR>

</TABLE>

Рисунок 5 – Простая HTML-таблица

Если в открывающем теге <TABLE> не отмечены атрибуты, по умолчанию формируется таблица без рамок, выровненная по левому краю. Добавочные возможности по управлению внешней структурой таблицы предоставляют особые атрибуты [6]. Простой пример применения атрибута FRAME показан в примере 8. На рисунке 6 продемонстрировано, как этот пример может выглядеть на экране браузера.

Пример 8. Таблица с отключенным внешним обрамлением

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>2000 World Championship</TITLE>

</HEAD>

<BODY>

<Н2 АLIGN="CENTER">2000 World Championship</Н2> Final result in the 2000 world tic-tac-toe championship. Deep Green is "X", Garry Kasparov is "0".

<TR><TH>X<ТН>0<TH>X

<TR><TH>X<TH>0<TH>X

<ТR><ТН>0<TH>X<ТH>0

</TАВLE>

</BОDY>

</HTML>

Рисунок 6 – Таблица с отключенным внешним обрамлением

В примере 9 показана таблица, для каковой в заголовках столбцов текст показывается белым цветом на черном фоне, а в других ячейках выводится черный текст на светло-сером фоне. Внешний вид таблицы продемонстрирован на рисунке 7.

Пример 9. Задание цвета фона и текста таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>WWW Standards</TITLE>

</HEAD>

<ВОDY BGCOLOR="WHITE">

<Н1 ALIGN="CENTER">WWW Standards</Hl>

<TАВLE BОRDER=1 BGСОLOR="#EEEEEE">

<ТН><FОNT СОLOR="WHITE">Standard</FONT>

<TH><FONT COLOR="WHITE">Obsolete Version</FONТ>

<TH><FONT COLOR="WНIТE">Most Widely Supported Version</FONT>

<TH><FONT COLOR="WНITE">Upcoming Version</FОNT>

<ТR> <ТD>НТML

<TD>3.2

<TD>4.0

<ТD>XHTML

<TR> <TD>HTTP

<ТD>1.0

<TD>1.1

<TD>1.2

</TАВLE>

</BODY>

</HTML>

Рисунок 7 – Таблица с ячейками и текстом разных цветов

Если будет потребность ячейки могут расширяться на несколько столбцов или строк. Примеры кода показаны в примерах 10 и 11, а внешний вид таблицы продемонстрирован на рисунке 8.

Пример 10. Ячейка заголовка, расширяющаяся на два столбца

<TАВLE ВОRDER=1>

<TR> <TH COLSPAN=2>Заголовок столбцов 1 и 2

<TН>Заголовок столбца 3

<TR> <TD>Столбец 1

<ТD>Столбец 2

<TD>Столбец 3

</TАВLE>

Пример 11. Ячейка данных, расширяющаяся на две строки

<ТАВLE BОRDER=1>

<ТR> <TН>Заголовок 1<TH>Заголовок 2

<TR><ТD ROWSPAN=2>Данные строк 1 и 2

<TD>Строка 1 Столбец 2

<ТR><TD>Строка 2 Столбец 2

</TАВLE>

(а)

Рисунок 8 – Расширение ячейки на несколько столбцов (а),

расширение ячейки на несколько строк (б)

(б)

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

Многие создатели Web-страниц не ставят перед собой задачу последовательно представлять материал в одном документе. Вместо этого они предоставляют на собственных страницах ссылки на иные документы и разделы того же документа, представляя посетителям возможность переходить по ссылкам и показывать информацию, которая их больше всего интересует. Элемент <A> дает возможность автору расположить фрагменты текста либо изображения так, чтобы при активизации их пользователем браузер отображал в своем окне нужный раздел иного документа [6]. Элемент <A> также дает возможность назвать позицию и документе, чтобы на нее могли указывать гипертекстовые ссылки.

В примере 12 продемонстрированы 4 вида гипертекстовых ссылок: первый, который содержит абсолютный URL, второй, который содержит относительный URL, третий, который указывает на позицию внутри данного документа, а кроме того четвертый, который указывает на позицию в документе с указанным URL.

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

The official HTML specifications are available from

<А HRЕF="http://www.w3.оrg/MаrkUp/"> the World Wide Web Consortium (W3C)</A>, with some examples given in

<A HRЕF="HTML-Examples.html">my example page</А>.

The Java programming language is discussed in

<A НREF="#Section-3">Section 3</A>. For a discussion of COBOL, see

<А HREF="johndoe.html#COBOL">my friend's home page</А>.

Кроме ссылок http:, большая часть браузеров кроме того поддерживают ссылки mailto: (для адресов электронной почты), file: (для локальной файловой системы на клиентской машине) и ftp: (для FTP-узлов).

2.7 Изображения

Элемент IMG дает возможность добавлять изображения в содержание документа. Большая часть браузеров может обрабатывать форматы GIF (Graphic Interchange Format), JPEG (Joint Photographic Expert Group) и PNG (Portable Network Graphic). Так как период загрузки изображения устанавливает время загрузки всей страницы, требуется представлять изображение в таком формате, каковой гарантирует наименьший размер файла.

Элемент IMG содержит изображение в текущей позиции документа. IMG является элементом текстового уровня и не создает новый абзац. IMG не является контейнером, поэтому закрывающий дескриптор не указан. SRC является обязательным атрибутом. Он указывает расположение файла, который содержит изображение, каковое должно быть включено в документ. Атрибут ALT указывает строку, каковая отображается вместо изображения в браузерах, не поддерживающих графические файлы [14].

В примере 13 указаны разные вариации выравнивания картинок относительно текстовой строки. Результаты продемонстрированы на рисунке 9.

Рисунок 9 – Несколько видов выравнивания изображений

Пример 13. Варианты выравнивания изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>Выравнивание изображения</TITLE>

</HЕАD>

<BODY>

<Н1 align=center>Выравнивание изображения</H1>

<TR><ТН>Выравнивание

<TН>Результат

This positions the image at the left side, with text flowing around

it on the right.

<TR><TH><CODE>RIGHT</CODE>

This positions the image at the right side, with text flowing around

it on the left.

Here, the image runs into the paragraph and the line containing the

image is aligned with the image top.

<TR><TH><CODE>BOTTOM</СОDE>

<ТD><IМG src="rude-pc.gif" align="BOTTOM" alt="Rude PC" width=54 height=77>

Here, the image runs into the paragraph and the line containing the

image is aligned with the image bottom.

<TR><TH><CODE>MIDDLE</CODE>

<ТD><IMG src="rude-pc.gif" align="MIDDLE" alt="Rude PC" width=54 height=77>

Here, the image runs into the paragraph and the line containing the

image is aligned with the image center.

</TАВLE>

</BОDY>

</HTML>

Рисунок может являться ссылкой, для этого элемент <img> должен быть расположен в контейнере <а href=...>...</a> [4]. Еще более впечатляющим является сайт, где части изображения являются ссылками на разные страницы. Это изображение называется графической картой.

В примере 14 показано изображение, которое разделено на 3 прямоугольных области, с каждой из каковых связан HTML-документ. Картинка карты ссылок показана на рисунке 10.

Рисунок 10 – Карта ссылок

Пример 14. Организация карты ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Карта ссылок</TITLE >

</HEAD>

<BODY>

<MАP NAME="arrows">

<ARЕА SHAPE="RECT" COОRDS="0,0,100,190" HREF="left.html" АLT="Налево">

</МАР>

</BODY>

</HTML>

Строка 7: код данной строки показывает изображение и ссылается на элемент с названием #arrows, в каковом описана карта.

Контейнер <MAP> включает строки 8-12: описание карты.

Строки 9-11 характеризуют некоторые области и указывают, какую ссылку они будут вызывать.

Проведя указателем мыши по подобному изображению, можно запросто выяснить, где располагается такая ссылка, а где она отсутствует (рисунок 10). Справа и слева карты изображения ссылки присутствуют, а в центре - нет. Адрес ссылки можно найти в статусной строке 6pаузера. Анализируя пример, можно обратить внимание, как адрес ссылки изменяется при перемещении маркера с левой стрелки поворота на правую.

2.8 Формы

2.8.1 Формирование элементов управления

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

Элемент <input> используется для создания большого числа элементов управления в формах [13, 15]. Это включает в себя текстовые поля, поля пароля, флажки, переключатели, скрытые элементы. Все они обычно используются при вводе данных в форму. Форматирование элементов формы (выравнивание, шрифты, цвет и прочие) происходит только путем изменения стиля.

В примере 15 показано применение элемента <input> с разными атрибутами (рис. 11).

Пример 15. Элементы ввода информации

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<TIТLE>Элементы ввода информации &lt input &gt</TITLE>

</hЕАd>

<body>

<fОrm>

ввод текста&nbsp&nbsp&nbsp<inРut type="text" value="текст по

умолчанию" name="my_text">

<Вr>

ввод пароля &nbsp<input type="password" value="enter" name="my_pass"

style="background: #aaaaaa; text-align: center;">

<br>

флажок (checkbox)&nbsp&nbsp <inРuТ type="checkbox" name= "check1"

vаlue="первый">

<inРut type="checkbox" name="check2" value="второй" checked>

<br><br> проголосуй за

<Вr>

<input type="radio" name="radio1" value="Бендер">&nbsp&nbspБендера

<br>

&nbsp&nbspПаниковского

<br>

<input type="radio" name="rаdio1" value="Балаганов">&nbsp&nbspБалаганова

<Вr><br>

<br>

<inРut type="hidden" name="spy" value="донос">

<br>

<inpuТ type="button" value="кнопка">

<inpuТ type="submit" name="submit1" value="отправить">

<inРut type="reset" name="reset1" value="очистить">

</fОrm>

</body>

</html>

Рисунок 11 – Элементы ввода информации <INPUT>

Строка 7. Отображается текст «Ввод текста», а после него поле ввода текста, в каковом показывается текст, который задан по умолчанию в атрибуте value. Именно данный текст будет подвергаться редактированию.

Строка 9. Наподобие организуется поле для ввода пароля. Слово «enter», заданное по умолчанию, выводится звездочками.

Стандартные атрибуты HTML не дают возможности управлять отображением элементов форм (фоном, выравниванием, шрифтом и т.д.). Это может быть при применении стилей.

К примеру, в строке 7 в поле ввода сразу после отображения показывается текст «текст по умолчанию», который выравнивается по левому краю.

В строке 9 показано, что текст можно выводить, выравнивая его по центру.

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

Строки 15, 17, 19. Выводятся похожие радиокнопки, из которых по умолчанию выбрана вторая (в строке 17 в элементе <input> установлен флажок - атрибут checked). Кнопки объединены общим именем name="radio1" и из них может быть выбрана только одна.

Строка 21. Организуется поле для ввода имени файла, рядом с которым - кнопка для вызова стандартного диалога.

Строка 23. «Подпольный» элемент не выводится, но при отправке данных значения его параметров могут передаваться.

Строка 25. Выводится простая кнопка, надпись на которой легко изменить.

Строка 27. Выводится кнопка «отправить» (определяются данные).

Строка 28. Выводится кнопка «очистить». Ее нажатие вернет форму в начальное состояние.

2.8.2 Организация списков

Элемент <select> нужен для организации меню, разных списков и выбора из них. Пункты списка формируются элементами <option> [12]. При отправке данных на сервер отсылается имя списка вместе со значением, которое по умолчанию является выбранной строкой. Передаваемое значение может быть изменено. Ниже показан пример применения элемента <option> с разными атрибутами. Результат продемонстрирован на рисунке 12.

Рисунок 12 – Использование элемента <OPTION> с различными атрибутами

Пример 16. Списки выбора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Элемент &ltoption&gt</TITLE>

</HEAD>

<BODY>

<SELЕСT name="select1">

<ОРТION>Москва

<OPTION selected>Жмеринка

<OPTION>Большие Васюки

</SELECT>

<SELЕСТ name="select2" size=5 multiple>

<OPTION selected>Полыхаев

<OPTIОN value="бухгалтер">Берлага

<OРТION label="васис" selected>Васисуалий Андреевич Лоханкин

<OPTION style="color: red;">Гигиенишвили

<OPTION>Пряхин

<OPTION>Дуня

<OPТION>Люция Францевна Пферд

</SELЕCT>

</BODY>

</HTML>

Таким образом происходит использование элемента <OPTION> с различными атрибутами.

2.8.3 Связывание элементов формы

Элементы для связывания разных форм весьма полезны в ситуации автоматической обработки содержимого страницы и при применении альтернативных браузеров. Они дают возможность задать логическую связь между разными элементами. Например, связать надпись на экране с каким-то элементом формы, таким как ее название. Для связывания текстовой информации и элемента управления, т.е. организации подписи, используют элемент <LABEL> [1, 6]. Каждый конкретный элемент <LABEL> может связываться только с одним элементом формы, но с одним элементом формы может быть связано несколько элементов <label>.

Использование элементов <LABEL>, <fieldset>, <legend> продемонстрировано в примере 17 и на рисунке 13.

Рисунок 13 – Связывание элементов формы

Пример 17. Связывание элементов формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Элемент &ltfieldset&gt</TITLE>

</HEAD>

<BODY>

<FIELDSЕТ>

<LEGEND style="font-family:'arial';">анкета</lеgend>

<LABЕL for="имя">имя:</label>

пол<br>

<LАВЕL for="пол">м</LABEL><INPUT type="radio" name="пол" value="м">

</FОRM>

</FIЕLDSET>

</ВОDY>

</HTML>

В определенных случаях требуется организовать подпись не к одному, а к нескольким элементам и организовать их в группу. Для организации подписи ко многим элементам выступают элементы <fieldset> и <legend>.

2.9 Фреймы

2.9.1 Разбиение окна браузера на фреймы

Фреймы дают возможность разделить окно браузера на несколько областей прямоугольной формы и показать в каждой из них отдельный HTML-документ. Описание фреймовой структуры выстраивается в отдельном файле. В обычном HTML-документе за разделом HEAD непосредственно идет раздел BODY, в каковом содержится информация, предназначенная для отображения. В документе с фреймами элемент BODY либо отсутствует, либо находится в разделе NOFRAMES, предназначенном для браузеров, которые не поддерживают фреймы. Вместо элемента BODY используется элемент FRAMESET, с помощью которого задается разбиение окна браузера на столбцы или строки. В содержание FRAMESET входят другие элементы FRAMESET, реализующие дальнейшее разбиение окна, либо элементы FRAME, определяющие URL документов, которые должны отображаться внутри фреймов [12].

В примерах 18 и 19 показаны исходные коды двух документов с фреймами. Эти документы почти идентичны и различны лишь применением атрибута FRAMEBORDER, определяющим, должны ли отображаться разделительные линии между фреймами. Результаты показаны на рисунке 14.

Пример 18. Фреймы с разделителями

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HEAD>

<TITLE>Frames with Borders</TITLE>

</HEAD>

<FRАМЕSET ROWS="40%,60%">

<FRАMESET COLS="*,*">

<FRАМE SRC="Frame-Cеll.html">

</FRAMЕSET>

<BODY>

Your browser does not support frames. Please see

<A HRЕF-"Frame-Cеll.html">nonframes version</A>.

</BODY>

</NOFRAMЕS>

</FRAMESET>

</HTML>

(а) (б)

Рисунок 14 – По умолчанию между фреймами выводятся разделители (а), вывод разделителей между фреймами запрещен (б)

Пример 19. Фреймы без разделителей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HЕАD>

<TITLE>Frames without Borders</TITLE>

</HEAD>

<FRАМЕSET ROWS="40%,60%" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0>

<FRАМE SRC="Frаme-Cell.html">

<FRAMЕSET COLS="*,*">

</FRAMESET>

<BODY>

Your browser does not support frames. Please see

<A HREF="Frame-Cell.html">nonframes version</A>.

</BODY>

</NOFRAMES>

</FRAMЕSET>

</HTML>

2.9.2 Определение фрейма для отображения документа

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

Часто фреймы применяются для формирования небольшой панели инструментов либо меню, представляющего содержание документа. Такая панель или меню находится либо в верхней, либо в левой части окна браузера. Остальное пространство в окне предназначено для отображения главного документа. После щелчка на пункте меню с содержанием в основной области выводится документ, на который указывает ссылка. Рассмотрим в качестве примера Web-страницу, показанную на рисунке 15.

Веб-страница организуется так, чтобы под таблицу с содержанием отводилось пространство фиксированного размера. Другая часть окна нужна для вывода документа (имя данного фрейма Main) [13]. В примере 20 показан HTML-код документа верхнего уровня.

Пример 20. Код документа с фреймами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML>

<HEAD>

<TITLE>Документ из двух фреймов</TITLE>

</HEAD>

<FRАМE SRC="mеnu.html" NAME="Menu">

<NОFRАMES>

<BODY>

This page requires Frames. For a non-Frames version,

<A HREF="introduction.html">the introduction</A>.

</BОDY>

</NOFRAMES>

</FRAMESET>

</HTML>

Рисунок 15 – WEB-страница, которая содержит 2 фрейма: таблицу с содержанием и основной фрейм, в котором отображается раздел документа

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

При выборе ссылки в таблице содержимое верхнего фрейма остается неизменным. Такого же эффекта можно добиться, полностью отказавшись от атрибутов TARGET в составе гипертекстовых ссылок и включив в раздел HEAD выражение <BASE TARGET="Main">. Документ, который содержит атрибут TARGET, не считается строго соответствующим HTML 4.0, поэтому в начало данного документа должна быть включена промежуточная декларация DOCTYPE.

2.9.3 Встроенные фреймы

Элемент <iframe> отображает особый тип панелей — встроенное окно либо встроенный фрейм [14]. В данном окне может показываться другой документ. Применение элемента <iframe> продемонстрировано в примере 21 и на рисунке 16.

Рисунок 16 – Встроенный фрейм

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TIТLE>Встроенный фрейм</TITLE>

</HEAD>

<BОDY style="background-color: #dddddd">

<Р>Был воскресный вечер. Все было чисто и умыто</P>

<DIV>

Налюбовавшись&nbsp

<IFRАМE align=middle width=70% height=350 src="framе-cell.html">

Здесь должен быть встроенный фрейм

</IFRАМЕ>

</DIV>

<Р>- Эх, Киса, - сказал Остап, мы чужие на этом празднике жизни</P>

</BODY>

</HTML>

Строка 7-12. Создается блок <div>.

Строка 8. В блоке сначала показывается текстовое выражение «Налюбовавшись».

Строка 9. Показывается фрейм, каковой обладает относительным размером по ширине (70%) и абсолютным по высоте (350 рх). Во фрейм выводится файл frame-cell.html. Фрейм выравнивается по середине строки.

3. Создание документов в стандарте HTML

3.1 Инструментарий для создания HTML – страниц

Каждый может выбрать собственный инструмент для формирования веб-страниц. Это может быть MS FrontPage либо Macromedia DreamWeaver, Allaire HomeSite либо 1st Page [15, 19]. И кто-то может воспользоваться простыми текстовыми редакторами, к примеру, таким как Блокнот (Notepad).

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

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

DreamWeaver 3.0. Но DreamWeaver на несколько шагов впереди других редакторов, который используют технологию WYSIWYG, изначально тем, что генерирует крайне чистый HTML-код. DreamWeaver дает возможность избавиться от однотипной работы при формировании страниц (например, верстка текста) с помощью применения опции «запись последовательности команд» (можно записать последовательность производимых пользователем команд, затем нажать, к примеру, CTRL+P, и DreamWeaver воспроизвести все в той же последовательности [10].

HomeSite 4.0. Другой редактор - HomeSite 4 - для формирования страниц ручным способом, другими словами для знатоков HTML. Можно получить абсолютный контроль над HTML-кодом, при том есть возможность оптимизировать сосбтвенную страничку под один из 3 известных браузеров (MSIE, Google Phrome, Opera) [4].

HomeSite включает 2 базовых режима: Edit и Design. Режим Design - это аналог WYSIWYG-редактора, выдающее HTML-код, при том, если загрузить чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительное свойство HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а кроме того входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2. Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!") [7]. Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3.2 Практическое применение языка разметки гипертекста HTLM

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

Важным шагом стало принятие стандарта ISO/IEC:10646 в качестве набора символов для документов HTML [11]. Это наиболее содержательный стандарт в мире, в котором решены вопросы представления национальных символов, направления письма, пунктуации и других языковых вопросов. HTML теперь предоставляет лучшую поддержку различных языков в одном документе. Это обеспечивает более эффективное индексирование документов для поисковых машин, типографию высшего качества, преобразование текста в речь, более удобные переносы и т.д.

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

В HTML5 появилось множество новых тегов, которые в основном помогают воспроизводить анимацию и flash [9].

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

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

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

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

Заключение

Язык HTML (HyperText Markup Language, язык разметки гипертекста) — это язык, на котором создаются Web-страницы. HTML-документы могут просматриваться различными типами Web-браузеров.

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

Web-страницы могут быть организованы при помощи:

обычного текстового редактора;
редактора, способного сохранять в формате HTML;
специализированного редактора;
специализированной системы.

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

Главным достоинством HTML является то, что документ может быть просмотрен на WEB-браузерах разных видов и на разных платформах.

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

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

Структурирование контента подразумевает его разбивку на логические блоки. Элементы Н1-Н6 предназначены для определения заголовков различных уровней в составе документа.

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

Для создания Web-страниц может использоваться MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite, 1st Page или, например, Блокнот (Notepad).

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

Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.
Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.
Дуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.
Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.
Кастро Э. Создание Web-страниц с помощью HTML. М.: Издательство “НТ Пресс”- 2005. - 144с.
Комолова, Н., Яковлева Е. HTML: Самоучитель / Н. Комолова, Е. Яковлева. – СПб.: Питер, 2011. – 288 с.
Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.
Крис, Д. Креативный Web-дизайн. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Учебник Пер с англ. / Д. Крис, К. Кинг, Э. Андерсон. – М.: ООО «ДиаСофтЮП», 2005. 672 с.
Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.
Мержевич В. HTML и CSS на примерах. Спб.: Издательство “БХВПетербург” – 2005. - 448с.
Пауэлл Т.А. Полное руководство по HTML. -Мн.: ООО "Попурри", 2001. - 912 с.
Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.
Полонская Е.Л. Самоучитель. Язык HTML – СПб.: Издательский дом Вильяме, 2007. – 320 с.
Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.
Русак А.М. Основы работы с HTML – М.: ИНТУИТ, 2006. – 130 с.
Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.
Титтел Эд, Бурмейстер Мэри. HTML 4 для "чайников". 5-е издание. М.: Издательский дом “Диалектика -Вильямс” – 2007. - 368с.
Хеслоп П. HTML самого начала. С.-Пб: Санкт-Петербург, 2005.
Шафран Э. Создание Web страниц. С.-Пб: Питер, 2004.

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

Введение

Основные сведения о языке HTML

1.1 Понятие о языке гипертекстовой разметки HTML

1.2 Структура файла в формате HTML

2. Основные элементы HTML- документа и разметка контента

2.1 Заголовки

2.2 Встроенные и блочные элементы

2.3 Списки

2.4 Разметка текста

2.5 Таблицы

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

2.7 Изображения

2.8 Формы

2.8.1 Формирование элементов управления

2.8.2 Организация списков

2.8.3 Связывание элементов формы

2.9 Фреймы

2.9.1 Разбиение окна браузера на фреймы

2.9.2 Определение фрейма для отображения документа

2.9.3 Встроенные фреймы

3. Создание документов в стандарте HTML

3.1 Инструментарий для создания HTML – страниц

3.2 Практическое применение языка разметки гипертекста HTLM

Заключение

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