Web страница документ html представляет. Создание документов в HTML. Демонстрация основных терминов HTML

Когда вы загружаете из WWW хоть какой документ, то его текст в окне вашего браузера отображается в отлично отформатированном, комфортном для просмотра виде. Это означает, что WEB странички представляют собой не обычный текст, а содержат также некую вспомогательную информацию для управления представлением документа в окне вашего браузера. Так как при разработке документа не понятно, на компьютере какого типа пользователь будет его просматривать, то WEB странички не могут готовиться и храниться в формате, разработанном для определенной компьютерной платформы, к примеру, в формате Microsoft Word для Windows ХР. Для того, чтоб пользователь, работающий на компьютере хоть какого типа, лицезрел документ, отформатированный соответствующим образом, употребляется разработанный специально для этого язык HTML.

Что все-таки представляет собой язык HTML?

Если вы работаете с браузером , то изберите команду меню Вид - Просмотр HTML кода (View - Source). На дисплее появится окно с начальным кодом этой странички на языке HTML.

В либо довольно надавить CTRL+U

Вид WEB страничек в Интернет очень нередко изменяется. Но для нас на данный момент это не значительно.

HTML - HyperText Markup Language (Язык разметки гипертекста)

HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой достаточно обычный набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заглавия, абзацы, таблицы, списки-перечисления и так далее, но не задает определенные атрибуты форматирования. Определенный вид форматирования определяет сам браузер при чтении документа, и конкретно браузер обеспечивает лучшее отображение WEB документа на вашем экране.

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

Язык HTML

Язык HTML существует в нескольких вариантах, либо спецификациях. Как и версии программных товаров, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Любая следующая спецификация представляет собой расширение и дополнение предшествующей. Мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства всераспространенных браузеров.

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

левой угловой скобки .

Таким макаром, открывающий тег , стоящий сначала документа HTML и значащий его начало, состоит из имени HTML и двух угловых скобок < >, а тег , находящийся в конце WEB документа, не считая обозначенных частей содержит также знак слэш /, значащий закрывающий тег и указывающий на конец документа. Тег значит начало кода интегрированной в документ программы-сценария. Этот тег содержит, не считая имени script, атрибут language со значением "vbscript", значащий, что сценарий написан на языке vbscript.

В тегах могут употребляться только знаки латинского алфавита, а в значениях атрибутов - любые знаки. Если в качестве значений атрибута употребляются, к примеру, знаки кириллицы, то они обязаны быть заключены в кавычки, к примеру, name="Раздел 1".

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

Теги как база html

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

Книжный Интернет-магазин Три Cтупеньки

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

Большая часть тегов могут иметь один либо несколько атрибутов - характеристик, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Но атрибутов может и не быть совсем. Атрибут тега состоит из имени, к примеру, align, знака равенства=и значения, которое задается строчкой знаков, к примеру, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Но если эти значения употребляют только знаки латинского алфавита, числа и дефисы, то кавычки можно опустить, к примеру: align=center. Но опускать кавычки категорически не рекомендуется в силу ряда обстоятельств связанных с предстоящей интеграцией HTML с JavaScript и языками. Потому вырабатывайте привычку сходу писать атрибуты в кавычках.

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

Каждый HTML документ имеет определенную структуру, которая смотрится последующим образом:

…

Структура HTML документа содержит последующие неотклонимые элементы:

теги и , которые отмечают начало и конец документа;
заголовок, ограниченный тегами и ;
тело, ограниченное тегами ….

В заголовке, ограниченном тегами и , при помощи тегов … определяется заглавие документа, которое должно обрисовывать его содержимое и обычно содержит менее 5-6 слов. Это заглавие отображается браузерами в строке заголовка рабочего окна программки, а боты, составляющие индексы для поисковых машин, идентифицируют документ, используя его заглавие.

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

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

HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа-браузер на Вашем компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернет. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

С точки зрения пользователя Windows, Web-страница – это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске Вашей машины.

Запомните, что HTML не является языком программирования, он предназначен только для разметки документов. Т.е. по сути, создавая HTML страницу, вы просто редактируете текст при помощи тегов примерно так же, как и в обычном текстовом редакторе. Каждый тег имеет свое свойство, но все они заключаются между угловыми скобками "", например, , .

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

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

На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер Internet Explorer - как инструмент контроля за сделанным.

Теоретические сведения

Основные понятия

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

HTML-документом;

Web-документом;

Web-страницей.

Такие страницы, как правило, имеют формат НТМ или HTML.

Группа Web-страниц, принадлежащих одному автору или одному ИЭДВ телю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL - a д p е c в Интернете.

Фрейм (Frame ) - термин, имеющий два значения. Первое значение область документа со своими полосами прокрутки. Второе - 0ДНН0Ч ное изображение в анимационном графическом файле (кадр).

Апплет (Applet ) - программа, передаваемая на компьютер клиенте В виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script ) , или сценарий, - программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер lnternet Explorer в определенных ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.

CGI (Common Gateway Interface ) - общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Без таких программ невозможно создание интерактивных Web-страниц.

Браузер (Browser ) - программа для просмотра Web-страниц.

Элемент - конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов. Например:

Содержание элемента, данные, которые форматирует элемент

Тег (по-английски tag - метка, дескриптор, ярлык) - начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки < >, а конечный тег всегда снабжается косой чертой. Текст, не находящийся между такими скобками (< >), виден весь при просмотре в браузере. Например:

Содержание элемента, данные, которые

форматирует элемент

Этот текст будет расположен в отдельном абзаце

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

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

