Meine Webseite – oder HTML für Kinder-Pandas
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 <h1> 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 <h1> Ü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.
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 <p> (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 </p>
Wenn man also im HTML nun schreibt:
<p>Wir hatten einen ganz tollen Tag mit der Klasse, denn wir sind alle zusammen im Zoo gewesen. Wir haben Delphine, Elelefanten und Affen gesehen </p><p>Am Abend sind wir dann wieder mit dem Bus nach Hause gefahren. Meine Eltern holten mich an der Schule ab.</p>
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.
Der <p> Tag hat wie die meisten Tags einen Anfangs und Endtag, alles was dazwischen steht wird dann von diesem Tag beeinflusst. Es gibt aber auch Tag die keinen Endtag haben – wie etwa einen Zeilenumbruch, bei dem man einfach in der nächsten Zeile weiterschreibt.
Ein Tag der einzeln steht, bei dem es also keinen Endttag gibt ist <br /> (Leerzeichen zwischen br und / !)
Der <br /> Tag bewirkt einen einfachen Zeilenumbruch, du schreibst also in der nächsten Zeile weiter. Im Gegensatz zu <p></p> was einen ganzen Absatz bewirkt – am besten ihr probiert den <br /> Tag mal selber an einem Text aus.
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
<html>
und genauso endet es auch wieder
</html>
Dazwischen ist nun die ganze Seite, die wird wie gesagt unterteilt in Kopf und Körper. In den Kopf schreiben wir nun unseren Titel
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
</body>
</html>
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
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
<p>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.</p>
</body>
</html>
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 <h>. Nun gibt es verschiedene Arten von Überschriften – die “Hauptüberschrift”, die ganz oben steht wird mit <h1> bezeichnet, wenn dann innerhalb der Seite zB einzelne Artikel mit Überschriften sind werden diese mit <h2> gekennzeichnet. Damit wird dem browser gesagt: Das ist eine Überschrift 1. Grades, die ist viel grösser als normale Schrift (bei <h1>). Bei <h2> bedeutet es Grösser als normale Schrift, aber kleiner als <h1>. So ist dann <h3> wiederum grösser als normal aber kleiner als <h2>. Evtl ist <h3> 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:
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
<h1>Ich lerne html</h1>
<p>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.</p>
</body>
</html>
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).
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 <a>meine Webseite</a>.
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 <a href=”http://pandabandenwelt.wordpress.com”>meine Webseite</a>
Auf der Seite sieht das dann so aus: Dies ist meine Webseite - also alles was zwischen <a> und </a> steht ist später unterstrichen und anklickbar. Bei
<a href=”http://pandabandenwelt.wordpress.com”>Dies ist meine Webseite</a> sieht es so aus : Dies ist meine Webseite
Dies ist meine <a href=”http://pandabandenwelt.wordpress.com“>Webseite</a> 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
<a name=”tags”>Was sind Tags ?</a>
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
<a href=”#tags”>Zum Thema was sind Tags ?</a> – wenn man nur den link anklickt springt man an die richtige Stelle
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 <a name=”xy”> bekommt der Anker einen Namen, damit man später dahinspringen kann mit <a href=”xy”> 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:
<a href=”http://google.de”>Suchmaschine</a> oder
<a href=”http://www.google.de”>Suchmaschine</a>
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
<html><head></head>
<body>
<a name=”anfang”>Anfang</a> Hier setzen wir einen Anker zu dem wir dann später springen können.
<p>Dies ist der erste Absatz von einem Text. Er steht vor dem zweiten, aber nicht hinter dem letzten</p>
<p>Dies ist der zweite Absatz von einem Text. Er steht vor dem dritten, aber hinter dem ersten</p>
<p>Dies ist der dritte Absatz von einem Text. Er steht vor dem vierten, aber hinter dem ersten</p>
<p>Dies ist der vierte Absatz von einem Text. Er steht vor dem fünften, aber hinter dem ersten</p>
<p>Dies ist der fünfte Absatz von einem Text. Er steht vor dem sechste, aber hinter dem ersten</p>
<p>Dies ist der sechste Absatz von einem Text. Er steht vor dem siebten, aber hinter dem ersten</p>
<a href=”#anfang”>Zum Anfang</a> Hier springen wir nun zum Anfang
</body>
</html>
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 <, dann ein Ausrufezeichen !, gefolgt von 2 Minuszeichen – -) wo der Text anfängt der nicht gezeigt werden soll, und –> am Ende (2 Minuszeichen — und eine spitze Klammer >). Alles was dazwischsteht ist so als ob es nicht da wäre.
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
<p>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.</p> <!–Hier komt der Inhalt rein –>
</body>
</html>
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 <img>, 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 <br /> steht der img-Tag allein und wird daher auch so geschrieben , <img />.Wenn ein <img /> 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 <img scr=”HIER FINDEST DU DAS BILD” />
Sagen wir, wir haben das Bild gerade hochgeladen, und bekommen nun die Bildadresse http://kflfjblogenglish.files.wordpress.com/2010/01/bye-von-claire.jpg
Dann würde der html-Test dazu so aussehen <img src=”http://kflfjblogenglish.files.wordpress.com/2010/01/bye-von-claire.jpg” />
Machen wir einen Test, dazu nehmen wir die html-Datei die wir schon erstellt haben
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
<h1>Ich lerne html</h1>
<p>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.</p>
<img src=”http://kflfjblog.files.wordpress.com/2010/01/bye-von-claire.jpg” />
</body>
</html>
wieder speichern – nun ist unter dem Text das Bild zu sehen. Bilder erzeugen keinen Absatz, wenn der Text davor oder dahinter nicht von einem <p> 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 <p> 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
<a href=”http://irgendeineseite.de> IRGENDEINESEITE </a>
kommt statt des Textes IRGENDEINESEITE das Bild rein – also
<a href=”http://irgendeineseite.de> BILD </a>
nun müssen wir das Wort Bild durch das eigentliche Bild ersetzen, also müssen wir wieder die Source, also die Quelle angeben.
<a href=”http://irgendeineseite.de> <img src=”http://hierliegtdasbild.de/bild.jpg /> </a>
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
<a href=”http://panfu.de> Panfu </a>, als ganzer Text also
Willkommen auf <a href=”http://panfu.de>Panfu</a>
Nun müssen wir noch das Wort Panfu durch das Bild ersetzen. Das Bild wird also mit <img src=…> eingefügt.
Das ergibt
Willkommen auf <a href=”http://panfu.de> <img scr=”http://kflfjblogenglish.files.wordpress.com/2010/02/panfubild.jpg”/></a>
Wenn ihr das so in den Textteil in der Beispieldatei schreibt könnte es so aussehen:
<html>
<head> <title>Meine erste Webseite</title>
</head>
<body>
<h1>Ich lerne html</h1>
<p>Willkommen auf <a href=”http://panfu.de”>
<img src=”http://kflfjblog.files.wordpress.com/2010/02/panfubild.jpg”></p>
</body>
</html>
Inhalt ohne Überschrift sieht dann so aus:
Willkommen auf 
Das Div-Tag (von Karim)
Das Div-Tag ist etwas ganz besonderes! Mit dem Div-Tag kann man verschiedene Bereiche einschließen, die im Bodybereich, also in dem Inhaltsbereich vorhanden sind einschließen. Lange Worte, kurzer Sinn: Das Div-Tag ist superwichtig für eine richtige Website, aber mit ihm umzugehen ist nicht gerade einfach. Jut, dann kommen wir mal zur Erklärung und dann zur Praxis. Ihr müsst euch das Div-Tag vorstellen, wie die Polizei, dein Freund und Helfer, das Div-Tag kann dir sehr nützlich sein, aber auch schnell mal wieder verschwinden. (Was die Polizei natürlich nicht tut 
) So also als erstes mal das Div-Tag öffnet ihr mit <div> und schließt es mit </div>, nicht so schwer. Dem Div-Tag könnt ihr dann zum Beispiel eine ID zuweisen um ihn ein CSS-Design zu verpassen. Das würde dann zum Beispiel so aussehen:
<div id=”Design”></div>
Dann zeig ich euch mal eine ganz besondere Eigenschaft des Div-Tags. Das verunsichtbaren. Das ganze Funktioniert mit ein bisschen CSS, doch ich bin mir sicher das kriegt ihr hin. Also, ihr habt das Div-Tag und darein packt ihr jetzt das style Attribut, dass ist das Attribut um CSS für ein EINZELNES Div-Tag zu bestimmen. So sieht dann der Code aus:
<div style=”display: none;”><p>Äpfel schmecken sehr gut, wenn sich keine Würmer eingenistet haben.</p></div>
Erklärung:
Also als erstes öffnen wir das Div-Tag mit <div , dann packen wir da die style Anweisung, nämlich “display:none;” rein, wir schließen die Anweisung und den ersten Teil des Div-Tags mit > wieder. Dann kommt der Content(Inhalt), dann schließen wir wieder, mit </div>. Fertig und wenn ihr das mal in einen Editor steckt und dann anguckt, seht ihr nichts 
, nehmt ihr aber style=”display: none;” raus, dann seht ihr den Text im <p> Tag. Bald zeige ich euch auch noch, wie ihr eine Sidebar mit dem Div-Tag ausrichten könnt. Fortsetzung folgt…
bd Karim
13. Mai 2012 um 10:44
[...] Meine Webseite – oder HTML für Kinder-Pandas [...]