Kantonsschule Enge Bildnerische Gestaltung Webdesign, HTML-Übung
Seite 20

 

 
HTML Uebungen (HTML mit Texteditor)
   
Vorbereitung

Mache im eigenen Verzeichnis ein Unterverzeichnis mit dem Namen "webdesign", in dieses Verzeichnis nochmals ein Verzeichnis mit dem eigenen Namen (z.B.peter_meier). Alle Datei- und Verzeichnisnamen klein schreiben und Lehrschläge durch Unterstriche ersetzen.
Kopiere aus dem Laufwerk "dok/leimbach/kader/unterricht/webdesign/ das Verzeichnis "material" ins eigene Verzeichnis "webdesign".

Alle eigenen, neu geschriebenen HTML-Dateien werden in das Verzeichnis mit dem eigenen Namen gespeichert.

1.
einfaches
HTML-Gerüst
  • Öffne einen einfachen Texteditor (Windows: Wordpad oder Editor)
  • Schreibe folgenden Text mit den HTML-Tags:
    <HTML>
    <HEAD> <TITLE>KSZH-Webdesign, meinname</TITLE>
    </HEAD>
    <BODY>
    Hallo, <BR>
    dies ist meine erste HTML-Seite.
    </BODY>
    </HTML>
  • Speichere die Datei ins Verzeichnis mir dem eigenen Namen als einfache Textdatei (Textdokument) und füge statt die Dateiendung ..doc oder ...txt die Dateiendung...HTM an.
  • Öffne einen Browser (Netscape oder Microsoft Explorer)
  • Gehe auf "Datei...öffnen", resp. "File....open Page" und gib die zuvor gespeicherte Datei an.
  • Der Browser sollte folgendes zeigen.

2.
Tabelle

 

 

 

 

Lasse den Browser geöffnet aber verkleinere das Browserfenster auf die Hälfte des Bildschirmes so dass links der Texteditor und rechts der Browser sichtbar sind.

Öffne wieder die letzte Datei mit dem Texteditor und schiebe das Editorfenster links neben das Browserfenster.

Schreibe vor den Body-Schlusstag folgenden Text mit den HTML-Tags:
<table border=1 bordercolor=blue bgcolor=#ee9999>
<tr>
<td>erste Zelle</td>
<td>zweite zelle</td>
</tr>
<tr>
<td>dritte Zelle</td>
<td>vierte Zelle</td>
</tr>
</table>

Speicher die Datei, wechsle ins Browserfenster und gehe auf "Aktualisieren" oder "Reload".

Der Browser sollte folgendes zeigen.

 

3.
Bild einsetzen

Schreibe nach dem ersten Bodytag folgende Tags:
<img src="../material/Kszkl.gif"> <p>&nbsp;</p>

Der Browser sollte folgendes zeigen.
--------------------------
weiter