HTML und CSS — Ein Überblick

• • etwa 2.200 Worte

Letztens bat mich ein Freund, ihm HTML beizubringen. Das versuchte ich, und hier sind meine Beschreibungen, hoffentlich etwas anderes und prägnanter, als die ganzen anderen dort draussen.

Ich ver­suchte letz­tens, einem Freund einen gro­ben Ein­blick in die Ent­wick­lung von Web­sei­ten mit­tels HTML und CSS zu geben. Meine Idee war, ihm nur den grund­sätz­li­chen Auf­bau und die Ideen hin­ter den Tech­no­lo­gien zu erklä­ren, sodass er selbst dann aus vor­han­de­nen Über­sich­ten und vor allem dem Code ande­rer Web­site ler­nen kann. Die­ses Gespräch habe ich hier noch ein­mal zusam­men­ge­fasst auf­ge­schrie­ben.

Zwi­schen­drin: Viele zusätz­li­che Anmer­kun­gen zur Ver­deut­li­chung und Ver­tie­fung in den Fuß­no­ten und gestellte Fra­gen als Frage-Ant­wort-Kom­bi­na­tion.

"Was brau­che ich an Mate­rial?"

Einen Brow­ser (Emp­feh­lung: Safari oder Chrome) und einen Text­edi­tor (Emp­feh­lung: Espresso, Note­pad++).

HTML-Markup

Wozu braucht man HTML? Um Inhalte (das Wort kommt öfter und heißt: Texte, Bil­der, Videos, usw.) auf eine Weise zu struk­tu­rie­ren, dass sie in einem Brow­ser auf eine bestimmte Weise dar­ge­stellt wer­den kön­nen. Wich­tig ist schon hier: HTML selbst struk­tu­riert Inhalte, es sollte nicht dazu ver­wen­det wer­den, die­sen Inhal­ten ein bestimm­tes Aus­se­hen zu geben – um das Aus­se­hen küm­mern wir uns spä­ter. Gutes HTML lässt ohne bestimmte Dar­stel­lungs­op­tio­nen eine logi­sche Struk­tur erken­nen.

Diese Struk­tur wird erstellt, indem man Teile des Inhalts (Ele­mente, Text-Aus­schnitte oder auch ganze Inhalts-Blö­cke) bestimmt mar­kiert[1]. Diese Mar­kie­run­gen wer­den "Tags"[2] genannt und in spit­zen Klam­mern geschrie­ben:

<strong>fett gedruckter Text</strong>

Ele­mente der Art "tag" wer­den durch <tag> ein­ge­lei­tet (Opening-Tag) und durch </tag> wie­der geschlos­sen (End-Tag)[3].

Ele­mente kön­nen auch Attri­bute haben, z.b. kann einem a-Ele­ment ("anchor") mit dem href-Attri­but ("hyper­text refe­rence") eine Link-Adresse zuge­wie­sen wer­den, auf die es dann ver­weist. Geschrie­ben wer­den Attri­bute in dem Stil AttributName="AttributInhalt" inner­halb des Opening-Tags. So erzeugt das Fol­gende einen Link mit dem Text "ein Link", der auf google.com ver­weist (ein Link):

<a href="http://google.com/">ein Link</a>

Es gibt auch Ele­mente ohne eige­nen Inhalt (leere Ele­mente), z.B. sol­che, die einen Zei­len­um­bruch (br) oder ein Bild (img) ein­fü­gen. Sol­che beste­hen nur aus dem Opening-Tag und wer­den ein­fach mit einem /> am Ende geschrie­ben[4]. Ein Bild wird z.B. so ein­ge­fügt[5]:

<img src="bild.jpg" alt="ein Beschreibung des Bildes" />

Der HTML-Baum

Ein HTML-Doku­ment besteht im Prin­zip aus vie­len ver­schach­tel­ten Tags.

Ganz oben in der ers­ten Zeile steht zunächst, wel­cher Typ das fol­gende Doku­ment hat. Für HTML5 steht dort ein­fach . Dann kommt das erste Tag, wel­ches das gesamte Doku­ment umschließt: <html>[6].

