Nachdem wir im dritten Teil etwas über das „Wie“ erfahren haben, wird im nächsten Abschnitt von „Wie erstelle ich eine Homepage“ erörtert, wie denn HTML und CSS funktionieren.

Der vierte Teil dieser Artikelreihe ist deutlich umfangreicher, da es sich um Programmiersprachen handelt. Sprachen, sowohl Computer als auch menschliche,  muß man lernen und dafür in der Regel viel Zeit investieren. Deshalb möchte ich an dieser Stelle nur die wichtigsten Grundlagen vermitteln. Anschliessend verweise ich dann auf Quellen und Literatur, die einem den kompletten Einstieg in das Thema geben.

HTML (HyperTextMarkupLanguage)

HTML ist für das Grundgerüst jeder Webseite verantwortlich. Die Abkürzung bedeutet soviel wie „Seitenbeschreibungs-Sprache“. Es wird über sie definiert, wie und an welcher Stelle des Browserfensters Bilder, Texte, Navigation angezeigt werden. HTML-Befehle nennt man „tags“ und werden in spitzen Klammern gesetzt (<>). Das erwähnte Gerüst setzt sich aus folgenden tags zusammen:

  • <html> Die komplette Seite
  • <head> Der Kopf-Teil einer Seite (Informationen für Suchmaschinen werden hier hinterlegt)
  • <body> Der Rumpf (Platz für den Inhalt der Seite, der später im Browser-Fenster angezeigt wird)

HTML-Befehle werden immer geschlossen, d.h. wenn ich mit <html> anfange, muss irgendwann der „Schliessbefehl“ kommen. Dieser wird durch einen vorangestellten Schrägstrich eingeleitet: </html> Alles was sich zwischen diesen beiden Befehlen befindet gehört dann dazu.

Das Grundgerüst sieht dann so aus:

<html>
<head>
</head>
<body>
</body>
</html>

Wenn Sie diesen Text in einem normalen Text-Editor schreiben, als „name.html“-Datei speichern und mit Ihrem Browser öffnen, sehen Sie eine weiße Seite (weil innerhalb des body-tags kein Inhalt steht).
Mit dieser Ergänzung ändert sich das Ergebnis:

<html>
<head>
</head>
<body>hier ist der Inhalt
</body>
</html>

Nun gibt es eine ganze Reihe von HTML-tags, die Sie zur Spezifikation Ihres Inhaltes einsetzen können. Die wichtigsten beziehen sich auf die Definierung von Text (Absatz, Überschrift, Auflistungen), Daten (Tabellen), Bildern, Verknüpfungen (Hyperlinks) und Boxen (zur Positionierung der Inhalte).

<p>  Absatz
<h1> Überschrift 1. Ordnung
<h2> Überschrift 2. Ordnung
<h3> Überschrift 3. Ordnung
<h4> Überschrift 4. Ordnung
<h5> Überschrift 5. Ordnung
<h6> Überschrift 6. Ordnung
<ul> unsortierte Liste
<ol> sortierte Liste
<li> Listenpunkt
<table> Tabelle (hierzu gehören noch weitere tags für die Spalten, Reihen usw.)
<img> Bild
<a> Hyperlink
<div> Box

Bis auf das img-tag müssen alle tags auch wieder durch einen Querstrich geschlossen werden.

<html>
<head>
</head>
<body>
<div>
<h1>Überschrift</h1>
<p>hier ist der Inhalt</p>
</div>
</body>
</html> 

Am vorigen Bespiel sieht man gut, dass die Überschrift und der Absatz nun Teile vom div-tag sind, denn dieses fängt vor der Überschrift an und hört hinter dem Absatz auf. Dieses div-tag kann wie schon erwähnt für die Positionierung  des Inhaltes herangezogen werden. Allerdings wird dies nicht mehr mit HTML realisiert, sondern mit CSS.

CSS

Cascading Style Sheets liefern Informationen über die Formatierung, Auszeichnung, Aussehen und Positionierung von HTML-Elementen. Früher wurde all das mit HTML erzeugt, doch diese Sprache war in der Ausdrucksweise nicht so vielfältig wie CSS. Mit Letzterem ist es zum Beispiel möglich, den Zeilenabstand zu definieren und viele andere Dinge mehr.

