HTML-Schnipsel

Zurück zum Script-DB Eingang



http://project-icarus.de/erleuchtet/Script-DB/index.htm




Tabellen

Tabellen



Tabellen - Angaben

Cellspacing= x : Linienbreite zwischen den Zellen
bei Border = y Rahmendicke (unterschiedlich)
Cellpadding= z Abstand von der Linie

Heading <TH> Automatisch Fett
BorderColor= Rahmenfarbe (ab Vers. 2/3)

HSPACE=x und VSPACE=y (horizontale und vertikaler Abstand zum Text) funktioniert im Netscape auch bei Tabellen wie bei Bildern, nicht aber im Internet Explorer.





Tabellenzellen-Highlight



Tabellen - Farbwechsel

Message 1/3 From Stefan Muenz Mar 13, 98 07:41:15 am +0100

>>gibt es eine Möglichkeit, mit OnMouseOver/OnMouseOut die
Hintergrundfarbe eines TABELLENFELDES zu verändern?

Geht beim MS IE 4 mit Dynamic HTML:

<td id="Zelle"
onMouseover="document.all.Zelle.style.backgroundColor='#FFFFCC'"
onMouseout="document.all.Zelle.style.backgroundColor='#FFFFFF'">



--------------------------


Andere Methode:

Hintergrundfarben für Tabellenzeilen bei Berührung mit dem Mauszeiger verändern:


<TR onMouseOver = "this.bgColor='#FFFFCC'"
onMouseOut = "this.bgColor='#FFFFFF'" >

Achtung: "bgColor" so schreiben!




Keine Ränder in Netscape






Keine Ränder in Netscape - Tabellen

1. Im Quelltext keine Leerstelle oder Zeilenumbrüche zulassen

2. <TABLE CELLSPACING="0" Border="0" CELLPADDING="0" >






Vertikale Linien in Tabellen



Vertikale Linien in Tabellen

< td bgcolor = black width = 0 > < BR > < / TD > ( ! )
< td bgcolor = white > Text. . . < / TD > ( ! )
< td bgcolor = black width = 0 > < BR > < / TD > ( ! )





Besonderer Rand bei Tabellen



Besonderer Rand bei Tabellen

* Zwei Tabellen ineinander schachteln und in die äußere als Hintergrund ein animiertes GIF plazieren ergibt einen animierten Rand bei der inneren Tabelle.

* Eine Tabellenzelle in eine andere gebracht ergibt 3-D Rahmen; Farbe des Hintergrundes und der Borders sollten gleich sein!

* Border=1, Cellspacing=0 Tabellenlinie hauchdünn!

* Border=1- Tabelle in einer Tabelle mit Border= 3 ergibt einen schönen Bilderrahmen; für Bild, Rahmen und Hintergrund die gleiche Farbe nehmen.





CSS

Moz Styles




style="background: yellow;"

wird in vielen Editoren automatisch zu


style="background: yellow none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"

oder etwas ähnlichem.



Richtig ist:

style="background-color: yellow;"






CSS Allgemein & Absätze




CSS Allgemein


Auf der Seite selber sollten CSS-Anweisungen wie JavaScript auskommentiert werden:


<style type="text/css">
<!--

/* ... Hier werden die Formate definiert ... */

element{style}

-->
</style>



-----------



- Um in MAC und Windows-Systemen in CSS die gleiche Schriftgröße zu erzeugen, die Textgröße nicht in Punkt (pt) angeben, sondern in Pixel (px)

- Schriften immer relativ skalieren: font-size: 0.9 em; letter-spacing: 0.1 em; (oder %)

Achtung: Dezimal-Bruchteile in CSS - Formatierungen nicht mit dem deutschen Dezimal-Komma, sondern mit dem amerikanischen Dezimal-Punkt schreiben (0.5 statt 0,5!)


-----------



ACHTUNG: Ein CSS-Style überschreibt alle "Standard" - Formatierungen:


1) Absätze


p {margin: 0px;}

setzt alle Absatz- Abstände auf NULL!


Achtung: BR läßt sich nicht formatieren, da inhaltslos!




2) - Normalerweise werden in HTML mehr als ein Absatz

<P>
<P>

dargestellt wie ein einzelner:
<P>

- aber mit dieser CSS-Anweisungen läßt sich dieses zumindest einigen Browsern verhindern:


<style type="text/css">
<!--
p
{
font-size: 15px;
line-height:22px;
padding: 4px;

font-weight: bold;
}
-->
</style>

<P>

1 P, wie hier:
<P>

= 2 BR, wie hier:
<BR>
<BR>

Dagegen ergeben 2 P, wie hier:
<P>
<P>

Das Selbe wie 4 BR, wie hier:
<BR>
<BR>
<BR>
<BR>

-oder?

<P>
<P>
<P>
<P>
<P>
<P>
------------
<P>
Ende


http://project-icarus.de/erleuchtet/autostyle/_einzelne/ul-styles.htm


-----------



WICHTIG:

Häufig werden externe CSS-Dateien benutzt, um HTML-Dateien zu formatieren.
Manchmal werden diese über die Formel:
<style>
<!--
@importurl(datei.css);-->
</style>
eingebunden, wobei die 'datei.css' folgende Form hat:
<style type="text/css" >
<!--
body {font- family:... }
-->
</style>

Etliche Mozilla- Browser verstehen diese Anweisung nicht.

Sicherer ist es, CSS-Dateien grundsätzliche über
<link rel="stylesheet" type="text/css" href="datei.css">
einzubinden.

Allerdings darf dann in der CSS-Datei KEIN
<style type="text/css" >
<!--
stehen, sondern nur:
body {font-family:... }


Allgemeine Font-Families:

serif (ähnlich Times)
sans-serif (ähnlich Helvetica)
cursive (ähnlich Zapf-Chancery)
fantasy (ähnlich Western)
monospace (ähnlich Courier)


Achtung: Alle CSS-Formatierungen im <BODY> -Tag gelten für alle anderen, sofern für diese nichts anders angegeben wird!

<BR> -Tags sind dagegen ohne Inhalt.



-----------


CSS-Pseudoklassen 'before' und 'after':

Mit den CSS-Pseudoklassen "before" und "after" kann man beliebigen CSS-Elementen einen bestimmten Inhalt vorsetzen oder nachstellen.

Die folgende Zeile bewirkt, dass jedem Absatz ein Bindestrich vorgestellt wird:

p:before {content : " - ";}

Die folgende Zeile stellt jedem Absatz, der mit der Klasse "euro" versehen wurde, den Begriff " Euro" nach:

p.euro:after {content : " Euro";}

Achtung: Der Internet Explorer bis zur Version 6 kennt diese Pseudoklassen nicht.





CSS und Javascript




Unterschiede CSS- JavaScript


In CSS:

<INPUT TYPE="text" VALUE="hallo" SIZE="12" MAXLENGTH="15" readonly
style="background-color:#E5E5E5; border:0;" NAME="TEST" >

---

Die selbe CSS-Anweisung muß in Java Script anders geschrieben werden als in reinem CSS, ohne Bindestrich und Doppelpunkt:


---


In Java Script:


<INPUT TYPE="text" VALUE="hallo" SIZE="12" MAXLENGTH="15" readonly NAME="TEST" >

<SCRIPT type="text/javascript" language="JavaScript">
<!--
...

document.forms.xyz.TEST.style.backgroundColor='#E5E5E5';

document.forms.xyz.TEST.style.border='0';

document.links[2].style.background = 'url(unknown.gif)';

document.links[2].style.backgroundRepeat = 'no-repeat';

document.links[2].style.backgroundPosition = 'right';
...

// -->
</SCRIPT>


- - -

ACHTUNG!

Will man in diesem Bereich eine Variable setzen, in

document.links[2].style.background = 'url(unknown.gif)';

document.links[2].style.background = "url('"+variable+".gif')";

setzen, aber:

document.links[2].style.backgroundPosition = variable;

--

Statt "style.background" läßt sich auch "style.backgroundImage" setzen - klarer.

! Es scheint fast so zu sein, daß zumindest in CSS die Hintergrundbilder nicht mehr als eine Ebene von der Hauptdatei entfernt sein dürfen!

! Die gesetzten Styles z.B. für "background" lassen sich nicht einzeln ändern, sondern immer nur alle zusammen!



---

Mehr dazu:
http://project-icarus.de/erleuchtet/hilfe/autoform.htm


NB: In JavaScript die Elemente einer bestimmten Klasse finden:

document.getElementsByClassName('Klasse')

- unbedingt die Großschreibung beachten!





Beim Drucken anders



- Unterdrückt die Navigationsleiste beim Drucken:

<div id="kopf"> ... </div>
<div id="menue"> ... </div>

@mediaprint {#kopf, #menue {display: none}; }


-----------


Druckseiten formatieren:

Dazu dient die CSS-Funktion &quo "@page"
Der Browser greift auf die hier definierten Werte nur dann zu, wenn die aktuelle Seite an den Drucker geschickt wird:

@page{margin : 4.0cm 4.0cm 3.5cm 4.5cm; /* Abstände definieren: oben unten links rechts */ }

@pagebesitzt zwei Pseudoklassen, mit deren Hilfe man die Formatierungen von linken und rechten Seiten unterschiedlich definieren kann:

@page:leftund @page:right




Verschiedenfarbige Listen




- Verschiedenfarbige Optionslisten:

<Select size=2 name="liste">
<Option style="color:red;">rot</Option>
<Option style="color:navy;">blau</Option>
</Select>


(Internet Magazin 08/06)

Ähnlich:

<Strong style="color:green"> </Strong>




Bereiche anders formatieren




- Bestimmte Standard-Tags in bestimmten Bereichen über eine eigene Klasse gesondert formatieren:

p. fliesstext span { font-style:italic;}

formatiert alle <SPAN> - Bereiche in jedem fliesstext- Absatz kursiv

(Internet Magazin 07/06)


-----------


- In einem bestimmten Bereich Absatzabstand anders zu definieren:

div.#xybereich p {margin: 5px;}

---


- Macht die erste Zeile fett:

div.#xybereich:first-line
{ font-weight:bold; }



-----------


- Setzt oberhalb einer Tabelle einen Abstand:

table { margin-top: 20px; }


- Setzt bei Paragraphen NUR innerhalb einer Tabelle einen bestimmten Abstand:

td p { margin: 5pt; }


Achtung: muß einzeln stehen, unterhalb der generellen TABLE-Anweisungen.





Checkboxen formatieren




Checkboxen formatieren


Man kann Formular - Auswahlboxen (Checkboxen) in neueren Browsern mit CSS formatieren - beispielsweise die Checkbox unsichtbar machen - und evtl. durch ein Hintergrundbild ersetzen; dieses ist automatisch aktiv.

Gleichzeitig kann man den Textbereich durch den LABEL - Tag mit aktiv machen und je nach Zustand über CSS anders gestalten.

Damit beides gleichzeitig möglich ist, müssen

1) die Label HINTER den Checkboxen stehen und

2) mit der Checkbox über die Id Verbunden sein.



<HTML>


<STYLE type="text/css">


#Teil_1
{visibility: hidden;}

.Klasse_2
{visibility: hidden;}

.ROT
{
padding: 3px 0px 3px 24px;
margin: -24px;
background-image: url(O.gif);
background-position: left;
background-repeat: no-repeat;
}


.Klasse_2:hover + .ROT {background-color: red;}
.Klasse_2:active + .ROT {background-color: red;}
.Klasse_2:checked + .ROT
{
background-color: red;
background-image: url(X.gif);
}

