Язык html позволяет создавать: НОУ ИНТУИТ | Лекция | Основы языка HTML – HTML: основы для начинающих — Вебджем.рф

Содержание

НОУ ИНТУИТ | Лекция | Основы языка HTML

Аннотация: В этой лекции рассматривается структура HTML-документа. Описывается создание и применение гиперссылок, списков, таблиц, фреймов, форм. Показаны мультимедийные возможности HTML.

HyperText Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Netscape Composer, основы работы с котором рассмотрены в разделе «Обработка текста на ЭВМ», Microsoft FrontPage, HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть — собственно текст, т. е. данные, составляющие содержимое документа. Другая — теги (markup tags), называемые также флагами разметки, — специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.

Прописные и строчные буквы при записи тегов не различаются

. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

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

</имя_тега>

Атрибуты тега записываются в следующем формате:

имя[=»значение»]

Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.

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

контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

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

Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).

Последовательность	Символ
<	символ <
>	символ >
&	символ &
«	символ » (кавычка)
	неразрывный пробел

Структура HTML-документа

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

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

<HTML>
  <HEAD>
       ...
  </HEAD>

  <BODY>
       ...
  </BODY>
</HTML>

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

Заголовок документа

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

Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.

Чаще всего в заголовок документа включают парный тег <TITLE> … </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.

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

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

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

Атрибут	Назначение
ALINK	Определяет цвет активной ссылки
BACKGROUND	Указывает на URL-адрес изображения, которое используется в качестве фонового
BGCOLOR	Определяет цвет фона документа
LINK	Определяет цвет непосещенной ссылки
ТЕХТ	Определяет цвет текста
VLINK	Определяет цвет посещенной ссылки

Пример

<HTML>  
 <HEAD>  
  <TITLE>Моя страничка</TITLE>  
 </HEAD>  
 <BODY  TEXT=red BGCOLOR=white>  
 Тело <!- Это комментарий -> документа  
 </BODY>  
</HTML>

Общие сведения о языке html

HTML (Hyper Text Markup Language)—это специальный язык разметки документов. Важно отметить, что здесь речь идет об электронных, а не о печатных документах.

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

Язык HTML специально создан, чтобы оформлять экранные документы, которые будут воспроизводиться неизвестными средствами. Изначально язык HTML предназначался не для форматирования документа, а для его функциональной разметки. Например, «заголовок» — это характеристика содержания, а не оформления. Программа для просмотра документа на экране (браузер, броузер, обозреватель), выбирает свой способ отображения части документа, описанной как заголовок.

Создание документа на языке HTML аналогично программированию. Автор документа берет обычный текст и вставляет в него специальные коды (их называют тегами). Когда документ просматривается, теги выполняют роль команд. Например, если в начале абзаца стоит тег <CENTER>, то весь абзац будет выровнен по центру окна, независимо от того, в каком окне будет происходить просмотр документа, и каким шрифтом текст будет отображаться.

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

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

Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.

Теги html

Управляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (<) и «больше» (>). После открывающей скобки идёт ключевое слово, определяющее тег.

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

Теги бывают парные и непарные. Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий. Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).

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

Если по ошибке в теге записано ключевое слово, отсутствующее в языке, то тег полностью игнорируется.

При просмотре документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

На эффект, создаваемый тегом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тега и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки. В парных тегах атрибуты добавляются только к открывающему тегу. Закрывающие теги никогда не содержат атрибутов.

Язык HTML позволяет вводить в документ комментарии. Комментарии начинаются со специального тега <!—. Любой текст, следующий за этим тегом рассматривается как комментарий и не выводится на экран при отображении документа. Комментарий может содержать любые символы, кроме символа >, и таким образом, не может содержать теги. Заканчивается комментарий символами —>, закрывающая угловая скобка не ставится.

Основы языка html Введение

Содержание

1.Основы языка HTML 2

Введение 2

1.1.Структура HTML-документа 3

1.2.Форматирование гипертекста 7

1.3.Использование графики в HTML-документах 11

1.4.Гиперссылки 13

1.5.Списки 15

1.6.Использование таблиц в HTML 19

1.7.Фреймы 25

1.8.Мультимедийные возможности HTML 30

1.9.Формы в HTML-документах 31

2.Динамический HTML 39

2.1.Стили и таблицы стилей 40

2.Использование языка сценариев JavaScript 51

