ReLast - Klassik

JavaScript ist deaktiviert.
Möglicherweise haben Sie JavaScript in Ihrem Browser deaktiviert oder Ihr Browser hat aktive Inhalte automatisch gefiltert. JavaScript ist für einige Bereiche auf dieser Webseite notwendig um alle Funktionen anbieten zu können.
Die Informationen dieser Webseite werden aber trotzdem zur Verfügung stehen.

Hyptertext Markup Language

Kommentare

Für HTML gibt es keine eigene Kommentarsyntax. Statt dessen finden die Regeln für SGML anwendung. Ein Kommentar beginnt mit "--" und endet ebenso mit "--". SGML-Kommentare dürfen aber nur im SGML-Kontext (als Element) auftauchen. Diese Elemente werden gebildet mit <! (SGML: MDO) und > (SGML: MDC). Dadurch ergibt sich:

<!-- ... -->

Um den Unterschied deutlich zu machen: Es ist ebenfalls zulässig leere SGML-Elemente zu bilden: "<!>". Wohingegen man auf einzelne Vorkommen von "--" in Kommentaren verzichten muss, aber umgekehrt durchaus "-- --" verwenden kann. Dabei ist zu beachten das es sich dann tatsächlich um die Trennung in zwei oder mehr Kommentare handelt. Zum Beispiel:

<!-- Kommentar -- -- noch ein Kommentar -- -- noch ein Kommentar -->

Zu beachten ist dieser Umstand insbesondere auch bei eingebundenen Programmiersprachen. Es wird vielfach empfohen JavaScript in Kommentare zu fassen. Wird nun aber innerhalb des JavaScript ein Decrement verwendet (z.B. "i--;") führt das zu einem interpretierten Ende des Kommentars. Die folgenden Zeichen bis zum ">" befinden sich somit zwischen dem Kommentarende und dem Ende des SGML-Elements, die Effekte dieser Zeichen sind undefiniert, die Syntax ist auf jeden Fall inkorrekt. Um das zu vermeiden sollte der JavaScript-Code, wenn man ihn in einem Kommentar verpacken will, entsprechend geschrieben werden (z.B. "i = i - 1;"). Alternativ sei auch auf die Einbindung von JavaScript in XHTML als CDATA verwiesen.

Einbinden von Scripten in XHTML

CSS

<style type="text/css">
<![CDATA[
/* Hier kommen jetzt die CSS-Regeln hinein */
]]>
</style>

JavaScript

<script type="text/javascript"> 
<![CDATA[  
// Hier kommt jetzt das Script hinein.
]]> 
</script>

Grundgerüst

XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>...</title>
	</head>
	<body>
		<h1>...</h1>
	</body>
</html>

HTML 5

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>...</title>
	</head>
	<body>
		<h1>...</h1>
	</body>
</html>

Elemente

Dokumenten-Elemente

Dokument (html)

<html>...</html>

Header (head)

<head>...</head>

Content (body)

<body>...</body>

Frames

<iframe src="../iframeinhalt.html" width="50%" height="400" name="iframename">
	<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen. Sie können die Seite über folgenden Link aufrufen: <a href="../iframeinhalt.html">iframeinhalt</a></p>
</iframe>

Frameset

Wurde in HTML5 deprecated / unerwünscht

<frameset>...</frameset>

Inline-Elemente

Text fettgedruckt

<b>...</b>

Text kursiv

<i>...</i>

Text unterstrichen

<u>...</u>

Text durchgestrichen

<s>...</s>

Zitat

<q>...</q>

Tastatureingabe

<kbd>...<kbd>

Quelltext

<code>...</code>

Bilder

<img src="bild.jpg" alt="Bildbeschreibung" />

<img src="bild.jpg" width="250" height="250" alt="Bildbeschreibung" />

Verweis-Sensitiv

<map name="Landkarte">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz" />
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden" />
</map>
<img src="karte.png" width="500" height="500" alt="Karte" usemap="#Landkarte">

