Изучение основ стандартного языка разметки НТМL для создания статических Web–страниц
Длительность 4 часа
Краткие теоретические сведения.
Web–страницы пишутся с использованием языка НТМL и обычно передаются провайдеру услуг Интернет ISP (Internet Service Provider) для размещения на Web–сервере. Для получения страниц с Web–сервера используется протокол HTTP (Hyper Text Transfer Protocol). Адрес Web–страницы называется универсальным локатором ресурсов URL (Universal Resource Locator), например, http://www.mirea.ru. Web–страницы загружаются в компьютер и просматриваются на экране с помощью специальных программ, называемых браузерами, таких, как Internet Explorer, Google Chrome и т.п. Каждый браузер имеет свой набор возможностей для просмотра Web–страниц.
При создании Web–страниц используют различные инструментальные средства. Обычно статическая часть Web–страницы создается текстовым и графическим редакторами, обеспечивающими сохранение данных в формате HTML, а динамическая часть программируется на языках VBScript и JavaScript или с использованием специальных средств языков программирования таких, как Delphi, Java, Visual C++.
Язык разметки гипертекста HTML определяет структуру и динамику Web-страницы с помощью специальных символов, называемых тэгами. Тэг - это символ или ключевое слово, взятое в угловые скобки. Тэги, как правило, встречаются парами: начальный и конечный. Конечный тэг отличается от начального только наличием косой черты перед символом или словом. За символом или словом часто идет список параметров, в котором параметры отделяются друг от друга пробелами. Часто параметры имеют значения, задаваемые с помощью знака равенства. Любая Web–страница должна начинаться тэгом <html> и заканчиваются тэгом </html>. Программист может добавлять для себя некоторые примечания, но не показывать их пользователю. Достигается это следующим образом:
<!-- Текст комментария из одной или нескольких строк >
Комментарий можно включить до начала страницы, в любое место
страницы или в конец страницы.
Тег <HEAD>
Web–страница обычно начинается с заголовка, который устанавливается тэгами <head>и </head>. Заголовок включает служебную информацию и как правило, содержит заглавие Web–страницы выводимые тэгами <title> и </title>. Заглавие появляется в строке заголовка Web–браузера. Этот текст используется также поисковыми системами Интернет.
Тег <BODY>
Основное содержание страницы называется телом, и вводится тэгами <body> и </body>. В тэге <body> можно использовать ряд ключевых строк, называемых атрибутами. Основными атрибутами тэга <body> являются: align, alink, background, bgcolor, bgproperties, bottommagin, class, id, lang, language, leftmagin, link, rightmagin, scroll, style, text, onblur, onfocus, onload, onload,
Vlink.
background — позволяет задать в качестве фона html-страницы картинку. Допустим есть картинка picture.jpg, расположенная по адресу http://3w.fcyb.mirea.ru/images/stories/mirea.jpg. Для того, чтобы сделать её фоном html-страницы нужно записать так:
Обычно в качестве фона используется небольшой и простой рисунок, так называемую текстуру, который многократно выводится на экран, заполняя всё окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро.
text — устанавливает цвет текста html-документа. Например, сделаем текст зеленым:
<BODY text="#008000"></BODY>
Следующие атрибуты относятся к представлению вида ссылок на странице:
link — цвет ещё неиспользованной (непросмотренной) ссылки (по умолчанию синий).
vlink — цвет уже использованной (просмотренной) ссылки.
alink — цвет гиперссылок при наведении на них курсора мыши.
Допустим, нам нужно, чтобы цвет ещё неиспользованных ссылок был красным (#FF0000), а уже нажатых — синим (#0000FF). Сделать это можно так:
<BODY link="#FF0000" vlink="#0000FF"></BODY>
Атрибутов в теге (не только BODY, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по умолчанию. В следующем примере мы создадим html-страницу с черным фоном, зеленым текстом, неиспользованные ссылки - красные, а посещённые — синие. Весь этот ужас можно создать так:
Наберите этот html-код. Между тегами <BODY>и </BODY> вставьте любой текст, сохраните этот файл под любым именем (латинскими буквами или цифрами), но обязательно с расширением html (например, myScript.html). А затем откройте его в браузере.
Цвет устанавливается путем указания значения красной, зеленой и синей составляющих в шестнадцатиричном формате либо с помощью цветовой константы HTML. Здесь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой Web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами.
Помимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех).
Таким образом, Web–страница имеет следующую структуру:
