Template zur Erstellung responsiver Webseiten

Der Webseiten Bausatz

HTML Grundgerüst CSS Formatierungen Grid Layout HTML und CSS verknüpfen

Der Inhalt einer Webseite wird in ❶ HTML Elemente gepackt und so u.a. als Überschrift, Textabschnitt oder Tabelle markiert. Als Vorlage für eine Webseite kann ein einfaches Grundgerüst verwendet werden. Die Datei wird mit der Endung .html gespeichert und kann nun im Browser aufgerufen werden.

Mit ❷ CSS Formatierungen können die HTML Elemente beispielsweise in Form, Farbe oder Größe angepasst werden. CSS Anweisungen könen direkt in der HTML-Datei oder in einer separaten Datei mit der Endung .css definiert werden.

Mit Hilfe des HTML- und CSS ❸ Gridsystems können auf einfache Weise komplette HTML Container positioniert werden.

HTML Grundgerüst

Folgendes HTML Grundgerüst kann den eigenen Wünschen gemäß angepasst und als Grundlage für Webseiten verwendet werden.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Responsives Template zur einfachen Erstellung von Webseiten mit HTML und CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ein einfaches HTML Grundgerüst als Vorlage zur Erstellung eigener, responsiver Webseiten.">
<meta name="robots" content="index, follow">		
<link rel="stylesheet" href="styles.css">
<style>/* Formatierungen */</style>
</head>
<body>

<!-- header -->
<header id="top" style="color: white; background: orangered">
<h1>Template zur einfachen Erstellung responsiver Webseiten</h1>
</header>

<!-- nav -->
<nav style="color: white; background: dodgerblue">
<a href="#main">Inhalt</a>
<a href="#aside">Extra</a>
<a href="#footer">Info</a>
</nav>

<!-- main -->
<main id="main">
<h2>Der Webseiten Bausatz</h2>
<p>Ein responsives Template zur Erstellung eigener Webseiten.</p>
</main>

<!-- aside -->
<aside id="aside" style="color: white; background: limegreen">
<h2>Seitenleiste</h2>
<p>Zusatzinformationen zum Inhalt.</p>  
</aside>

<!-- footer -->
<footer id="footer" style="color: white; background: black">
<div>
<h2>Information</h2>
<p>Mehrere <div> Container möglich. Diese werden per CSS Formatierung nebeneinander platziert.</p>
</div>
<div>
<!-- Nächster Inhalt -->
</div>
</footer>

<a href="#top" class="top" title="TOP">&#10137;</a>
</body>
</html>

Abspeichern einer Webseite mit .html als Dateiendung.

CSS Anweisungen

a {
position: relative;
border-bottom: 1px dotted;
color: inherit;
text-decoration: none
}
nav a {padding: 0 1em}
.inhalt a {
display: block;
padding: 6px
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
border-bottom:1px solid;
transition: 0.4s
}
a:hover {border-bottom-style: solid}
a:hover:after {width: 100%}
aside {
padding: 1em;
text-align: left;
font-size: 0.9em
}
body {
margin: 0;
color: black;
background: white;
text-align: center;
font-size: 24px;
font-family: standard, sans-serif;
}
button {
padding: 6px;
border: 1px dotted inherit;
color: inherit;
background-color: transparent;
font-size: 24px;
font-family: standard, sans-serif
}
.liste button:before {content: "\2630\00a0"}
button:hover {border-style: solid}
code {
font-family: code,monospace,serif;
font-size: 0.9em
}
figcapture {
font-family: print, sans-serif;
font-size: 0.9em
}
figure {overflow-x: auto}

/* footer */
footer {
padding: 1em;
font-size: 0.9em
}

h1 {
font-size: 1.5em;
letter-spacing: 2px;
text-shadow: 1px 1px 1px slategrey
}
h2 {
font-size: 1.2em;
font-family: print, sans-serif;
text-shadow: 1px 1px 1px slategrey;
text-align: center
}
main h2 {color: orangered}

/* header */
header {padding: 1em}

