27.10.2012

Урок 1. Создаем HTML-документ

Для того, чтобы создать свой собственный первый в жизни сайт достаточно уметь набирать текст в Блокноте. И все!

Итак, приступим.

Открываем Блокнот и набираем текст, скажем, такой:

 Привет, Интернет и весь мир!

Для того, чтобы превратить эту строчку из обычного текстового документа в HTML-документ, мы должны его разметить с помощью тегов. 

Теги - это специальные команды для браузера (программы просмотра интернет-страниц), поясняющие ему, как и в каком виде выводить текст.

Для начала мы должны показать, что это не просто текст, а HTML-документ, поэтому мы должны взять его в теги:

<HTML>

 Привет, Интернет и весь мир!

</HTML>

Тег <HTML> означает начало документа, и, естественно, тег </HTML> конец документа. 

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

Сохраняем наш документ. Для этого вначале создаем папку, в которой будем хранить все файлы нашего будущего сайта. Затем в Блокноте даем команду: Файл - Сохранить как...". Выбираем нашу папку и задаем имя файлу. В принципе, имя можно дать любое, но принято основной файл называть index.html, то есть имя - index, а расширение имени - html (можно и три буквы htm).

Обязательно проверяем, правильно ли сохранился наш документик, а то иногда можно увидеть и такое имя - index.html.txt

Вот и все. Если сейчас сделаем двойной щелчок по файлику, он откроется не в блокноте, а в браузере. И мы увидим следующую картинку:

мой первый сайт

Что же, очень даже похоже на сайт.

Но, конечно же, структура html-документа несколько сложнее.

Web-страница разделяется на две логические части: заголовок и содержание (тело).

Заголовок заключается между тегами <HEAD>и </HEAD>. В заголовке HTML - документа содержится название странички, а также справочная информация (например, тип кодировки), которые появятся в рамке окна программы просмотра.

Название странички располагается между тегами <TITLE> и </TITLE>. Например, <ТIТLЕ>Моя страничка </ТIТLЕ> .

Содержание – это то, что будет выводиться на экран программой просмотра - текст, картинки, видеофрагменты. Содержание заключается между двумя тегами и <BODY> и </BODY>.


 Рассмотрим небольшой фрагмент кода:

<HTML>
  <HEAD>
Блок вспомогательной и заголовочной информации
  </HEAD>
  <BODY>
Основной текст 
  </BODY>
</HTML>
 
Наш текст  Привет, Интернет и весь мир! мы должны поместить между тегами <BODY>.
А между тегами <HEAD> мы разметим еще один парный тег <TITLE></TITLE>, внутри которого напишем название нашего сайта, то, что будет появляться сверху в окошке браузера.

Откроем наш файл index.html и внесем небольшие изменения.
Кстати, для того, чтобы его открыть, нужно щелкнуть по нему правой кнопкой мыши и в появившемся меню выбрать пункт: Открыть с помощью - Выбрать программу - Блокнот.
Можно также открыть Блокнот, в нем выбрать пункт Файл - Открыть, затем внизу выбрать пункт "все файлы", после этого Блокнот "увидит" файлы с расширением html.
Редактируем документ и сохраняем под тем же именем.

<HTML>
  <HEAD>
       <TITLE>Мой первый сайт</TITLE>
  </HEAD>
  <BODY>
Привет, Интернет и весь мир! 
  </BODY>
</HTML>
 
Просматриваем результат в браузере. Посмотрите, что получилось - появилось имя сайта.
 
делаем сайт сами
 
 
Вот пока и все. Для первого урока достаточно. На следующем уроке разберем, как изменять цвет, размер и начертание шрифта.
 
До встречи!