Это моя личная домашняя страничка.

Урок 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>

 

Атрибуты - это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.

Коротко о главном:

Вид Web-страницы задаётся тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными и парными, для которых обязательно наличие открывающего и закрывающего тэга (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Весь HTML-документ помещается внутрь контейнера <HTML> </HTML> Заголовок Web-страницы заключается в контейнер <HEAD> </HEAD> Название Web-страницы содержится в контейнере <TITLE> </TITLE> Основное содержание страницы помещается в контейнер <BODY> </BODY>