WEbseite erstewllen

Auf Wunsch einer jungen Pandadame versuche ich euch hier ein paar Grundlagen zum Thema Webseiten beizubringen.
Einführung

Fast alle Seiten die ihr im Internet seht sind in der Sprache HTML geschrieben, was das bedeutet ist erstmal unwichtig, wichtig ist nur dass ihr wisst wie sie heisst. In dieser Sprache “sprechen” euer Browser (meistens der Firefox oder der Internetexplorer) und der Webserver (also der Rechner wo die Seite herkommt) miteinander.

Als Vorbereitung brauchen wir ein Porgramm mit dem wir HTML schreiben können. Das geht eigentlich mit jedem Programm mit dem man reine Textdateien schreiben kann, wie zB dem Editor in Windows. Aufrufen tut ihr ihn indem ihr auf den Startbutton klickt, dann geht ihr auf (alle) Programme, dort auf Zubehör, dort findet ihr den Editor.

Oder, ihr besorgt euch einen sog. HTML-editor, es gibt viele die kostenlos sind – zB Phase5

Was jedoch nicht geht ist es hier bei WordPress ins Fenster unter “html” zu schreiben, html funktioniert hier nur bedingt. Wenn ihr etwas auf dem Blog verwenden könnt werde ich das extra schreiben.

Jede HTMLseite besteht aus einem Kopf (auf englisch head) und einem Körper (englisch body). Dabei steht normalerweise alles das was man auf der Seite sehen kann im body, im head stehen zusätzliche Informationen, wie zB wie die Seite heisst oder wer sie geschrieben hat, oder auch in welcher Sprache der Text geschrieben ist. Wenn du bei google nun nach Seiten suchst die auf deutsch geschrieben wurden wird die Suchmaschine in den Kopf der Seite schauen ob dort als Sprache “de” (für deutsch) angegeben wurde. Wenn nicht ist die Seite uninteressant, ist sie auf deutsch wird sie als Ergebnis angezeigt.

HTML und CSS

CSS sind sogenannte “Stylesheets” – das heisst – eine Stilangabe. HTML gibt zB an, dass

eine Überschirft ist, es sagt aber nichts darüber aus wie gross sie genau ist oder auch welche Farbe sie hat. Diese Sachen stehen im Stylesheet.

So kann man zB in der Stilangabe sagen, dass eine

Überschrift rot sein soll, dazu unterstrichen und 15px gross.

HTML gibt also an was angezeigt wird, CSS wie das Element aussehen soll- wird nichts angegeben werden die Standardwerte des Browsers verwendet .

Bevor wir allerdings mit CSS anfangen gibt es nun erstmal einen Überblick über die wichtigsten HTML Elemente die man für eine eigene Webseite braucht.

Was sind Tags ?

Einen HTMLbefehl nennt man tag. Diesen erkennt man daran, dass er in Spitze Klammern gesetzt wird. In der Regel gibt es einen Anfangs – und einen Endtag, damit der Browser weiss wo der Befehl anfängt und wo er aufhört. Ein Beispiel:

Der Tag

(für paragraph, engl. für Absatz) sagt der Browser er soll einen neuen Absatz beginnen. Wenn der Absatz zuende ist, wird er mit dem Enddtag geschlossen, der Endtag hat noch ein / davor, in diesem Fall also

Wenn man also im HTML nun schreibt:

Wir hatten einen ganz tollen Tag mit der Klasse, denn wir sind alle zusammen im Zoo gewesen. Wir haben Delphine, Elelefanten und Affen gesehen

Am Abend sind wir dann wieder mit dem Bus nach Hause gefahren. Meine Eltern holten mich an der Schule ab.

Dann sieht das, wenn man es so unter HTML eintragen würde so aus:

Wir hatten einen ganz tollen Tag mit der Klasse, denn wir sind alle zusammen im Zoo gewesen. Wir haben Delphine, Elelefanten und Affen gesehen

Am Abend sind wir dann wieder mit dem Bus nach Hause gefahren. Meine Eltern holten mich an der Schule ab.
Die HTML Seite

Jede HTML-Seite fängt auf dieselbe Art an, indem die Seite dem Browser sagt in welcher Sprache sie geschrieben ist – und zwar HTML (davor kommt noch ein sogenannter Doctype, der aussagt um welches HTML es sich handelt, das ist aber erstmal unwichtig).

