CSS, HTML & Javascript mit {stil}

HTML Grundlagen – Einführung ins Webdesign

Wer als Einsteiger Webseiten erstellen will, findet viele gute Templates (Vorlagen), die HTML, CSS und Javascript für eine Webseite schon mitbringen. Mit eigenen Vorstellungen muss man sich trotzdem mit den Werkzeugen beschäftigen.

Einstieg HTML und CSS

HTML, CSS und Javascript – ein breites Feld

Beim Einstieg in HTML, CSS und Javascript gibt es viel zu lernen – und all das geht nicht einfach mit einem Rundschlag in den Kopf. Auf jeden Fall steht HTML als Markup-Sprache des Internets an erster Stelle für den Einstieg. Webdesign und Programmierung sind ein Handwerk, das man sich erarbeiten muss. Zum HTML der frühen Tage des Webs gesellen sich heute

Vorlage – Template – für eine einfache HTML-Seite

Diese Zeilen sind das Template für eine minimale HTML-Seite:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML lernen</title>
    <style></style>
</head>
<body>
  Lorem ipsum
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.
  Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.
</body>
</html>

Die Zeilen in einen Programmeditor (z.B. Notepad auf dem PC, Textwrangler für den Mac) kopieren, speichern (mit der Dateiendung .htm oder .html) und mit einem Browser (Menü Datei ▶ Datei öffnen) öffnen.

Als erstes stellen wir fest, dass der Browser die Zeilenumbrüche ignoriert und aufeinander folgende Leerzeichen verschluckt.

Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.



Dateinamen für HTML-Seiten

Ein Wort zum Dateinamen von HTML-Seiten: Sie sollten keine Umlaute, keine Sonderzeichen außer Bindestrich, und keine Leerzeichen enthalten. Außerdem haben schwedische, englische und italienische Tastaturen keine deutschen Umlaute – falls ein Besucher aus Schweden die Seite direkt ansteuern sollte?

Wenn man die HTML-Seite auf dem eigenen Rechner anlegt und testet, sieht alls gut aus, aber die meisten Webserver laufen mit einem Unix-Betriebssystem, das Umlaute im Dateinamen nicht nicht wie geplant übernimmt, sondern Sonderzeichen kodiert, z.B. Leerzeichen mit %20.

südliche%20länder.html

Dem Wiedererkennungswert zuliebe trennt man einzelne Begriffe am besten durch Bindestriche oder Unterstriche.

suedliche-laender.html
javascript-einfuehrung.html

Das gilt nicht nur für die Dateinamen von HTML-Seiten, sondern auch für Bilder, PDF-Dokumente, CSS- und Javascript-Dateien.

HTML-Elemente

Erst HTML-Elemente wie <p>, <h1>, <div> und <ul> bringen Struktur in den Text.

  • Was zwischen <h1> und </h1> gesetzt wird, erzeugt einen Zeilenumbruch und wird zu einer großen fetten Überschrift (Header),
  • was zwischen <p> und </p> steht, wird zum Textabsatz (Paragraph) mit Zeilenumbruch,
  • <strong>fett</strong> erzeugt fett gesetzten Text ohne Zeilenumbruch,
  • <em>kursiv</em> erzeugt kursiv gestellten Text ohne Zeilenumbruch.
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Mauris ante neque, vehicula quis, convallis sit amet, vestibulum
   ornare, arcu. </p>
<p>Donec at lorem et elit congue <strong>dictum</strong>. Cras sapien ligula, rutrum 
   quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu 
   adipiscing tempus. Sed dictum mauris euismod mauris.</p>

Hervorhebungen durch strong und em wirken sich nicht nur auf die Darstellung aus, sondern betonen kurze Passagen in der Sprachausgabe.

Formatierung durch HTML-Elemente

So sorgen wir dafür, dass Suchmaschinen nicht nur einen Textbrei vorfinden, sondern den Begriffen in der Überschrift eine höhere Relevanz zumessen können: Wir gehen davon aus, dass die Überschrift etwas über den Inhalt der Seite aussagt als ein Textabsatz.

Links werden in <a>-Tags gesetzt. Für die Farbe, die Unterstreichung und den geänderten Mauszeiger sorgen die Browser automatisch. Aber ein <a>-Tag braucht eine Sprungadresse:

