Seitenelemente (im body)

Element	Zeichen in html	Beschreibung

Absatz (Paragraph)	<p>...</p>	Blockelement (Nachfolgendes ist darunter)
Zeilenumbruch	<br />	Macht einen Zeilenumbruch
Inline-Element	<span>...</span>	um Teile des Textes anders zu formatieren
Überschriften	<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>	verschieden groß
Container	<div>...</div>	Blockelement, Bereich zur Strukturierung
Liste ohne Nummern	<ul> <li>...</li> <li>...</li> </ul>	Erzeugt eine Liste ohne Auflistung
Liste mit Nummern	<ol> <li>...</li> <li>...</li> </ol>	Erzeugt eine Liste mit Auflistung
Tabelle	<table> <tr> <th>Bezeichnung Spalte 1</th> <th>Bezeichnung Spalte 2</th> </tr> <tr> <td>Inhalt Spalte 1 Zeile 1</td> <td>Inhalt Spalte 2 Zeile 1</td> </tr> </table>	Tabelle einschalten, Zeile einschalten, Spaltenbezeichnungen ein/aus, Zeile ausschalten, nächste Zeile einschalten, Zellen ein/aus, Zeile aus, Tabelle aus
Bild	<img src=“relativer Pfad zum Bild" />	Einfachste Form der Bilddarstellung. Weitere Parameter folgen...
Link	<a href=“rel. Pfad oder genaue Webadresse">Bezeichnung</a>	Einfachste Form der Linkerstellung. Weitere Parameter folgen...
E-Mail Link	<a href=“mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.">xxx</a>	Ein E-Maillink. Danach öffnet sich das Mailprogramm.
Geschütztes Leerzeichen		Da html nur ein Leerzeichen zwischen 2 anderen Zeichen ausgibt müssen mehrere Leerzeichen hintereinander durch geschützte Leerzeichen erzeugt werden
Präformatierter Text	<pre>...</pre>	HTML pre stellt vorformatierten Text dar. »Vorformatiert«, da der Text vom Browser exakt in der gleichen Weise dargestellt wird, wie er innerhalb des öffnenden und schließenden <pre>-Tags steht – inklusive Leerzeichen, Tabulatoren und Zeilenumbrüchen.

Beispiele

Absatz, Zeilenumbruch, Inline-Element

Code:

<p>Liebe SchülerInnen!</p><p>Das ist ein Beispiel für Absätzte,<br />Zeilenumbrüche<br />und <span style="color: #F90;">Inline-Elemente</span>, bei denen der Text einfach weiterfließt!</p>
Die style-Definition des Inline-Elements kann auch mittels css erfolgen. Dies würde dann folgendermaßen aussehen:
<span class="orange">Inline-Elemente</span>. Im css-File müßte man dann diese Klasse erstellen:
.orange { color: #F90;}

Ergebnis:

Liebe SchülerInnen!

Das ist ein Beispiel für Absätzte,
Zeilenumbrüche
und Inline-Elemente, bei denen der Text einfach weiterfließt!

Überschriften

Code:

Ergebnis:

h1

h2

h3

h4

h5

h6

Container

Code:

<div style="width:300px; height:300px; margin:0 auto; background:#900;">Außen rot
<div style="width:200px; height:200px; margin:0 auto; background:#CC3;">Mitte gelb
<div style="width:100px; height:100px; margin:0 auto; background:#900;">Innen rot
</div>
</div>
</div>

Ergebnis:

oder so:

Code:

<div style="width:100px; height:100px; background:#900; position:absolute; top:17px; left:33px; z-index:1;"></div>
<div style="width:100px; height:100px; background:#CC3; position:absolute; top:34px; left:77px; z-index:2;"></div>
<div style="width:100px; height:100px; background:#900; position:absolute; top:48px; left:128px; z-index:3;"></div>

Achtung: auf sämtliche in diesen Beispielen verwendete style-Deefinitionen wird im Kapitel CSS eingegangen!!

Ergebnis:

Nicht nummerierte Listen

Code:

<ul>
<li>Inhalt 1</li>
<li>Inhalt 2</li>
<li>Inhalt 3</li>
</ul>

Ergebnis:

Inhalt 1
Inhalt 2
Inhalt 3

Nummerierte Listen

Code:

<ol>
<li>Inhalt 1</li>
<li>Inhalt 2</li>
<li>Inhalt 3</li>
</ol>

Ergebnis:

Inhalt 1
Inhalt 2
Inhalt 3

Tabellen

Code:

<table width="100%" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Bezeichnung 1</th>
<th>Bezeichnung 2</th>
<th>Bezeichnung 3</th>
</tr>
<tr>
<td>Inhalt 1/1</td>
<td>Inhalt 2/1</td>
<td>Inhalt 3/1</td>
</tr>
<tr>
<td>Inhalt 1/2</td>
<td>Inhalt 2/2</td>
<td>Inhalt 3/2</td>
</tr>
</table>

Ergebnis:

Bezeichnung 1	Bezeichnung 2	Bezeichnung 3
Inhalt 1/1	Inhalt 2/1	Inhalt 3/1
Inhalt 1/2	Inhalt 2/2	Inhalt 3/2

Bilder

Code

Ergebnis:

Link

Code:

<a href="https://www.basopstpoelten.ac.at">BASOP/BAfEP St. Pölten</a>
In dieser einfachsten Form wird das aktuelle Fenster durch das Zielfenster ersetzt.

<a href="https://www.basopstpoelten.ac.at" target="_blank">BASOP/BAfEP St. Pölten</a>
Hier wird ein neues Fenster/ein neuer Tab im Browser geöffnet. Das alte Fenster bleibt offen.

Ergebnis:

BASOP/BAfEP St. Pölten

E-Mail Link

Code:

Fragen bitte an das <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.">Team</a>

Ergebnis:

Fragen bitte an das Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein..

Geschütztes Leezeichen

Code:

Das          
  ist ein größerer Abstand!

Ergebnis:

Das ist ein größerer Abstand!

Der pre-Tag

Code:

<pre>Das 	ist 	ein 	Text 	mit 	Tabulator!</pre>

Ergebnis:

Das 	ist 	ein 	Text 	mit 	Tabulator!

Seitenelemente (im body)

Beispiele

Absatz, Zeilenumbruch, Inline-Element

Code:

Ergebnis:

Überschriften

Code:

Ergebnis:

h1

h2

h3

h4

h5

h6

Container

Code:

Ergebnis:

Code:

Ergebnis:

Nicht nummerierte Listen

Code:

Ergebnis:

Nummerierte Listen

Code:

Ergebnis:

Tabellen

Code:

Ergebnis:

Bilder

Code

Ergebnis:

Link

Code:

Ergebnis:

E-Mail Link

Code:

Ergebnis:

Geschütztes Leezeichen

Code:

Ergebnis:

Der pre-Tag

Code:

Ergebnis:

Index