Verweise

Verweise
```
<a href="ankername">...</a>
```

Verweise mit Ziel

<a target="iframename" href="ankername">...</a>

(geht auch für eine ganze Datei, durch Angabe im "head")

<head><base target="_blank" /></head>

Anker definieren (alte Form, HTML)
```
<a name="ankername">...</a>
```
Anker definieren (neue Form, XHTML, geht generell mit ID in allen Elementen, es muss also nicht mehr "a" verwendet werden, es kann auch die id einer Überschrift verwendet werden)
```
<a id="ankername">...</a>
```
Anker definieren (kompatible Form, HTML und XHTML, aber nur bis XHTML 1.0, ab Version 1.1 ist "name" hierfür dann verboten)
```
<a name="ankername" id="ankername">...</a>
```

Anker anspringen

<a href="#ankername">Springe zu Anker</a>

<a href="/pfad/zur/datei#ankername">Springe zu Anker</a>

Universelles Inline-Element

<span>...</span>

Block-Elemente

Bereich (div)

<div>...</div>

Absatz (p)

<p>...</p>

Zitat (blockquote)

<blockquote>...</blockquote>

Vorformatierter Text (pre)

<pre>...</pre>

Listen

unsortierte Listen (unordered list)

<ul>...</ul>

sortierte Listen (ordered list)

<ol>...</ol>

Listenelement

<li>...</li>

Tabellen

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

Formulare

form

<form action="target.php" method="post">...</form>

method="post"
method="get"

input

<input id="..." name="..." type="..." >

type="text"
type="number"
type="date"

select

<select id="..." name="..." >
	<option value="...">...</option>
</select>

<select >...</select>
<select multiple >...</select>

Bei Select-Feldern muss beachtet werden das ein Multi-Select beim Absenden nur als Array weiter gegeben werden kann (personen[]!)

<select name="personen[]" multiple>
	<option value='1'>Max Muster</option>>
	<option value='2'>Testi Tester</option>>
</select>

button

<button type="...">...</button>

type="submit" submits the form when clicked (default)
type="reset" resets the fields in the form when clicked
type="button" clickable, but without any event handler until one is assigned

Beliebige Daten in einem Formular als Array übergeben

Will man mehrere Felder in einem Array als Datensatz an den Server schicken, geht das auch:

<input id="vorname" name="person[vorname]" type="..." >

<input id="nachname" name="person[nachname]" type="..." >

<input id="telefon" name="person[telefon]" type="..." >

Als URL (GET) sieht das so aus:

...?person[vorname]=...&person[nachname]=...&person[telefon]=...

Auf Server-Seite kann das Array ausgewertet werden, bspw. mit PHP:

$_GET["person"][vorname];
$_GET["person"][nachname];
$_GET["person"][telefon];

Universelle Attribute

Identifikation

id="..."

erlaubt die eindeutige Benennung von Elementen
muss einen Text enthalten
muss eindeutig im Dokument sein

Klassenzugehörigkeit (Klasse, CSS)

class="..."

erlaubt die Angabe von CSS-Klassen in Elementen
kann eine oder mehrere Klassennamen enthalten
mehrere Klassennamen werden durch Leerzeichen getrennt

Titel

title="..."

erlaubt die Angabe eines Element-Titels (z.B. bei Hover sichtbar)
muss einen Text enthalten

Zeichen

Zeichen	Beschreibung	Name in HTML	Unicode in HTML
"	Anführungszeichen oben	"	"
&	Ampersand-Zeichen, kaufmännisches Und	&	&
§	Paragraph	§	§
©	Copyright-Zeichen	©	©
<	öffnende spitze Klammer	<	<
>	schließende spitze Klammer	>	>
˜	kleine Tilde	&tilde;	˜
	Erzwungenes Leerzeichen
	Tabulator
	Zeilenumbruch	<br/>

Bilder inline einbinden

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Roter Punkt" />

Datenschutz | Impressum