Урок 1. Как устроен сайт. Делаем первую страницу.

Содержание урока:

Создаем первую страницу.

Прежде чем создавать сайт, надо понять из чего собственно он состоит. Когда вы набираете в адресной строке браузера, например www.yandex.ru, вы знаете, что попадете на сайт с именем yandex. Далее, щелкая по ссылкам и кнопочкам, вы переходите со страницы на страницу этого ресурса.

Отсюда нетрудно догадаться, что сайт - это набор страниц, связанных между собой. Сделать сайт - значит научиться делать и связывать эти странички.

Теперь посмотрим на саму страничку сайта, например ту, которую вы видите сейчас. Из чего она состоит? Из картинок и текста. Значит, чтобы сделать страницу надо подобрать картинки, набрать текст и указать браузеру, как все это отобразить.

Да, именно браузер (Internet Explorer, Firefox или любой другой) отображает все страницы в интернете. Как он узнает, что именно эта страница предназначена для интернета?

По ее расширению - html (например, страница index.txt - это просто страница с текстом, а index.html - это web-страница). Как браузер узнает, как именно отобразить ваши картинки и текст? Для этого служит язык разметки - HTML. Именно с его помощью вы и указываете браузеру, где отразить на странице картинку, а где текст.

Итак, от слов к делу.

Шаг 1.

Откройте блокнот (Notepad) и введите в новый документ следующий код:

< html>

< head>

< title> Моя первая страница < /title>

< /head>

< body>

Всем привет!

< /body>

< /html>

Шаг 2.

Сохраните этот документ (Файл -> Сохранить как)

Укажите место хранения вашего файла (у меня - это диск D). Имя файла - index.html

Тип файла - все файлы.

Шаг 3.

- Запустите браузер (Пуск -> Internet Explorer), в адресной строке укажите полный путь к созданному файлу index.html.

У меня он хранится на диске D, значит его полный путь D: \index.html, если бы он хранился в папке web на диске D, то его путь был бы - D: \web\index.html, иными словами вы должны указать через \ все папки на пути от диска к файлу.- Щелкните по клавише Enter.

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

Правда, она пока умеет только отображать текст, делать ее яркой и интересной мы научимся в следующих уроках. А в конце этого давайте разберемся, что же мы написали такого, что наша страничка стала web-страничкой.

Посмотрите на код, который мы вводили в блокноте. Это и есть структура любого html-документа. Все, что находится между < и > называется тег.

Между < и > находится имя тега и его параметры (если они есть).

В основном все теги парные, т.е. один открывающий < >, а другой - закрывающий < />. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.

Бывают также теги одиночные, т.е. не требующие закрытия. Такие теги просто совершают определенное действие, например, перевод строки или вставку рисунка.

Разберем структуру документа подробнее:

1) в теги < html> < /html> помещается весь документ

2) в теги < head> < /head> помещается разная информация для браузера (об этом позже)

3) в теги < title> < /title> помещается заголовок страницы (он виден на самом верху страницы)

4) в теги < body> < /body> помещается все, что вы хотите разместить (картинки и текст)

Как уже говорилось, этот набор тегов является основой любой html-страницы, причем именно в таком порядке. Поэтому можете копировать набранный в блокноте html и вставлять в каждую новую страницу.

На этом первый урок закончен. Вы научились создавать web-страничку. В следующем уроке вы научитесь оформлять текст.

Уроки HTML расчитаны на " новичков". Если же вы не знаете для чего нужен HTML и как создать html-страничку, то ознакомьтесь сначала с серией уроков Делаем сайт - первые шаги, а потом возвращайтесь сюда.