Как создаются Web-страницы?
Теперь поговорим о том, как создаются Web-страницы. Для этого используется язык HTML (HyperText Markup Language — язык гипертекстовой разметки), определяющий набор специальных команд, называемых тегами.
Тег – это специальная HTML-метка, предназначенная для того, чтобы дать указание Web-браузеру, как именно необходимо интерпретировать расположенный после него текст. Особые теги применяются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.
Web-страницы представляют собой текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе и содержат текст, который вы хотите поместить на страницы, только размеченный особым образом. Продемонстрируем это на следующем примере. Для этого рассмотрим рис. 1. Это простейшая Web-страничка, которую мы сделали в Блокноте. Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код и сохраните его в файле с именем 0_l.html. После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть на нем мышью.
Рис. 1
HTML-код Web-страницы выглядит следующим образом:
<html>
<head>
<title >ПримерWeb-страницы</title >
</head >
<body >
<h1>Наша первая Web-страница</h1 >
<p>Это простейшая Web-страничка, созданная в стандартном <i>Блокноте</i> и отображенная в <i>Microsoft Internet Explorer</i> </p>
</body>
</html>
Несмотря на ряд неизвестных слов, содержащихся в HTML-коде страницы, хорошо заметен текст, который отображен в окне Web-обозревателя на рис.1. Рассмотрим HTML-код страницы более подробно.
<h1 >Наша первая Web-страница</h1 >
<p>Это простейшая Web-страничка, созданная в стандартном <i >Блокноте</i> и отображенная в <i >Microsoft Internet Explorer</i></p>
Вы видите какие-то слова, заключенные в угловые скобки < >. Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <i >Блокноте</i> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста. Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег).
Это были теги физического форматирования текста, т. е. задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические единицы. В нашем небольшом фрагменте это теги <p> и <h1> (и закрывающие теги </p> и </h1>). Они задают соответственно текстовый параграф и заголовок первого уровня; при этом Web-обозреватель будет знать, что <h1>Наша первая страница</h1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логической единицы текста, а закрывающий — конец. Здесь мы говорили о так называемых парных тегах, состоящих из открывающего и закрывающего тега (тем не менее, о них говорят как об одном теге). HTML определяет также набор одинарных тегов. Один из них — это тег перехода к новой строке <br>.
Теперь рассмотрим теги, которые используются для служебных целей.
Парный тег <body>. . .</body> применяется для выделения тела Web-страницы, т. е. той ее части, которая будет отображаться в окне Web-обозревателя. Кроме тела, Web-страница также должна содержать HTML-заголовок, который обрамляется тэговой парой <head>…</head>.В нем помещается служебная информация. (Не путайте HTML-заголовок и обычный текстовый заголовок, задаваемый тегом <H1>!) Среди этой служебной информации может быть название страницы, показываемое в заголовке окна Web-обозревателя.
Название страницы помечается тегами <title>…</title>. Заметьте, что тег <title> вложен внутрь <head>. Такая вложенность тегов в HTML встречается на каждом шагу. При этом тег <head> называется родительским тегом или родителем тега <title>, а тег <title> — соответственно, дочерним тегом, или потомком тега <head>.
И если вы еще раз посмотрите на полный листинг кода нашей Web-страницы, то увидите, что весь HTML-код заключен внутрь парного тега <html>...</html>. Именно этим тэгом начинается любая HTML-страничка. Следовательно, любой HTML-документ имеет следующую структуру:
<html>
<head> <title>…</title> </head>
<body>...</body>
</html>
Обратите внимание на порядок вложенности тегов - закрывающие тэги идут всегда в обратном порядке, например:
<head> <title> . . . </title > </head>
Если же вы случайно допустите ошибку и поместите теги так:
<head> <title> . . . </head> </title >,
то Web-обозреватель может и не отобразить ваше творение.
Web-страницы сохраняются в текстовых файлах с расширением .htm или .html и публикуются на Web-сервере. Графические изображения, аудио- и видео ролики и прочие внедренные нетекстовые элементы сохраняются в виде отдельных файлов и помещаются там же. Одна из Web-страниц, на которую попадет пользователь, набрав в поле адреса Web-обозревателя адрес вашего сайта, задается в качестве страницы по умолчанию.
С термином Web-сервер существует определенная путаница. Во-первых, так называют компьютер, подключенный к Сети по быстрому каналу и хранящий на своих жестких дисках файлы Web-страниц. Во-вторых, так именуется программа, принимающая от Web-обозревателей (клиентов) запросы и выдающая им соответствующие файлы. Но чаще и компьютер и программу объединяют в единое целое и называют одним словом — Web-сервер. Так поступим и мы.
Когда вы набираете в поле адреса Web-обозревателя какой-либо интернет-адрес, обозреватель обращается к соответствующему Web-серверу. Сервер же извлекает со своих дисков нужные файлы (Web-страницу, изображения, внедренные объекты) и отправляет их Web-обозревателю. Web-браузер считывает язык разметки гипертекста, указанный в HTML-документе и выводит ее в виде, задуманном автором.
Для более глубокого понимания структуры HTML-документа и для того, чтобы сделать свой сайт популярным, перейдем к рассмотрению таких важных понятий, как поисковые машины и поисковые системы.