Lektion1.de•Das Template•

Template

Das Template auf Lektion1.de.

➊ Layout

Im ersten Schritt werden alle äußeren HTML Elemente in Form gebracht.

➋ Grid

Alle HTML Elemente werden für die spätere Platierung per Gridsystem vorbereitet.

➌ Class

Verschiedene CSS Klassen.

➍ Style

Direkte Formatierung von HTML Elementen.

HTML Grundgerüst

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>lektion1.de: Das Template</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Das Template auf Lektion1.de">
		<style><!-- CSS Infos --></style>
	</head>
	<body>
		<header id="logo">
			<h1><a href="https://lektion1.de"><span>Lektion1.de</span>Das Template</a></h1>
		</header>
		<nav>
			<a href="../">Startseite</a>
			<a href="../template">Template</a>
		</nav>		
		<main>
				<!-- Hauptinhalt -->
		</main>
		<aside>
				<!-- Anmerkungen -->
		</aside>
		<div id="feedback">
			<div id="note">
				<!-- Kommentare -->
			</div>
			<div id="status">
				<!-- Kontaktformular -->
			</div>
		</div>
		<footer id="footer">
			<a class="tip" href="/"><span class="pf-rechts nordwest"></span>START</a>
			<a class="tip" href="#logo"><span class="pf-rechts nord"></span>TOP</a>
			<div>
				<h2>Lektion1.de</h2>
				<p>Ein privates Webprojekt.<p>
				<a href="http://lektion1.de/service/impressum.php">Impressum</a> &middot; 
				<a href="http://lektion1.de/service/datenschutz.php">Datenschutz</a>				
			</div>
			<div>
				<h3>Suche</h3>
				<form method="get" action="http://duckduckgo.com/" style="font-size: 14px;">
					<input type="hidden" name="sites" value="lektion1.de">
					<input type="text" placeholder="DuckDuckGo-Suche" name="q"><br>
					<button type="submit">Suchen</button>
					<button type="reset">Reset</button>
				</form>
			</div>
			<a class="top pf-rechts nord" href="#logo"></a>
		</footer>
	</body>
</html>

Hintergrundbild

Image by William Iven from Pixabay