Blog

Neuigkeiten, Infos & Inspiration

HTML & CSS - Was ist das?

HTML & CSS - Was ist das?

17.07.2019 Christine Schlütz

Im Webdesign spielt HTML in Verbindung mit CSS eine große Rolle. Beide sind untrennbar voneinander für den Look deiner Webseite verantwortlich. Doch was genau ist HTML und CSS und inwieweit unterscheiden sich die beiden voneinander?

HTML

HTML steht für „Hypertext Markup Language“. Wie der Name schon sagt, handelt es sich hierbei um eine „Sprache“ mit der du die Struktur und den Aufbau einer Seite erstellen und verändern kannst. Wichtig zu wissen ist, dass es sich, obwohl wir hier von einer eigenen „Sprache“ gesprochen wird keinesfalls um eine Programmiersprache handelt. Mit HTML kannst du lediglich die Anordnung und Positionierung von Inhalten wie Bildern, Texten oder Dokumenten bestimmen, aber keinesfalls Befehle durch Algorithmen, Schleifen und Bedingungen ausüben, sowie es in der Programmiersprache üblich ist. Bei deinem ersten HTML Dokument gibt es einige Dinge, die du beachten solltest, damit deine erste Webseite zu einem vollen Erfolg wird.

Die HTML Struktur – from < head > to < body >

Ein HTML Dokument beginnt immer mit einem Head-Bereich. In diesem stehen die wichtigsten Eckdaten, die nicht nur für das Dokument an sich, sondern vor allem auch für Google sehr wichtig sind. Vergisst du hier alle wichtigen Daten anzugeben ist die Gefahr groß, dass deine Seite niemals über Google gefunden werden kann. Dieser Bereich ist für deine Seitenbesucher nicht sichtbar, also insgesamt nur für alles was im Hintergrund abläuft wichtig. Der Body-Bereich ist der für deine Seitenbesucher sichtbare Teil deiner Webseite. Hier finden sich alle Inhalte, die du deinen Besuchern zur Verfügung stellst. Alle Bilder, Texte, Dokumente, Links usw. fügst du in diesen Teil deines HTML Dokuments ein.

Opening und Closing Tags

Jedes HTML Element beginnt mit einem Opening Tag und schließt mit einem Closing Tag. Den Bereich der durch den Opening-Tag und den Closing- Tag markiert ist nennt man „Container“. Du kannst dir diesen Bereich wie eine Art Behälter vorstellen, den du mit Inhalten füllen kannst. Die Beschriftung der Tags besteht meist nur aus wenigen Buchstaben und sind Abkürzungen für englische Begriffe.

Hilfreiche Links

Mit dem HTML Validator kannst du überprüfen, ob dein HTML Dokument Fehler aufweist und wenn ja, wo sich diese befinden. Dieses Tool ist vor allem für Anfänger sehr hilfreich. Denn aus Fehlern kann man ja bekanntlich nur lernen.

CSS

CSS steht für „Cascade Styling Sheets“. Wenn HTML Batman ist, dann ist CSS Robin. Beide zusammen genommen sind ein eingespieltes Team, wenn es um den Look deiner Website geht. Mit CSS kannst du sogenannte Stylesheets erstellen innerhalb derer du Regeln für das Styling innerhalb des HTML Dokuments aufstellen kannst. Dabei musst du dich sogenannter CSS-Selektoren bedienen. Es gibt ganz unterschiedliche Arten von Selektoren. Zwei sehr häufig verwendete Selektoren sind ID’s oder CSS-Klassen. Mit ihrer Hilfe bestimmst du, wie bestimmte Elementer innerhalb eines HTML Dokuments aussehen. Du kannst so beispielsweise die Farbe, die Schriftart, die Schriftgröße, aber auch die Breite, die Höhe oder den Außenabstand bestimmter Elemente in einem CSS Dokument verändern.

Da CSS für das Styling zuständig ist solltest du auch unbedingt darauf achten, dass du ganz strikt das Styling von der Struktur trennst und keine Styling Elemente in das HTML Dokument mit aufnimmst (was auch möglich ist). So behältst nicht nur du den Überblick, sondern auch deine Kollegen, die mit dir zusammen an der Webseite arbeiten.

Wenn du lernen möchtest, wie du mit HTML und CSS eine Webseite erstellen und stylen kannst, dann komm zu unserem Coding Weekend vom 27.07.-28.07.2019 im STARTPLATZ Köln! Hier erlernst du in nur 2 Tagen die praktische Erstellung und Gestaltung von Webseiten im Front-end mit HTML und CSS.

Warum das Coding Weekend ein guter Einstieg in die Programmierung ist - Lies hier mehr dazu!

Entdecke unsere neuesten Coding Kurse

Web Development Köln

Web Development Köln

Köln 27.08.2019

Im Web Development Kurs lernst du Websites und Web-Anwendungen zu entwickeln. Im Frontend mit HTML & CSS und im Backend mit Python.

Ab 799,00 EUR

Anmelden
Websites mit HTML & CSS | Coding Weekend

Websites mit HTML & CSS | Coding Weekend

Köln 31.08.2019

Im Kurs erlernst du die praktische Erstellung und Gestaltung von Webseiten im Front-end mit HTML und CSS.

Ab 299,00 EUR

Anmelden

Melde dich für den SmartNinja Newsletter an!