.Klasse_1:hover + .GRN {background-color: green;}
.Klasse_1:active + .GRN {background-color: green;}
.Klasse_1:checked + .GRN {background-color: green;}

.Klasse_3:hover + .GLB {background-color: yellow;}
.Klasse_3:active + .GLB {background-color: yellow;}
.Klasse_3:checked + .GLB {background-color: yellow;}


</STYLE>

<BODY>


<FORM NAME="Suche" >

<INPUT class="Klasse_1" Type="checkbox" ID="Teil_1" NAME="Eins" ><LABEL for="Teil_1" class="GRN"> Ohne Checkbox - über ID </LABEL><BR>

<INPUT class="Klasse_2" Type="checkbox" ID="Teil_2" NAME="Zwei" ><LABEL for="Teil_2" class="ROT"> Ohne Checkbox - über Klasse </LABEL><BR>

<INPUT class="Klasse_3" Type="checkbox" ID="Teil_3" NAME="Drei" ><LABEL for="Teil_3" class="GLB"> Mit Checkbox </LABEL><BR>

</FORM>


</BODY>
</HTML>





Auswahl-Buttons formatieren




Auswahl-Buttons formatieren



<INPUT TYPE="Radio" class="Klasse1" >


In CSS:

INPUT.Klasse1

/* setzt den Auswahlknopf von der Schrift ab */
{margin: 10px;}


/* Versteckt den Auswahlknopf generell */
{visibility: hidden;}


---


Für die Markierung der Beschreibung allein als Block genügt ein <SPAN > ... </SPAN>


1) Will man jedoch den Auswahl-Button und die Beschreibung GEMEINSAM als
Block farbig hinterlegen und markieren, muß man ein

<P mit einer Klasse (und ggf. ID) >
vor diesen setzen - und ein leeres
<P>
dahinter (und diesen Absatz ggf. mit CSS entsprechend verrücken).


2) Will man den so geschaffenen Hintergrund selbst aktiv (anklickbar) machen,
kann man diesen zusätzlich (!) mit den entsprechenden LABEL-Tags umgeben.

So kann man sogar VOR den Radio-Button einen Text setzen - allerdings wird
dessen Hintergrundfarbe nicht geändert. Das geschieht mit Hilfe von JavaScript.

- Hier auf die Schreibweise achten, auch auf die Groß- und Kleinschreibung -

Es heißt:

getElementsByClassName

aber
getElementById


- Unbedingt vor jeden so aktivierten Hintergrund ein </P> setzen, falls
davor bereits ein P steht (das Setzen der </P>, und wohin, ist entscheidend).


- Auf diese Weise wird der Hintergrund mitsamt dem Radio-Button und dem
zugehörigen Text aktiv und reagiert auf Mausbewegungen und - klicks.


Folgenden Quelltext als HTML-Dokument speichern und ausprobieren:



<HTML>
<HEAD>


<STYLE type=text/css>

P.Klasse1
{
background-color:lightgreen;
padding: 0px 4px 0px 4px;
}

P.Gelb
{
background-color:yellow;
padding: 0px 4px 0px 4px;
}

.Klasse1:hover
{background-color: Yellow;}

</STYLE>


<SCRIPT type="text/javascript">

<!--

// Entweder

function HG_Orange ()
{

for (var i = 0; i < document.getElementsByTagName("p").length; i++)
{

if ( document.getElementsByClassName("Klasse1")[i].checked==true)
{document.getElementsByClassName("Klasse1")[i-1].style.backgroundColor = "#FF9933";}

else
{
// Stellt alle anderen zurück:
// document.getElementsByClassName("Klasse1")[i].style.backgroundColor = "lightgrey";
}

}
}

// Oder

function HG_Rot ()
{

for (var i = 0; i < document.Testform.Auswahl.length; i++)
{

k=''+(i+1);
// Diese Konstruktion dient dazu, aus einer Zahl einen Wert zu machen
// document.getElementById("i") wäre sonst der Buchstabe i

// alert (k);

if (document.Testform.Auswahl[i].checked==true)
{document.getElementById(k).style.backgroundColor = "red";}

else
{
if (document.Testform.Auswahl[i].checked==false)
{document.getElementById(k).style.backgroundColor = "Klasse1";}

}
}
}


// Noch besser*:


function HG_Gelb()
{

for (var y = 0; y < document.getElementsByName("Auswahl").length; y++)
{
var p = document.getElementsByName("Absatz1")[y].id;


if (document.getElementsByName("Auswahl")[y].checked==true)
{
document.getElementById(p).className = "Gelb";
}

else
{
document.getElementById(p).className = "Klasse1";
}

}
}

// Der Trick ist u. a., daß die P - IDs reine Zahlen sind und somit hochgezählt werden können
// Einzeln ausprobieren!

// Statt einer neuen Hintergrundfarbe könnte man für <P> auch eine neue Klasse angeben
// Den Umbruch- TAG <BR> mit einer Klasse zu versehen ist sinnlos, da er ohne Inhalt ist.


//-->

</SCRIPT>


</HEAD>
<BODY OnLoad="HG_Orange();HG_Rot();HG_Gelb();" >


<FORM NAME="Testform" ACTION="etwas" METHOD="post">

<TABLE BORDER="4" CELLSPACING="0" CELLPADDING="20" WIDTH="200">
<TR>

<TD WIDTH="100">

<P>Doppeltes Label:

wichtig:</P>

<LABEL for="Auswahl1"><P ID="1" name="Absatz1" class="Klasse1">Vor </LABEL>
<INPUT ID="Auswahl1" TYPE="Radio" VALUE="fff" name="Auswahl" name="Absatz1" class="Klasse1" OnClick="HG_Orange();">
<LABEL for="Auswahl1">SPAN ist nicht notwendig </P></LABEL>