Dar­auf folgt <head>, der Kopf des Doku­ments, mit eini­gen Meta-Infor­ma­tio­nen und Ver­wei­sen, jedoch kei­nen direkt sicht­a­b­rem Inhalt. Am pro­mi­nen­tes­ten: Das <title>-Tag, wel­ches den Titel des Doku­ments angibt (wird im Brow­ser im Fens­ter- oder Tab-Rah­men ange­zeigt)[7].

Ver­wie­sen wird im <head>-Bereich z.B. auf das Favi­con der Seite[8] oder auf Sty­le­s­heets oder Skripte, die gela­den wer­den sol­len:

<link rel="shortcut icon" href="images/favicon.png" type="image/png" />

für das Favi­con und

<link rel="stylesheet" type="text/css" href="style.css" />

für das Sty­le­s­heet style.css[9].

"Ok, und was ist <meta>?"

<meta> ist ein "lee­res Ele­ment", mit dem man im Doku­ment-Kopf bestimmte Meta­da­ten über das Doku­ment in Form von Zuord­nun­gen machen kann, die von Maschi­nen gele­sen wer­den kön­nen. Beson­ders wich­tig ist

<meta charset="UTF-8">

wel­ches die Zei­chen­ko­die­rung des Doku­ments angibt. Alle sons­ti­gen Meta-Infor­ma­tio­nen sind optio­nal. Ein Bei­spiel für eine typi­sche Meta-Infor­ma­tion ist der Autor des Doku­ments:

<meta name="author" content="Autorenname" />

Mehr auf Wiki­pe­dia.

Nach dem <head> kommt, logi­scher Weise, der <body>, der Kör­per des Doku­ments, mit dem eigent­li­chen, sicht­ba­ren Inhalt.

Die­ser Inhalt ist (im Ide­al­fall) mit­tels pas­sen­der Tags struk­tu­riert und auch von Men­schen im Quell­code gut zu lesen. Um bestimm­ten Blö­cke von Inhalt Kenn­zeich­nun­gen zu geben, die über ein­fa­che Tags hin­aus gehen (und, damit man diese Blö­cke spä­ter mit Sti­len ver­se­hen kann), kann man jedem Tag auch als Attri­but eine Klasse und ID zuwei­sen. Klas­sen kön­nen mehr­fach ver­wen­det wer­den, IDs müs­sen ein­deu­tig im gesam­ten Doku­ment sein.

Der typi­sche Auf­bau eines HTML-Doku­ments ist bei­spiels­weise[10]:

<!DOCTYPE HTML>
<html lang="de-DE">
<head>
  <meta charset="UTF-8" />
  <title>Seitentitel</title>
  <link rel="shortcut icon" href="images/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>Der Titel der Seite</h1>
  <div id="content" class="article">
    <h2>Der Titel des Artikels</h2>
    <p>Ein Absatz (p für engl. paragraph: Absatz).</p>
    <p>Ein weiterer Absatz.</p>
  </div>
  <div id="sidebar">
    <p class="article-meta">
      Der Artikel wurde am ... von ... veröffentlicht.
    </p>
    <p class="article-navigation">
      <a href="2.html" rel="next">Ein weiterer Artikel</a>
    </p>
  </div>
</body>
</html>

Was jetzt an die­ser Stelle sinn­voll ist, sofern man glaubt, alles vor­he­rige ver­stan­den zu haben und nun eigene Schlüsse zie­hen möchte: Den Quell­text von Web­sei­ten anse­hen, von denen man glaubt, ihre Struk­tur im HTML erken­nen zu kön­nen. Das geht in den meis­ten Brow­ser ganz ein­fach mit einem Rechtsklick irgendwo auf der Seite und einem anschlie­ßen­den Klick auf "Sei­ten­quell­text anzei­gen" (oder ähn­lich)[11]. Tun Sie es ein­fach mal hier auf die­ser Seite und ver­su­chen Sie zu ver­ste­hen, was wel­cher Tag zu bedeu­ten hat und inwie­fern er zur Struk­tur der Seite bei­trägt.

