<>Mini HTML-Kurs<> <!- - Das ist ein Kommentar- ->

Transkript

1 <>Mini HTML-Kurs<> Dieser Mini HTML-Kurs soll Ihnen genau soviel HTML-Wissen vermitteln, wie Sie brauchen, um meine Homepage-Vorlagen nach Ihren Wünschen anpassen zu können. Ich werde Ihnen also genau das erklären, was Sie auch wirklich benötigen. Des weiteren gehe ich davon aus, dass Sie ein totaler Anfänger sind. Ich werde also alles von Grund auf erklären. Öffnen der HTML-Datei Wenn Sie eine Homepage-Vorlage heruntergeladen haben, sehen Sie einen Ordner, in dem sich zwei oder drei HTML-Dateien befinden. Diese bilden, zusammen mit dem Ordner images (dort sind die Grafiken gespeichert) und der außerdem enthaltenen index.css Datei, Ihre Webseite. Auf die CSS-Datei komme ich später noch zu sprechen. Sie haben also nun die HTML-Dateien vor sich liegen, und wenn Sie diese mit Ihrem Browser öffnen, sehen Sie Ihre Webseite, wie ich sie vorgefertigt habe. Nun wollen Sie die Datei jedoch verändern. Dafür könnten Sie die HTML-Datei theoretisch mit Ihrem ganz normalen Texteditor öffnen. Es empfiehlt sich jedoch unbedingt, einen kostenlosen HTML-Editor zu downloaden. Geeignet wäre dieser: Wenn Sie Ihre HTML-Datei nun mit dem HTML-Editor öffnen (Rechtsklick auf Datei Öffnen mit Ihr-HTML-Editor ), erscheint für den Neuling ein wildes Durcheinander von Zeichen, Codes, Zahlen und Texten. Verwirrung pur. Um sich zurecht zu finden, müssen Sie ein paar HTML-Elemente und Strukturen kennenlernen. Kommentare Was Ihnen schnell auffallen wird, sind die im HTML-Editor grün unterlegten Sätze. Das sind Kommentare, also Tipps, die ich für Sie eingefügt habe. Ein Kommentar sieht im HTML-Quelltext so aus: <!- - Das ist ein Kommentar- -> Die Kommentare haben keine Auswirkungen auf das Aussehen einer Webseite, sie dienen ausschließlich dazu, den Quelltext übersichtlich zu halten. Wenn Sie die Kommentare aufmerksam lesen, erkennen Sie schon eine grobe Struktur des Quelltextes. Ich habe ihn nämlich in verschiedene Bereiche unterteilt, die ich mit Kommentaren getrennt habe. <!- - Anfang des Kopfes - -> Inhalt des Kopfes... 1

2 <!- - Ende des Kopfes - -> <!- - Anfang der Navigation- -> Inhalt der Navigation... <!- - Ende der Navigation - -> Als nächstes sollten Sie die Grundstruktur eines HTML-Befehls kennen lernen. Grundstruktur eines HTML-Befehls Der Computer kennt nur bestimmte Befehle, die er auslesen und interpretieren kann. Das ist vergleichbar mit einer CD, wobei der Computer der CD-Player ist, der die Informationen auf der CD (die der Quelltext ist) ausließt und als Musik wiedergibt. Betrachten Sie den Quelltext genau, dann bemerken Sie, dass jeder Befehl eine exakte Struktur hat. Diese Struktur sieht folgendermaßen aus: <Anfang-des-Befehls> Inhalt des Befehls </Ende-des-Befehls> Ein Befehl (also das, was in den spitzen Klammern steht) hat einen Anfang und ein Ende. Das Ende ist durch einen Querstrich vor dem Befehl gekennzeichnet. Solch einen Befehl nennt man Tag. Oft stehen hinter dem Tag Attribute, die den Tag näher beschreiben. Das hat folgendes Schema: <tag attribut= wert attribut= wert > Inhalt </tag> Attribute bestimmen zum Beispiel Größe, Farbe und Art von Elementen. Ein Beispiel: <h1 align= center > HELLO WORLD </h1> In diesem Beispiel verwende ich den Tag (Befehl) h1. Das ist eine Überschrift, die von dem Attribut näher bestimmt wird: align= center bedeutet, dass die Ausrichtung der Überschrift zentriert wird. Das sieht so aus: HELLO WORLD Nach dieser Struktur ist der komplette HTML-Quelltext aufgebaut. Wenn Sie das verstanden haben, ist schon die Hälfte geschafft. CSS (Cascading Stylesheets) Nun will ich Ihnen eine kleine Einführung in CSS geben. 2