<P>wichtig:</P>

<LABEL for="Auswahl2"><P ID="2" name="Absatz1" class="Klasse1" ></LABEL>
<INPUT ID="Auswahl2" TYPE="Radio" VALUE="fff" name="Auswahl" name="Absatz1" class="Klasse1" OnClick="HG_Gelb();">
<LABEL for="Auswahl2">SPAN ist nicht notwendig </P></LABEL>


<P>wichtig:</P>

<LABEL for="Auswahl3"><P ID="3" name="Absatz1" class="Klasse1" ></LABEL>
<SPAN STYLE="background-color:grey; ">
<INPUT ID="Auswahl3" TYPE="Radio" VALUE="fff" name="Auswahl" class="Klasse1" OnClick="HG_Rot();">
<LABEL for="Auswahl3"><BR>
SPAN ist nicht notwendig, bindet aber das Verhalten </P></SPAN></LABEL>

<P>wichtig:</P>

<INPUT TYPE="Radio" VALUE="fff" name="Auswahl" > Leer machen: Hier aktivieren + Seite neu laden (F5)

</TD>
</TR>
</TABLE>
</FORM>


<U>Achtung</U>: Nicht die Elemente im Formular hochzählen lassen,
<P>
(document.Testform.Auswahl.length;)
<P>
Sondern im gesamten Dokument:
<P>
(document.getElementsByName("Auswahl").length)
<P>
Sonst gibt es insbesondere bei nur einem Element unerklärliche Zählfehler!
</BODY></HTML>






Hintergrundbild nicht kacheln



- Verhindert, daß das Hintergrundbild nach rechts gekachelt (wiederholt) wird:

body {background-image: url("yx.gif"); background-repeat: repeat-y; }




Bilder, Sounds, Texte einbinden

Einbindung von Textdateien



Einbindung von äußeren Text- oder HTML- Dateien in HTML-Dateien


http://project-icarus.de/erleuchtet/autostyle/_frametext/iframetext.htm


Geht u.a.

I. mit Iframes:

In allen gängigen Browsern bis auf NetScape 4 / MS Internet Explorer 3:

MSIE ab 4,
NS ab 6,
Mozilla,
Konqueror 3,
Opera 7,


<TABLE>
<TR>
<TD WIDTH=488 ALIGN=LEFT VALIGN=TOP>
<BR>
-- Erläuterungstext --
<BR>
<iframe src="frametext.txt" width="488" height="200" noresize scrolling=auto
hspace=0 vspace=0 frameborder=0 marginheight=0 marginwidth=0 align="left"
>
<BR>
<Div align=centeR>
Ihr Browser unterstützt leider keine I-Frames. <a href="frametext.txt" target="_blank">Klicken Sie hier</a>, um den Text in einem neuen Fenster zu öffnen.
</Div>
</iframe>
<BR>
</TD>
</TR>
</TABLE>

Oder

II. mit object data

<object data="frametext.txt" type="text/plain" width="600" height="400" >
</object>


Bei Einbindung von Textdateien keine Hintergrundfarbe angeben.


--------------


http://project-icarus.de/erleuchtet/autostyle/_frametext/iframetext.htm


Dynamische Texte in Iframes

Reine Texte können als Text-Dateien auf HTML-Seiten in so genannten IFRAMES dargestellt und dort leicht ausgetauscht und aktualisiert werden. Online ist dieses teilweise sogar dynamisch mit JavaScript möglich - in Abhängigkeit vom Browser und deren Standardisierung.

Gespeichert werden die Inhalte der Iframes jedoch nur bei Speicherung als 'vollständige Webseite', und zwar in den dazugehörigen Dateien; auch im Falle von dynamisch mit Javascript generiertem Inhalt funktioniert das meistens.

So kann man heute schon über dem Umweg über Iframes den Inhalt von Javascript - generierten Seiten vom Nutzer auf die Festplatte speichern lassen.



--------------




Hintergrundmusik



Hintergrundmusik

für den Internet Explorer
und Netscape browser


<EMBED SRC="music.mid" AUTOSTART="TRUE"
LOOP="TRUE" WIDTH="145" HEIGHT="60"
ALIGN="CENTER">

<NOEMBED>

<BGSOUND
SRC="music.mid" PLAYCOUNT="10">

</NOEMBED>

</EMBED>




Einbindung von MIDI und WAV



Einbindung von MIDI und WAV - Dateien

In die Homepage zum automatischen abdudeln für Internet Explorer und Netscape :

<head>
<!-- Internet Explorer -->
<bgsound src="datei.mid" loop=infinite>
</head>

<body>
<!-- Netscape -->
<embed src="datei.mid" autostart=true loop=true hidden=true height=0 width=0>
</body>

Alle zusammen:

<SCRIPT LANGUAGE="JavaScript">
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=sound.mid LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=sound.mid AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
</SCRIPT>
<!-- END OF SCRIPT -->

(Aus: NoteTab Library!)







Bilder



Bilder


* Gifs: Max. 256 Farben

Interlaced 89a:
Bild zuerst grobkörning - > wird feiner

Gut bei großen Bildern, die Bilder sind schneller grob geladen; Nachteil: die Bilddateien sind 10% größer.


* WPG oder WMF erzeugen Vektorgrafiken:

* Vektor - jpgs: Hohe Auflösung, keine Stufen, leicht zu skalieren


--------


* Bilder vor der rechten Maustaste schützen: Als Hintergrund in eine Tabelle einbinden, ein Blind- Gif in gleicher Größe darüberlegen.


* Auch eine leere SRC-Angabe erzeugt ein Blind- Gif:

<IMG alt="" src="" width=5 height=10 > </IMG>


--------


Schrägen:

Bilder im Malprogramm schräg ziehen und rechtwinklig ausschneiden



