Ну что же, для того, чтобы завершить работу над главной страницей сайта, нашего курса - «Как создать сайт в блокноте», нам осталось заполнить блок с контентом или другими словами – наполнить страницу сайта контентом.

Контент – это полезная информация, размещенная на сайте, которую ищут люди, и если контент, который Вы будете размещать на своем сайте, будет интересен посетителям Вашего сайта, тогда Ваш ресурс будет востребован и соответственно станет посещаемым.

Наполнение сайта контентом – это часть работы, которую делает веб мастер перед запуском сайта. Дело в том, что на начальной стадии создания сайта очень много различной технической работы, которую приходится решать веб мастеру.

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

Итак, нам с Вами осталось на главную страницу добавить контент, в нашем случае, на главной странице сайта, в качестве контента, мы разместим статью, с точно таким же названием, как и данный курс: «Как создать сайт в блокноте».

В тексте статьи я пишу о том, что с помощью курса «Как создать сайт в блокноте», читатель научиться основам HTML, научиться создавать html страницы и, в конечном счете, научится создавать простые html сайты.

Ну а теперь, давайте откроем блокнотом главную страницу сайта, и добавим в нее статью.

Для добавления контента на страницу сайта, мы с Вами зарезервировали специальный блок – ячейку таблицы, где в данный момент у нас помещена фраза - «Контент» (Content).

Наша задача – добавить в ячейку таблицы статью: «Как создать сайт в блокноте». Статья мною написана в программе Word.

Открываем статью в Word, выделяем всю статью вместе с названием, копируем и переходим к редактированию главной страницы сайта, которая у нас открыта в блокноте.

Вставляем статью в ячейку для контента, предварительно удалив оттуда слово - «Контент».

В блокноте жмем кнопку сохранить и открываем главную страницу сайта в браузере, чтобы посмотреть изменения.

Мы видим, что текст добавился, но статья в окне браузера у нас идет сплошным массивом, то есть теперь, нам нужно добавленный текст, правильно форматировать, или другими словами разметить на странице, так как нам нужно.

Ну что же, для начала займемся названием или заголовком статьи.

Название (заголовок) статьи, давайте разместим по центру блока с контентом и зададим размер шрифта тегом h2, то есть, заголовком второго уровня:

<center><p><h2>Как самому создать сайт.</h2></p></center>

Обратите внимание, для выравнивания заголовка статьи по центру, мы использовали тег <center>. Заголовок мы разместили в параграфе, который задан тегом <p>, размер текста заголовка статьи задан тегом <h2>.

Сохраняем изменения в блокноте и обновляем страницу в браузере - на мой взгляд, получилось то, что надо! Переходим к разметке остального текста.

Теперь наша задача - разбить текст нашей статьи на параграфы, так же как он разбит в программе Word на абзацы.

То есть наша задача - поставить перед каждым абзацем тег <p>,и в конце абзаца (или в нашем случае парграфа), закрыть его тегом </p>.

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

Работа эта достаточно простая, но требует некоторого внимания, и самое главное не забывайте корректно проставить открытие и закрытие тега параграфа <p> текст . . . </p>.

То есть каждое открытие параграфа тегом <p>, должно быть обязательно закрыто тегом </p>.

После окончания редактирования параграфов, вновь кликаем в блокноте на кнопку сохранить, и обновляем страницу браузера, чтобы посмотреть результаты редактирования.

Все нормально, текст разбит на абзацы и легко читается! Но бросается в глаза то, что текст статьи, очень близко прижался к рамке таблицы слева.

Для того, чтобы изменить отступ от рамки до содержимого ячейки таблицы, можно использовать параметр «cellpadding» тега <table>.

В 10 уроке нашего курса «Как создать сайт в блокноте», мы с Вами создавали таблицу для главной страницы. В качестве аргумента параметра «cellpadding», мы задали ноль, то есть отступ до содержимого ячейки мы сделали минимальны.

Теперь нас это не устраивает, давайте значение параметра cellpadding=0, заменим на 5 пикселей:

<table align="center" width="65%" cellspacing="0" cellpadding="5" border="1">

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

Появился отступ в 5 пикселей и теперь, текст статьи на главной странице нашего сайта, смотрится нормально.

В связи с тем, что мы добавили достаточно много текста в ячейку таблицы, высота таблицы автоматически увеличилась, соответственно увеличилась и высота ячейки таблицы, где у нас находится меню.

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

Чтобы переместить меню вверху, воспользуемся свойствами вертикального выравнивания тега ячейки таблицы - <td>.

Откроем htmlсправочник и посмотрим описание тега <td>.

Параметром, отвечающим за вертикальное выравнивание содержимого в ячейки таблицы, является – valign.

С помощью параметра – valign, содержимое ячейки таблицы можно выровнять:

по верхнему краю: valign="top"

посередине: valign="middle"

и по нижнему краю:valign="bottom"

значение выравнивания по умолчанию, как мы с Вами уже убедились – посередине (middle).

Ну что же, теперь давайте применим на практике полученную информацию из htmlсправочника.

Добавим в блокноте для ячейки таблицы меню, параметр выравнивания:

<tdwidth="170"valign="top">

Обновляем страницу браузера, и смотрим результат – меню сайта теперь у нас находится в верхней части ячейки таблицы.

Просматриваем еще раз главную страницу, если все нормально, и подправлять ничего не надо, то можете себя поздравить! Работу над главной страницей сайта мы с Вами закончили!

Переходим к созданию остальных страниц сайта!

Перейти к Уроку 19: Создание страниц сайта

Перейти к Уроку 17:Футер сайта

Автор: Виктор Милованов