HTML – Seite 13 – Homepage Anleitung

Zwei Wege zum HTML5-Standard

Die zwei Arbeitsgruppen, die sich mit der Standardisierung von HTML5 beschäftigen, gehen diametral entgegengesetzte Wege. Das World Wide Web Consortium (W3C) will in den nächsten Jahren eine Spezifikation für HTML5 veröffentlichen und die Web Hypertext Application Technology Working Group (WHATWG), die damals mit der Spezifikation begann, möchte HTML5 fortwährend standardisieren möchte. Sie arbeitet an ihrer "kanonischen" Dokumentation von HTML und möchte fortlaufend wichtige und brauchbare Neuerungen mit aufnehmen und dadurch eine fortwährende und besonders zeitgemäße Spezifizierung im Sinne des selbst ausgerufenen "HTML Living Standard" schaffen. Diese Positionen sind nicht neu und auch schon mehrfach detailliert beschrieben und begründet worden. Eigentlich kann es dem Ersteller von Internetseiten auch ziemlich egal sein, denn beide Wege sind parallel beschreitbar und die Entscheidung, wer was unterstützt, fällen ja erfahrungsgemäß die Browserhersteller und nicht die Standardisierer.

GSL-Team2012-07-24T07:52:28+02:00Juli 24th, 2012|HTML|Kommentare deaktiviert

HTML5-Tag output

Mit dem neuen HTML5-Tag <output> lassen sich nur dynamisch zum Beispiel mit Jacascript erzeugte Werte ausgeben. Ein typisches Fallbeispiel ist die Summe der Artikel in einem Warenkorb. Es besitzt ein value-Attribut, das durch DOM mit Javascript festlegen kann, was auf dem Bildschirm als Output erscheint. Das ist für den Programmierer durchaus bequemer und einfacher beim Erstellen von Internetseiten als die bisherigen Möglichkeiten. Hier ein Codebeispiel für eine Berechnung und die Ausgabe des Ergebnisses per Output-Tag: <form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"> <input name="a" type="number" step="any"> + <input name="b" type="number" step="any"> = <output name="o"></output> </form> In diesem Codebeispiel wird auch das neue HTML5-Attribut "number" des Input-Tags benutzt…

GSL-Team2012-07-17T08:01:21+02:00Juli 17th, 2012|HTML|Kommentare deaktiviert

HTML5-Tags details und summary

Mit den Tags <details> und <summary> kann man etwas wirklich Neues in HTML5 machen, was bisher nur mit Javascript realisiert werden konnte. Viele Webseiten haben zwar schon Bereiche, die zunächst verdeckt sind und sich durch Anklicken öffenen (sogenannte expanding/collapsing-blocks), allerdings zurzeit von den Erstellern der Internetseiten noch fast durchgängig mit Javascript realisiert. Der Inhalt eines <details>-Elementes wird solange verborgen, bis das im <details>-Element vorhandene <summary>-Element angeklickt wird. Das <summary>-Element ist dabei immer sichtbar. Hier ein Beispiel dafür: <details> <summary>Details ein- oder ausblenden</summary> <p> Hier sehen Sie die Datails dazu. </p> </details> Das <details>-Tag macht das jetzt ohne jeglichen Zusatzprogramme einfach mit HTML5. Man kann erwarten, dass es auf die Dauer die Javascript-Lösungen für solche Funktionen vollständig ablösen wird.

GSL-Team2012-07-06T09:04:31+02:00Juli 6th, 2012|HTML|Kommentare deaktiviert

HTML5-Tags Article und Section

Auch mit den semantischen HTML5-Tags <article> und <section> kann man die Suchmaschinen-Sichtbarkeit beim Erstellen von Internetseiten genau wie mit <header> und <footer> deutlich verbessern. Artikel können aus mehreren Sektionen zusammengestellt werden, und eine Sektion kann auch über mehrere Artikel verfügen. Das klingt erstmal etwas verwirrend – ist es aber nicht. Ein Artikel stellt einen vollen Inhaltsblock dar, und eine Section ist ein Stück eines größeren Ganzen. Schaut man sich beispielsweise ein Blog an, hat die Startseite z.B. eine Sektion, die Liste aller Postings, und jedes einzelne Posting kann wieder ein Artikel sein, der zwei Sektionen beinhaltet, zum einen eben diesen Artikel und zum anderen die Kommentare dazu.

GSL-Team2012-06-30T09:20:28+02:00Juni 30th, 2012|HTML|Kommentare deaktiviert

Media Queries unter CSS3 freigegeben

Als Empfehlung (Recommendation) für den endgültigen Standard wurden vorgestern vom World Wide Web Consortium die Media-Queries freigegeben. Diese Empfehlung entspricht einer CSS3-Spezifikation und definiert, wie Ersteller von Internetseiten ihre Stylesheets für verschiedene Geräteklassen zuordnen können. Grundsätzlich war das ja auch schon bisher unter HTML4 und CSS2 möglich. Mit den neuen HTML5-Media Queries kann der Programmierer oder Designer die Zuordnung eines Stylesheets von weiteren Eigenschaften des aufrufenden Gerätes abhängig machen. Hat man zum Beispiel eine CSS-Datei erstellt, die nur für mobile Geräte zugeordnet werden soll, die mindestens 1000 Pixel Bildschirmbreite haben, sieht das jetzt so aus: <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="ab1000px.css" /> Neben der Und-Verknüpfung mit "and" wie im Beispiel gibt es auch noch eine Verneinung mit "not". Eine Oder-Verknüpfung ist nicht vorgesehen.

GSL-Team2012-06-21T17:13:31+02:00Juni 21st, 2012|CSS, HTML|Kommentare deaktiviert