Also geht es los mit

und genauso endet es auch wieder

Dazwischen ist nun die ganze Seite, die wird wie gesagt unterteilt in Kopf und Körper. In den Kopf schreiben wir nun unseren Titel

Meine erste Webseite

Diesen Text kopierst du am besten in den Editor, dann kannst du später damit arbeiten.

So, nun haben wir das Gerüst und den Titel, fehlt nur noch etwas Inhalt – für den Anfang reicht da erstmal ein Satz

Meine erste Webseite

Dieses ist meine erste Webseite, und ich freue mich dass du hierhergefunden hast. Wenn du wiederkommst wird es vielleicht auch schon mehr zu sehen geben.

Dieser Text wird nun gespeichert – wichtig – damit Windows auch weiss dass es eine HTMLdatei ist muss die Datei eine entsprechende Endung haben, und zwar die Endung .html (oder auch .htm). Also etwa meineseite.html oder homepage.html

Wenn ihr diese Seite nun anklickt werdet ihr sehen dass sich euer Browser öffnen wird und die Seite anzeigt.

Damit habt ihr eure erste eigene Seite geschrieben – sie besteht zwar erst aus einem Absatz, hat aber im Prinzip schon alles was eine Webseite braucht.
Die Überschrift

Meistens hat ein Text auch eine Überschrift – in html gibt es dafür einen eigenen Tag, und zwar . Nun gibt es verschiedene Arten von Überschriften – die “Hauptüberschrift”, die ganz oben steht wird mit

bezeichnet, wenn dann innerhalb der Seite zB einzelne Artikel mit Überschriften sind werden diese mit

gekennzeichnet. Damit wird dem browser gesagt: Das ist eine Überschrift 1. Grades, die ist viel grösser als normale Schrift (bei

). Bei

bedeutet es Grösser als normale Schrift, aber kleiner als

. So ist dann

wiederum grösser als normal aber kleiner als

. Evtl ist

auch nur noch fettgedruckt, aber auf jeden Fall unterscheidet es sich von normaler Schrift.

Wenn wir also nun unsere Überschrift einfügen (auch hier wird der Tag wieder geschlossen) sieht unser html nun so aus:

Meine erste Webseite

Ich lerne html

Dieses ist meine erste Webseite, und ich freue mich dass du hierhergefunden hast. Wenn du wiederkommst wird es vielleicht auch schon mehr zu sehen geben.

Und speichern – wenn du die Seite nun mit dem Browser ansiehst wirst du sehen dass du eine ziemlich fette Überschrift hast.
Umlaute

Umlaute (also ä,ö,ü) sowie ß kennt html nicht – wenn man es dort schreibt muss man eine Art Code eingeben. Das sieht erstmal total komisch aus, aber wenn man sich erstmal dran gewöhnt hat kann man es eigentlich ganz normal lesen.

Sonderzeichen werden in HTML mit einem & begonnen und hören mit einem ; auf. Die Codes für die Umlaute sind:

ä für ä

Ä für Ä

ö für ö

Ö für Ö

ü für ü

Ü für Ü

also wird das Wort Frühstück dann Frühstück geschrieben – wie gesagt, etwas gewöhnungsbedürftig. Viele Browser sind mittlerweile so programmiert, dass sie auch Umlaute direkt verstehen, aber wenn man es richtig machen will dann maskiert man die Umlaute (so nennt man das).

Ein Tag der einzeln steht, bei dem es also keinen Endttag gibt ist
(Leerzeichen zwischen br und / !)

Der
Tag bewirkt einen einfachen Zeilenumbruch, du schreibst also in der nächsten Zeile weiter. Im Gegensatz zu

was einen ganzen Absatz bewirkt – am besten ihr probiert den
Tag mal selber an einem Text aus.

Links

Nun wirds interessant, denn nun lernt ihr etwas was ihr auf euren Blogs benutzen könnt – wie man mit Links umgeht. In html wird ein link Anker genannt, abgekürzt a. Wenn ihr also wollt, dass man auf ein Wort in eurem Text klicken kann dann musst man diesem Wort sagen dass es ein Anker ist. Also zB

Dies ist meine Webseite.