3 Da in HTML die Gestaltungsmöglichkeiten sehr beschränkt sind, hat man CSS erfunden. CSS ist sozusagen ein Zusatzmodul von HTML, um die Möglichkeiten der Gestaltung zu erweitern. CSS wird in HTML direkt eingebunden und hat folgende Struktur: befehl:wert; befehl:wert; befehl:wert; Wenn man CSS in den Quelltext direkt einbinden will, macht man das mit dem HTML-Attribut style. Dazu wieder ein Beispiel: <h1 style= text-align:center; color:red; text-decoration:underline; > HELLO WORLD </h1> Die Überschrift wie im vorherigen Beispiel zentriert. Jetzt jedoch mit der CSS-Angabe text-align:center;. Außerdem wird mit color:red; die Farbe noch auf rot gesetzt und mit text-decoration:underline; wird die Überschrift unterstrichen. Das sieht so aus: HELLO WORLD Anmerkung: Allgemein werden Farben in HTML im Hexadezimalcode mit einem # davor angegeben. Zum Beispiel color:#ffffff für Weiß. Für die Grundfarben kann stattdessen aber auch einfach der (englische!) Name geschrieben werden (blue, green, red usw.). Den Hexadezimalcode Ihrer Wunschfarbe können Sie in jedem Grafikprogramm oder im Internet ermitteln. Noch ein weiteres Beispiel zu CSS: <div style= width:200px; height:100px; background-color:yellow; > Ein gelber Kasten mit den Maßen 200 x 100 Pixel </div> Diesmal habe ich den div-tag verwendet. Das ist ein sogenannter div-container, eine Art Kasten oder Container, der Inhalt in sich aufnehmen kann. Dieser div-container wird nun von den CSS-Angaben bestimmt. Mit width und height wird die Breite und Höhe bestimmt. In diesem Beispiel habe ich 200px mal 100px gewählt. Damit der div-container überhaupt erst sichtbar wird, habe ich ihm mit background-color eine gelbe Hintergrundsfarbe verliehen. 3

4 CSS ist über die Jahre hinweg immer wichtiger geworden. Heutzutage ist es schon lange nicht mehr wegzudenken. Man steuert das Aussehen, das Design einer Webseite heutzutage so gut wie nur noch über CSS. Wenn Sie bis hierhin alles gut verstanden haben, können Sie weiterlesen; ansonsten würde ich Ihnen raten, einfach noch einmal von vorne aufmerksam alles durchzulesen. Mir ist es wichtig, dass Sie die Grundstruktur von den Befehlen verstanden haben (Tag/Attribut), den Unterschied von CSS und HTML kennen und wissen, wie CSS in HTML eingebunden wird. Alles kapiert? Dann mal weiter CSS-Angaben in externe Datei auslagern Da bei einer schön gestalteten Webseite die CSS-Angaben oft sehr lang werden können, kann man sie in eine extra Datei auslagern. Das ist eine CSS-Datei, die dann oft alle Angaben zum Aussehen einer Webseite beinhaltet. Die CSS-Datei ist also überaus wichtig. Ich habe bei meinen Vorlagen die ausgelagerte CSS- Datei index.css genannt. Doch wie kann man jetzt die HTML-Datei mit der CSS-Datei verknüpfen? Dafür wurde das Attribut class erfunden. Inhalt des Attributs ist ein frei wählbares Wort. Vorzugsweise ein Wort, das den kompletten Befehl oder einen ganzen Bereich beschreibt. Also class= link, wenn es sich um einen Link handelt, oder class= kopf, wenn es sich um den Kopfbereich handelt. In der CSS-Datei wird des gerade gewählte Wort wieder aufgegriffen und mit einem Punkt am Anfang geschrieben. Dahinter folgen dann in geschweiften Klammern die CSS-Angaben. In der CSS-Datei sieht es also so aus:.link {befehl:wert; befehl:wert; befehl:wert; befehl:wert; befehl:wert;} Anmerkung: Der Übersichtlichkeit halber werden die Befehle untereinander geschrieben. Zur Veranschaulichung verwende ich noch einmal das Beispiel mit dem div-container: Nicht ausgelagert: <div style= width:200px; height:100px; background-color:yellow; > Ein gelber Kasten mit den Maßen 200 x 100 Pixel </div> 4

