3.1. Введение в проблему
Последние годы интернет становится все более востребованным в качестве источника информации самого разного характера. Многие организации создают собственные страницы, как просто представительства с информацией о фирме, так и мощные порталы с возможностью получить нужную информацию, узнать о понравившемся товаре, заказать и оплатить его, не выходя из дома. Особое значение приобретает умение персонала фирмы создавать и изменять интернет-страницы.
Несмотря на то, что для создания и изменения web-страниц существует множество программ, и вообще этим должны заниматься специальные люди, в отдельных случаях бывает необходимо выполнить то же самое вручную. Поскольку любая html-страница представляет собой текстовый файл, сделать это можно в любом текстовом редакторе, в том числе Блокноте.
3.2. Анализ и методика решения задачи
Для создания простейшего веб-сайта воспользуемся текстовым редактором Блокнот.
Большинство современных сайтов имеют приблизительно одинаковую структуру: в верхней части окна расположен заголовок, вдоль левого края окна расположено меню сайта, а оставшуюся часть окна занимает содержимое страницы.
Несмотря на то, что современные требования к созданию страницы сайта достаточно сложны, простейшую структуру страницы можно создать с использованием таблиц. В типичном случае, если меню сайта размещено слева, а заголовок – вверху, достаточно будет создать документ, состоящий из одной только таблицы. Таблица будет включать в себя две строки и два столбца. Размещение меню, заголовка и основного текста показано на рис. 3.1.
Рис. 3.1. Размещение элементов сайта.
Любой HTML-документ представляет собой текстовый файл, содержащий текст (который будет показан посетителю сайта) и специальные команды по его оформлению.
Команды, предназначенные для оформления документа, называются тегами
(tag).
Общий вид тега:
<команда [параметр=значение]> Большинство тегов имеют закрывающий тег: </команда>
Например, любой HTML-документ должен содержать теги <HTML> и <BODY>:
<HTML>
<BODY>
Этот текст будет показан в браузере
</BODY>
</HTML>
Обратите внимание, что тег <body> начинается внутри тега <html>, и заканчивается внутри него. Иными словами, для всех тегов должно выполняться свойство вложенности. В данном примере (и во всех web-страницах) тег <body> вложен в тег <html>.
Теги могут быть вложенными, но не могут быть пересекающимися.
Теги оказывают влияние на ту часть текста, которая расположена между открывающим и закрывающим тегом. Например, рассмотрим теги <b> (делает текст жирным) и <i> (делает текст курсивным)
Пример: <html> <body>
<b> Текст1 <i> Текст2 </i> Текст3</b> Текст4 </body>
<html>
В окне браузера будет следующее:
Текст1 Текст2 Текст3 Текст4
Это допустимое размещение тегов.
Параметры отделяются друг от друга и от имени тега пробелами. Если параметр требует какого-либо значения, оно задается в кавычках через знак =, например, тег <body text=”grey”> указывает, что началось тело документа и цвет текста в теле документа – серый.
Пример:
<html>
<body text=”grey”>
Текст этого документа будет показан на сером фоне
</body>
<html>
А вот пример недопустимого размещения:
<b> Текст <i> Текст </b> Текст </i>
Что покажет браузер, зависит только от самого браузера.
HTML-документ состоит из двух частей: раздел заголовка и тело документа. Текст, помещенный в раздел заголовка на экране не отображается и служит для
размещения служебной информации. Например, о кодировке страницы.
В теле документа помещается текст, который должен быть показан пользователю.
Рассмотрим теги более подробно.
<!--Текст--> - тег комментария. Для вставки пояснения в документ.
<html></html> - указывает границы HTML-документа (параметров нет). Открывающий тег должен быть первым в документе, а закрывающий – последним.
<head></head> - ограничивает раздел заголовка HTML-документа (параметров нет). Именно между открывающим и закрывающим тегами <head> размещается служебная информация.
<meta name=”…” content=”…”> - предназначен для задания служебной информации и помещается в раздел заголовка и не имеет закрывающего тега
(Пример: <meta name=”content-Type” content=”Text/html; cha rset=win-1251”>- задает русскую кодировку документа win-1251).
<body></body> - ограничивает тело документа. Параметры:
bgcolor – задаёт цвет фона документа. Цвета задаются их английскими названиями (black, white, red, green, blue, aqua, olive, teal, gray, silver). На самом деле способов задании цвета несколько, но этот – самый простой.
text – цвет текста, задается аналогичо. link – цвет гиперссылок.
<Hn></Hn> - тег заголовка (n – число от 1 до 6) – текст между этими тегами показывается как заголовок. Параметры:
align – выравнивание заголовка (center – по центру, right – по правому краю, left
– по левому)
Пример: <H1 align="right">Это заголовок текста</H1>
<title></title> - задаёт название документа (оно будет показано в заголовке окна браузера). Помещается в разделе заголовка, а не в теле документа.
<p></p> - тег абзаца (параметры аналогичны тегу заголовка). Абзац будет начинаться с новой строки.
<br> - принудительный разрыв строки. Дело в том, что разбить текст на строки, просто нажимая на клавишу Enter, не удастся – браузер соберет несколько строк в один абзац и расширит его по ширине страницы. Чтобы все-таки перейти на новую
строку, нужно использовать этот тег, или воспользоваться тегом абзаца. Тег не парный.
<b></b> - жирный шрифт
<i></i> - курсив
<u></u> - подчёркивание.
<center></center> - предназначен для центрирования текста (параметров нет).
<a></a> - тег гиперссылки. Параметры:
href – адрес, куда ведет гиперссылка. Если вы устанавливаете ссылку на файл, находящийся в той же папке, что и страница, с которой ведет ссылка, достаточно указать имя файла.
Пример: <a href="www.sibsau.ru">Сайт СибГАУ</a>
В окне браузера будет показана ссылка "Сайт СибГАУ", при щелчке по которой будет открыт сайт с адресом www.sibsau.ru
<img> - тег рисунка, не имеет парного тега. Параметры: src=”…” – указывает положение файла с картинкой, Border = задаёт ширину рамки вокруг картинки,
Alt =” рисунок” – подпись к рисунку,
Align =left, center, right (лучше не использовать), Height=высота (px),
Width=ширина (px).
<table></table> - тег таблицы. Параметры: bgcolor - цвет фона таблицы,
align - выравнивание,
border - рамка таблицы. Толщина рамки таблицы в пикселах. cellspacing - расстояние между ячейками в пикселах.
cellpadding - расстояние от рамки таблицы до содержимого ячейки таблицы. width - ширина таблицы.
Содержимое таблицы задается построчно.
<tr></tr> - тег строки.
<td></td> - тег ячейки, параметры:
width – ширина столбца в пикселах (если не стоит знак %) или в процентах, align – выравнивание текста в ячейке по ширине, возможные значения
аналогичны значениям параметра align тега рисунка;
valign – вертикальное выравнивание, возможные значения top (вверх), bottom (вниз), middle (посередине).
Рассмотрим пример html-файла.
<html><!-- начало документа--> <head><!-- начало раздела заголовка-->
<meta name=”content-Type” content=”Text/html; chars et=win-1251”> <title>Новый сайт</title>
</head><!-- конец раздела заголовка-->
<body bgcolor=”green” ><!-- начало тела документа, зеленый фон документа--> Это пример веб-сайта.
Ниже находится таблица
<table border=”3”><!-- начало основной таблицы--> <tr><!-- начало первой строки-->
<td width=”300”><!-- начало первой ячейки первой строки, ширина ячейки 300 точек-->
Первый столбец первой строки
</td><!-- конец первой ячейки первой строки--> <td>
Второй столбец первой строки
</td>
</tr><!-- конец первой строки--> <tr>
<td width=”300”>
Первый столбец второй строки
</td>
<td>
Второй столбец второй строки
</td>
</tr>
</table>
А эта <a href=”http://www.microsot.com/rus/”> ссылка</a> ведет на официальный русский сайт Microsoft Corp.
</body><!-- конец тела документа--> </html><!-- конец документа-->
Теги строк и столбцов таблицы смещены только для удобства, располагаться они могут как угодно.
Этот текст соответствует следующим требованиям:
1.Текст в кодировке win-1251 (тег <meta>).
2.Название сайта «Новый сайт» (тег <title>)
3.Цвет фона сайта зеленый (тег <body>, параметр bgcolor)
4.Текст – « Это пример веб-сайта. Ниже находится таблица»
5.В таблице 2 строки (теги <tr></tr> повторяются дважды)
6.И два столбца (между тегами <tr></tr> располагаются по две пары тегов <td>
и </td>)
7.Первый столбец имеет ширину 300 пикселов (параметр width тега <td>).
8.Ссылка в тексте ведет на сайт фирмы Microsoft (тег <a> с параметром href)
Этот текст соответствует следующему виду страницы (рис. 3.2):
Рис. 3.2. Пример сайта.
3.3. Указания к выполнению работы
Для выполнения это работы вам необходима программа NotePad++, которую вы можете найти в папке с заданием.
После запуска вы должны ввести с клавиатуры выбранные вами в соответствии с пунктом 3.2. теги языка HTML.
Рекомендуемый порядок работы:
1.Переключить режим работы редактора в HTML (Language/H/HTML)
2.Набрать скелет документа (он должен включать в себя общие для всех html-документов открывающий и закрывающий теги <html>, а так же теги раздела заголовка и тела документа).
3.В теле документа набрать какой-либо простой текст (любой, на ваш выбор).
4.Сохранить созданный документ (для этого необходимо выбрать пункт меню File/Save as…, в появившемся окне изменить тип файла на Все файлы, и ввести имя файла, добавив к нему расширение в виде .html). Файл необходимо сохранить в папку Мои документы.
5.Не закрывая NotePad++, открыть только что созданный файл двойным щелчком по нему.
6.Убедившись, что файл правильно показывает введенный вами текст, можно заполнять файл дальше.
Для просмотра сделанных вами изменений достаточно сохранить файл в NotePad++ (File/Save), и обновить файл в браузере (кнопка F5).
После того, как ваш файл полностью готов, вам понадобится создать еще 2. Чтобы упростить этот процесс, и не набирать текст страниц заново, вам достаточно сохранить уже созданный вами файл еще раз, но уже под другими именами.