Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

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

Добавляем статью на HTML-страницу

Урок №4
Добавляем текст в HTML-страницуДобавляем статью в HTML-страницу.

В первых трех уроках, мы с вами изучили что такое HTML, как создавать HTML-страницы, а также разобрали код HTML-документа.

Теперь нам нужно наполнить свою HTML страницу контентом (статьёй). Обычно статья содержит заголовки и абзацы (параграфы). Также в статье могут присутствовать фотографии, ссылки, списки, аудио и видео файлы. Как добавить всё это на HTML-страницу, мы рассмотрим в этом и последующих уроках.

Вот как на данный момент выглядит код, нашего файла index.html:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h1>Заголовок статьи</h1>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Сначала добавим в HTML-документ, статью. Для примера я выбрал статью, которая рассказывает об удивительном и загадочном звере — снежном барсе, статья содержит один заголовок и два абзаца:

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
относительно короткими лапами, небольшой головой и очень длинным хвостом. 
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
пятнами.
    
Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
приблизительным оценкам их количество варьируется в районе около 10 тысяч 
особей. По состоянию на 2016 год, охота на снежных барсов повсеместно
запрещена.

В прошлом уроке мы выяснили, что между тегами <title> </title> — находится текст обозначающий название страницы. Так как наша статья посвящена снежному барсу, то мы сделаем название страницы следующим:
Страница о снежном барсе

<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Заголовок статьи</h1>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Между тегами <h1> </h1> помещают текст, который является заголовком статьи, впишем туда следующее:
Снежный барс

<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
 <h1>Снежный барс</h1>
 <p>
  Абзац статьи.</p>
 </body>
</html>

Между тегами <p> </p> помещают текст, который является абзацем статьи. В нашей статье о снежном барсе имеется два абзаца, добавим в начало каждого абзаца открывающий тег <p>, а в конец каждого абзаца закрывающий тег </p>. Обрамив любой текст тегами p, мы сделаем данный текст абзацем.

В итоге, HTML-документ файла index.html, должен выглядеть так:

<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв файл index.html с помощью браузера, вы должны увидеть примерно следующее

Читать далее: Добавляем фотографию на HTML-страницу

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: HTML, Статья
Статья создана: 15 Окт 2014
Статья обновлена: 7 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget