Продолжаю свой цикл статей по верстке. Сегодня мы непосредственно к ней и приступаем. А именно -напишем HTML код нашего сайта.

Для начала наведем порядок с нашими файлами. Создайте папку, в которой будет находиться ваш сайт, папку images для изображений (уже создана), а в саму папку будем помещать файлы кода. Создайте файл index.html.

Так же заодно можете создать файл стилей style.css (в той же папке)

Открываем индекс в текстовом редакторе и пишем следующие строки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>

1-3 строчки – это инструкции-предписания браузерам (которые, впрочем, можно без особого ущерба опустить, хотя их наличие является хорошим тоном).

Теперь пишем , в который включаем заголовок title

<head>
    <title>MySite</title>
</head>

Заголовок можно написать любой. Далее допишите код, закрыв все основные тэги.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>MySite</title>
  </head>
  <body>
     <!-- content goes here -->
  </body>
</html>

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

<body>
    <div id="header">
    </div><!--end header -->

    <div id="content">
    </div><!--end content-->

    <div id="sidebar">
    </div><!--end sidebar-->

    <div id="footer">
    </div><!--end footer-->

</body>

Как вы успели заметить, мы идем по принципу от общего к частному – сначала прописываем общие элементы, затем работаем с каждым отдельно.

Помещаем все контейнеры кроме футера сначала в контейнер “main”, затем в контейнер “container” (см. картинку)

div id="main">
    <div class="container">
         <div id="header">
         </div><!--end header -->

         <div id="content">
         </div><!--end content-->

         <div id="sidebar">
         </div><!--end sidebar-->

    </div><!--end main container-->
</div><!--end main-->

Подвал оформляем отдельно:

<div id="footer">
    <div class="container">
    </div><!--end footer container-->
</div><!--end footer-->

Добавление контента

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

Шапка

Добавляем в шапку 2 дива -для логотипа и слогана:

<div id="header">
    <div id="logo">
        </div>
    <div id="tagline">
        </div>
</div><!--end header -->

А теперь запишем все содержимое шапки:

<div id="header">
    <div id="logo">
     <h1>Logo</h1>
    </div>
    <div id="tagline">
        <h3>And a little tagline, too.</h3>
    </div>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end header -->

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

Основное поле с контентом

<div id="content">
        <h2>Lorem ipsum, Dolor sit</h2>
        <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
        <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
            Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
            Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.
            Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>
        <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.
            Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.
            Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,
        gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
    <div id="news">
        <h3>Latest Updates</h3>
        <h4>Vestibulum id nulla eu sapien pellentesque</h4>
        <small>June 1, 2009</small>
        <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
            facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
            Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    <h4>Vestibulum id nulla eu sapien pellentesque</h4>
    <small>June 1, 2009</small>
    <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,
        facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.
        Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    </div><!--end news-->
</div><!--end content-->

Этот код содержит текст, который будет отображаться, а так же его размету по заголовкам, подзаголовкам и абзацам.

Сайдбар

В сайбаре у нас несколько списков. Запишем это:

<div id="sidebar">
                <div id="subscribe">
                    <h3>Subscribe!</h3>
                    <ul>
                        <li><a href="#">Subscribe via RSS</a></li>
                        <li><a href="#">Get Email Updates</a></li>
                        <li><a href="#">Follow us on Twitter</a></li>
                    </ul>
                </div>
                <div id="popular">
                    <h3>Popular Items</h3>
                    <ul>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
                        <li><a href="#">Lorem ipsum dolor site amet</a></li>
                        <li><a href="#">Proin tempor erat sit tene</a></li>
                    </ul>
                </div>
                <div id="contributors">
                    <h3>Contributors</h3>
                    <ul>
                        <li><a href="#">John Smith, freelance writer</a></li>
                        <li><a href="#">Jack McCoy, designer</a></li>
                        <li><a href="#">Lenny Briscoe, editor</a></li>
                        <li><a href="#">John Smith, martketing</a></li>
                    </ul>
                    <a href="#">Join Our Team</a>
                </div>
            </div><!--end sidebar-->

Подвал

<div id="footer">
        <div class="container">
            <p>Copyright © 2009  MySite <br />
            All Rights Reserved</p>
        </div><!--end footer container-->
    </div><!--end footer-->

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

Сохраните документ в html формате и откройте его в любом браузере. Если вы набрали код правильно, ваша страница должна принять такой вид:

На этом пока всё. В следующей, заключительной части урока я расскажу о том, как правильно оформить оформление сайта с помощью CSS.

To be continued…

5 Комментариев на “Создаем веб-макет – III этап: верстка в HTML”

  1. YoS Says:

    супер, продолжай в том же духе!!!

  2. Yuriy Says:

    Результат превзошел мои ожидания..
    думал будет немного не так, а натянуть на движок?

  3. admin Says:

    Спасибо за комментарии, обязательно продолжу! Про натягивание на движок – хорошая идея, у меня была мысль на эту тему. А какой движок Вас конкретно интересует? Wordpress?

  4. JVN Says:

    “1-3 строчки – это инструкции-предписания браузерам (которые, впрочем, можно без особого ущерба опустить, хотя их наличие является хорошим тоном).”
    Если Вас не волнует – как страница будет отображаться в различных браузерах, то можно опустить. А, к наличию хорошего или иного тона – отношение не имеет.

  5. government grants for women Says:

    The way you write make it really trouble-free to read. And the template you use, wow. It really is a really decent combination. And I am wondering what’s the name of the theme you use?