<a href="/">CSS und HTML</a>
Browser-Tabs und -Adressleite
Die Adressleiste des Browsers zeigt das title-Element und die URL der Seite

Die Sprungadresse / kann direkt aus der Adresszeile des Browsers in die Hochkommas kopiert werden.

HTML-Attribute | href ist ein »HTML-Attribut«. Attribute erweitern die Funktion von HTML-Elementen – z.B. wie hier um eine Adresse oder um Regeln für die Formatierung. Die Hochkommas sind wichtig: HTML-Attribute stehen immer in Hochkommas. Ob einfache oder doppelte Hochkommas ist allerdings nicht wichtig, Hauptsache öffnendes und schließendes Hochkomma sind vom gleichen Typ.

Seitentitel für die Browserleiste | Der Titel der Seite innerhalb des öffnenden und schließenden title-Tags taucht oben in der Browserleiste auf und stellt die Ober-Überschrift dar. Den Seitennamen oder das Motto des Internetauftritts setzen wir voran, denn die Bookmarks des Besuchers speichern den Seitentitel.

Webdesign und CSS

Ohne CSS ist eine Seite zwar lesbar, aber der Inhalt unterliegt dem spartanischen Layout, das die Browser mitbringen. Die Lücke zwischen <style> und </style> im Template oben füllen wir mit CSS:

body { 
    margin-right: 10%; 
    margin-left: 10%; 
    font-family: "Lucida Grande", Arial, sans-serif; 
    font-size: 110%; 
}

und schon haben wir dem Dokument einen Hauch von individuellem Layout aufgedrückt:

  • Wir haben rechts und links einen Abstand (margin) zum Browserfenster, damit Text nicht mehr über die volle Breite des Browserfensters läuft,
  • eine Schrift unserer Wahl (font-family), um die Schriftgröße aller Texte zu vergrößern. Diese Eigenschaften gelten für alles, was wir im Folgenden auf die Seite setzen, denn wir haben CSS-Eigenschaften für das body-Element der Seite deklariert. CSS vererbt Eigenschaften wie font-family für die Schriftfamilie und font-size in h1-, h2- und p-Elementen (CSS Vererbung).
Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.

Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

Wofür braucht die Webseite Javascript?

Für jeden Text, jede Überschrift und jedes Bild braucht der Browser eine Anweisung, wie er die Elemente anzuordnen und darzustellen hat. Sobald der Browser alle HTML-Anweisungen abgearbeitet hat, »steht« die Webseite im wahrsten Sinne des Wortes.

Javascript ist die traditionelle Programmiersprache, die eine Seite ändert, wenn sie schon im Browser des Besuchers geladen ist. Meist setzen wir Javascript ein, um auf Aktionen des Benutzers zu reagieren.Das Blättern durch eine Slideshow ist ein Beispiel für den Einsatz von Javascript: Ohne Javascript müsste die komplette Webseite für das nächste Bild neu geladen werden.

Beipiel Slideshow in HTML einbinden
Donut
Slideshow mit Javascript in Webseite einbinden
SandwichBayerische Creme
Erst Schritte HTML und CSS: Javascript für Slideshow
Sandwich

Quelle der Slideshow: leemark/better-simple-slideshow

Heute gibt es kaum noch eine Webseite, die ohne Javascript auskommt – wer Javascript in seinem Browser deaktiviert, erlebt den absolute Stillstand: Amazon, Facebook, Twitter, selbst einfache Webseiten bleiben stehen oder ganze Teile erscheinen gar nicht erst.

Webseiten mit PHP

Wer über Webspace mit PHP verfügt, kann noch einen Schritt weitergehen und die Datei mit der Endung .php speichern, um sie auf seine Webseite zu übertragen. Während wir die HTML-Seite mit dem Befehl »Datei öffnen« aus der Browserleiste betrachten konnten, müssen wir zu einer PHP-Seite »navigieren«, also die Adresse in der Adressleiste des Browsers eingeben.

Eine HTML-Seite mit der Endung .html oder .htm funktioniert überall – auch auf dem eigenen Computer. Eine PHP-Datei hingegen muss auf einem Webserver liegen und braucht einen PHP-Interpreter, damit der Browser sie anzeigt. Wenn dieses Szenario stimmt, wird die Seite genauso aussehen wie die HTML-Seite.