HTML5-Tags Header und Footer

Mit <header> und <footer> wurden zwei neue semantische Tags in HTML5 eingeführt. Beide Tags machen im Grunde nichts anderes als das bekannte <div>-Tag und zeigen ihre Inhalte auch genauso auf dem Bildschirm. Aber der Einsatz wird auf längere Sicht mit besseren Ergebnissen für Ihre Internetseite bei den Suchmaschinen belohnt, denn die Suchmaschinen sind bei Verwendung der Tags <header> und <footer> in der Lage zwischen Content und Dingen, die zwar für den Benutzer wichtig, aber eben kein Content sind, zu unterscheiden. Vor HTML5 musste man zur Abgrenzung von Kopf und Fuß vom eigentlichen Content DIVs mit entsprechenden IDs benutzen. Damit haben die beiden neuen Tags jetzt Schluss gemacht.

GSL-Team2012-06-18T10:37:03+02:00Juni 18th, 2012|HTML|Kommentare deaktiviert

HTML5-Tag Canvas

Der Tag <canvas> erzeugt unter HTML5 eine Bitmap-Oberfläche, mit der man ähnlich wie mit GDI+ oder .NET Image Object arbeiten kann. Canvas ist eine ausgezeichnete Methode, wenn es darum geht, Kurven und Grafiken zu zeichenen, die traditionell unter reinem HTML kaum realisierbar waren. Auch für Kundengrafiken ist Canvas gut geeignet. Mit Canvas kann man außer Linien und Rechtecken auch Kreisbögen, Bezierkurven, Farbverläufe und Grafiken auf den Schirm bringen. Tranzparenz ist in Abstufungen möglich, natürlich auch Texte. Objekte und Gruppen davon lassen sich in Canvas verschieben, skalieren und drehen. Auch Animationen mit Javascript sind möglich.

GSL-Team2012-06-12T07:48:17+02:00Juni 12th, 2012|HTML|Kommentare deaktiviert

Firefox 13 kann downgeloadet werden

Die neue Version Firefox 13 wurde soeben von Hersteller Mozilla freigegeben. Im FTP-Bereich findet man die verschiedenen Versionen für Windows, Linux und Mac zum Download. Die meisten Verbesserungen in Firefox 13 sind nicht direkt an der Oberfläche zu erkennen. Zum Beispiel enthält Firefox 13 das zuerst von Google eingeführte neue SPDY-Protokoll, das zukünftig HTTP ersetzen wird, weil es schneller und wegen der standardmäßigen SSL-Verschlüsselung deutlich sicherer als http ist. Auch die Startseite ist neu gestaltet worden. Hier kann man jetzt übersichtlich alle wichtigen Funktionen des Browsers aufrufen. Wer den Firefox-Browser für die Entwicklung von Internetanwendungen und die Erstellung und Überprüfung von Internetseiten nutzt, findet gut 70 Verbesserungen im Page Inspector, im HTML Panel, im Style Inspector, im Scratchpad und auch im Style Editor. Für Ersteller von Internetseiten ist Firefox 13 ein Muss!

GSL-Team2012-06-05T10:20:55+02:00Juni 5th, 2012|HTML, Javascript|Kommentare deaktiviert

HTML5 – Tag Input

Der Tag <input> ist ja nicht wirklich neu, hat aber in HTML5 eine Menge neuer Werte für das "type"-Attribut spendiert bekommen, die die Browser veranlassen, sehr interessante Funktionen ohne weitere Codeeingabe oder Zusatzprogramme zu machen. Dazu gehört zum Beispiel der Wert "datetime" für das Attribut "type". Wenn man das einsetzt, bringt ein entsprechend HTML5-fähiger Browser direkt einen Datums- und Uhrzeitpicker auf den Schirm, den man bisher mühsam mit Javascript realisieren musste. Ähnlich ist es mit dem neuen Typattribut "color", das direkt einen grafischen Farbwähler anzeigt, wenn der Browser HTML5 beherrscht. Das Typattribut "email" erzeugt die Eingabefunktion für eine Emailadresse mit Benutzerführung und Validierung, entsprechend funktioniert auch das Typattribut "url". Die Validierung dazu ist sehr strikt. "google.de" und "www.google.de" werden als nicht valide bewertet, während "http://www.google.de" valide ist, also vorsichtig damit…

GSL-Team2012-06-04T08:48:38+02:00Juni 4th, 2012|HTML|Kommentare deaktiviert

Der neue Browser Axis von Yahoo

Für Ersteller von Internetseiten und andere Webschaffende ist ein neuer Browser schon ein Ereignis. Unter dem Motto "Axis erfindet das Suchen und Surfen im Internet neu" bewirbt Yahoo seinen neuen Browser Axis als Spezialisten für die schnellere und intelligentere Suche im Netz. Genau genommen gibt es diesen Super-Such-Browser nur für iPads und iPhones von Apple. Auf Desktop-Maschinen ist es nur eine Browsererweiterung für die Platzhirsche Firefox, Chrome, Internet Explorer oder Safari. Von daher muss man seine frisch erstellten Internetseiten nicht unbedingt auch noch unter Axis auf korrekte Darstellung des Designs überprüfen. Pech für Yahoo: Inzwischen wurde ein Sicherheitsproblem bei Axis bekannt: Die Chrome-Version von Axis nutzt ein Yahoo-Zertifikat, das beispielsweise Schadsoftware von kriminellen Angreifern als von Yahoo stammend ausgeben kann.

GSL-Team2012-05-25T08:30:35+02:00Mai 25th, 2012|Allgemein, HTML|Kommentare deaktiviert