Wie ihr heute alle mitbekommen habt, werden eure Vorträge und meinungen in diesem neuartigen Websitenformat veröffentlicht, dass auf den Namen “Web 2.0″ hört. Aber was war eigentlich Web 1.0, wenn wir schon im Web 2.0 arbeiten?

Der Hintergrund von Web 2.0 ist, dass man heutzutage den Inhalt völlig von dem Design löst. Im “Web 1.0″ hatte der User in seinem Notepad (oder ähnlichen Textwriter) den kompletten Inhalt seiner Seite als Quelltext, dabei war der Inhalt mit dem Design eng verwoben. Aufwändige HTML-Befehle waren in den Quelltext eingebettet um den Inhalt in grafisch ansprechender Weise darzustellen. Das HTML wurde letztlich soweit erweitert, dass man Plugins wie zum Beispiel Java oder Flash in den Quelltext einbauen konnte. Dadurch war im Quelltext der Inhalt der letztendlich auf dem Browser erscheinenden Seite kaum mehr zu finden.

Mit Hilfe des Web 2.0 wird diese Trennung für die breite Masse greifbarer. Denn der User, der eine Internetpräsenz haben möchte plagt sich nun nicht mehr mit aufwändigen Designs herum, sondern kümmert sich weitestgehend um den Inhalt seiner Seite.

Eines der bekanntesten Web 2.0 Seiten ist Wikipedia. Mit seinem einfachen Editor lassen sich Artikel spielend einfach erstellen, bearbeiten oder ergänzen. Der Schwerpunkt liegt nun auf dem Inahlt, der auch sehr einfach erstellt werden kann. Somit beteiligen sich nun eine breite Masse an der Erstellung von Inhalten im Netz. Es sind nicht mehr die wenigen Personen oder Firmen, die Internetseiten mit hohen Aufwand erstellen. Mit Web 2.0 kann sich jeder im Internet angagieren, Artikel schreiben, Internetseiten erstellen oder einfach nur einen Kommentar abgeben.

In letzter Instanz darf man jedoch nicht vergessen, dass auch das Web 2.0 auf HTML und deren Erweiterungen beruht. Das heißt, es einfacher geworden Inhalte zu erstellen und auch ansprechend darzustellen. Die Grundlagen bleiben aber die gleichen, die HTML-Befehle. Und HTML-Befehle sind auch in euren Artikeln und Kommentaren zu finden.

Um den Einstieg zu erleichtern möchte ich euch die Grundlagen und ein paar sinnvolle Anwendungen dieser Befehle geben. Da euch nach soviel Text bestimmt auch schon langweilig geworden ist fangen wir auch gleich mit dem praktischen Teil an:

Nur ein kleiner Satz zu HTML

Wie ihr bereits gelesen habt, bleibt es nicht aus ein kleines, aber feines Basiswissen über HTML-Befehle zu haben.

Wie sieht ein HTML-Befehl in der Regel aus

• Die äußere Form eines HTML-Befehls ist in der Regel in der Form von spitzen Klammern, die man auch als “Kleiner-gleich” oder “Größer-gleich” Zeichen bezeichnet.Ein HTML-Befehl wird also von diesen spitzen Klammern umschlossen

<”HTML-Befehl”>

• Nun haben wir den erste von zwei Grundlagen gelernt. Brauchen wir nur noch die zweite: Nun will die Internetseite noch eine Info von euch. Sie möchte wissen welcher Bereich diesen Befehl erfassen soll. Dies geschieht indem der Befehl durch einen Anfang und ein Ende gekennzeichnet wird. Dies sind dann so aus:

<”HTML-Befehl Anfang>”Content”</”HTML-Befehl Ende>

Jetzt haben wir die schwierigsten Grundlagen des HTML in Wordpress gelernt

Nun folgen ein paar Beispiele was man mit diesen Befehlen alles anfangen kann, dabei beschränke ich mich auf die hier auf der Seite gebräuchlichsten.

Überschriften

Dieses Feature kann zum Beispiel genutzt werden um euren Artikeln kleine Teilüberschriften zu verpassen, damit er nicht so riesig wirkt und in Abschnitte unterteilt wird

Beispiele:

• Beispielüberschrift 1. Grades

  <h1>Beispielüberschrift</h1>

• Beispielüberschrift 2. Grades

  <h2>Beispielüberschrift</h2>

• Beispielüberschrift 3. Grades

  <h3>Beispielüberschrift</h3>

• Beispielüberschrift 4. Grades

  <h4>Beispielüberschrift</h4>

Listen

Dieses Feature kann man nutzen um einfache numerisch oder alphabetisch sortierte Listen oder Gliederungen zu erzeugen.

• Sortierte Listen werden durch die Befehle “ol” (ordered list) umschlossen und der jeweilige Gliederungspunkt wird mit dem Befehl “li” (list item) umschlossen
  1. Erster Gliederungspunkt
  2. Zweiter Gliederungspunkt
  3. Dritter Gliederungspunkt
  4. Vierter Gliederungspunkt

Uns so sieht das dazugehörige HTML aus

<ol> 

<li>Erster Gliederungspunkt</li> 

<li>Zweiter Gliederungspunkt</li> 

<li>Dritter Gliederungspunkt</li> 

<li>Vierter Gliederungspunkt</li> 

</ol>

• Unsortierte Listen werden durch den Befehl “ul” (unsorted list) umschlossen. Der jeweilige Gliederungspunkt wird wieder mit “li” eingeschlossen

• Erster Gliederungspunkt
• Zweiter Gliederungspunkt
• Dritter Gliederungspunkt
• Vierter Gliederungspunkt

Uns so sieht das dazugehörige HTML aus

<ul>

<li>Erster Gliederungspunkt</li>

<li>Zweiter Gliederungspunkt</li>

<li>Dritter Gliederungspunkt</li>

<li>Vierter Gliederungspunkt</li>

</ul>

Eine weitere Form der sortierten Listen, die nicht numerisch, sonder alphabetisch geordnet sind ist der Befehl “ol Type=a”

1. Erster Gliederungspunkt
2. Zweiter Gliederungspunkt
3. Dritter Gliederungspunkt
4. Vierter Gliederungspunkt

Uns so sieht das dazugehörige HTML aus

<ol type=”a”>

<li>Erster Gliederungspunkt</li>

<li>Zweiter Gliederungspunkt</li>

<li>Dritter Gliederungspunkt</li>

<li>Vierter Gliederungspunkt</li>

</ol>

Dies soll es erst einmal zu den Listen gewesen sein.

Hyperlinks

• Link zu einer Datei

Dieser Link führt zu dieser Internetseite

Uns so sieht das dazugehörige HTML aus

<a href=”http://www.web2akademie.de”>Dieser Link führt zu dieser Internetseite</a>

Dies soll es auch schon zu den Verlinkungen gewesen sein.

Sonderzeichen 

Der Zeichenvorrat eurer Tastatur beherbergt leider keine Sonderzeichen, die ausgeschrieben aber meistens nicht so gut ausgesehen, wie das eigentliche Zeichen. Deswegen kommt zum Schluss noch ein kleine Hilfestellung zu Sonderzeichen.

Hier möchte ich jedoch nur kurz auf die Schreibweise und die Einbettung in euren Text eingehen, da der Zeichenvorrat sehr groß ist und ich da auf eine sehr gute Internetseite verweisen möchte.

Die grundsätzliche Schreibweise der Sonderzeichen beginnt mit einem “&” und endet mit einem “;”

Beispieltext
Der Vater fragt: Wieviel Geld hat der Computer gekostet?
Der Sohn antwortet: 300 €

Uns so sieht das dazugehörige HTML aus
Der Vater fragt: Wieviel Geld hat der Computer gekostet?
Der Sohn antwortet: 300 &euro;

Eine Liste mit den gängigsten Sonderzeichen findet ihr Hier

Das sind die wichtigsten Dinge damit euer Artikel die richtige Struktur und ein schönes Design hat. Wer von diesen einfachen Befehlen noch nicht genug hat und weitere HTML-Befehle in seinem Artikel verwenden möchte findet aufwww.ewetel.net mehr

Bitte schreibt Kommentare, damit ich weiß, ob ich euch damit weiterhelfen konnte. Wenn ihr weitere Dinge wissen möchtet kann ich das natürlich gerne noch in den Artikel einbauen.

Links zu diesem Artikel

• Was ist Web 2.0? – Eine visuelle Antwort auf die Frage. Das sehr bekannte Video auf youtube
• Alle wichtigen Sonderzeichen
• Eine sehr übersichtliche Liste aller HTML-Befehle