Язык – великий и могучий

Некоторые особенности языков разметки

Термин «язык разметки» (markup language) почти в два с лишним раза моложе термина «язык программирования». Языки разметки (ЯР) появились как одно из средств решения задачи организации данных всего лишь около 25 лет назад. Идея оказалась весьма удачной.

Изначально разметка понималась как пространственное размещение данных, причём в пространстве двумерном (экран, лист бумаги). Позднее добавились варианты трехмерной разметки с последующим выполнением проекций на плоскость и одномерной разметки в пространстве оперативной памяти (результат работы XML-парсера).
Понятие «язык разметки» вполне применимо к некоторым языкам, существовавшим и до его появления. Один из простейших ЯР, с которым все встречались, — это текстовый формат (к ЯР можно отнести также TeX, RTF, PDF, XML и его клоны и многие другие языки). Фраза на нём состоит из обычных символов (буквы, цифры, знаки препинания) и команд перевода строки (один или два специальных символа).
В ЯР, как и в языках программирования, существуют две основные составляющие — данные и слова языка. Слова размещаются прямо в потоке данных — ЯР играют по отношению к данным служебную роль. В языках программирования данные имеют второстепенное значение, обрастают посторонними языковыми (синтаксическими) конструкциями, часто записываются в специальных громоздких кодировках и иногда распределяются, вопреки смысловым и функциональным зависимостям, по всему тексту программы, становясь константами и атрибутами команд.
Пример 1 – код на С++
int sum = 0;

int n = 100;

for(int i = 0; i < n; i++) sum += i;
Пример 2 – код на HTML
Заголовок статьи

Здесь ещё много разного и интересного текста, который мы хотим отформатировать.

Язык (программирования или разметки) не имеет практического смысла без интерпретатора этого языка. Даже сами машинные коды — это интерпретируемый язык, интерпретатором которого является процессор. Любой компилируемый язык, вроде C++ и Java, также естественным образом представляется интерпретируемым, если компилятор рассматривать как часть интерпретатора:

Рис. 1. Интерпретатор и Браузер
Интерпретатор ЯР часто называют браузером (от английского browse – "просматривать, пролистывать"). Например, Windows-приложение «Блокнот» — один из браузеров текстового формата, имеющий дополнительные функции редактирования. Работа браузера обычно состоит из 4 основных частей — чтение фразы на ЯР, её разбор (parsing), формирование пространственного представления (rendering) и вывод на различные устройства. Интерпретаторы языка XML и его диалектов обычно выполняют только первые два этапа работы браузера и называются парсерами.
В простейшем случае формирование пространственного представления сводится к интерпретации слов языка, размещённых в потоке данных. Слова ЯР иногда, по аналогии с языками программирования, называют командами, но у ЯР есть существенное отличие — слова не имеют императивного характера, не требуют в обязательном порядке тех или иных конкретных изменений содержимого памяти. На пользовательском уровне (если полностью отвлечься от аспектов реализации) результат работы интерпретатора ЯР не должен зависеть от того, в какой последовательности он будет

Рис. 2. Ассоциативность ЯР
обрабатывать слова ЯР (см. рис. 2). Это можно назвать свойством ассоциативности: (A+B)+C=A+(B+C). Оно в той или иной мере проявляется практически при любой реализации ЯР.

Мы займёмся знакомством с языком HTML – HyperText Markup Language, языком разметки гипертекста.

Естественные языки в HTML, кодировки

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

1. 
   Вы зашли на сайт на китайском языке.
   

Выход: быстрее уходите от туда!!! Бегом! =) Их больше одного миллиарда!

2. 
   Кто-то решил над вами пошутить и дал вам неправильную ссылку на плохую страницу.
   

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

3. 
   Вы зашли по правильной ссылке в правильное место. Половина сайта отображается коррекно, а половина явно что-то содержит, только вы не понимаете что. Часто такое бывает тогда, когда проверяешь почту, например, на www.mail.ru.
   

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

Как написать поздравление любимой бабушке?

Хотите порадовать себя и близких? Хороший вариант – сделать HTML-открытку. Это быстро и просто. Давайте приступим. Для начала определимся с темой. Допустим, у вашей любимой бабушки день рождения.

Рис. 3. Информация для пользователя.
_____________________________________________________________________________

