Kurzreferenz HTML, Seite 1 
Kurzreferenz HTML 
S. 2 Grundlagen HTML Tag, End-Tag 
Verschachtelung 
Parameter (Attribut, Ar...
Kurzreferenz HTML, Seite 2 
Grundlagen HTML: 
Tag, End-Tag: 
<font>xxx</font> 
Tags werden vom normalen Text dadurch unter...
Kurzreferenz HTML, Seite 3 
Textformatierung: 
Zeilenumbruch: 
<br> 
<nobr>Zeilenumbruch verhindern</nobr> 
<wbr>Zeilenumb...
Kurzreferenz HTML, Seite 4 
Schriftgröße: 
<font size="1">sehr kleine Schrift</font> 
u.s.w. 
<font size="7">sehr große Sc...
Kurzreferenz HTML, Seite 5 
Maskierungen: 
Maskierung von 
&auml; für ä 
&Auml; für Ä 
&ouml; für ö 
&Ouml; für Ö 
&uuml; ...
Kurzreferenz HTML, Seite 6 
Listen: 
Ungeordnete Liste: 
<ul> 
<li>Probieren geht über Studieren</li> 
<li>Liebe geht über...
Kurzreferenz HTML, Seite 7 
Grafiken: 
Grafiken einbinden: 
<img src="bild.gif"> 
Attribute zu Grafiken: 
<img src="bild.j...
Kurzreferenz HTML, Seite 8 
Verweise: 
Allgemeine Verweise: 
<a href="ziel.html">Verweis zur Datei "ziel.html"</a> 
Achten...
Kurzreferenz HTML, Seite 9 
Tabellen: 
Tabellen, Grundlagen: 
<table> 
<tr> 
<td>linke obere Zelle</td> 
<td>rechte obere ...
Kurzreferenz HTML, Seite 10 
Tabellen, Zelleninhalt horizontal ausrichten: 
<table width="100%"> 
<tr> 
<td align="left">Z...
Kurzreferenz HTML, Seite 11 
Eingebettete Frames: 
Eingebetteten Frame definieren: 
<iframe src="datei1.html" name="fenste...
Formulare: mehrzeilige Eingabefelder 
<form action=""> 
<textarea name="kommentar">Bitte Kommentar abgeben.</textarea> 
</...
Formulare: Buttons zum Absenden und Abbrechen 
<form action=""> 
<input type="submit" value="Absenden"> 
<input type="rese...
Nächste SlideShare
Wird geladen in …5
×

Kurzreferenz html

667 Aufrufe

Veröffentlicht am

Kurzreferenz zu HTML

Veröffentlicht in: Präsentationen & Vorträge
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
667
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Kurzreferenz html

  1. 1. Kurzreferenz HTML, Seite 1 Kurzreferenz HTML S. 2 Grundlagen HTML Tag, End-Tag Verschachtelung Parameter (Attribut, Argument) Leerzeichen, Zeilenwechsel Klein- und Großschreibung Dateinamen HTML-Grundgerüst Kommentar S. 3-4 Textformatierung Zeilenumbruch Absatz Trennlinie Physisches Formatieren Logisches Formatieren Überschrift Ausrichtung Schriftgröße S. 4 Farbe Schriftart, Schriftfarbe Farbnamen Hexadezimale Angaben für Farben Dateiweite Farb-Angaben im body S. 5 Maskierungen Maskierung von Umlauten Maskierung von Sonderzeichen S. 6 Listen Ungeordnete Liste Ungeordnete Liste, verschachtelt Nummerierte Liste Definitionsliste Eigenschaften für Listen S. 7 Grafiken Grafiken einbinden Attribute zu Grafiken Grafik als Hintergrundbild S. 7 Pfadangaben Relative Pfadangaben Absolute Pfadangaben S. 8 Verweise Allgemeine Verweise Verweise auf bestimmte Textstellen Zielfenster für Verweise Grafik als Verweis, E-Mail-Verweis Download-Verweis, Verweis zu einer beliebigen Datei Image Maps S. 9-10 Tabellen Tabellen, Grundlagen Tabellen, Kopfzellen Tabellenränder, cellspacing, cellpadding Tabellen, Hintergrundfarben Tabellen, Breiten- und Höhenangaben Tabellen, Zelleninhalt horizontal ausrichten Tabellen, Zelleninhalt vertikal ausrichten Tabellen ausrichten Tabellenüberschrift Zellen verbinden S. 11 Eingebettete Frames Eingebetteten Frame definieren Neue Datei in eingebettetem Frame laden S. 11-13 Formulare Formulare definieren Formulare: einzeilige Eingabefelder Formulare: mehrzeilige Eingabefelder Formulare: Auswahllisten Formulare: Radiobuttons Formulare: Checkboxen Formulare: Versteckte Elemente Formulare: Buttons zum Absenden und Abbrechen S. 13 Angaben im head Meta-Angaben Dokument-Typ-Angaben
  2. 2. Kurzreferenz HTML, Seite 2 Grundlagen HTML: Tag, End-Tag: <font>xxx</font> Tags werden vom normalen Text dadurch unterschieden, dass sie zwischen zwei spitzen Klammern eingeschlossen werden. Die meisten HTML-Befehle treten paarweise auf, mit einem Start-Tag der Form <tag> und einem End-Tag der Form </tag>. Diese Befehlspaare geben jeweils die Bedeutung des dazwischenliegenden Textes an. <br> Seltener treten HTML-Befehle treten einzeln auf, d. h. ohne End-Tag. Verschachtelung: <i><b>xxx</b></i> Mehrere unmittelbar aufeinanderfolgende HTML-Befehle müssen immer richtig geschachtelt werden: <tag1><tag2><tag3>xxx</tag3></tag2></tag1> Parameter (Attribut, Argument): <font size="3">xxx</font> Manche Tags können Parameter, bestehend aus Attributen und ihren Argumenten, haben. Im obigen Beispiel hat der Tag <font> (=Schrift) das Attribut size (=Schriftgröße) mit dem Argument 3 (= Normalschriftgröße). Leerzeichen, Zeilenwechsel: Innerhalb von Tags sind Leerzeichen oder gar ein Zeilenwechsel nicht gestattet. Der Text, der von Tags eingeschlossen wird, darf Leerzeichen (welche auch als solche dargestellt werden) und Zeilenumbrüche enthalten. Zu beachten ist aber, daß Zeilenumbrüche (und ebenso Absätze und Tabulatoren) im Browser nicht so dargestellt werden, wie sie im Editor eingegeben wurden. Für Zeilenumbrüche und Absätze, die im Browser wirksam sein sollen, müssen die entsprechenden HTML-Befehle verwendet werden. Klein- und Großschreibung: HTML unterscheidet bei Namen von HTML-Elementen und Attributnamen nicht zwischen Groß- und Kleinschreibung. Nur bei der Wertzuweisung an manche Attribute wird Groß-und Kleinschreibung unterschieden - aber auch nur im Hinblick etwa auf Scriptsprachen. Für XHTML wurde festgelegt, dass alle Elementnamen und Attributnamen klein geschrieben werden. Empfehlung: Generelle Kleinschreibung auch bei HTML, außer bei Verweisen auf Dateinamen, falls diese großgeschrieben werden, wie etwa Bild.gif. Dateinamen: Bei der Namensvergabe von HTML-Dateien keine Umlaute, Leerzeichen und Sonderzeichen verwenden. Statt der Dateiendung *.html kann auch die Endung *.htm verwendet werden. HTML-Grundgerüst: <html> <head> <title>erstes Dokument</title> </head> <body> Hallo! </body> </html> (Weitere Angaben im head siehe letzte Seite.) Kommentar: <!-- einzeiliger oder mehrzeiliger Kommentar -->
  3. 3. Kurzreferenz HTML, Seite 3 Textformatierung: Zeilenumbruch: <br> <nobr>Zeilenumbruch verhindern</nobr> <wbr>Zeilenumbruch erlauben Absatz: <p>ein Absatz</p> <p align="right">ein Absatz, rechtsbündig angeordnet</p> <p align="center">ein Absatz, zentriert angeordnet</p> <p align="left">ein Absatz, linksbündig angeordnet (Voreinstellung)</p> Trennlinie: <hr size="5" width="70"> mit size wird die Stärke der Trennlinie festgelegt (Normalstärke ist 2), mit width wird die Breite der Trennlinie festgelegt. Physisches Formatieren: <b>fetter Text</b> <i>kursiv gestellter Text</i> <u>unterstrichener Text</u> <s>durchgestrichener Text</s> <tt>diktengleicher Text</tt> <big>größer formatierter Text</big> <small>kleiner formatierter Text</small> <strike>ebenfalls durchgestrichener Text</strike> <sup>hochgestellter Text</sup> <sub>tiefgestellter Text</sub> <blink>blinkender Text</blink> <marquee>hin- und herlaufender Text</marquee> Logisches Formatieren: <abbr>dies ist eine Abkürzung</abbr> <acronym>dies ist ebenso eine Abkürzung</acronym> <cite>dies ist ein Zitat</cite> <code>dies ist Quellcode</code> <dfn>dies ist eine Begriffsdefinition</dfn> <em>ein Text mit der Bedeutung: betont, emphatisch</em> <kbd>dies ist eine Tastatureingabe</kbd> <samp>dies ist ein Beispiel</samp> <strong>stark betonter Text</strong> <var>dies ist eine Variable</var> <blockquote>dies ist ein Zitat</blockquote> <address>dies ist eine Adresse</address> <pre>präformatierter Text</pre> Überschrift: <h1>Überschrift erster Ordnung (relativ groß)</h1> u.s.w. <h6>Überschrift sechster Ordnung (relativ klein)</h6> Ausrichtung: <h1 align="center">mittig</h1> <h1 align="left">linksbündig</h1> <h1 align="right">rechtsbündig</h1> <h1 align="justify">Blocksatz</h1> <center>älteres Blockelement zur zentrierten Ausrichtung</center>
  4. 4. Kurzreferenz HTML, Seite 4 Schriftgröße: <font size="1">sehr kleine Schrift</font> u.s.w. <font size="7">sehr große Schrift</font> <font size="3">Normalschriftgröße</font> <font size="-1">Text kleiner als normal</font> Farbe: Schriftart, Schriftfarbe: <font face="Verdana, Courier New">Schriftart ist Verdana, falls nicht darstellbar, die Courier New</font> <font color="green">grüner Text</font> Farbnamen: black = schwarz (entspricht hexadezimal: #000000) maroon = braun (entspricht hexadezimal: #800000) green = dunkelgrün (entspricht hexadezimal: #008000) olive = olivgrün (entspricht hexadezimal: #808000) navy = dunkelblau (entspricht hexadezimal: #000080) purple = violett (entspricht hexadezimal: #800080) teal = graublau (entspricht hexadezimal: #008080) silver = hellgrau (entspricht hexadezimal: #C0C0C0) gray = grau (entspricht hexadezimal: #808080) red = rot (entspricht hexadezimal: #FF0000) lime = hellgrün (entspricht hexadezimal: #00FF00) yellow = gelb (entspricht hexadezimal: #FFFF00) blue = blau (entspricht hexadezimal: #0000FF) fuchsia = rosa (entspricht hexadezimal: #FF00FF) aqua = hellblau (entspricht hexadezimal: #00FFFF) white = weiß (entspricht hexadezimal: #FFFFFF) Hexadezimale Angaben für Farben: Notation: #rrggbb (rr=Rotanteil, gg=Grünanteil, bb=Blauanteil) 0 (entspricht dezimal 0) 1 (entspricht dezimal 1) 2 (entspricht dezimal 2) 3 (entspricht dezimal 3) 4 (entspricht dezimal 4) 5 (entspricht dezimal 5) 6 (entspricht dezimal 6) 7 (entspricht dezimal 7) 8 (entspricht dezimal 8) 9 (entspricht dezimal 9) A (entspricht dezimal 10) B (entspricht dezimal 11) C (entspricht dezimal 12) D (entspricht dezimal 13) E (entspricht dezimal 14) F (entspricht dezimal 15) Beispiel: <font color="#000000">schwarze Schrift</font> Dateiweite Farb-Angaben im body: <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> Mit text definiert man die Farbe für den Text, mit bgcolor die Hintergrundfarbe für die Seite, mit link eine Farbe für Verweise zu noch nicht besuchten Links, mit vlink eine Farbe für Verweise zu bereits besuchten Links, mit alink eine Farbe für Verweise, die der Anwender gerade anklickt. </body>
  5. 5. Kurzreferenz HTML, Seite 5 Maskierungen: Maskierung von &auml; für ä &Auml; für Ä &ouml; für ö &Ouml; für Ö &uuml; für ü &Uuml; für Ü &szlig; für ß Maskierung von Sonderzeichen: &aacute; für á &Aacute; für Á &agrave; für à &Agrave; für À &acirc; für â &Acirc; für  &eacute; für é &Eacute; für É &ccedil; für ç &Ccedil; für Ç &Alpha; für Alpha groß (A) &alpha; für Alpha klein (α) &Beta; für Beta groß (B) &beta; für Beta klein (β) &Gamma; für Gamma groß (Γ) &gamma; für Gamma klein (γ) &lt; für < &gt; für > &amp; für & &quot; für " &nbsp; (geschütztes Leerzeichen) &euro; für das Euro-Zeichen (€) &deg; für das Grad-Zeichen (°) &para; für das Absatz-Zeichen (¶) &sect; für das Paragraph-Zeichen (§) &copy; für das Copyright-Zeichen (©) &plusmn; für das Plusminus-Zeichen (±) &frac14; für ein Viertel (¼) &frac12; für ein Halb (½) &frac34; für drei Viertel (¾) &infin; für das Unendlichkeitszeichen (∞) &bull; für das Bullet-Zeichen (•)
  6. 6. Kurzreferenz HTML, Seite 6 Listen: Ungeordnete Liste: <ul> <li>Probieren geht über Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante fällt über Kante</li> </ul> Ungeordnete Liste, verschachtelt: <ul> <li>Suchmaschinen <ul> <li>Google</li> <li>Altavista</li> <li>Fireball</li> </ul> </li> <li>Verzeichnisse</li> <li>Was anderes</li> <li>Noch was anderes</li> </ul> Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt. Nummerierte Liste: <ol> <li>Einheimische Wildrosen</li> <li>Ausländische Wildrosen</li> <li>Gartenrosen</li> </ol> Definitionsliste: <dl> <dt>br</dt> <dd>Zeilenumbruch</dd> <dt>hr</dt> <dd>Trennlinie</dd> <dt>p</dt> <dd>Absatz</dd> </dl> Zwischen <dt> und </dt> steht der Begriff (definition term), zwischen <dd> und </dd> steht die Beschreibung des Begriffs (definition description). Eigenschaften für Listen: Für ungeordnete Listen kann der Bullet-Typ bestimmt werden: <ul type="circle"> erzeugt ein rundes Bullet. <ul type="square"> erzeugt ein eckiges Bullet. <ul type="disc"> erzeugt ein Dateisymbol als Bullet. Für nummerierte Listen kann die Art der Nummerierung bestimmt werden: Mit <ol type="I"> werden die Listeneinträge mit I., II., III. usw. nummeriert. Mit <ol type="i"> werden die Listeneinträge mit i., ii., iii., iv. usw. nummeriert. Mit <ol type="A"> werden die Listeneinträge mit A., B., C. usw. nummeriert. Mit <ol type="a"> werden die Listeneinträge mit a., b., c. usw. nummeriert. Mit start= innerhalb des einleitenden Tags von <ol> kann ein beliebiger Startwert gesetzt werden, z.B. <ol start="7">. Die Nummerierung beginnt dann bei 7. Mit value= innerhalb des Tags von <li> in einer nummerierten Liste kann der Startwert beliebig neu gesetzt werden, z. B. auf <li value="15">. Die Nummerierung fährt dann bei 15 fort.
  7. 7. Kurzreferenz HTML, Seite 7 Grafiken: Grafiken einbinden: <img src="bild.gif"> Attribute zu Grafiken: <img src="bild.jpg" width="200" height="150" border="3" alt="ein sch&ouml;nes Bild" title="Bild" name="bild"> width ist die Breite von bild.jpg, height die Höhe (angegeben in Pixeln), mit border wird ein Rahmen um die Grafik (in Pixeln) definiert, mit alt gibt man einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann (obligatorisch), title ist dem Attribut alt ähnlich, der title-Text wird auch vom Netscape angezeigt, wenn man mit der Maus eine Weile auf dem Bild verweilt, mit name vergibt man einen Namen für die Grafik (in Verbindung mit JavaScript sinnvoll). Der Name darf keine Umlaute, Leerzeichen, Sonderzeichen enthalten, er darf nicht mit einer Zahl anfangen und sollte nicht zu lang sein. Grafik als Hintergrundbild: <body background="bild.gif"> "bild.gif" als Hintergrundbild. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, so dass ein Tapeteneffekt (Wallpaper) entsteht. Pfadangaben: Relative Pfadangaben: <img src="bild.jpg"> "bild.jpg" liegt im selben Verzeichnis wie diese HTML-Datei. <img src="bilder/bild.jpg"> "bild.jpg" befindet sich im Verzeichnis "bilder", welches im selben Verzeichnis wie diese HTML-Datei liegt. <img src="../bild.jpg"> "bild.jpg" befindet sich ein Verzeichnis höher als diese HTML-Datei. <img src="../bilder/bild.jpg"> "bild.jpg" befindet sich im Verzeichnis "bilder", welches ein Verzeichnis höher liegt als diese HTML-Datei. <img src="../../bild.jpg"> "bild.jpg" befindet sich zwei Verzeichnisse höher als diese HTML-Datei. Merke: - gehe von der Datei aus, in der dieser Befehl steht, in den Ordner NeuerOdner: NeuerOrdner/ - gehe von der Datei aus, in der dieser Befehl steht, einen Ordner höher: ../ Absolute Pfadangaben: <img src="/bild.jpg"> "bild.jpg" liegt im Stammverzeichnis des Servers, auf dem auch irgendwo diese HTML-Datei liegt. <img src="/bilder/bild.jpg"> "bild.jpg" liegt im Verzeichnis "bilder", welches im Stammverzeichnis des Servers liegt. <img src="http://www.irgendwas.de/bild.jpg"> "bild.jpg" liegt im Stammverzeichnis des Servers http://www.irgendwas.de. <img src="http://www.irgendwas.de/bilder/bild.jpg"> "bild.jpg" liegt im Verzeichnis "bilder",welches im Stammverzeichnis des Servers http://www.irgendwas.de liegt.
  8. 8. Kurzreferenz HTML, Seite 8 Verweise: Allgemeine Verweise: <a href="ziel.html">Verweis zur Datei "ziel.html"</a> Achten Sie bei Verweisen zu HTML-Dateien auf korrekte Pfadangaben (s.o.): <a href="unterordner/ziel.html">ein relativer Verweis</a> <a href="http://www.irgendwas.de/ziel.html">ein absoluter externer Verweis</a> Verweise auf bestimmte Textstellen: Innerhalb einer HTML-Datei: <a href="#ziel">hier geht's zum Ziel</a> <a name="ziel">hier ist das Ziel</a>(Bei der Vergabe eines Namens mit name= keine Umlaute, Sonderzeichen und Leerzeichen verwenden und den Namen nicht mit einer Zahl beginnen.) In eine andere HTML-Datei: <a href="../neu.html#ziel">hier geht's zum Ziel in der Datei "neu.html"</a> Kombination aus Zielverweis und Ziel: <a href="#unten" name="oben">an eine Stelle weiter unten</a> <a href="#oben" name="unten">an eine Stelle weiter oben</a> Zielfenster für Verweise: <a href="datei.html" target="_self">Datei wird im selben Browserfenster geöffnet</a> <a href="datei.html" target="_blank">Datei wird in einem neuen Browserfenster geöffnet</a> Grafik als Verweis, E-Mail-Verweis: <a href="ziel.html"><img src="bild.gif" alt="zum Ziel"></a>("bild.gif" als Verweis zur HTML-Datei "ziel.html") <a href="mailto:otto.meier@web.de">eine Mail an Otto Meier</a>(E-Mail-Verweis. Nach mailto: folgt die E-Mail-Adresse.) Download-Verweis, Verweis zu einer beliebigen Datei: <a href="daten.zip">Daten</a> Es gibt keine spezifische Notation in HTML, um Dateien beim Anklicken zum Downloaden anzubieten. Es gibt lediglich Dateitypen, die (fast) jeder Web-Browser so interpretiert, dass er dem Anwender anbietet, die Datei downzuloaden. Das bekannteste Dateiformat dafür ist heute das ZIP-Format (*.zip). <a href="dokument.txt">ein Text-Dokument</a> Dateitypen wie reine Textdateien (*.txt) können die Browser selbst anzeigen. <a href="dokument.pdf" type="application/pdf">ein PDF-Dokument</a> <a href="dokument.xls" type="application/msexcel">ein Excel-Dokument</a> <a href="dokument.doc" type="application/msword">ein Word-Dokument</a> Bei Verweisen auf PDF-, Excel- und Word-Dateien empfielt sich die Angabe des Mime-Typs für entsprechende Dateien Image Maps: <map name="bild"> <area shape="rect" coords="53,46,132,100" href="datei1.html" alt=""> <area shape="rect" coords="301,156,380,211" href="datei2.html" alt=""> <area shape="rect" coords="108,273,187,328" href="datei3.html" alt=""> </map> <img src="bild.gif" usemap="#bild" border="0" alt=""> Zwischen <map> und </map> werden die verweis-sensitiven Flächen der Grafik definiert, und zwar mit dem Tag <area>. Mit shape="rect" wird eine viereckige Fläche, mit shape="circle" wird ein Kreis, und mit shape="polygon" wird ein beliebiges Vieleck in der Grafik als verweis-sensitiv definiert. Bei coords= werden die Koordinaten der verweis-sensitiven Flächen angegeben. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Ein Viereck (shape="rect") wird mit den Koordinaten für x1,y1,x2,y2 definiert: x1 = linke obere Ecke, Pixel von links, y1 = linke obere Ecke, Pixel von oben, x2 = rechte untere Ecke, Pixel von links, y2 = rechte untere Ecke, Pixel von oben Ein Kreis (shape="circle") wird mit den Koordinaten für x,y,r definiert: x = Mittelpunkt, Pixel von links, y = Mittelpunkt, Pixel von oben, r = Radius in Pixeln Ein beliebiges Vieleck (shape="polygon") wird mit den Koordinaten für x1,y1,x2,y2,...,xn,yn definiert: x = Pixel einer Ecke von links, y = Pixel einer Ecke von oben.
  9. 9. Kurzreferenz HTML, Seite 9 Tabellen: Tabellen, Grundlagen: <table> <tr> <td>linke obere Zelle</td> <td>rechte obere Zelle</td> </tr> <tr> <td>linke untere Zelle</td> <td>rechte untere Zelle</td> </tr> </table> In einer Zelle, in der nichts stehen soll, sollte wenigstens ein geschütztes Leerzeichen oder ein sogenannter "blinder Pixel" stehen, eine Zelle würde dann so aussehen: <td>&nbsp;</td> Zwischen <td> und </td> kann eine weitere Tabelle stehen. Tabellen können beliebig tief verschachtelt werden. Tabellen, Kopfzellen: <table> <tr> <th>Obst</th> <th>Gemüse</th> </tr> <tr> <td>Apfel</td> <td>Gurke</td> </tr> </table> Tabellenränder, cellspacing, cellpadding: <table cellspacing="10" cellpadding="8" border="3" bordercolor="#0000FF"> <tr> <td>eins</td> <td>zwei</td> </tr> <tr> <td>drei</td> <td>vier</td> </tr> </table> Mit border wird die Dicke von Tabellenrändern in Pixeln definiert. Mit bordercolor wird die Farbe der Gitternetzlinien definiert. Mit cellspacing wird der Abstand zwischen den Zellen in Pixeln definiert. Mit cellpadding wird der Abstand zwischen Zelleninhalt und Zellenrand in Pixeln definiert. Tabellen, Hintergrundfarben: <table bgcolor="#FFFF00"> <tr bgcolor="#00FF00"> <td>grün</td> <td>grün</td> </tr> <tr> <td bgcolor="#FF0000">rot</td> <td>gelb</td> </tr> </table> Tabellen, Breiten- und Höhenangaben: <table width="60%"> <tr> <td width="30%" height="100">Karl</td> <td>Vera</td> </tr> </table>
  10. 10. Kurzreferenz HTML, Seite 10 Tabellen, Zelleninhalt horizontal ausrichten: <table width="100%"> <tr> <td align="left">Zellinhalt links</td> <td align="right">Zellinhalt rechts</td> <td align="center">Zellinhalt mittig</td> </tr> </table> Tabellen, Zelleninhalt vertikal ausrichten: <table> <tr> <td height="200" valign="top">Zellinhalt oben</td> <td valign="middle">Zellinhalt mittig</td> <td valign="bottom">Zellinhalt unten</td> </tr> </table> Tabellen ausrichten: <table align="right"> <tr> <td>Zelle1</td> <td>Zelle2</td> <td>Zelle3</td> </tr> </table> Mit align="left" wird die Tabelle linksbündig ausgerichtet, nachfolgender Text fließt rechts um die Tabelle. Mit align="right" wird die Tabelle rechtsbündig ausgerichtet, nachfolgender Text fließt links um die Tabelle, mit align="center" wird die Tabelle mittig ausgerichtet, nachfolgender Text steht unterhalb der Tabelle. Tabellenüberschrift: <table> <caption>Tabellenüberschrift</caption> <tr> <td>Zelle 1</td> <td>Zelle 2</td> <td>Zelle 3</td> </tr> </table> Zellen verbinden: <table> <tr> <td rowspan="2">Zelle geht über 2 Zeilen</td> <td>Zelle in Zeile 1</td> </tr> rowspan=“2“ <tr> <td>Zelle in Zeile 2</td> </tr> </table> <table> <tr> <td colspan="2">Zelle geht über 2 Spalten</td> </tr> <tr> colspan=“2“ <td>Zelle in Spalte 1</td> <td>Zelle in Spalte 2</td> </tr> </table> rowspan verbindet Zellen zeilenweise, colspan verbindet Zellen spaltenweise.
  11. 11. Kurzreferenz HTML, Seite 11 Eingebettete Frames: Eingebetteten Frame definieren: <iframe src="datei1.html" name="fenster" width="500" height="400" border="0" frameborder="0" scrolling="no" noresize> <p>Ihr Browser kann keine eingebetteten Frames anzeigen</p> </iframe> Mit dem Attribut src wird die HTML-Datei angegeben, welche in den jeweiligen Frame geladen werden soll. Es gelten dieselben Regeln wie beim Referenzieren eines Verweisziels oder einer Grafik. Mit name erhält der Frame einen Namen, damit außerhalb des Frames auf ihn verwiesen werden kann. Der Name sollte kurz sein, darf keine Sonderzeichen, Leerzeichen oder Umlaute enthalten und nicht mit einer Zahl beginnen. Mit width und height wird die Breite und Höhe des eingebetteten Frames definiert. Mit frameborder und border wird die Dicke des Rahmens für den entsprechenden Frame angegeben. Mit scrolling werden Bildlaufleisten für einen Frame erzwungen ("yes"), verhindert ("no") oder bei Bedarf angezeigt ("auto"). Mit noresize (ohne Argumente) wird verhindert, dass der Anwender die Größe des Framefensters verändern kann. Neue Datei in eingebettetem Frame laden: Heißt der eingebettete Frame wie im oberen Beispiel fenster (name="fenster"), dann kann in diesen eine andere HTML-Datei geladen werden, wenn im <a>-Tag das Attribut target=““ verwendet wurde: <a href="datei2.html" target="fenster">zur Datei 2</a> <a href="datei3.html" target="fenster">zur Datei 3</a> Formulare: Formulare definieren: <form action="mailto:info@domain.de" method="post" enctype="text/plain"> <table> <tr> <td> <!-- hier kommen die Formularelemente hin. --> </td> </tr> </table> </form> Wird das Formular in eine Tabelle eingebettet, so steht <form> vor <table> und </form> nach </table> der Tabelle, welche die einzelnen Formularelemente einschließt. Mit dem obligatorischen Attribut action im form-Tag wird angegeben, was mit den eingegebenen Formulardaten passieren soll. Die Wertzuweisung an action= kann beispielsweise eine E-Mail-Adresse (normalerweise Ihre eigene) mit vorangestelltem mailto: sein. Das Attribut method= definiert die HTTP-Übertragungsmethode: get oder post. Wenn Sie sich die Formulardaten per E-Mail zuschicken lassen, wie im zweiten obigen Beispiel gezeigt, dann benutzen Sie immer method="post". Außerdem sollten Sie bei E-Mail-Empfang von Formulardaten im einleitenden form-Tag enctype="text/plain" mit angeben. Formulare: einzeilige Eingabefelder <form action=""> <input type="text" name="nachname" maxlength="60" value="Mustermann"> <input type="password" name="kennwort" maxlength="12"> </form> Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Bei E-Mail-Formularen taucht der Name als Feldname auf. Ferner kann bei einzeiligen Eingabefeldern die maximal einzugebende Zeichenanzahl mit maxlength= bestimmt werden. Mit dem zusätzlichen Attribut value= können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird. Dieser vorbelegte Text kann vom Anwender überschrieben werden. Eingabefelder für Passwörter werden mit type="password" definiert. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt.
  12. 12. Formulare: mehrzeilige Eingabefelder <form action=""> <textarea name="kommentar">Bitte Kommentar abgeben.</textarea> </form> Auch ein mehrzeiliges Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Optional kann ein Text, mit dem das Feld vorbelegt wird, zwischen <textarea> und </textarea> stehen. Dieser vorbelegte Text kann vom Anwender überschrieben werden. Formulare: Auswahllisten <form action=""> <select name="top5" size="1" multiple> <option value="jackson">Michael Jackson</option> <option value="waits" selected>Tom Waits</option> <option value="hagen">Nina Hagen</option> </select> </form> Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name=. Mit dem Attribut size= bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Wenn Sie size="1" angeben, definieren Sie eine so genannte "Dropdown-Liste". Um für einen Eintrag der Auswahlliste einen anderen Absendewert als den zwischen <option> und </option> zu bestimmen, geben Sie im eineitenden <option>-Tag des betreffenden Eintrags das Attribut value= an. Sie können eine Mehrfachauswahl erlauben durch das zusätzliche Attribut multiple im einleitenden select-Tag. Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden option-Tag des betreffenden Eintrags das Attribut selected an. Formulare: Radiobuttons <form action=""> <input type="radio" name="zahlmethode" value="Mastercard">Mastercard <input type="radio" name="zahlmethode" value="Visa">Visa <input type="radio" name="zahlmethode" value="AmericanExpress" checked>American Express </form> Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert für jeden Radiobutton. Um eine Auswahlmöglichkeiten vorzuselektieren, notieren Sie in dem input-Tag des entsprechenden Radiobuttons das Attribut checked. Formulare: Checkboxen <form action=""> <input type="checkbox" name="zutat" value="salami">Salami <input type="checkbox" name="zutat" value="pilze" checked>Pilze <input type="checkbox" name="zutat" value="sardellen">Sardellen </form> Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen. Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert für jede Checkbox. Um eine Auswahlmöglichkeiten vorzuselektieren, notieren Sie in dem input-Tag der entsprechenden Checkbox das Attribut checked. Formulare: Versteckte Elemente <form action=""> <input type="hidden" name="user" value=""> Name: <input type="text" name="nachname" size="30" maxlength="60" value="Mustermann"> </form> <script language="JavaScript"> <!-- document.forms[0].user.value = navigator.appName; //--> </script> Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. So könnte ein Java Script beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zur Bildschirmauflösung oder zum Browsertyp (hier im Beispiel) beim Anwender sammeln. Kurzreferenz HTML, Seite 12
  13. 13. Formulare: Buttons zum Absenden und Abbrechen <form action=""> <input type="submit" value="Absenden"> <input type="reset" value="Abbrechen"> <input type="button" onClick="pruefe()"> </form> Mit <input type="submit"> definieren Sie einen Absende-Button. Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action= angegeben ist. Mit <input type="reset"> definieren Sie einen Abbrechen-Button, eingegebene Daten werden verworfen und nicht abgeschickt. Mit dem Attribut value= bestimmen Sie die Beschriftung der Buttons (value = Wert). Mit <input type="button"> definieren Sie eine Schaltfläche ohne das Abschicken bzw. Zurücksetzen der oberen Schaltflächen. In diesem Beispiel wird mit dem Eventhandler onClick= beim Klicken die JavaScript-Funktion pruefe() in Gang gesetzt. Kurzreferenz HTML, Seite 13 Angaben im head: Meta-Angaben: <meta name="description" content="Beschreibungstext"> <meta name="author" content="Autor dieser Webseite"> <meta name="keywords" content="Schlüsselwörter"> <meta name="generator" content="Name der Software, mit der diese Seite erstellt wurde"> <meta name="robots" content="index"> mit content="index": indiziere diese Seite mit content="noindex": indiziere diese Seite nicht mit content="follow": indiziere diese Seite und folge den Links mit content="nofollow": indiziere nur diese Seite --> <meta name="revisit-after" content="3 days"> wie oft die Suchmaschinen die Seite neu indizieren sollen <meta name="expires" content="x"> ist content="0", wird diese Seite immer wieder neu vom Server geladen, d.h. nicht evtl. aus dem Cache. Es ist auch möglich, eine konkretes Datum bzw. Uhrzeit anzugeben, ab der diese Seite neu vom Server geladen werden soll. Beispiel: content="Sat, 15 Dec 2001 12:00:00 GMT" <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Angabe zum Zeichensatz. Bei content= geben Sie zunächst den Mime-Type an, der für HTML-Dateien immer text/html lautet. Dahinter folgt, durch einen Strichpunkt getrennt, die Angabe des Zeichensatzes. Im obigen Beispiel wird der Zeichensatz ISO-8859-1 definiert (das ist der normale Zeichensatz für westeuropäische Sprachen, unter anderem auch für Deutsch). <meta http-equiv="refresh" content="5; URL=http://www.weiter.de"> Weiterleitung zu einer anderen Adresse. content=5 bestimmt, nach wie vielen Sekunden die Weiterleitung starten soll. Mit URL= wird die Adresse der Seite angegeben, zu der weitergeleitet werden soll. Alle Meta-Angaben werden zwischen <head> und </head> definiert. Dokument-Typ-Angaben: Die Dokument-Typ-Angabe wird vor dem einleitenden <html> definiert. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Benutzen Sie dieser Angabe, wenn Sie bestimmte Elemente und Attribute nicht mehr verwenden wollen, die früher mal zum HTML-Standard gehörten, aber mittlerweile durch andere Möglichkeiten (vor allem durch CSS Stylesheets) ersetzbar sind und deshalb nicht mehr zum "reinen" HTML gehören. Die Verschachtelungsregeln für HTML-Elemente in der strict-Variante strenger formuliert. So ist es in dieser Variante beispielsweise nicht erlaubt, zwischen <body> und </body> einfach nur Text zu notieren. Alle Inhalte müssen in so genannten Block-Elementen stehen, z.B. in Überschriften, Textabsätzen, Tabellen usw. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Benutzen Sie diese Angabe, wenn Sie auch die früher mal erlaubten Elemente und Attribute noch verwenden wollen. In der Variante "transitional" sind auch die Regeln für die Elementverschachtelung etwas milder. In dieser Variante werden z.B. leer notierte Tabellenzellen angezeigt (in der oberen Strict-Variante dagegen nicht). <!DOCTYPE html> Mit dieser Dokument-Typ-Angabe weisen Sie den Browser an, Ihr HTML als HTML 5 zu interpretieren. Nach dieser Dokument-Typ-Angabe folgt der einleitende Tag <html> mit dem Attribut lang=“de“: <!DOCTYPE html> <html lang="de">

×