Пошаговая инструкция создания сайта на html коде / Контент сайта

Контент сайта

Контент сайта будем размещать в первой ячейке нашей таблицы:

<td width="593px"> Добро пожаловать на мой сайт! </td>

Создадим в ней блок для контента <div> с именем идентификатора "content". В него перемещается наша произвольная фраза:

<div id="content"> Добро пожаловать на мой сайт! </div>

Но визуально пока что ничего не меняется.

Зададим отступы от рамки таблицы с помощью свойства стиля margin, которое задает внешние отступы, если вы помните:

margin: ...px ...px ...px ...px; <!-- Внешний отступ от краев, задается в пикселях или % -->

margin: верхний правый нижний левый;

Зададим пока что все отступы по 20px, при необходимости потом подкорректируем их, кому как захочется:

<div id="content" style="margin: 20px 20px 20px 20px;">

Теперь займемся самим контентом и напишем первую статью. Работаем внутри блока для контента.

Заголовок статьи

Для заголовков статей предназначен специальный элемент <h1>, который важно использовать на каждой странице сайта.

Всего существует 6 уровней заголовков. <h1> из них самый крупный, <h6> - самый мелкий.

<h1>Добро пожаловать на мой сайт!</h1>

С помощью свойств стиля style, при желании, можно поменять шрифт и цвет заголовка, сделать надпись с наклоном:

font-family: Arial; <!-- Шрифт текста -->

font-style: italic; <!-- Наклонный шрифт -->

color: #код цвета/название цвета; <!-- Цвет текста -->

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

Для заголовков статей на своем сайте я использую шрифт "Arial".

Подзаголовок статьи

Для подзаголовков статьи используем элемент <h2>:

<h2>Подзаголовок статьи</h2>

Напишем его после заголовка:

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

На своем сайте, для подзаголовков я также использую шрифт "Arial" и задаю фон тексту с помощью свойства стиля background:

background: #цвет фона/цифровой код; <!-- Фон -->

<h2 style="background: #f2eae3;">

Текст статьи

Для написания текстов предназначен элемент <p>, который называется "абзац" и служит для создания абзацев текста:

<p>Первый абзац</p>

<p>Второй абзац</p>

У вас уже есть текст для первой статьи? Его можно написать самому, а можно для пробы взять любой готовый.

Я возьму текст своей статьи с главной страницы этого сайта.

Работаем пока с первым абзацем:

<p>Добро пожаловать! Вы когда-нибудь хотели сделать себе сайт/блог? Этот сайт я сделала себе сама. На его страницах расскажу пошагово, как я его сделала. Мой сайт создан не на WordPress и ни на какой-нибудь другой готовой платформе или конструкторе. Это - "ручная работа" на html коде.</p>

Поработаем над стилем style для первого абзаца. Зададим шрифт font-family, размер шрифта font-size, цвет color - с этими свойствами стиля мы уже знакомы.

Новое свойство - расстояние между строчками абзаца line-height.

font-family: ...; <!-- Шрифт текста -->

font-size: ...px; <!-- Размер текста, зададим в пикселях -->

color: #код цвета/название; <!-- Цвет текста -->

line-height: ...; <!-- Расстояние между строками, задается числом -->

Есть некоторые рекомендации по оформлению текста на сайте для лучшей читабельности и восприятия:

  • текст не должен быть мелким;
  • шрифт предпочтительнее без засечек;
  • цвет также предпочтительнее взять темно-серый.;
  • Следовать этим рекомендациям или нет, каждый решает сам. Лично я им следую.

    Подставляю свои значения:

    <p style="font-family: Verdana, Arial; font-size: 16px; color: #474746; line-height:1.5;">

    Два вида шрифта стоит как раз на тот случай, если у кого-то из посетителей сайта в компьютере нет шрифта "Verdana".

    Можно еще сделать отступ абзаца - красную строку: text-indent:

    text-indent: ...px; <!-- Отступ абзаца - красная строка, зададим в пикселях -->

    Например:

    text-indent: 40px;

    И, я еще использую свойство стиля text-align для выравнивания текста по обеим сторонам, хотя вебмастера не рекомендуют так делать:

    text-align: justify; <!-- Выравнивание текста по обеим сторонам -->

    <p style="font-family: Verdana, Arial; font-size: 16px; color: #474746; line-height:1.5; text-indent: 40px; text-align: justify;">

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


    Файл index.html:

    Следующий шаг - Подвал сайта