Kategorien
Design HTML/CSS

Ausdrucken verhindern

Erste Möglichkeit: Nichts mehr im Web veröffentlichen. Zweite Möglichkeit: Die Seiten so häßlich und uninteressant machen, dass niemand sie ausdrucken will.

Das Web ist ein offenes Prinzip. Die Web-Seiten sind doch für den Besucher da. Der Eine druckt gern, der Nächste speichert und wieder andere kopieren die Inhalte. Verbieten kann man das nicht.

Nun, eine Möglichkeit gibt es. Sie funktioniert allerdings nur mit neuen Browsern. Legen Sie ein externes Stylesheet an und schreiben Sie diese Zeile hinein:

 BODY { display
: none;}

Anschließend verbinden Sie die neue Datei druck.css auf diese Weise mit Ihren Seiten:

      <link rel="stylesheet"
media="print" href="druck.css">

Wir empfehlen, das Gegenteil zu tun.

Kategorien
Webdesign

Trickkiste – MSIE Crawler draußenhalten

Der Internet Explorer bietet an, Seiten für den Offline Gebrauch verfügbar zu machen. Das kann praktisch sein, ärgert aber auch so manchen Webmaster.

Denn der Browser crawlt sich auch schon mal durch hunderte von Seiten. „MSIECrawler“ ist nicht selten der häufigste Eintrag in den Logfiles. Glücklicherweise hält er sich an die Robots-Spezifikation. Ein Eintrag in die Datei robots.txt genügt deshalb, um den neugierigen Explorer von seinem gierigen Tun abzuhalten.

 User-Agent:MSIECrawler
Disallow: /

Wer eine solche Datei nicht hat, sollte sich darum kümmern. Suchmaschinen mögen das.

Seiten Offline verfügbar zu machen, funktioniert am besten über die Favoritenliste. Ein Rechtsklick öffnet einen Assistenten. Dieser erlaubt ein Abgleichen von Websites bis zu drei Ebenen tief. Wer will kann sich dafür sogar einen Zeitplan erstellen lassen. Bei nicht bestehender Verbindung kann der Browser diese sogar selbsttätig herstellen.

Kategorien
Webdesign

Im gleichen oder im neuen Fenster?

Die Geister scheiden sich daran, wie denn nun ein Link am besten geöffnet werden soll. Die einen schätzen ein neues Fenster, um die alte Ansicht nicht zu verlieren. Andere hassen das vielseitige Fenstergewirr. Wenn das so ist, dann lassen Sie Ihre Besucher doch selbst die Wahl treffen.

Eine Checkbox wird gut sichtbar platziert. Wird sie aktiviert, öffnen sich fortan alle Links einer Website in einem neuen Fenster. Einfach aktivieren und hier einmal ausprobieren.

Externe Links in neuem Fenster öffnen?

Ein kleines Javascript entscheidet je nach getroffener Wahl, ob sich ein neues Fenster öffnet oder nicht. Somit eignet sich der Code sehr gut für große Portalseiten und Linklisten.

Der Code für die Checkbox:

 <form>

<input type="checkbox" onclick="linkopener(this.checked)"
id="linksnewwin">
 Externe Links in neuem Fenster öffnen?

</form>

Und das Javascript. Hier muss in der vorletzten Zeile statt drweb.de Ihre Domain stehen, damit interne Links erkannt werden:

       <script language="javascript">
 function linkopener(a)
{
 var b=a?"_blank":"_self";
 var c=document.links;

for(var i=0;i<c.length;i++) {if(c[i].href.search("drweb.de")==-1)
c[i].target=b};
 }
 </script> 

Kategorien
Webdesign

Javascript: Markierte Inhalte auskundschaften

von Jan Winkler

Jeder wird dieses Problem schon einmal gehabt haben oder es noch bekommen: Wie bekomme ich heraus, was der Benutzer gerade markiert hat?

Der MS Internet Explorer (ab Version 4.0) und der Netscape Navigator (ab Version 4.0) bieten zu dieser Frage interessante Möglichkeiten.

MS Internet Explorer
Microsoft hat für dieses Problem ein eigenes Objekt namens document.selection geschaffen. Dieses enthält alle Eigenschaften der aktuellen Markierung. Um den gerade ausgewählten Text auszukundschaften, erstellt man ein TextRange [Zeile 1] und fragt von diesem die text-Eigenschaft ab [Zeile 2]. Alternativ ist es auch möglich, den verwendeten HTML-Code direkt über die htmlText-Eigenschaft [Zeile 3] heraus zu bekommen.

 a
= document.selection.createRange();
 b = a.text;
 c = a.htmlText; 

