1.6. Создание простейшего сайта
Прежде всего — о структуре папок, содержащих страницы сайта. Для создания страниц с «настоящими» (видимыми в Сети) именами, вы сами или ваш системный администратор должны запустить web-сервер, разместить в контролируемое этим сервером web-пространство дерево каталогов, содержащих ваш сайт, и произвести соответствующие настройки web-сервера для того, чтобы любому пользователю, подключенному к Сети, можно было обращаться к сайту, указывая соответствующие URL его страниц.
При освоении программирования на стороне клиента можно создавать сайты и без запуска веб-сервера, однако, впоследствии, при перемещении сайта на веб-сервер, необходимо будет проделать работу по соответствующему изменению ссылок. Чтобы такой работы было меньше, необходимо заранее продумать структуру папок вашего будущего сайта. Кроме этого, вы должны понимать, что при создании гиперссылок в вашем случае лучше использовать относительную, а не абсолютную адресацию, связанную со структурой папок только лишь вашего сайта. Далее, по ходу выполнения упражнений вы должны будете создавать папки с заданными именами, и в результате в отведенной для вас на сервере папке должно появиться соответствующее дерево папок, которое необходимо будет копировать на веб-сервер.
Каждый HTML-документ, должен начинаться со строки (тэга — строки в угловых скобках), которая обычно выглядит так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
По этой строке браузер определяет, что используемый нами HTML соответствует версии 3.2. Это не самая свежая версия, но, в отличие от более новых версий, является наиболее проработанным и широко распространенным стандартом.
Для разметки страницы используются соответствующие тэги. Размеченный тэгами текстовый файл (html-код) записывается в файл с расширением html или htm. При открытии такого файла в браузере, последний интерпретирует тэги и отображает в виде веб-страницы текст, размещённый между этими тэгами. Имеются также тэги, содержащие ссылки (гиперссылки) на другие документы. Ещё один вид тэгов содержит не отображаемую служебную информацию. Ниже приводится листинг html-кода простейшего документа.
Листинг 1.1
<html>
<head>
<title>Список упражнений</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>Список упражнений, выполненных студентом Петровым</h2>
<p>На этой странице приводится список упражнений, выполненных студентом Петровым при освоении материала учебного пособия "Программирование на стороне клиента".</p>
<p>
Каждый элемент списка является ссылкой для перехода к странице, отображающей результат выполнения упражнения.
<p>
<a href="./exercises/exercise_1.html">Упражнение 1</a><br>
<a href="./exercises/exercise_2.html">Упражнение 2</a><br>
<a href="./exercises/exercise_3.html">Упражнение 3</a>
</p>
<p><a href="../index.html">Переход на домашнюю страницу</a></p>
</body>
</html>
Код, приведённый в листинге 1.1, наберите в простейшем текстовом редакторе типа Блокнот или Gedit (рекомендуется использовать Gedit) и сохраните в файле с расширением html. При сохранении не забудьте также выбрать кодировку UTF-8. В редакторе Gedit нужно также указать вид окончания строк UNIX/Linux. Откройте этот файл в браузере и, если вы не допустили ошибок, то увидите веб-страницу, показанную на рис. 1.2.
Рис.
1.2. Веб-страница,
соответствующая html-коду листинга 1.1.
Разберём действие каждого тэга из листинга 1.1.
Тэг <html> ... </html> относится к парным тэгам, то есть состоит из двух тэгов: открывающего и закрывающего. Пишутся оба тэга одинаково, только закрывающий тэг начинается с символа «/» (прямого слэджа). Этот и любой другой тэг обрамляется угловыми скобками. Весь код этого и любого другого html-документа должен находиться внутри тэга <html> ... </html>. Браузер по этому тэгу определяет, что это html-код и начинает его соответствующим образом интерпретитровать.
Внутри тэга <head> ... </head> должны находиться служебные тэги. Текст этих тэгов не отображается непосредственно в рабочем поле браузера. В качестве примера в листинге 1.1 использованы два тэга.
Первый - <title> ... </title> содержит текст, отображаемый в строке заголовков открытых документов. Этот тэг рекомендуется вставлять всегда, так как он используется поисковыми сервисами.
Второй тэг (мета-тэг) также желателен. Строка charset=utf-8 указывает браузеру, что файл содержит текст в кодировке UTF-8. В этой кодировке обычно работают приложения под Linux-подобными операционными системами. Для приложений под Windows эту строку обычно пишут в виде charset=windows-1251, указывая браузеру, что html-код набран в «родной» кодировке OC Windows. Вам необходимо использовать UTF-8, как более новую универсальную кодировку (как уже упоминалось выше, при сохранении файла в редакторе вы должны выбрать кодировку UTF-8, а в Gedit ещё и вид окончания строк UNIX/Linux). Существуют ещё и другие мета-тэги, которые мы рассмотрим позже. Мета-тэги относятся к тэгам одиночного типа — у них нет закрывающего тэга.
Тэг <body> ... </body> заключает в себе всё содержимое документа, отображаемое в рабочем поле браузера. Внутри этого тэга должны содержаться все остальные тэги, размечающие текст, рисунки и другие объекты, составляющие веб-страницу. Вам пока достаточно научиться применять четыре тэга, использованные в примере: <h2> ... </h2>, <p> ... </p>, <a> ... </a> и <br>.
Тэг <h2> ... </h2> интерпретируется браузером как тэг заголовка (heading). Текст, заключённый внутри этого тэга отображается с новой строки жирным шрифтом определённого размера. Следующий за этим заголовком текст начинается с новой строки. Имеется шесть тэгов для форматирования заголовков с различными размерами шрифтов. Тэг <h1> ... </h1> используется для задания самого крупного шрифта, а тэг <h6> ... </h6> - для самого мелкого. Вы можете поэкспериментировать с тэгами заголовков, чтобы убедиться в этом.
Тэг <p> ... </p> предназначен для выделения заключённого в нём текста в абзац (paragraph). Такой текст отделяется пустыми строками сверху и снизу от остального текста страницы.
Одиночный тэг <br> (от break - разрыв) вызывает принудительный разрыв строки внутри параграфа.
С помощью тэга <a> ... </a> (от anchor - якорь) создаются гиперссылки (или просто — ссылки). В открывающем тэге <a> обязательно задаётся свойство (или атрибут) href. Этому свойству присваивается текстовая строка в виде пути к файлу с html-кодом веб-страницы, которая должна открываться по ссылке. В примере используются относительные ссылки, правила построения которых вы должны знать. В браузере отображается лишь текст, заключённый между открывающим и закрывающим тэгами. Сами тэги не отображаются. При подведении указателя мыши к этому тексту вид указателя меняется. Кликнув мышью по этому тексту вы заставляете браузер отобразить страницу, путь к которой задан с помощью свойства href.