Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц)




Скачать 112.95 Kb.
PDF просмотр
НазваниеЛабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц)
Дата конвертации12.10.2012
Размер112.95 Kb.
ТипЛабораторная работа
(с)2002-2008 И.Б.Государев
Лабораторная работа [Веб-технологии] 
Введение в разметку (веб-страниц)
версия 10
1. Разметка и шаблонная структура веб-
страницы

Для создания веб-страницы  – гипертекстового документа, который может быть размещен в сети 
Интернет, – в простейшем случае используются два основных способа – кодинг на языке разметки (HTML 
и  др.)  и верстка в визуальном   редакторе. Всякий редактор  в конечном  итоге  тоже работает  с  языком 
разметки, но этот уровень часто скрыт от пользователя. Результат, получаемый с помощью редактора, 
более   нагляден,   но   обычно   гораздо   менее   корректен   и   компактен,   чем   результат   "ручного" 
программирования.
Аббревиатура  HTML  означает  HyperText  Markup  Language,   т.е.  Язык  Разметки  ГипертТекста. 
Напомним,   что   под   гипертекстовым   документом   мы   понимаем   документ,   включающий   ссылки   на 
фрагменты   внутри   себя   или   на   другие   документы.   Рассмотрим   понятие   разметки.   Для   этого   вначале 
рассмотрим два примера.
Пример 1. Производится передача текста посимвольно. Набор символов ограничен, а передавать 
необходимо все новые и новые сведения. Как передать математическое выражение a2+2ab+b2, учитывая, 
что   символ   "2"   в   нем   используется   в   разных   смыслах   (как   множитель   и   как   показатель   степени)? 
Визуально символ "2" в смысле показателя степени размечен с помощью форматирования (надстрочный 
знак). Но в наборе символов (кодировке) только один символ “двойка”, а средств форматирования нет.
Пример   2.   Гипертекст   визуально  –   это   текст   с   выделенными   фрагментами   (гиперссылками). 
Визуальная разметка гиперссылок – синий цвет, подчеркивание и форма указателя мыши (обычно). Каким 
образом можно выделить гиперссылку в остальном тексте, пользуясь только текстом?
Идея решения проблемы в обоих случаях сводится к фиксации набора команд, которые состоят из 
тех   же   символов,   что   и   исходный   текст,   но   строятся   по   определенным   правилам.  Разметка  –   это 
внесение в исходный текст таких команд. В языке разметки HTML правилом построения команд является 
заключение их в "треугольные скобки", или знаки "меньше" и "больше" (ограничители). Например,
 – команда начала разметки надстрочного текста;
 – команда начала разметки гиперссылки;

 – команда начала разметки абзаца.
Начатая разметка должна завершиться. Для это служат похожие команды:
 – команда завершения разметки надстрочного текста;
 – команда завершения разметки гиперссылки;

 – команда завершения разметки абзаца.
Подытожим:
Выражение a2+2ab+b2 в языке HTML будет размечено так: a2+2ab+b2
«Команды» начала и завершения разметки называются  тегами. Мы видим, что закрывающий тег 
отличается   от   открывающего   тем,   что   в   его   начале   два   ограничителя   вместо   одного   –   это   левая 
треугольная скобка и косая черта. Символы, находящиеся между ограничителями, составляют  имя тега. 
Таким образом, у тегов  и  одно и то же имя, они одноименные. Открывающий тег, одноименный 
закрывающий тег, и все, что находится между ними, составляют элемент. Например, 
2 – элемент.
Одно из самых важных свойств разметки заключается в том, что одни элементы могут содержать 
другие   элементы.   Такая   ситуация   называется  вложением,   и   особенно   часто   встречается   в 
математических выражениях. Из двух выражений:
 (a+[b-c]+d) 
и 
 (a+[b-c)+d]
правильным естественно назвать первое (почему?)
Совершенно аналогично, из следующих двух разметок правильной будет только одна:

a2
 
и 

a2

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

Строка

PRINT “Строка”
Writeln(‘Строка’);


PRINT
Writeln;
Мы видим, что теговая разметка обладает особым синтаксисом по сравнению с обычными языками 
программирования. По сути своей теги – это команды, который выполняет интерпретатор (веб-браузер), 
но наличие вложенности придает им своеобразие. Синтаксис тегов задается формальной грамматикой, 
которая описывается в DTD – стандарте языка, определении типа документа.


(с)2002-2008 И.Б.Государев
Главное назначение разметки – символьная передача смысла. При создании веб-страницы обычно 
воспроизводят ту смысловую (логическую) структуру, которая встречается в обычных документах. Это, как 
правило, система заголовков (среди которых один основной) и абзацы. Рассмотрим простейшую структуру 
элементов, которая повторяется на веб-страницах. 


Заголовок


Заголовок



Абзац


Похожие:

Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconWww (англ. World Wide Web, «всемирная паутина») — совокупность веб-сайтов, связанных между собой ссылками. Самая распространенная служба (сервис) сети Интернет. Статические и динамические веб-страницы
Интернет. Описаны основы создания веб-сайтов, порядок взаимодействия авторов сайта при сайтостроительстве и требования к исходным...
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconРайонный методический ресурсно-информационный центр п. Ивня
Начинающий веб-дизайнер должен четко понимать, что такое веб-узел (веб-сайт), веб-страница и иметь представление о средствах со­здания...
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconДипломная работа 
Объект   исследования  –     автоматическое     извлечение   шаблонов   веб-страниц   и   их 
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconЛекция 1 Введение в веб-технологии Лекция 2 Веб-дизайн и юзабилити.  Лекция 3 html и css.   Лекция 4 Язык php. 
Чтобы встроить код php в xhtml, php должен задаваться обособленно, с  помощью начального и конечного тегов php. Теги php говорят...
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconКлючевые факторы попадания веб-студии в  Tор
Ежегодно Экспертная группа «Тэглайн» поводит исследование российского рынка веб-разработки и 
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) icon Search Engine Watch  forums. Уча ствовал в национальных конференциях по созданию веб-сообществ,  отношений с онлайновыми сми и прочим веб-маркетинговым темам. 
Одно из проявлений нейропластичности мозга – формирование связей между нейронами, 
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconМетодические указания для создания проекта Веб-сайт по предмету основы веб-дизайна
Подберите источники информации (прочитайте тексты, подберите графические иллюстрации). Предпочтительнее использование ваших авторских...
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconКонкурс веб-страниц и сайтов 27
Крупные сайты, поддерживаемые большим коллективом авторов, с постоянным обновлением информации. Предоставляют большой спектр информации...
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconО технологии создания интерактивных   информационных систем
Это  один  из  наиболее  распространенных  языков  в  веб-разработке,  который  был 
Лабораторная работа [Веб-технологии]  Введение в разметку (веб-страниц) iconВизитная карточка проекта «Учим и учимся с Веб 0» 
Проект  разработан  в  рамках  дисциплины  «Информационные  технологии  в  образовании»  для 
Разместите кнопку на своём сайте:
TopReferat


База данных защищена авторским правом ©topreferat.znate.ru 2012
обратиться к администрации
ТопРеферат
Главная страница