Наповнення сайту контентом - урок 18

Ну що ж, для того, щоб завершити роботу над головною сторінкою сайту, нашого курсу - «Як створити сайт в блокноті», нам залишилося заповнити блок з контентом або іншими словами - наповнити сторінку сайту контентом.

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

Наповнення сайту контентом - це частина роботи, яку робить веб майстер перед запуском сайту. Справа в тому, що на початковій стадії створення сайту дуже багато різної технічної роботи, яку доводиться вирішувати веб майстру.


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

Отже, нам з Вами залишилося на головну сторінку додати контент, в нашому випадку, на головній сторінці сайту, в якості контенту, ми розмістимо статтю, з точно такою ж назвою, як і даний курс: «Як створити сайт в блокноті».

У тексті статті я пишу про те, що за допомогою курсу «Як створити сайт в блокноті», Новомосковсктель навчитися основам HTML, навчитися створювати html сторінки і, в кінцевому рахунку, навчиться створювати прості html сайти.

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

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

Відкриваємо статтю в Word, виділяємо всю статтю разом з назвою, копіюємо і переходимо до редагування головної сторінки сайту, яка у нас відкрита в блокноті.

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

У блокноті тиснемо кнопку зберегти і відкриваємо головну сторінку сайту в браузері, щоб подивитися зміни.

Ну що ж, для початку займемося назвою або заголовком статті.

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

Як самому створити сайт.

Зверніть увагу, для вирівнювання заголовка статті по центру, ми використовували тег

. Тема ми розмістили в параграфі, який заданий тегом

, розмір тексту заголовка статті заданий тегом

.

Зберігаємо зміни в блокноті і оновлюємо сторінку в браузері - на мій погляд, вийшло те, що треба! Переходимо до розмітки решти тексту.

Тепер наше завдання - розбити текст нашої статті на параграфи, так само як він розбитий в програмі Word на абзаци.

Тобто наше завдання - поставити перед кожним абзацом тег

,і в кінці абзацу (або в нашому випадку парграфа), закрити його тегом

.

Робота ця досить проста, але вимагає деякого уваги, і найголовніше не забувайте коректно проставити відкриття і закриття тега параграфа

текст.

.

Тобто кожне відкриття параграфа тегом

, має бути обов'язково закрито тегом

.

Після закінчення редагування параграфів, знову натискаємо в блокноті на кнопку зберегти, і оновлюємо сторінку браузера, щоб подивитися результати редагування.

Все нормально, текст розбитий на абзаци і легко Новомосковскется! Але впадає в око те, що текст статті, дуже близько притулився до рамки таблиці зліва.

Для того, щоб змінити відступ від рамки до вмісту елементу таблиці, можна використовувати параметр «cellpadding» тега

.

У 10 уроці нашого курсу «Як створити сайт в блокноті», ми з Вами створювали таблицю для головної сторінки. Як аргумент параметра «cellpadding», ми задали нуль, тобто відступ до вмісту осередку ми зробили мінімальні.

Тепер нас це не влаштовує, давайте значення параметра cellpadding = 0, замінимо на 5 пікселів:

Зберігаємо зміни в блокноті і знову дивимося, як сторінка відображається у вікні браузера, для цього знову оновлюємо сторінку.

З'явився відступ в 5 пікселів і тепер, текст статті на головній сторінці нашого сайту, виглядає нормально.

У зв'язку з тим, що ми додали чимало тексту в комірку таблиці, висота таблиці автоматично збільшилася, відповідно збільшилася і висота елементу таблиці, де у нас знаходиться меню.

Тому, меню нашого сайту виявилося посередині комірки таблиці. Зрозуміло, що меню повинно знаходитися у верхній частині сайту.

Щоб перемістити меню вгорі, скористаємося властивостями вертикального вирівнювання тега елементу таблиці -

.

Відкриємо htmlсправочнік і подивимося опис тега

.

Параметром, що відповідає за вертикальне вирівнювання вмісту в осередку таблиці, є - valign.

За допомогою параметра - valign, вміст комірки таблиці можна вирівняти:

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

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

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

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

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

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

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

Переходимо до створення інших сторінок сайту!