1.html

Бабушка, с днем рождения! Эта роза для тебя!

_____________________________________________________________________________

Пример 3. Информация для браузера.
Давайте разберёмся в HTML-коде странички с открыткой. Во-первых, сразу же бросается в глаза обилие конструкций вида <слово>. Они называются тегами. Теги бывают парными и непарными. Например, тег , а вот тегам
и пара не нужна.
Любой HTML-документ содержит три основных обязательных раздела: HTML, HEAD и BODY (абсолютно не важно, какими буквами пишутся теги, большими или маленькими!)

Раздел HEAD выполняет функцию рабочего заголовка HTML-документа, там находится важная служебная информация. Но на страничке она никак не отображается, кроме, разве что, тега - заголовка документа. Также важными являются теги и , в которых содержится описание стилевого шаблона документа и код исполняемых сценариев соответственно.

В разделе BODY располагается содержательная часть документа, которая выводится браузером на экран монитора. Тут ассортимент тегов гораздо больше. Чтобы не запутаться, продолжим читать наш код строго сверху вниз.
- позволяет вставить рисунок; непарный тег. Может обладать различными параметрами, большинство из которых необязательны. Необходим только один: src. Его значение – "1.jpg" – имя файла, содержащего желаемый рисунок. Параметр alt – это подсказка, которая всплывёт при наведении курсора мышки на картинку (на случай, если вы сами не можете понять, что это такое), height и width – высота и ширина картинки в пикселах, т.е. в экранных точках. Числа здесь можно писать и в кавычках, и без – браузер скорее всего вас поймёт!

означает просто перенос строки.
- это выделение текста жирным, аналогично тегу . К этому же семейству относятся теги , , и многие, многие другие (поэкспериментируйте с ними обязательно!) Все их можно найти в любом справочнике по HTML (например, wdh.suncloud.ru). Эти теги, конечно же, парные, ведь надо же браузеру понять, где конец выделяемого фрагмента.
- фоновый звук для документа, тоже один обязательный параметр. Очень похоже на тег , не находите? ;)
А ещё на страничках HTML можно рисовать таблицы и организовывать списки. Но это не представляет большой эстетической ценности, поэтому в учебник включено не будет. Помните главное, для чего нужен Интернет: в нём можно найти всё, что вас интересует, особенно касательно самого Интернета! Информация о HTML из первых рук –спецификация языка HTML - находится на www.w3.org
Надо сказать, что большое отличие языков разметки от языков программирования – это то, что ЯР традиционно более толерантны, иначе говоря, терпимы. Особенно это относится к языку HTML. Вы сможете иногда позволить себе забыть закрывающий тег, не поставить кавычки и даже - о ужас! - не написать в самом начале документа – браузер вас поймёт и простит, и отобразит всё правильно. Но его терпение, конечно же, тоже имеет предел...

Сайт, структура сайта, внутренние и внешние ссылки

Читая книги, мы часто видим, как автор, раскрываю ту или иную тему, ссылается на другую книгу или просто на предыдущую / следующую главу своего же труда. Если информация правда необходима, мы вздыхаем и идём в библиотеку за этой самой другой книгой, читаем её и, возможно, находим ещё больше ссылок! Безрадостная перспектива, не так ли? Но у нас есть Интернет – а значит, можно найти практически всё, не выходя из дома: просто зайдите на www.yandex.ru, к примеру! Однако и такой поиск быстро утомит любого, ведь в Интернете размещены миллионы электронных документов, и найти тот самый, о котором упомянул автор, не всегда легко. Поэтому ссылки на веб-страницах делают не простыми, а волшебными, точнее гипертекстовыми (или просто гиперссылками): щёлкнул по ней мышкой – и сразу же оказался на нужном документе!

Вообще говоря, среди создателей веб-страниц считается хорошим тоном делать гиперссылки на сайты всех важных объектов и людей, которых они на своей страничке упоминают. Это и дань уважения этим объектам/людям, и пользователям удобно (не они ищут, а автор странички, один раз для всех). Таким образом, каждый документ содержит гиперссылки на другие документы, все они связаны между собой. Вот тут-то и появляется Паутина (по-английски Web)!
Надо сказать, что гиперссылки делятся на два типа: внешние и внутренние. Внешние ведут на другие веб-страницы, а внутренние позволяют перемещаться в пределах одного документа.
Как же создать гиперссылку? Для этого есть специальный html-тег :
Пример 4