Netscape Navigator
Der Netscape Navigator bietet zur Lösung des Problems eine eigene Methode des document-Objekts, die getSelection-Methode, an. Sie ermittelt den aktuell markierten Text.

      a = document.getSelection(); 

Hinweise
Da die Browser nicht die Methoden des jeweils anderen Browsers unterstützen, sollte an eine Browser-Erkennung gedacht werden. Ausserdem ist zu bedenken, dass beispielsweise bei Klick auf einen Link dieser die Markierung erhalten kann (die Maus braucht nur ein Stückchen zu verrutschen …), deshalb empfiehlt sich die Abfrage der Markierung z.B. nur bei onMouseOver- oder derartigen Events. Live Beispiel

Kategorien
Webdesign

Trickkiste – Email Adresse schützen

Eine codierte Adresse bietet Schutz vor automatischen Email-Sammlern. Das sind Software Programme, die den Spidern von Suchmaschinen gleich, das Web durchstreifen und sich alle Adressen einverleiben derer sie habhaft werden.

Ihren Namen und die passende Domain müssen Sie innerhalb der fett gedruckten Passagen verändern. Platzieren können Sie den Code überall dort, wo Sie ihn benötigen. Im Browser wird eine ganz gewöhnliche Email-Adresse dargestellt, die jedoch für die Spider unsichtbar ist. Das reduziert langfristig das Aufkommen unerwünschter Post.

 <script language="JavaScript"><!--

var name = "protected";
 var domain = "domain.de";

document.write('<a href=\"mailto:' + name + '@' + domain + '\">');

document.write(name + '@' + domain + '</a>');
 // --></script>

Kategorien
Webdesign

Trickkiste – Aufruf in fremden Frameset verhindern

Mit diesem Script können Sie sich aus einem Framesets befreien.

Fügen Sie die Funktion immer dann ein, wenn es zum Beispiel erforderlich ist ein neues Frameset aufzubauen oder wenn Sie nicht möchten, dass bestimmte Seiten in fremden Framesets aufgerufen werden.

Kopieren Sie folgende Zeilen und fügen Sie diese zwischen <head> und </head> Ihrer HTML-Datei ein. Der hier fett dargestellte Teil kann, je nach Anwendung – auf die Framesetdatei (index.html) oder die jeweilige Einzelseite verweisen.

 <script
language="JavaScript">
 if (self.parent.frames.length != 0)

self.parent.location="ihrlink.html";
 </script>

Kategorien
Webdesign

Sofortdruck

Wenn Formulare, Verträge oder wichtige Dokumente bereitgestellt werden, muss der Besucher diese noch ausdrucken. Mit ein wenig Javascript kommt man ihm entgegen.

Gleich nach dem Laden der Seite öffnet sich eine Dialogbox, die den Besucher zum Ausdrucken der Seite auffordert. Ein schnöder Hinweis ist uns allerdings nicht genug: Nach Klick auf OK wird der Druck-Dialog geöffnet.

Screenshot
Damit niemand das Drucken vergisst

Zehn Zeilen Javascript genügen. Der Text kann individuell angepasst werden. „Schrägstrich n“ sorgt für einen Zeilenumbruch.

 <SCRIPT LANGUAGE="JavaScript">

