Kurzanleitung zum Erstellen von Webseiten (Teil 1) :

© Bernhard Merkert

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 Dateinamenserweiterung ".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 verschiedenen Größen: h1 bis h6
		<h4>HTML - die Sprache des WWW</h4>
		<h4 align=center>Überschrift zentriert</h4>

2.2 Zeilenumbruch usw.:

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

		<p>Absatzbeginn
		Text
		Absatzende</p>

		<p align=justify>Absatz in Blocksatz
		</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=green>grün</font>	<center>Zeilenmitte</center>

Ein farbiger Hintergrund (hier gelb) ist meistens sehr angenehm.
		<body bgcolor=#FFFFCC>  
Weitere Farbkonstanten:
black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white

Farben können mit Hilfe des RGB-Modells festgelegt werden (z.B. color=#FFE4B5), wobei die beiden ersten Hexadezimalzahlen den Rotanteil, die nächsten beiden Hexadezimalzahlen den Grünanteil und die letzten beiden Hexadezimalzahlen den Blauanteil angeben.

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:

  • Aufzählung 1
  • Aufzählung 2
  • Aufzählung 3
	<ul type=disc>
	  <li>Aufzählung 1</li>
	  <li>Aufzählung 2</li>
	  <li>Aufzählung 3</li>
	</ul>
Auch möglich ist: <ul type=square> oder <ul type=circle>

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>