Umsetzung der geplanten Website in HTML und CSS


Aufbau einer Website

Die Umsetzung eines Entwurfs in eine HTML-Datei, die im World Wide Web verwendet werden kann, geschieht dann mit oben erwähnten Programmen wie Dreamweaver oder CoffeeCup und ist gerade für Einsteiger eine mühevolle und zeitraubende Angelegenheit. Einfacher und schneller geht dies mit goneo easyPage, einem Webseiten-Erstellprogramm, das Ihnen in unseren goneo Homepage-Paketen zur Verfügung steht. Sie müssen in diesem Fall keine Software kaufen oder installieren.


HTML (Hypertext Markup Language) ist immer noch die Sprache des Webs. Inzwischen gibt es den HTML5 Standard, den die gängigen Browser heute zum großen Teil beherrschen.


Browser setzen die Darstellungsvorschriften in konkretes Aussehen um. „Rendering” heißt der Prozess, der aus einem HTML-Codefragment wie <a href=”http://www.goneo.de>goneo.de</a> einen Link anzeigt, der, wenn der User darauf klickt, auf die Startseite von goneo führt.


Überhaupt ist die Möglichkeit des Verlinkens die große Magie, die Hypertexte anderen Dokumenten in Papierform voraus haben. Durch Verlinken entsteht ein weit verzweigtes und in der Gesamtheit nicht mehr zu überblickendes Netzwerk an Webdokumenten. Entsprechend ist eine Webseite semantisch gesehen keine abgeschlossene Einheit, sondern Teil eines Netzes, da Hyperlinks zu dieser Webseite führen und auch aus der Webseite heraus auf anderen Webdokumente führen.


Die HTML-Elemente in einem Webdokument haben heute die Aufgabe, auszuzeichnen, um welche Art von Inhaltselement es sich handelt:


  • - Überschrift, Unterüberschrift, Unter-Unterüberschrift usw.
  • - Textabsatz (Paragraph)
  • - Liste (durchnummeriert oder nicht)
  • - Hyperlink
  • - Bild
  • - Andere Elemente

Zusätzlich gibt es noch Auszeichnungselemente in einem Bereich der Webseite, der nicht für den Betrachter sichtbar ist: In den Meta-Elementen verbergen sich Informationen zur zugrunde gelegten Darstellungsnorm (auch HTML kennt verschiedene Dialekte) sowie zur Benennung und Beschreibung des Dokuments.


Die Information, welches Inhaltselement wohin auf den Bildschirm zu schreiben ist und wie der Text konkret aussehen soll (z.B. welche Farbe, Größe, Schriftart), gewinnt der Browser aus der CSS-Datei (Cascading Style Sheets), die ebenfalls mit einer speziellen Anweisung in das HTML-Dokument eingebunden wird.


HTML besteht aus Klarschrift. Sie können die Bedeutung der verschiedenen Anweisungen nachvollziehen, wenn Sie sich den Code ansehen. Charakteristisch sind die eckigen Klammern, die die HTML-Elemente umfassen. Mit <element> beginnt die Vorschrift und der nun folgende Text wird entsprechend ausgegeben, mit </element> wird die Gültigkeit der Vorschrift wieder beendet.


Einige weitere Beispiele:


<b>Text</b> sorgt dafür, dass der Text fett ausgegeben wird.


<p> Dies ist ein Abschnitt, also ein Absatz im Text </p> sorgt dafür, dass ein Text, der aus mehreren Wörtern und Zeilen besteht, als Absatz formatiert wird. Wie genau der Absatz aussieht, also welchen Zeilenabstand der Browser realisiert, ob die erste Zeile eingerückt wird usw. regelt wiederum eine Vorschrift in der CSS-Datei.


<h1>Überschrift</h1> bewirkt, dass der zwischen den Klammern stehende Text als Überschrift interpretiert wird. Wie genau die Überschrift optisch aussieht, entscheidet wieder die CSS-Darstellungsvorschrift. Neben <h1> gibt es weitere Unterteilungen in <h2> , <h3> usw. für Unterüberschriften.


Wenn Sie sich mit HTML näher beschäftigen wollen, ist es ratsam, sich gute Selbstlern-Literatur zum Thema zu besorgen. Die Menge der einschlägigen Bücher ist nicht mehr überschaubar. Öffentliche Bibliotheken sind meistens sehr gut ausgestattet. Möglicherweise ist auch ein Kurs an der Volkshochschule oder ähnlichen Bildungseinrichtungen das Richtigere für Sie.


Am Anfang und für eher anspruchslose Websites reicht vielleicht noch die Anwendung des Trial-and-Error-Prinzips, also das einfache Ausprobieren. Dies können Sie durch sogenannte Tutorials und Videoanleitungen, die Sie gratis im Web finden, unterstützen.


Dies ist keine schlechte Variante, wenn Sie über genügend Geduld, Ausdauer und Zeit verfügen. Viele Webdesigner der ersten und zweiten Generation haben diesen Weg gewählt, da es seinerzeit kaum Best-Practise-Literatur oder strukturierte Selbstlernkurse gab.


Es gibt Software, die Ihnen die Arbeit erleichtert. Viele Anwendungen arbeiten mit einem What-You-See-Is-What-You-Get-Ansatz (WYSIWYG): Man sieht auf dem Bearbeitungsbildschirm schon die Platzierung und das Aussehen der eingefügten Elemente. Beim Gestalten einer Website, die viele Scriptelemente einbindet, stößt WYSIWYG schnell an Grenzen.


Dennoch helfen diese Tools sehr beim Erstellen von Webseiten.


Wenn Webseiten-Erstellen nicht zu Ihrem Beruf gehört: Hüten Sie sich vor zu hohen Erwartungen. Perfektionismus wird zur Frustration führen. Der Webdesigner ist heute eine Art eigenes Berufsbild. In verschiedenen Ausbildungsberufen wie Mediengestalter oder Wirtschaftsinformatiker wird entsprechendes Wissen vermittelt.


Von daher können Sie nicht erwarten, vom Start weg grandiose Webseiten selbst erstellen zu können. Wenn Sie in überschaubarer Zeit eine Website erstellen wollen, die Inhalte im Prinzip vorhanden sind (Bilder und Texte liegen vor), können wir nur raten, goneo easyPage zu verwenden, da hier ausgehend von professionell designten Vorlagen und individuellen Anpassungen der Farbschemata und Textstile ein eigener Internetauftritt relativ schnell realisierbar ist.


Zurück zu:


Weiter zu: