Übersicht

Für die Erstellung einer Internetpräsenz werden inzwischen mehrere Programme und Techniken benötigt und es werden kontinuierlich mehr. Wo Anfangs noch Seiten in reinem HTML erstellt wurden, können nun mit Hilfe von JavaScript Formulare inhaltlich auf Vollständigkeit überprüft, eigene Newsticker sowie ein Countdown erstellt werden. Flash ermöglicht die Animation eines Logos, aufklappbare Menüs etc. Inzwischen werden die Inhalte einer Seite nicht nur von dem Betreiber erstellt, sondern es können auch externe Inhalte eingefügt werden. So bleiben die Inhalte immer aktuell ohne selber die Seiten aktualisieren zu müssen. Die Möglichkeiten sind inzwischen fast unbegrenzt, so dass man sorgfältig planen sollte, welche sinnvoll eingesetzt werden sollten. Um eine Kompatibilität und den Zugang von Behinderten zu gewährleisten sollte schon bei der Konzeption, aber auch bei den eingesetzten Techniken auf Barrierefreiheit geachtet werden. >> weitere Informationen zur Barrierefreiheit.

Einbinden externer Inhalte

Mit dieser Technik können schnell und einfach Daten von anderen Anbietern eingebunden werden. Vorteile sind die immer aktuellen Nachrichten und die Möglichkeit das Design an das Seitenlayout anzupassen. Für die Richtigkeit der Informationen wird im Allgemeinen nicht gehaftet, so dass man bei der Auswahl der Angebote sehr sorgfältig sein sollte.

Beispiel

Einbinden von Grafiken

Im Internet gibt es zwei mögliche Grafikformate (gif und jpg), die verwendet werden können. Hierbei ist zu beachten, dass die Dateien nicht zu groß sind. Der Kopf dieser Internetseite, eine Flash-Datei, ist 42 KB groß. Unsere Beispieldatei unten hat dagegen nur 2 KB. Sie können die Downloadzeiten dieser beiden Dateien vergleichen und alle, die sich mit einem Modem einwählen, werden sehr schnell bemerken, dass es relativ lange dauert ehe die Kopf-Datei vollständig runtergeladen ist. Aus diesem Grund stellen immer einige Benutzer die Grafiken aus. Es sollte deshalb zu jeder Grafik ein Alternativtext eingegeben werden, der die Grafik beschreibt. Zusätzlich ermöglicht dieses Verfahren auch Blinden Zugang zu den Seiten.

Beispiel

Den Alternativtext sehen Sie, wenn sie eine Weile mit der Maus auf dem Bild ruhen.

Meta Informationen

Hier handelt es sich um Informationen, die im Kopf <head> einer Seite, für den Besucher unsichtbar, eingebaut werden. Diese Angaben dienen den Servern, Web-Browsern und den Suchmaschinen Robotern (robots). Hier können Angaben zu den Autoren einer Seite, Stichworte und eine allgemeine Beschreibung der Seite etc. gegeben werden. weitere Informationen zu Meta Informationen

Parameter

Angaben zum Autor		<meta name="author" content="ihr Name">
Stichworte		<meta name="keywords" lang="de" content="die Stichworte werden durch Komma getrennt"> Sie können hier Stichworte für die Suchmaschinen bestimmen.
Stichworte (englisch)		Mit dem Parameter "lang=" wird die Sprache festgelegt. lang="en" Stichworte in englischer Sprache. fr = französisch it = italienisch es = spanisch
Datum		<meta name="date" content="2004-04-01">
Durchsuchen der Dateien einer Homepage durch Suchmaschinen erlauben/verbieten		<meta name="robots" content="follow"> Erlaubt Suchmaschinen das Durchsuchen der gesamten Homepage. <meta name="robots" content="nofollow"> Erlaubt das Durchsuchen der aktuellen Seite aber nicht der folgenden. <meta name="robots" content="index"> Erlaubt das Durchsuchen der Indexseite <meta name="robots" content="noindex"> verbietet das Durchsuchen der Dateien = keine Indexierung Einzelne Ordner und Dateinen können in einer speziellen Datei "robots.txt" von der Suche ausgeschlossen werden. weitere Informationen zur robots.txt
Beschreibung		<meta name="description" content="Beschreibung Ihrer Seite"> Diese Beschreibung wird beim Suchergebnis mit angezeigt. Sie sollte möglichst kurz sein. >> Beispiel
Laden der Originaldateien		Dateien werden, um die Ladenzeiten einer Seite zu erhöhen, Zwischengespeichert. Dies gescheit bei sogenannten Proxyserver, wie auch lokal auf dem Rechner. Erneuern sich die Inhalte einer Seite häufiger ist es sinnvoll die Orginalseiten in regelmäßigen Abständen zu laden. <meta http-equiv="expires" content="0"> es werden immer die Orginaldateien geladen. Statt 0 können Sie auch eine Zahl eingeben. Diese Zahl bedeutet dann die Anzahl der Sekunden, nach deren Ablauf die Orginaldaten geladen werden. <meta http-equiv="expires" content="86400"> Bei diesem Beispiel wird der Inhalt alle 24 h erneuert.
Kompatibilität		Neu ist die Meta Angabe der Browser Kompatibilität. Sie soll die DOCTYPE Angaben, bzw. die Angaben auf den Seiten "Optimiert für..." ablösen. Mit dem Meta-Tag `<meta http-equiv="X-UA-Compatible" content="IE=8" />` soll der Browser dazu gebracht werden die Seiten nach dem beschriebenen Standard darzustellen.

