<html><head><title> -flexdax.org - HTML-Kurs</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type="text/css" href="a.css">
</head><body>
<br>
<table class="tnav" cellspacing=0><tr><td colspan=2>
<table class="ttl"><tr><td>
<strong> FLEXDAX<sup>™</sup>'s HTML- und CSS-KURS</strong>     
<a href="index.html" class="bl">Startseite</a> |
<a href="hk-inhalt.html" class="bl">Inhaltsverzeichnis</a> |
<a href="hk-vsion.html" class="bl">Versionen</a> |
</td></tr></table>
</td></tr><tr><td class="tnavt" width=90>HTML I</td><td>
<a href="start.html" class="nav">Einführung </a>|
<a href="aufbau.html" class="nav">Grundgerüst </a>|
<a href="text.html" class="nav">Text</a> |
<a href="bilder.html" class="nav">Bilder</a> |
<a href="links.html" class="nav">Links</a> |
<a href="farben.html" class="nav">Farben </a> |
<a href="tabellen.html" class="nav">Tabellen</a> |
</td></tr><tr><td class="tnavt">HTML II</td><td>
<a href="tln-ltn.html" class="nav">Trennlinien , Listen</a> |
<a href="hintergrund.html" class="nav">Hintergrundbilder</a> |
<a href="frames.html" class="nav">Frames</a> |
<a href="formulare.html" class="nav">Formulare</a> |
<a href="metatags.html" class="nav">Meta - Tags</a> |
</td></tr><tr><td class="tnavt">CSS</td><td>
<a href="css-start.html" class="nav">Einführung</a> |
<a href="css-definieren.html" class="nav">Style Sheets definieren</a> |
<a href="css-angaben.html" class="nav">einzelne Angaben</a> |
</td></tr><tr><td class="tnavt">PLUS</td><td>
<a href="hilfreiches.html" class="nav"> Hilfreiches</a> |
<a href="software.html" class="nav"> Software / Tools</a> |
<a href="hk-links.html" class="nav">weiterführende Verweise</a> |
</td></tr></table>
<table class="ttl2" width="100%"><tr><td>
<span class="ttl3">HTML I :
Einführung</span>
  <tt class="ttdef">||</tt>  
