Tipps und Tricks
rund um Hard- und Software

 

Mein kleines Tutorial wendet sich hauptsächlich an Anfänger, die entweder in einem Schnelldurchgang die Grundlagen von HTML und CSS lernen, oder zumindest verstehen wollen.

Es gibt eine Reihe sehr guter Tutorials, die in die Tiefe gehen und das Wissen für ein komplettes Projekt vermitteln.

Was ist eigentlich HTML?

Es handelt sich hierbei um eine Klarschrift- , Auszeichnungs- und Strukturierungsprache. Am Anfang von HTML war es auch für das Design zuständig. Dies hat sich jedoch durch die Einführung von CSS (Cascading Style Sheet) geändert. Alle Designs machen wir nur noch mit CSS.

Zuerst nehmen wir uns das Grundgerüst einer HTML-Datei vor. Bevor wir jedoch mit dem Aufbau beginnen, möchte ich noch kurz erklären, was ein TAG ist. Es kommt aus dem Englischen und bedeutet für uns „Auszeichner“. Die meisten TAGs haben ein Anfangs- und ein End-TAG. Das sind Anweisungen, in denen steht, wie sich das betreffende Objekt zwischen Anfangs- und End-TAG zu verhalten hat. Diese Anweisungen stehen in spitzen Klammern.

Das komplette Gerüst einer HTML-Seite wird durch solche TAGS gebildet. Dabei besteht das Zwiebelprinzip. Hier das Beispiel des Grundgerüstes:

Was ihr dort seht, ist bereits eine komplette HTML-Seite. Ist zwar nicht viel drauf, aber ihr seht hier schon mal die wichtigsten Elemente.

Sicher werdet ihr nun wissen wollen, mit welchem Programm wir so eine Seite schreiben. Es gibt eine Unmenge von so genannten WYSIWYG-Programmen. Da müsst ihr HTML nicht verstehen. Ihr schreibt, macht Überschriften und fügt Bilder ein, als würdet ihr in einer normalen Textverarbeitung unterwegs sein. Jedoch ist das nicht der Sinn dieses Tutorials, weil ihr dabei nämlich nichts lernt.

Alle Windows-Programme haben einen Texteditor – das Notepad – an Bord. Ihr könnt mit dem schreiben, oder euch ein besseres Notepad, welches zudem auch noch portabel ist, auf einen USB-Stick laden. Ich spreche hier vom Notepad++ Version 6.6.1 Portable. Dieser Editor hat gegenüber dem einfachen Notepad eine ganze Menge Vorteile, aber davon später.

Als ich anfangs vom Zwiebelprinzip schrieb, da dachtet ihr wahrscheinlich, was soll das denn. Schaut euch den Code genau an. Die Seite ist wie eine Zwiebel aufgebaut. Zuerst kommt die HTML-Schale. Dann folgen weiter Schalen, bis wir auf die eigentlichen Kerne, die sich im inneren Gehäuse befinden. Wir sehen hier also sehr schön, wie Anfangs- und End-TAG (unsere Schale) gesetzt werden.

Am besten, ihr probiert das gleich einmal selbst aus. Der HTML-Code lässt sich kopieren und in einen Editor einfügen. Ich gehe davon aus, dass ihr das zuerst einmal mit dem windowseigenen Notepad machen werdet.

Diese Datei sollte nun noch einen Namen bekommen, unter dem sie gespeichert werden kann. Vielleicht solltet ihr sie beispiel-1 nennen. Aber aufgepasst! Ihr könnt sie nicht einfach wie eine normale Textdatei speichern, sondern müsst eine kleine Einstellung vornehmen. Wenn ihr auf „Speichern unter“ klickt, öffnet sich ein Fenster, in dem ihr zuerst einmal festlegt, wohin die Datei gespeichert werden soll. Bei „Dateityp“ stellt ihr „Alle Dateien“ ein, weil Notepad sonst eure Datei als reine Textdatei speichert. Nun schreiben wir in die Zeile „beispiel-1.htm“. Das „htm“ ist wichtig, weil sonst auch nur wieder eine Textdatei gespeichert wird - „beispiel-1.txt“.

Ihr habt nun also die Datei gespeichert. Wenn ihr nun in das Verzeichnis geht, in dem sich die Datei befindet, dann seht ihr neben der Datei euer Browsersymbol. Ist dies zu sehen, dann habt ihr bis hierher alles richtig gemacht. Nun noch ein Doppelklick mit der Maus auf das Symbol und euer Browser öffnet sich und zeigt euch eure Datei. Hier ist natürlich noch nicht sehr viel zu sehen, aber das ist auch richtig so. Es geht hier darum, dass ihr das Prinzip versteht. Jede HTML-Seite im Internet besitzt dieses Grundgerüst. Auf diesem Grundgerüst aufbauend, könnt ihr nun Texte einfügen, Bilder, Hintergrundfarben oder Bilder und natürlich auch Audio- und Video-Dateien einfügen, denen wir einen kleinen Player zukommen lassen, damit der Betrachter die Möglichkeit hat, das Ganze an- oder auszuschalten.

