HTML5 ist die Erweiterung von HTML mit dem man Websites erstellt, allerdings nur die Strunktur erstellt. Für das Webdesign sind CSS3 und CSS verantwortlich.
Category Archives: HTML5
Anfang article CSS CSS Tagebuch HTML5 Webdesign
CSS Lernen Tag #5 – HTML5 article und Bilder verlinken
28. Juli 2012 – 11:41
Durch HTML5 lassen sich Seiteninhalte noch leichter strukturieren. Dafür gibt es das Element article, welches, wie der Name schon verrät, für Artikel geeignet ist. Da man in Zukunft nur noch Div Container verwenden soll, wenn es gar nicht anders geht, habe ich mich heute dazu entschieden, den Inhaltbereich meines CSS Tagebuchs mithilfe des Attributs article zu strukturieren.
Da ich selber noch kein HTML5 Experte bin, hoffe ich einfach mal, dass ich den article nicht zweckentfremde, aber das wird sich sicherlich zeigen, wenn HTML5 zum richtigen “Standard” wird.
Ich habe also heute nur einige Bilder in den Inhaltsbereich eingefügt und diese verlinkt. Soll heißen, ich habe alle meine bisherigen Tutorials auf www.tagebuch.wesettrends.de eingebunden.
Zu aller erst, habe ich die Index.html, also meine Hauptseite bearbeitet. Hierzu habe ich zu allererst einen Container eingefügt ( id=”content” ), in dem die article liegen werden.
Wie wir bereits gelernt haben, ist eine Besonderheit von HTML5, dass viele Elemente vereinfach worden, beziehungsweise neue und sehr hilfreiche Elemente hinzugekommen sind. Dies könnt ihr noch einmal in meinem Beitrag Neuer Trend – Das kann HTML5
Nun also einmal ein Beispiel, wie ich ein Bild in einen article eingefügt habe und dieses dann verlinkt wird zu dem passenden Beitrag auf meiner Seite.
Ihr fügt über a href einen Link ein, in meinem Fall zu dem passenden Beitrag und hinter img src kommt der link zum Bild. In meinem Fall ist dies ein Verweis, oder wie es richtig heißt Anker ( a = anchor ) zum Bild auf meinem Blog. Ihr solltet lieber die Bilder auf eurem Webspace haben, da man bei Bildern aus dem Internet nie weiß, wie lange sie unter dieser Adresse zu finden sind. Dazu ist es auch wichtig, dass man das alt Attribut ausfüllt, welches angezeigt wird, falls das Bild einmal nicht mehr online ist. So weiß man wenigstens, was an dieser Stelle sein sollte.
Dieser Text ist auch wichtig für Menschen mit Beeinträchtigungen, die Internetseiten über Braillezeilen wahrnehmen. Alt Tags sind auch ein Faktor für Suchmaschinen, worüber ich bereits vor einiger Zeit eine Einführung gegeben habe. Diese trägt den Namen This is Seo.
Die CSS Datei habe ich um folgende Befehle bereichert
#content {
width: 924px;
margin: 0 auto;
height: 450px;
padding-top: 25px;
}
article {
float:left;
border: 1px solid #8b8b89;
margin: 5px;
}
Ich gebe dem Inhalt eine Breite von 924 Pixel, weil meine Bilder jeweils 450 Pixel breit sind und einen kompletten margin von 5 Pixel haben und einen Rahmen ( Border in der Farbe #8b8b89 ) von einem Pixel.
Dadurch ist es mir möglich, dem Content eine mittige Ausrichtung mithilfe von margin: 0 auto zuzuweisen.
Das Ganze sieht dann wie folgt aus.
Natürlich könnt ihr es auch unter www.tagebuch.wesettrends.de ansehen.
HTML5 – Leitfaden für Webentwickler
16. Juli 2012 – 10:26
Für diejenigen, die gerne alles über HTML5 wissen und lernen möchten, denen kann ich nur das Buch HTML5 – Leitfaden für Webentwickler von Bernd Öggl und Klaus Förster des ADDISON-WESLEY Verlags empfehlen. Es beinhaltet eigentlich alles, was HTML5 zu bieten hat, beispielsweise gibt es Kapitel zu den Funktionen Video, Audio, Canvas und intelligente Formulare in HTML5.
Sehr interessant finde ich auch das Kapitel zum Thema Geolocation. Es ist sehr verständlich geschrieben und geht auch relativ detailliert auf die unterschiedlichen Bereiche ein, bietet also nicht nur eine oberflächliche Beschreibung.
Für alle die sich noch nicht genau mit HTML5 auseinandergesetzt haben, möchte ich einmal auf meine ersten Beiträge verweisen. Ich habe etwas zum Doctype von HTML5 geschrieben und auch zu einigen Veränderungen, wie dem Verzicht von Head und Body.
HTML5 Doctype Tutorial
26. Mai 2012 – 09:19
Der Doctype in HTML5 wurde sehr verkürzt und verbessert, wie viele andere Dinge auch. Bereits vor einiger Zeit gab es bei wesettrends.de einen Artikel, der sich damit befasste, dass man in HTML5 auf den Head und den Body verzichten könnte. Ebenfalls angenehm verbessert wurde der Doctype in HTML5 sowie die Angabe des Encodings. Hier reicht es mittlerweile, wenn man einfach <meta charset=”utf-8″> schreibt. Die HTML5 Datei läuft allerdings schon, wenn man lediglich <!DOCTYPE html> an den Anfang der Datei setzt. Der HTML5 Doctype ist übrigens nicht case-sensitiv, das heißt, es ist egal, ob ihr Groß- oder Kleinbuchstaben verwendet. Man kann also auch <!doctype html> schreiben.
Komplett sieht das Ganze dann beispielsweise so aus, wie in der folgenden Grafik, wobei diese natürlich die, wie bereits erwähnten optionalen Tags Head und Body beinhaltet.
Inhalt der Seite
HTML5 verzichtet auf Head und Body
3. Mai 2012 – 18:01
Das HTML5 es den Benutzern einfach macht ist kein Geheimnis, doch wie einfach es wirklich ist, zeigt sich immer wieder. Nun ist es sogar so, dass man auf die beiden Tags Head und Body verzichten kann, denn Browser ergänzen diese automatisch, solange sie HTML5 interpretieren. So ordnen Chrome und Co beispielsweise Tags wie Title automatisch dem Header zu.
Folgender Code ist also durchaus einsetzbar und wird ganz normal interpretiert und angezeigt.
Neuer Trend – Das kann HTML5
19. April 2012 – 18:23
HTML5 ist mittlerweile überall ein Begriff und das nicht ohne Grund. Auch wenn es bereits seit Jahren entwickelt wird und auch schon länger teilweise einsetzbar ist, gibt es immer noch keinen vollständigen Release. Trotzdem ist mittlerweile bekannt, was HTML5 und auch CSS3 können und das ist eine ganze Menge.
Hier nun ein erster Einblick in Neuerungen. So gibt es eine ganze Reihe neuer Tags, mit denen man seine Seite einfach strukturieren kann. Musste man damals noch die Seite mittels Div Container in Header-, Content- und Footerbereich unterteilen, gibt es in HTML5 die entsprechenden Tags <header> und <footer>. Für den Content oder Wrapperbereich gibt es keinen direkten Befehl, jedoch gibt es ein <section> Tag.
Auch das <video> Tag findet überall Beliebtheit. War es damals noch recht mühselig Videos auf der eigenen Seite einzubinden, ist es dank HTML5 kein Problem mehr. Mit diesem Tag lässt sich ein Video einbinden, ein passendes Vorschaubild über poster festlegen und durch controls lässt sich eine Navigationsleiste erstellen.
About