Hintergründe:

Bei Uni - farbigen Gifs für Hintergründe ist es fast egal, ob sie aus 20 oder 2000 Pixeln bestehen, also: mindestens 1300 Pixel lang, besser noch 2000 x 2000





Bilder - Attribute




Bilder - Attribute


* Wenn man kein WIDTH angibt, dann wird der ALT - Kommentar in Netscape voll ausgeschrieben, in Microsoft Internet Explorer nicht - wenn das Bild fehlt.

* Dafür zeigt der Netscape den ALT - Text bei verlinkten Bildern nicht an, der MSIE wohl

* Man kann im Internet Explorer auch im Quelltext einen Umbruch im ALT - TAG erzeugen, der Internet Explorer übernimmt diesen. Netscape nicht.

* Alternativ zum direkten Zeilenumbruch: &#13;&#10; / Angeblich ohne Leerzeichen dahinter und einem davor wg. Netscape (Tip: Internet Magazin 03 /02). Zeigt im Netscape 4 keine Wirkung; auch nicht in einer Body- Vorgabe bei e-mails. &#10; gilt auch als Zeilenumbruch in 'TITLE'-Attributen.

* <img src="xxx.gif" height="0" width="0">

ergibt ein Bild nicht von 0, sondern 1x1 Pixel.





Bilder Übergang



Bilder II

Ersatz von schwarzweiß - Bildern mit bunten (schwarzweiß - Bild linienweise mit Farbe füllen lasssen, statt animiertem Gif ) :


< IMG lowsrc="sw-bild.jpg" src="farbbild.jpg" alt=text>

Bilder vor der rechten Maustaste schützen: Als Hintergrund in eine Tabelle einbinden, ein Blind- Gif in gleicher Größe darüberlegen.






Layout

Farben



Standard- Farben sind z.B.:

"black" "maroon" "green" "olive" "navy" "purple" "teal" "gray" "silver" "red" "lime" "yellow" "blue" "fuchsia" "aqua" "white"

- es gibt noch mehr.

---

Die Standard- Linkfarbe ist TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000" >




Pre-formatiert



Mit

"PRE"

formatierte Texte bilden das Schriftbild 1:1 ab. Gut für Listen, Tabellen etc.

Farbe und Größe, Schriftart und Schnitt lassen sich vorher einstellen, werden aber in verschiedenen Browsern unterschiedlich dargestellt.

Die voreingestellte Schriftart ist "Courier"

------

<p>
<font face="Courier New,Courier" color=red size=+1>
<pre>
<b>

_ _

SCHRIFT BILD

ODER
._ _.
/ / \ \
I O I
\ .^. /

MUSTER


<b>
</pre>
</font>
</p>

-----

ACHTUNG! Tabulatoren und Leerzeichen werden grundsätzlich unterschiedlich dargestellt!




Bild auf Höhe zentrieren



Zentriert Bild und Text auf der Seite unabhängig von der Fenstergröße, in der Höhe und in der Breite.


Die Tabelle paßt sich automatisch an Fensterhöhe und -breite an und das Bild füllt die Tabellenbreite voll aus (dieTabelle zentriert auch auf HÖHE, das reine Bild nicht).


Tabelle auf 100% Höhe und Breite mit Bild auf 100% Breite:


1) MSIE: keine Probleme.

<TABLE align=center width="100%" height="100%" Border=4 >
<TR align=center >
<TD align=center >
<A HREF="123.html">

<IMG SRC="welcome.gif" width="100%"
ALT="Welcome" Border=0 align=center>
</IMG>

</A>

</TD>
</TR>
</TABLE>



2) Mozilla:

Regel1: Keine <P> zwischen Body und Tabelle - auf keinen Fall oben.

Sonst wie MSIE



3) Netcape 4:

Kann Bilder mit Prozentangaben in Tabellen mit Prozentangaben nicht darstellen. Deshalb muß, wenn, auf Javascript zurückgegriffen werden:
(Ansonsten wird nur der Alternative Text ALT angezeigt)

<html>
<head>
<TITLE>NTC 4 - resize</TITLE>

<script type="text/javascript">
<!--

function Fensterweite()
{
if (window.innerWidth) return window.innerWidth;
else return 0;
}

function Fensterhoehe()
{
if (window.innerHeight) return window.innerHeight;
else return 0;
}

function neuAufbau()
{
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
window.history.go(0);
}

/*Überwachung von Netscape 4 initialisieren*/

if(document.layers)
if(!window.Weite && window.innerWidth)
if(!window.Hoehe && window.innerHeight)
{
window.onresize = neuAufbau;
Weite = Fensterweite();
tabWeite = Fensterweite() - 30; // austarieren: Pixelangabe
// tabWeite = Fensterweite() - (Fensterweite()/100*7); // nicht gut: Prozentangabe
Hoehe = Fensterhoehe();
}

//-->
</script>

</head>

<body >

<TABLE align=center width="100%" height="100%" Border=4 >
<TR align=center >
<TD align=center >

<A HREF="123.html">

<!--- IMG
SRC="welcome.gif" width="100%"
ALT="Willkommen" Border=0 align=center // wird in Netscape 4 nicht dargestellt --->

<script type="text/javascript" language="JavaScript">
<!--

if(document.layers)
// ruft Netscape 4 ab
{
document.write('\<IMG SRC\=\"welcome\.gif\" width\=\"'+tabWeite + 'ALT\=\"Welcome\" Border\=0 align\=center \>');
}

else
// für alle anderen
{
document.write('\<IMG SRC\=\"welcome\.gif\" width\=\"'+ '100%'+ 'ALT\=\"Welcome\" Border\=0 align\=center \>');
}

// -->
</script>

<noscript>
<IMG SRC="welcome.gif" width="250"
ALT="Willkommen" Border=0 align=center >
</noscript>