5 Ausgelagert: In der HTML-Datei: <div class= kasten > Ein gelber Kasten mit den Maßen 200 x 100 Pixel <div> In der CSS-Datei:.kasten {width:200px; height:100px; background-color:yellow;} Wie Sie sehen, ist in der HTML-Datei das style-attribut ganz weggefallen, und stattdessen ist das class-attribut gekommen. Die CSS-Angaben sind in die CSS-Datei gewandert. Das Auslagern von CSS hat noch andere große Vorteile, doch darauf will ich jetzt nicht eingehen. Wichtig ist jedoch, dass Sie das gerade Beschriebene verstanden haben, denn ich habe in meinen Vorlagen fast alle CSS-Angaben in die externe index.css Datei ausgelagert. Diese wird also Ihre erste Anlaufstation sein, wenn Sie Änderungen vornehmen wollen. Um das nun endlich machen zu können, müssen Sie neben dem bisher Gelernten, noch ein paar Begriffe kennenlernen. Wichtige HTML- und CSS-Befehle/Attribute Ich werde nun hier die wichtigsten Befehle, die Sie wissen sollten, mit Erklärung auflisten: HTML: <div></div> Das ist ein div-container. Bei meinen Vorlagen habe ich div-container für das Layout verwendet. Bei div-containern sollten Sie auf die Hierarchie achten. Sie werden oft ineinander verschachtelt. <a></a> Den <a>-tag verwendet man, um auf andere Seiten zu verweißen. Das kann eine URL-Angabe ( oder eine andere HTML-Datei (link.html) sein. Zusammen mit dem href -Attribut bildet der a-tag die Navigation zwischen verschiedenen Seiten. Der Befehl hat folgende Form: <a href= datei.html > Name des Verweises </a> Mehr dazu weiter unten, unter Die Navigation vervollständigen. 5

6 <h1></h1> <h1> ist die größte Überschrift ihrer Ordnung. Es gibt außerdem h2, h3, h4, h5, h6. Je höher die Zahl, desto kleiner die Überschrift. <p></p> <br > <img> Diesen Tag verwendet man für Textabsätze. Das ist ein Zeilenumbruch. Achtung: <br> ist ein Standalone-Tag. Er hat also kein Ende. Ein Standalone-Tag zum Grafiken einbinden. Er hat folgende Form: <img scr= grafik.jpg alt= grafik > CSS width -- bestimmt die Breite eines Elementes height -- bestimmt die Höhe eines Elementes background-color -- bestimmt die Hintergrundfarbe eines Elementes background-image -- bestimmt das Hintergrundbild eines Elementes border -- bestimmt den Rahmen eines Elementes padding -- bestimmt den Innenabstand eines Elementes margin -- bestimmt den Außenabstand eines Elementes text-align -- bestimmt die Ausrichtung von Text font-size -- bestimmt die Schriftgröße color -- bestimmt die Schriftfarbe So, das war erst einmal ganz schön viel trockener Stoff! Doch mit dem nun gelerntem Grundwissen und noch ein bisschen logischem Denken, sollten Sie nun in der Lage sein schon einmal die ersten Veränderungen an Ihrer Webseite vorzunehmen. Öffnen Sie einfach den Quelltext in ihrem HTML-Editor und spielen Sie ein bisschen an den Werten herum (z.b. an der Schriftgröße, Farbe etc.), danach das Speichern (Strg + S) nicht vergessen! Anschließend öffnen Sie Ihre veränderte Datei in Ihrem Browser und schauen sich das Ergebnis an. Sie werden merken, dass das richtig Spaß machen kann, Sie können Ihrer Fantasie freien Lauf lassen und ganz nach Ihrem Geschmack arbeiten. 6

7 Im weiteren Verlauf des Kurses werde ich Ihnen spezielle Hilfestellung bei der Optimierung und Vervollständigung Ihrer Webseite geben. Dazu gehe ich von oben nach unten den Quelltext durch. Die Meta-Tags Bestimmt haben Sie sich schon gefragt, was es mit diesen Meta-Angaben am Anfang jeder HTML-Datei auf sich hat. Zuerst einmal: Die Meta-Tags haben keine Auswirkungen auf das Aussehen einer Webseite. Trotzdem ist es wichtig, dass Sie korrekt angegeben werden. Denn die Meta-Tags enthalten wichtige Informationen über Ihre Webseite. Dieser Informationen bedienen sich zum Beispiel Suchmaschinen, um Ihrer Webseite den richtigen Platz in den Suchergebnissen zu geben. Ich habe die Meta-Tags für Sie schon so weit vorgefertigt, wie ich konnte. Sie müssen nur noch die drei Zeilen bearbeiten, hinter denen ein Kommentar steht: 1.) Titel eingeben: Noch vor den Meta-Tags steht der title-tag. Dort müssen Sie Ihrer Seite erst einmal einen Titel geben. Wie im Kommentar schon steht, wird der Titel unter anderem oben im Browserfenster angezeigt. 2.) Beschreibung eingeben: Beim description Meta-Tag sollten Sie im content-attribut eine kurze und übersichtliche Beschreibung Ihrer Homepage einfügen. Sie sollten sich dabei auf ca. 200 Zeichen beschränken. Ihre Beschreibung erscheint bei den Suchergebnissen der Suchmaschinen. 3.) Schlüsselwörter eingeben: Bei keywords geben Sie im content-attribut ein paar auf Ihre Seite zutreffende Schlüsselwörter ein. Doch Achtung: Hier gilt Klasse statt Masse! Geben Sie wenige, dafür treffende Wörter ein. Die Schlüsselwörter helfen den Suchmaschinen beim Einordnen Ihrer Webseite. Der Kopfbereich Der Kopfbereich empfängt den Besucher auf Ihrer Homepage. Er sollte daher schön gestaltet sein. Gerne können Sie die Hintergrundgrafik von mir verwenden, Sie können aber auch gerne eine eigene verwenden. Achten Sie dabei aber darauf, dass Ihre Grafik die gleichen Maße hat, und dass Sie sie in den Ordner images ablegen (gilt übrigens für alle Grafiken!). Dann müssen Sie nur noch in dem Quelltext an der entsprechenden Stelle den Namen Ihrer Grafik durch den vorherigen ersetzen. (Ich habe die Hintergrundgrafik für den Kopfbereich immer als background-image eingebunden, daher steht sie meistens in der CSS-Datei) 7

