Seitenelemente (im body)
logo5

Seitenelemente (im body)

ElementZeichen in htmlBeschreibung
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
&nbsp;
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:
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
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:
  1. Inhalt 1
  2. Inhalt 2
  3. 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 1Bezeichnung 2Bezeichnung 3
Inhalt 1/1 Inhalt 2/1 Inhalt 3/1
Inhalt 1/2 Inhalt 2/2 Inhalt 3/2

 

Bilder

Code
<img 
src=“images/bilder/TdoT.jpg"
alt="TdoT" width="142" height="201">
Ergebnis:
TdoT

 

Link

Code:
<a href="http://www.hlwpressbaum.at">HLW Pressbaum</a>
In dieser einfachsten Form wird das aktuelle Fenster durch das Zielfenster ersetzt.

<a href="http://www.hlwpressbaum.at" target="_blank">HLW Pressbaum</a>
Hier wird ein neues Fenster/ein neuer Tab im Browser geöffnet. Das alte Fenster bleibt offen.
Ergebnis:

 

E-Mail Link

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

 

Geschütztes Leezeichen

Code:
Das &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
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!
Mehr in dieser Kategorie: « Basisaufbau einer html-Seite