Beispiel:HTML5-Seitenstruktur-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML5-Seite mit Grundstruktur - 3</title>

<style>

 body {
   min-height: 100dvh;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr auto;
 }
 header {
   background: #ffebe6;
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 1em;
 }
 header p {
   font-size: 2em;
   font-weight: bold;
 }
 nav {
   background: #fdfcf3;
 }
 main {
   background: #ebf5d7;
 }
 footer {
   background: #e6f2f7;
 }

</style>

</head>

<body>

 <header> <img src="https://src.selfhtml.org/designs/design05/img/logo.svg" alt="Logo">

Name der Seite

 </header>
 
 <nav>
  • <a href="#link_1.html">Wiki</a>
  • <a href="#link_2.html">Blog</a>
  • <a href="#link_3.html">Forum</a>
 </nav>
 
 <main>

Überschrift des Artikels

weiterer Inhalt

 </main>
 
 <footer> <a href="kontakt.html">Kontakt</a>

© 2014 by selfHTML

 </footer>

</body> </html>