Статья для сайта

Итак, продолжаем работу над созданием «Простого сайта».В прошлый раз, в 5 уроке, мы с вами добавили на страницу сайта таблицу для контента. В этом уроке мы заполним таблицу контентом.

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

Изначально, статья для сайта, была мною написана в текстовом редакторе Word. Для того, чтобы форматирование Word не передавалось в визуальный HTML редактор, я перенес статью в редактор Блокнот.

Добавляем название статьи на страницу сайта

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

Следующим шагом, откройте статью в блокноте. Сначала, давайте добавим на веб страницу название статьи.

Выделите название статьи в блокноте и далее, кликните на название статьи правой кнопкой мыши. В контекстном меню окна выбираем копировать. Теперь переходим к визуальному редактору.

В визуальном редакторе, кликаем правой кнопкой в таблицу для контента и в новом окне выбираем «Вставить».

Размер и цвет шрифта названия статьи

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

Для названия статьи, выберем размер шрифта, равный размеру заголовка второго уровня – h2.

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

Выбираем нужный цвет, и кликаем «ОК».

Добавляем статью на сайт

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

Кликаем правой кнопкой в таблицу для контента и в контекстном меню выбираем «Вставить». Статья будет добавлена на страницу.

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

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

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

Но текст статьи прижался вплотную к левой рамке таблицы.

Меняем отступ статьи от рамки таблицы

Чтобы увеличить отступ текста от рамки таблицы, воспользуемся свойствами таблицы для контента. Выберем в панели инструментов визуального редактора NVU, инструмент «Таблица».

Далее, в окне свойств таблицы, выбираем одноименную вкладку – «Таблица». Здесь нас интересует параметр: «Поля внутри ячейки». Когда мы создавали таблицу для контента, этому параметру мы задали значение «0».

Чтобы увеличить поля внутри ячейки таблицы, и этим самым увеличить отступ от рамки таблицы до текста, присвоим параметру «Поля внутри ячейки» значение «12».

Сохраним изменения в редакторе, нажав кнопку «Сохранить». Обновляем нашу страницу в браузере и смотрим что получилось.

Теперь добавленная статья имеет нужный нам отступ и соответственно текст статьи смотрится вполне нормально и читабельно.

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

Перейти к Уроку 7: Как добавить картинку на сайт

Перейти к Уроку 5: HTML таблица - для контента