www.usu.ru"> Уральский Государственный Университет
В браузере слова "Уральский Государственный Университет" будут по умолчанию выделены синим цветом и подчёрнуты, а если кликните – сразу же окажетесь на сайте УрГУ! То есть эта ссылка является внешней. ("По умолчанию" означает "без применения дополнительных настроек". Не удивляйтесь, если попадёте на сайт, где нет вообще ни одной "синей" ссылки – это не означает, что ссылок там вообще нет.)
Для чего нужны внутренние ссылки? Только для удобства. Бывают html-документы очень большого размера, и чтобы попасть в какое-то конкретное его место, вам придётся долго-долго (медленно – чтоб не пропустить!) прокручивать его вниз... А можно просто кликнуть на ссылке – и документ сам прокрутится ровно столько, сколько нужно.
Внутренние ссылки оформляются так:
Пример 5

Это можно прочитать в разделе "Профессионалам"
Тогда при клике на слово "Профессионалам" (тоже синенькое!) вы окажетесь в том месте страницы, где будет написано (в исходном html-коде, вам не видно!)
Пример 6


Главное, что значение атрибута name в второй строке совпадает со значением атрибута href в первой строке, только без диеза (#).

Анатомия сайта

Внимание! Внимание! Сейчас будет представление того, ради чего мы собрались писать эту главу…

В поисках типичного сайта мы отправились по типичному адресу – www.sight.org. Кстати, в Интернете вообще все интуитивно понятно, нужен сайт – пишем название и с большой вероятностью туда попадаем. А если кто-нибудь у нас спрашивает адрес очередного сайта – можно смело отвечать: я не помню, помню только первые три буквы – WWW. А дальше одно послание в www.yandex.ru и мы свободны =) Но об этом отдельная история.

Рис. 4. Главная страница
Вернемся к строению сайта. Если бы это был учебник биологии, то на месте картинки 2 находился бы скелет человека, даже наверно скелет его черепа.
Итак, подобно голове у человека, у сайта есть главная страничка, куда мы обычно попадаем, набрав адрес вида www.xxx.yyy в строке браузера. Что же мы наблюдаем на ней?
1. Название.

2. Строка поиска. Каждый приличный сайт имеет строку поиска. Так очень облегчается навигация по всему содержимому сайта.

3. Меню. Очень удобно и простое в использовании. С помощью него мы попадаем на разные разделы сайта. Содержит несколько внутренних ссылок, а иногда и внешние.

4. Меню с картинками. Необязательный элемент. Но визуально очень приятный.

5. Права на использования. Признак хорошего тона, да и вообще очень коммерческая вещь – написать, кому же принадлежат права на сайт. Так что когда напишете свой шедевр – не забудьте подписать ))
Итак, если вы увидели что-то подобное у себя в браузере, то знайте – вы на сайте!
А теперь немного "строгих" определений.
Русское слово "сайт" пришло к нам из английского языка, как и вся компьютерная терминология. Английское site означает "место, местоположение". Не путайте со словом sight – "зрение, осмотр, вид" (читаются-то они одинаково). И "осмотр достопримечательностей" переводится как sightseeing.
В мире Интернета сайтом называют набор гипертекстовых документов, или веб-страниц, который, как правило, размещён на одном сервере, содержит 80% внутренних ссылок и только 20% - внешних и имеет "доминирующую древовидную структуру". Последнее требование представляется вам особенно загадочным? Тогда смотрите:

Вот дерево, плодово-ягодное: А это древо, генеологическое:

Все части плодово-ягодного дерева вы и сами назовёте. У генеалогического древа, в котором представлена только мужская линия, тоже есть корень (Дед Василий), листья (Ванька, Саша, Я, мой брат Дима, Петенька), ветви... На самом деле, объектов, имеющих подобное строение, очень много, и эта структура так и называется: дерево (также её называют часто иерархической) .У каждого элемента дерева (узла) может быть только один родитель и несколько детей. Элемент, у которого нет детей, называется листом, а у которого нет родителя – корнем, или корневым элементом. Существует ровно один путь от корня до любого элемента дерева. Элемент "Дед Василий" – предок элемента "Саша", а "Саша" и "Петенька" – потомки "Деда Василия".
Один из примеров дерева в компьютерном мире – файловая система: есть корневой каталог (например, диск C:), в него вложены ещё несколько папок, в них – другие файлы и папки и т.д. А это оглавление книги:
Оглавление

