logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


Tutorial Webseitenerstellung mit HTML 5 und CSS 3 (not responsive)

In diesem kleinen Tutorial möchte ich zeigen wie einfach und dennoch grafisch und layouttechnisch komplex es mittels HTML5 und CSS3 Elementen ist, eine dynamische Webseite zu erstellen. Von der Planung über Styling bishin zum füllen mit diversen Elementen werde ich Schritt für Schritt erklären wie eine moderne Webseite mit wenig Aufwand entstehen kann.

Das Tutorial ist so aufgebaut das es hier im Contentbereich Erklärungen zu den einzelnen Schritten gibt und am Ende jedes Schrittes die Quellcode (style/html) komplett anzusehen und zum Download bereit stehen.

Das Tutorial ist not responsive, bedeutet nicht für Tablet und Smartphone's. Diesbezüglich wird ein Tutorial folgen mit erreichen von Bootstrap 4 Final.

 

Grundaufbau der Seite im Tutorial

 

Webseitenaufbau

Als grundsätzlichen Seitenaufbau habe ich mir den Inhalt der linken Grafik vorgestellt.

Es werden header, hgroup, nav, article, section und footer als "neue" html5-tags Verwendung finden.

Im nachfolgenden, auskommentierten Quelltext läßt sich die Grundstruktur nachvollziehen und über den jeweiligen Downloadbereich die betreffende(n) Datei(en) auch downloaden.

 

Quelltext auskommentiert mit Beschreibung

 


<!DOCTYPE html>
<html lang="de"><!--Beginn html-->

Die Angabe des DOCTYPES in HTML5 hat sich geändert und denkbar vereinfacht. Es ist nicht mehr nötig die *.dtd = Doctype Definition zu konkretisieren mit z.B. "strict" , oder "transitional". Versionsnummer wie z.B. HTML4.01 oder XHTML1.1 sind nicht mehr nötig. Auch die Länderkennung entfällt hier und obendrein erleichtert die Tatsache der Abwärtskompatibilität von HTML5 enorm die Arbeit, bestehende Dokumente zu parsen. Im html-tag ist nun die Länderkennung anzugeben.


<head><!--Beginn head-->
<meta charset="utf-8" /><!--Beginn meta-->
<meta name="description" content=" " />
<head/><!--Ende head-->

Im Head-Bereich sind wie üblich die Meta-Angaben zu finden die hier noch denkbar vereinfacht integriert sind. Wichtig ist der meta-charset-Befehl und ist er auf "utf-8" gestellt, sollte beachtet werden einen Html-Editor zu verwenden der utf-8 abspeichern kann, sonst werden z.B. Umlaute aus dem Quelltext nicht richtig dargestellt. Ich benutze Notepad++, netbeans oder dreamweaver. (je nach Umfang und Zweck)


<body><!--BEGINN BODYBEREICH-->

Am Bodytag hat sich nichts geändert und er ist denke ich selbsterklärend. Dessen Inhalt gibt den sichtbaren Bereich einer Webseite aus.


<div><!--Beginn Hauptwrapper-->

Dieser tag wird später als ein Mainwrapper fungieren, der es ermöglicht die Webseite im Browserfenster zu plazieren, die Breite und Höhe anzugeben und grafisch zu gestallten


<header><!--Beginn Header-->

Der Header - Bereich ist als Element in Html5 neu integriert und kann wie jeder Bereich individuell gestalltet werden. Meist findet hier Logo, Seitentitel, Seitenbeschreibung oder Datum und/oder Suche ihren Platz.


<hgroup><!--Beginn hgroup-->
<h1>Seitentitel</h1>
<h2>Webseitenbeschreibung</h2>
</hgroup><!--Ende hgroup-->

Im hgroup-Bereich = "headergroup"-Überschriften lassen sich Seitentitel, Seitenbeschreibung im Header gruppieren


<nav><!--Beginn Hauptnavigation-->
<ul>
<li><a href=#>Navigation 1</a></li>
<li><a href=#>Navigation 2</a></li>
<li><a href=#>Navigation 3</a></li>
<li><a href=#>Navigation 4</a></li>
</ul>
</nav><!--Ende Hauptnavigation-->

Der neue nav-Tag läßt sich individuell gestalten über css foramtieren und per javascript dynamisch auslegen. Er läßt sich auch in z.B aside-sections als Seitennavigation individuell ensetzen.

	  
</header><!--Ende Header-->

<div><!--Beginn Inhaltsbereich-->

Ein Container um den Inhaltsbereich, für spätere Formatierung vorbelegt


<div><!--Beginn Hauptinhalt-->

Ein Container um den Hauptinhalt, für spätere Formatierung vorbelegt


