Archive for the ‘Grundlagen’ Category

Einstieg ins HTTP Protokoll

Kenntnisse des HTTP Protokolls werden von Systemadministratoren und Internet Entwicklern benötigt. Webdesigner können mit diesen Kenntnissen Interaktionen optimieren. Daher werde mit diesem Post eine Artikelserie zum HTTP Protokoll beginnen.

Auf dem HTTP Protokoll basiert das World Wide Web. Es ist das Protokoll für das Handling und den Transport von Webdokumenten und Grafiken verwendet wird.

  • Mit Kenntnisse über das HTTP Protokoll können Sie die Kommunikation zwischen den Clients und den Webservern verstehen.
  • Zudem lassen sich Protokolle optimieren und dadurch Webdienste verbessern.

Die Entwicklung des HTTP Protokolls

Das HTTP Protokoll  zusammen mit HTML und dem URL Konzept von Tim Berners-Lee und Roy Fielding entwickelt. Die Entwicklung startete 1989 am CERN Institut. Im Jahr 1991 wurde die Version 0.9 des HTTP Protokolls fertiggestellt.  Der RFC 1945 enthielt die Anforderungen des HTTP/1.0 und wurde im Mai 1996  veröffentlicht. Eine Ergänzung gab es 1999 mit dem RFC 2616. Dieser entheilt die Spezifikation für das Protokoll HTTP/1.1.

Funktion der HTTP Transaktionen

Die Kommunikation von Webclient (Browser) und der Webserver werden mit Hilfe des HTTP Protokolls geführt. Hier ein Beispiel zu einer einfachen Transaktion.

einfache HTTP Kommunikation

einfache HTTP Kommunikation

 

1 – Webclient sendet Request an den Webserver

