Как создаются Web-страницы
А теперь поговорим о том, как создаются Web-страницы.
Для этого используется особый язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио – и видеоклипов и прочих так называемых внедренных объектов.
Кажется, я вас напугал. Но, несмотря на кажущуюся сложность, Web-страницы не представляют собой ничего сложного. Это обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе. И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом…
Да что тут говорить! Лучше все показать на примере. Взгляните на рис. 1.1. Это простейшая Web-страничка, сделанная для примера в Блокноте.
Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код, проверьте его на ошибки и сохраните в файле с именем 1.1.htm. Только когда будете вводить имя файла в стандартном окне сохранения, заключите его в кавычки, иначе Блокнот добавит расширение .txt, и ваш файл получит имя 1.1.htm.txt. После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть по нему мышью.
Теперь давайте рассмотрим сам HTML-код нашей первой странички.
<HTML> <HEAD> <TITLE>WEB-страница</TITLE></HEAD> <BODY> <H1>Пример WEB-страницы</H1> <P>Это простейшая Web-страничка, созданная в стандартном Блокноте и отображенная в Microsoft Internet Explorer.</P></BODY> </HTML>Выглядит устрашающе… Однако хорошо заметен текст, который виден в окне Web-обозревателя на рис. 1.1. Давайте рассмотрим его подробнее.
<H1>Пример WEB-страницы</H1> <P>Это простейшая Web-страничка, созданная в стандартном Блокноте и отображенная в Microsoft Internet Explorer.</P>Вы видите какие-то слова, заключенные в угловые скобки < и >. Это и есть теги HTML. Они задают форматирование текста. Скажем, строка Блокноте будет выведена курсивом, т. к. теги и задают курсивное начертание текста. Причем, тег помечает начало курсивного фрагмента (открывающий тег), а тег – конец (закрывающий тег). А собственно фрагмент, заключенный между открывающим и закрывающим тегами, называется содержимым тега.
Рис. 1.1. Простейшая Web-страничка
Это были теги физического форматирования текста, т. е. просто задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические блоки. В нашем небольшом фрагменте это теги <р> и <Н1> (и соответствующие им закрывающие теги </р> и </HI>). Они задают соответственно обычный текстовый параграф и заголовок первого уровня; при этом Web-обозреватель будет знать, что <H1>пример WEB-страницы</H1> – это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логического блока текста, а закрывающий – конец.
Здесь мы говорили о так называемых парных тегах, когда открывающему тегу соответствует закрывающий. HTML определяет также набор одинарных тегов. Один из них – это тег вставки графического изображения <IMG>.
<IMG SRC="picture.gif">Здесь мы видим, что само графическое изображение хранится в отдельном файле picture.gif. То есть, изображение – это один из внедренных элементов Web-страницы. Тег <IMG> содержит в себе параметр SRC, задающий имя файла изображения. (Такие параметры называются атрибутами тега.) Web-обозреватель, встретив в HTML-коде страницы тег <IMG>, загружает файл, чье имя задано атрибутом SRC, и отображает его.
Осталось рассмотреть совсем немного тегов, используемых для служебных целей и не отображаемых Web-обозревателем. Они так и называются – невидимые теги.
Парный тег <BODY>…</BODY> используется для выделения тела Web-страницы, т. е. той ее части, которая будет отображаться в окне Web-обозревателя. Кроме тела, Web-страница также должна содержать задаваемый парным тегом <HEAD>…</HEAD> заголовок, где помещается служебная информация. (Этот заголовок не выводится Web-обозревателем, а используется для внутренних нужд. Не путайте заголовок Web-страницы и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя; оно задается парным тегом <TITLE>…</TITLE>.
Давайте рассмотрим заголовок нашей страницы.
<HEAD> <TITLE>Web</TITLE></HEAD>Собственно, заголовок содержит только название нашей страницы, помеченное тегом <TITLE>…</TITLE>. Но в подавляющем большинстве случаев заголовок содержит множество других данных, необходимых как Web-обозревателю, так и другим программам, обеспечивающим функционирование Интернета и WWW. Мы пока не будем их рассматривать.