Heute kann man feststellen, dass HTML die Inhalte liefert und strukturiert und CSS diese formatiert und positioniert.

Style-Sheets können auf unterschiedliche Arten in HTML integriert werden:

  • inline-CSS
  • HTML-Selektor
  • class-Selektor
  • ID-Selektor

Inline CSS

Wie der Name schon sagt, wird CSS inline benutzt – in der Praxis sieht das so aus:

<html> 
<head>  
</head> 
<body> 
<div> 
<h1 style="font-size:18px;color:#ccc;">Überschrift</h1> 
<p>hier ist der Inhalt</p> 
</div>  
</body>  
</html>

Über die Angabe „style“ kann man eine ganze Reihe von CSS-Anweisungen direkt dem h1-tag (oder jedem anderen) zuweisen. Hier wird die Schriftgröße auf 18 Pixel mit der Farbe hellgrau defniert.

HTML-Selektor

Diese Funktionweise kann man nutzen, um festzulegen wie prinzipiell ein bestimmter HTML-tag formatiert werden soll. Dies wird im HEAD-tag der Seite untergebracht – hier also wie oben die Stil-Anweisungen für den h1-tag.

<html> 
<head>  <style> h1 { font-size:18px; color:#ccc; } </style>
</head> 
<body> 
<div> 
<h1>Überschrift</h1> 
<p>hier ist der Inhalt</p> 
</div>  
</body>  
</html>

Dies hat den Vorteil, dass man die Formatierung nur einmal schreiben muss und nicht immer an jedes h1-tag direkt.

class-Selektor

Ähnlich dem HTML-Selektor wird der class-Selektor auch im HEAD der Seite definiert. Allerdings erfolgt die Zuweisung über eine Class-Anweisung.

<html> 
<head>  <style> .ueberschrift { font-size:18px; color:#ccc; } </style>
</head> 
<body> 
<div> 
<h1 class="ueberschrift">Überschrift</h1> 
<p>hier ist der Inhalt</p> 
</div>  
</body>  
</html>

Wie Sie sehen wird im Style-Sheet nicht mehr das h1 benutzt, sondern ein freiwählbares Wort mit vorangestelltem Punkt (-> .ueberschrift). Dieses Wort darf jedoch keine Sonderzeichen, Umlaute und Leerzeichen enthalten.

id-Selektor

Die letzte Methode ist genauso wie die class-Funktion, nur mit einer  Raute (#) statt einem Punkt (.) und der Zuweisung id statt class.

<html> 
<head>  <style> #ueberschrift { font-size:18px; color:#ccc; } </style>
</head> 
<body> 
<div> 
<h1 id="ueberschrift">Überschrift</h1> 
<p>hier ist der Inhalt</p> 
</div>  
</body>  
</html>

Wofür die verschiedenen Selektoren?

Die Selektoren habe alle eine unterschiedliche Wertigkeit. Am stärksten wirken die Inline-Styles. Sie überschreiben meistens alles, was vorher im HEAD definiert worden ist. Ansonsten hat ein Id mehr Macht als ein class. Es gibt sogar eine Rechenmethode, um zu bestimmen, welche Auszeichnungsmethode welche Wertigkeit hat. Dies würde hier aber zu weit führen, daher erkläre ich nur wie es gern in der Praxis gehandhabt wird:

  • HTML-Selektoren für die grobe Formatierung der wichtigsten HTML-Befehle
  • class-Selektoren für das Feintuning von Texten
  • id-Selektoren für die Positionierung von Boxen
  • inline nur im Ausnahmefall

Es gibt noch zahlreiche Besonderheiten in CSS und einen unglaublichen Funktionsumfang von Befehlen – sogar Schattierungen und abgerundete Ecken sind möglich! Wenn Sie also mehr darüber wissen wollen, besuchen Sie folgende Webseiten, lesen entsprechende Literatur oder buchen einen Kurs bei mir 😉  (unter www.edvart.de)

Hier geht es weiter zum Teil 5 von “wie erstelle ich eine Homepage“