Post on 07-Jan-2016
description
Autor: H.Sporenberg
Einführung in HTML
<HTML>
<HEAD><TITLE>ASGSG – Marl</TITLE></HEAD>
<BODY >Meine Schule</BODY>
</HTML>
Die Befehle, die man für die Erstellung einer HTML-Seite benötigt, heißen TAGS (TAG (engl.) -> Auszeichner).
Die TAGS werden in spitze Klammern geschrieben.
In der Regel werden TAGS geöffnet und dann geschlossen.
Das Schließen der TAGS geschieht durch Voranstellen eines Schrägstrichs.
z.B.: <HTML> …. </HTML>
Die TAGS unterliegen nicht der Groß- und Kleinschreibung. So sind folgende Schreibweisen äquivalent:
<HTML> = <html> = <Html> usw.
Autor: H.Sporenberg
Einführung in HTML
<HTML>
<HEAD><TITLE>ASGSG – Marl</TITLE></HEAD>
<BODY >Meine Schule</BODY>
</HTML>
Der Text bildet das Grundgerüst einer HTML-Seite.
Das Anfangs-TAG ist immer <HTML>.
Innerhalb dieses <HTML>-TAG gibt es zwei Bereiche:
1.Den <HEAD>-Bereich: hier werden z.B. die CSS-Formatierungen, Programmierungen usw. durchgeführt. Mit dem TAG Title wird der Text angegeben, der in der Head-Zeile des Explorers erscheinen soll.
2.Den <BODY>-Bereich: hier erscheint alles, was nachher auf dem Bildschirm zu sehen sein soll.
Autor: H.Sporenberg
Einführung in HTML
<HTML>
<HEAD><TITLE>ASGSG – Marl</TITLE></HEAD>
<BODY bgcolor=blue><H1>Meine Schule</H1></BODY>
</HTML>
Überschriften werden mit Hilfe der TAGS
<H1>… <H6> hervorgehoben (größere Schrift).
Dabei ist ´<H1> die größte, <H6> die kleinste Schrift. Achtung: nach <H1> gibt es einen Zeilenumbruch (=neue Zeile)
Der Hintergrund kann farbig gestaltet werden. Dieses wird im BODY als Attribut angegeben.
<BODY bgcolor=blue>
Dabei kann eine große Anzahl von Farben durch einen Farbnamen angegeben werden. Eine andere Möglichkeit ist die Angabe der Farbe als Hexadezimalzahl:
bgcolor=#FF1493 -> deeppink
Autor: H.Sporenberg
Einführung in HTML
<TABLE >
<TR><TD>1.Feld</TD><TD>2.Feld</TD></TR>
<TR><TD>3.Feld</TD><TD>4.Feld</TD></TR>
</TABLE>
Das ist das Grundgerüst einer Tabelle mit zwei Zeilen und jeweils 2 Datenlementen.
Der Eingangs-TAG ist <TABLE>. Die Datenelemente einer Reihe werden mit <TR> (=Table-Row) eingeleitet. Die eigentlichen Datenelemente werden mit <TD> (= Table-Date) eingefügt.
Tabellen
Autor: H.Sporenberg
Einführung in HTML<TABLE border=“3“ bordercolor=blue cellspacing=5 cellpadding=5>
<TR><TD>1.Feld</TD><TD>2.Feld</TD></TR>
<TR><TD>3.Feld</TD><TD>4.Feld</TD></TR>
</TABLE>
Mit Hilfe von Attributen, die im TABLE-Tag angegeben werden, kann die Tabelle auch optisch gestaltet werden.
Wichtige Attribute sind: border, bordercolor, cellspacing, cellpadding
Tabellen
Autor: H.Sporenberg
Einführung in HTML<TABLE border=“3“ bordercolor=blue cellspacing=5 cellpadding=5>
<TR><TD>1.Feld</TD><TD>2.Feld</TD></TR>
<TR><TD>3.Feld</TD><TD>4.Feld</TD></TR>
</TABLE>
Aufgabe: Stelle deinen Stundenplan in einer HTML-Tabelle dar.
Tabellen
Autor: H.Sporenberg
Einführung in HTML<TABLE border=“3“ bordercolor=blue cellspacing=5 cellpadding=5>
<TR><TD>1.Feld</TD><TD>2.Feld</TD></TR>
<TR><TD>3.Feld</TD><TD>4.Feld</TD></TR>
</TABLE>
Im Beispiel: Durch Angabe einer Zahl zwischen 1 und 7 können unterschiedliche Rahmenarten erzeugt werden. Mit bordercolor kann dem Rahmen eine Farbe gegeben werden.
Mit cellspacing wird der Abstand der Zellen festgelegt, mit cellpadding der Abstand des Zelleninhalts zum Rand der Zelle.
Tabellen
Autor: H.Sporenberg
Einführung in HTML
<tr bgcolor=#cdcdcd>
<td colspan=3> GSG - MARL</td>
</tr>
Die maximale Anzahl der Spalten ist 3. In der ersten Zeile werden drei Spalten zusammengefasst. Dies geschieht durch das Attribut colspan mit der entspre-chenden Anzahl von Spalten
Tabellen
Formatieren einer Tabelle
Autor: H.Sporenberg
Einführung in HTML
<tr bgcolor=#cdcdcd>
<td >4. Feld</td><td colspan=2>5. Feld</td>
</tr>
In der dritten Zeile werden zwei Spalten zusammen-gefasst. Dies geschieht wieder durch das Attribut colspan mit der ent-sprechenden Anzahl von Spalten. Eine Spalte bleibt normal.
Tabellen
Formatieren einer Tabelle
Autor: H.Sporenberg
Einführung in HTML
<tr bgcolor=#cdcdcd><td >6. Feld</td><td rowspan=2>7. Feld</td><td>8. Feld</td></tr>
<tr bgcolor=#cdcdcd><td >9. Feld</td><td>10. Feld</td></tr>
Es können auch Zeilen zusammengefasst werden. Dies geschieht durch rowspan mit der entsprechenden Anzahl von Zeilen.
Tabellen
Formatieren einer Tabelle
Autor: H.Sporenberg
Einführung in HTML
<FORM><select name=„hits" size="3"> <option>Coldplay</option> <option>Michael Jackson</option> <option>Tom Waits</option> <option>Rolling Stones</option> <option>Madonna</option> </select> </FORM>
Mit <FORM>…</FORM> wird ein Formular definiert. Alles was zwischen diesen TAGs steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons.
Mit dem Attribut size bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Mit <option>...</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste.
Die Auswahlliste
<select ...> leitet eine Auswahl-liste ein. Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.
Formulare
Autor: H.Sporenberg
Einführung in HTML
<FORM>Vorname:<br><INPUT name="vorname" type="text" size="30" maxlength="30"> </FORM>
Einzeilige Eingabefelder
<INPUT> definiert ein einzeiliges Eingabefeld (input = Eingabe). Der Vollständigkeit halber sollte man die Angabe type="text" dazusetzen. Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.
Formulare
Autor: H.Sporenberg
Einführung in HTML
<FORM><textarea name=„Benutzer_Eingabe" cols="50" rows="10"></textarea> </FORM>
Mehrzeilige Eingabebereiche
Mehrzeilige Eingabefelder dienen zur Aufnahme von Kommentaren, Nachrichten usw. <textarea ...> leitet ein mehrzeiliges Eingabefeld ein (textarea = Textbereich). Jedes mehrzeilige Eingabefeld sollte ebenso einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name.Pflicht ist die Angabe zur Höhe und Breite des Eingabebereichs. Das Attribut rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe, während cols die Anzahl der angezeigten Spalten (cols = columns = Spalten) festlegt. "Spalten" bedeutet dabei die Anzahl Zeichen (pro Zeile).Mit </textarea> schließen Sie das mehrzeilige Eingabefeld ab. Das End-Tag ist unbedingt notwendig und darf nicht weggelassen werden
Formulare
Autor: H.Sporenberg
Einführung in HTML
<FORM>Männlich/Weiblich? <input type=radio name=„Geschlecht“ value=„m“>männlich<input type=radio name=„Geschlecht“ value=„w“>weiblich</FORM>
Radio-Buttons
Radio-Buttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein. Der Wert des ausgewählten Radio-Buttons wird beim Absenden des Formulars mit übertragen. Radio-Buttons werden durch <input type="radio"> definiert (input = Eingabe). Jeder Radio-Button sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren.
Formulare
Autor: H.Sporenberg
Einführung in HTML
<FORM><input type="checkbox" name="zutat" value="salami"> Salami<br> <input type="checkbox" name="zutat" value="pilze"> Pilze<br> <input type="checkbox" name="zutat" value="sardellen"> Sardellen </FORM>
Check-Buttons
Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine, eins oder mehrere auswählen kann. Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen. Checkboxen werden durch <input type="checkbox"> definiert (input = Eingabe). Jede Checkbox muss einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name. 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.
Formulare
Autor: H.Sporenberg
Einführung in HTML
<body> <h1>Biographien berühmter Physiker </h1>
<a href="#Einstein">Einstein</a><br><a href="#Bohr">Bohr</a><Br><a href="#Planck">Planck</a><br>
<b><a name="Einstein">Einstein</a></b>{ Hier stünde der Text für A. Einstein}
<b><a name="Bohr">Bohr</a></b>{Hier stünde der Text für N. Bohr}
Ein interner Link wird gesetzt, um innerhalb einer HTML-Seite verschiedene Bereiche auf dieser Seite zu erreichen.
Links
Im Beispiel sollen Lebensläufe über verschiedene Physiker informieren. Praktisch als Inhaltsverzeichnis werden die verschiedenen Physiker aufgeführt, ein Mausklick führt dann zu deren Beschreibung.
Autor: H.Sporenberg
Einführung in HTML
Die schnellsten Autos sollen über interne Links angezeigt werden
Als erstes definiert man die unterschiedlichen CSS-Formatierungen
Links
<style type="text/css">
.schrift1{font-size:25;font-family:Verdana;background-color:#EEDC82}
.schrift2{font-size:18;font-family:Verdana;color:#212121}
.schrift3{font-size:18;font-family:Arial,Verdana;}
.schrift4{font-size:20;font-family:Verdana;color:#212121}
.schrift5{font-size:30;font-family:Lucida Console,Arial,Verdana;background-color:#EEEED1;position:absolute;left:10%;top:1%;}
.rahmen1{position:absolute;left:5%;top:2%;border-width:8px;width:8px;height:1200px;border-style:ridge;padding:12px;background-color:#ff4500;}
</style>
Autor: H.Sporenberg
Einführung in HTML
Die schnellsten Autos sollen über interne Links angezeigt werden
Die ganze Seite soll als Tabelle angeordnet werden.
Links
<center><table width=90% <div class="schrift5"><tr><td><center>Die schnellsten Autos</center><center>der Welt</center></td><td><img src="AutoBilder\BannerAuto.jpg" > </td></tr></table></center></div><br><br><br><br><br><br><br>
Das Banner mit der Überschrift ist in einer Tabelle dargestellt.
Autor: H.Sporenberg
Einführung in HTML
Die schnellsten Autos sollen über interne Links angezeigt werden
In einer nächsten Tabelle werden die Verweise realisiert
Links
<center><table cellpadding=8 width=70%>
<tr bgcolor=#CDBE70><div class="schrift2"><td width=33%><a href="#Porsche" div class="schrift2"><center>Porsche</center></a> </td><td width=33%><a href="#Bugatti" div class="schrift2"><center>Bugatti</center></a> </td><td><a href="#Ferrari" div class="schrift2"><center>Ferrari</center></a></td></tr></div>
</table></center>
Autor: H.Sporenberg
Einführung in HTML
Die schnellsten Autos sollen über interne Links angezeigt werden
Die Angaben und das Bild des entsprechenden Autos werden in einer Tabelle realisiert. Dabei werden die Leistungsdaten in einer Tabelle in der Tabelle angeordnet.
Links
<center> <table cellspacing=15 >
<tr><td colspan=2><div class="schrift1"><a name="Porsche"><center>Porsche 911 TURBO</a></center> </td></div></tr>
<tr> <td><center><table cellspacing=15><tr bgcolor=#efefef><td> <div class="schrift3">Hubraum: </td><td> <div class="schrift3">3200 ccm </td></div></tr><tr bgcolor=#efefef><td><div class="schrift3">PS: </td><td><div class="schrift3">450 </td></tr></div><tr bgcolor=#efefef><td><div class="schrift3">Höchstgeschwindigkeit: </td><td><div class="schrift3">303 km/h </td></tr></div></table></center></td>
<td> <img src="AutoBilder\Porsche2.jpg" width="476" height="357"></td></tr>
</table></center>
Die blau markierte Tabelle beinhaltet die Leistungsdaten und ist im Prinzip ein Datenelement, das zweite Datenelement stellt das Bild des Autos dar.
Autor: H.Sporenberg
Einführung in HTML
Die schnellsten Autos sollen über interne Links angezeigt werden
Links
Autor: H.Sporenberg
Einführung in HTML
<ul><li>1. Kapitel</li><li>2. Kapitel</li></ul>
<ul type=“circle”><li>1. Kapitel</li><li>2. Kapitel</li></ul>
Unsortierte Liste
Eine unsortierte Liste beginnt mit einem einleitenden Tag <ul>. Jeder Listeneintrag beginnt mit dem Tag <li> und wird beendet mit dem Tag </li>. Beendet wird die Liste mit dem abschließenden Tag </ul>.
Das Aussehen der Listenpunkte kann man selbst bestimmen. Dazu wird im einleitenden Tag <ul>das type-Attribut angegeben.Dazu stehen zur Auswahl:circle – ein Kreissquare – ein Viereckdisc – ein Karo
Listen
Autor: H.Sporenberg
Einführung in HTML
<ol><li>Mars</li><li>Merkur</li></ol>
Sortierte ListeEine sortierte Liste beginnt mit einem einleitenden Tag <ol>. Jeder Listeneintrag beginnt mit dem Tag <li> und wird beendet mit dem Tag </li>. Beendet wird die Liste mit dem abschließenden Tag </ol>.
Soll die Liste nicht mit 1 sondern mit einer anderen Zahl beginnen, so wird der einleitende Tag mit start=„5“ erweitert.
Listen
<ol start=“5”><li>Mars</li><li>Merkur</li></ol>
Autor: H.Sporenberg
Einführung in HTML
<ol type=I><li>Mars</li><li>Merkur</li></ol>
Sortierte Liste
Soll die Liste mit römischen Zah-len nummeriert werden, so wird der einleitende Tag mit type = I erweitert.
Listen
Soll die Liste mit großen Buchstaben nummeriert werden, so wird der einleitende Tag mit type = A erweitert.
<ol type=A><li>Mars</li><li>Merkur</li></ol>
Autor: H.Sporenberg
Einführung in HTML
Frames teilen das Fenster in zwei oder mehr Bereiche, wobei ein größerer Bereich die Informationen und ein oder mehrere kleinere Bereiche ein Logo, Navigations-Links oder beides enthalten. Wegen des begrenzten Platzes in den meisten Browser-Fenstern empfiehlt es sich selten, mehr als zwei oder drei Frames zu verwenden.
Frames
Autor: H.Sporenberg
Einführung in HTML
1. Frames werden vielfach im Internet verwendet und zeugen oft von einer technisch ausgefeilten Seiten.2. Frames verringern die Downloadzeit.3. Frames erhöhen die Anwenderfreundlichkeit. Das Navigationsmenü bleibt sichtbar, während sich der Inhalt in einem anderen Frame ändert.4. Da Frames den Inhalt von Navigations- u. Strukturelementen trennen, kann man Seiten schnell und problemlos aktualisieren und neue Informationen anbieten.
FramesVorteile
Autor: H.Sporenberg
Einführung in HTML
Im Beispiel sollen zwei senkrechte Frames erzeugt werden. Im linken Frame soll sich das Inhaltsverzeichnis befinden, im rechten die Information.
Die Index-Seite:<frameset cols="20%,80%" border=6 bordercolor=blue > <frame src="inhalt.htm" name="InhaltsFenster"> <frame src="ersteseite.htm" name="HauptFenster"> </frameset>
Die Frame-Fenster sollten mit einem Namen versehen werden, da man so das Zielfenster der entsprechenden Seite besser angeben kann.
Frames
Autor: H.Sporenberg
Einführung in HTML
<html><head><title> ASGSG - Infokurs </title></head><frameset cols="22%,80%" border=6 bordercolor=blue > <frame src="MenueVertikal_1.html" name="InhaltsFenster"> <frame src="ersteseite.htm" name="HauptFenster"> </frameset>
<body></body></html>
FramesDas Programm, das die Frames festlegt.
Für den ersten Aufruf benötigt man neben der Seite, in der die Frames erzeugt werden, noch zwei weitere HTML-Dateien. In diesem Fall heißen diese MenueVertikal_1.html und ersteseite.html
Autor: H.Sporenberg
Einführung in HTML FramesSo sieht die Seite aus.
Autor: H.Sporenberg
Einführung in HTML FramesSo sieht die Seite aus.
Autor: H.Sporenberg
Einführung in HTML
#navcontainer { width: 200px; }
#navcontainer ul{margin-left: 0;padding-left: 0;list-style-type: none;font-size:14;font-family: Verdana,Arial, Helvetica, sans-serif;}
#navcontainer a{display: block;padding: 3px;width: 160px;background-color: #898989;border-bottom: 1px solid #eee;}
Menue 1Menues mit Hilfe von Style-Sheets
Größe der Schriftart
Farbe vor dem Besuch der Seite
Autor: H.Sporenberg
Einführung in HTML
<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>
Menue 1Menues mit Hilfe von Style-Sheets
Dieser Teil gehört in den Body der HTML-Seite
Autor: H.Sporenberg
Einführung in HTML
#navcontainer{background: #f0e7d7;width: 20%;margin: 0 auto;padding: 1em 0;font-family: verdana,georgia, serif;font-size: 13px;text-align: center;text-transform: lowercase;}
ul#navlist {text-align: left;list-style: none;padding: 0;margin: 0 auto;width: 70%;}
Menue 2Menues mit Hilfe von Style-Sheets
ul#navlist li{display: block;margin: 0;padding: 0;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML
ul#navlist li a{display: block;width: 100%;padding: 0.5em 0 0.5em 2em;border-width: 1px;border-color: #ffe #aaab9c #ccc #fff;border-style: solid;color: #777;text-decoration: none;background: #ffcc00;}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a{background: #eecc00;color: #800000;}
Menue 2Menues mit Hilfe von Style-Sheets
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML
ul#navlist li a:hover, ul#navlist li#active a:hover{color: #800000;background: transparent;border-color: #aaab9c #fff #fff #ccc;}
Menue 2Menues mit Hilfe von Style-Sheets
<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div> Das gehört in den Body
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 2Menues mit Hilfe von Style-Sheets
Und so sieht es aus
Autor: H.Sporenberg
Einführung in HTML Menue 3Menues mit Hilfe von Style-Sheets
#navcontainer ul{margin: 0;padding: 0;list-style-type: none;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
#navcontainer li { margin: 0 0 3px 0;}
#navcontainer a{display: block;padding: 2px 2px 2px 24px;border: 1px solid #333;width: 160px;background-color: #999;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 3Menues mit Hilfe von Style-Sheets
#navcontainer a:link, #navlist a:visited{color: #EEE;text-decoration: none;}
#navcontainer a:hover{border: 1px solid #333;background-color: #F60;background-image: url(images/l1_over.gif);color: #333;}
#active a:link, #active a:visited, #active a:hover{border: 1px solid #333;background-color: #FF6600;color: #333;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 3Menues mit Hilfe von Style-Sheets
<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>
Das gehört in den Body
Autor: H.Sporenberg
Einführung in HTML Menue 4Menues mit Hilfe von Style-Sheets<STYLE type=text/css>
#navcontainer{background: #f0e7d7;margin: 0 auto;padding: 1em 0 0 0;font-family: georgia, serif;text-transform: lowercase;}
/* to stretch the container div to contain floated list */#navcontainer:after{content: ".";display: block;line-height: 1px;font-size: 1px;clear: both;}
ul#navlist{list-style: none;padding: 0;margin: 0 auto;width: 80%;font-size: 0.8em;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 4Menues mit Hilfe von Style-Sheets
ul#navlist li{display: block;float: left;width: 15%;margin: 0;padding: 0;}
ul#navlist li a{display: block;width: 100%;padding: 0.5em;border-width: 1px;border-color: #ffe #aaab9c #ccc #fff;border-style: solid;color: #777;text-decoration: none;background: #f7f2ea;}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a{background: #f0e7d7;color: #800000;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 4Menues mit Hilfe von Style-SCheetsul#navlist li{display: block;
float: left;width: 15%;margin: 0;padding: 0;}
ul#navlist li a{display: block;width: 100%;padding: 0.5em;border-width: 1px;border-color: #ffe #aaab9c #ccc #fff;border-style: solid;color: #777;text-decoration: none;background: #f7f2ea;}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a{background: #f0e7d7;color: #800000;}
Das alles gehört in die CSS-Definition
ul#navlist li a:hover, ul#navlist li#active a:hover{color: #800000;background: transparent;border-color: #aaab9c #fff #fff #ccc;}</style>
Autor: H.Sporenberg
Einführung in HTML Menue 4Menues mit Hilfe von Style-Sheets
<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>
Das gehört in den Body
Autor: H.Sporenberg
Einführung in HTML Menue 5Menues mit Hilfe von Style-Sheets<style type="text/css">
<!--.indentmenu{font: bold 13px Arial;width: 100%; /*leave this value as is in most cases*/}.indentmenu ul{margin: 0;padding: 0;float: left;width: 80%; /*width of menu*/border: 1px solid #564c66; /*dark purple border*/border-width: 1px 0;background: #8B6508 url(media/indentbg.gif) center center repeat-x;}
.indentmenu ul li{display: inline;}
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 5Menues mit Hilfe von Style-Sheets.indentmenu ul li a{float: left;color: white; /*text color*/
padding: 5px 11px;text-decoration: none;border-right: 4px solid #FFEC8B; /*Farbe divider between menu items*/}
.indentmenu ul li a:visited{color: white;}
.indentmenu ul li a:hover, .indentmenu ul li .current{color: white !important; /*text color of selected and active item*/padding-top: 6px; /*shift text down 1px for selected and active item*/padding-bottom: 4px; /*shift text down 1px for selected and active item*/background: #CDBE70 url(media/indentbg2.gif) center center repeat-x;}
//--></style>
Das alles gehört in die CSS-Definition
Autor: H.Sporenberg
Einführung in HTML Menue 5Menues mit Hilfe von Style-Sheets
<body><div class="indentmenu"><ul><li><a href="http://www.dynamicdrive.com/">Home</a></li><li><a href="http://www.dynamicdrive.com/style/" class="current">CSS</a></li><li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li><li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li><li><a href="http://www.javascriptkit.com/">JavaScript</a></li><li><a href="http://www.cssdrive.com">Gallery</a></li></ul><br style="clear: left" /></div>
Das gehört in den Body
Autor: H.Sporenberg
Einführung in HTML Menue 5Menues mit Hilfe von Style-Sheets
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS
“http://www.html-seminar.de/css-definitionen-uebersicht.htm
„http://www.homepage-total.de/css/css-befehle.php
„http://www.thestyleworks.de/tut-art/layout_table.shtml
Hier kann man sich über die einzelnen Attribute informieren und im Beispiel angesehen werden.
http://www.thestyleworks.de/ref/index.shtml
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Schrift
font-family Schriftart Arial, Verdana etc.
font-size Schriftgröße Zahlenwert in pt(Punkte), mm oder cm
color Schriftfarbe red, green oder hexadezimal
font-variant Schriftvariante normal, small-caps
font-weight Schriftgewicht normal, bold, bolder lighter
font-style Schriftstil normal, oblique, italic
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Textgestaltungtext-align Textausrichtung left, right, center, justify (Blocksatz)
line-height Zeilenbstand Numerischer Wert in pt, mm oder cm
text-decoration Textgestaltung underline, overline, line-through, blink
word-spacing Wortabstand Numerischer Wert in pt, mm oder cm
letter-spacing Zeichenabstand Numerischer Wert in pt, mm oder cm
text-indent Texteinrückung Numerischer Wert in pt, mm oder cm
text-transform Textart Capitalize, uppercase, lowercase, none
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Seitenränder
margin-leftAbsoluter Abstand zum Seitenrand Numerischer Wert in pt, mm oder cm
margin-rightAbsoluter Abstand zum Seitenrand Numerischer Wert in pt, mm oder cm
margin-bottomAbsoluter Abstand zum Seitenrand Numerischer Wert in pt, mm oder cm
margin-topAbsoluter Abstand zum Seitenrand Numerischer Wert in pt, mm oder cm
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Links
A:link Link Fast alle CSS-Befehle anwendbar
A:visited Besuchter Link Fast alle CSS-Befehle anwendbar
A:active Angeklickter Link Fast alle CSS-Befehle anwendbar
A:hoverLink beim Über-fahren der Maus
Fast alle CSS-Befehle anwendbar
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Bilder
background Hintergrundfarbered, green, white usw. oder hexadezimale Farbangabe
background-image Hintergrundbild none, URL
background-repeat Kachel Repeat, repeat-x, repeat- y, no-repeat
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Ränder
border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-bottom-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-left-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-right-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-style Rahmentypnone, dotted, dashed, solid, double, groove, inset, outset
border-color Ramenfarbe Farbname oder hexadezimal
Autor: H.Sporenberg
Einführung in HTMLZusammenstellung CSS - Befehle
Befehl Bedeutung Mögliche Angaben
Ränder
padding-top Tabellenabstand oben Prozent oder num. Wert
padding-bottom Tabellenabstand unten Prozent oder num. Wert
padding-right Tabellenabstand rechts Prozent oder num. Wert
padding-right Tabellenabstand links Prozent oder num. Wert
width Rahmenbreit Auto, Prozent oder num. Wert
height Rahmenhöhe Auto, Prozent oder num. Wert