Апрель » Уроки по HTML » Урок 1. Создаем HTML-документ

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

dorofeeva 27-10-2012, 23:13 5 480 Уроки по 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>

Просматриваем результат в браузере. Посмотрите, что получилось - появилось имя сайта.