Möch­ten Sie ein bestimm­tes Tag nach­schla­gen, emp­fehle ich Ihnen diese Seite (eng­lisch).

Style

Der Inhalt des Doku­men­tes wird mit HTML struk­tu­riert. Diese Struk­tur allein ist aber ästhe­tisch nicht son­der­lich anspre­chend. Daher legt man ein soge­nann­tes Sty­le­s­heet (CSS-Dateien, "Cas­ca­ding Style Sheets") an, um dem Inhalt das gewünschte Aus­se­hen zu ver­pas­sen[12]. Wie oben schon gese­hen, wird im Head dann auf diese CSS-Dateien ver­wie­sen, sodass der Brow­ser sie laden und anwen­den kann.

Um in CSS ein­zel­nen Ele­men­ten (oder Ele­ment-Grup­pen) Stile zuzu­wei­sen, müs­sen diese zunächst ange­spro­chen (selek­tiert) wer­den. Das geschieht nach fol­gen­dem Mus­ter: Um eine bestimmte Art von Tag anzu­spre­chen, muss nur der Tag-Name geschrie­ben wer­den. Um eine bestimmte Klasse anzu­spre­chen, wird ein Punkt direkt gefolgt von dem Klas­sen-Namen geschrie­ben. Eine bestimmte ID wird ange­spro­chen, indem eine Raute (#) direkt gefolgt von dem ID-Namen geschrie­ben wird. Diese Selek­to­ren kön­nen auch kom­bi­niert wer­den[13]. Nach dem Selek­tie­ren des Ele­ments folgt in geschweif­ten Klam­mern eine Liste mit Stil-Zuwei­sun­gen.

Um nun einen Block in CSS mit einem Stil zu ver­se­hen, muss nicht jeder Block eine ein­deu­tige Klasse oder ID bekom­men, in CSS kann man auch Ver­schach­te­lun­gen von Ele­men­ten ange­ben. Das lässt sich am bes­ten durch ein Bei­spiel erklä­ren:

#sidebar p.article-navigation a {
  color: green;
}

Diese CSS-Anwei­sung gibt an: In der Side­bar (ID sidebar), darin in dem Absatz mit der Klasse article-navigation, darin für jeden Link (a): Färbe ihn Grün!

Durch diese Ver­schach­te­lun­gen kann man den Bereich, den man mit die­sem Stil ver­se­hen möchte, ein­schrän­ken. Wo gerade nur die Links in der Arti­kel-Navi­ga­tion grün wur­den, würde durch #sidebar a {color: green;} jeder Link in der Side­bar grün[14]. Mehr Infor­ma­tio­nen zu Selek­to­ren gibt es in der Wiki­pe­dia.

Ähn­lich wie es viele Tags in HTML gibt, so gibt es viele Stil-Eigen­schaf­ten in CSS (color ist eine die­ser Eigen­schaf­ten). Um viele rele­vante ken­nen­zu­ler­nen, emp­fiehlt es sich wie­der, den Quell­text eini­ger Web­sei­ten, hier beson­ders die CSS-Dateien, ein­mal genau anzu­se­hen und vor allem die Rela­tion von HTML-Ele­ment und CSS-Anwei­sung zu ver­ste­hen[15].

"Farb­codes?"

Far­ben könne auf meh­rere Arten geschrie­ben wer­den. Einige Ele­men­tar-Far­ben kön­nen direkt als eng­li­sche Worte geschrie­ben wer­den (black, red, blue, green, etc.). Typi­sche Schreib­weise ist jedoch in RGB und hexa­de­zi­mal, mit 256 Wer­ten (von 00 bis ff) für rot, grün und blau. Hier ein Farb­rad mit RGB-Hex-Codie­rung.

"Was sind diese gan­zen @-Befehle am Anfang?"

@import bin­det andere CSS-Dateien ein. @font-face bin­det down­load­bare Schrif­ten ein.