<?php echo '
<!DOCTYPE html>
<html lang="de">
… 
</body>
</html>';
?>

Wenn eine HTML-Seite die Endung .php aufweist, wird sie genauso angezeigt wie eine HTML-Seite. PHP-Programme sind in <?php und ?> eingeklammert. Der PHP-Befehl "echo" gibt alles, was in Hochkommas steht, im Browserfenster aus. Weil HTML selbst auch Hochkommas benutzt, habe ich doppelte Hochkommas für HTML und einfache Hochkommas für die echo-Anweisung benutzt.

Und selbst das funktioniert auf einem Internet-Auftritt, wenn PHP im Webspace enthalten ist: Eine normale HTML-Seite, die mit der Endung .php gespeichert wurde, wird als normale HTML-Seite angezeigt.

<!DOCTYPE html>
<html lang="de">
… 
</body>
</html>';

Jetzt haben wir die ersten Lektionen kurz und schmerzlos bewältigt und

  • können ein HTML-Dokument mit Texten und Überschriften anlegen,
  • haben einen ersten Eindruck vom Vorgehen der Suchmaschinen gewonnen,
  • die Seite mit CSS gestaltet
  • und das erste PHP-Programm geschrieben.

HTML kurze Tipps

p-Elemente anstelle von br

Auch wenn die Absätze zwischen aufeinander folgenden p-Elemente nicht ins Auge springen: Für Benutzer mit Sprachausgabe wird der Text besser gegliedert. Der Webdesigner kann den Text in HTML p-Elementen besser mit CSS-Eigenschaften versorgen (z.B. einen kleinen Abstand zwischen p-Elemente setzen, der den Text besser gliedert).

Das placeholder-Attribut ist kein Ersatz für das label-Element

label-Elemente können den Raum eines Eingabefeldes durch padding vergrößern. Das verbessert den Zugriff mit dem Finger auf Touch-Devices und verbessert auch die Trefferrate mit der Maus auf großen Monitoren.

Kein target-Attribut für externe Links

target="_blank" öffnet einen Links in einem neuen Tab oder Fenster und erfreut sich immer noch großer Beliebtheit. Eine Seite, die auf diese Weise gelinkt wird, hat via Javascript Zugriff auf die öffnende Seite und kann per Javascript Malware einfügen.

Jetzt sag nicht, du linkst nur solide seriöse Seiten. Wer weiß, wer die URL in zwei oder fünf Jahren hat, während dein Beitrag mit dem Link seit Jahren weit hinten schmorrt.

Schütze Screen-Reader vor SVG

aria-hidden="true" schützt Screen-Reader vor SVG. Das jetzt aber ja nicht für jede SVG-Grafik einsetzen. Gerade wenn die Grafik Text enthält, gibt sie dem Besucher mit Screen-Readern mehr Informationen als ein JPEG oder PNG.

Editoren für HTML und PHP

ATOM
Open Source-Editor für alle Plattformen: Mac OS, Unix und Windows. Mit ausholender Dokumentation, erweiterbar – z.B. mit Teletype für die Zusammenarbeit mit mehreren Entwicklern.
Brackets – ein Code-Editor-Projekt von Adobe für Mac und PC – jetzt von Github laden
Syntax-Highlighting, Split-Window, Code-Fold (Zusammenklappen von HTML-Elementen, Javascript- / PHP-Blöcken), Live-Vorschau und viele Plugins zur Erweiterung.
Sublime Text
Programm-Editor für Mac und PC und Linus. ~70$ – ist jeden Cent wert. Split-Window
BBEdit oder TextWrangler von Bare Bones (Mac)
Der Editor für den Mac ist BBEdit (~50$). Neben farbiger Syntax (Syntax-Highlighting) für HTML, CSS, PHP und weiteren Markup- und Programmiersprachen zeigt BBEdit das Dokument ohne Verzögerung so an, wie es in Safari angezeigt wird (Live-Vorschau) und bietet einen Syntaxcheck.
Textwrangler ist die einfachere und kostenfreie Version von BBEdit.
Eclipse Entwicklungsumgebung
Eclipse ist eine ausgewachsene Entwicklungsumgebung
Komodo
Entwicklungsumgebung für PHP, Perl, Ruby, Python, Tcl
Suchen auf mediaevent.de