Webdesign Professional - HTML und CSS

Auteur: Dilek Türkyilmaz
Gepubliceerd op: 23-01-2015

Webdesign Professional

Unter den Begriff “Webdesign” fallen verschiedene Disziplinen. Im Kern gehört da natürlich auch die technische Entwicklung der Website. Um professionelle Webseiten zu erstellen ist als erster Schritt gute Kenntnis von HTML und CSS unabdingbar. Die HTML- und CSS-Scripts dienen eigentlich als grundlegender Bauplan Ihrer Website. Etwas vereinfach kann man sagen, dass HTML für den Aufbau und Content der Website verantwortlich ist, während in den CSS „Stylesheets“ alle Design-Aspekte definiert sind. Darunter muss man sich die Definition von Farben, Schriftgrößen, etc. vorstellen. Durch die Trennung von Content und Design wird Ihr Code nicht nur übersichtlicher, sondern ist es auch einfacher Ihre Website anzupassen. Wenn Sie zum Beispiel das Farbschema oder die Schriftart ändern wollen, brauchen Sie dies lediglich in der CSS-Datei anzupassen und die Änderungen werden auf allen Seiten durchgeführt.

Ein praktisches Programm zur Erstellung von Websites ist Adobe Dreamweaver. Hier können Sie in Echtzeit sehen, welche Auswirkungen Veränderungen im Code auf Ihre Website haben. Dreamweaver bietet auch zahlreiche vorgefertigte Scripts für verschiedene Funktionen, um den Prozess zu erleichtern. Wenn Sie möglichst wenig Code selbst schreiben möchten, ist WordPress eine gute Alternative. Dieses Content Management System nimmt Ihnen viel Arbeit ab und bietet zahlreiche Templates, die Sie für Ihre Seite verwenden können. Der Nachteil hier ist allerdings, dass Sie zur Anpassung dieser Templates über PHP-Kenntnisse verfügen müssen.

HTML tutorial


Grundbausteine jeder Website

Das Modul HTML und CSS steht auch am Anfang unseres Kurses Webdesign Professional. Noch immer bilden diese beiden Elemente die Grundbausteine fast jeder Website. HTML steht für „Hyper Text Markup Language“ und enthält vor Allem den Content, teilweise auch die Struktur der Website. In den „Cascading Style Sheets“ (CSS) wird das Layout definiert. Denken Sie dabei an Schriftarten, Abständen zwischen verschiedenen Elementen, Farbgebung, etc. Sie können den HTML und CSS Code jeder Seite einsehen, indem Sie in Ihrem Browser F12 drücken. Am unteren Bildrand werden dann beide Codes angezeigt. Sie können diese sogar frei anpassen und ihr Browser zeigt Ihnen direkt an, wie sich dies auf die Website auswirkt. Natürlich wird dies nur auf Ihrem Computer simuliert und bleibt der Quellcode der Seite selbst unberührt.

Loslegen mit HTML und CSS

Sie können auch selbst einen Anfang machen und Ihren eigenen HTML und CSS Code schreiben. Ein benutzerfreundlicher und kostenloser Editor hierfür ist JSFiddle. HTML-Code ist aus verschiedenen „Tags“ aufgebaut. Jede Funktion hat einen eigenen Tag. Ein einfaches Beispiel ist der Tag, um Paragraphen zu definieren. Setzen Sie den Text des Paragraphen zwischen die Tags < p > …. < /p >. Um zum Beispiel die Schriftart des Textes zu ändern, könne Sie innerhalb der Klammern im Teil body {….} das Kommando font: oder font-family:, gefolgt durch den Namen der entsprechenden Schriftart setzen. Beachten Sie dabei, dass nur Standard-Schriftarten von Webbrowsern unterstützt werden.

Ein weiteres Beispiel ist der HTML Link-Tag. Dazu nutzen Sie den Tag < a href=“….“> …. < /a>. Zwischen den Anführungszeichen setzen Sie die gelinkte URL inklusive http. Zwischen den < > geben Sie die Beschreibung an, also den Text mit dem der Link dargestellt wird. Die Kombination aus HTML und CSS bietet zahlreiche Möglichkeiten. Während unseres Kurses Webdesign Professional lernen Sie diese Möglichkeiten auszuschöpfen und anzuwenden.

Kurs Webdesign

Möchten Sie mehr lernen zum Thema Webdesign und alle Aspekte beherrschen lernen? Schauen Sie sich unser breites Kursangebot an, oder schreiben Sie sich direkt ein für einen Ausbildung Webdesign Professional. Hierbei lernen Sie nicht nur den Umgang mit HTML und CSS, sondern auch die Nutzung des Content Management Systems (CMS) WordPress, Suchmaschinenoptimierung und Suchmaschinenmarketing. Weiterhin lernen Sie Ihre Websites ‚responsive‘ zu machen, also bereit für die Nutzung auf Smartphone oder Tablet. Sie werden fit gemacht, um als angehender Webdesigner tätig zu werden.

Zurück