Archiv der Kategorie: HTML

Alles über die Darstellungs Sprache HTML

HTML Umlaute und Sonderzeichen

Ihr habt euch bestimmt schon öfter über die fehlerhafte Darstellung der HTML Umlaute und Sonderzeichen wie zum Beispiel „ö, ä, ü und ß“ in euren Webseiten gewundert. Dieses Problem hat mich in meiner Anfangszeit immer wieder verfolgt. Man kann dies aber in HTML ganz leicht umgehen indem man für diese Umlaute bzw. Sonderzeichen eine andere Schreibweise nimmt. Mit der hier erklärten Schreibweise sehen eure Texte immer gut bzw. fehlerfrei aus, egal ob Ihr UTF8, ANSI oder welche Zeichenkodierung auch immer verwendet. Ich zeige euch nun die wichtigsten Zeichen in diesem Beitrag, alle anderen könnt Ihr auf einer Sonderzeichen Tabelle nachlesen welche ich weiter unten verlinken werde.
 

Übersicht über die wichtigsten HTML Umlaute und Sonderzeichen:

ä = ä
ö = ö
ü = ü
Ä = Ä
Ö = Ö
Ü = Ü
& = &
< = &lt;
> = &gt;
« = &laquo;
» = &raquo;
“ = &quot;
© = &copy;
® = &reg;
™ = &trade;
§ = &sect;
ß = &szlig;
€ = &euro;
£ = &pound;
| = &#124;
• = &bull;

Es gibt natürlich noch, wie schon oben erwähnt, jede Menge andere Sonderzeichen welche zwar nur selten gebraucht werden, über welche man aber dennoch bescheid wissen sollte.
Quelle: HTML Sonderzeichen Tabelle
 
Jetzt habt Ihr keine Probleme mehr durch HTML Umlaute und Sonderzeichen. Damit sollten alle Darstellungfehler in euren Webseiten Vergangenheit sein. Bei Fragen, Anregungen oder konstruktiver Kritik einfach einen Kommentar hinterlassen oder im Forum Posten. Und wie gesagt falls Ihr noch mehr Sonderzeichen braucht seht einfach in der Quelle zu diesem Beitrag nach, dort sind wirklich ausnahmslos alle Sonderzeichen aufgeführt, seien sie auch noch so unwichtig. Ich hoffe ich konnte euch mit diesem Beitrag weiterhelfen.
Check This Out

Mit dem HTML Blockelement „div“ arbeiten

Ein HTML „div“ ist wie die Überschrift schon sagt ein Blockelement. Das „div“ steht für Division und wird von allen gängigen Browsern unterstützt. Alles was zwischen dem Start-Tag und dem End-Tag des Div’s steht wird als ein Teil dieses Bereiches angesehen. Man benutzt dieses Element um Bereiche einzugrenzen welche man zum Beispiel mit CSS formatieren möchte. Dazu teilt man dem Element dann eine „Klasse (class)“ oder eine „ID (id)“ zu.
 
So wird ein „div“ erstellt:
<div id="div_01" class="header">
    Hier stehen dann alle Elemente welche man durch den "div" eingrenzen möchte.
</div>

Die id kann nur einmalig vergeben werden, muss also eindeutig sein, der Klasse können mehrere Elemente angehören, bzw. mehrere „div’s“ können die selbe Klasse haben, aber nur eine id.
 
Jetzt kann man den „div“ mit CSS formatieren, das sieht so aus:
<style type="text/css">
    .header {
        /* Element wird relativ positioniert */
        position: relative;
        /* Element steht links und weitere Elemente umfliessen es von rechts her */
        float: left;
        /* Äusserer Randabstand = 0 */
        margin: 0;
        /* Innerer Randabstand = 0 */
        padding: 0;
    }
 
    #div_01 {
        /* Hintergrundfarbe des Elements wird festgelegt */
        background: #BCBCBC;
        /* Schriftfarbe des Elements wird festgelegt */
        color: #333333;
    }
</style>

Ihr könnt in den „div“ reinpacken was Ihr wollt, da sind eigentlich keine Grenzen gesetzt. Und er akzeptiert die globalen HTML Attribute wie z.B. „align=“center“, width=“100%“, height=“200″ und noch viele mehr. Man sollte dies aber soweit möglich komplett über CSS regeln, das macht einen wesentlich übersichtlicheren Code und hat sich im Prinzip schon Standart durchgesetzt. Ich regle auch soweit es geht alles über CSS.
 
