CSS, HTML und Javascript mit {stil}

HTML Grundlagen – Einführung in Webdesign

HTML Grundlagen für Einsteiger

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

Beim Einstieg in HTML, CSS und Javascript gibt es viel zu lernen – und all das kann man einfach nicht mit einem Rundschlag lernen. Auf jeden Fall steht HTML als »Markup-Sprache« des Internets an erster Stelle für den Einstieg.

Webdesign und -programmierung sind Handwerk. Zum HTML der frühen Tage des Webs gesellen sich

Einfaches HTML-Template

Diese Zeilen sind das Template – die Vorlage – für eine HTML-Seite:

Einfaches HTML-Template
<!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 und mit einem Browser öffnen.

Wird die Webseite gespeichert (mit der Dateiendung .htm oder .html), stellen wir fest, dass der Browser die Zeilenumbrüche ignoriert und aufeinander folgenden 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.

Ein Wort zum Dateinamen für Webseiten: Sie sollten keine Umlaute, keine Sonderzeichen außer Bindestrichen und keine Leerzeichen enthalten, denn die meisten Unix-Systeme verkraften Umlaute im Dateinamen nicht. Außerdem haben schwedische, englische und italienische Tastaturen keine deutschen Umlaute …

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

html-grundlagen.html
javascript-einfuehrung.html

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

HTML-Tags

Erst HTML-Tags 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 dictum. Cras sapien ligula, rutrum 
   quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu 
   adipiscing tempus. Sed dictum mauris euismod mauris.</p> 

Formatierung durch HTML-Tags | 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>-Tages 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="//www.mediaevent.de/tutorial/">CSS und HTML</a>
//www.mediaevent.de/tutorial/m mCSS und HTML • Einstieg

Die Sprungadresse https://www.mediaevent.de/tutorial/ kann direkt aus der Adresszeile des Browsers in die Hochkommas kopiert werden.

HTML-Attribute | href ist ein »HTML-Attribut«. Attribute erweitern die Funktion eines HTML-Tags – 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-Tags.
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 eine eher 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.

melissa3
melissa2
melissa1

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 wird nicht anders 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.

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-Tags anstelle von br-Tags

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

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 links nur solide seriöse Seite. 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

Brackets – ein Code-Editor-Projekt von Adobe für Mac und PC
Syntax-Highlighting, Split-Window, Code-Fold (Zusammenklappen von HTML-Tags, 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
PHP Designer 8 (Windows)
Ein Editor für PHP, HTML(5), XML, CSS, JavaScript, Java, Perl, JavaScript, VB, C#, Java & SQL mit Localhost-Preview für PHP. Syntax-Hightlighting, klar, und PHP-Manual on bord(!).