HTML Code

Internetseiten erscheinen nur "formschön" auf dem Bildschirm, wenn sie mit einem Programm geöffnet werden, dass die Informationen, den Code in den Dateien richtig interpretiert ... ein Browser eben.
Wir stellen Ihnen auf diesen Seiten verschiedene Elemante von Code vor, die in einer Seite auftauchen können. Hier ist der vollständige Code einer einfachen html-Seite zu sehen:

Beispiel

<html>

									<head>

									<title>Bert Beispiel Online</title>

									</head>

									<body bgcolor="#003366" link="white" vlink="white">

									<font size="6" face="Arial Black" color="white">

									<div align="center">

									<p>&nbsp;</p>

									<p>&nbsp;</p>

									<p>Willkommen auf

									der Homepage von Bert Beispiel.</p>

									<p>&nbsp;</p>

									<p>Diese Homepage

									wird &uuml;berarbeitet.</p>

									<p>&nbsp;</p>

									<p><a href="mailto:webmaster@araneae-online.net">webmaster@bert-beispiel.de</p>

									</div>

									</body>

									</html>

Seite anzeigen

Kommentar

Viele der Besonderheiten, die wir auf unseren Technik-Seiten beschreiben kommen nicht vor, aber auch mit diesen 20 Zeilen bekommt das Browser Programm alle Informationen die für die Anzeige benötigt werden.
Genauso wie es unterschiedliche Browser gibt, gibt es auch unterschiedliche Programme um den "Code" zu erstellen.
Wir haben im Internet eine Seite gefunden, die zu 99% so wie im obigen Beispiel angezeigt wurde. Allerdings wurde sie vom MS Office Paket generiert.
Microsoft vergrößert die Anzahl der Codezeilen um das siebenfache (das Original ist unten zu sehen, nur der Autor wurde anonymisiert). Die Standards des w3 Konsotiums, die Kompatibilität über Programm- und Plattformgrenzen hinweg sicher stellen sollen, werden oft ignoriert und Angaben eingeflochten, die nur der MS-InternetExplorer ordentlich anzeigen kann. Wenn Grafiken, oder Animationen eingebaut werden, ist es nicht mehr vorhersehbar, wie Browser anderer Herkunft die Elemente darstellen.
Dieser Vergleich zeigt: den Code "mal eben" automatisch generieren zu lassen ist höchstens für den Hausgebrauch zu empfehlen. Wenn Dateien im Internet veröffentlicht werden, sollten zumindest Grundkenntnisse vorhanden sein, um HTML-Code kontrollieren zu können.
Stefan Münz hat sein Projekt "Self-HTML" im Netz veröffentlicht, das wir gern weiterempfehlen, weil wir auch damit begonnen haben.

Beispiel

<html xmlns:v="urn:schemas-microsoft-com:vml"

									xmlns:o="urn:schemas-microsoft-com:office:office"

									xmlns:w="urn:schemas-microsoft-com:office:word"

									xmlns="http://www.w3.org/TR/REC-html40">

									<head>

									<meta http-equiv=Content-Type content="text/html; charset=windows-1252">

									<meta name=ProgId content=Word.Document>

									<meta name=Generator content="Microsoft Word 11">

									<meta name=Originator content="Microsoft Word 11">

									<link rel=File-List href="index-Dateien/filelist.xml">
