<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
// Hier ist angegeben, welcher HTML-Code im Dokument benutzt wird.
Transitional bedeutet: es werden Scripts und/oder Style-Sheets verwendet
lang="de" steht für "Sprache: deutsch"
<head>
// Anfang der Kopfzeile (head).
<title>Crashkurs: HTML</title>
// Dies ist der "Titel" dieser HTML-Seite.
Unter diesem Namen würde diese Webseite bei den "Favoriten" abgespeichert werden.
<link rel=stylesheet type="text/css" href="../../../crashkurs/crashkurs/css_crash.css">
// Verweiss auf die Datei css_crash.css (".css" steht für cascading style sheets)
Diese Datei ist eine allgemeine Formatvorlage, in welcher z.B. ein leerer Rand definiert wird.
Jede HTML-Seite, welche zum "Crashkurs" gehöhrt verwendet diese Formatvorlage.
Also: einmal ein Format definieren und jedesmal benutzen.
Der Code aus der Datei "css_crash.css" kann auch direkt in diese HTML-Datei eingebunden sein.
</head>
// Ende der Kopfzeile (head).
<body bgcolor="#D0F0F0" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
// Anfang des HTML-Körpers (body)
// Ab hier beginnt das Menu. In der Datei "css_crash.css" sind die Eigenschaften von "div.menu" definiert.
Mit <div class="menu"> bezieht sich das folgende Menu (welches als Tabelle angelegt ist)
auf diese in css_crash.css definierten Eigenschaften
(z.B. die Zeile "div.menu a:hover { background: black; color: white }"
in der Datei "css_crash.css" erzeugt, wenn die Maus über einem Menupunkt steht ("= hover"), einen
schwarzen Hintergrund mit weißer Schrift.).
<div class="menu">
<table border="1" cellspacing="0" cellpadding="5" bgcolor="#80ff80" summary="">
<tr>
<td >
<center> <a href="../../../crashkurs/crashkurs.html">Home</a>
</td>
<td bgcolor="#ffff80">
<center> <a href="../../../crashkurs/crashkurs/html.html"
style="text-decoration:none; background-color:#FFFF80; color:#000000">
HTML</a>
</td>
<td >
<center> <a href="../../../crashkurs/crashkurs/javascript.html">
Javascript - Java</a>
</td>
<td >
<center> <a href="../../../crashkurs/crashkurs/applet.html">
Java - Applet - Servlet - CGI-Script</a>
</td>
<td >
<center> <a href="../../../crashkurs/crashkurs/ssl.html">
XML - XSL - bis SQL u.a.</a>
</td>
<td >
<center> <a href="../../../crashkurs/crashkurs/beispiel.html">
Beispiel</a>
</td>
<td >
<center> <a href="../../../crashkurs/crashkurs/autor.html">
Autor</a>
</td>
</tr>
</table>
</div>
// Ab hier steht Text.
Texteigenschaften werden mit sogenannetn "tags" definiert.
"tags" umschließen den Bereich für den sie gelten sollen.
<h4>HTML</h4> bedeutet, dass "HTML" in der definierten Schriftgröße h4 dargestellt werden soll.
<u>H</u> unterstreicht das "H" in HyperText
Mit "<h4>Diese Seiten wurden erstellt mit: <a href="http://www.evrsoft.com/1stpage/">1st Page 2000</a></h4>"
wird der Textbereich "1st Page 2000" auf die URL "http://www.evrsoft.com/1stpage/" verlinkt.
Es ist zu beachten, dass einige Sonderzeichen und HTML-eigene Zeichen durch
HTML eigene Zeichenfolgen ersetzt werden muessen.
"∓nbsp;" erzeugt ein Leerzeichen. (HTML interpretiert immer nur ein Leerzeichen zwischen zwei Wörtern
- egal wieviel Leerzeichen Sie im Quelcode einfügen. Zusätzliche Leerzeichen werden durch "∓nbsp;" erzeugt.)
"∓amp;" erzeugt ein ∓
"∓lt;" erzeugt ein <
"∓gt;" erzeugt ein >
<p align=left>
<h4>HTML (= <u>H</u>yper<u>T</u>ext <u>M</u>arkup <u>L</u>anguage) ist eine
<u>Markierungssprache</u> und keine Programmiersprache
(wie z.B. JavaScript, Java, C, C++).</h4>
// Der folgende "Table" erzeugt einen grauen Balken, welcher von links bis rechts reichen soll.
Links und rechts der leeren Tabelle ist ein Rand von 18 Pixeln (Der Rand ist in der Datei "css_crash.css" definiert.).
- Dieser Rand bleibt auch, wenn Sie den Browser verkleinern.
- Das Gesamtbild der ganzen Seite bleibt erhalten - unabhängig von der eingestellten Auflösung des
Benutzers oder der Bildschirmgröße !!!
<table width="100%" border="0" cellspacing="10" cellpadding="5" bgcolor="#D0D0D0"
bordercolor="#000000"><tr><td></td></tr></table>
<h3>Wer HTML lernen möchte, kann dies mit Hilfe der folgenden Links
bewerkstelligen:<br><br></h3>
<h4>Lesen Sie, wie diese <a href="../../../crashkurs/crashkurs/html_aufbau.html">
Seiten aufgebaut</a> sind.</h4>
<h4>Diese Seiten wurden erstellt mit: <a href="http://www.evrsoft.com/1stpage/">
1st Page 2000</a></h4>
<h4>Schauen Sie sich die <a href="http://www.w3.org">W3C Referenz für HTML</a> an.</h4>
<h4>HTML, CSS, JavaScript: umfassendes Nachschlagewerk und zum selbst lernen mit
<a href="http://www.teamone.de/selfhtml">SELFHTML</a>.</h4>
<h4>HTML: schnell lernen bei
<a href="http://www.jendryschik.de/html/einfuehrung/anfaenger.html">Jendryschik</a>.</h4>
<br>
<table width="100%" border="0" cellspacing="10" cellpadding="5" bgcolor="#D0D0D0"
bordercolor="#000000"><tr><td></td></tr></table>
<h3>Meine Tipps zur Erstellung einer Web-Seite!</h3>
<h4>Die <u>Startseite</u> zu Ihrer Web-Seite
bei Informationsseiten und Geschäftsseiten:<br>
(diese Tipps gelten nur teilweise für die eigene Homepage)
</h4>
// Mit den tags <ul>, <li>, </li> und </ul> wird eine eine Liste mit "bullet-points" erzeugt.
<ul>
<h4>
<li>
Die Startseite sollte <u>übersichtlich</u> sein und eine leicht intuitiv
verstehbare Menuführung besitzen.<br>
(Wer will schon lange auf einer Seite suchen ?)
</li>
<li>
Die Startseite sollte eine <u>geringe Datenmenge</u> benötigen, welche
zum Darstellen übermittelt werden muss.<br>
(Wer will schon 30 Sekunden warten, bis die Seite aufgebaut ist ?)
</li>
<li>
Webseiten sollten mit einem "web builder" wie 1st Page in HTML-Code erstellt werden
und nicht mit WYSIWYG (What You See Is What You Get) Editoren erstellt werden.<br>
WYSIWYG Editoren fügen oft "unbrauchbaren und unnötigen code" ein
- mit web buildern wie 1st Page wird das vermieden.
</li>
<li>
Man sollte <a href="http://www.w3.org/TR/xhtml1/#Cascading Style Sheets">
CSS (Cascading Style Sheets)</a> einsetzen, um ein einheitlicheres
und schöneres Aussehen auch auf verschiedenen Browsern zu erreichen.
</li>
<li>
Die Webseiten sollten "ansprechend" designed sein.<br>
</li>
</h4>
</ul>
</p>
</body>
</html>
|