So funktioniert HTML Technikwürze 37

Herzlich willkommen bei Technikwürze siebenunddreißig, euer Design und Webstandards Podcast. Weil die Vertonung des ersten Kapitels von Peter Müllers Buch Little Boxes so gut ankam, lesen wir heute aus dem zweiten Kapitel vor. So funktioniert HTML.

Heute ist Montag, der 4. September und mein letzter Urlaubstag. Die letzten vierzehn Tage füllte ich meine eigentlich nötige Auszeit mit dem Befüllen von Kartons, Auseinander- und Zusammenbauen von Möbeln, Verlegen von Laminat, Streichen von Wänden und Einräumen der neuen Wohnung. Freizeit hatte ich also keine. Und, aufgrund des Umzuges und des falschen Formulares bei Arcor hatte ich auch vierzehn Tage kein Internet. Das ist nicht weiter schlimm, denn vermisst hatte ich es nicht.

Entzugserscheinungen zeigen sich also wohl erst später bei mir. Nun, morgen geht es in der Werbeagentur weiter und bevor ich in den Zoo Hannover gehe, lese ich euch noch aus dem Buch von Peter Müller vor. Meine E-Mails sind schon durchgeforstet, den RSS Feeds widme ich mich so in den nächsten Tagen. Habt also ein bisschen Geduld, wenn ich eure Anfragen auf der Webseite und per E-Mail nicht gleich beantworten kann.

Falls ihr übrigens Unstimmigkeiten im Design auf Technikwürze.de feststellen solltet, leert einmal euren Cache. Schon vor dem Urlaub hatte ich das XHTML und CSS umgestellt, sodass die Seite nun fluider und kompatibler im Browser strahlen sollte. Wenn ihr Fragen oder Themenvorschläge habt, schickt sie bitte an echo@Technikwürze.de. Nadja und ich freuen uns natürlich auch über Kommentare zur aktuellen Sendung auf Technikwürze.de.

Hintergründe.

Was ist eigentlich Geotagging? Viele kennen Tags, also die Verschlagwortung von Artikeln, Links und anderen Informationen. Jetzt taucht ein neuer Begriff auf: Geotagging. Aber was ist das eigentlich? Geotagging wurde von der Fotocommunity Flickr eingeführt und erlaubt den Nutzern, ihren Bildern neben herkömmlichen Tags auch geographische Koordinaten zuzuordnen. Die Bilder können dann mit Erweiterung auf Karten betrachtet werden.

Einen Überblick über die Funktionsweise von Geotags bei Flickr geben diverse Beiträge. Die vollständige Liste erhaltet ihr auf Technikwürze.de.

Schlagzeilen.

Einstieg in XHTML und CSS. Einen lesenswerten Artikel hat Jens Grochtdreis für die Zeitschrift PHP Magazin geschrieben, der zusätzlich auf dem Portal der Webkrauts unter Webkrauts.de veröffentlicht werden durfte. Unter dem Titel „Webseiten sind keine Gemälde" gibt er einen Einblick in modernes Webdesign und fordert ein Umdenken von der Präsentation zum Inhalt.

Trotz allen Unzulänglichkeiten der heutigen Browser, insbesondere des Internet Explorer, ist ein modernes Design ohne Layouttabellen mit CSS keine Hexerei. Die Vorteile eines CSS-Designs überwiegen eindeutig das traditionelle Tabellenlayout. Mit einer sauber anhand von Webstandards erstellten Seite ist dann auch eine barrierefreie Umsetzung keine Hexerei mehr.

Und da manche potenzielle Kunden gesetzlich zu barrierefreien Webseiten verpflichtet sind, ist dies für jeden professionellen Webworker von Interesse.

Linktipps.

Eine kurze Zusammenfassung über CSS3 gibt es bei phatastic.net, einem englischsprachigen Themenblog. Welche Aspekte sind bei der Erstellung einer Unternehmenswebsite wichtig und was wird oft übersehen? Eric Eggert hat auf yatil.de die zehn wichtigsten Punkte, genannt von Roger Johansson, zusammengefasst. Erste Erfahrungen mit CSS hat Blake Atshire während der Ausbildung an der Universität gewonnen. Nun teilt er sie mit den Lesern des Web Standards Project auf webstandards.org.

Wie wichtig die About Page, also die Über-uns-Seite einer Unternehmenswebsite ist, zeigt Aaron Kinsane auf alistapart.com.

XHTML und CSS.

So funktioniert HTML. Worin man erfährt, dass Webseiten aus rechteckigen Kästen bestehen, HTML zum Etikettenkleben dient und ein solides Grundgerüst das Fundament einer jeden Webseite bildet.

Jede der Milliarden von Webseiten dort draußen ist in der Sprache namens HTML geschrieben und jeder, der Ihnen glauben machen möchte, dass man gute Webseiten schreiben kann, ohne zu wissen, wie HTML funktioniert, stellt eine zumindest gewagte Behauptung auf.

Webseiten bestehen aus rechteckigen Kästen, die im Browserfenster übereinander, nebeneinander und ineinander gestapelt werden. Je eher Sie sich an diesen Gedanken gewöhnen, desto leichter wird Ihnen das Gestalten von Webseiten fallen. Alles Runde ist entweder Trick, Grafik oder beides. Beim Umgang mit diesen Kästchen haben die Sprachen HTML und CSS, Cascading Style Sheets, klar getrennte Aufgaben. HTML ist der Maurer, der das Haus und die Zimmeraufteilung anlegt.