</IMG></A>

</TD>
</TR>
</TABLE>

</Body>
</HTML>




Senkrechte Linien



Waagerechte Linien werden mit <HR> erzeugt. Für senkrechte Linien zur Textbegrenzung existiert kein solcher Befehl. Man kann dazu ein GIF- Bild einbauen, beispielsweise "senkr. gif" und neben den Text stellen:

<IMG SRC="senkr.gif" width=2height=n align="left" >

(n = Länge der Linie). Eingegebener Text fließt nun neben der Abbildung.








Seiten-Layout



Seiten-Layout

Layout - Kriterien:

1. Auf jeder Seite:

2. Links: Menü
Rechts: Inhalt
Unten: Weiterführende Seiten

Navigationsleisten oben und Links anbringen!

3. Reihenfolge der Kriterien: Schnell, einfach, exakt, einfallsreich

4. Seiten links oben heller machen als rechts unten.

5. Wichtige Sachen / Logos oben links

6. Evtl. Pfad auf jede Seite: Website > Rubrik > Unterrubrik > Seite + Quick out / to

7. Zum Druck: Auf Größe = DIN A4 achten (Tabellen 600 Pixel breit fest)

oder Grundsätzlich bei Tabellen und CSS NUR Prozentwerte angeben!



Aus
http://www.editorial.de/tricky/:


Ein nicht zu vergessendes Feature ist die HEIGHT- Deklaration im <TABLE>-Tag.

Hiermit läßt sich die Höhe einer Gesamttabelle definieren. Will man z.B. ein Element in der Mitte einer Seite unterbringen, definiert man HEIGHT="95%", und bei entsprechender Deklaration von ALIGN und VALIGN der Zelle ist das Objekt beinahe in der Mitte jeder Seite, egal, wie groß das Browser- Fenster ist. Man sollte (auch bei WIDTH) eine Deklaration auf "100%" vermeiden, da der Internet Explorer dann ab und zu unnötigerweise den Scrollbalken an der Seite einblendet.

Mehr Kontrolle über Tabellen relativer Breite Tabellen, deren Breite auf einen zur Seite relativen Wert definiert wurde, z.B. eine Tabelle, die sich auch bei wenig Inhalt über die gesamte Seitenbreite erstrecken soll, weil sie beispielsweise zur Seitegestaltung verwendet wird, sind in ihrer Interpretation nicht immer unbedingt eindeutig. Da haben Spalten häufig recht ungewöhnliche Breiten, so daß einer gleichmäßigen Aufteilung des Inhaltes keine Rede sein kann. Und sehr häufig ist es auch so, daß in diversen Spalten der Inhalt in seiner Breite schon fest steht, weil sie z.B. eine Grafik enthalten oder der Zeilenumbruch innerhalb der Zelle ausgeschaltet wurde (NOWRAP).

Mit folgendem Trick läßt sich die Ausweitung der ebengenannten Zellen auf das Minimum reduzieren, so daß zum einen das Verhalten der Tabelle vorhersehbar ist, und auch der Platz in den anderen Zellen maximiert wird. Hierzu läßt man einfach bei der Definition der nicht feststehenden Spalten die in der Breite vorbestimmten Spalten außen vor und gibt diesen Spalten eine Gesamtbreite von 100%:


<TABLE WIDTH="100%"><TR>
<TD>
<IMG SRC="..." WIDTH="Pixel"...>
</TD>
<TD WIDTH="100%">...</TD>
<TD NOWRAP> Text </TD>
</TR></TABLE>



-----------


Weitere Vorschläge:

1. In Umfangreicheren Seiten mit Microsoft Word 97 / 2000 Inhaltsverzeichnisse erstellen lassen (erstellt automatisch Verweise zu den Überschriften ) .

2. Bunte Seiten - Titel mit Word Art Erstellen: über die Zwischenablage in Microsoft Paint als BMP abspeichern und anschließend in ein GIF oder JPG umwandeln.


-----------


Ein paar wichtige Regeln:

* Möglichst präziser Titel - erleichtert auch spätere Änderungen

* Einheitliches Design - kleines Logo, eine Seite als Vorlage verwenden

* Bei Frames wird immer der Titel des Framset angezeigt!

* Klare Navigation - Hierachieebenen müssen erkennbar sein

* Bei Links muß klar sein, wohin die Reise geht - nicht: Klicken Sie hier!

* Lesbarkeit des Textes - kurze Zeilen, in nicht zu kleinem Font, kein Hintergrundbild

* Sparsam mit Grafiken umgehen - lange Ladezeiten nerven

* Achten Sie auf eine sinnvolle Größe der Dateien - zu kleine sind lästig beim Ausdrucken, zu große lästig beim Scrollen.

* Name, Adresse und Datum sollten in Klartext erscheinen

* Der Monitor strahlt anders als Papier, daher einen Pastell-Hintergrund nehmen.

* Auf der ersten Seite / auf jeder Seite sollte erscheinen:

- WER Autor
- WAS Thema
- WANN Datum
- WO Firma etc.


* Navigation auf den Seiten:
Ziel: Mit maximal drei Klicks zu dem jeweiligen Objekt

* Auflösung :
Genügt für das Web: 640 X 480 Pixel
1 Pixel ( 0,01mm )

640 Pixel ist auch die Standardbreite für Tabellen u. a. (paßt auf 14er Bildschirm)


-----------


Generell sollte jede Seite auch ohne CSS lesbar sein, wenn sie z.B. einzeln gespeichert offline gelesen wird.


Deshalb:

1) Grundformatierung in HTML vornehmen!

2) Schliff und Firlefanz in CSS darüber legen.

Dazu den CSS-Bereich auslagern mit <link rel="stylesheet" type="text/css" href="format.css" > und zur Prüfung die Seite in ein Verzeichnis ohne diese Datei kopieren.