Nun gibt es ein Problem – der Browser weiss nun zwar, auf welches Wort der user klicken muss damit er auf eine andere Seite kommt, aber nicht welche Seite er nun aufrufen soll. Also muss ihm das mitgeteilt werden, eine Seite die aufgerufen wird nennt man Hypereferenz, abgekürzt href, was soviel heisst wie hier musst du hin. Wenn es also meine Webseite ist, dann würde der link so aussehen

Dies ist meine Webseite

Auf der Seite sieht das dann so aus: Dies ist meine Webseite – also alles was zwischen und steht ist später unterstrichen und anklickbar. Bei

Dies ist meine Webseite sieht es so aus : Dies ist meine Webseite

Dies ist meine Webseite wird zu: Dies ist meine Webseite

Ein solcher link ruft eine andere Seite auf. Es ist aber auch möglich, nicht eine andere Seite aufzurufen, sondern eine Stelle auf derselben Seite.

Dazu muss man auf der Seite eine stelle markieren, an die man hinterher springen will. Auch dies macht man mit einem Anker, nur dass man diesmal dem Anker einen Namen gibt.

Sagen wir, ich habe irgendwo auf meiner Seite das Kapitel Überschrift, und ich möchte dass mein Leser diese Stelle durch anklicken im Inhaltsverzeichnis erreichen kann. Dazu setze ich einen Anker, dem ich einen Namen gebe – sagen wir ich nenne sie Tags. Dann schreibe ich nun an die Stelle wo ich hinmöchte

Was sind Tags ?

Wenn ich nun vom Beginn der Seite einen link an die Stelle setzen will, machen ich das so ähnlich wie bei einem link auf eine fremde Seite, nur dass dort keine Internetadresse steht, sondern der Name des Ankers, angeführt vom #-Zeichen

Zum Thema was sind Tags ? – wenn man nur den link anklickt springt man an die richtige Stelle

Zum Thema was sind Tags ?

Schaut euch mal die Seite Tips für euren Blog an, da hab ich das genauso gemacht – oben sind die einzelnen Abschnitte, und wenn man auf die Überschrift klickt sprint man dorthin.