8 Oft habe ich eine kleine Logo-Grafik im Kopfbereich eingefügt. Diese können Sie entfernen oder durch Ihr Logo ersetzen. Die Navigation vervollständigen. Durch die Navigation erwacht Ihre Webseite erst so richtig zum Leben. Sie besteht aus Links, die anklickbar sind. Links haben immer ein Ziel, zu dem Sie weitergeleitet werden, nachdem Sie den Link geklickt haben. Dieses Ziel kann entweder eine komplett fremde Webseite sein, also eine URL-Angabe, oder eine Unterseite Ihrer eigenen Webseite, also eine HTML-Datei. Links werden durch den a-tag definiert, den Sie ja schon weiter oben kennengelernt haben. Er unterliegt folgender Struktur: <a href= Ziel-des-Links > Name des Links </a> Das Attribut href bestimmt also das Ziel des Verweises und als Inhalt des a-tags steht der Name, den man später liest und anklicken kann. Eine von mir vorgefertigte Navigation sieht ungefähr so aus: <div class="navigationsleiste"> <a class="button" href="startseite.html">startseite</a> <a class="button" href="link2.html">link 2</a> <a class="button" href="#">link 3</a> <a class="button" href="#">link 4</a> <a class="button" href="#">link 5</a> </div> Der div-container, der die ganze Navigation umschließt, sorgt für die Positionierung. Das class-attribut sorgt für das Aussehen der Links und das href-attribut definiert das Ziel. So etwas Ähnliches finden Sie in jeder Website-Vorlage von mir. Ihre Aufgabe ist nun die Navigation nach Ihren Wünschen zu vervollständigen. Bisher sind nur 2 (bei manchen Vorlagen auch 3) Navigationspunkte anklickbar: die Startseite und der darauf folgende Link. In Ihrem Ordner mit der Website- Vorlage befinden sich bis jetzt ja auch erst 2 HTML-Dateien (startseite.html und link2.html). Denn jede Unterseite zu Ihrer Homepage bedeutet natürlich eine neue HTML-Datei. Wollen Sie nun beispielsweise zu Link 3 (der ja bis jetzt noch gar kein Link ist, da er kein Ziel hat und somit nicht anklickbar ist) eine Unterseite erstellen, gehen Sie folgendermaßen vor: 1.) Als erstes müssen Sie eine neue HTML-Datei erstellen. Doch keine Angst, dazu können Sie einfach die startseite.html kopieren. Geben Sie der Kopie als Erstes 8