-----------



Scrollbalken links




Scrollbalken links setzen


Ohne CSS


<BODY dir="rtl" ...>

oder

<DIV dir="rtl">

rtl=right to left, rechtsbündig;
Scrollbalken links


Auch möglich in <P> und <TEXTAREA>; macht diese Bereiche jedoch komplett rechtsbündig.

Abhilfe: Eine Hierarchie-Ebene darunter den Inhalt wieder auf dir="ltr" setzen:

<P dir="ltr">

Dieser Inhalt ist wieder linksbündig, behält aber den Scrollbalken links

</P>
</DIV>


Anm.: Merkwürdigerweise scheint eine Änderung der Ausrichtig auf [Ansicht aktualisieren] im Browser nicht zu reagieren

Der Scrollbalken zeigt sich jedoch nur, wenn das Fenster (oder der Block oder Absatz) in der Höhe (y) oder Breite (x) begrenzt und zu klein ist, um den Inhalt darzustellen; ansonsten rutscht der rechtsbündige Bereich nur rechts neben den nachfolgenenden linksbündigen.

Um das zu verhindern, muß über ein CSS-Style-Attribut der Scrollbalken erzwungen werden:

<DIV dir="rtl" style="height:120px; overflow-y: scroll;" >

rtl=right to left, rechtsbündig;
Scrollbalken links

<P dir="ltr">

Dieser Inhalt ist wieder linksbündig, behält aber den Scrollbalken links

</P>
</DIV>


Und so kann man gleich vollständig mit CSS arbeiten:


<STYLE type=text/css>

DIV
{

/* Scrollbalken immer sichtbar */
overflow: scroll;

/* oder: nur vertikaler Scrollbalken immer sichtbar */
overflow-y: scroll;

/* oder: horizontalen Scrollbalken verstecken */
overflow-x: hidden;

/* Höhe des Scrollbereich: height oder max-height */
max-height: 150px;

/* Weiter Alternativen: Inhalt abschneiden / nicht abschneiden / selbständig abschneiden */
overflow: hidden;
overflow: visible;
overflow: auto;

/*
Position Scrollbar (nicht alle Browser)
rtl = linksseitig
ltr = rechtsseitig (normal)
*/
direction: rtl;
}

/*
Wichtig- hebt bei linksseitigen Scroll die Rechstbündigkeit im Text selbst wieder auf:
Der Universalselektor * gilt für ALLE Elemente
*/

*{direction: ltr; }

</STYLE>





Blink und Marquee



Blink (Netscape 4) & Marquee (MSIE)

<BLINK><MARQUEE WIDTH="50%" SCROLLDELAY="0" >BIN UMGEZOGEN! &nbsp; NEUE HEIMAT SIEHE UNTEN...&nbsp; </MARQUEE></BLINK>

Ergibt alternativ Blinken (bei Netscape) oder Laufschrift (Marquee) bei MSIE











Hintergrund fixieren



Hintergrund fixieren

< BODY BGPROPERTIES="fixed" > Z.B. bei großen Hintergrund- Bildern

Nur in Microsoft Internet Explorer

In Netscape:
(über CSS)

<body background="bild.gif" style=background-attachment:fixed">
(imag 04/02 S. 74)








Keine Seitenränder



Dokument - Ränder auf 0 setzen


Keine Seitenränder

<Body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 >

(Ein Satz für Netscape, der andere für den MSIE)

über CSS:

<STYLE TYPE="text/css">
body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; }
</STYLE>





Nahtlose Frames



Nahtlose Frames


Internet Magazin 10 / 99 S. 52 ff:

Speziell Netscape:

Nahtlose Frames: Border = 0 und Framespacing = 0

Frames: < Frameset border=0 framespacing=0 > Beide, wg. Netscape / Internet Explorer

+ <Frame src=xxx frameborder=0 > !! für Internet Explorer (alt)? Anders geht's nicht.

<Body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 >

Sowie NORESIZE





Schriften



Schriften

Wenn Sie kein FONT FACE benutzen, erscheint Ihr Text in der üblichen Standardschrift Times. Wollen Sie beispielsweise einen Teil Ihres Textes in einer nüchternen Helvetica - Art sehen, sieht der HTML - Befehl so aus:

< FONT FACE = "Arial, Geneva, Helvetica, Swiss" > Das Wetter < / FONT >

Da jeder Computer unterschiedliche Schriften zur Verfügung hat, sollten Sie nur solche
Namen verwenden, die sehr gebräuchlich sind, eben wie Times oder Arial. Sie können nämlich nur bestimmen, welche Art, nicht, welche Schrifttype der Browser zur Anzeige Ihrer Homepage nutzen soll. Auf Nummer Sicher gehen Sie, wenn Sie mehrere gleichartige Schriften angeben, wie in unserem Beispiel mit Arial und Co. ; diese Kombination hat den Vorteil, daß sich diese Schriften so ähneln, daß sich Ihr Layout kaum verändert, egal, welche dieser Schriften der Browser verwendet.

FONT SIZE: 1-7

< BODY >
< BASEFONT SIZE=3 > an den Anfang;

Schriften wie Verdana oder Georgia benutzen, diese sehen auf dem Schirm bessere aus und werden von Microsoft als Web -Fonts auf CDs kostenlos vertrieben.





Link Font



Font- und Link- Farbe

Sehr witzig: VLINK= Selbe Farbe wie Hintergrund: Verschwindet ! "Missing Links"

PS : Wenn man den FONT COLOR Tag innerhalb des A HREF - Tags anbringt, kann man die Linkfarbe individuell gestalten.

Das wird von WYSIWYG- Editoren normalerweise nicht gemacht.

<A HREF="wir.html"><FONT COLOR="red">klicken</FONT></A>