Für das "groß und fett" machst du ein­fach eine Klasse, und für jede Farbe eine ID (oder eine wei­tere Klasse). Z.B. ist das der blaue Link:

<a href="blau.html" class="bigfat blue">Blau</a>

und im CSS steht:

.bigfat {font-weight: bold; font-size: 18px;}
.blau {color: blue;}

Natür­lich kannst du das auch belie­big näher bestim­men:

a.bigfat.blau {color: blue;}

Eine gute Über­sicht zu den meis­ten CSS-Eigen­schaf­ten gibt es auf CSS 4 You. Eine andere Quelle, auf die ich eben auf­merk­sam wurde, ist das Wiki­book "Website­entwicklung: CSS".

Fazit

Das ist soweit alles an Basis­wis­sen, was mach braucht, um Web­sei­ten schrei­ben zu kön­nen, bzw. um sich das Erstel­len von Web­sei­ten selbst bei­brin­gen zu kön­nen. So habe ich es jeden­falls gemacht; aber ich muss sagen, ich habe lange gebraucht, um die Struk­tu­ren, wie ich sie oben beschrie­ben habe, zu erken­nen und zu ver­ste­hen. Ich hoffe, Ihnen fällt es dadurch leich­ter, einen Ein­stieg zu fin­den.

Falls Sie nicht der Typ für alles-nur-selbst-erar­bei­ten sind, kön­nen Sie natür­lich auch ein­fach ein gutes Buch zu dem Thema kau­fen[16]. Zwei Bücher über die ich viel gehört habe (aber die ich beide nicht besitze): "Moder­nes Web­de­sign: Gestal­tungs­prin­zi­pien, Web­stan­dards, Pra­xis" (Manuela Hoff­mann, 12/​2009) und "Ein­füh­rung in XHTML, CSS und Web­de­sign: Stan­dard­kon­forme, moderne und bar­rie­re­freie Web­sites erstel­len" (Michael Jen­dry­schik, 12/​2008).

  1. HTML ist daher eine soge­nannte "Markup"-Spra­che. ↩

  2. engl. Tag: Marke, Schlag­wort ↩

  3. Im Fol­gen­den nenne ich Tags inkl. Inhalt öfters auch "Ele­ment", z.b. für das Bei­spiel gerade: Das strong-Ele­ment. Viele Bezeich­nun­gen übri­gens frei erfun­den und zur der Ver­ein­fa­chung hal­ber von mir ver­wen­det! ↩

  4. Im ori­gi­na­len HTML wer­den leere Ele­mente ein­fach mit einer spit­zen Klam­mer geschlos­sen, ohne Slash davor. In XML ist dies jedoch üblich, da dies die Kom­pa­ti­bi­li­tät zu unbe­kann­ten Ele­men­ten erhöht. Da dies auch in HTML5 (bzw. "XHTML5") erlaubt ist und für mich mehr Sinn macht, ver­wende ich /> zum Schlie­ßen von lee­ren Ele­men­ten. ↩

  5. img: Image, Bild.

    src: Source, Quelle, d.h. die Adresse/​URL zum Bild, kann sowohl lokal wie auch auf einer ande­ren Web­seite lie­gen.

    alt: Alter­na­tiv-Text, falls das Bild nicht gela­den oder ange­zeigt wer­den kann, z.B. auf Lese­ge­rä­ten für Blinde. ↩

  6. Viele geben hier auch schon als Attri­but die Spra­che des Doku­ments an, z.B. <html lang="de-DE">. ↩

  7. Wie gesagt, die­ser Titel wird im Doku­ment selbst nicht dar­ge­stellt. Möchte man ihn irgendwo im Doku­ment ste­hen haben, muss man ihn in den <body> noch ein­mal schrei­ben (am bes­ten als Über­schrift ers­ter Ord­nung, <h1>). ↩

  8. Das Favi­con ist das kleine Sym­bol links neben der Adress­zeile und links neben dem Sei­ten-Titel im Fens­ter- oder Tab-Rah­men (bei den meis­ten Brow­sern). ↩

  9. Das rel-Attri­but steht übri­gens für die Art des Ver­wei­ses (engl. rela­tion Bezie­hung, Ver­hält­nis), da z.B. ein Ver­weis auf ein Icon etwas ande­res ist als der auf ein Sty­le­s­heet. rel gibt es auch für "nor­male" Text-Links mit a mit ver­schie­de­nen aner­kann­ten Wer­ten, z.B. "foot­note" (Link zu einer Fuß­note), "alter­nate" (Alter­na­tive Ver­sion des sel­ben Inhal­tes) oder "book­mark" (Link mit sta­ti­scher Adresse des Inhal­tes). ↩

  10. In HTML5 benutzt man eigent­lich statt den hier ver­wen­de­ten <div>s für den Arti­kel-Inhalt und die Side­bar die spe­zi­el­len (neuen) Ele­mente <article> und <aside>. Ich ver­suchte zwar bis­her immer HTML5 zu ver­mit­teln, aber zur Zeit ist das "alte" <div> mei­nes Erach­tens nach noch die siche­rere Lösung, da nicht alle Brow­ser die neuen Ele­mente ken­nen. ↩

  11. Es ist noch um eini­ges schö­ner, sich den Quell­text "inter­ak­tiv" anzu­se­hen, d.h. farb­lich hevor­ge­ho­ben und schön geschach­telt. Dafür gibt es in den meis­ten Brow­ser Ent­wick­ler­kon­so­len, z.B. dem Webin­spec­tor in Safari und Chrome (auf der Seite rechts kli­cken und "Ele­ment über­prü­fen" anwäh­len, ggf. in den Ein­stel­lun­gen akti­vie­ren) oder Fire­bug für Fire­fox. ↩

  12. Noch ein­mal der Hin­weis: Inhalt und Aus­se­hen wer­den getrennt. Das mögen andere nicht so wich­tig neh­men (frü­her: zwei­spal­tige Lay­outs ein­fach als Tabelle mit zwei Spal­ten anle­gen), aber mir per­sön­lich ist die­ser Aspekt sehr wich­tig, denn für mich ist die­ser Aspekt der Grund­stein für die Ord­nung/​Logik von HTML und die Rela­tion Inhalt und Aus­se­hen (und noch unauf­dring­li­chen Effek­ten). ↩

  13. div#sidebar ist das <div>-Ele­ment mit der ID sidebar, p.article-meta ist das <p>-Ele­ment mit der Klasse article-meta. ↩

  14. CSS muss nicht mehr­zei­lig geschrie­ben wer­den, son­dern kann auch stark ver­kürzt geschrie­ben sein (es muss nur bei Ver­schach­te­lun­gen bei zwi­schen jeder Ebene ein Leer­zei­chen sein!). Außer­dem: Über­schnei­den sich meh­rere Anwei­sun­gen, zählt der, mit der genaue­ren Ein­schrän­kung auf das Ele­ment (meis­tens) mehr; sind beide gleich genau, zählt der untere. ↩

  15. Die meis­ten Eige­schaf­ten sind selbst­er­klä­rend. Wirk­lich. Ein Start: Text­farbe color, Hin­ter­grund­farbe background-color, Rah­men border (mit 3 Wer­ten: Dicke, Art, Farbe. Z.B.: 1px solid #ccc), Innen­ab­stand padding, Außen­ab­stand margin (border, padding und margin auch mit -top/-right/-bottom/-left Suf­fix), Höhe height, Breite width (tat­säch­li­che Höhe/​Breite: Höhe/​Breite + Abstände – vgl. "Box­mo­dell"), Schrift­art font-family (vgl. "Web­s­chrif­ten", "@font-face"), usw. ↩

  16. Wobei vor allem im Bezug auf das noch nicht ein­mal fer­tig gestellte HTML5 viele Bücher bald ver­al­tet sein könn­ten! Ok, das Basis-Wis­sen bleibt sicher größ­ten­teils aktu­ell, aber die Details ändern sich lau­fend. ↩