<!-- Begin
 function printPage() {
 if (window.print) {
 agree = confirm('Ein
Klick auf OK genügt \nund die Seite wird ausgedruckt. \n\nBereit?');

if (agree) window.print();
 }
 }
 // End -->
 </script>

Eine kleine Ergänzung für den <Body>-Tag ist nötig, damit das Script gleich beim Laden der Seite automatisch ausgeführt wird.

      <body
OnLoad="printPage()"> 

Live Demo

Kategorien
Webdesign

Graufilter rückwärts

Jeder kennt ihn, den Microsoft Filter gray(): Er wird nämlich bei Dr. Web benutzt, um die Grafiken bei Mausberührung ergrauen zu lassen. Das Ganze geht aber auch rückwärts, so dass die Bilder erst bei Berührung in vollem Glanz erstrahlen.

In der Theorie ja, in der Praxis aber nur selten. Grund: von den derzeitigen Browsern beherrscht nur Mozilla/Netscape das „hovern“ korrekt. Alle anderen sollten mit den kommenden Versionen nachziehen.

Live-Demo

Zuerst erstellen wir die beiden Style Sheet Klassen .active und .inactive:

 .active
{filter: chroma();}
 .inactive {filter: gray();}

Die Klasse .active wird später mit JavaScript bei Mausberührung zugewiesen. Der Microsoft-Filter chroma() sorgt eigentlich dafür, dass eine Farbe des Bildes transparent wird. Hier wird er ohne Parameter aufgerufen und hebt nur den Filter gray() auf.

In der Klasse .inactive wird über den Grau-Filter angegeben, dass alle Bilder oder Seitenelemente dieser Klasse grau sind und nicht in den eigentlichen Farben angezeigt werden.

Mit Javascript werden ebenfalls die Funktionen aktiv() und inaktiv() erstellt. Sie weisen dem Element die entsprechende Style Sheet Klasse – .active oder .inactive – zu:

      <script language="javascript">

function aktiv() { event.srcElement.className='active'; }
 function inaktiv()
{ event.srcElement.className='inactive'; }
 </script>

Und hier das Bild, das per onmouseover und onmouseout die JavaScript-Funktionen aufruft. Es wird per default der Klasse „inactive“ zugewiesen, die JavaScript-Funktion aktiv() kehrt das Ganze ins Gegenteil um.

      <A HREF="#"><IMG
CLASS="inactive" SRC="bild1.gif" BORDER="0" onmouseover="aktiv()"
onmouseout="inaktiv()"></A>

Kategorien
Webdesign

Drehcursor

Javascript ist für die seltsamsten Dinge gut. Sogar der Mauszeiger lässt sich manipulieren. Der Trick ist eigentlich simpel, die verschiedenen Cursor-Varianten wie nw-resize,w-resize und so weiter wechseln sich ständig ab, so dass der Eindruck eines sich bewegenden Objekts entsteht.

Hier das Live Beispiel

Und der Quellcode für eine komplette Seite:

 <html>

<head><title>Drehcursor</title>
 <script language="Javascript">

var count=1;
 function maus()
 {
 if(count==8)
 {
 document.all.cursor.style.cursor
= 'nw-resize';
 count=1;
 }
 if(count==7)
 {
 document.all.cursor.style.cursor
= 'w-resize';
 count++;
 }
 if(count==6)
 {
 document.all.cursor.style.cursor
= 'sw-resize';
 count++;
 }
 if(count==5)
 {
 document.all.cursor.style.cursor
= 's-resize';
 count++;
 }
 if(count==4)
 {
 document.all.cursor.style.cursor
= 'se-resize';
 count++;
 }
 if(count==3)
 {
 document.all.cursor.style.cursor
= 'e-resize';
 count++;
 }
 if(count==2)
 {
 document.all.cursor.style.cursor
= 'ne-resize';
 count++;
 }
 if(count==1)
 {
 document.all.cursor.style.cursor
= 'n-resize';
 count++;
 }
      }
 window.setInterval("maus()",100);
      </script>

</head>
 <body id="cursor">
 </body>
 </html>

Kategorien
Webdesign

Die Vorbereitung auf XHTML

Es wird Zeit, sich über XHTML Gedanken zu machen. XHTML ist der designierte Nachfolger von HTML und als solcher HTML 4.0 sehr ähnlich. Eine HTML-Version 5.0 wird es nicht mehr geben.

Die Unterschiede liegen in der Erweiterbarkeit und besseren Portierbarkeit der neuen Beschreibungssprache. Letzteres ist notwendig, weil HTML zunehmend auch außerhalb der Browserwelt benötigt wird. Schließlich dringt das Web auch in bis dato unerschlossene Gebiete vor. Spielkonsolen, tragbare Minicomputer, Kühlschränke, Armbanduhren und so weiter. XHTML ist durch eigene Tags und solche aus anderen Sprachen erweiterbar, etwa SMIL oder RDF.

Nun besteht keine Notwendigkeit, sofort umzuschwenken und etwaige Inkompatibilitäten zu riskieren. Doch darf sich der geneigte HTML-Codierer schon jetzt auf die Sache einstellen und einige der neuen Vorschläge annehmen. Hierzu möchten wir hiermit anregen (alte Browser kommen in der Regel klar). Das lässt sich in vielen Fällen durchaus einfach bewerkstelligen. XHTML ist XML-Konform und kann später auch mit XML-Editoren bearbeiten werden.

Weil XHTML auch außerhalb der sehr fehlertoleranten Browser funktionieren soll, ist es notwendig einen korrekten Code zu schreiben. Fehler werden zukünftig strenger „geahndet“. Ein Grund, um penibel zu sein. Welche Änderungen also gibt es?

1.
Alle Tags und Attribute werden kleingeschrieben. Diese Regel können Sie ohne weiteres schon jetzt beherzigen.

Bisher möglich:

 <FONT COLOR="#CC00FF">Überschrift</FONT> 

    
      <font color="#cc00ff">Überschrift</font> 

    

geschlossen

      <p>Text</p> 

<p>Weiterer Text</p>

Überlappende

      <p>mein<b> text</p></b> 

    
      <p>mein <b>text</b></p> 

    
      <hr>
    

      <hr />
    

Auch das Leerzeichen ist notwendig, damit die Sache auch mit alten Browsern funktioniert.

Diese HTML Tags sind betroffen:

      <area>, <base>, <br>, <col>, 
<frame>, <hr>, <img>, <input>, <isindex>, <link>, 
<meta>, <option>, <param>
    

Anführungszeichen

      <font color=#cc00ff>Text</font> 

    
      <font color="#cc00ff">Text</font> 

    

einen Wert

      <td nowrap>text</td> 
    
      <td nowrap="nowrap">text</td> 
    

DOCTYPE

      <!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">

Spezifikation w3.org

Kategorien
Webdesign

XML-Workshop Teil 3: Auslesen mit XSL(T)

von Jan Winkler

Nach CSS ist XSL die zweite Möglichkeit, um XML vom Browser anzeigen zu lassen. XSL(T) liefert die Funktionen und die erforderliche Syntax, um XML-Elemente beispielsweise in HTML umzuwandeln.

Was genau ist XSL?
XSL steht für Extensible Stylesheet Language und beschreibt die Darstellung und Behandlung von XML-Daten mit Hilfe von XSL-Stylesheets. XSL umfasst sowohl XSLT als Transformationssprache als auch XSL(-FO) als Formatierungssprache. Beide sind von XML abgeleitet – folgen also deren Syntax und Regeln. XSLT hält Elemente bereit, die die Transformation (~ Umwandlung) von XML-Daten in andere Dateiformate erlauben (HTML, RTF, …). XSL-FO wiederum stellt Elemente zur Verfügung, die festlegen, wie XML-Daten angezeigt werden. Es ist vergleichbar mit den Cascading Style Sheets. Im Folgenden werden wir uns auf die Transformation konzentrieren.

So schreibt man XSL
Da XSL von XML abgeleitet wird, ist die Syntax vergleichbar. Dies hat den angenehmen Nebeneffekt, dass XSL(T)-Dokumente problemlos mit einem XML-Editor erstellt und bearbeitet werden können. Grundsätzlich erhalten XSL-Dokumente die Dateiendung .xsl.

Ebenso wie ein XML-Dokument, muss auch XSL mit der XML-Deklaration beginnen, ein root-Element (xsl:stylesheet) enthalten und wohlgeformt sein. Fertige XSL-Dokumente werden wie CSS-Dateien in XML eingebunden – man verwendet lediglich einen anderen Dateityp. Ein Beispiel:

 <?xml-stylesheet href="meinxsl.xsl" type="text/xsl"?>
    

Wichtig bei der XSL-Formatierung
XSL-FO ist für die Formatierung von XML-Dokumenten zuständig. Im Gegensatz zu CSS wird hier die XML-Schreibweise verwendet, jedoch sind die Elementnamen identisch mit den Eigenschaftsnamen von CSS. Anmerken wollen wir an dieser Stelle noch, dass mit XSL auch die Umwandlung in das PDF-Format möglich wird, denn auch PDF widmet sich zum größten Teil der Formatierung von Daten. Da diese Verwendung – verglichen mit XSLT – im World Wide Web weniger verbreitet ist, werden wir hier nicht näher darauf eingehen.

Die Funktionsweise von XSLT
XSLT funktioniert nach dem Prinzip des Dokument-Baumes. Übersetzt heißt das: Jedes Element bildet einen Knoten, von dem wiederum die Unterelemente abzweigen. Somit ergibt sich eine Baumstruktur. Aus (X)HTML kennen wir folgenden Aufbau:

Verzweigung einer HTML-Datei

Verzweigung einer HTML-Datei

XSLT wird diese Knoten nun nacheinander abschreiten und umwandeln. Ebenso wie im Beispiel die Elemente, können auch Attribute, Text oder Kommentare als Knoten fungieren. Durch die Umwandlung entsteht letztlich ein neues Dokument, genau hierin besteht das Ziel von XSLT!

Wann wird transformiert?
Man kann auf drei Arten transformieren, um zu einem zufriedenstellenden Ergebnis im (HTML-)Browser zu gelangen.

  1. Die XML-Daten werden auf dem Server schon vor dem Versand an den Besucher umgewandelt und als HTML gespeichert. Der Vorteil liegt in der garantierten Übertragung von HTML-Daten – der Nachteil aber liegt darin, dass die Funktionsvielfalt von XSL(T) erheblich eingeschränkt ist. Dieser Weg ist etwa geeignet, um Daten aus einer XML-Datenbank einmalig in HTML-Dokumente umzuwandeln.
  2. In Variante Nr. 2 wird XML mit dem dazugehörigen XSL-Stylesheet auf dem Server belassen und auch von diesem transformiert. Dies ist eine der besten und zugleich sichersten Varianten. Der volle Umfang von XSL kann angewandt werden, etwa in Verbindung mit JavaServerPages oder Scriptsprachen. Hinzu kommt die Sicherheit, dass alle Browser auch das Gleiche zu sehen bekommen.
  3. Die dritte Variante ist das Transformieren vom Browser selbst. Der Browser erhält dazu vom Server die XML- und XSL-Dokumente und kann sie dann umwandeln. Diese Methode ist allerdings eher weniger zu empfehlen, da derzeit nur wenige Browser dieses Verfahren unterstützen und alle anderen – vorsichtig formuliert – so nur ‚Datenschrott‘ erhalten. Das folgende Schema zeigt alle drei Wege noch einmal auf:

Wege der XSL-Transformierung

Wege der XSL-Transformierung

XSL testen
Zwischen Theorie und Praxis liegen oft Welten, nicht nur deshalb empfiehlt sich ein Testlauf. Nachdem wir nun die möglichen Transformationswege kennen, können wir daraus denjenigen wählen, der uns zum Testen am einfachsten erscheint.

Der sicherlich einfachste Weg ist das Testen der XSL-Dokumente per Browser. Nicht alle sind dazu geeignet – relativ gut bekommt es jedoch der Mozilla hin. Er deckt zwar nicht das volle XSL(T) Spektrum ab (jedenfalls derzeit noch nicht). Für einfache Anwendungen ist er schon mehr als tauglich. Die meisten hier angegebenen Beispiele können Sie problemlos mit diesem Browser testen.

So sind XSLT-Dokumente aufgebaut
XSLT-Dokumente beginnen mit der XML-Deklaration. Darauf folgen eventuelle Processing-Instructions (PIs). Das eigentliche Dokument besteht aus einem root-Element, welches sich xsl:stylesheet nennt. Damit das Dokument als XSLT und nicht XSL-FO Dokument angesehen wird (da beide dieses Element verwenden), muss ausserdem der Namespace xsl innerhalb des Roots mit der URL

      http://www.w3.org/1999/ XSL/Transform
    

definiert werden. Zu guter Letzt ergibt sich folgende Struktur, der alle XSLT-Dokumente folgen:

      <?xml version="1.0"?> <xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <!-- Inhalt des Dokumentes 
--> </xsl:stylesheet>
    

Außer dem Namespace muss auch die verwendete Version angegeben werden (derzeit 1.0). Anstelle des Elements

      xsl:stylesheet
    

kann auch das Synonym

      xsl:transform
    

verwendet werden. Es verhält sich ebenso wie das eigentliche XSL-Element, bietet allerdings einen plausibleren Namen (eben Transformierung und nicht Formatierung).

Als Unterelemente sind die folgenden Top-Level Elemente erlaubt:

      xsl:import
xsl:include
xsl:strip-space
xsl:preserve-space
xsl:output
xsl:key
xsl:decimal-format
xsl:namespace-alias
xsl:attribute-set
xsl:variable
xsl:param
xsl:template

Kategorien
Design HTML/CSS

Font-Tags ausradieren

Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative. Doch gilt es einige Klippen zu umschiffen.

Vor allem der inzwischen recht veraltete Netscape 4.x macht die Reinigungsaktion zu einem wackeligen Unterfangen – sofern man auf ihn Rücksicht nehmen will. Es geht aber doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und -Zeilen jeweils dieselbe Formatierung.

 P { font-family :
Arial,Helvetia,sans-serif; font-size : 10pt;} 

 TD { font-family : Arial,Helvetia,sans-serif;
font-size : 10pt;} 

 TR { font-family : Arial,Helvetia,sans-serif; font-size
: 10pt;} 

Das veranlasst sowohl Internet Explorer als auch Netscape sämtlichen Text in einer serifenlosen Schriftart anzuzeigen. Und zwar in der hier definierten Größe von 10 Punkt. Sie können auch alles in eine Zeile schreiben:

      p,td,tr { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size=“1″ funktioniert jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10 Punkt, egal was sonst noch im Quellcode steht. Dies läßt sich umgehen, indem Sie jedem anders zu formatieren Bereich eine eigene Styleanweisung (class) definieren.

      .klein { font-size
: 8pt; } 

Im HTML Code sieht das dann so aus.

      <p
class="klein">Kleiner Text</p> 

Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen. Denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.

Das Gute daran. Alles was in ein externes Style Sheet ausgelagert wurde, lässt sich flink ändern. Sie können mit einem Handgriff den Blocksatz für die gesamte Web-Site aufheben, die Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen oder Teile davon ändern.

Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch selten anzutreffen. Vom Communicator gibt es inzwischen so viele Versionen, dass Testen keinen Sinn mehr macht. Manchmal klappt es nicht, wenn mehrere Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung läßt sich aber meist finden.

Kategorien
Design HTML/CSS

Verschachtelte Rahmen

Wem ein Rahmen nicht genügt, der kann ja mehrere verwenden und sie verschachteln. Ein wenig CSS genügt und die Tabelle kann zu Hause bleiben.

Standardrahmen sind langweilig. CSS bietet nicht nur mehr Möglichkeiten, sondern auch die kreativeren. Allerdings können die Rahmen nicht einfach mehrmals definiert werden, wir benötigen einige DIV-Container, um das zu erreichen. Die nämlich lassen sich wunderbar ineinander schieben.


So könnte es aussehen

Zu beachten ist die Angabe der Breite im Ersten <div>, diese ist notwendig, da einige Browser sonst den Rahmen über die gesamte Browserbreite anlegen. Hier muss ein wenig probiert werden, um das richtige Maß zu finden. Übrigens: der Vielfachrahmen ist auch um Texte und Hyperlinks möglich.

Live Demo

Es darf eifrig probiert werden, durch verschiedene Abstände (padding) und Rahmenbreiten und -typen entstehen interessante Varianten, die man so nicht für möglich halten würde.

 <div style="width
: 100px;">
 <div style="border : 2px solid blue; padding :
1px; ">
 <div style="border : 2px outset powderblue; padding
: 1px;">
 <div style="border : 2px dotted silver; padding :
1px;">
 <img src="../images/illu_suche_total.jpg" alt=""
width="84" height="84"></div></div></div></div>

Kategorien
Design HTML/CSS

Anmerkungen zur Unterstreichung

Textpassagen oder Worte mit Hilfe einer Unterstreichung hervorzuheben ist eine selbstverständliche Sache. Aber nicht im Web.

Hier ist die Unterstreichung verpönt, denn man kann sie leicht mit einem Hyperlink verwechseln. Der Besucher wird unweigerlich klicken und aller Wahrscheinlichkeit nach enttäuscht sein, weil nichts passiert.

Sie können die Unterstreichung trotzdem verwenden. Mit CSS. Sie muss nur etwas dicker als gewöhnlich ausfallen, die Farbe lässt sich ebenfalls variieren. Damit wird die Verwechslungsgefahr beseitigt.

Zwei Beispiele

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Der Quellcode

 <span
style="border-bottom : 2px solid black">nonummy</span>
      <span
style="border-bottom : 2px solid red">wisi enim</span>

Mehr als 2 Pixel wirkt übertrieben, die Wirkung ist jedoch abhängig vom gewählten Durchschuss (line-height). Üblicher Hinweis: alte Browser können das nicht, ein entscheidender Verlust ist das aber in diesem Fall nicht.

Kategorien
Webdesign

Krümelmonster – Die Sache mit den Cookies

Cookies sind lästig! Nicht nur, dass sie mich ständig beim Surfen stören, sie hinterlassen auch eine digitale Spur im Netz. Der gläserne Internet-Surfer ist längst Realität. Was eigentlich sind Cookies und wie kann man sich dagegen schützen?

Zunächst einmal sind Cookies kleine ASCII-Textdateien, die durch die HTML-Datei der von uns aufgerufenen Web-Site generiert werden. Sie sind aber auch ein kleines Stückchen Information, die der von uns verwendete Web-Browser im Auftrag eines Web-Servers zunächst im Speicher unseres Rechners festhält und beim Verlassen des Browsers in eine Datei schreibt. Bei jedem neuen Verbindungsaufbau mit diesem Web-Server sendet unser Browser nun die gespeicherte Information an den Server zurück.

Ursprünglich wurden Cookies erfunden, um Web-Sites individuell den Bedürfnissen der einzelnen Besucher anzupassen und somit das Surfen zu erleichtern, denn bei einem wiederholten Besuch einer Web-Site kann wieder auf alte Daten zugegriffen werden. Der Besucher der Web-Site eines Online-Versandes zum Beispiel muss nicht erneut seine Kundennummer eingeben – das spart Mühe und Online-Zeit.

Umgekehrt werden Cookies aber auch als Spione eingesetzt, um einiges über das Nutzungsverhalten der User, deren Interessen, Vorlieben und Neigungen, zu erfahren. Für die Marketing-Experten eines Versandhandels ist es zum Beispiel wichtig zu erfahren, ob der Besucher ihrer Web-Sites mehr an Mode oder Elektrogeräten interessiert bin.

Cookies dienen aber auch der Sicherheit, zum Beispiel beim Online Banking. Beim Einloggen wird ein Cookie auf der Festplatte gespeichert und jede aufgerufene Seite überprüft nun, ob dieses Cookie vorhanden ist. Beim Schließen des Browsers wird es gelöscht und verhindert so den Missbrauch des Online Banking.

Cookies abwehren
Der User selbst kann darüber entscheiden, ob er Cookies gestatten will oder nicht. Sowohl Netscape Communicator als auch Internet Explorer bieten die Möglichkeit, sich Warnmeldungen für Cookies anzeigen zu lassen. Sobald eine Web-Site versucht, ein Cookie zu speichern, wird der Besucher informiert.

Beim Netscape Communicator 4.0 lassen sich die Cookies im Einstellungsmenue unter „Bearbeiten – Einstellungen“ ausschalten. Klicken Sie dazu in den „Einstellungen“ auf der linken Seite auf „Erweitert“. Im rechten Abschnitt kreuzen Sie dann die entsprechenden Einstellungen an.

Beim Internet-Explorer finden Sie die entsprechende Einstellung unter „Extras – Internetoptionen – Sicherheit“. Im Gegensatz zum Netscape Communicator lässt sich beim Internet Explorer die Warnfunktion nicht generell einstellen, sondern nur nach Sicherheitszone. Die Stufe „Hoch“ verhindert jeglichen Versuch, Cookies zu speichern. Wählen Sie über die Zone „Internet“ die Sicherheitsstufe „Mittel“, „Stufe anpassen“ und aktivieren Sie im Abschnitt „Cookies“ immer „Eingabeaufforderung“.

Löschen der Daten
Daneben hat der Anwender aber auch die Möglichkeit, seine Datenspur auf seinem eigenen Rechner zu löschen. Es geht schnell, man muss nur daran denken: Die Dateien, die durch das Surfen auf unserem Computer entstehen, sollten regelmäßig, am besten täglich, gelöscht werden. Es handelt sich dabei um alles, was im Ordner Windows / Temporary Internet Files steht. Auch im Ordner Windows / Verlauf kann alles gelöscht werden. Am einfachsten geht das im Internet Explorer über Extras / Internetoptionen. Dort löschen Sie die Temporären Internet-Dateien, leeren den Verlauf und stellen die Tage, die der Verlauf aufbewahrt werden soll, auf „2 Tage“.

Eine sichere Verbindung wählen
Eine „sichere Verbindung“ ist eine Verbindung, die über einen öffentlichen und einen privaten Schlüssel codiert wurde. Sie ist daher für Unbefugte nicht zu erkennen. Bietet ein Server die sichere Verbindung an, so sollte man sie auf jeden Fall wählen.

Einen sicheren Server / Proxy wählen
Grundsätzlich kann man auch über einen sicheren Server oder Proxy ins Internet gehen. Diesen Service bietet der Anonymizer an. Über diesen Einstieg wird die eigene URL verschlüsselt und man wird dann weiterverbunden. Jeder ISP (=Internet Service Provider) oder Proxy-Server ist in der Lage, die Bewegungen der Nutzer im Internet zu speichern und daraus ein Nutzerprofil zu erstellen. Die Verschlüsselung der eigenen URL unterbindet dies. Der Anonymizer-Server empfängt die gewünschte Seite aus dem Internet, verschlüsselt die Links auf dieser Seite und schickt sie dann erst weiter zum Benutzer. Allerdings ist sie dann auch nur noch über den Anonymizer-Server zu entschlüsseln. Das bedeutet, dass man verschlüsselt auch nur noch über Anonymizer-Server im Netz surfen kann. Wer sich genauer über die Arbeitsweise des Anonymizer informieren möchte, dem sei der Link auf die Anonymizer-Seite empfohlen.

Kategorien
Webdesign

HTML für Einsteiger – Teil 1

HTML ist eine im Grunde simple Angelegenheit. Was Anfangs ein wenig erschrecken mag, ist der enorme Umfang der vorhandenen Befehle. Aber keine Sorge, weder muss man alle auswendig lernen, noch werden alle gebraucht.

Um eine einfache Seite für das WWW zu erstellen, ist bestenfalls eine Handvoll dieser Befehle nötig. Je größer die Ansprüche dann werden, desto mehr muss man lernen. Für den Anfang braucht man noch nicht einmal ein besonderes Programm. Es genügt ein primitiver Texteditor, den jedes Betriebssystem bereits mitliefert. Das wäre bei Windows das Notepad (Windows „Editor“) und beim Mac „Simple-Text“. Mehr ist erst einmal nicht nötig. Später kann man dann auf andere Werkzeuge umsteigen.

HTML bedeutet „Hypertext Markup Language„. Es ist eine sogenannte Seitenbeschreibungssprache. Das bedeutet, es handelt sich hier nicht um eine Programmiersprache (etwa Basic oder Java). Weshalb das Erstellen von Web-Seiten auch nicht programmieren, sondern codieren genannt wird. Dieser Code beschreibt logische Bestandteile eines Dokuments. Das sind zum Beispiel Überschriften, Tabellen, Verweisen, Listen und so weiter. Dargestellt werden die Anweisungen dann vom Browser. Deshalb ist die Sache auch völlig unabhängig von einem Betriebssystem. Was Sie unter Windows codieren, kann man über den Umweg mit dem Browser auch mit einem Linux-Rechner sehen.

Das Prinzip von HTML basiert auf der englischen Sprache, die man aber nicht beherrschen muss. Die einzelnen Befehle werden „Tags“ genannt. Dazu kommen noch verschiedene Attribute, die den Tag genauer definieren. Es gibt zum Beispiel einen Tag, mit dem man die Farbe einer Schrift verändern kann, das passende Attribut sagt dann, welche Farbe genommen werden soll.

Jeder Tag steht in spitzen Klammern < >
Die meisten Tags kommen paarweise vor. Der erste Tag leitet die Definition ein, der zweite schließt sie wieder. Das ist notwendig. Schauen wir ein Beispiel an:

Um einen Textabschnitt fett erscheinen zu lassen, schreibt man <b> Das b steht für bold, das ist das englische Wort für fett.

 <b>Hier steht mein
Text. 
      <b>Hier steht mein Text</b>.
Und hier geht es mit dem normalen Text weiter. 

Grundprinzip

Maskieren

      ä wird zu &auml;

ö wird zu &ouml;
 ü wird zu &uuml;
 Ä wird zu &Auml;

Ö wird zu &Ouml;
 Ü wird zu &Uuml;
 ß wird zu &szlig;
      
 Hier
l&ouml;st sich mein Satz. Auf die Stra&szlig;e mit dem K&ouml;ter!

Schauen wir uns weitere Bestandteile von HTML an – So sagt man dem Browser, dass es sich hier um einen Textabsatz handelt:

      <p>Hier
steht mein Text</p> 
      <p>Hier steht mein Text</p>

 <p>Hier steht noch mehr Text</p> 

Seitenüberschrift

      <title>Überschrift</title> 

Trennlinie

      <hr> 

Damit haben wir das Prinzip von HTML schon einmal im Griff. Alle Tags kann man in einen Editor schreiben und die abgespeicherte Datei dann mit dem Web-Browser anschauen. Doch für eine richtige Seite fehlt es noch an der Struktur. Die gibt es nämlich auch, sie hilft eine Seite zu gliedern und sagt dem Browser, was er wo findet.

Eine Seitenstruktur besteht aus einen Kopf (head) und den Körper (body). Innerhalb dieser beiden Bereiche finden sich dann die Inhalte wieder. Außerdem gibt es eine sogenannte Dokumenten-Definition (doctype). Die sieht etwas kompliziert aus. Ihr Sinn besteht darin, dem Browser zu sagen, welche HTML-Version er erwarten soll. Es funktioniert auch ohne diese Angabe, sie gehört jedoch zu einer gut codierten Seite dazu.

Zu guter letzt findet sich noch ein wichtiger Tag, nämlich <html>. Er steht direkt unter der Doctype-Definition und bildet auch den Schluß der Seite. Diesen Tag dürfen Sie niemals vergessen, da sonst die Seite unter Umständen gar nicht mehr angezeigt würde.

Das Ganze stellt sich dann so dar:

      <!doctype html public "-//W3C//DTD
HTML 3.2//EN"> 
 <html> 
 <head> 
 <title>Meine
erste Seite</title> 
 </head> 
 <body> 

 Hier
ist Platz für die eigentlichen Inhalte: Texte und Bilder und natürlich
HTML Tags.

 </body> 
 </html> 

Jetzt können Sie im Prinzip loslegen. Was fehlt, sind die einzelnen Tags, um Bilder einzufügen, Schriften farbig zu machen oder in der Größe zu ändern und viele andere Dinge mehr.