Rambler's Top100

Вставляем текст

Для наполнения страницы контентом, а контент включает в себя заголовок обозначающий тему страницы, сам текст, картинки, видео аудио и другое. Заголовок текста заключается в теги <h1> </h1>

Если мы просто заголовок заключим в теги теги <h1> </h1> , то по умолчанию текст заголовка будет черного цвета и прижмется к левому краю, например текст заголовка INTRODUCTION, на странице это будет выглядеть ТАК

Чтобы расположить заголовак посредине страницы, задать нужный цвет и размер шрифта, а так же отступы сверху и снизу заголовка, в файле CSS прописываем:

#content h1 {
padding-top: 30px;
padding-bottom: 30px;
color: #556B2F;
text-align:center;
font-size: 30px;
}

Теперь заголовок расположится посредине и шрифт будет заданного цвета, на странице это будет выглядеть   ТАК

Весь текст нужно разделить на абзацы, каждый абзац заключить в теги <p> </p>, не делайте слишком длинные абзацы, их неудобно читать, и искать строку, если человек отвлёкся на мнгновение от чтения. Чтобы текст отформатировать так как нужно вам, тегу <p> нужно задать стили в файле CSS

#content p {
font-family: arial,verdana, sans-serif;
text-align:justify;
PADDING-left:15px;
PADDING-right:15px;
font-size: 14px;
}

В html файл, в контейнер обозначенный <div id="content"> </div>, после открывающего тега,вставляем текст разделённый на абзацы

<div id="content">

<p> Здесь пишется текст</p>
<p> Здесь пишется текст</p>
<p> Здесь пишется текст</p>

</div>

В результате наш условный текст расположится с отступами от левого и правого краев на 15 пикселей и будет выравнен с обеих сторон ТАК.

Если вам нужно расположить текст как то no по другому, с другим шрифтом, смотрите в разделе Текст и шрифты в css и применяйте в свойствах css другие значения

Чтобы вставить картинки к тексту в файле HTMl пишем следующий код:

<p><img src="gn.jpg"> Здесь будет текст</p>

A чтобы текст обтекал картинку слева или справа и сделать небольшой отступ текста от картинки, в файле CSS пропишем следующие свойства:

#content img{
float:left;
padding-right: 5px;
}

Теперь текст с картинкой будет смотреться ТАК Если картинку нужно расположить справа, то в файле CSS в свойстве ставим right :   float:right;, тогда картинка будет расположена справа, а текст её будет обтекать слева

Ещё можно вставить видеоролик, если нет своего, то можно взять на youtube заходите по адресу http://www.youtube.com/, выбираете ролик по теме вашего сайта, запускаете этот ролик . Под роликом есть ссылка Поделится, затем нажимаете HTML-код, копируете открывшийся код и вставляете в нужное место на странице сайта, на странице это будетТАК

HTML код страницы на этом этапе смотрите здесь

Код CSS-файла смотрите здесь

Нам осталось заполниить правую колонку, это сделаем на следующей странице, нажмите кнопку 10

 

Rambler's Top100 Яндекс цитирования