tapeta Moderního Webu

Rozšířená šablona

3D
2D

Rozšířená šablona

<!doctype html>
  <html lang="cs">
  <head>    
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style/style.css">
    <script src="js/script.js"></script>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <article>
      <section></section>
      <section></section>
      <section></section>
    </article>
    <aside></aside>
    <footer></footer>
  </body>
</html>

Legenda:

  • header - hlaviška, záhlaví
  • nav - navigace, menu
  • article - obsah, článek, produkt...
  • section - specifická část záhlaví, zápatí nebo obsahu webu
  • aside - informace nevztahující se přímo k obsahu (reklama, odkazy, bannery, postranní panel, kontaktní informace, novinky, hodnocení...)
  • footer - pata, zápatí

Příklady:

Pro ukázku zde uvedu několik příkladů jak by mohla vypadat základní kostra webové prezentace po úpravě za použití css.

Příklad 1:

header
article
section
section
section
aside
<header></header>
<nav></nav>
<article>
  <section></section>
  <section></section>
  <section></section>
</article>
<aside></aside>
<footer></footer>

Příklad 2:

header
article
section
section
section
aside
aside
<header></header>
<nav></nav>
<article>
  <section></section>
  <section></section>
  <section></section>
</article>
<aside></aside>
<aside></aside>
<footer></footer>

Příklad 3:

section
header
article
section
section
section
section
aside
section
aside
<header>
  <section></section>
</header>
<nav>
  <section></section>
</nav>
<article>
  <section></section>
  <section></section>
  <section></section>
</article>
<aside>
  <section></section>
</aside>
<aside>
  <section></section>
</aside>
<footer></footer>

Můžete i více experimentovat. Například jedna z mích prvních šablon sváděla k tomu mít více hlaviček, zápatí i článků. Ve výsledku i 10 na jednu html stránku. Což se dá domyslet na posledním obrázku.


moderniweb.com © 2017