MezData-Logo

Typische HTML5 Seite

Welche Bestandteile einer Webseite sind typisch?

Wo sind diese Bestandteile auf der Webseite zu finden?

Welche neuen Tags wurden in HTML5 dafür eingeführt?

 

Beispiel einer Seite

Einfache Seite, Sie können im Browser auskommentierte CSS-Elemente einschalten und ausprobieren

[typische_seite_.html] [stylesheet_.css]
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet_.css">
  <link rel="alternate stylesheet" href="stylesheet.css" title="responsive">
  <title>HTML5-Seite mit Grundstruktur</title>
</head>

<body>
  <header>
    <a href="https://mezdata.de"><img src="../../graph/mezdata.png" alt="logo"></a>
    <h1>HTML5-Seite mit Grundstruktur</h1>
    <nav>
      <ul>
        <li><a href="#link_1.html">Startseite</a></li>
        <li><a href="#link_2.html">Unterseite 1</a></li>
        <li><a href="#link_3.html">Unterseite 2</a></li>    
      </ul>
    </nav>
  </header>
  <main>
      <h2>Beispiel einer einfachen Seite</h2>
      <p><img class="ileft" src="graph/waldweg.jpg" width="200" height="300" alt="Waldweg">Text Bla Bla</p>
  </main>
  <footer>
     <p>© Oliver Mezger '2018 <a href="https://mezdata.de">mezdata.de</a></p>
  </footer>
</body>
</html> 		body {
  font-family: sans-serif;
}

.ileft{
  float: left;
  margin-right: 1em;
}

header, main, footer {
  /* background-color: #ccc;
   border: thin solid red; */
  border-radius: .5em;
  clear: both;
}

header img {
    /*float: left; */
}

nav ul{
    /*list-style: none;
    display: flex;
    margin: 0 20px ;
    padding: 0px;*/
}

nav a {
    /*display: block;
    padding: 0.3em 0.3em 0.2em;
    margin: 0.3em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-size: 0.8em;
    border: 1px solid darkblue;
    border-radius: 5px;
    box-shadow: 0 2px 5px white inset;
    color: darkblue;
    background-color: gold;*/
}

nav a:focus,
nav a:hover{
    /*color: gold;
    background-color: darkblue;*/
}

Bilder: [strand.jpg] [waldweg.jpg]

Mit responsiver Formatierung

Ansicht: [typische_seite.htm]

Quellcode [stylesheet.css]
body {
  font-family: sans-serif;
  margin: 0 auto;
  max-width: 60em;
}
 
header, main, footer {
  border: thin solid white; 
  /* background-color: #ccc;
   border: thin solid red; */
  border-radius: .5em;
  clear: both;
}
 
header {
	background: url(graph/strand.jpg) center;
	background-size: cover;
}
 
header img {
	float: left;
}
 
.ileft{
  float: left;
  margin-right: 1em;
}
 
header h1 {
	color: black;
	text-shadow: 0 0 10px #fff, 0 0 20px #00d2ff, 0 0 30px #00d2ff, 0 0 40px #00d2ff, 0 0 50px #00d2ff, 0 0 60px #00d2ff, 0 0 70px #00d2ff;
}
 
nav ul{
	list-style: none;
	display: flex;
	margin: 0 20px ;
	padding: 0px;
}
 
nav a {
	display: block;
	padding: 0.3em 0.3em 0.2em;
	margin: 0.3em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	font-size: 0.8em;
	border: 1px solid darkblue;
	border-radius: 5px;
	box-shadow: 0 2px 5px white inset;
	color: darkblue;
	background-color: gold;
}
 
nav a:focus,
nav a:hover{
	color: gold;
	background-color: darkblue;
}
 
@media all and (max-width: 700px) {
 
header h1{
  font-size: 1.5em;	
}
header img {
	height: 50px;
}
}
 
@media all and (max-width: 480px) {
 
header img {
	height: 40px;
}
 
header h1{
  font-size: 1.1em;	
}
nav ul{
	flex-direction: column;
}
 
}