Ich hoffe dieser Beitrag hilft euch weiter, viel Spass beim Testen.

Verlinken mit HTML oder das Anchor Element

Das Anchor bzw. <a> Tag in HTML wird sehr häufig verwendet. Man verlinkt damit Inhalt. Die Definierung eines solchen Links bzw. Verweises schaut folgendermaßen aus:
<a id="HomeLink" class="Link" href="blog.multi-player.net/blog" target="_blank" rel="follow" title="Baud's Blog">Zur Seite wechseln</a>
 

Verweise haben viele Attribute, die am Anfang wichtigsten erkläre ich jetzt:

  • target: mit dem „target“ Attribut legen wir das Zielfenster für den Verweis fest.
  • rel: Hiermit wird die Beziehung des momentanen Dokumentes zum verlinkten Dokument festgelegt.
  • title: damit wird dem Link ein Titel zugeordnet welcher erscheint wenn man mit der Maus über den Verweis fährt (hover).
  • href: mit dem „href“ Attribut wird die Verweis URL bzw. der zu verlinkende Inhalt festgelgt.
  • id: damit wird dem Verweis eine einzigartige ID zugeteilt welche man z.B. mit Javascript oder CSS ansprechen kann.
  • class: hiermit wird dem Link eine Klasse zugeteilt welche man ebenfalls mit z.B. Javascript oder CSS ansprechen kann.

 

Nun zeige ich euch die Werte welche die einzelnen Attribute haben können:

target:

  • _blank: Verweis in einem neuen Fenster öffnen.
  • _self: Verweis im aktuellen Fenster öffnen.
  • _parent: bei verschachtelten Framesets wird das aktuelle Frameset gesprengt.
  • _top: bei verschachtelten Framesets werden alle Framesets gesprengt.

 
rel:

  • alternate: Ein Link zu einer alternativen Version des ursprünglichen Dokumentes.
  • author: Link zum Author des ursprünglichen Dokumentes.
  • bookmark: Permanente URL um ein Lesezeichen zu setzen.
  • help: Hier wird ein „Help“ bzw. „Hilfe“ Dokument verlinkt.
  • license: Ein Link zu den Copyright Informationen des ursprünglichen Dokumentes.
  • next: Das nächste Dokument in dieser Auswahl.
  • prev: Das vorherige Dokument in dieser Auswahl.
  • nofollow: Ein link zu einem nicht bestätigtem Dokument dem ein Crawler z.B. der Googlebot nicht zu folgen braucht.
  • noreferrer: Hier soll der Browser keine sogenannten „HTTP referer header“ ausgeben wenn diesem Link gefolgt wird.
  • prefetch: Das Ziel Dokument soll gecached werden.
  • search: Link zu einer Suchmaschine wo das urspüngliche Dokument als Suchvariable gesetzt ist.
  • tag: Hiermit wird ein Tag bzw. Keyword für das aktuelle Dokument definiert.

 
title:

  • Der Titel ist ein String welcher zusätzliche Informationen über das verlinkte Dokument enthält.
  • Er erscheint wenn man mit der MAus über den Link geht (Hover).

 
href:

  • Der Zielpfad des verlinkten Dokuments, ebenfalls ein String.
  • Kann auch nur der Dateiname sein wenn das verlinkte Dokument im gleichen Verzeichnis liegt wie das ausgangs Dokument.

 
id:

  • String ID, kann frei gewählt werden.
  • Wird über das „#“ Zeichen in CSS oder Javascript angesprochen
  • Das wäre „#HomeLink“ in unserem Fall.

 
class:

  • String Klasse, kann auch frei gewählt werden.
  • Wird über das „.“ Zeichen in CSS oder Javascript angesprochen
  • Das wäre „.Link“ in unserem Fall.

 
Ich hoffe ich konnte euch weiterhelfen, viel Spass bei ausprobieren und Testen.
Bei Fragen hinterlasst einfach einen Kommentar unten oder eröffnet ein Thema im Forum dazu wenn Ihr eine Diskussion über das Thema starten möchtet.

Horizontales Menü mit HTML und CSS erstellen