Also – mit bekommt der Anker einen Namen, damit man später dahinspringen kann mit springt man dann an eine andere Stelle, dabei hat man 2 Möglichkeiten – entweder auf eine andere Seite (dann fängt das hinter <a href=”… mit http:// an), oder an eine Stelle auf der selben Seite (dann steht hinter dem href=” ein #)

Testaufgabe:

Erstelle einen link, bei dem man auf das Wort “Suchmaschine” klicken kann und sich google öffnet.

Lösung:

Suchmaschine oder

Suchmaschine

Versuche nun einen link in einen Satz einzubauen, mit dem man auf deine Blogseite kommt. Der Satz soll lauten: Dies ist ein Text zu ausprobieren. In diesem Text ist ein link mit dem man auf meine Webseite kommt. Die Worte “meine Webseite” sollen anklickbar sein.

Speicher die html-Datei und klicke sie an. Wenn du nun auf die Worte meine Webseite klickst sollte sich dein Blog öffnen.

Kommen wir nochmal zu links auf derselben Seite. Ein Bespiel wo es häufig verwendet wird – bei sehr langen Webseiten ist es mühsam wenn man am Ende angekommen ist wieder an den Anfang zu scrollen – deswegen findet man auf vielen Webseiten zwischendurch Links auf denen steht nach oben, so dass man mit einem Klick zum Seitenanfang kommt.

Dazu muss man am Seitenanfang erstmal einen Anker setzen, zu dem man hinspringen kann – wir wollen ja nicht die Seite nochmal laden. Also wird der Anfang gekennzeichnet, indem wir dorthin einen Anker setzen

Anfang Hier setzen wir einen Anker zu dem wir dann später springen können.

Dies ist der erste Absatz von einem Text. Er steht vor dem zweiten, aber nicht hinter dem letzten

Dies ist der zweite Absatz von einem Text. Er steht vor dem dritten, aber hinter dem ersten

Dies ist der dritte Absatz von einem Text. Er steht vor dem vierten, aber hinter dem ersten

Dies ist der vierte Absatz von einem Text. Er steht vor dem fünften, aber hinter dem ersten

Dies ist der fünfte Absatz von einem Text. Er steht vor dem sechste, aber hinter dem ersten

Dies ist der sechste Absatz von einem Text. Er steht vor dem siebten, aber hinter dem ersten

Zum Anfang Hier springen wir nun zum Anfang

Kommentare

In html hat man die Möglichkeit sich Notizen zu machen, ohne dass diese Notizen später auf der fertigen Seite zu sehen sind. Manchmal dauert es Wochen oder Monate bis eine Webseite fertig ist, und manchmal weiss man später nicht mehr wieso man bestimmte Sachen gemacht hat. Oder man arbeitet mit mehreren Leute an derselben Seite, dann sollen ja die anderen auch verstehen was man sich dabei gedacht hat.

Dazu muss man dem Browser der den html-Text zu einer Seite macht quasi sagen: Achtung ! Das was hier steht musst du nicht mit anzeigen. Das macht man in html durch ein ganz bestimmtes Symbol, und zwar <!– (eine Spitze Klammer auf am Ende (2 Minuszeichen — und eine spitze Klammer >). Alles was dazwischsteht ist so als ob es nicht da wäre.

Meine erste Webseite

Dieses ist meine erste Webseite, und ich freue mich dass du hierhergefunden hast. Wenn du wiederkommst wird es vielleicht auch schon mehr zu sehen geben.

Der Text in grün wird also hinterher auf der Seite nicht angezeigt – lesen kann man den nur wenn man den htmltext der Seite sieht (den HTML-Text nennt man auch Quelltext).

Bilder einfügen

auch für ein Bild gibt es einen html-Befehl, einen Tag, er ist , das ist die Abkürzung für image, englisch für Bild. Da ein Bild kein Ende hat gibts es auch keinen Endtag, wie bei
steht der img-Tag allein und wird daher auch so geschrieben , .Wenn ein Tag kommt weiss der Browser dass er nun ein Bild darstellen soll.

Nun muss man ihm noch sagen wo er dieses Bild finden kann, man muss ihm die “Quelle” nennen. Quelle heisst auf englisch source, abkürzen tut man es mit src. Also sagen wir dem Browser nun wo er das Bild findet. Dann würde dieses Bild also eingefügt mit

Sagen wir, wir haben das Bild gerade hochgeladen, und bekommen nun die Bildadresse http://kflfjblog.files.wordpress.com/2010/01/bye-von-claire.jpg

Dann würde der html-Test dazu so aussehen

Machen wir einen Test, dazu nehmen wir die html-Datei die wir schon erstellt haben

Meine erste Webseite

Ich lerne html

Dieses ist meine erste Webseite, und ich freue mich dass du hierhergefunden hast. Wenn du wiederkommst wird es vielleicht auch schon mehr zu sehen geben.

wieder speichern – nun ist unter dem Text das Bild zu sehen. Bilder erzeugen keinen Absatz, wenn der Text davor oder dahinter nicht von einem

oder einem anderen Tag umschlossen ist wird das Bild mittem im Text untergebracht

Text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text

Soll das Bild in einer eigenen Zeile stehen muss mal es mit einem

Tag versehen sein.

text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text

text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text text text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text texttext text text text text text text
Bilder verlinken

Wir wissen nun wie man links erstellt und auch wie man Bilder einfügt. Bei anklickbaren Bildern ist es so, dass statt eines Textes die Angabe zum Bild im link steht.

Also statt eines Textlinks der so aussieht

IRGENDEINESEITE

kommt statt des Textes IRGENDEINESEITE das Bild rein – also

BILD

nun müssen wir das Wort Bild durch das eigentliche Bild ersetzen, also müssen wir wieder die Source, also die Quelle angeben.

Ein praktisches Beispiel – ich möchte einen link auf die Seite Panfu.de setzen. Der Text soll heissen “Wilkommen auf Panfu”, dabei soll zuerst das Wort Panfu anklickbar sein. Im 2. Schritt soll dann das Wort “Panfu” durch ein Bild von einem Panda ersetzt werden.

Dabei ist die Adresse von Panfu http://panfu.de

Die Adresse des Bildes ist http://kflfjblog.files.wordpress.com/2010/02/panfubild.jpg

Also wäre der Link zu Panfu

Panfu , als ganzer Text also

Willkommen auf Panfu

Nun müssen wir noch das Wort Panfu durch das Bild ersetzen. Das Bild wird also mit eingefügt.

Das ergibt

Willkommen auf

Wenn ihr das so in den Textteil in der Beispieldatei schreibt könnte es so aussehen:

Meine erste Webseite

Ich lerne html

Willkommen auf

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: