Создаем первую web-страницу.
Совет: Существует множество визуальных редакторов облегчающих создание HTML документов, например Front Page, Word , различные конструкторы сайтов и т.д. Но для начала, если Вы действительно хотите сами разбираться, рекомендую все таки освоить написание кода. Для этого существует несколько причин. Основные:
-
Если вдруг что-то случиться Вы сможете самостоятельно, а главное оперативно (и бесплатно) устранить проблему.
-
При необходимости самостоятельно внести коррективы в свой сайт (добавить или удалить дополнительные разделы, страницы).
-
Почти все визуальные редакторы вносят в создаваемый документ избыточный код, что приводит к «утяжелению страницы» и как следствие увеличению времени загрузки, т.е. пользователь может просто не дождаться загрузки страницы и уйти на другой сайт.
Не важно, чему посвящен ваш сайт футболу, автомобилям или аквариумным рыбкам, без разницы на какую он тему, механизм всегда одинаков. Открывает программу Блокнот, входящую в Windows (Пуск > Все программы > Стандартные > Блокнот) или Notepad++ (ее Вы найдете в разделе Инструментарий и набираем следующий код:
Листинг 1.
|
<html>
<head>
<title>Автомобили со всего мира</title>
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.
</body>
</html>
|
Сохраняем этот файл на жестком диске (желательно завести отдельную папку, в которую вы будете складывать все файл Вашего сайта) под именем index.html обязательно с расширением .html или .htm . Когда Ваш сайт будет размещен в интернете, то при наборе в адресной строке браузера адреса сайта, например http://www.myinsite.ru (или другого доменного имени, об этом мы поговорим позже), по умолчанию всегда открывается файл index.html . Теперь как обычно два раза щелкаем левой кнопкой мыши по этому файлу и видим:
Рисунок 2.1
Поздравляем!!! Вы создали свою первую HTML-страницу. Конечно же, она еще смотрится очень неказисто, но согласитесь как это просто …
А теперь нам необходимо усвоить немного обязательной теории.
Слова, заключенные в угловые скобки, являются служебными словами языка HTML. Их называют тегами (tags). Теги никогда не отображаются при просмотре страницы — они служат для управления оформлением.
Тег <html> , который Вы видите в первой строке, означает, что наш текст действительно написан на языке HTML. Большинство тегов языка HTML — парные. Они обязательно требует присутствия закрывающего тега. Например, в этом примере в первой строке стоит открывающий тег <html> , а в последней — закрывающий тег </html>. Все, что расположено между ними, считается HTML-документом.
В языке HTML совершенно не имеет значения, строчными или прописными буквами записаны теги. Можно написать </HTML> или <html> — для браузера это одно и то же.
В рассмотренном примере вы видите еще один тег — <body> . Этот тег тоже парный. Все, что расположено между ним и его закрывающим тегом </body>, считается “телом” документа и отображается на экране это то что видно при открытии страницы. HTML-документы, помимо “тела”, обычно содержат еще и заголовок, в котором заключена различная служебная информация. Заголовок располагается между тегами <head> и </head>. Между этими тегами пишется служебная информация необходимая для работы браузера.
Между тегами <title> и </title> пишут то, что видно в заголовке окна браузера в данном случае у нас прописано <title> Автомобили со всего мира</title>.
Но это еще не всё, для нормального отображения Вашей странички (и не только Вашей, а любой), браузеру необходимо сообщить ещё некоторую служебную информацию. Которая прописывается между тегами <head> и </head> . То, что мы сейчас пропишем необходимо только браузеру, посетитель Вашего сайта этих строк кода не увидит. Поправьте Ваш код как в листинге 2.
Так должен выглядеть код HTML документа:
Листинг 2.
|
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Автомобили со всего мира</title>
<meta name=”keywords” content=”автомобили, легковые, гараж, автопутешествия”>
<meta name=”description” content=”Все, что вы хотите знать про автомобили”>
</head>
<body>
Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.
</body>
</html>
|
Коротко поясним что же мы добавили в код страницы. Первая строка:
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
говорит браузеру что это HTML документ версии 4.01 наиболее стабильной на сегодняшний день (есть и другие версии HTML, они не очень сильно отличаются, все движется и развивается). Обратите внимание на следующую строку:
| <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″> |
эта строка говорит браузеру в какой кодировке отображать страницу (их тоже много), в русскоязычном интернете наиболее предпочтительная windows-1251. Следующая строка:
|
<meta name=”keywords” content=”автомобили, легковые, гараж, автопутешествия”>
|
Здесь в кавычках пишутся ключевые слова, по которым Ваш сайт будет отыскиваться поисковыми машинами, такими как Yandex, Google и т.д. Естественно пишите здесь свои слова, применительно к своему сайту.
|
<meta name=”description” content=”Все, что вы хотите знать про автомобили”>
|
То же самое что и ключевые слова, только здесь в кавычках указывают словосочетания и предложения, описание Вашего сайта которое будет видно в поисковиках. В настоящее время теги <meta name=”keywords”> и <meta name=”description”> не столь актуальны как ранее, но все же рекомендуется их прописывать. Эти теги являются одиночными т.е. их не нужно закрывать.
Вот теперь код Вашей первой страницы полностью готов и будет корректно отображаться любым браузером. Если Вы обновите вашу страницу, то увидите, что на экране монитора ничего не изменилось.
В следующем уроке мы добавим еще текста на страничку и начнем её форматировать, придавая Вашей странице более, законченный и красивый вид. А для этого нам необходимо ознакомимся с тегами форматирования.
.gif){kind=spacer}
; ?>/wp-content/themes/bb3x/design/spacer.gif){kind=spacer}
