Start
logo5
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:

HLW Pressbaum

HLW Pressbaum

 

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!

Metatags dienen den Suchmaschinen zum Katalogisieren und Einordnen der Seite. Hier sollte man sich besonders Mühe geben, da ein guter Platz in den Suchmaschinen (genannt Ranking) für eine größere Besucherzahl sorgt.

Die wichtigsten Metatags:

<title> Ein aussagekräftiger Titel </title>
<meta charset="utf-8">
<meta name="author" content=" " />
<meta name="publisher" content=" " />
<meta name="copyright" content=" " />
<meta name="keywords" content=" " />
<meta name="description" content=" " /> 
<meta name="revisit" content="After 30 days" />
<meta name="robots" content="INDEX,FOLLOW" />
Kurze Erklärung zu den einzelnen Metatags:
Titel

Beinhaltet Titel oder Name der Homepage. Wird gerne vergessen! Unbedingtes Muss, ansonsten outest du dich als blutiger Laie.

charset

Über diese Angabe wird der Zeichensatz definiert. Durch die Angabe kommen die Browser und Suchmaschinen auch mit Umlauten zurecht. Wichtig: Der Editor muss richtig eingestellt sein!! Bei PSPad: Format -> utf-8.

author, publisher, copyright

Was soll man dazu noch sagen?

keywords:

Alle Begriffe und Wortkombinationen, unter denen die Homepage gefunden werden soll, sollten hier auftauchen. Die Begriffe werden mit Komma oder Semikola getrennt und kein Begriff sollte öfters als 3 mal vorkommen. Es empfiehlt sich, bei den Schlüsselwörtern sowohl die Schreibweise mit äöüß als auch mit ae, oe, ue, ss zu nehmen.

description:

Eine kurze Beschreibung Ihrer Homepage, die nicht länger als 200 Zeichen sein sollte. Längere Beschreibungen werden von vielen Suchmaschinen nicht akzeptiert.

index:

Hier geben Sie der Suchmaschine Anweisung, ob sie auch Ihre weiteren Seiten aufnehmen soll, also nicht nur die Startseite. Dabei gibt es 4 Varianten, die teilweise noch gemischt werden können.

  • index - die betroffene Seite soll aufgenommen werden
  • noindex – Seite nicht aufnehmen
  • follow - alle Links auf der Homepage weiterverfolgen und diese auch aufnehmen
  • nofollow – die Links unberücksichtigt lassen.

Und natürlich kann gemischt werden. Beispiel: "index, follow" oder "index, nofollow"

revisit

hier kann eine Tagesangabe gemacht werden, nach der die Suchmaschine wieder vorbeischauen kann, um neue Inhalte aufzunehmen. Beispiel "after 30 days"

Die Metatags haben ihren Platz im HTML-Code zwischen <head> und </head>.

 

Ansicht-der-Webseite5 Schritte:

    1. Vorinformationen
    2. html einschalten
    3. head
    4. body
    5. html ausschalten

 

1. Vorinformationen

<!DOCTYPE html> ... mehr ...

2. html einschalten

<html>

3. Head

<head>
<meta charset="UTF-8"> Die metatags dienen dazu, Suchmaschienen beim Auffinden der Seite zu helfen oder um Zeichencodierungen festzulegen
<meta name="description" content="Free Web tutorial">
<meta name="keywords" content="HTML,CSS,">
<meta name="author" content="Stefan Jeschek">
<title>Untitled Document</title>
<link href=“vokabel.css“ rel="stylesheet" type="text/css" /> Den Titel des css-Files kannst du frei wählen!
</head>

4. Body

<body>
</body>

5. html ausschalten

</html>

also:

<!DOCTYPE html> Dies ist eine Dokumenttyp-Deklaration, das genügt vorerst!
<html>
<head>
<meta charset="UTF-8"> Bestimmt den Zeichensatz, wichtig für Umlaute!
<meta name="description" content="Free Web tutorial"> Beschreibung
<meta name="keywords" content="HTML,CSS,"> Schlagwörter
<meta name="author" content="Stefan Jeschek"> der Autor
<title>Beschreibung der Seite</title> Seitentitel der oben im Browserfenster steht
<link href=“vokabel.css“ rel="stylesheet" type="text/css" /> Den Titel des css-Files kannst du frei wählen!
</head>
<body>
</body>
</html>

 

DOCTYPE-Definition - erste Zeile jeder Website

Über die DOCTYPE-Definition teilen Sie dem Webbrowser mit, was er in der folgenden Datei erwarten kann und welche HTML-Befehle zulässig sind. Im Klartext, was ist zulässig und was wäre falsch. Wir benötigen diese Zeile, damit wir bald unsere erstellten HTML-Seiten von einem Programm automatisch validieren (überprüfen) lassen können um schnell aus den eigenen Fehler (und aus den Fehlern anderer) richtiges HTML lernen zu können. Für den Anfang ist es in Ordnung, wenn Sie diese Zeile exakt so übernehmen. Achten Sie beim Übernehmen auf Groß- und Kleinschreibung. Am besten einfach kopieren.

Anmerkung: In Wahrheit gibt es Varianten dieser ersten Zeile. Aber zum Lernen von HTML ist es ideal sich am aktuellsten Standard zu halten, der auch keine Kompromisse zulässt. Es gibt veraltete DOCTYPE-Varianten und auch „Kompromiss-„DOCTYPE-Varianten. Daher wird im HTML Kurs nur diese STRICT-Variante genutzt. Dadurch fallen alle Fehler sofort auf und man gewöhnt sich nichts Falsches an.