Урок 1. Общие понятия.
Зачем нужен язык разметки?
Когда вы создаете обычный документ в программе текстового процессора, вы легко можете выполнять форматирование документа, например, для символов задать курсивный или полужирный шрифт. То, что вы делаете с документом на экране монитора, в том же виде переносится на бумагу при распечатке на принтере. Это возможно благодаря графическому интерфейсу пользователя (GUI), который поддерживает технологию точного отображения WYSIWIG (сокращение от «What You See Is What You Get» — что видите, то и получаете).
В случае Web-страниц пользователь имеет дело не с бумажными, а с электронными документами, полученными через Internet. Принцип отображения документа средствами форматирования родительского приложения здесь неприемлем. Слишком много приложений или всевозможных конверторов пользователю пришлось бы иметь на своем компьютере, чтобы эффективно работать с множеством возможных форматов документов.
Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста HTML (HyperText Markup Language). Этот язык был создан более 15 лет назад как стандарт оформления документов и был принят подавляющим большинством пользователей Internet, а главное, — всеми производителями программного обеспечения и оборудования для Web. Документы, размеченные согласно HTML, могут читаться на любом компьютере, на котором установлена всего лишь одна программа просмотра таких документов — браузер.
Благодаря языку разметки HTML клиент Web может на экране своего компьютера просмотреть документ в том виде, в каком его задумал разработчик: с определенными размерами шрифта и разбивкой на абзацы, с определенным расположением рисунков, гиперссылок и проч. Текстовой документ, составленный на HTML, имеет размер в байтах в несколько раз меньший, чем размер аналогичного документа, подготовленного в текстовом процессоре (например, Word).
|
|
Разметка документа — это описание различных фрагментов документа и их взаимного расположения. Выполняется разметка с помощью команд языка HTML — тегов.
В языке HTML имеется множество тегов, среди которых — теги создания заголовка документа, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, вставки графических элементов и т.д. В итоге Web-страница, кроме текста и ссылок, может содержать графику, звуки, видео, то есть иметь такой вид, который вы и видите на экране компьютера.
Получить представление о том, как выглядит код HTML, вы сможете, если откроете в браузере любую Web-страницу и перейдете к представлению HTML. При этом вы можете видеть, как создана та или иная страница — это вам пригодится при разработке своих документов
Об истории HTML
История языков разметки уходит в 60-е годы 20 в., когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language — общий язык разметки). Следующий этап развития языков разметки связан с именами ученых-физиков, сотрудников CERN в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.
|
|
В основу разрабатываемого языка Бернерс-Ли положил язык GML и приемы работы с гипертекстом, с чем и связано название созданного им языка — HTML. Новый язык использовал основные конструкции GML для описания документов и гипертекстовых ссылок.
Возможность применения гипертекста была предсказана Ваневаром Бушем в 1945 году, а термин «гипертекст» впервые был введен Тедом Нельсоном в 60-х годах, то есть задолго до появления Internet.
Понятие «гипертекст » обозначает электронный документ, который содержит в себе ссылки на другие документы.
Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения World Wide Web, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Trasport Protocol — протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере.
Браузеры.
Чтобы отобразить на экране компьютера HTML-документы в том виде, как они задумывались разработчиками, необходимо иметь специальную программу, называемую «браузер». (От английского слова browse, которое переводится как «пастись, ощипывать молодые побеги, заниматься беспорядочным чтением»). Браузер Internet Explorer входит в виде интегрированного модуля в Windows.
|
|
HTML-файлы.
Web-страница, загружаемая в браузер, представляет собой HTML-файл. Это текстовой файл с расширением.htm,.html или.htmll. Файлы.htm создаются для обработки в операционной системе DOS (где принято расширения обозначать тремя буквами). Для работы в Windows допустимо сохранять HTML-файлы с расширениями.htm и.html, причем более предпочтительным является использование расширения.html.
Для просмотра HTML-кода страницы в браузере Internet Explorer можно выполнить любое из следующих действий:
· щелкните правой кнопкой мыши в окне документа и в появившемся контекстном меню выберите команду Просмотр в виде HTML;
· выберите команду меню Вид — в виде HTML.
После этого на экране откроется окно приложения Блокнот с HTML-кодом просматриваемой вами страницы.
Если вы работаете в браузере Netscape, то просмотреть HTML-код загруженного документа вы сможете с помощью команды View — Page source или нажатия клавиш Ctrl+U.
Редакторы HTML-файлов.
Так как HTML-документ представляет собой текстовый файл, для его создания и редактирования можно использовать любой текстовый редактор, например, Блокнот. Существуют также более серьезные программы для подготовки Web-страниц. Их можно разделить на два типа:
· Редакторы HTML-текстов, которые автоматизируют набор кода. Наиболее известные из них это HomeSite, HotDog.
· Визуальные редакторы HTML, в которых пользователь имеет дело не с кодом, а с графическими образами элементов HTML. К ним относятся редакторы Microsoft Front Page, Macromedia Dreamveawer.
Коротко о главном:
Урок 2. Общая структура HTML-документа.
Разметка HTML-документов выполняется с помощью тегов, которые записываются с соблюдением определенных правил. Теговая модель предполагает разбиение документа на отдельные фрагменты, которые заключаются в теги или начинаются тегом.
<HTML>
<HEAD>
<TITLE>Проба 1</TITLE>
</HEAD>
<BODY>
<H1>Моя первая страничка</H1>
<HR>
<HR>
Привет! Меня зовут....!
Это моя личная домашняя страничка.
</BODY>
</HTML>
Web- страница разделяется на две логические части: заголовок и содержание (тело).
Заголовок заключается между тегами <HEAD> и </HEAD>. В заголовке HTML - документа содержится название странички, а также справочная информация (например, тип кодировки), которые появятся в рамке окна программы просмотра.
Название странички располагается между тегами <TITLE> и </TITLE>. Например, <ТIТLЕ>Моя страничка</ТIТLЕ>
Содержание – это то, что будет выводиться на экран программой просмотра - текст, картинки, видеофрагменты. Содержание заключается между двумя тегами <BODY> и </BODY>.
Теги бывают парные и непарные, открывающие и закрывающие. Отличительным признаком закрывающего тега является символ /.
Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тэгами <В> и </В>.
Часто теги, помимо имени, содержат дополнительные элементы, которые называются атрибутами, например: <BODY bgcolor=green text=red>
Атрибуты - это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.
Коротко о главном: