Создаем свой сайт на HTML5 и CSS3

Тема в разделе 'HTML5', создана пользователем Admin, 25 сен 2011.

  1. Admin Админ

    Здравствуйте уважаемые посетители нашего форума. В данной стать я покажу, как создать свой собственный на HTML5. Итак приступим.

    Делаем разметку в HTML:
    HTML:
    <?php
    $start_time = microtime();
    $start_array = explode(" ",$start_time);
    $start_time = $start_array[1] + $start_array[0];
    ?>
    <!DOCTYPE html>
    <html id="home" lang="ru">
    
    <head>
    <meta charset="utf-8" />
    <meta name="description" content="Личный HTML5 сайт Андрея Хомлюка. Портфолио работ для фриланса." />
    <meta name='yandex-verification' content='4994babb778881d2' />
    <title>Личный HTML5 сайт Андрея Хомлюка</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="shortcut icon" href="http://akhomlyuk.ru/favicon.ico">
    </head>
    
    <body>
    
    <div class="main-nav">
    
    <div class="valid">
    <img alt="Firefox valid" src="../images/ff-mini.png" />
    <img alt="Opera valid" src="../images/opera-mini.png" />
    <img alt="Chrome valid" src="../images/chrome-mini.png" />
    </div>
    Пример сайта на HTML5
    <br />
    <br />
    </div>
    
    <div class="container">
    
    <header>
    
    <div class="header">
    <img class="html5badge" alt="Логотип HTML5" src="images/html5-badge.png" />
    <p>Данный HTML5 сайт скоро начнет работать! :)</p>
    А пока можете посетить наш HTML5 <a href="http://validweb.ru/" title="Форум веб программистов">форум веб программистов</a>
    </div>
    
    </header>
    
    <section id="content">
    
    <aside>
    <div class="aside">
    
    <div class="menu1-name">Навигация:</div>
    <menu class="navi">
    
    <li><a href="Products.html">Products</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Support.html">Support</a></li>
    <li><a href="Order.html">Order</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="About.html">About</a></li>
    </menu>
    </div>
    </aside>
    
    <div class="center">
    
    <article>
    
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    <p>Lorem ipsum dolor sit amet, ipso es illum in modo genito in modo genito in modo compungi.</p>
    
    </article>
    
    </div>
    </section>
    
    </div>
    
    <section id="footer">
    <footer>
    
    <div class="footer">
    <div class="valid">
    <img alt="CSS3 valid" src="../images/css3-valid.png" />
    <img alt="HTML5 valid" src="../images/html5-valid.png" />
    </div>
    © Andrey Kh. 2011 Built using HTML5, CSS3
    <br />
    <?php
    $end_time = microtime();
    $end_array = explode(" ",$end_time);
    $end_time = $end_array[1] + $end_array[0];
    $time = $end_time - $start_time;
    
    printf("Страница сгенерирована за %f секунд",$time);
    ?>
    
    </div>
    
    </footer>
    </section>
    
    <!-- Yandex.Metrika counter -->
    <div style="display:none;"><script type="text/javascript">
    (function(w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter9999802 = new Ya.Metrika({id:9999802,
                        trackLinks:true,
                        accurateTrackBounce:true});
            }
            catch(e) { }
        });
    })(window, "yandex_metrika_callbacks");
    </script></div>
    <script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script>
    <noscript><div><img src="//mc.yandex.ru/watch/9999802" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
    <!-- /Yandex.Metrika counter -->
    
    </body>
    </html>
    Указываем доктайп (DOCTYPE)
    HTML:
    <!DOCTYPE html>
    - это доктайп HTML5

    Советую сразу указать кодировку сайта и лучше чтобы это было UTF-8.
    Код:
    <meta charset="utf-8" />
    Идем дальше.

    В HTML5 очень развита семантика, поэтому указываем различные секции новыми тегами, например:
    <header>

    Дальше, в хедере пишем то, что нам нужно в заголовке.
    Используем Дивы (<div>), они не умерли, с ними и работаем, задаем и класс и работаем в css3.

    Вот CSS код:
    HTML:
    body {
      font: normal 16px/20px Tahoma, Helvetica, sans-serif;
      background: url(/images/bg.gif) repeat 0% 0% #eaeaea;
      margin: 0;
      margin-top: 20px;
      padding: 0;
    }
    
    header, nav, section, article, aside, footer  {
        display: block;
    
    }
    
    .container {
    width: 1000px !important;
    margin: 0 auto;
    }
    
    .header {
    border: 1px solid black;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    }
    
    .aside {
      float: left;
      border: 1px solid black;
      padding: 10px;
      }
    
    .center {
      border: 1px solid black;
      padding: 10px;
      margin-left: 250px;
      margin-bottom: 5px;
      }
    
    .footer {
      width: 99%;
    
      clear: both;
      padding: 5px;
      margin: 0 auto;
      position: relative;
      background: url(/images/bg-footer.gif) repeat scroll 0 0 #C7C7C7;
      text-align: center;
      }
    
    .main-nav {
      width: 99%;
      clear: both;
      padding: 5px;
      margin: 0 auto;
      text-align: center;
      font-weight: bold;
      background: url(/images/bg-footer.gif) repeat scroll 0 0 #C7C7C7;
      }
    
    .html5badge {
      position: relative;
      float:left;
      top: 10px;
      left:10px;
      border: 0;
    }
    
    .valid {
    float: left;
    vertical-align: middle;
    }
    
    menu {
      width: 180px;
      list-style-image: url(/images/list-type.png);
      }
    
    .menu1-name {
      font-weight: bold;
      margin-top: 15px;
      }
    
    a  {
      color: #4e98cc;
      text-decoration: underline;
    }
    
    a:hover , a:active {
      color: #4e98cc;
      text-decoration: none !important;
    }
    
    
    В следующий раз опишу все подробнее.

    Пример HTML5 сайта здесь: ***Для просмотра ссылок необходимо войти или зарегистрироваться***
    XmP нравится это.

Поделиться этой страницей