Этот текст будет выравнен по центру экрана

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

Обратите внимание:

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

Все атрибуты располагаются в начальном теге;

Для удобства работы начальный тег вы можете писать с прописной (заглавной) буквы (Р), а конечный - со строчной (маленькой) буквы (/р), хотя это и не обязательно;

Не для всех элементов требуется ставить конечный (закрывающий) тег;

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

Создать качественную web-страницу непросто, для этого нужны не только навыки дизайнера для красивого и стильного оформления, но и опыт программирования. Сложность и объем программ, требуемых для создания того или иного сайта, зависят от множества факторов, таких как структура, цель, функциональность, обеспечение надежности и система защиты сайта от информационных атак со стороны информации-«прилипалы» (спам, мусор) и вирусов.

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

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

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

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

Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматривать как «разметку», добавляемую в форматируемый документ. Однако для использования текстового процессора не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ автоматически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (вайсевег) (от английского What You See Is What You Get (воч ю си ис воч ю гат) - Что видите, то и получаете).

Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете использовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться демонстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe: www.adobe.com.

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

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

1. Macromedia Dreamweaver (макромедиа дримвиваф);

2. Allaire HomeSite (аллер хом сайт);

3. Microsoft FrontPage (майкрософт фонт пейдж).

Можно воспользоваться русской версией FrontPage Express из локализованного Internet Explorer - это сокращенный вариант FrontPage, но очень удобен для начала. На русском языке также известен web-редактор Visual Workshop (http://www.snkey.net/ download /products /index.html).

Современные сервисы в Интернете предлагают готовые конструкторы сайтов. Рассмотрим их на примере конструктора сайтов «Мой сайт» (www.narod.yandex.ru). С его помощью можно получить место под свой сайт (домашнюю страницу) и за 5 мин создать свой web-сайт с картинками, фотографиями и пр.

Процесс конструирования сайта включает в себя три этапа:

1. вход в конструктор сайта;

2. регистрация, назначение имени сайта;

3. конструирование сайта с использованием заготовок.

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

Помимо HTML и конструкторов сайтов можно пользоваться и другими средствами программирования web-страниц. Одним из средств программирования сайтов является CGI (си джи ай) (Common Gateway, комон гейтвай).

Принцип CGI прост и естественен: программа на стороне сервера принимает некие данные, обрабатывает их и выдает ответ в виде web-страницы. Это очень частое явление на сегодняшний день, и порой даже не подозреваешь, что имеешь дело не с обычной страницей, а с результатом работы CGI-скрипта (кода). Область использования CGI широка, а цели разнообразны. Язык программирования, на котором пишется скрипт, должен быть гибким и в то же время мощным, так как предстоит не только постоянная работа с файлами, но и с БД, ОС и web-сервером. Самыми подходящими языками для CGI-программирования являются Си (C++) и Perl. Последний наиболее часто используется для этих целей из-за своей простоты, надежности и широты возможностей.

Язык Си по праву считается универсальным и нашел свое место в среде CGI. Его применение естественно в родной стихии - Unix, на основе которой в большинстве случаев и строится web-узел.

Для CGI-программирования используется также язык C++, который подразумевает создание и уничтожение неких объектов, реализуемых через классы, - по сути пользовательских типов данных. Естественно создать, например, класс Guestbook или DataBaseEntry, который содержал бы необходимые переменные и функции. Стоит заметить, что почти все новые языки программирования (Java, JavaScript, Perl) содержат конструкции, схожие с конструкциями Си или же являющиеся их точными копиями. Поэтому рекомендуется сначала изучить именно этот фундаментальный язык.

Язык Perl уникален. Во-первых, в нем отсутствуют типы данных, что благоприятно воздействует на написание CGI-скриптов. Во- вторых, очень много конструкций взято из Си. Надо отметить, что в Perl часто используются регулярные выражения, похожие на те, что применяются в сценариях Unix Shell. Имеется удобный цикл foreach и красивые, по сути, модификаторы выражений. Perl располагает стандартной библиотекой, в которой есть функции поиска, работы с web-сервером, графикой и т.п. Из этого можно сделать вывод, что для программиста, знакомого с Unix, не составит труда изучить Perl. Для написания такой программы достаточно уметь работать с файлами из Perl и, немного, с переменными окружения web-сервера.

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

Вопросы для самоконтроля:

1. Что означает понятие HTML-документ?

2. Каковы преимущества этого вида документа?

3. Что означает понятие «тэг»?

4. Какие разновидности тэгов существуют?

5. Что входит в состав объектов управления тэгами?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Ю.П. Левчук, Е.П. Охинченко, А.Д. Сотников, Т.А. Фоменко ИНФОРМАТИКА Часть 2 ИНТЕРНЕТ-ТЕХНОЛОГИИ

1. Web-страница (документ HTML) представляет собой:

а) текстовый файл с расширением.txt или.doc;

б) текстовый файл с расширением.htm или.html;

в) двоичный файл с расширением.com или.exe;

г) графический файл с расширением.gif или.jpg.

2. Для просмотра Web-страниц в Интернете используются программы:

а) Microsoft Word или Word Pad;

б) Microsoft Access или Microsoft Works;

в) Internet Explorer или NetScape Navigator;

г) HTMLPad или Front Page.

3. Тег – это:

а) инструкция браузеру, указывающая способ отображения текста ;

б) текст, в котором используются спецсимволы;

в) указатель на другой файл или объект;

г) фрагмент программы, включённой в состав web-страницы.

4. Гипертекст – это:

а) текст очень большого размера

б) текст, в котором используется шрифт большого размера