Responsives Template zur einfachen Erstellung von Webseiten mit HTML und CSS

Bauanleitung für eine einfache Webseite

❶ Als Vorlage für eine Webseite kann ein einfaches Grundgerüst verwendet und die Datei mit der Endung .html gespeichert werden. Der Inhalt wird mit HTML Elementen beispielsweise als Überschrift, Textabschnitt oder Tabelle markiert.

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

❸ Mit Hilfe des Gridsystems können auf einfache Weise auch sehr komplexe HTML Container in <div>-Boxen nahezu beliebig innerhalb der Webseite 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 id="top" style="color: white; background: orangered">
<h1>Template zur einfachen Erstellung responsiver Webseiten</h1>
</header>

<nav style="color: white; background: dodgerblue">
<a href="https://www.lektion1.de">START</a>
<a href="#main">Inhalt</a>
<a href="#aside">Extra</a>
<a href="#footer">Info</a>
</nav>

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

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

<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 {
border-bottom: 1px dotted;
color: inherit;
text-decoration: none
}
nav a {padding: 0 1em}
a[href^="https://"]:before {content:"\27B2\00A0"}
a:hover {border-bottom: 1px solid}

/* Extra */
a {position: relative}
a[href^="https://"] {padding-left: 1em}
a:before, a:after {
content:'';
position:absolute;
bottom:0; left:0;
width:0;
border-bottom: 1px solid;
transition:0.4s
}
a:hover:before, 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 {
border-style: outset;
border-radius: 9px;
color: inherit;
font-family: standard, sans-serif;
font-size: 1em
}
button:hover {
border-style: inset;
background: navajowhite
}
code {font-family: code, monospace}
figcapture {
font-family: print, sans-serif;
font-size: 0.9em
}
figure {overflow-x: auto}
footer {
padding: 1em;
font-size: 0.9em
}
form {
margin: 0.8em auto;
max-width: 40em
}
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}
h3 {
font-size: 1.2em;
font-family: standard, sans-serif
}
header {padding: 1em}
html {scroll-behavior:smooth}
main {
padding: 1em;
text-align: left
}
img {
max-width: 100%;
height: auto
}
nav {padding: 1em}
ol {
margin: 0.8em auto;
max-width: 40em
}
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
}
td {
border: 1px solid;
padding: 6px
}
th {
border: 1px solid;
padding: 3px
}
ul {
margin: 0.8em auto;
max-width: 40em
}
.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 {grid-area:header}
	nav {grid-area:nav}
	main {grid-area:main}
	aside {grid-area:aside}
	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;
	grid-gap: 18px 18px;
	align-items: start
	}
	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 Monospace'),/*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 Monospace'),/*Windows*/local('Segoe Print')}

HTML und CSS verknüpfen

<link rel="stylesheet" href="styles.css">

Verweis auf eine externe CSS Datei im Kopfbereich <head>.

<style>header {padding: 1em}</style>

CSS Formatierungen im style-Element im Kopfbereich <head>.

<header style="color: white; background: orangered">

CSS Anweisungen direkt am HTML Element im style-Attribut innerhalb des Inhaltsbereiches <body>.

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>

HTML Elemente für den Inhalt

HTML Links

<p>Ein <a href="#main">interner Link</a> und ein <a href="https://www.lektion1.de">externer Link</a>.</p>

a {
border-bottom: 1px dotted;
color: inherit;
text-decoration: none
}
a[href^="https://"]:before {content:"\27B2\00A0"}
a:hover {border-bottom: 1px solid}

/* Extra */
a {position: relative}
a[href^="https://"] {padding-left: 1em}
a:before, a:after {
content:'';
position:absolute;
bottom:0; left:0;
width:0;
border-bottom: 1px solid;
transition:0.4s
}
a:hover:before, a:hover:after {width: 100%}

Ein interner Link und ein externer Link.

HTML Button

<button>Button</button>

button {
border-style: outset;
border-radius: 9px;
color: inherit;
font-family: standard, sans-serif;
font-size: 1em
}
button:hover {
border-style: inset;
background: navajowhite
}

HTML Code Darstellung

<p>Fließtext mit <code>&lt;code&gt;</code>.</p>

code {font-family: code, monospace}

Fließtext mit <code>.

HTML Formular

<form method="post" action="">
<fieldset>
<legend>Post</legend>
<textarea name="post" required></textarea>
</fieldset>
<fieldset>
<legend>Absender</legend>
<div class="grid">
<input type="text" name="name" required>
<label for="name">Name</label>
<input type="email" name="mail" required>
<label for="mail">E-mail</label>
<input type="url" name="url">
<label for="url">Homepage</label>
</div>
</fieldset>
<fieldset>
<legend>Auswahl</legend>
<div class="grid">
<div>
<input type="radio" name="poest" value="info" title="Private Nachricht">
<label for="post">Nachricht</label><br>
</div>
<div>
<input type="radio" name="poest" value="post" title="Öffentlicher Kommentar">
<label for="post">Kommentar</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Versand</legend>
<div class="grid">
<button type="submit" name="send_form" value="Submit">Senden</button>
<button type="reset" name="reset_form" value="Reset">Reset</button>
</div>
</fieldset>
</form>

form {
margin: 0.8em auto;
max-width: 40em
}

HTML Bilder

<p>Ein Bild. <img src="img.png" title="Bild"></p>

img {
max-width: 100%;
height: auto
}

Ein Bild. Bild

HTML Nummerierte Aufzählungsliste

<ol>
<li>Aufzählungslisten</li>
<li>Nummerierte Listen</li>
<li>Definitionslisten</li>
</ol>

ol {
margin: 0.8em auto;
max-width: 40em
}

Aufzählungslisten
Nummerierte Listen
Definitionslisten

ol = ordered list, li = list item

HTML Textabsatz

<p>Ein einfacher Textabsatz.</p>

p {
margin: 0.8em auto;
max-width: 40em
}

Ein einfacher Textabsatz.

p = paragraph

HTML Tabelle

<table>
<caption>Einfache Tabelle</caption>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
</tr>
</table>

table {
margin: 0.8em auto;
border: 1px solid;
border-collapse: collapse
}
td {
border: 1px solid;
padding: 6px
}
th {
border: 1px solid;
padding: 3px
}

Einfache Tabelle
Spalte 1	Spalte 2
Inhalt 1	Inhalt 2

th = table head, tr = table row (Zeile), td = table data (Spalte)

HTML Liste

<ul>
<li>Aufzählungslisten</li>
<li>Nummerierte Listen</li>
<li>Definitionslisten</li>
</ul>

ul {
margin: 0.8em auto;
max-width: 40em
}

Aufzählungslisten
Nummerierte Listen
Definitionslisten

ul = unordered list, li = list item

Verschachtelte Listen

HTML Listen
1. Aufzählungslisten
2. Nummerierte Listen
3. Definitionslisten

<ul>
<li>HTML Listen
<ol>
<li>Aufzählungslisten</li>
<li>Nummerierte Listen</li>
<li>Definitionslisten</li>
</ol>
</li>
</ul>

HTML Blockelemente

Aufzählungslisten
Nummerierte Listen
Definitionslisten

Ein einfacher Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Einfache Tabelle
Spalte 1	Spalte 2
Inhalt 1	Inhalt 2

Aufzählungslisten
Nummerierte Listen
Definitionslisten

HTML Listen
1. Aufzählungslisten
2. Nummerierte Listen
3. Definitionslisten