Ihr könnt das Ganze anschliessend designen. Dazu nehmen wir CSS. Doch vorher möchte ich euch die TAGs, die wir bisher verwendet haben, etwas näher erläutern:

„Doctype HTML“ signalisiert dem Browser, dass es sich um eine HTML5-Datei handelt. „html -/html“ ist der Container, in dem sich weitere Container verbergen. „head“ = Kopf stellt wichtige Informationen für den Browser zur Verfügung. Dadurch ist dieser in der Lage, die Datei nicht nur schneller zu laden, sondern auch im richtigen Format. Das „title“-TAG sagt dem Browser, um was es bei der Datei geht. Nun kommt der „body“-Container an die Reihe. Hier ist alles enthalten, was wir gern der Welt zeigen wollen an Texten und Bildern, an Audios und Videos.

Das „h1“-TAG definiert Überschriften. Es gibt insgesamt sechs verschiedene Überschriften und zwar von h1 als grösste Überschrift bis h6 als kleinste Überschrift. Wenn wir in einer normalen Textverarbeitung einen längeren Text schreiben, dann unterteilen wir den Text in Absätze. Damit wird der Text lesbarer. Dafür benutzen wir das „p“-TAG. Es steht für Paragraph und bedeutet Absatz.

Diese wenigen TAGs sind zuerst einmal am Wichtigsten für euch. Lernt sie auswendig. Alle anderen TAGS, die später dazu kommen, die lernt ihr Step by Step.

Nun wollen wir aber unserem Browser mehr Informationen zur Verfügung stellen. Das machen wir im Head-Bereich.

Wir erstellen Meta-TAGs:

Die meisten Meta-TAGs sind selbsterklärend. Fangen wir von unten an; mit „generator“ ist das Programm gemeint, mit dem wir die Datei geschrieben haben. Das TAG “author“ nennt den Namen des Programmierers. Im Meta-TAG “description“ können wir etwas zur Seite und seinem Inhalt schreiben. Das TAG “keywords“ gibt uns die Möglichkeit, Schlüsselwörter einzugeben.

Wenn Menschen im Internet nun ganz bestimmte Suchbegriffe eingeben und unsere Schlüsselwörter sind dabei, ist die Chance sehr gross, dass man damit unsere Homepage findet. Das Meta-TAG encoding=“UTF-8“ sagt dem Browser, dass Unicode verwendet wird. Damit entfällt zum Beispiel das lästige Maskieren von Umlauten.

Kommen wir nun zum Design

Wollen wir lediglich für eine einzige Seite bestimmte CSS-Formate anwenden, dann reicht es, wenn wir im Head-Bereich die Definitionen unterbringen. Das sieht dann folgendermassen aus:

Ist das Design vielfältiger und komplexer und soll es auf alle Seiten des Projektes angewendet werden, dann empfiehlt es sich, diese Daten in einer externen Datei auszulagern. Wir können die Datei beispielsweise „design.css“ nennen. Dafür müssen wir allerdings dem Browser im Head-Bereich eine Mitteilung machen, dass sich das Design der jeweiligen Seite in einer externen CSS-Datei befindet, die der Browser an der Endung „.css“ dann erkennt. Die entsprechende Referenzierung lautet dabei:

Die CSS-Datei ist im Prinzip nichts weiter, als eine Textdatei mit der Endung CSS, in die wir unsere Anweisungen schreiben. Wir kopieren einfach das komplette Style-TAG, fügen es in eine Textdatei ein und löschen dann das Anfangs- und End-TAG.

Damit sieht unser „head“ nun so aus:

Manchmal möchte man einer einzelnen Seite einen anderen Hintergrund für den „Body-Bereich“ geben. Dafür lohnt es sich in der Regel nicht, eine extra CSS-Datei anzufertigen. Das erledigen wir einfach in unserer externen Datei, indem wir eine Klasse generieren.

So sieht bisher unsere externe Datei aus:

Zu dieser Datei kommt nun noch eine neue Zeile hinzu:

In unserem „Bodybereich“ sieht es dann folgendermassen aus:

Damit haben wir statt der stahlblauen Hintergrundfarbe ein beliebiges Hintergrundbild.

Anker – Hyperreference – Links