Um eine einfache horizontale Navigation in HTML und CSS zu erstellen gibt einen recht einfachen Weg. Man nimmt dazu die HTML Listen Tags, also eine „ul“ und „li“ Konstellation. Diese kann man mit CSS formatieren um ziemlich schnell ein schönes Ergebniss zu erzielen.
So sieht das ganze aus, zuerst der HTML Teil:
<!DOCTYPE html>
<html>
    <head>
        <title>Horizontale Navigation</title>
    </head>
<body>
<h2>Horizontale Navigation:</h2>
<ul>
    <li><a href="#">Button1</a></li>
    <li><a href="#">Button2</a></li>
    <li><a href="#">Button3</a></li>
    <li><a href="#">Button4</a></li>
    <li><a href="#">Button5</a></li>
</ul>
</body>
</html>

Und jetzt der CSS Teil, welcher am besten genau als letztes Element im HTML Head eingefügt wird:
<style type="text/css">
    body {
        color: #000000;
        font-family: verdana;
        font-size: 12px;
    }
    h2 {
        text-align: center;
        text-decoration: underline;
        width: 100%;
    }
    ul {
        float: none;
        list-style: none outside none;
        margin: 0 auto;
        padding: 0;
        position: relative;
        width: 50%;
    }
    li {
        background: none repeat scroll 0 0 #868686;
        border: 1px solid #464646;
        border-radius: 3px;
        float: left;
        margin: 0 0 10px 10px;
        padding: 0;
        position: relative;
        width: 60px;
    }
    li:first-child {
        margin: 0 0 10px 10px;
    }
    li:hover {
        background: none repeat scroll 0 0 #757575;
        border: 1px solid #464646;
    }
    a {
        color: #FFFFFF;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }
</style>

Ihr könnt euch das Ergebnis hier ansehen:
Wenn Ihr den Quelltext am Stück sehen wollt einfach einen Rechtsklick in den Iframe machen und auf „Frame-Quelltext anzeigen“ gehen. Dann seht Ihr auch genau wie der Stylesheet im Header eingebaut ist.

Ich hoffe Ihr könnt mit dieser Information etwas anfangen.
Viel Erfolg weiterhin bei eurer eigenen Seite.

PDF-Dokumente mit HTML einbinden

Ein oft angefragtes Problem ist das einbinden von PDF-Dokumenten in eine HTML Seite. Das ganze ist eigentlich gar nicht so schwer weil HTML uns dafür das „object“ Tag zur Verfügung stellt.
Das ganze sieht dann folgendermaßen aus:
<object data="pdf-dokument.pdf#toolbar=1&navpanes=1&scrollbar=1&page=1&view=FitH" type="application/pdf" width="640" height="480" border="0">
    <p>Leider kann Ihr Browser keine PDF-Objekte anzeigen!</p>
</object>

Wir sehen hier noch einige Parameter welche dem Namen des PDF-Dokuments angehängt sind. Mit diesen Parametern legen wir fest welche Hilfselemente mit dem Dokument angezeigt werden sollen.
Diese Parameter werden leider nicht von allen Browsern gleichermaßen unterstützt. Die für mich beste Einstellung seht ihr oben. Damit habe ich auch Browserübergreifend ein gutes Ergebnis.
 
Erklärung zu den Parametern:
„toolbar“ kann man mit „1/0“ angeben, es regelt das Anzeigen der PDF-Toolbar.
„navpanes“ kann ebenfalls die Werte „1/0“ haben und regelt das Anzeigen des Navigation Panels.
„scrollbar“ hat auch die Möglichkeiten „1/0“ und legt fest ob eine Scrollbar angezeigt wird oder nicht.
„page“ kann „1/unendlich“ haben, damit wird festgelegt welche Seite des PDF-Dokuments angezeigt wird.
 
„view“ hat mehrere Einstell Möglichkeiten und regelt sozusagen das Bildformat des Dokuments:

  • view=Fit
  • view=FitH
  • view=FitH, top
  • view=FitV
  • view=FitV, left
  • view=FitB
  • view=FitBH
  • view=FitBH, top
  • view=FitBV
  • view=FitBV, left


Quelle: Adobe – PDF Open Parameters
 
Am besten testet Ihr einfach alle Werte durch und findet die für Euch beste Konfiguration. Vergesst nicht euer Ergebniss auf mehreren Browsern anzusehen, den es kann dort wie gesagt grosse Unterschiede in der Darstellung geben.
Ich hoffe ich konnte euch mit diesem Tutorial weiterhelfen, viel Spass beim ausprobieren bzw. testen.