Vorwort
Wie versprochen, hier mal ein kleiner Einstieg in HTML5 und CSS3
Ich beginne mal der Einfachheit mit HTML5, da CSS3 alleine nichts anzeigt.
Vorab ist allerdings zu betonen, dass wir aus den statischen Zeiten, in denen mit Table-Designs (Tabellen zum aufteilen von Bereichen, etc) gearbeitet wurde, schon lange raus sind.
Einleitung
Was ist HTML5 und wieso soll ich mich damit befassen?
HTML5 ist die ZUKUNFT für Internetseiten. Zu dem Zeitpunkt, an dem ich das Tutorial geschrieben habe, war es am Ende der Entwicklung (noch ist nicht bekannt, wann es fertig sein soll), aber ich will dieses Tutorial nur dann umschreiben müssen, wenn sich wirklich was gravierendes ändern sollte.
Aber schauen wir uns doch erstmal an, was HTML5, im Vergleich zu HTML4.01 und älteren Versionen, eigentlich auszeichnet.
HTML5 beinhaltet
- Neue Elemente
- Neue Attribute
- Vollen CSS3 Support
- Video und Audio nativ unterstützt (nativer Cross-Browser-Support inklusive)
- 2D/3D Grafik-Handling
- Lokale Speichermöglichkeiten
- Lokale SQL Datenbankmöglichkeit
- Web Applicationen in einer vorher nie vorhanden Art
- und vieles mehr...
Aber gut, ich hasse selber zulange Einleitungen, daher komme ich gleich mal zum Anfang und werde auch gleich auf HTML an sich zur Sprache bringen.
<!DOCTYPE>
Mit HTML5 wird der <!DOCTYPE> stark vereinfacht.
Doch was ist eigentlich der <!DOCTYPE>?
Der <!DOCTYPE> steht für DOCument-TYPE, was übersetzt nichts anderes bedeutet, als Dokumenten-Typ.
Mussten wir alle die Jahre noch umständlich Dateien von extern definieren, welche wiederrum den Browsern sagten: "Diesen Standart hast du ab jetzt zu fressen für diese Seite." (einfach ausgedrückt, wobei dies jeder Browser auf Art interpretierte), wurde uns dies mit HTML5 endlich abgenommen.
Einheitliche Standarts in der Ausgabe, werden viele interessante Entwicklungen mit sich bringen. Remember my words 
Kleines Beispiel sei der letzte HTML-DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Jetzt wird schon jedem beim lesen schlecht denke ich
HTML5 im Vergleich:
<!DOCTYPE html>Ich hänge euch noch den minimalen Aufbau eines HTML5-Dokuments hier rein und beende damit den Abschnitt <!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<title>JAYMCs HTML5 - CSS3 Tutorial</title>
</head>
<body>
<!-- Hier kommt der Content später rein. -->
</body>
</html>
Rand-Notiz:
<!-- XXXXX -->
Hiermit werden Kommentare eingefügt. Ich verzichte hier auf weitere Ausführungen hierzu.
HTML(5) Grundelemente
Nun schauen wir uns mal an, was ich da eigentlich noch geschrieben habe.
<html>
Hiermit wird der gesamte Inhalt definiert dass ab jetzt HTML verwendet werden soll. Dank <!DOCTYPE> weis der Browser, um was für einen HTML-Standart es sich handelt (HTML??? (Bitte selber beantworten )).
Solche Anweisungen, die in spitzen Klammern stehen, nennt man Tags.
Jeder Tag MUSS auch wieder geschlossen werden.
Heute gehen Browser mit dem <html>-Tag besser um, als noch in den Anfängen des Internets, aber man sollte sich direkt eine saubere Schreibweise angewöhnen.
Tags können auf 2 Arten geschlossen werden
<TAG></TAG>
oder
<TAG />
wobei letztere Variante nur bei Tags angewendet werden, die für sich alleine stehen und zwischen dem öffnenden und schliesenden Element nichts definiert wird.
Hoffe, das war verständlich genug
<head>
Hier sollte nicht mehr reingeschrieben werden, als für diesen Bereich vorgesehen.
Im Head-Bereich werden alle essenziell wichtigen Informationen wie z.B.
- Titel der Seite
- META-Tags
- CSS und JS includes
definiert.
Der Head-Bereich hat sich mit HTML5 nicht wirklich geändert, daher kann fast jedes Tutorial zum Head-Bereich an dieser Stelle verwendet werden.
Ich werde auf den Head-Bereich an dieser Stelle nicht weiter eingehen und verweise an dieser Stelle auf selfhtml.
<body>
Wie schon zu vermuten, wird hier der Rest, was später alles auf der Seite ausgegeben werden soll, definiert.
Dies ist der, wirklich extrem reduzierte, minimale Aufbau eines HTML(5)-Dokuments.
Ihr könnt dies als Vorlage für alle euren weiteren HTML5-Dokumente verwenden.
DIVs
Kommen wir jetzt zu einer Sache, die fast jeder Anfänger in der heutigen Zeit falsch macht.
Woran dies liegt, weis ich selber nicht.
Entweder ist es der Grund, dass veraltete Tutorials bentzt werden, oder <div>-Handling und CSS die meisten anfangs überfordert.
Räumen wir damit mal auf.
Ich werde an dieser Stelle kurz auf Table-Designs eingehen und erklären, wieso man diese heute nicht mehr benutzt.
Table-Designs stammen aus Zeiten, wo CSS noch in den Kinderschuhe steckte und zum Styling von Pages nicht wirklich essenziell wichtig war.
Anfangs waren Internetseiten unter folgendem Aspekt erstellt.
Inhalt ist wichtiger als Design.
Heute ist dies genau umgekehrt.
Das Internet hat sich seit seinen Anfängen stark verändert, daher musste auch eine grundlegende Änderung der Standarts her.
HTML5 und CSS3 maskieren diese Änderung nun offiziell als Meilenstein in der Geschichte des Webs.
Web2.0 müsste heute jeder schon einmal irgendwo gelesen haben.
Doch wie soll man heute arbeiten und was ist der Vorteil?
Naja, Table-Designs sind statisch, haben nicht viele Änderungsmöglichkeiten und sehen unterm Strich auch noch mega beschissen aus.
Daher wird mit <div>-Layern gearbeitet.
Doch was ist ein <div> eigentlich?
Ein <div> ist ein (4eckiger) Bereich/Platzhalter, welcher erstmal selber nichts kann.
Man sieht ihn selber in der Ausgabe erstmal nicht. Dafür ist CSS (Cascading Style Sheets) zuständig. Es gibt unserem <div> sein Design mit.
Aber wir wollen ja nicht stumpf Theorie pauken, daher hier ein wenig Praxis.
<!DOCTYPE html>
<html>
<head>
<title>JAYMCs HTML5 - CSS3 Mini-Tutorial</title>
</head>
<body>
<div>
<div>Hier kommt der Header rein.</div>
<div>
<div>Hier kommt die Navigation.</div>
<div>Hier kommt der restliche Inhalt rein.</div>
</div>
<div>Hier kommt der Footer rein.</div>
</div>
</body>
</html>
Der ein oder andere wird sich vielleicht jetzt fragen:
Spinnt der Jay jetzt komplett? Das sieht ja völlig scheiße aus.
Nicht meckern, warten. Design kommt noch.
Eine kurze Erklärung, was ich da eigentlich genau gemacht habe.
Ich habe unseren Inhalt in mehrere Bereiche aufgeteilt, welche ich jetzt einzeln in ihre endgültige Form und Gestaltung bringen kann.
Ein wenig schwer ist vielleicht das DIVinDIV-Using, auf das ich gleich noch ein wenig in CSS3 eingehen werde.
Aber machen wir erstmal weiter mit den grundlegenden HTML-Elementen unserer Seite.
Damit wir mit CSS später auch unsere <div>-Layer ansprechen können, benötigen diese eine eindeutige Identifizierung.
Hierzu können wir mit 2 Möglichkeiten arbeiten.
Wichtig für später, dass jede Möglichkeit ihren eigenen Einsatzbereich hat und erst in Kombination sich die endgeilen Designs von Profis bauen lassen. Aber ich will es jetzt nicht gleich übertreiben, daher back2topic
Die Standartmethode und wohl auch die am häufigsten genutzte Möglichkeit besteht aus Klassendefinition in CSS.
Hierzu bekommt unser <div>-Layer eine class-Definition mit. Name ist im Ermessen des Autors der Seite, sollte allerdings schon logisch aufgebaut sein.
Wichtig ist noch, dass man class-Definitionen mehrmals einsetzten kann, diese allerdings nur EINMAL in der CSS definieren muss.
Saubere Trennung von Inhalt und Layout vereinfachen weiterhin die Wartung.
<div class="">
So definieren wir grundlegend unsere class-Definition. Am Endprodukt könnte dies wie folgt aussehen
<!DOCTYPE html>
<html>
<head>
<title>JAYMCs HTML5 - CSS3 Tutorial</title>
</head>
<body>
<div class="pagewidth">
<div class="head">Hier kommt der Header rein.</div>
<div class="content_area">
<div>Hier kommt die Navigation.</div>
<div>Hier kommt der restliche Inhalt rein.</div>
</div>
<div class="footer">Hier kommt der Footer rein.</div>
</div>
</body>
</html>Gut, für den geneigten Leser mag sich erstmal nichts verändert haben.
Wie oft noch? Design kommt noch. Also weiter im Text.
An sich ist unsere HTML-Datei jetzt fertig. Also speichern wir diese als index.html und fangen mit der CSS-Datei an.
Hiermit beende ich auch meine HTML-Einführung. Ich werde später noch mehr auf HTML eingehen, sobald wir die Basics von CSS durch haben.
Ab dann werde ich auch nicht mehr ganz so ausführlich auf die ganzen Einzelheiten von Tags, etc eingehen, sondern die Erklärungen insgesamt ein wenig verkürzen.
Gerne schreibe ich auch zu Themenbereichen gezielt ein ausführliches Tutorial, falls das Interesse bestehen sollte.
Anmerkung vom Autor:
Diese Tutorial ist noch im Aufbau, daher gebt mir ein wenig, es Stück für Stück zu erweitern. Ich werde jeden Tag ein wenig hierdran rumschrauben und dabei auch gleich auf eure Kritik mit eingehen, da nur so ein Tutorial wirklich perfekt werden kann.
5 Post's sind als Placeholder definiert.