... just another site around the web ...





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

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

ZeichenBeschreibungName in HTMLUnicode in HTML
"Anführungszeichen oben&quot;&#34;
&Ampersand-Zeichen, kaufmännisches Und&amp;&#38;
§Paragraph&sect;&#167;
©Copyright-Zeichen&copy;&#169;
<öffnende spitze Klammer&lt;&#60;
>schließende spitze Klammer&gt;&#62;
˜kleine Tilde&tilde;&#732;
 Erzwungenes Leerzeichen&nbsp;&#160;
Tabulator &#09;
Zeilenumbruch<br/>&#10;

Bilder inline einbinden

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








Copyright © 2017

Impressum