Allerdings ändert der Verweis seine Farbe dann nicht mehr nach dem aktivieren.

(Vormals nur in Netscape)

<FONT COLOR=""> ergibt die vom Anwender eingestellte Standard - Schriftfarbe


--------

LINK, ALINK und VLINK ist auch für die Farbe der Umrandung von aktiven Grafiken zuständig, wenn dort nicht Border="0" gesetzt wurde.





Mehrere Absätze



Mehrere Absätze - Ohne CSS


1. Im allgemeinen werden mehr als zwei <P> - Absätze hintereinander nicht angezeigt. Um sicherzugehen, ein Leerzeichen &nbsp; dazwischen anbringen.

<P>&nbsp;
<P>&nbsp;


2. Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie

<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>

eine Folge von mehreren zentrierten Absätze erreichen.






Seitenfarbwechsel



Seitenfarbwechsel

<BODY BGCOLOR="#ffffff" onBlur="document.bgColor='#FFFFFF'" onFocus="document.bgColor='#98C5A0'" >

Vergessen Sie nicht den Farbwert für die Hintergrundfarbe beim Laden des Dokuments anzugeben. Die Hintergrundfarbe hat mit diesem Script vorerst nichts zu tun.
Durch den eventHandler
* onFocus bewirken Sie die Farbänderung.
* onBlur ändert die Farbe zum zweitenmal.





Listentypen






Listentypen


<UL Type=square / circle / disc / >

<OL Type= a / A / I ... >








Farbige Listen



Internet Magazin 10/04: Farbige Listen

<H1>UL-STYLE:</H1>

<style>
ul {color : red}
p {color : black}
</style>

<P>
paragraph
<UL>
<LI> <P>Item 1</P>
<LI> <FONT COLOR="GREEN">Item Green</FONT>
</UL>


http://project-icarus.de/erleuchtet/autostyle/_einzelne/ul-styles.htm




Listen mit eigenen Bullets



Listen mit eigenen Bullets


<DL>
<DD><IMG SRC=Bullet.gif>Item1</DD>
<DD><IMG SRC=Bullet.gif>Item2</DD>
</DL>

Kein DT!


---

Noch einfacher mit CSS:


Li {list-style-image: url(bullet.gif);}




Navigation

Datumsabfrage im Verweis



Falls Termindaten ö. ä. in HTML - Dateien mit Datumsanteilen im Namen abgelegt wurden, können diese automatisch aufgerufen werden:

<script type="text/javascript">
<!--
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
if (Monat > 9)
{
var Datum = (Monat);
}
else
{
var Datum = ("0"+Monat);
}
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
if (Jahr<2000) Jahr=Jahr+1900;

document.write("<HR><BR><BR><h3>Guten Tag!<\/h3><b>Heute ist der "
+ Tag + "." + Datum + "." + Jahr + ". Es ist jetzt "
+ Stunden + NachVoll + Minuten + " Uhr<\/b>");

document.write("<P>Heutige Termine:");

document.write("<P> <A HREF=\"http:\/\/
www.lalala.de\/termine\/"
+ Datum + "" + Tag + ".htm\">HIER AUFRUFEN<\/A>\?");

//-->
</script>



Links ohne Unterstreichung



Links ohne Unterstreichung

CSS

Besuchte Links ohne Unterstreichung beim drüberfahren verändern, mit Unterstreichung und farbig

A:visited {color:grey;text-decoration:none;}
A:hover {color:red;text-decoration:underline;}

in DER Reihenfolge.

a:link
a:visited
a:focus
a:hover
a:active




Frames_URL




Frames-URL


In einem Frameset mit den Maßen ( 1, * / alles andere "NO" ) lassen sich neue Seiten auf fremden Servern darstellen, wobei im Browser die ( ursprüngliche ) Frameset - bookmark und nicht die neue URL erscheint!


News: Frames mit Scrollbalken versehen ( ! ) und als Text abspeichern: News.txt. Diese Datei im Frame laden.





Minimum Frameset



Minimum Frameset

<HTML>
<HEAD>
<META NAME="KeyWords" CONTENT="..." >
<META NAME="robots" CONTENT="index, follow" >
<TITLE>Infos - Frameset Deutsch</TITLE>
<base target="page">
</HEAD>

<FRAMESET COLS="18%,82%" border=0 framespacing=0>
<FRAME SRC="menu.htm" NAME="menu" MARGINWIDTH=10 MARGINHEIGHT=10 frameborder=0>
<FRAME SRC="page.htm" NAME="page" MARGINWIDTH=10 MARGINHEIGHT=10 frameborder=0>
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
Das Verzeichnis im Framelosen Bereich:

<P>
</BODY>
</NOFRAMES>
</HTML>






Vordefinierte Fensternamen



Targets ( Verweis - Ziele )

Allegemeine Festlegung in Frames:

< HEAD >
< Base Target = "Frame-Name" >
...
< / HEAD >



Bereits belegte Target-Namen:

_self: > Aktuelles Fenster ( Default )
_blank: > Neues, leeres Fenster
_parent: > Aktuelles Frameset
_top: > Browserfenster


Target="_blank" bewirkt, daß ein neues Fenster geöffnet wird und das alte erhalten bleibt.

Target="_new" wird manchmal bei Framesets genommen und bewirkt in etwa das gleiche - "_top" = Ganzbild; "_parent" = die ursprüngliche Anzeige.

Target="_parent" öffnet den Verweis im übergeordneten Fenster. Falls es kein übergeordnetes Fenster gibt, im gleichen Fenster. Beendet ein Frameset, indem es die ursprüngliche Anzeige vor Aufruf des Framesets zeigt. (?)

Target="_top" öffnet den Verweis im Ganzbild. Falls es kein übergeordnetes Fenster gibt, im gleichen Fenster.



Ansonsten kann jeder beliebige Namen vergeben werden.