9 einen neuen Namen, z.b. reisen.html, wenn Link 3 zu einer Unterseite führen soll, wo Sie Ihre Reiseberichte veröffentlichen wollen. 2.) Als nächstes öffnen Sie Ihre neue reisen.html-datei in Ihrem HTML-Editor und verändern den Quelltext überall dort, wo er sich von der Startseite unterscheiden soll, denn bisher ist es ja immer noch eine Kopie der Startseite. Nun liegt es an Ihnen zu entscheiden, ob z.b. das Logo von der Startseite auch noch auf Ihrer Unterseite zu sehen sein soll, oder ob die Navigation nochmal komplett erscheinen soll. Wenn nicht, entfernen Sie einfach die entsprechenden Stellen. Nun fügen Sie noch Ihre Reiseberichte ein (siehe: Das Hauptfenster ) und speichern die Datei. 3.) Als letzten und wichtigsten Schritt müssen Sie Ihre neue HTML-Datei verlinken. D.h. überall dort, von wo aus man Ihre neue Unterseite erreichen soll, müssen Sie Ihre reisen.html Datei in einen a-tag einfügen. Soll z.b. von der vorgefertigten Navigation Link 3 zu Ihren Reiseberichten führen, müssen Sie den vorgefertigten a-tag; <a class="button" href="#">link 3</a> umändern in: <a class="button" href="reisen.html">meine Reiseberichte</a> und schon erscheint an der Stelle von Link 3 der Link Meine Reiseberichte, den Sie anklicken können und der Sie sofort zu Ihren Berichten leitet. Das alles funktioniert natürlich nur, wenn sich alle HTML-Dateien im gleichen Ordner befinden. Ansonsten müsste nämlich noch der Pfad angegeben werden. Soviel zur Navigation. Ich hoffe, ich habe es einigermaßen verständlich geschildert. Wichtig ist auf jeden Fall, dass es auf jeder Unterseite Ihrer Homepage einen Link gibt, der zur Startseite zurückführt und dass die Links eindeutige Namen haben, sodass der Besucher Ihrer Webseite immer weiß, wohin er gelangt, wenn er einen Link klickt. Das Hauptfenster Nach der Navigation kommt der Bereich, den ich Hauptfenster genannt habe. Hier kommt der eigentliche Inhalt Ihrer Webseite hinein. D.h. Texte, Bilder, Grafiken usw. werden hier eingefügt. Bedienen Sie sich der h-tag s (h1, h2, h3 usw.) für Überschriften und des p- Tags für Textabsätze. Mit dem img-tag können Bilder eingefügt werden, die dann mit den oben gelernten CSS-Befehlen positioniert werden können. 9

10 Wenn Ihnen die von mir vorgefertigte Schrift nicht gefällt, können Sie diese natürlich in der CSS-Datei anpassen. Nach dem Hauptfenster kommt der Teil mit dem Backlink zu meiner Webseite, der in der kostenlosen Version nicht entfernt oder verändert werden darf. Ich möchte an dieser Stelle noch einmal darauf hinweisen, dass es sehr viel Mühe und Zeitaufwand ist, solche Homepage-Vorlagen zu erstellen. In der gekauften Version gibt es selbstverständlich keinen Backlink. Das war mein kurzer Mini HTML-Kurs. Ich hoffe, Sie haben einen positiven Einblick in die Thematik erhalten, und vor allen Dingen hoffe ich, dass Sie nun in der Lage sind, aus einer Homepage-Vorlage eine Homepage zu erstellen die Ihren Vorstellungen und Wünschen gerecht wird! Denn dafür habe ich den Kurs geschrieben. Viel Spaß mit Ihrer Webseite! weiterführende Links: Alles über HTML: Alles über CSS: 1