html {scroll-behavior:smooth}

/* main */
main {
padding: 1em;
text-align: left
}

/* nav */
nav {padding: 1em}

ol {
margin: 0.8em auto;
max-width: 40em;
padding-left: 1em;
text-align: left
}
p {
margin: 0.8em auto;
max-width: 40em
}
pre { 
position: relative;
border-top: 2px solid;
border-bottom: 2px solid;
padding: 1em;
font-family: code, monospace, serif;
font-size: 0.8em;
overflow: auto;
white-space: pre-wrap;
word-break: break-word
}
pre:after {
content: attr(title);
position: absolute;
top: 0;
right: 0;
padding: 0 6px;
color: white;
background: black
}
table {
margin: 0.8em auto;
border: 1px solid;
border-collapse: collapse;
text-align: center
}
td {
border: 1px solid;
border-collapse: collapse;
padding: 3px
}
th {
border: 1px solid;
border-collapse: collapse
}
ul {
margin: 0.8em auto;
max-width: 40em;
padding-left: 1em;
text-align: left
}
.liste {position: relative}
.inhalt {
position: absolute;
display: none;
background: white;
opacity: 0.9
}
.liste:hover .inhalt {display: block}
.top {
display: block; 
position: fixed;
bottom: 18px;
right: 18px;
color: orangered;
font-size: 2em;
text-shadow:1px 1px 1px slategrey;
transform: rotate(270deg)
}




/*
	*** CSS Grid ***
*/
@media only screen and (min-width:900px){

	/* header */
	header {grid-area:header}
	
	/* nav */
	nav {grid-area:nav}
	
	/* main */
	main {grid-area:main}
	
	/* aside */
	aside {grid-area:aside}
	
	/* footer */
	footer {grid-area:footer}
	
	body {
	display: grid;
	grid-template-areas:
	"header header nav"
	"main main aside"
	"footer footer footer";
	height:100vh
	}
	.flex  {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap
	}
	.grid {
	display: grid;
	grid-template-columns: 1fr 1fr
	}
	footer div {
	display: inline-block;
	width: 15em;
	vertical-align: top
	}
}

/*
	*** CSS Anweisungen für den Ausdruck ***
*/
@media print {
   @page {margin: 2cm}
   a, a:link, a:visited {border: none}
   body {font-size: 12pt}
      aside, footer, header, nav, .liste, .top {display: none}
}

/*
   *** Schriftfamilien und Schriftarten ***
*/
@font-face {font-family:standard;src:/*Android*/local('Roboto'),/*Android*/local('DroidSans'),/*Gnome*/local('Cantarell'),/*KDE*/local('Noto Sans'),/*MAC OS*/local('San Francisco'),/*MAC OS*/local('Helvetica Neue'),/*Ubuntu*/local('Ubuntu'),/*Windows*/local('Segoe UI')}
@font-face {font-family:code;src:/*Android*/local('Droid Sans Mono'),/*Android*/local('Roboto'),/*Gnome  */local('Cantarell'),/*Linux*/local('Source Code Pro'),/*Linux*/local('DEjaVu Sans Mono'),/*Ubuntu */local('Ubuntu'),/*Windows*/local('Consolas')}
@font-face {font-family:print;src:/*Android*/local('Coming Soon'),/*Android*/local('Roboto'),/*Linux*/local('Chilanka'),/*MAC OS*/local('Bradley Hand'),/*Ubuntu*/local('Ubuntu'),/*Windows*/local('Segoe Print')}

Gridlayout mit HTML und CSS

Grid lässt sich in diesem Zusammenhang wohl am Besten mit Raster übersetzen. Mit der CSS-Anweisung grid-area werden HTML-Elemente dem Gridsystem zugeordnet und über grid-template-areas im Raster angeordnet.

<header>

</header>		 <nav>

</nav>
<main>

</main>		 <aside>

</aside>
<footer>

</footer>
Schematische Darstellung eines Gridlayouts

HTML und CSS verknüpfen

#top