Wir haben unser Template genommen, das ist das, was im Officeprogramm eine Vorlage ist. Wir müssen also nicht jedes Mal das Rad neu erfinden, sondern haben ein einheitliches Bild für alle unsere Seiten. Da die aber lose in einem oder mehreren verschiedenen Ordnern liegen, müssen wir sie irgendwie zusammen führen. Dies tun wir mit Links. Das entsprechende TAG dazu referenziert auch gleich die entsprechende URL. Dabei steht „a“ für „anchor“ (Anker) und „href“ für Hyper-Reference. In unserem Beispiel gibt es einen Ordner „referenz“, in dem sich die Datei „tuto.htm“ befindet. Dabei ist das Wort „Referenz“ zwischen den „a-TAGs“ ein anklickbarer Link, daran erkenntlich, dass er unterstrichen und andersfarbig ist.

Natürlich wollen wir auf unserer Seite auch Bilder und Grafiken zeigen. Das machen wir, indem wir ein „image-TAG“ benutzen. Dabei ist die einfachste Form des TAGS:

Es gibt einen Ordner „bild“, in dem sich das Bild „test.jpg“ befindet. Mit „width“ und „height“ kann man zusätzlich die Breite und Höhe des Bildes bestimmen. Die Voreinstellung des Browsers ist „left“. Das Bild erscheint am linken Rand. Das können wir durch verschiedene Einstellungen ändern. Angenommen, das Bild soll 250 Pixel hoch und 200 Pixel breit sein und zentriert, dann siegt das folgendermassen aus:

Wir können natürlich auch in unserer externen CSS-Datei verschiedene Imageformate definieren. Manchmal ist es sogar besser, dass Image nicht allein auf der Seite stehen zu lassen, sondern es in einen „DIV-Container“ zu tun. Auch hier können wir wieder in der CSS-Datei entsprechende Formate definieren, die später zum Beispiel mit „class=“ abgerufen werden. Dabei ist es auch möglich, dem „DIV-Container“ eine bestimmte Hintergrundfarbe oder ein Hintergrundbild zuzuweisen.

Es gibt im Internet tausende von Backgroung-Bildern, die frei verfügbar sind und keiner Lizenz unterliegen. Wir tun gut daran, uns einen tüchtigen Vorrat von diesen Bildern aus dem Internet zu holen und sie in einem neuen Ordner mit dem Namen „background“ zu parken.

Wenn wir schon so weit sind, sollten wir uns überlegen, ob wir nicht tatsächlich ein Homepage-Projekt realisieren wollen. Wenn ja, setzen wir uns an unseren Schreibtisch, nehmen ein Blatt Papier und einen Schreibstift zur Hand und überlegen uns, wie die Hierarchie aufgebaut werden sollte. Für jedes Thema, welches wir veröffentlichen wollen, nehmen wir einen eigenen Ordner. In diesen Ordner kommt – den Themen entsprechend – ein Ordner „bild“, „background“, „button“, „banner“, „seiten“. Wir gewöhnen uns daran, alles klein zu schreiben – also alle Dateien samt Endungen und auch die Ordner. Dies bewahrt uns davor, dass wir zwar einen richtigen Link zu einer bestimmten Datei setzen, aber den Ordner beispielsweise gross und die Dateiendung der im Ordner befindlichen Datei ebenfalls gross geschrieben haben. Das Endergebnis sieht für uns doof aus, weil wir nichts sehen. Also – alle TAGs, Dateien und Ordner werden klein geschrieben.

So könnte zum Beispiel unsere Hierarchie aussehen:

Wollen wir unsere Webseite modular aufbauen, dann kommen in jeden Themenordner die obersten vier Ordner zusätzlich mit hinein. Das hat den Vorteil, dass wir jedes Modul entfernen und an andere Stelle einbauen können, ohne dort viele Links zu ändern. Dabei müssten wir nicht einmal den Link, der uns auf die Indexdatei zurück bringt, ändern. Wir arbeiten nämlich mit relativen Pfadangaben, was enorme Vorteile mit sich bringt.

„Home“ ist immer die Hauptseite unserer Webpräsenz und heisst deshalb auch „index.htm“. Wollen wir aus dem Ordner „Thema 1“ zurück zu unserer Hauptseite, dann heisst der Link:

Dabei bedeuten die beiden Punkte vor dem Slash einen Ausstieg aus dem Ordner. Jetzt befinden wir uns auf der Hauptebene und hier befindet sich auch die Datei „index.htm“.

Es sollte eigentlich nur ein ganz kleines Tutorial werden. Eines, welches lediglich kurz CSS und HTML5 erläutert. Zwischenzeitlich habe ich aber noch eine komplette Homepage, zum Anschauen und verstehen, geschrieben. Es ging dabei nicht um Schönheit – die Page soll nur aufzeigen, was alles möglich ist. Die jeweiligen Seiten versteht man etwas besser, wenn man mit der rechten Maustaste in die Seite klickt und sich dann den Code mit „Seitenquelltext anzeigen“ ansieht.

Um die Seite zu sehen und zu testen, könnt ihr HIER klicken.

 

cornelia warnke 25.05.2014

Zum Inhaltsverzeichnis

nach oben

Zur Startseite