HTML-Schnipsel

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



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

<bgsound src="datei.mid" loop=infinite>
</head>

<body>

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


(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: 
 / 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. 
 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">

</script>

</head>

<body >

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

<A HREF="123.html">



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

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

-----------