<article><!--Beginn 1. Artikel-->
<header><!--Beginn Header 1. Artikel-->
<h1>Header Artikel 1</h1><!--Inhalt Header 1. Artikel-->
</header><!--Ende Header 1. Artikel-->
<p><!--Beginn Inhalt 1. Artikel-->
Inhalt Artikel 1
</p><!--Ende Inhalt 1.Artikel-->
<footer>;<!--Beginn Footer 1. Artikel-->
<p><!--Beginn Inhalt Footer 1. Artikel-->
Footer Artikel 1
</p><!--Ende Inhalt Footer 1. Artikel-->
</footer><!--Ende Footer 1. Artikel-->
</article><!--Ende 1. Artikel-->

<article><!--Beginn 2. Artikel-->
<header><!--Beginn Header 2. Artikel-->
<h1>Header Artikel 1</h1><!--Inhalt Header 2. Artikel-->
</header><!--Ende Header 2. Artikel-->
<p><!--Beginn Inhalt 2. Artikel-->
Inhalt Artikel 2
</p><!--Ende Inhalt 2.Artikel-->
<footer><!--Beginn Footer 2. Artikel-->
<p><!--Beginn Inhalt Footer 2. Artikel-->
Footer Artikel 2
</p><!--Ende Inhalt Footer 2. Artikel-->
</footer><!--Ende Footer 2. Artikel-->
</article><!--Ende 2. Artikel-->

<article><!--Beginn 3. Artikel-->
<header><!--Beginn Header 3. Artikel-->
<h1>Header Artikel 1</h1><!--Inhalt Header 3. Artikel-->
</header><!--Ende Header 3. Artikel-->
<p><!--Beginn Inhalt 3. Artikel-->
Inhalt Artikel 3
</p><!--Ende Inhalt 3.Artikel-->
<footer><!--Beginn Footer 3. Artikel-->
<p><!--Beginn Inhalt Footer 3. Artikel-->
Footer Artikel 3
</p><!--Ende Inhalt Footer 3. Artikel-->
</footer><!--Ende Footer 3. Artikel-->
</article>;<!--Ende 3. Artikel-->

Der article-Tag ist individuell einsetzbar, meist für den Main-Bereich vorgesehen und z.B. auch mit Header und Footer zu versehen worauf ich zu einem späteren Zeitpunkt in diesem Tutorial zurückkommen werde. Hier ist Header und Footer im Article nur vorprogrammiert.


</div><!--Ende Hauptinhalt-->

<aside><!--Beginn Sidebar-->	
<section><!--Beginn 1. Section-->
<h1>Sidebar 1</h1>
<p>Inhalt Sidebar 1 in einer Section</p>
</section><!--Ende 1. Section-->
<section><!--Beginn 2. Section-->
<h1>Sidebar 2</h1>
<p>Inhalt Sidebar 2 in einer Section</p>
</section><!--Ende 2. Section-->
<section><!--Beginn 3. Section-->
<h1>Sidebar 3</h1>
<p>Inhalt Sidebar 3 in einer Section</p>
</section><!--Ende 3. Section-->
</aside><!--Ende Sidebar-->

Der aside-tag wird oft missverstanden und ist im konzeptionellem Grundgedanken nicht dazu gedacht Seiteninhalte seitlich darzustellen, sondern vielmehr dafür da unabhängige Inhalte zum jeweils betrefflichen Seiteninhalt "nebenbei" darzustellen.

	
</div><!--Ende Inhaltsbereich-->

<footer><!--Beginn Seitenfooter-->
<section><!--Beginn Footer 1. Section-->
<h1>Section1</h1>
<p>Inhalt Footer 1. Section</p>
</section><!--Ende Footer 1. Section-->
<section><!--Beginn Footer 2. Section-->
<h1>Section2</h1>
<p>Inhalt Footer 2. Section</p>
</section><!--Ende Footer 2. Section-->
<section><!--Beginn Footer 3. Section-->
<h1>Section3</h1>
<p>Inhalt Footer 3. Section</p>
</section><!--Ende Footer 3. Section-->
<p><!--Beginn Seiteninformationen-->
Copyright © 2010 <strong>IT Trombe</strong>. 
All Rights Reserved.
</p><!--Ende Seiteninformationen-->
</footer><!--Ende Seitenfooter-->

Der Footer-Bereich ist individuell einsatzbar (nicht nur als Seitenfooter), er kann wie sämtliche "tags" frei gestaltet werden und auch wie hier in sections unterteilt und z.B. später nebeneinander dargestellt werden (siehe späteren Bereich des Tutorials)


</div><!--ENDE HAUPTWRAPPER-->

</body><!--ENDE BODYBEREICH-->

</html><!--Ende html-->
			 

 

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview
X

Tags

HTML5 META Artikel Doctype Header Footer