<title>Meine Söhne sind lieb</title>

									<!--[if gte mso 9]><xml>

									<o:DocumentProperties>

									<o:Author>Systemadministrator</o:Author>

									<o:Template>Normal</o:Template>

									<o:LastAuthor>Systemadministrator</o:LastAuthor>

									<o:Revision>2</o:Revision>

									<o:Created>2004-07-02T21:49:00Z</o:Created>

									<o:LastSaved>2004-07-02T21:49:00Z</o:LastSaved>

									<o:Pages>1</o:Pages>

									<o:Words>22</o:Words>

									<o:Characters>139</o:Characters>

									<o:Lines>1</o:Lines>

									<o:Paragraphs>1</o:Paragraphs>

									<o:CharactersWithSpaces>160</o:CharactersWithSpaces>

									<o:Version>11.5606</o:Version>

									</o:DocumentProperties>

									</xml><![endif]--><!--[if gte mso 9]><xml>

									<w:WordDocument>

									<w:SpellingState>Clean</w:SpellingState>

									<w:GrammarState>Clean</w:GrammarState>

									<w:HyphenationZone>21</w:HyphenationZone>

									<w:PunctuationKerning/>

									<w:ValidateAgainstSchemas/>

									<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>

									<w:IgnoreMixedContent>false</w:IgnoreMixedContent>

									<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>

									<w:Compatibility>

									<w:BreakWrappedTables/>

									<w:SnapToGridInCell/>

									<w:WrapTextWithPunct/>

									<w:UseAsianBreakRules/>

									<w:DontGrowAutofit/>

									</w:Compatibility>

									<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>

									</w:WordDocument>

									</xml><![endif]--><!--[if gte mso 9]><xml>

									<w:LatentStyles DefLockedState="false" LatentStyleCount="156">

									</w:LatentStyles>

									</xml><![endif]-->

									<style>

									<!--

									/* Font Definitions */

									@font-face

									{font-family:"Arial Black";

									panose-1:2 11 10 4 2 1 2 2 2 4;

									mso-font-charset:0;

									mso-generic-font-family:swiss;

									mso-font-pitch:variable;

									mso-font-signature:647 0 0 0 159 0;}

									/* Style Definitions */

									p.MsoNormal, li.MsoNormal, div.MsoNormal

									{mso-style-parent:"";

									margin:0cm;

									margin-bottom:.0001pt;

									mso-pagination:widow-orphan;

									font-size:12.0pt;

									font-family:"Times New Roman";

									mso-fareast-font-family:"Times New Roman";}

									a:link, span.MsoHyperlink

									{color:blue;

									text-decoration:underline;

									text-underline:single;}

									a:visited, span.MsoHyperlinkFollowed

									{color:purple;

									text-decoration:underline;

									text-underline:single;}

									@page Section1

									{size:595.3pt 841.9pt;

									margin:70.85pt 70.85pt 2.0cm 70.85pt;

									mso-header-margin:35.4pt;

									mso-footer-margin:35.4pt;

									mso-paper-source:0;}

									div.Section1

									{page:Section1;}

									-->

									</style>

									<!--[if gte mso 10]>

									<style>

									/* Style Definitions */

									table.MsoNormalTable

									{mso-style-name:"Normale Tabelle";

									mso-tstyle-rowband-size:0;

									mso-tstyle-colband-size:0;

									mso-style-noshow:yes;

									mso-style-parent:"";

									mso-padding-alt:0cm 5.4pt 0cm 5.4pt;

									mso-para-margin:0cm;

									mso-para-margin-bottom:.0001pt;

									mso-pagination:widow-orphan;

									font-size:10.0pt;

									font-family:"Times New Roman";

									mso-ansi-language:#0400;

									mso-fareast-language:#0400;

									mso-bidi-language:#0400;}

									</style>

									<![endif]--><!--[if gte mso 9]><xml>

									<o:shapedefaults v:ext="edit" spidmax="2050">

									<o:colormenu v:ext="edit" fillcolor="#036"/>

									</o:shapedefaults></xml><![endif]--><!--[if gte mso 9]><xml>

									<o:shapelayout v:ext="edit">

									<o:idmap v:ext="edit" data="1"/>

									</o:shapelayout></xml><![endif]-->

									</head>

									

									<body bgcolor="#003366" lang=DE link=blue vlink=purple style='tab-interval:

									35.4pt'>

									<div class=Section1>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><o:p>&nbsp;</o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><o:p>&nbsp;</o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'>Willkommen auf

									der Homepage von Bert Beispiel.<o:p></o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><o:p>&nbsp;</o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'>Diese Homepage
wird überarbeitet.<o:p></o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><o:p>&nbsp;</o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><a

									href="mailto:webmaster@araneae-online.net"><span style='color:white'>webmaster@araneae-online.net</span></a><o:p></o:p></span></p>

									<p class=MsoNormal align=center style='text-align:center'><span

									style='font-size:20.0pt;font-family:"Arial Black";color:white'><o:p>&nbsp;</o:p></span></p>

									</div>

									</body>

									</html>

Letzte Aktualisierung: Montag 04.02.2008