 |
Создание сайта с помощью текстового редактора (Notepad-блокнот)
|
|
|
|
HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).
Цель данной работы - создание своего собственного маленького, но выразительного сайта. На самом деле, это совсем не сложно, что Вы и сами скоро поймете!
1. Перед тем как начать составление сайта придумайте, о чем он будет (о вас, о вашем хобби, о каком-либо товаре и т.п.). Далее выполняя все работы по HTML придерживайтесь выбранного направления.
2. Создаем на рабочем столе файл с расширением *.htm под названием 1.htm (если раскрывающееся контекстное меню не предлагает такой заготовки, создаем документ-блокнот, после чего переименовываем, меняя расширение с *.txt на *.htm) и открываем его с помощью текстового редактора (контекстное меню – открыть с помощью – блокнот).
3. Код документа обязательно должен начинаться и заканчиваться обязательными метками: <html> … </html>, без соблюдения этого простого правила у Вас ничего не выйдет! Поэтому настоятельно рекомендую сразу ввести эти метки. Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
4. Следующим шагом будет создание заголовка документа, он обозначается следующей парой тэгов: <head>... </head> Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
5. Между вышеприведенными тэгами введите следующие: <title>... </title> Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов (Например, «Мой сайт»)
|
|
|
Если Вы все делали правильно, то у Вас должно было получиться следующее:
<html>
<head>
<title> Мой сайт </title>
</head>
</html>
6. Сохраните изменения и запустите страницу в браузере (тупо щелкните по ярлычку 2 раза). Убедитесь, что работа выполнена верно, и возвращайтесь в редактор.
6. Теперь создадим тело сайта, то есть текст. Для этого используем тэг <body>... </body> Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. Думаю, Вы догадались, куда поместить эту пару, и что поместить между этими метками…
Но все-таки уточним: первое <body> пишем после тэга, закрывающего описание названия, то есть </head>, но перед тэгом, закрывающим документ, то есть </html>. Внутри напишите все, что вашей душе угодно (постарайтесь побольше, потому как нам потом еще нужно будет с этим работать).
Например:
<html>
<head>
<title> Мой сайт </title>
</head>
<body>
Здравствуйте, уважаемые! Это мой первый сайт, моя гордость, моя прелесть… Да, и сам я ничего… Ведь правда?
Перестаньте списывать!!! Придумайте что-нибудь своё!!!
</body>
</html>
Снова проверяем, что у нас получилось.
Рис.2 Вид дополненного документа в браузере. 7. Согласитесь, не очень красиво… Но это можно исправить. Просто используем Метки вида <Hi> (где i — цифра от 1 до 6). <H1>... </H1> — <H6>... </H6> описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий. Пробуем:
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<H1> Здравствуйте, уважаемые! </H1>
Это мой первый сайт, моя гордость, моя прелесть… Да, и сам я ничего… Ведь правда?
|
|
|
<H4> Перестаньте списывать!!! Придумайте что-нибудь своё!!! </H4>
</body>
</html>
Вот, уже лучше, но все равно что-то не то. Что именно? Проверь, посмотрев через браузер.
Рис.3 Вид редактированного документа в браузере. 8. Текст лежит бесформенной грудой печатных знаков. Безусловно, так быть не должно! На помощь нам придут <P>... </P> Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
*** Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим все, что мы знаем:
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<H1 ALIGN=CENTER> Здравствуйте, уважаемые!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P> Это мой первый сайт, моя гордость, моя прелесть… </P>
<P ALIGN=CENTER> Да, и сам я ничего… </P>
<P ALIGN=RIGHT> Придумай че-нить сваёёё!!! </body>
</html>
Рис.3 Окончательный вид документа в браузере. С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ.
Лабораторная работа №2
|
|
|
