Kurzanleitung zum Erstellen von Webseiten (Teil 1) :


Der Quelltext eines HTML-Dokuments ist ein ganz normaler ASCII-Text, der mit jedem beliebigen Editor bearbeitet werden kann. Die Namen der Dateien für die HTML-Dokumente tragen die Dateinamenserweiterungen .htm oder .html.

1. Grundgerüst einer HTML-Datei ( HyperText Markup Language )

		<html>
		  <head>
		    <title>Titel</title>
		  </head>
		  <body>
		     Text, Verweise auf Bilder, Verweise auf andere WWW-Seiten usw.
		     (Alles was hier steht wird später im Browser angezeigt.)
		  </body>
		</html>

Alle HTML-Befehle stehen in sog. Tags. Die Tags sind durch spitze Klammern gekennzeichnet. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text dazwischen ist der "Gültigkeitsbereich" für die betreffenden Tags.
Groß-/Kleinschreibung spielt keine Rolle.

2. Einfache Textauszeichnungen

2.1 Überschriften:

 Überschriften gibt es in 6 verschieden Größen: h1 bis h6 
		<h4>HTML - die Sprache des WWW</h4>

2.2 Zeilenumbruch usw.:

Normaler Text wird mit automatischem Zeilenumbruch im Browser dargestellt.
Gestaltung mit Absätzen und festem Zeilenumbruch ist möglich. 
		<p>Absatzbeginn
		<br>fester Zeilenumbruch
		Absatzende</p>

		<!-- Kommentare werden im Browser nicht angezeigt  -->
Hier erfolgte eine vorformatierte Texteingabe:
      Jan.     12     24     56
      Febr.     8      7     34
      März     11     78      5 
      ( in einer nicht-proportionalen Schrift )

		<pre> 
			Jan.     12     24     56
			Febr.     8      7     34
			März     11     78      5 </pre>

2.3 Linien :

Einen Seitenwechsel gibt es nicht; stattdessen gibt es waagrechte Linien; ( auch verkürzt und/oder dicker )
Möglich sind auch farbige Linien.  
		<hr>
		<hr width=50% size=6>
		<hr color=red>

2.4 Hervorhebungen :

Manche Wörter sind unterstrichen oder sind hervorgehoben in Fettschrift) oder beides.
Manche Wörter sind in kursiver Schrift (Italic) und manche in grüner Farbe formatiert.
Auch Darstellung in der Zeilenmitte ist möglich.
		<u>unterstrichen</u>			<b>hervorgehoben</b>
		<u><b>beides</b></u>			<i>kursiv</i>
		<font color="#339933">grün</font>	<center>Zeilenmitte</center>

Ein farbiger Hintergrund (hier gelb) ist meistens sehr angenehm. 
		<body bgcolor="FFFFCC">

Der erste Buchstabe eines Absatzes kann groß (und rot) ausgeben werden.

Eine andere Schriftart "z. Bsp. Arial" oder " "Courier" ist auch möglich 
		<font color="#FF0000" size=+2>D</font>
		<font face="Arial,Sans-serif">Arial</font>
		<font face="Courier New">Courier</font>

2.5 Sonderzeichen:

Beispiele : © & ä ü Ö Å π →

hochgestellt:    a2 + b2 = c2
tiefgestellt:    SO3 + H2O → H2SO4 
		&copy; &amp; &auml; &uuml; &Ouml; &Aring; &#960; &#8594; 
		<sup> hoch </sup>
		<sub> tief </sub>

4. Listen

4.1 ungeordnete Liste:

	<ul type=square>
	  <li>Aufzählung 1</li>
	  <li>Aufzählung 2</li>
	  <li>Aufzählung 3</li>
	</ul>

4.2 nummerierte Listen:

  1. Listeneintrag, bekommt ein "A." vorangestellt
  2. Listeneintrag, bekommt ein "B." vorangestellt
  3. Listeneintrag, bekommt ein "C." vorangestellt
  1. Listeneintrag, bekommt "200." vorangestellt
  2. Listeneintrag, bekommt "201." vorangestellt
  3. Listeneintrag, bekommt "202." vorangestellt
  1. Listeneintrag, bekommt ein "I." vorangestellt
  2. Listeneintrag, bekommt ein "II." vorangestellt
  3. Listeneintrag, bekommt ein "III." vorangestellt
  4. Listeneintrag, bekommt ein "IV." vorangestellt 
	<ol type=A>
	  <li>Listeneintrag, bekommt ein "A." vorangestellt</li>
	  <li>Listeneintrag, bekommt ein "B." vorangestellt</li>
	  <li>Listeneintrag, bekommt ein "C." vorangestellt</li>
	</ol>

	<ol start=200>
	  <li>Listeneintrag, bekommt "200." vorangestellt</li>
	  <li>Listeneintrag, bekommt "201." vorangestellt</li>
	  <li>Listeneintrag, bekommt "202." vorangestellt</li>
	</ol>

	<ol type=I>
	<li>Listeneintrag, bekommt ein "I." vorangestellt</li>
	<li>Listeneintrag, bekommt ein "II." vorangestellt</li>
	<li>Listeneintrag, bekommt ein "III." vorangestellt</li>
	<li>Listeneintrag, bekommt ein "IV." vorangestellt</li>
	</ol>

5. Tabellen (mit Gitternetzlinien)

Berlin   Hamburg München
Spree Elbe Isar
Havel Alster Amber

(Außenrahmendicke=10; Dicke der Gitternetzlinien=5; Abstand der Zellendaten zum Zellenrand=8; Gesamtbreite=70%; Hintergrundfarbe=gelb; Spalten=3; Zeilen=3) 

	<table BORDER=10 CELLSPACING=5 CELLPADDING=8 WIDTH="70%" BGCOLOR="#FF80C0" >
	  <tr>
	     <th>Berlin</th>
	     <th>Hamburg</th>
	     <th>München</th>
	  </tr>
	  <tr>
	     <td>Spree</td>
	     <td>Elbe</td>
	     <td>Isar</td>
	  </tr>
	  <tr>
	    <td>Havel</td>
	    <td>Alster</td>
	    <td>Amber</td>
	  </tr>
	</table>


mit freundlicher Genehmigung von Bernhard Merkert