Урок 2. Начало работы с сайтом
Для создания сайтов используем следующие инструменты:
- Denwer — набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.
- Notepad ++ — свободный текстовый редактор для Windows с подсветкой синтаксиса большого количества языков программирования и разметки, либо другая альтернативная программа.
- Paint.NET — растровый графический редактор для Windows NT, основанный на .NET Framework.
- Браузеры (Interner Explorer, Opera, Google Chrome, Mozilla)
В папке home (C:\WebServers\home\) создадим папку site, в который будут размещены файлы нашего сайта. В папке site создадим папку www.
Запустим Denwer с рабочего стола или по траектории C:\WebServers\etc\run.exe
Откроем блокнот (Notepad++), добавим новый файл и сохраним его в папке www нашего сайта под именем index.php
Определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
Тэг <html>
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. В целом html документ имеет следующую структуру
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<!— Этот раздел предназначен для заголовка страницы и технической информации —>
</head>
<body>
<!— Здесь размещается содержимое страницы —>
</body>
</html>
Следующий тэг после html идет тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта информация записана в служебных тэгах meta, которые также не отображаются на странице в браузере.
Мы запишем на нашей страничке следующую информацию:
<head>
<meta http-equiv= «content-type» content= «text/html; charset=windows-1251» />
<meta name= «description» content= «Сайт об электронном правительстве » />
<meta name= «keywords» content=»электронное правительство, электронная Россия » />
<link rel= «stylesheet» href= «style.css» type= «text/css» />
</head>
Первый мета-тэг показывает на кодировку сайта windows-1251.
Второй мета-тэг — это краткое описание сайта.
В третьем мета-тэге ключевые слова для поисковиков.
Последняя строка — это ссылка на наш лист стилей CSS, который мы создадим чуть позже.
Зададим после строки
<meta http-equiv= «content-type» content= «text/html; charset=windows- 1251» />
Тэг <title>
<title>Электронное правительство</title>
Сохраним файл index.php.
При заходе пользователя по адресу www.site станет сразу же искать у себя в заначке страницу с этим названием. Индексная страница всегда является главной (или стартовой).
Откроем браузер и в адресной строке наберем site. В результате в строке заголовка появится только содержимое тега <title>.