Mit HTML werden die rechteckigen Kästchen erstellt und mit Inhalt gefüllt. CSS ist der Dekorateur, der Haus und Zimmer gestaltet. Mit CSS werden Kästchen und Inhalt gestaltet und positioniert. HTML ist und wird vielleicht gerade deshalb oft nicht ernst genommen.

Wenn die Kästchen im HTML aber nicht sauber gebaut sind, führt das beim Gestalten mit CSS unter Umständen zu großen Problemen Die Gestaltung von Webseiten mit CSS beginnt mit soliden HTML Grundkenntnissen und die lernen Sie in diesem Buch.

Was ist HTML eigentlich? HTML steht für Hypertext Markup Language, Englisch für Sprache zur Markierung von Hypertext. Diese Übersetzung stimmt zwar, ist aber nicht sehr aussagekräftig. Deshalb hier eine etwas genauere Charakterisierung dieser vier Buchstaben.

HT wie Hypertext: Hyperlinks erstellen. Hypertext ist Text mit automatischen Querverweisen, die wir im Alltag Hyperlinks oder Links nennen. Das World Wide Web besteht aus Milliarden von durch Hyperlinks miteinander verbundenen Webseiten und durch diese Verbindung entsteht ein fein gesponnenes Gewebe von Webseiten oder etwas prosaischer ausgedrückt: Hyperlinks sind die Fäden, mit denen das weltweite Gewebe gesponnen wird. Das HT in HTML besagt, dass man mit HTML Hyperlinks anlegen kann.

M wie Markup: Etiketten kleben. Markup wird oft mit Auszeichnungen übersetzt. Das können Sie sich wie in einem Supermarkt vorstellen. Waren auszeichnen bedeutet Etiketten dran kleben. HTML klebt buchstäblich Etiketten in den Text einer Webseite. Die HTML-Etiketten stehen in spitzen Klammern und heißen Tags, was auf Deutsch Etikett bedeutet. Der Browser weiß durch die Tags, dass der Text dazwischen ein ganz normaler Fließtextabsatz ist. P steht im Beispiel übrigens für Paragraph.

Ein Paragraph wird durch ein P-Element gekennzeichnet. Dies steht übrigens für Paragraph, auf Deutsch Absatz.

L wie Language: Vokabeln und Grammatikregeln. HTML ist eine Sprache und dementsprechend gibt es Vokabeln und Grammatikregeln, Tags, Elemente und Attribute und Grammatikregeln. Alles muss gelernt und zum Teil penibel umgesetzt werden. Dieses Buch ist keine vollständige Referenz, denn davon gibt es im Web bereits einige. Kostenlos, aktuell und lebendig ist zum Beispiel Self HTML als Buch beim Francis Verlag erhältlich, im Web kostenlos unter de Punkt selfhtml Punkt org.

XHTML, die neueste Version von HTML. Früher oder später werden Sie über den Begriff XHTML stolpern. Um es kurz zu machen: XHTML ist die neueste Version und die Zukunft von HTML. So zumindest, wenn es nach dem Willen des W3C geht. Das X steht übrigens für Extensible, erweiterbar.

Die Grammatikregeln von XHTML sind etwas strenger als bei HTML, was aber letztendlich eher von Vorteil ist.

Dies war der erste Teil des zweiten Kapitels aus dem Buch von Peter Müdler: Little Boxes, Webseiten gestalten mit CSS. Weitere Informationen zu diesem Buch auf infotecken Punkt de oder little minus boxes Punkt de. In Technikwürze 38 gibt es den zweiten Teil aus dem zweiten Kapitel. Freut euch also drauf.

Musik präsentiert von Podsave Music Network.

Schaltet auch nächste Woche wieder ein in Technikwürze, euerm Design- und Webstandards-Podcast. Die Folge siebenunddreißig schließt die Band Soft mit dem Song Higher. Ich sage bis dahin.

Floating up inside the room. It's assumed. It's been hours now and you knew. Looking down it was breaking a window. I don't know. You knew it from the go. We'd lock the walls to fall. Bring back the colors and sound. Facing north and you're out the door. Floating up inside the room. It's assumed. It's been hours and you knew. Even if I come down it's the sound. Can't even feel my feet or keep them on the ground. I can't even get no rest. Can't even get my mind inside again.

You really got me higher. I can't believe my mind. Can't even get my eyes inside again. You really got me higher. Floating up inside the room. It's assumed. It's been hours now and you knew. Looking down it was breaking a window. I don't know. You knew it from the go. Even if I come down it's the sound. Can't even feel my feet or keep them on the ground Can't even get no rest. Not easy to protect. Can't even get my mind behind it, yeah. Can't even leave my mind.

Can't even get my eyes inside it, yeah. Really got me higher. Can't even get no rest. Not easy to protect. Can't even get my mind behind it, yeah. Can't even leave my mind. Can't even get my eyes inside it, yeah. Really got me higher. Can't even get no rest. Not easy to protect. Can't even get my mind behind it, yeah. Can't even leave my mind. Can't even get my eyes inside it, yeah. Really got me higher.