... 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

<?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>

</body>
</html>

Elemente

  • html
    • <html>...</html>
  • head
    • <head>...</head>
  • body
    • <body>...</body>
  • iframe
    • <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>
  • img
    • <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">
      
  • div
    • <div>...</div>
  • span
    • <span>...</span>
  • p
    • <p>...</p>
  • pre
    • <pre>...</pre>
  • ul
    • <ul>...</ul>
  • ol
    • <ol>...</ol>
  • li
    • <li>...</li>
  • a
    • 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>

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>

Attribute

  • title
    • darf bis zu drei Inches lang sein
    • kann insgesamt 1024 Zeichen enthalten
    • Tabulatur
    • Zeilenumbruch

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