4.Рекомендации по созданию HTML-документов 53

5. Технология создания WEB – сайта 55

5.1.Анализ сайтов 55

5.2.Проектирование сайта 57

5.3.Контент и кратив 62

5.4.Написание кода 63

5.5.Тестирование 65

5.6.Публикация 65

5.7.Поддержка 66

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

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

</имя_тега>

Атрибуты тега записываются в следующем формате:

имя[=»значение»]

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Последовательность	Символ
<	символ <
>	символ >
&	символ &
«	символ » (кавычка)
	неразрывный пробел

Язык HTML

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

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

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

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

Определение 1

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

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

Стандарт SGML

Это язык разметки создавался и был разрекламирован как один из вариантов SGML. Впервые в 1974 году Чарльз Голдфарб предложил, а в дальнейшем значительно доработав его приняли официальным стандартом ISO, SGML (StandardGeneralizedMarkupLanguage, Стандартный обобщенный язык разметки), представляющий собой метаязык, т.е. систему описания других языков.

Стандарт SGML появился, так как возникла необходимость совместно использовать данные разными приложениями и операционными системами. Проблема с совместимостью возникла у пользователей очень давно, еще на заре появления вычислительной техники. Ученые из IBM — Чарльз Гольдфарб, Эд Мо-шер и Рэй Лори – проанализировали многие нестандартные языки разметки на предмет недостатков и сформулировали общие принципы, обеспечивающие совместную работу с документами в разных операционных системах. Ниже приведены эти принципы:

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

Замечание 1

Вышеназванные правила составляют основу предшественника SGML — GML (Generalized Markup Language), который разрабатывали и исследовали около 10 лет, пока по соглашению, заключенному международной группой разработчиков, не появился стандарт SGML.

Средства языка HTML

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

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

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

Другим важным моментом стало использование за основу языка обычного текстового файла. Среда редактирования HTML является нейтральной полосой между простейшим текстовым файлом и приложением WYSIWYG (whatyouseeiswhatyouget – что вы видите, то и получаете). Выбор среды редактирования предоставляет все преимущества текстового редактирования.

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

Замечание 2

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

Динамический и статический HTML-документы

Html-документы бывают двух видов: статические и динамические. Статические документы хранят файлы файловой системы, используемой web-сервером или браузером при просмотре локальных файлов. Размещая информацию на web-сервере, используют динамические документы, не существующие постоянно в виде файлов, а генерирующиеся в момент запроса клиента. При чем для конечного пользователя не имеет значения каким способом представлены документы.

Генерирование динамических документов HTML происходит с помощью специально написанной программы по правилам web-сервера. При планировании размещения информации на сервере, для правильного определения видов документов, учитывают степень обновления данных, их объем и частоту обращений к ним. При динамическом способе подразумевается хранение данных в формализованном виде, например в базе данных. При хранении данных в формализованном виде используются шаблоны документов с произведенными в них изменениями, генерируются статические документы путем использования любых средств отчетов, имеющихся в той системе управления баз данных (СУБД), которой последние обработаны и формализованы.

Перспективы HTML

Новые версии языка HTML не предполагаются, не смотря на это существует дальнейшее развитие HTML под названием XHTML (англ. Extensible Hypertext Markup Language — расширяемый язык разметки гипертекста). Пока возможности XHTML сопоставимы с HTML, но предъявляются более строгие требования к синтаксису. Язык XHTML является подмножеством языка SGML, однако в отличие от HTML, соответствует спецификации XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 26 января 2000 года. Нужно отметить, что в этом формате создано большое количество информационных ресурсов, которые долго еще будут пониматься web-браузерами и использоваться в своем первозданном виде. Кроме того, все новые форматы будут разрабатываться (и уже разрабатываются – например XML) с поддержкой технологий HTML.

Стили работы меняются, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо — независимый язык. Новые технологии используются повсеместно и довольно скоро пространство WWW перестанут применять лишь пользователи настольных персональных компьютеров, уже сейчас некоторыми пользователями активно применяются голосовые браузеры для незрячих или браузеры, использующие азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а на экран телевизора, где применяются приставки с выходом в сеть, на телетайп или на монохромные дисплеи различных организаторов-пейджеров и пр.

Язык html позволяет создавать: НОУ ИНТУИТ | Лекция | Основы языка HTML – HTML: основы для начинающих