HTML - Sporenberg
Werbung
Einführung in HTML
<HTML>
Die Befehle, die man für die Erstellung einer
HTML-Seite benötigt, heißen TAGS (TAG
(engl.) -> Auszeichner).
<HEAD>
<TITLE>ASGSG – Marl
</TITLE>
</HEAD>
Die TAGS werden in spitze Klammern
geschrieben.
<BODY >
Meine Schule
</BODY>
Das Schließen der TAGS geschieht
durch Voranstellen eines Schrägstrichs.
</HTML>
Autor: H.Sporenberg
In der Regel werden TAGS geöffnet
und dann geschlossen.
z.B.: <HTML> ….
</HTML>
Die TAGS unterliegen nicht der Groß- und
Kleinschreibung. So sind folgende
Schreibweisen äquivalent:
<HTML> = <html> = <Html> usw.
Einführung in HTML
<HTML>
<HEAD>
<TITLE>ASGSG – Marl
</TITLE>
</HEAD>
<BODY >
Meine Schule
</BODY>
</HTML>
Autor: H.Sporenberg
Der Text bildet das Grundgerüst einer HTMLSeite.
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.
Einführung in HTML
<HTML>
<HEAD>
<TITLE>ASGSG – Marl
</TITLE>
</HEAD>
<BODY bgcolor=blue>
<H1>Meine Schule</H1>
</BODY>
</HTML>
Autor: H.Sporenberg
Ü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
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>
Autor: H.Sporenberg
Tabellen
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.
Einführung in HTML
Tabellen
<TABLE border=“3“
bordercolor=blue cellspacing=5
cellpadding=5>
<TR>
<TD>1.Feld</TD>
<TD>2.Feld</TD>
</TR>
Mit Hilfe von Attributen, die im
TABLE-Tag angegeben werden,
kann die Tabelle auch optisch
gestaltet werden.
<TR>
<TD>3.Feld</TD>
<TD>4.Feld</TD>
</TR>
</TABLE>
Autor: H.Sporenberg
Wichtige Attribute sind: border, bordercolor,
cellspacing, cellpadding
Einführung in HTML
Tabellen
<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>
Autor: H.Sporenberg
Aufgabe: Stelle deinen
Stundenplan in einer HTMLTabelle dar.
Einführung in HTML
Tabellen
<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>
Autor: H.Sporenberg
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.
Einführung in HTML
Tabellen
Formatieren einer Tabelle
<tr bgcolor=#cdcdcd>
<td colspan=3> GSG - MARL</td>
</tr>
Autor: H.Sporenberg
Die maximale Anzahl der
Spalten ist 3. In der ersten
Zeile werden drei Spalten
zusammengefasst. Dies
geschieht durch das Attribut
colspan mit der entsprechenden Anzahl von Spalten
Einführung in HTML
Tabellen
Formatieren einer Tabelle
<tr bgcolor=#cdcdcd>
<td >4. Feld</td>
<td colspan=2>5. Feld</td>
</tr>
Autor: H.Sporenberg
In der dritten Zeile werden
zwei Spalten zusammengefasst. Dies geschieht
wieder durch das Attribut
colspan mit der entsprechenden Anzahl von
Spalten. Eine Spalte bleibt
normal.
Einführung in HTML
Tabellen
Formatieren einer Tabelle
Es können auch Zeilen
zusammengefasst werden.
Dies geschieht durch rowspan
mit der entsprechenden
Anzahl von Zeilen.
Autor: H.Sporenberg
<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>
Einführung in HTML
Formulare
Die Auswahlliste
<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.
<select ...> leitet eine Auswahlliste ein. 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. Mit <option>...</option>
definieren Sie zwischen dem einleitenden <select>-Tag und dem
Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste.
Autor: H.Sporenberg
Einführung in HTML
Formulare
Einzeilige Eingabefelder
<FORM>
Vorname:<br><INPUT name="vorname" type="text" size="30" maxlength="30">
</FORM>
<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.
Autor: H.Sporenberg
Einführung in HTML
Formulare
Mehrzeilige Eingabebereiche
<FORM>
<textarea name=„Benutzer_Eingabe" cols="50" rows="10"></textarea>
</FORM>
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
Autor: H.Sporenberg
Einführung in HTML
Formulare
Radio-Buttons
<FORM>
Männlich/Weiblich?
<input type=radio name=„Geschlecht“ value=„m“>männlich
<input type=radio name=„Geschlecht“ value=„w“>weiblich
</FORM>
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.
Autor: H.Sporenberg
Einführung in HTML
Formulare
Check-Buttons
<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>
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.
Autor: H.Sporenberg
Einführung in HTML
Links
<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>
Ein interner Link wird gesetzt,
um innerhalb einer HTML-Seite
verschiedene Bereiche auf dieser
Seite zu erreichen.
<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}
Autor: H.Sporenberg
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.
Einführung in HTML
Links
Die schnellsten Autos sollen über interne Links angezeigt werden
Als erstes definiert man die unterschiedlichen CSS-Formatierungen
<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;}
Autor: H.Sporenberg
</style>
Einführung in HTML
Links
Die schnellsten Autos sollen über interne Links angezeigt werden
Die ganze Seite soll als Tabelle angeordnet werden.
<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
Links
Die schnellsten Autos sollen über interne Links angezeigt werden
In einer nächsten Tabelle werden die Verweise realisiert
<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
Links
Die schnellsten Autos sollen über interne Links angezeigt werden
<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>
Autor: H.Sporenberg
Die Angaben und das Bild des
entsprechenden Autos werden in
einer Tabelle realisiert. Dabei werden
die Leistungsdaten in einer Tabelle in
der Tabelle angeordnet.
<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.
Einführung in HTML
Links
Die schnellsten Autos sollen über interne Links angezeigt werden
Autor: H.Sporenberg
Einführung in HTML
Listen
<ul>
<li>1. Kapitel</li>
<li>2. Kapitel</li>
</ul>
<ul type=“circle”>
<li>1. Kapitel</li>
<li>2. Kapitel</li>
</ul>
Autor: H.Sporenberg
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 Kreis
square – ein Viereck
disc – ein Karo
Einführung in HTML
Listen
<ol>
<li>Mars</li>
<li>Merkur</li>
</ol>
Sortierte Liste
Eine 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.
Autor: H.Sporenberg
<ol start=“5”>
<li>Mars</li>
<li>Merkur</li>
</ol>
Einführung in HTML
Sortierte Liste
Listen
Soll die Liste mit römischen Zahlen nummeriert werden, so wird
der einleitende Tag mit type = I
erweitert.
<ol type=I>
<li>Mars</li>
<li>Merkur</li>
</ol>
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.
Autor: H.Sporenberg
Frames
Einführung in HTML
Frames
Vorteile
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.
Autor: H.Sporenberg
Einführung in HTML
Frames
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.
Autor: H.Sporenberg
Einführung in HTML
Frames
Das Programm, das die Frames festlegt.
<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>
Autor: H.Sporenberg
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
Einführung in HTML
Autor: H.Sporenberg
Frames
So sieht die Seite aus.
Einführung in HTML
Autor: H.Sporenberg
Frames
So sieht die Seite aus.
Einführung in HTML
Menue 1
Menues mit Hilfe von Style-Sheets
#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;}
Autor: H.Sporenberg
Größe der Schriftart
Farbe vor dem Besuch der Seite
Einführung in HTML
Menue 1
Menues 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>
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%;}
Autor: H.Sporenberg
Menue 2
Menues mit Hilfe von Style-Sheets
ul#navlist li
{display: block;
margin: 0;
padding: 0;}
Das alles gehört in
die CSS-Definition
Einführung in HTML
Menue 2
Menues mit Hilfe von Style-Sheets
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;}
Autor: H.Sporenberg
Das alles gehört in
die CSS-Definition
Einführung in HTML
Menue 2
Menues mit Hilfe von Style-Sheets
ul#navlist li a:hover, ul#navlist li#active
a:hover
{color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;}
Das alles gehört in
die CSS-Definition
<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 2
Menues mit Hilfe von Style-Sheets
Und so sieht es aus
Autor: H.Sporenberg
Einführung in HTML
Menue 3
Menues 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;}
Autor: H.Sporenberg
Das alles gehört in
die CSS-Definition
Einführung in HTML
Menue 3
Menues 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;}
Autor: H.Sporenberg
Das alles gehört in
die CSS-Definition
Einführung in HTML
Menue 3
Menues 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
Das alles
gehört in die
CSS-Definition
Autor: H.Sporenberg
Menue 4
Menues 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;}
Einführung in HTML
Menue 4
Menues mit Hilfe von Style-Sheets
ul#navlist li{display: block;
float: left;width: 15%;margin: 0;padding: 0;}
Das alles
gehört in die
CSS-Definition
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; }
Autor: H.Sporenberg
ul#navlist li#active a{background: #f0e7d7;
color: #800000;}
Einführung in HTML
Menue 4
Menues mit Hilfe von StyleSCheets
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;}
Autor: H.Sporenberg
Das alles
gehört in
die CSSDefinition
ul#navlist li a:hover,
ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #aaab9c #fff
#fff #ccc;}
</style>
Einführung in HTML
Menue 4
Menues mit Hilfe von Style-Sheets
<div id="navcontainer">
Das gehört in den Body
<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>
Autor: H.Sporenberg
Einführung in HTML
Menue 5
Menues 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;}
Autor: H.Sporenberg
Das alles
gehört in die
CSS-Definition
Einführung in HTML
Menue 5
Menues 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*/
}
Das alles
gehört in die
CSS-Definition
.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>
Autor: H.Sporenberg
Einführung in HTML
Menue 5
Menues mit Hilfe von Style-Sheets
<body>
Das gehört in den 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>
Autor: H.Sporenberg
Einführung in HTML
Autor: H.Sporenberg
Menue 5
Menues mit Hilfe von Style-Sheets
Einführung in HTML
Zusammenstellung 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 HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
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
Schrift
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
text-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
Textgestaltung
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
margin-left
Absoluter Abstand
zum Seitenrand
Numerischer Wert in pt, mm oder cm
margin-right
Absoluter Abstand
zum Seitenrand
Numerischer Wert in pt, mm oder cm
margin-bottom
Absoluter Abstand
zum Seitenrand
Numerischer Wert in pt, mm oder cm
margin-top
Absoluter Abstand
zum Seitenrand
Numerischer Wert in pt, mm oder cm
Seitenränder
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
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
Fast alle CSS-Befehle anwendbar
A:hover
Link beim Überfahren der Maus
Links
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
background
Hintergrundfarbe
red, green, white usw. oder
hexadezimale Farbangabe
background-image
Hintergrundbild
none, URL
background-repeat
Kachel
Repeat, repeat-x, repeat- y, no-repeat
Bilder
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
border-top-width
Dicke der Rahmenlinie
thin, medium, thick oder num. Wert
border-bottomwidth
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
Rahmentyp
none, dotted, dashed, solid, double,
groove, inset, outset
border-color
Ramenfarbe
Farbname oder hexadezimal
Ränder
Autor: H.Sporenberg
Einführung in HTML
Befehl
Zusammenstellung CSS - Befehle
Bedeutung
Mögliche Angaben
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
Ränder
Autor: H.Sporenberg
