Welche Bestandteile einer Webseite sind typisch?
- Logo
- Banner
- Navigation
- Impressum
- Kontakt
- ...
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> |
body { |
Bilder: [strand.jpg] [waldweg.jpg]
Mit responsiver Formatierung
Ansicht: [typische_seite.htm]
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; } }