(Request-Zeile)GET / HTTP/1.1
Hostwww.google.de
User-AgentMozilla/5.0 (Windows NT 5.1; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Languagede,en;q=0.8,ru;q=0.5,ja;q=0.3
Accept-Encodinggzip, deflate
Accept-CharsetISO-8859-1,utf-8;q=0.7,*;q=0.7
Connectionkeep-alive
Cache-Controlmax-age=0

Zeilennummer.     Beschreibung

  1. Die Request-Zeile fordert vom Webserver ein Dokument aus dem Root Pfad “/” an und verwendet die Version 1.1 des HTTP Protokolls.
  2. Hier wird dem Webserver mitgeteilt, wie der Hostname des Clients lautet. Bei HTTP1.1 ist dies eine Mußangabe. Der Webserver kann dadurch den Dokumenten-Pfad zu bestimmen.
  3. Der Webclient (Browser) gibt seine Versionsbezeichnung bekannt. In unserem Fall ist dies Mozilla Firefox V 9.01 auf Windows XP.
  4. In dieser Zeile wird mitgeteilt, welche Dokument Typen akzeptiert werden.
  5. Es werden die akzeptierten Sprachen bekanntgegeben. Dies können, wie in unserem Fall, auch mehrere Sprachen (de=Deutsch; en=Englisch; ru=Russisch; ja=Japanisch) sein.
  6. In dieser Zeile wird bekanntgegeben, dass der Webclient mit gzip und deflate umgehen kann.
  7. Mit Accept-Charset wird dem Server die vom Webclient akzeptierten Zeichensätze bekanntgegeben.
  8. Hier wird dem Webserver mitgeteilt, dass die Verbindung offen zu halten ist. Bei HTTP 1.1 ist dies die Standard Einstellung.
  9. Es wird mitgeteilt, nach wie vielen Sekunden seit dem Abruf das Dokument als veraltet zu betrachten ist.

2 – Response vom Webserver zum Webclient

(Status-Zeile)HTTP/1.1 200 OK
DateFri, 30 Dec 2011 19:38:01 GMT
Expires-1
Cache-Controlprivate, max-age=0
Content-Typetext/html; charset=UTF-8
Content-Encodinggzip
Servergws
Content-Length17133
X-XSS-Protection1; mode=block
X-Frame-OptionsSAMEORIGIN

 Zeilennummer.     Beschreibung

  1. Die Status-Zeile sagt dem Webclient dass die Version 1.1 des HTTP Protokolls verwendet wird. Dann folgt der Statuscode “200“.  Dieser sagt aus, dass das Dokument gefunden wurde und in dem Response enthalten ist.
  2. Die nächste Zeile zeigt das Server Datum und die aktuelle Uhrzeit an. Die Uhrzeit wird immer als Greenwich Mean Time (GMT) angegeben.
  3. Das Expires zeigt an, wie lange sich der Inhalt sich nicht ändern wird. In unserem Fall kann sich der Inhalt jederzeit ändern.
  4. Es wird mitgeteilt, nach wie vielen Sekunden seit dem Abruf das Dokument als veraltet zu betrachten ist.
  5. Der Content-Type gibt den Typ des gesendeten Dokuments an. In unserem Fall ist dies der Quelltext einer Webseite. Dieser Quelltext wird vom Browser in eine Webseite umgewandelt.
  6. In dieser Zeile wird bekanntgegeben, dass der Webserver das Dokument mit mit gzip gepackt hat.
  7. Der Server Typ ist “gws” (Google Webserver).
  8. Die Textlänge des Dokuments ist 17133 Zeichen.
  9. Hier wird durch “1” angezeigt, dass der Cross Side Scripting Filter eingeschaltet ist und der Modus auf blockieren eingestellt ist.
  10. Mit “X-Frame-Options” wird der Clickjacking Schutz gesteuert. Durch die Einstellung “SAMEORIGIN” wird die Webseite angezeigt, wenn keine Überlagerung der originalen Webseite mit einer weiteren Ebene stattfindet.

 

Weiter geht es mit den Client Methoden beim HTTP Request

 

 

Das World Wide Web ist 20 Jahre alt … und hat mein Leben beeinflusst

Am 21.07.2011 ist das World Wide Web 20 Jahre alt geworden. Das Relikt aus den Zeiten des kalten Krieges hat sich durch Tim Berners Lee Ideen zur Informations- und Kommunikations Plattform gewandelt. Doch wie hat alles begonnen? Der damalige Arbeitgeber CERN gibt darüber Auskunft.

1989 erfand Tim Berners Lee das World Wide Web am Kernforschungsinstitut CERN um Forschungsergebnisse mit seinen wissenschaftlichen Kollegen in aller Welt automatisch austauschen zu können. Zu dieser Zeit hatte CERN Kontakte zu mehr als 8.000 Wissenschaftlern in 60 Ländern der Erde.

Tim Berners Lees Vision war ein Hypertext System, mit dem Personal Computer (PCs) über ein Netzwerk die Informationen austauscht. Zusammen mit Robert Cailliau verfeinerte er das System und so konnte Ende 1990 eine Präsentation des  Prototyps stattfinden. Der angeschlossene PC hatte ein NeXT Betriebssystem mit dem ersten komfortablen Browser. 1991 wurde ein einfacher Browser, ein Webserver und eine Bibliothek für Entwickler allen Wissenschaftlern zur Verfügung gestellt.

Kurze Zeit später stand dies im Internet zur Verfügung und die Internet Community sorgte für Weiterentwicklung. Das Stanford Linear Accelerator Center (SLAC) in Kalifornien war nach CERN das erste Institut mit World Wide Web im Internet. Ende 1993 gab es 500 Webserver. 1994 gab es 10.000 Webserver mit weltweit 10 Millionen Nutzern. Fast alle Webseiten der ersten Stunde sind verloren gegangen. Hier die Webseite der ersten Präsentation vom 03.November 1992.

 

The World Wide Web project 03.11.1992

The World Wide Web project

Das neue Medium World Wide Web interessierte mich neben Newsgroups, Datex-P, BTX und Datenfernübertragung. Da gab es viel Potential zur Weiterentwicklung.

CERN und die weiteren Entwickler beschlossen, dass das World Wide Web als offener Standard weitergeführt werden soll. Dazu wurde im Oktober 1994 das World Wide Web Consortium (W3C) gegründet. Tim Berners Lee verlässt das CERN um am MIT für das W3C zu arbeiten. Europas erster W3C Host wurde 1995 durch INRIA zur Verfügung gestellt. HTML, Style und Grafik wurden 1995 durch das W3C präsentiert.

1995 entwickelte ich Webseiten. Eine historische Präsentation gibt es heute noch im Internet.

 

Stanford University Homepage von 1996

Stanford University Homepage von 1996

Eine weitere Webseite der Stanford Universität aus dem Dezember 1996.

 

Keio University Home Page 1996

Keio University Home Page von 1996

Die Keio Universität in Japan startete 1996 den ersten asiatischen W3C Host. Seit 1996 gebe ich Unterricht über unterschiedliche Themen zum Bereich Internet, Webseiten Entwicklung und Bildbearbeitung. Einige Jahre später entwickelte ich zusammen mit dem europäischen Marketing die erste Version von Service Webseiten für Toshiba Deutschland/Österreich.

  Ein weiterer Meilenstein war 1997. Hier präsentierte das W3C das Document Objects Modell (DOM).  2001 startete das semantische Web und es gab erste Qualitäts Sicherungs Maßnahmen. Seitdem gibt es eine kontinuierliche Weiterentwicklung.

Aktuell wird an der HTML Version 5 und Cascading Style Sheet (CSS) Version 3 gearbeitet. HTML, CSS, und Javascript bieten viel Potential zur Entwicklung des World Wide Webs. Auch die Geräte zur Nutzung des Internets sind heute vielfältiger. Internet kann mit modernen Fernsehern, Computern, Smartphones, Tablets und Spezialgeräten wie Auto, Kühlschränke, Mikrowellen genutzt werden. In Zukunft wird das World Wide Web mehr mit mobilen Geräten genutzt werden. Dazu die werden tragbare Geräte mit modularer Technik kombiniert. Die Cloud wird der jederzeit verfügbare Speicherplatz, der zudem auch mit anderen geteilt werden kann. Zeitweise hohe Rechenleistung wird durch gemietete Rechnerangebote in der Cloud abgewickelt.

 

Inline Frame mit dem Dreamweaver nutzen

Außer dem Inline Frame werden bei HTML5 alle Frames Techniken als technisch veraltet ( deprecated) gekennzeichnet. Frames haben Nachteile bei dem Auffinden von Informationen bei Suchmaschinen. Die komplette Struktur der Webseite kann die Suchmaschine nicht erkennen.

Eine Ausnahme bildet der Inline-Frame der auch iFrame genannt wird. Mit dem iFrame kann der Inhalt einer Webseite innerhalb eines definierten Bereichs einer anderen Webseite dargestellt werden.

Beispiel einer Webseite mit iFrame

iFrame in einer Webseite

iFrame in einer Webseite

 

 

Inline Frames im Dreamweaver erstellen

Im Adobe Dreamweaver ist die iFrame Funktion versteckt zu erreichen. Wählen Sie Einfügen/HTML/Frames/IFRAME aus.

Adobe Dreamweaver CS5 - iFrame Auswahl

Adobe Dreamweaver CS5 - iFrame Auswahl

 Die Attribute können im Dreamweaver im Tab “Tag Inspector” auf der rechten Seite eingegeben werden. Nachfolgend habe ich die Attribute beschrieben. 

Attribute von iFrames

  • src
    Hier wird die URL eintragen
  • name
    Ein eindeutiger Name muss hier angegeben werden
  • width
    Die Breite des iFrames in Pixel angeben
  • height
    Die Höhe des iFrames in Pixel angeben
  • marginwidth
    Der Abstand in Pixel von der linken oberen Seite des iFrames zum linken Rand der Webseite
  • marginheight
    Der Abstand in Pixel von der oberen Seite des iFrames zum oberen Rand der Webseite
  • scrolling
    Einstellung ob ein Scrollbalken verfügbar sein soll.
    • auto” bedeutet dass der Browser prüft ob ein Scrollbalken gebraucht wird
    • mit “yes” wird der Scrollbalken immer angezeigt
    • mit “no” wird kein Scrollbalken angezeigt
  • align
    Die Ausrichtung des iFrames auf der Webseite
    • left” ist linksbündig
    • center” zentriert den iFrame in der Mitte
    • right” stellt den Frame rechtsbündig ein
  • hspace
    Rechte und linke Rahmenbreite in Pixel
  • vspace
    Obere und untere Rahmenbreite in Pixel
  • sandbox
    Mit Hilfe der Sandbox wird die im iFrame dargestellte Webseite in einem geschützten Bereich ausgeführt.

 

Attribute bei Dreamweaver einstellen

Der Tag-Inspektor befindet sich auf der rechten Seite des Dreamweaver. Dort können die Attribute leicht eingestellt werden. 

 

Adobe Dreamweaver CS5 - iframe Einstellung

Adobe Dreamweaver CS5 - iframe Einstellung


 Quellcode Beispiel

 Nachfolgend finden Sie den Quellcode einer HTML Seite mit Inline Frame. 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Unbenanntes Dokument</title>
</head>

<body>
<h2>Inline Frame mit dem Dreamweaver nutzen</h2>

<p><iframe src=”http://www.arina.mobi” name=”framebereich” width=”600″ height=”400″ marginwidth=”600″ marginheight=”400″ align=”left” scrolling=”auto” frameborder=”0″>Der Browser stellt keine Inline Frames dar.</iframe>&nbsp;</p>
</body>
</html>

 

 

Cascading Style Sheet V2.1 vom W3C als Standard freigegeben

Heute hat das World Wide Web Consortium (W3C) die Version 2.1 der Cascading Style Sheets (CSS) freigegeben. Durch Cascading Style Sheets werden Inhalte und Design der Webseiten getrennt. Der Vorteil ist, dass sich Webseiten mit Cascading Style Sheets besser warten lassen. Eine Designänderung kann mit Hilfe von Zentraldokumenten an einer Stelle durchgeführt werden.

Das W3C empfliehlt die Nutzung, da alle aktuellen Browser CSS 2.1 unterstützen. Es wird seit längerer Zeit bereits an der Nachfolgeversion CSS 3 gearbeitet. Auch hier sind Teile der vorläufigen Spezifikation in einigen Browsern implementiert.

 

Übersicht zur Erstellung von HTML Webseiten

Hier noch die Übersicht der Beiträge, die für die Erstellung von Webseiten notwendig sind. Mit Hilfe dieser Basisinformation lassen sich die ersten, einfachen Webseiten erstellen.

Übersicht für die Erstellung von HTML Webseiten

 

Tabellen in Webseiten nutzen

Heute wird für das Webdesign meist Cascading Style Sheets verwendet. Trotzdem ist es für Einsteiger interessant, die Möglichkeiten von Tabellen im Webdesign kennenzulernen. Zudem können Daten tabellarisch dargestellt werden. Fangen wir mit der Darstellung von tabellarischen Daten an.

Tabellen werden mit dem Tag <table border=“1“ > … </table> definiert. Die Tabelle wird nun als Zeile betrachtet. In der Zeile gibt es jeweils eine festgelegte Menge an Zellen.

Tabelle <table>

Zeile 1 <tr>

 

Zelle 1 <th>

Zelle 2 <th>

Zelle 3 <th>

 

Zeile 2 <tr>

 

Zelle 1 <td>

Zelle 2 <td>

Zelle 3 <td>

 

Die oben gezeigte Tabelle hat den Quellcode:

<body>
 <h1>Tabellarische Daten</h1>
 
 <table border="1"> <!-- Tabelle -->
 <tr><!-- Zeile 1 -->
 <th>Zelle 1</th>
 <th>Zelle 2</th>
 <th>Zelle 3</th>
 </tr>
 <tr><!-- Zeile 2 -->
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 <td>Zelle 3</td>
 </tr>
 </table>
</body>

 

Bei dem Tag <table> können Attribute eingesetzt werden

Attribut

Beschreibung

align

Ausrichtung der Tabelle: left, center, right

border

Rahmenstärke: in Pixel

cellpadding

Innenabstand des Textes: in Pixel

cellspacing

Abstand der Zellen zueinander: in Pixel

width

Breite der Tabelle: in Prozent oder Pixel

height

Höhe der Tabelle: in Prozent oder Pixel

bgcolor

Tabellenweite Hintergrundfarbe: #RRGGBB

 

Ein Hintergrundbild lässt sich mit Hilfe von CSS einbinden

Der Tag lautet dann

<table border=“0“ style=”background-image:url(background.jpg)”> … </table>

Tabelle mit Hintergrundbild

Tabelle mit Hintergrundbild

Natürlich lässt sich das oben gezeigte Attribut für Hintergrundbilder auch in einer Tabellenzelle einsetzen.

 

Bei den Tabellenzellen gibt es weitere Attribute

Attribut

Beschreibung

align

Ausrichtung der Zelle: left, center, right

bgcolor

Tabellenweite Hintergrundfarbe: #RRGGBB

width

Breite der Zelle: in Prozent oder Pixel

height

Höhe der Zelle: in Prozent oder Pixel

nowrap

Kein Zeilenumbruch

colspan

Zellen zeilenweise verbinden

rowspan

Zellen spaltenweise verbinden

 

Tabellen als Design Vorlage für Webseiten

Viel häufiger als zur Darstellung tabellarischer Daten werden Tabellen für Vorlagen in HTML Webseiten eingesetzt. Sie haben den Vorteil, dass mit Grundkenntnissen schöne Designs erstellt werden können. Wir werden jetzt ein Beispiel erarbeiten.

Die Webseite wird in Bereiche aufgeteilt

Webdesign mit Tabelle

Webdesign mit Tabelle

1. Schritt:

Wir beginnen mit unserer Basis Webseite und stellen die Ränder der Webseite auf 0 Pixel ein. Hier sind die Attribute beim Internet Explorer und dem Browser Firefox unterschiedlich.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Design Vorlage</title>
 </head>
 <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
 
 </body>
</html>

2. Schritt:

Als nächstes fügen wir die Tabelle für das Grundgerüst ein. Die Rahmenstärke wird mit 1 Pixel definiert und sichtbar. Damit die Zellen sichtbar werden, schreiben wir einen Buchstaben hinein. Bei der ersten Zeile verbinden wir mit colspan die drei Tabellenzellen zu einer Zelle.

Bei der zweiten Zeile fügen wir bei den Zellenattributen mit width die Breite der jeweiligen Spalte ein.

...
<table border="1" cellspacing="0" cellpadding="0" width="100%">
 <tr>
 <td colspan="3">a</td><!-- 3 Zellen verbinden -->
 </tr>
 <tr>
 <td width="200">a</td>
 <td width="*">a</td>
 <td width="3%">a</td>
 </tr>
</table>
...

3. Schritt:

Jetzt bringen wir Hintergrundbilder in die Tabellenzellen ein. Wir setzen den Beginn des Textes nach oben ( vspace=“top“ ) in den Bereichen Menu und Text.

...
<table border="1" cellspacing="0" cellpadding="0" width="100%">
 <tr>
 <td colspan="3" style="background-image:url(images/hawaii_titel.jpg)">a
 <br />
 <br />
 <br />
 <br />
 <br />
 </td><!-- 3 Zellen verbinden -->
 </tr>
 <tr>
 <td width="200" style="background-image:url(images/strand.jpg)">a
 <br />
 <br />
 <br />
 <br />
 <br />
 </td>
 <td width="*">a</td>
 <td width="3%">a</td>
 </tr>
</table>
... 

Ergebnis:

Webseiten Vorlage mit Tabelle

Webseiten Vorlage mit Tabelle

Manche einfache, mobile Geräte unterstützen Cascading Style Sheets nur teilweise. Hier hilft das Tabellen Design weiter.

 

zur Übersicht

 

Mit Hyperlinks die Webseiten verbinden

Mit Hyperlinks werden die Informationen auf Webseiten verbunden. Zudem wird der Nutzer in den Webseiten geführt. Daher sollte genau überlegt werden, was der Nutzer jeweils betrachten kann. Es gibt zwei verschiedene Grundtypen der Verlinkung.

 

Parallele Verlinkung

Die parallele Verlinkung hat den Vorteil, dass die nachfolgenden Ebene von Webseiten direkt ausgewählt werden können.

Webseite parallel verlinkt

Webseite parallel verlinkt

Der Hyperlink führt von der aktuellen Webseite zu weiteren Seiten. Es gibt die Möglichkeit den Hyperlink nur in eine Richtung zuzulassen oder auch einen Rücksprung zu erlauben. Der Rücksprung wird durch einen Hyperlink in der Zielseite realisiert.

 

Serielle Verlinkung

Bei der seriellen Verlinkung kann der Nutzer nur in eine Richtung wechseln oder auch zurück. Wenn der Webseitenwechsel nur in eine Richtung möglich ist, dann spricht man von einem Tunnel. Der Nutzer muss bis zum Ende gehen, damit weitere Webseiten angesehen werden können.

Webseite seriell verlinkt

Webseite seriell verlinkt

In der Praxis werden beide beschriebenen Typen verwendet.

Es gibt zwei verschiedene Möglichkeiten den eine Datei im Dateisystem der Festplatte zu finden.

 

Die absolute Angabe des Pfads

Dies geschieht zum Beispiel bei Microsoft Windows Dateisystemen ausgehend von dem Wurzelverzeichnis c:\.

Beispiel Dateisystem

Beispiel Dateisystem

Wird von der Datei „kontakt.html“ die Grafikdatei „foto2.jpg“ aufgerufen, dann wird folgender Pfad angegeben: „C:\Webseiten\images\foto2.jpg“. Wird nun die Datei foto2 geladen, funktioniert dies auf dem lokalen Computer ohne Fehler.

 

Die relative Angabe des Pfads

Sobald aber die Dateien aus dem Ordner „Webseiten“ und die darin enthaltenen Verzeichnisse auf einen Webserver im Internet geladen werden, liegen die Daten an einem anderen Platz. Dadurch funktionieren Hyperlinks nicht mehr und Grafikdateien werden nicht angezeigt! Daher muss in Webseiten ein relativer Pfad angegeben werden.

Hier wird von dem Verzeichnis ausgegangen, in dem sich die Webseite „kontakt.html“ befindet. Nun sehen wir in der Grafik mit dem Beispiel des Dateisystems, dass sich die Bilddatei „foto2.jpg“ in dem Subverzeichnis „images“ befindet. Somit wird der Pfad „images/foto2.jpg“ angegeben.

Damit Hyperlinks auf dem Webserver funktionieren, muss bei Bildern, Links und Dateien der relative Pfad angegeben werden.

Zum Verlinken wird der Tag <a href=“ziel.htm“>Text</a> verwendet. Wir verwenden unsere Vorlage und verlinken die Menüpunkte.

 

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Design Vorlage</title>
 </head>
 <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
 <table border="0" cellspacing="0" cellpadding="4" width="100%">
 <tr>
 <td colspan="3" style="background-image:url(images/hawaii_titel.jpg)"
><div align="center"><h1>Hawaii</h1></div>
 <br />
 </td><!-- 3 Zellen verbinden -->
 </tr>
 <tr>
 <td width="200" style="background-image:url(images/strand.jpg)" valign="top">
 <a href="index.html">Startseite</a>
 <br />
 <a href="sonnenuntergang.html">Sonnenuntergang</a>
 <br />
 <a href="straende.html">Strände</a>
 <br />
 <a href="vulkan.html">Vulkan</a>
 <br />
 <a href="kontakt.html">Kontakt</a>
 <br />
 </td>
 <td width="*" valign="top">Text</td>
 <td width="3%">&nbsp;</td>
 </tr>
 </table>
 </body>
</html>

Mit wenigen Zeilen Quellcode ist die Vorlage inklusive der Hyperlinks fertiggestellt.

 

Hyperlinks innerhalb einer Webseite

Zusätzlich gibt es die Möglichkeit mit Hilfe von Ankern innerhalb einer Webseite zu springen. Dazu muss im ersten Schritt ein Anker <a name=“Name des Ankers“></a> gesetzt werden.

Im zweiten Schritt wird der Hyperlink <a href=“#Name des Ankers“>Text</a> eingebunden.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Langer Text mit Anker</title>
 </head>
 <body>
 <h1>
 <a name="Textbeginn">Hyperlinks mit Anker</a><!-- Anker -->
 </h1>
 
 <div align="center">
 <a href="#Textende">Textende</a><!-- Hyperlink zum Anker -->
 - 
 <a href="#Textbeginn">Textbeginn</a><!-- Hyperlink zum Anker -->
 </div>
 <!-- Hyperlink zum Anker -->
 <br /><br />
 Lorem ipsum dolor sit amet consectetuer Curabitur commodo est wisi volutpat.
 Convallis quis Quisque lacus tincidunt tincidunt nec elit laoreet aliquam
metus. Dignissim Nullam Nulla pellentesque Nam wisi pretium quis tempus 
. Eget sed Sed Sed leo vel Aliquam.
<a name="Textende"></a>
<br /><br />
<div align="center">
 <a href="#Textende">Textende</a><!-- Hyperlink zum Anker -->
 - 
 <a href="#Textbeginn">Textbeginn</a><!-- Hyperlink zum Anker -->
 </div>
 </body>
</html>

 

Hyperlink zu externen Webseiten

Manchmal sollen externe Webseiten verlinkt werden. Dazu wird der Tag <a href=“http://www.html-lernen.de“>Text</a> verwendet. Meist ist es sinnvoll das verlinkte Ziel in einem weiteren Fenster zu öffnen. Dies wird durch das Attribut <a href=“http://www.html-lernen.de“ target=“_blank“>Text</a> ermöglicht.

Hyperlinks zu Email

Praktisch ist der Aufruf eines Email Fensters. Dort ist die Email Adresse eingetragen. Dazu verwenden wir den Tag

<a href=“mailto:email@adresse.de“>Text</a>

Mit subject kann ein Betreff angegeben werden

<a href=“mailto:email@adresse.de?subject=Ein%20Betreff“>Text</a>

Hyperlinks zu Dateien

Mit einem Link können beliebige Dateien gestartet werden. Der dazu notwendige Tag sieht so aus:

<a href=“pfad/dateiname.exe“>Text</a>

 

zur Übersicht

 

Was bedeutet “Information” im Kontext der Informatik

Der Begriff Information ist in der römischen Antike zum Beispiel durch Cicero als Vorstellung der Götter “informatio dei” genutzt worden. Augustinus hat mit “informatio sensus” den Prozess der sinnlichen Wahrnehmung auch als Unterweisung und Belehrung abgeleitet. Im 15. und 16. Jahrhundert wurde “informare” für die Tätigkeit der Benachrichtigung genutzt.

Der Mathematiker Claude E. Shannon definierte 1948 in seinem Aufsatz ” A Mathematical Theory of Communication” den Begriff Information im Kontext der Nachrichtentechnik. Daraus entstanden Wissenschaftsbereiche wie Informationswissenschaft und Informatik. Aber auch die Disziplinen Soziologie, Medientheorie und Philosophie wurden dadurch beeinflusst.(1)

 

Betrachten wir die nun den Prozess der Entstehung von Information und Wissen

Daten sind in der Informatik Zeichen, die meist maschinenbearbeitbar sind. Stehen diese Zeichen im Kontext einer Bedeutung, dann werden aus strukturierten Daten Informationen. Aus Informationen wird Wissen, wenn Menschen durch Beobachtung oder Erfahrung auf Zusammenhänge schließen. Nach der Philosophie Kants wird dies mit durch den Verstand kontrollierte Vernunft erreicht.

Beispiel

Daten08937432
Information (durch Kontext “Telefonnummer”)08937432
Wissen (durch Erfahrung oder Beobachtung: München hat die Vorwahl “089″)08937432

 

In diesem Zusammenhang gibt es eine asiatische Sichtweise, die ein berühmter asiatischer Philosoph schrieb (2)

Die Nichtwissenheit wissen
ist das Höchste.
Nicht wissen, was Wissen ist,
ist ein Leiden.
Nur wenn man unter diesem Leiden leidet,
wird man frei von Leiden.
Daß der Berufene nicht leidet,
kommt daher, daß er an diesem Leiden leidet;
darum leidet er nicht.

 

Quelle: (1) Alexander Roesler/Bernd Stiegler “Grundbegriffe der Medientheorie”; (2) Laotse