Übersicht > Die eigene Website > Umsetzung der geplanten Website in HTML und CSS

Umsetzung der geplanten Website in HTML und CSS

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 und ist gerade für Einsteiger eine mühevolle und zeitraubende Angelegenheit.

Viele Webauftritte werden mit einem Content Management System wie WordPress realisiert. Alternativ dazu gibt es Joomla, Drupal, Typo3 und einige mehr.

Einfach und schnell geht die Webseitenerstellung auch mit goneo easyPage, einem Webseiten-Erstellprogramm (Websitebuilder). Sie müssen in diesem Fall keine Software kaufen oder installieren und erstellen auf Basis einer Vorlage eine professionelle Website.

Die Auszeichnungssprache HTML (Hypertext Markup Language) ist die "Sprache des Webs". Der aktuelle Standard ist HTML5. Jede Anwendung, mit der man Webseiten erstellt oder auch jedes Content Management System liefert an einen Browser eine HTML-Datei.

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.

Der große Vorzug von HTML ist, dass damit Hypertext erzeugt wird,, der anderen Dokumenten in Papierform voraus hat, dass Sprungstellen (Hyperlinks) enthalten sein können. 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

Meta Tags

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 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. Man kann die Bedeutung der verschiedenen Anweisungen nachvollziehen, wenn man den Code ansieht. 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.

CSS

CSS steht für "Cascading Style Sheets". Es handelt sich dabei um eine Stylesheet-Sprache, die genutzt wird, um das Aussehen und die Formatierung einer Webseite, die mit HTML (Hypertext Markup Language) geschrieben wurde, zu beschreiben.

Die Hauptfunktion von CSS besteht darin, das Layout von Webseiten zu steuern. Es ermöglicht Designern und Entwicklern, Stile für Webseiten festzulegen, einschließlich Schriftarten, Farben, Abstände, Positionierung von Elementen, und vieles mehr. Die "kaskadierende" Natur von CSS bedeutet, dass Stile, die auf höheren Ebenen definiert sind, auf niedrigere Ebenen "vererbt" werden können, es sei denn, sie werden explizit überschrieben.

Eine der größten Stärken von CSS besteht darin, dass es es Entwicklern ermöglicht, Stile von der Struktur der Webseite zu trennen. Dies bedeutet, dass das HTML-Dokument die Struktur der Webseite definiert, während CSS die visuelle Darstellung steuert. Dadurch können Webseiten effizienter gestaltet, gewartet und angepasst werden.

CSS hat sich seit seiner ersten Einführung in den späten 1990er Jahren erheblich weiterentwickelt und umfasst nun Funktionen wie Animationen, Transformationen und reaktionsfähige Design-Techniken für verschiedene Bildschirmgrößen und -auflösungen.

Javascript

JavaScript ist eine sehr leistungsfähige, interpretierte Programmiersprache, die hauptsächlich in Webbrowsern verwendet wird, um interaktive Effekte und komplexere Benutzererfahrungen zu erzeugen. Es wurde in den 1990er Jahren von Brendan Eich bei Netscape entwickelt und ist seitdem zu einer der Kernsprachen des World Wide Web geworden, neben HTML und CSS.

JavaScript ermöglicht es Entwicklern, viele Aspekte einer Webseite dynamisch zu steuern, einschließlich der Inhalte, des Verhaltens und sogar der Struktur der Seite selbst. Es kann verwendet werden, um Formulare zu validieren, Animationen zu erzeugen, mit Webdiensten zu interagieren und vieles mehr.

Im Gegensatz zu vielen anderen Programmiersprachen läuft JavaScript direkt im Webbrowser des Benutzers und nicht auf dem Server, was es ideal für Aufgaben macht, die sofortige Rückmeldungen erfordern, wie z. B. die Reaktion auf Benutzeraktionen.

In den letzten Jahren wurde JavaScript zunehmend auch außerhalb des Browsers eingesetzt, beispielsweise auf Servern durch Node.js oder in mobilen Anwendungen. Damit ist JavaScript zu einer universellen Sprache geworden, die für eine Vielzahl von Anwendungsfällen eingesetzt werden kann.

Tools und Software

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. Zudem unterscheidet sich ein Webdokument prinzipiell von einem textorientierten Element wie man es aus Textverabreitungsprogrammen kennt.

In einem Webdokument werden die eigentlichen Inhalte lediglich benannt als Überschrift, Absatz, Hyperlink etc. und die Darstellung wird nur beschrieben. Erst nach dem Rendern wird daraus ein für Menschen lesbares und nutzbares Dokument.

Dennoch helfen diese Tools sehr beim Erstellen von Webseiten.

Vorsicht vor der Perfektionsfalle

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.

Mehr Know How - Inhalt

Webhosting

Ziele einer Website

Technologie

Eigene Website

Website entwickeln: Phase 1: Ziele festlegen | Phase 2: Inhalte gliedern | Phase 3: Layout entwicklen