Montag, 30. September 2013

September 2013 - HTML 5



Diesen Monat schreibe ich über HTML5, da ich einiges darüber erfahren habe und ich es sehr interessant finde.

HTML bedeutet "HyperText Markup Language" ("Hypertext-Auszeichnungssprache").
Zurzeit wird noch an HTML 5 gearbeitet, wenn es jedoch fertig ist, wird HTML5 die Nachfolge von HTML4 antreten.


Entstehung


Nachdem HTML 4.0 im Dezember 1997 veröffentlicht wurde, wurde erst im Dezember 1999 die Version 4.0.1 veröffentlicht, dann wurden bis zum April 2009  keine Aktualisierungen mehr gemacht.
Das W3C (World Wide Web Consortium) setzte auf XML, das zum Nachfolger von HTML werden sollte. HTML 4.0.1 wurde reformuliert, und dann zur XML basierten Auszeichnungssprache XHTML 1.0. XHTML wurde bis XHTML 2.0 weiterentwickelt, da es aber zu viel negative Kritik bekam, kam Mitte 2004 der Vorschlag, HTML5 zu entwickeln.
W3C fing mit der Entwicklung von HTML5 an, während WHATWG (Web Hypertext Application Technology Working Group) immer noch an der Konkurrenz XHTML arbeitete.
Zwischen Ende 2006 und Anfang 2007 wurden HTML5 und XHTML 2.0 als verwandte Sprachen mit unterschiedlichen Zielgruppen definiert. Seit Mai 2007 arbeiteten W3C und WHATWG gemeinsam an HTML5.
Mitte 2009 wurde schliesslich bekanntgegeben, dass die Entwicklung von XHTML 2.0 nicht mehr weitergeführt werde und dass die nächste Generation der Auszeichnungssprache nicht eine neue Version von XTHML sein werde, sondern HTML5. 

HTML5 soll 2014 offiziel fertiggestellt werden. Jedoch wird heute schon in den meisten Browsern HTML5 verwendet, HTML5 kann auch schon teilweise eingesetzt werden.



Quelltext


Um einen Quelltext zu machen, benötigt man verschiedene Tags.
Am Anfang wird immer "<!DOCTYPE html>" geschrieben. 
Danach kommt ein "<html>".
Anschliessend folgt der "<head>" Bereich, in dem eigentlich meistens nur der Titel einer Seite geschrieben und Verlinkungen zu CSS gemacht werden.
Im darauffolgenden "<body>" Bereich kommen alle anderen Elemente hinein, die man auf seiner Seite haben will.
Um ein Tag wieder zu schliessen, wird nach der geöffneten Klammer ein "/" geschrieben
z.B.. "</head>".
Ob diese Tags nun groß oder klein geschrieben werden spielt keine Rolle.

So sieht beispielsweise ein typisches "Hallo Welt" in HTML5 aus:















Wenn man die Seite im Browser öffnet sieht das folgendermassen aus:













Mehr wird jetzt auch noch nicht angezeigt.
Man kann aber sehr viel mit HTML5 darstellen und einfügen.

Beispielsweise wird mit "<a href="http://google.ch">Google</a>" ein Link gemacht, mit dem man auf Google kommt


Das sieht dann so aus:




















(die "<br/>" sind dafür da, dass nach der vorherigen Zeile ein Zeilenumbruch stattfindet.)


Und so sieht es dann im Browser aus:














Um Bilder einzufügen, muss man lediglich "<img scr="BILD.jpg">" einfügen.
Das Bild muss aber im gleichen Ordner gespeichert sein wie die .html Datei.

In HTML5 sieht das so aus: 


















Und im Browser so:
















Dies sind einige der wichtigsten HTML Befehle:


HTML-Befehl:                           Beschreibung:


Bereich Einteilung: 



<header>                                         Bereich für Kopf (Nicht zu verwechseln mit <head>.)

<nav>                                               Bereich Navigation 

<section>                                        Gruppierte Elemente

<article>                                           Bereich für Inhalt

<aside>                                             Bereich für Zusatzinformationen zum Inhalt

<footer>                                           Bereich für Fuss





Text Strukturierung



<h1> ... </h1>                                Hauptüberschrift 


<h2> ... <h/2>                                Unterüberschriften (von 2 bis 6)
bis
<h6> ... </h6>



<p> ... </p>                                     Absatz (Danach wird automatisch Platz gehalten.)


<br />                                                Erzwungener Zeilenumbruch


<hr />                                                Trennlinie - Zum  Trennen von unterschiedlichen Inhalten.




Links/Verweise



<a href="URL">BESCHREIBUNG</a>            Für interne und externe Links


<a href="LINK" target="_blank"                       Neues Browserfenster wird geöffnet



<a href="#xy">                                            Sprungmarke zu einem bestimmten Punkt                                                                                            (hier: xy)


<a href="mailto:E-MAIL">BESCHREIBUNG</a>           Neue E-Mail mit bereits eingegebener Adresse




                                                                               
Aufzählungen




<li>AUFZÄHLUNGSPUNKT</li>                 Bei allen Aufzählungen müssen die Einzelpunkte                                                                                                 durch diesen Tag gekennzeichnet. sein.

<ul> ... </ul>                                                        Umschliesst einzelne <li> - Wird für                                                                                                                            Seitennavigation benötigt.

<ol> ... </ol>                                                       Umschliesst einzelne <li> - Die einzelnen                                                                                                                Listenpunkte werden dann entsprechend nummeriert. 





Für das Design wird CSS genutzt, daher muss es auch im "<head>" Bereich verlinkt werden.


Das war mein Blogeintrag zum Monat September.












Keine Kommentare:

Kommentar veröffentlichen