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

Сабақтың оқу-әдістемелік жоспары

Учебно-методический план занятия

Пән / Предмет WEB-программирование и интернет-технологии

Тақырып / Тема Язык гипертекстовой разметки страниц HTML: общая структура документа

Сабақтың типі / Тип занятия Урок усвоения новых знаний

Сабақтың мақсаты

Цели занятия:

Оқыту / Учебная Познакомить учащихся с общей структурой документа HTML, базовыми тегами создания страницы

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

Тәрбиелеу / Воспитательная Формирование научного мировоззрения, привитие интереса к предмету.

Пәнаралық байланыс / Межпредметные связи Информатика, математика, русский язык, английский язык

Сабақтың жабдықтары (көрнекілік, үлестіру, дидактикалық материалдар) / Обеспечения занятий: (наглядные пособия, раздаточный материал, ТСО) интерактивная доска, презентация «1.1 Язык гипертекстовой разметки страниц HTML: общая структура документа, абзацы, цвета, ссылки»

Сабақтың барысы

Ход занятия

1. Ұйымдастыру кезеңі / Организационный момент Взаимное приветствие, определение отсутствующих, внешнего вида, состояния аудитории, организация внимания. Сообщение темы и цели урока.

2. Өткен тақырыпты тексеру және сұрау / Опрос и проверка пройденного материала -

3. Жаңа тақырыпты түсіндіру / Изучение нового материала

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

Сущность гипертекста

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

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

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

Гипертекст позволяет представить в явной форме сеть фрагментов или тезисов. Соответственно, благодаря структуризации значительно повышается эффективность процедур поиска определенной информации. Если обратиться к истории возникновения гипертекста, то общепринятой точкой отсчета является статья Ванневара Буша "As We May Think" опубликованная в 1945 году. В статье было представлено устройство машины Memex, хранящей на микрофильмах информацию (книги, корреспонденцию и т.п.). Для поиска необходимой информации предлагалось использование ассоциативных связей, что фактически является прообразом гипертекстовых систем.

После появления, разработанным Тимом Бернерсом - Ли протокола передачи данных HTTP, система адресации URL и языка HTML, понятие гипертекста стало неразрывно ассоциироваться с информационными технологиями в общем и глобальной паутиной – в частности.

Развитие стандартов HTML

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

HTML, в своем первоначальном виде, был основан на языке SGML – Standart Generalized Markup Language (стандартный обобщенный язык разметки).

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

Также отдельно от существующего текста выносился DTD - файл, определяющий тип документа, для гарантии его обработки.

В 1969 году был создан язык, удовлетворяющий описанным выше правилам – GML (Generalized Markup Language). После того, как в 1989 году язык был принят международной организацией по стандартизации (ISO) в качестве международного стандарта, к названию языка добавилась начальная литера S.

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

Европейский институт физики элементарных частиц (CERN) в 1991 году приступил к разработке первого текстового браузера, поддерживающего гипертекстовую разметку, т.е. способного отображать графику и поддерживающего переходы по ссылкам. Сотрудником института, ведущим данную работу был Тим Бернерс-Ли. В процессе разработки появился язык HTML, во многом схожий с SGML, за исключением структур, позволяющих отображать текст особенным образом (отступы, выделение и т.п.).

Чтобы не повторять многочисленные источники, приведем лишь пару ключевых дат в дальнейшей истории развития HTML: в 1993 году был создан первый браузер с графическим интерфейсом; в 1994 году был основан консорциум W3C.

Если же кратко пробежаться по датам, то получим следующее:

• 22 декабря 1995 – принят стандарт HTML 2.

• 1996 – консорциумом W3C принята спецификация CSS1.

• 14 января 1996 – принят стандарт HTML 3.2.

• 18 декабря 1997 – принят стандарт HTML 4.0.

• 24 декабря 1999 – принят стандарт HTML 4.01.

• 1999 – принята спецификация CSS2.

• 26 января 2000 – принят стандарт XHTML 1.0.

• 16 февраля 2007 – принят стандарт XHTML 1.1.

Уровни HTML

В 1994 году HTML был разбит на уровни. Было выделено 4 уровня:

• Уровень 0: включает в себя заголовки, ссылки, списки.

• Уровень 1: добавляются рисунки и элементы выделения текста.

• Уровень 2: добавляются формы, позволяющие пользователю вводить информацию.

• Уровень 3: добавляются таблицы.

В 2004 г., группа одинаково мыслящих разработчиков и исполнителей (включая представителей Opera, Mozilla, и немного позже, Apple) собрались и сформировали отколовшуюся группу по спецификации с названием WHATWG (http://www.whatwg.org/), с целью написать лучшую спецификацию разметки HTML, которая сможет помочь созданию нового поколения приложений Web, не разрушая – что было критически важно – обратной совместимости.

В результате появилась спецификация Web Applications 1.0 (http://www.whatwg.org/specs/web-apps/2005-09-01/), которая документирует существующие совместимые поведение и свойства браузеров, а также новые свойства стека Web, такие как API и новые правила синтаксического анализа DOM. После множества дискуссий между членами консорциума W3C 7 марта 2007 г. работа над HTML была возобновлена новой Рабочей группой HTML в виде открытого процесса участия. За несколько первых дней к процессу присоединились сотни участников для продолжения работы над следующей версией HTML. Одним из первых решений Рабочей группы HTML было принятие спецификации Web Applications 1.0, которую назвали HTML5.

Обзор HTML 5

Мы не будем детально рассматривать HTML 5, поскольку просто не хочется повторять множество доступных Интернет – источников, укажем лишь основные моменты:

• HTML 5 – это, скорее, новая платформа для создания веб–приложений, нежели стандарт продолжающий традиции предшественников.

• HTML 5 регламентирует взаимодействие с JavaScript посредством объектной модели документа (мы еще вернемся к этому в рамках данного курса).

• HTML 5 поддерживает все элементы HTML 4.

Ключевые термины и определения

Гипертекст – текст, содержащий ссылки на другие фрагменты.

SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки документов. Является наследником разработанного в 1969 году в IBM языка GML (Generalized Markup Language),

HTTP - HyperText Transfer Prоtocоl - "протокол передачи гипертекста") - протокол прикладного уровня передачи данных (изначально - в виде гипертекстовых документов).

HTML – гипертекстовый язык разметки, созданный Тимом Бернерсом-Ли.

Консорциум W3C (World Wide Web Consortium, W3C) - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины, возглавляемая Тимом Джон Бернерс-Ли.

Язык HTML и его теги

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

НА ЗАМЕТКУ Вообще, для создания Web-страниц существует множество специальных программ - Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, - как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML. Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.

Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.

1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.

2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt. Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат. Мы можем использовать стандартно поставляемый в составе Windows Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ. Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).

В листинге мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки - символы . Что это такое?

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

Тег помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег устанавливает конец "охватываемого" фрагмента и называется закрывающим.

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

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

создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)

Парный тег выводит свое содержимое полужирным шрифтом. Как мы видим, тег вложен внутрь содержимого тега

. Это значит, что содержимое тега будет отображаться как часть абзаца (тега

). Давайте ради интереса выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег :

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