Введение…………………………….............1

Глава1. Яблоки...............................................2

1.1 Красные яблоки............................2

1.2 Зеленые яблоки.............................4

Глава 2. Груши................................................6

2.1 Желтые груши...............................7

2.2 Зеленые груши.............................10

2.3 Красные груши............................13

Заключение....................................................15

Предметный указатель..................................16
Похоже оно на дерево? (В роли корня здесь слово "Оглавление"! ;)
Ссылки на сайте устроены подобным образом. Есть главная страница, текста там обычно немного. Основное её наполнение - ссылки на разделы сайта, картинки-иллюстрации этих разделов и небольшие анонсы. Зайдя по одной из ссылок в раздел "А", вы, скорее всего, увидите там ссылки на подразделы, подтемы и конкретные статьи или документы (это дети раздела "А"). И обязательно – возможность вернуться на главную страницу (раздел "А" помнит своего родителя). Вот откуда берутся слова "древовидная структура". А "доминирующая" – значит, не совсем строгая, т.к. разделы не обязательно имеют ссылки только на своих детей и своего родителя, но могут также быть связаны между собой, с чужими детьми и т.д.

WAP – новая технология изготовления шпаргалок?

Из сообщения сайта www.sngnews.ru
Вступительные экзамены. 2006 год. Узбекистан.

Первого августа с 9.30 до 12 часов утра у большинства узбекистанских абонентов операторов мобильной связи были отключены услуги SMS, MMS, GPRS и WAP. Власти всерьез опасаются, что нынешние абитуриент “В яндексе найдут все”. Опасения вполне оправданы.С помощью мобильного связи электронная почта наравне с многотонными запасами энциклопедических знаний оказались у нас в карманах.

WAP (англ. Wireless Application Protocol) — «протокол беспроводного доступа» — это средство получения доступа к ресурсам интернет посредством только мобильного телефона, не прибегая к помощи компьютера и/или модема. По сути это технический стандарт, описывающий способ, с помощью которого информация из интернет передается на дисплей мобильного телефона.
Теоретически, если бы экран мобильного телефона смог отобразить то многообразие информации, что и дисплей компьютера, то WAP ничем не отличался бы от отображения обычных WEB-страниц. Но так как разрешение экрана дисплея мобильного телефона невелико, отображение WAP-сайтов отличается недостаточной графикой и анимацией, а объем информации сведен к необходимому минимуму.

Современный мобильный телефон, как правило, имеет WAP-браузер.

Вот пример сайтов, на которые вы можете попасть с мобильных устройств:

wap.nevasport.ru

wap.rbc.ru

wap.e1.ru

wap.lenta.ru

Упражнение 2. Создайте открытку человеку, который не ожидает ее от вас получить. Подберите приятную музыку и красочную картинку, напишите подходящий текст.

Сделайте так, чтобы человек эту открытку увидел. Порадуйтесь! =)

Упражнение 3. ”Хождение по ссылкам”. Уйдите по ссылкам с сайта, например www.usu.ru, так далеко, как только можете. Посчитайте количество разных сайтов, которые вы посетили. Как вы думаете, когда –нибудь эта цепочка прервется? Когда вы сможете попасть обратно на сайт, с которого вы начинали? Кстати, для этого занятия (хождения по ссылкам в Интернете) придумали название – serfing...
Упражнение 4. Настройте на своем сотовом телефоне WAP. Зайдите на те сайты, на которые вы обычно заходите со своего компьютера. На сколько они отличаются от привычных? Какая версия вам больше нравится – полная или wap-версия?

Упражнение 5. Найдите примеры тегов HTML, которые выполняют одни и те же функции.
Упражнение 6. Какой тег вы бы добавили в HTML? Проверьте, что его ещё не существует.
Подсказка: зайдите на www.w3.org.

жүктеу/скачать 0.54 Mb.

Достарыңызбен бөлісу: