Eine Einführung in (X)HTML

Spielor · 12.09.2009 21:35

Hallöchen,

als ich vor etwa 1-2 Wochen in Schreibelaune war, habe ich eine Einführung in HTML verfasst. Ihr könnt sie auch auf meinem Blog nachlesen und dort Kommentare machen, was mir sogar ganz lieb wäre, denn das gute Stück fühlt sich so einsam. Smile

Ansonsten schreib ich sie natürlich auch nochmals hier rein.

Eine Einführung in HTML ~ Historisches und Grundsätzliches zu HTML, für jeden was dabei!

HTML versteht sich als Auszeichnungssprache und ist als solche plattformunabhängig. Sie kam mit der Grundidee des Internetzes, ein Informationsnetzwerk, angefangen in einer Organisation für Kernforschung, welches sich nach und nach ausgebreitet hat. Eine Sprache also zur Informationsverarbeitung, die mittels bestimmter Software (also Web-Browser) visualisiert wird - also Webseiten ausgibt.

HTML ist also eine Auszeichnungssprache, und solche haben bestimmte Strukturen. Mittels <html> also eröffnet man nämlich das Dokument (die Webseite), mittels </html> wiederum wird es (sie) geschlossen. Und damit erschließt sich eigentlich auch schon die grundsätzliche Syntax - <befehl> zum Öffnen, </befehl> zum Schließen. Alles andere ist auswendig lernen, so, wie man Vokabeln lernt. Und Vokabelbücher für HTML gibt es im Internet reichlich. Doch damit nicht genug, auch hier werden sie nochmals gesammelt. Doch zunächst ein paar Linktips:

selfhtml.org - Riesige Seite rundum alles, was nur im Entferntesten mit HTML zu tun hat. Mit Anleitungen, Problemerörterungen, Sammlungen, anschaulichen Beispielen und viel mehr – eigentlich die einzige wahre Seite.
validator.w3.org - Ein sogenannter „Validator“-Service, der Euren Quelltext darauf prüft, ob Ihr alles richtig gemacht habt.
hex-color-codes.info - Gerade über Google gefunden: Scheinbar eine schöne Seite, um hexdezimale Farbcodes herauszufinden, die nötig für Farbangaben in HTML sind.
spinnenwerk.net: HTML & Co - Auch nochmal eine Übersicht von HTML-Befehlen, die es, wie schon geschrieben, im Netz zuhauf gibt. Dass sie hier vermerkt ist, heißt nicht, dass sie besonders gut ist, vielleicht sogar eher im Gegenteil. Doch aus nostalgischen Gründen schreibe ich sie hier trotzdem hin – ich glaube nämlich, dass genau das die Tabelle ist, mit der ich ganz früher einmal angefangen und rumprobiert habe.

Was eventuell noch zu beachten ist, das ist die neue Form von HTML, namentlich XHTML. Diese versteht sich quasi als ein neuerer, modernerer Dialekt, genauso wie man heutzutage auch gerne "cool" oder "Ketchup" sagt, was vor 50 Jahren noch reichlich seltsam gewesen wäre.
XHTML unterscheidet sich nur minimal von HTML. Grundsätzlicher Unterschied wären da die <befehle>, die sich nicht durch </befehle> schließen lassen, da man hier schlicht und einfach keinen Text dazwischen packen kann. Das wäre beispielsweise ein Zeilenumbruch ( ), denn wie will man dort etwas reinschreiben. Dieser wird nach XHTML-Regeln nicht etwa bei einem belassen, oder gar mittels geschlossen (was ja, wie oben beschrieben, reichlich sinnlos wäre) - nein, man bedient sich einer Art Mischmasch, dem . Also <befehl />.
Das wäre auch schon der wesentliche Unterschied, der wirklich nur bei Elementen auftritt, die man für gewöhnlich nicht einfach so schließt. Andere Unterschiede machen sich in den einzelnen Befehlen bemerkbar, die eventuell mal anders heißen, oder ähnliches.

Machen wir uns nun ans Werk. Hier eine kleine Liste, die nützliche <befehle> enthält, das XHTML-Grundgerüst zeigt, und so weiter. Beginnen wir also mit dem Grundgerüst.

XHTML-Grundgerüst:

PHP-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <!-- Hier kommen Befehle rein, die dem Web-Browser sagen,
         wie er die Seite zu interpretieren hat, und was es so für Besonderheiten gibt.
         Das wäre zum Beispiel <title>Titel</title>, welches den Titel der Seite festlegt. -->
 </head>
 <body>
    <!-- Und hier folgt dann der eigentliche Inhalt. -->
 </body>
</html> 

Die erste Zeile braucht uns nicht weiter stören, nehmen wir sie einfach, wie sie ist. Dann wird das HTML-Dokument geöffnet, mit einem Verweis darauf, dass der XHTML-Dialekt genutzt werden soll. Dann kommt die eigentliche Abfolge an Befehlen und Inhalten.

Etwas kommentieren:

PHP-Code:

<!-- Dies ist ein Kommentar, das heißt, er wird nicht vom Web-Browser in Inhalt umgesetzt. --> 

Das Dokument eröffnen:

PHP-Code:

<html><!-- Hier folgt quasi alles --></html> 

Den Seitenkopf eröffnen:

PHP-Code:

<head>
    <!-- Hier kommen Befehle rein, die dem Web-Browser sagen,
         wie er die Seite zu interpretieren hat, und was es so für Besonderheiten gibt.
         Das wäre zum Beispiel <title>Titel</title>, welches den Titel der Seite festlegt. -->
</head> 

Den Inhalt eröffnen:

PHP-Code:

<body><!-- Hier folgt Inhalt --> 

Fett schreiben:

PHP-Code:

<b>TEXT</b> 

Kursiv schreiben:

PHP-Code:

<i>TEXT</i> 

Unterstrichen schreiben:

PHP-Code:

<u>TEXT</u> 

Durchgestrichen:

PHP-Code:

<s>TEXT</s> 

Zeilenumbruch:

PHP-Code:

<br /> 

Horizontale Linie:

PHP-Code:

<hr /> 

Rechtsbündig schreiben:

PHP-Code:

<div align="right">TEXT</div> 

Zentriert:

PHP-Code:

<div align="center">TEXT</div> 

Linksbündig schreiben:

PHP-Code:

<div align="left">TEXT</div> 

Im Blcoksatz:

PHP-Code:

<ul>TEXT</ul> 

Listenpunkte:

PHP-Code:

<li>Punkt 1</li>
<li>Punkt 2</li> 

Nummerierte Listenpunkte:

PHP-Code:

<ol>Punkt 1</ol>
<ol>Punkt 2</ol> 

Text hochgesetzt:

PHP-Code:

<sup>TEXT</sup> 

Text tiefgesetzt:

PHP-Code:

<sub>TEXT</sub> 

Schriftgröße ändern:

PHP-Code:

<font size="ZAHL">TEXT</font> 

Farbig schreiben:

PHP-Code:

<font color="#HEXDEZIMALER FARBCODE">TEXT</font> 

Um hexdezimale Farbcodes nachzuschlagen, eignet sich auch hervorragend Google.

Schriftart ändern:

PHP-Code:

<font face="SCHRIFTART">TEXT</font> 

Beispiele für "SCHRIFTART": Times New Roman, Verdana, Comic Sans MS, Courier New, Impact, Helvetica, Lucida Sans, ...

Bild einfügen:

PHP-Code:

<img src="LINK/ZUM/BILD.PNG" alt="BESCHREIBUNG DES BILDES" /> 

Seite verlinken in neuem Fenster:

PHP-Code:

<a href="http://LINK/ZUR/SEITE.de" target="_blank">VERLINKUNGSTEXT</a> 

Seite verlinken im gleichen Fenster:

PHP-Code:

<a href="http://LINK/ZUR/SEITE.de">VERLINKUNGSTEXT</a> 

Bild verlinken auf eine Seite in neuem Fenster:

PHP-Code:

<a href="http://LINK/ZUR/SEITE.de" target="_blank"><img src="LINK/ZUM/BILD.PNG" border="0"  alt="BESCHREIBUNG DES BILDES"></a> 

Bild verlinken auf eine Seite im gleichem Fenster:

PHP-Code:

<a href="http://LINK/ZUR/SEITE.de"><img src="LINK/ZUM/BILD.PNG" border="0" alt="BESCHREIBUNG DES BILDES"></a> 

Hintergrundbild durch modifizieren des <body>-Befehls:

PHP-Code:

<body background="LINK/ZUM/BILD.PNG"> 

Tabellen:

PHP-Code:

<table border="1">
  <tr>
   <td>Spalte 1, Zeile 1</td>
   <td>Spalte 2, Zeile 1</td> 
  </tr>
  <tr>
   <td>Spalte 1, Zeile 2</td>
   <td>Spalte 2, Zeile 2</td> 
  </tr>
</table> 

Dabei entspricht also <tr> einer neuen Zeile, und <td> einer neuen Spalte. Diese werden dann wie üblich geschlossen.

Text genauso übernehmen wie er da steht (inklusive Zeilenumbrüche, also ohne dass ein erforderlich ist):

PHP-Code:

<pre>TEXT</pre> 

Beweglicher Text:

PHP-Code:

<marquee direction="RICHTUNG" scrollAmount="ZAHL" height="ZAHL" width="ZAHL">INHALT</marquee> 

Mögliche Richtungen wären: up, down, right, left
"scrollAmount" entspricht der Geschwindigkeit.

Credits: Die meisten HTML-Befehle stammen aus diesem Thema.

RaZer · 13.09.2009 11:40

sehr nette einführung. wäre schon fast dafür es zu pinnen.
danke für die arbeit. sehr schön Thumbs-up

Antu · 13.09.2009 19:39

Schöne Anleitung, du hast das Grundprinzip verständlich erklärt, finde ich.

Allerdings sind einige Elemente/Attribute in deiner Auflistung völlig veraltet*. Das font-Element wird beispielsweise überhaupt nicht mehr verwendet. Heutzutage verwendet man CSS zur Gestaltung. Dasselbe gilt für Attribute wie border, background, etc., mit CSS lässt sich das viel besser lösen. (Diese Elemente/Attribute werden übrigens in HTML 5 auch nicht mehr dabei sein, eben weil sie veraltet sind/es bessere Alternativen gibt).

Vielleicht kannst du die Anleitung ja noch dahingehend überarbeiten, also erklären wie man Elemente mittels CSS gestaltet.

* Sie werden von Browsern trotzdem richtig dargestellt, und da du den Transitional-DOCTYPE benutzt ist das ganze auch standardkompatibel. Es ist nur veraltet, weswegen es meiner Meinung nach in einer Anleitung besser nicht enthalten sein sollte.

**cico** · 13.09.2009 19:46

Diese Anleitung ist für HTML 4 ganz gut, mit XHTML hat das jedoch wenig zu tun
gerade Anfänger heutzutage sollten gleich mit XHTML beginnen und solche Tags wie font oder ähnliches gar nicht erst zu Gesicht bekommen,

wie Antu schon schrieb, sollte der Fokus auf CSS liegen, denn das ist die einzige Zukunftsorientierte Art, Webseiten zu gestalten



<s>

align=""
usw. sind alle veraltet und sollten gar nicht erst zum lernen genutzt werden

Spielor · 13.09.2009 19:57

Die Tags habe ich zugegebenermaßen auch aus einem Thema entnommen und nochmals etwas überarbeitet, was ganz unten von meinem Beitrag verlinkt ist. Ich kanns bei Bedarf nochmal alles überarbeiten, mal schauen. wink

Obschon mir beispielsweise eigentlich keine nicht-CSS-Lösung für das Verändern der Schriftart einfällt, und die Einführung soll ja wirklich nur (X)HTML behandeln.

Und auch in Sachen , , und <s> muss ich Dir, cico, widersprechen, denn soweit ich weiß (ganz sicher bin ich mir da nicht) sind diese "Tags" neuer als diese alten, "historischen" wie zum Beispiel . Was aber nichts daran ändert, dass man nicht doch lieber verwenden sollte, aus SEO-technischen Gründen.

Danke für die Rückmeldung. Smile

**cico** · 13.09.2009 20:08

(13.09.2009 19:57)Spielor schrieb: Und auch in Sachen , , und <s> muss ich Dir, cico, widersprechen, denn soweit ich weiß (ganz sicher bin ich mir da nicht) sind diese "Tags" neuer als diese alten, "historischen" wie zum Beispiel . Was aber nichts daran ändert, dass man nicht doch lieber verwenden sollte, aus SEO-technischen Gründen.

Danke für die Rückmeldung.

das ist genau umgekehrt,
 -> alt, -> neu
 -> alt, -> neu
die anderen sind nur mit css zu realisieren

Navigator · 13.09.2009 20:40

vielen dank für das tut! habs mal überflogen und werds auf jeden fall genauer durcharbeiten.
kommt genau richtig für mich, da ich mir vorgenommen hab mal ein bisschen in html reinzuschuppern.

c00l · 15.09.2009 16:08

Damit kann man schon richtig was anfangen.
Und denkt dran, wenn ihr programmiert, denkt an die Validität, die ihr beispielsweise hier prüfen könnt:

http://validator.w3.org/

**modercol** · 15.09.2009 23:47

(13.09.2009 19:39)Antu schrieb: [...]
(Diese Elemente/Attribute werden übrigens in HTML 5 auch nicht mehr dabei sein, eben weil sie veraltet sind/es bessere Alternativen gibt).

Vielleicht kannst du die Anleitung ja noch dahingehend überarbeiten, also erklären wie man Elemente mittels CSS gestaltet.
[...]

(13.09.2009 20:08)cico schrieb:
(13.09.2009 19:57)Spielor schrieb: Und auch in Sachen , , und <s> muss ich Dir, cico, widersprechen, denn soweit ich weiß (ganz sicher bin ich mir da nicht) sind diese "Tags" neuer als diese alten, "historischen" wie zum Beispiel . Was aber nichts daran ändert, dass man nicht doch lieber verwenden sollte, aus SEO-technischen Gründen.

Danke für die Rückmeldung.

das ist genau umgekehrt,
 -> alt, -> neu
 -> alt, -> neu
die anderen sind nur mit css zu realisieren

HTML 5 als Beispiel heranzuziehen, finde ich nich so gut, lieber XHTML 2.0.

Mit dem CSS habt ihr schon Recht, nur würde dass die Anfänger völlig überfordern.
Spielor, vllt ergänzt du noch, dass die CSS basierte Lösung komfortabler und besser ist und die aktuelle Lösung nur für den Anfang benutzt werden soll (oder so ähnlich)

Code:

<img src="LINK/ZUM/BILD.PNG" alt="BESCHREIBUNG DES BILDES">

Das ist HTML und kein XHTML, du hast den Tag nicht geschlossen

Code:

<img src="LINK/ZUM/BILD.PNG" alt="BESCHREIBUNG DES BILDES" />

Quad Core · 16.09.2009 19:04

sagt mal, ist der unterschied zwischen html und xhtml eigentlich wirklich sooo groß?

Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	Kleine Einführung in C	mono	1	746	18.10.2008 15:25 Letzter Beitrag: Quad Core