<a href="#1" class="bl"> HTM-was?</a> •
<a href="#1b" class="bl"> Software ?</a>
<a href="#2" class="bl"> Tags</a> •
<a href="#3" class="bl"> Attribute</a> •
<a href="#4" class="bl"> Sonderzeichen</a> •
<a href="#5" class="bl"> Kommentare</a> •
<a href="#6" class="bl"> Einbinden von Dateien ( Pfadangabe )</a>
</td></tr></table>
<!-- ENDE DATEIKOPF -->
<a name="1"><h3>HTM-was?</h3></a>
<p>HTML steht für " <strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage " .<br>
Webseiten werden in der Seitenbeschreibungssprache HTML geschrieben .<br>
HTML-Dokumente erkennt man an der passenden Endung ( .htm oder .html - die Endung .htm ist DOS - kompatibel ) .<br>
HTML-Dokumente sind reine , uncodierte Textdokumente , die mit dem Standard - Editor ( Notepad bei Windows ) geöffnet und bearbeitet werden können .<br></p>
<p>Webseiten bestehen also im Grunde aus reinem Text . Das Wunderbare an Sprachen wie HTML ist , dass die Programmierung nicht verschlüsselt ist . Wie eine bestimmte Webseite aufgebaut bzw. programmiert ist , kann deshalb sehr leicht eingesehen werden . Beim Internet Explorer könnt ihr dafür z.B. auf 'Ansicht > Quellcode anzeigen' gehen [ schneller : Rechtsklick > Quellcode anzeigen , beim Navigator ziemlich identisch ) .<br>
Sehen wir uns einen solchen sog. Quellcode einmal an : </p>
<iframe src="source.txt" width="100%" height="350">
Dein Browser kann leider keine iFrames darstellen . <strong>Alternative</strong> : <a href="source.txt">Öffnen der Datei in diesem Fenster .</a></iframe>
<br>
<p>Auf den ersten Blick mag das alles recht kompliziert erscheinen . Glaubt mir , HTML und auch CSS sind <strong>einfach</strong> . Wenn ihr die nächsten sieben Kapitel <span class="smll" id="ltr">[ bis und mit ' Trennlinien , Listen ' ]</span> durcharbeitet und versteht , werdet ihr vielleicht 90% dieses Quellcodes mühelos lesen bzw. selber anwenden können .</p>
<br><br>
<a name="1b"><h3>Software ?</h3></a>
<p>Wie schon erwähnt , können HTML - Dokumente mit jedem reinem Texteditor erstellt werden . Unter Windows ist der standardmässige Texteditor das <strong>Notepad</strong> . Öffnet ihr ein Dokument mit der Endung .txt (z.B. Readme.txt) , wird es im Notepad geöffnet . Beim Internet Explorer werden HTML-Dokumente darin geöffnet , falls ihr die Option 'Quelltext anzeigen' ausgewählt habt . Das Notepad lässt sich ausserdem über 'Start > Programme > ... > Notepad' öffnen , u.U. schneller noch mit 'Start > Ausführen > notepad' ... . oder ihr geht in die 'MS-DOS-Eingabeaufforderung' und gebt 'notepad.exe' ein ... oder ... letztens übrigens einen Bericht gelesen , in dems drum ging , dass 'durchschnittliche' User mit eher wenig Kenntnissen sich gerade an dieser Vielfalt von Wegen , einen bestimmten Punkt zu erreichen , sehr stossen bzw. es verwirrend finden ... soviel zum Thema 'Benutzerfreundlichkeit' ;) .<br>
Winword und ähnliche Textverarbeitungsprogramme sind total ungeeignet , da sie den Text codieren ( öffnet mal ein Word - Dokument im Notepad ... ) .
</p>
<p>Es gibt jedoch auch spezielle HTML - Editoren , die einem viel Arbeit ersparen können . Unter <a href="http://www.meybohm.de" target="_blank"> www.meybohm.de</a> gibt es z.B. einen ziemlichen guten HTML - Editor ( Freeware ) . </p>
<p class="smll">
Auf sog. <span title="What You See Is What You Get"> WYSIWYG-Editoren</span> wie Frontpage oder Mozilla sollte verzichtet werden - diese generieren den HTML-Code selber , zwangsläufig mit dem Resultat von schludrigen Seiten ( umständlicher Code > ewige Ladezeiten und Neigung zum Browser-Absturz ) . Computer sind halt einfach blöde . Oder anders gesagt : Computer sind fähig , Rechenoperationen durchzuführen - zu mehr nicht . Bei der Komplexität von HTML und Co. ist jeder 'intelligente' Editor von vornherein zum Scheitern verurteilt <span class="smll" id="ltr">[ wie gesagt , HTML ist einfach :]</span> . Letzten Endes kommt es auch darauf an , wie hoch man die Messlatte setzt . Manche finden sich mit dem ab , was für andere schlicht inakzeptabel ist .<br>
Zudem ist es einfach ein solch erhabenes Gefühl , Herr über jedes Yota ( oder Bit ? :) zu sein , sprich den HTML-Code halt selbst zu schreiben ... ähmm ... ;) </p>
<p>Eine Zusammenstellung von weiteren nützlichen Programmen ( Grafik , Verwaltung , ... ) findet ihr auf der Seite <a href="software.html">Software / Tools </a>.</p>
<br>
<a name="2"><h3>Tags</h3></a>
Die einzelnen Programmier-Befehle innerhalb HTML nennt man <strong> Tags </strong> .<br>
Tags stehen immer innerhalb von <tt>< ></tt> - Klammern . <br><br>
die meisten Tags sind <strong>Container-Tags</strong> - sie schliessen ein bestimmtes Element ein ( contain = <i>engl.</i> einschliessen ) .<br>
Das abschliessende Tag ist mit dem einleitenden bis auf einen einleitenden Schrägstrich / identisch .<br><br>
<strong>Beispiele:</strong><br>
<p> dies ist ein Absatz , eingeschlossen in einem <tt><p>...</p></tt> -Tag ( p = <i>engl.</i>paragraph = Absatz ) .</p>
<ul class="ul">
<li>Dies ist eine ungeordnete Liste -</li>
<li>Anfang und Ende der Liste werden mit Hilfe des <tt><ul>...</ul></tt> - Tags definiert ( ul = unordered list ) .</li>
<li> jeder einzelne Listenpunkt kommt innerhalb eines <tt><li>...</li></tt> - Tags zu stehen . </li>
</ul>
<br>
Wie im letzten Beispiel ersichtlich ist , können Tags miteinander <strong>verschachtelt</strong> werden :<br><br>
<table class="bsp"><tr><td>
<h4>Beispiel :</h4>
<tt><strong></tt> HTML - <tt><i><u></tt>die<tt></u></tt> Sprache<tt></i></tt>für<tt></strong></tt>
Webseiten .
<h5>ergibt :</h5>
<strong> HTML - <i><u>die</u> Sprache </i>für</strong>
Webseiten .
</td></tr></table>
<br><br>
Neben den Container - Tags gibt es auch einige wenige <strong>Stand-Alone Tags</strong> , z.B <tt><br></tt> ( Zeilenumbruch ) oder <tt><img src="[pfad]"></tt> ( Einbinden einer Grafik ) .
<a name="3"><h3>Attribute</h3></a>
meistens lassen sich noch gewisse Attribute innerhalb des Tags hinzufügen , um den HTML-Befehl näher zu spezifizieren :<br><br>
<table class="bsp"><tr><td>
<h4>Beispiel :</h4>
<tt><p <strong>align="right"</strong>></tt> Dies ist ein Textabsatz , der rechtsbündig ausgerichtet wird .<tt></p></tt>
<br><br>
<tt><font <strong>color="#FF0000" size="-1"</strong>></tt>Diese Schrift erscheint rot mit der Grösse -1 .<tt></font></tt>
<br><br>
<h5>ergibt :</h5>
<p align="right"> Dies ist ein Textabsatz , der rechtsbündig ausgerichtet wird .</p>
<font color="#FF0000" size="-1">Diese Schrift erscheint rot mit der Grösse -1 .</font>
</td></tr></table>
<table class="bsp"><tr><td>
<h4>Beispiel :</h4>
<tt><ul <strong> type=square</strong>><br>
<li></tt> Dies ist eine ungeordnete Liste <tt>.
</li><br>
<li></tt> Im einleitenden <tt><ul></tt> - Tag wurde mit Hilfe des Attributs <tt>type=square</tt> folgendes festgelegt:<tt></li><br>
<li></tt>Jeder Listenpunkt beginnt mit einem Rechteck statt per Voreinstellung mit einem Kreis.<tt></li><br>
<li></tt> Das war auch schon alles .<tt></li></tt><br>
<tt></ul></tt>
<h5>ergibt :</h5>
<ul type=square>
<li> Dies ist eine ungeordnete Liste .</li>
<li> Im einleitenden <tt><ul></tt> - Tag wurde mit Hilfe des Attributs <tt>type=square</tt> folgendes festgelegt</li> :
</li>
<li>Jeder Listenpunkt beginnt mit einem Rechteck statt per Voreinstellung mit einem Kreis.</li>
<li> Das war auch schon alles .</li>
</ul>
</td></tr></table>
<a name="4"><h3>Sonderzeichen</h3></a>
<p>Damit Text auch bei Anwendern mit anderen Zeichensätzen ( also z.B. bei einem Amerikaner oder einer Finnin ) korrekt dargestellt wird , müssen bestimmte 'spezielle' Zeichen mit Hilfe von Sonderzeichen notiert werden . </p>
<p>Die wichtigsten Sonderzeichen betreffend der deutschen Sprache sind :</p>
<table><tr><td width="33%"><strong>Zeichen</strong>
</td><td width="33%"><strong>'normale' Definition</strong>
</td><td><strong>Bezeichnung mit <a href="http://www.unicode.org">Unicode</a></strong>
</td></tr><tr><td>ä</td><td>&auml;</td><td>#&228;
</td></tr><tr><td>ö</td><td>&ouml;</td><td>#&245;
</td></tr><tr><td>ü</td><td>&uuml;</td><td>#&228;
</td></tr><tr><td>ß</td><td>&szlig</td><td>#&228;
</td></tr><tr><td colspan="3">
<br>
<p>Beim ä , ö und ü seht ihr sicher die Gemeinsamkeiten : bis auf einen Buchstaben ( a,o und u ) sind die Definitionen ja gleich (<strong>& uml;</strong> ) . Für die Grossbuchstaben ( Ä , Ö und Ü ) einfach die kleinen individuellen Buchstaben durch grosse ersetzen , also z.B &<strong>O</strong>uml; für Ö .<br> Sehr wichtig ist daneben auch noch das <strong>Leerzeichen</strong> , da mehr als ein Leerzeichen am Stück innerhalb von HTML nicht definiert wird .</p>
</td></tr><tr><td> ( Leerzeichen )</td><td>&nbsp;</td><td>#&160;
</td></tr><tr><td colspan="3">
<br>
<p>Wenn ihr z.B. mit reinem HTML einen solchen Titel haben wollt :<br>
E I N T I T E L M I T G R O S S E N A B S T Ä N D E N<br><br>
, kann der Quellcode z.B. lauten:
E I N&nbsp; T I T E L&nbsp; M I T&nbsp; G R O S S E N&nbsp; A B S T Ä N D E N<br>
</p>
<p>Oder wenn ihr ein eingerücktes Objekt einbinden wollt , könnt ihr das z.B. folgendermassen erreichen :</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;Eingerücktes Objekt .</p>
<h5>ergibt :</h5>
<p> Eingerücktes Objekt .</p>
<p>Elegantere Lösungen bezüglich der Positionierung von Elementen sind der Einsatz von <a href="tabellen.html">Tabellen</a> , <a href="css-start.html">CSS</a> sowie Angaben zur Breite und Ausrichtung ( <tt>width , align</tt> ) .</p>
<hr size="1">
<p>Wenn ihr einen HTML - Editor wie <a href="http://www.meybohm.de/">Ulli Meybohms HTML EDITOR</a> verwendet , brauchen euch abgesehen vom Leerzeichen ( das bei diesem Editor auch mit Ctrl + Leertaste eingefügt werden kann ) die Sonderzeichen vorerst nicht gross zu kümmern : Per Voreinstellung werden alle erforderlichen Zeichen umgewandelt - am Bildschirm jedoch normal dargestellt [ innerhalb des Editors ] , so dass man das Ganze noch vernünftig lesen kann ;) .</p>
<p>Eine weitaus vollständigere Auflistung der Sonderzeichen gibt es bei SELFHTML : <a href="http://www.teamone.de/selfhtml/the.htm">http://www.teamone.de/selfhtml/the.htm</a></p>
</td></tr></table>
<br>
<hr size="1">
<a name="5"><h3>Kommentare</h3></a>
kann man innerhalb von <tt><!--</tt> und <tt> --></tt> definieren .<br>
<table class="bsp"><tr><td>
<h4>Beispiel :</h4>
<tt><!-- <span class="vlu">Hier fängt Absatz # 21 an : Zwerchen-45.BNSZ-Treffen</span>-->
<br><p> <strong></tt> ( Zwerchen ) - zb - <tt></strong></tt>
In Zwerchen ist es heute zum 45 . nationalen Treffen der Blaunasen-Schafzüchter gekommen . Alle genossen die gute Stimmung , und sowieso ... ;]<tt></p></tt>
<h5>ergibt :</h5>
<!-- Hier fängt Absatz # 21 an : Zwerchen-45.BNSZ-Treffen-->
<p> <strong>( Zwerchen ) - zb - </strong>
In Zwerchen ist es heute zum 45 . kantonalen Treffen der Blaunasen - Schafzüchter gekommen . Alle genossen die gute Stimmung , und sowieso ... ;]</p>
</td></tr></table>
Wie ersichtlich ist , dienen Kommentare nur der Orientierung der Person , welche den Quellcode liest bzw. bearbeitet . Im 'normalen' Darstellungsmodus via Browser sind Kommentare nicht sichtbar .<br>
<a name="6"><h3>Einbinden von Dateien ( Pfadangabe )</h3></a>
Dateien und Adressen können innerhalb eines HTML-Dokumentes auf zwei Arten eingebunden werden : mittels <strong>relativer</strong> oder <strong> absoluter</strong> Pfadangabe.<br><br>
<strong>absolute Pfadangabe</strong><br>
<p> ist am einfachsten . Hierbei wird die gesamte Adresse eingefügt , mit 'http://' o.ä. :</p>
<table class="bsp"><tr><td>
<h4>Beispiel :</h4>
<tt><a href=<span class="vlu">"http://www.flexdax.org/htmlkurs/links.html"</span>></tt> HTML I : Links<tt></a></tt><br>
<h5>ergibt:</h5>
<a href="http://www.flexdax.org/htmlkurs/links.html"> HTML I : Links</a>
</td></tr></table>
<br>
<ul class="ul">
<li>Eine absolute Pfadangabe ist nötig , falls sich die referenzierte Datei auf einer anderen Domain befindet .</li>
</ul>
<p><strong>relative Pfadangabe</strong><br></p>
<p>Bei einer relativen Pfadangabe wird die Adresse der betreffenden Datei jeweils im Verhältnis zum einzelnen Dokument notiert . Muss auf eine hierarchisch höhere Verzeichnisebene gewechselt werden , notiert man zwei Punkte ( .. ) :</p>
<table class="bsp"><tr><td>
<h4>Beispiele :</h4>
<tt><a href=<span class="vlu">"links.html"</span>></tt> HTML I : Links<tt></a>
<br>
<img src=<span class="vlu">"xild01.jpg"</span> width=<span class="vlu">"200"</span> height=<span class="vlu">"133"</span>>
<br>
<a href=<span class="vlu">"../index.html"</span>></tt>flexdax.org<tt></a>
<br>
<img src=<span class="vlu">"../m-net/bjork/inav.jpg"</span>>
</tt>
<h5>ergibt :</h5>
<a href="links.html"> HTML I : Links</a>
<img src="xild01.jpg" width="200" height="133">
<a href="../index.html">flexdax.org</a>
<img src="../m-net/bjork/inav.jpg">
</td></tr></table>
<p>Vorteile einer relativen Einbindung :</p>
<ul class="ul">
<li>
Bei einer Verschiebung der Daten ( andere Domain etc. ) muss nicht jedes einzelne Dokument nachträglich abgeändert werden . </li>
<li>
Ausserdem ist eine relative Adressierung die einzige vernünftige Möglichkeit , das Projekt auch lokal ( = von der eigenen Festplatte aus ) auszuprobieren . Bei einer absoluten Adressierung ist das Testen und 'Surfen' auf den erstellten Seiten kaum möglich . </li>
</ul>
<!-- ANFANG FUSSZEILE -->
<br><br>
<table class="db" cellspacing=0 cellpadding=6 width="100%"><tr><td align="right" colspan="2" class="wk">
<span class="wtk"> | </span>
<strong>Weiter zum nächsten Kapitel : </strong>
<a href="aufbau.html">Grundgerüst</a>
<span class="wtk"> | </span></td></tr><tr><td class="fz">
© 2000 <a href="mailto:f-dax@flexdax.org">flexdax</a>   </td><td align=right class="fz">
Aktuelle URL :<a href="../index.html"> http://www.flexdax.org/</a>htmlkurs/start.html
</td></tr></table></body></html>