Schule online - Informatik 5A LE 6 :6.1
 


Schuljahr 2001/2002
Schule online

Informatik 5A Jahresplan
Informatik 4B/4C Jahrespl.
Informatik Lernen 5A
Informat. Lernen 4B/4C

Deutsch 5A
Deutsch 1A

Mathematik 4BR
Mathematik 1A

Inhaltsverzeichnis
Home 		 
LE 6 HTML - Grundlagen

 
HTML HYPER TEXT MARKING LANGUAGE

 
Datei

Header
Body

Quellcode



Wichtig !		 Jede HTML-Datei besteht aus zumindest zwei Teilen, es sind dies

der Header (Dateikopf) mit dem Titel und anderen Spezifikationen
und der Body (Dateikörper) mit Text, Links, Grafiken und Sonstigem.

Den "Quellcode" (so nennt man den gesamten Inhalt einer HTML-Datei) schreibst du in einem Editor, das Ergebnis kannst du in einem Browser ansehen.


Achte beim Schreiben des Quellcodes peinlich genau auf die Regeln !

Vergiss die abschließenden Tags nicht !

Jede HTML-Datei beginnt mit dem einleitenden Tag <html> und endet mit </html> als Abschluss. Dazwischen eingeschlossen ist der gesamte Quellcode.
ÜbersichtInformatik 5ALE 6[ 6.1 | 6.2 | 6.3 | 6.4 ]
 
Schule online - Informatik 5A LE 6 :6.2
 


Schuljahr 2001/2002
Schule online

Informatik 5A Jahresplan
Informatik 4B/4C Jahrespl.
Informatik Lernen 5A
Informat. Lernen 4B/4C

Deutsch 5A
Deutsch 1A

Mathematik 4BR
Mathematik 1A

Inhaltsverzeichnis
Home 		 
  Beispiel einer vollständigen HTML-Datei :(Hier die Browseransicht)

<html>
<head>
<title>Meine erste Homepage</title>
</head>
<body>
Diese Homepage wurde erstellt von xyz, am ...
</body>
</html>
  		 
Schritt 1 Kopiere den Quellcode des Beispiels und füge ihn in einen Editor ein. Verändere den Titel und den Text im Body. Speichere die Datei in einem Unterordner, benenne sie "p01.html". Browser öffnen und Website anschauen !
 
Schritt 2 Damit die Umlaute richtig dargestellt werden, musst du sie speziell schreiben. Regel : Schreib & davor und uml; dahinter, so wird a zum ä !

ä = &auml;Ä = &Auml;ö = &ouml;Ö = &Ouml; ü = &uuml;Ü = &Uuml;
ß = &szlig;

Füge nun im Body den Text ein : "Ich wohne in Österreich (&Ouml;sterreich), dort gibt es große (gro&szlig;e) Berge". Speichern und im Browser anschaun.
ÜbersichtInformatik 5ALE 6[ 6.1 | 6.2 | 6.3 | 6.4 ]
 
Schule online - Informatik 5A LE 6 :6.3
 


Schuljahr 2001/2002
Schule online

Informatik 5A Jahresplan
Informatik 4B/4C Jahrespl.
Informatik Lernen 5A
Informat. Lernen 4B/4C

Deutsch 5A
Deutsch 1A

Mathematik 4BR
Mathematik 1A

Inhaltsverzeichnis
Home 		 
Schritt 3 Einen (im Browser unsichtbaren) Kommentar zur späteren Erinnerung schreibst du so :<!-- Dieser Kommentar wird im Browser nicht angezeigt -->.

 
Schritt 4 Farben gibst du am besten in hexadezimaler Form an : #XXXXXX. Für jedes "X" kannst du eine beliebige Ziffer (0 bis 9) oder einen Buchstaben (a bis f) einsetzen.
 
Regel Die ersten beiden Stellen geben den Rot-Wert der Farbe an, die nästen beiden den Grün-Wert, und die letzten zwei Stellen den Blau-Wert. Das Prinzip der "additiven Farbmischung" findest du hier.

Mit <body bgcolor=#3300CC> färbst du den Hintergrund blau. Teste möglichst viele verschiedene Farben !

Webtipp zum Thema Farben : http://www.netzwelt.com

 
Schritt 5 Schrift färbst du so : <font color=#XXXXXX>Diese Homepage ... </font>.
Teste verschiedene Kombinationen von Schrift- und Hintergrundfarben !
 
Schritt 6 Besuche die Seite http://www.karzauninkat.com/Goldhtml, dort erfährst du, wie man eine Website auf keinen Fall gestalten soll.
ÜbersichtInformatik 5ALE 6[ 6.1 | 6.2 | 6.3 | 6.4 ]
 
Schule online - Informatik 5A LE 6 :6.4
 


Schuljahr 2001/2002
Schule online

Informatik 5A Jahresplan
Informatik 4B/4C Jahrespl.
Informatik Lernen 5A
Informat. Lernen 4B/4C

Deutsch 5A
Deutsch 1A

Mathematik 4BR
Mathematik 1A

Inhaltsverzeichnis
Home 		 
Schritt 7 Ein Link (auch "Verweis" genannt) in deiner Website :

Gestalte im Editor eine neue Seite und speichere sie im selben Ordner unter "p02.html". Füge in der Seite "p01.html" (im Body) einen Text ein, der die Besucher deiner Homepage auf die nächste Seite leitet.

Etwa so : Zur nächsten Seite geht's hier !

Damit der Verweis auch funktioniert, musst du ihn so schreiben :
<a href="p02.html">Zur nächsten Seite geht's hier !</a>
Speichern und ausprobieren.

 
Schritt 8 Ein Link ins WWW
Füge auf einer Seite einen Link zu deiner liebsten Homepage ein.

Beispiel: <a href="http://www.derstandard.at">Hier geht's zum Standard</a>

 
Schritt 9 Erstelle eine dritte Seite, verlinke sie mit den beiden ersten und umgekehrt. Dann kannst du von jeder Seite aus jede andere Seite aufrufen (wenn's klappt !).
ÜbersichtInformatik 5ALE 6[ 6.1 | 6.2 | 6.3 | 6.4 ]