УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 3. Создаём первую страницу сайта.

(я буду исходить из того, что Вы набираете код в "Блокноте" или похожей программе, например, Notepad++, HtmlReader или в любом визуальном редакторе в режиме кода)

Итак, как создать страницу на сайте?

Создайте на своём компьютере, например, в папке "Мои документы отдельную папку, куда Вы будете складывать файлы своего сайта. Назовём эту папку "Мой сайт".

Открываем её и создаём в ней текстовый документ (правый клик мыши - Создать - Текстовый документ). В папке создан файл, можно дать ему имя, но можно оставить по умолчанию "Текстовый документ". Откроем этот файл.

И наберём следующий код:

Листинг 3.1.

<head>
<title> Сайт о собаках </title>
</head>
<body>
Наш сайт посвящён собакам и всему, что с ними связано: выбору, приобретению, уходу, кормлению, дрессировке, выставкам и пр.
</body>
</html>

Это основной (базовый) код, он есть в любой странице, не зависимо от темы сайта.

То, что находится в угловых скобках (< >), называется тегами. Теги - это метки, с помощью которых задаётся внешний вид Веб-страницы. Теги на странице не видны, а видно всё, что не заключено в угловые скобки.

Я не случайно разделил код промежутками на три части: каждая имеет своё назначение.

Верхняя:

<html>
<head>
<title>…</title>
</head>
-
"голова" документа, служит для записи разной служебной информации, например, заголовка страницы.

Средняя:
<body>
……..
</body>
-
"тело" документа. Между <body> и </body> содержится вся информация, которая должна быть видна на странице.

Нижняя:
</html> -
"ноги" или "подвал" документа, закрывает документ.

То, что заключено в угловые скобки < >, и есть метки или теги, которыми задают внешний вид страницы. Большинство тегов парные, то есть, например, открывающему тегу <body> соответствует закрывающий </body>. То же для <title>…</title>. То же для <html> </html>. И т. д. Есть непарные теги, с ними познакомимся позже.

Любой документ начинается с тега <html> и заканчивается тегом </html>.

Между тегами <title>…</title> пишут заголовок документа, как, например, в нашем примере: "Сайт о собаках".

А между <body> и </body>, как было сказано, пишут всё, что должно отображаться на Веб-странице.

Для браузера на важно, напишем мы <html> или <html>, то есть, регистр букв значения не имеет. Теги на странице не видны, а видно то, что в угловые скобки не заключено.

Внимание! Очень важно: теги выстраиваются так, что <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>, то есть тэг, который мы открыли первым - закрываем последним, второй - предпоследним и т.д. На примере базового кода это очень хорошо видно.

Пока теории достаточно, вернёмся к созданному документу.

Сохраним документ: Файл - Сохранить как - в открывшемся диалоге "Сохранить как" выбираем папку "Мой сайт" - Имя файла: index.html - Тип файла: все файлы - Сохранить

.
Уроки html для начинающих
Рис. 1

Внимание! Файл главной страницы сайта всегда имеет название index и расширение .html (index.html). В противном случае, при попытке открыть страницу в Интернете, будет выдаваться сообщение об ошибке.

В папке "Мой сайт" появился документ html по имени index. Откроем его, дважды щёлкнув левой кнопкой.

Мы видим созданную страницу:

Уроки html для начинающих
Рис. 2

Вот и готова наша первая Веб-страница.

Но в сам код нужно добавить ещё кое-что: служебную информацию, которая будет видна только браузеру. Без этой информации страница может отображаться неправильно.

Итак, добавьте в код следующее ("добавки" я буду выделять коричневым цветом):

Листинг 3.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">
<meta name="description" content="Всё о собаках">
<meta name="keywords" content="собаки, породы, выбор щенка, воспитание, дрессировка, кормление, выставки собак">

<title>Сайт о собаках</title>
</head>
<body>
Наш сайт посвящён собакам и всему, что с ними связано: выбору, приобретению, уходу, кормлению, дрессировке, выставкам и пр.
</body>
</html>

О назначении этой информации мы поговорим позже, пока теории достаточно.

Сохраните документ и обновите страницу в браузере. Как видим, введённая новая информация нигде не отражена, она будет видна только браузеру и поисковым машинам.

В следующем уроке мы научимся придавать странице более красивый и законченный вид >>>>>>>

Важно! Web-технологии постоянно развиваются, совершенствуются. Те статьи по HTML, что выложены на нашем сайте - это необходимый минимум, который следует освоить, но информация в них несколько утарела. Со времени их написания появилась новая версия HTML - HTML5. Поэтому рекомендую скачать бесплатно видеоуроки по HTML, в которых вы найдёте много нового, соответствующего новым стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:


Комментарий добавил(а): Сергей
21-09-2011
21 час. 47 мин.

Комментарий:
Здравствуйте я написал в блокноте то как вы сказали и сохранил под именем Index.html и все по прежнему простая надпись в блокноте и не чего более. Помогите!!!!!!


Комментарий добавил(а): Андрей Чернобай
22-09-2011
21 час. 04 мин.

Комментарий:
Здравствуйте, Сергей. Если я правильно понял, Вы ожидали изменений в окне открытого блокнота. Так там видимых изменений и не будет - кроме одного: в заголовке окна вместо "Текстовый документ - Блокнот" появится "index - Блокнот". Но это настолько не явно, что Вы могли и не обратить внимания. Главное, чтобы в папке, куда Вы сохранили файл с именем index.html, появился такой файл. После того, как Вы закроете текстовый документ, в котором писали код, открыть его можно только так: на файле index.html кликаем правой кнопкой мыши и выбираем "Открыть с помощью..." - "Блокнот". А в том текстовом документе, который Вы создавали вначале для работы, будет пусто, в нём можно писать что угодно другое или переименовать его или удалить... в общем, он больше не нужен для работы с файлом index.html. Надеюсь, я ответил на Ваш вопрос. Если нет, пишите.


Комментарий добавил(а): Сергей
27-09-2011
18 час. 23 мин.

Комментарий:
Извини если че не так , у меня есть еще один вопрос, а как открыть страницу созданную в блокноте?????


Комментарий добавил(а): Андрей Чернобай
27-09-2011
20 час. 44 мин.

Комментарий:
На файле index.html (или на любом другом html-файле, который нужно открыть для правки) кликаем правой кнопкой мыши и в появившемся меню выбираем "Открыть с помощью" -> "Блокнот". Если в списке программ Блокнот не указан, кликаем в самом низу подменю заголовок "Выбрать программу". И в открывшемся диалоге "Выбор программы" находим "Блокнот" и выделяем его левым кликом. Далее жмём ОК - html-страница откроется в Блокноте. (Не в обиду будет сказано, но это - азы владения компьютером, прежде чем строить сайты, нужно бы именно освоить такие вещи.)


Комментарий добавил(а): Сергей
28-09-2011
15 час. 57 мин.

Комментарий:
С навыками компьютера у меня все хорошо дело в том что, когда я меня названия текстовый документ.txt я меняю на имя Index.html но проблема в том что я тока щас подумал об этом что меняя расширение txt на html все остается также просто че то он не распознает расширение Ни могли бы вы мне че нибудь подсказать на эту тему?????


Комментарий добавил(а): Сергей
28-09-2011
16 час. 32 мин.

Комментарий:
все я разобрался с расширением спасибо


Комментарий добавил(а): Макс
21-10-2011
20 час. 52 мин.

Комментарий:
Здравствуйте!!! У меня появился вопрос. Я с толкнулся с проблемой Создав Index.html ну это главная страница, создав в той же папке где Index.html к примеру Foto.html и там же должен создавать что я должен писать между этим тегом тоже самое что и на Index.html?????


Комментарий добавил(а): Андрей Чернобай
22-10-2011
08 час. 32 мин.

Комментарий:
Здравствуйте, Макс. Простите, но вопрос не понятен: между каким тегом надо писать? И что Вы должны создавать в той же папке? Если Вы хотели через форму на сайте указать какой-то тег, то не получится, так как скрипт-обработчик формы запрещает вводить в форму теги - это сделано для защиты от взломщиков (в статьях по php Вы узнаете, для чего и как это делатеся).

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта