Helma Spona - HTML & CSS Schnellkurs

Optionale und notwendige Attribute

Korrekte Auszeichnung der Inhalte mit entsprechenden HTML-Elementen

Einen Hyperlink definieren

Begriffe: Frames und Framesets

Logisches und physische Textauszeichnungen

Listen und Aufzählungen definieren

Grafiken einfügen

URLs in Webseiten

Tabellen erstellen

Einrichten eines FTP-Programms

Veröffentlichen der Website

Formatieren mit CSS

Begriff: CSS

Einbinden von CSS-Dateien

Verschiedene Stilarten

Begriff: Element-Selektoren

Begriff: Operatoren

Begriff: Pseudo-Elemente

Aufbau einer Stildefinition

Element-Selektoren

Klassen-Selektoren

ID-Selektoren

Pseudo-Klassen und Pseudo-Elemente

Komplexere Selektoren

Seitenlayout mit CSS

Tabellenlayout optimieren

Feste Breite für die linke Tabellenzelle festlegen

Begriffe: Block- und Inline-Elemente

Prozentuale Breite der Tabelle festlegen

Zellausrichtung ändern

Ein Floating-Layout erstellen

Hyperlinks formatieren

Pseudoklassen- und Pseudoelemente einsetzen

Begriff "Rangfolge"

Hyperlinks als Buttons formatieren

Rahmen und Hintergrundbilder einsetzen

Dateiformate für Hintergrundbilder

Navigationsleisten formatieren

3D-Effekte erzeugen

Untergeordnete Links bei Bedarf ein- und ausblenden

Bildergalerien gestalten

Notwendige Bilder

Aufbau der Seite

Miniaturansichten einfügen und verlinken

Server-Side-Includes für eine effizientere Websiteverwaltung einsetzen

Funktionsweise

SSI nutzen

Rechtliche Rahmenbedingungen von Webseiten

Wichtige betroffene Rechtsgebiete

Urheberrecht

Rechte am eigenen Bild

Markenrechte und verwandte Schutzrechte

Wettbewerbsrecht

Verantwortlichkeit für Hyperlinks

Datenschutz und Sicherheit

Pflichtangaben

Impressumspflicht

Datenschutzerklärung

Anhang: Überblick über wichtige HTML und CSS-Elemente

Sonderzeichen im Überblick

Farbnamen im Überblick

HTML-Elemente im Überblick

Attribute im Überblick

Wichtige CSS-Eigenschaften

HTML-Kenntnisse benötigen Sie heute nicht nur für die Gestaltung von Webseiten, sondern auch in vielen anderen Bereichen, beim Erstellen von E-Books und die Konvertierung ins ePub-Format, sowie bei der Wartung von Online-Shops, der Gestaltung von E-Bay-Angeboten etc.. Darüber hinaus gibt es viele mit HTML verwandte Auszeichnungssprachen, die Sie schnell verstehen, wenn Sie über grundlegende HTML-Kenntnisse verfügen. Aber HTML lernen Sie nicht, indem Sie einen grafischen Webeditor nutzen, sondern nur, indem Sie den Code wirklich von Hand oder mit einem einfachen textbasierten HTML-Editor erstellen.

Nachfolgend lernen Sie HTML und Website-Grundlagen kennen. Sie lernen, wie Sie HTML-Dateien erstellen und mit Inhalten füllen, welche wichtigen HTML-Elemente es gibt und wie und wofür Sie sie einsetzen. Am Ende können Sie HTML-Dateien erstellen und verlinken. Anschließend folgt dann eine grundlegende Einführung in die Formatierung mit CSS.

Der Begriff Website wird häufig mit verschiedenen Bedeutungen verwendet. In verschiedenen Website-Editoren, wie bspw. Dreamweaver bezeichnet der Begriff einen Ordner in dem alle Dateien der Internet-Seite, sowie zusätzlicher von Dreamweaver erzeugter Dateien für die Verwaltung eingefügt werden. Zusätzlich werden zu der Website auch bestimmte Einstellungen in Systemdateien abgelegt. Landläufig wird der Begriff jedoch für eine Internetseite verwendet. Die besteht in der Regle aus mehreren Dateien und eventuellen auch Unterordnern. Als "Website" wird dann jedoch die Gesamtheit aller Dateien bezeichnet, die auf dem Webserver liegen und die im Browser angezeigte Seite erzeugen. "Website" ist also in gleichbedeutend mit "Internetseite" und "Homepage" zu verwendet. Nachfolgend soll der Begriff auch in diesem Sinne verwendet werden.

Mit dem Begriff "Website" wird nachfolgend die Gesamtheit aller Dateien bezeichnet, die notwendig sind, um die gewünschte Darstellung im Browser zu erreichen.

Eine Website besteht folglich aus einer Vielzahl von Dateien. Die meisten davon sind HTML-Dateien, CSS-Dateien und Grafikdateien in Form von JPG, PNG- und/oder GIF-Bildern.

HTML-Dateien enthalten den eigentlichen Code der Seite, der definiert was im Browser angezeigt wird, wenn der Browser die HTML-Seite öffnet und anzeigt.

HTML ist die Abkürzung, die für HyperText Markup-Language steht. HTML ist eine Auszeichnungssprache. Sie kennzeichnet Inhalte einer HTML-Seite mit so genannten Tags um sie bspw. als Überschrift, Absatz oder Tabellenzelle auszuzeichnen. Erst der Browser, der den HTML-Code lädt und ausführt, bestimmt dabei, wie der ausgezeichnete Inhalt konkret dargestellt wird.

CSS ist ebenfalls eine Abkürzung und steht für "Cascading Stylesheets". Damit wird eine Sammlung von Formatierungen bezeichnet, die Sie auf ein HTML-Dokument anwenden können. Damit können Sie also bestimmen, wie der Browser die Inhalt der HTML-Datei darstellen und formatieren soll.

Um eine Website auf Ihrem lokalen Rechner zu erstellen, benötigen Sie also zunächst nur einen Ordner, in dem Sie alle verwendeten Dateien sammeln. Diese müssen Sie dann aber noch auf den Webserver Ihres Providers laden, um sie im Internet zu veröffentlichen. Dazu benötigen Sie ein FTP-Programm und einen Webspace-Provider.

Als Webspace wird im Allgemeinen der Speicherplatz auf einem Webserver Ihres Providers bezeichnet. Der Provider wiederum ist ein Dienstleister, der Ihnen den entsprechenden Speicherplatz und die Anbindung des Servers an das Internet zur Verfügung steht. In der Regel zahlen Sie dafür einen geringen monatlichen oder jährlichen Preis. Es gibt aber auch kostenlose Angebote, die sich durch Werbung finanzieren.

Oft bekommen Sie mit dem Webspace auch eine Domain, meist eine DE-Domain. Als Domain wird allgemein der "Name" der Website bezeichnet, unter der sie im Internet aufgerufen werden kann, wie bspw. "www.helma-spona.de". Das ist allerdings eine nicht ganz korrekte Bezeichnung, die vorerst jedoch ausreichen soll.

Das Internet ist auch deshalb ein besonderes Medium, weil es durch das Zusammenspiel verschiedener Programme und der passenden Hardware funktioniert und nicht ein physisches, greifbares Medium ist. Bevor Sie Ihre erste eigene Website erstellen, sollten Sie eine gewisse Vorstellung davon haben, wie das Internet funktioniert.

Es gibt dabei zwei verschiedene, wesentliche Softwarekomponenten, den Webserver, bei Ihrem Provider auf entsprechender Hardware und oftmals mit Linux-Betriebssystem ausgeführt wird und dem Browser, der auf dem Rechner des Webseiten-Besuchers ausgeführt wird.

Um nun eine Webseite anzuzeigen, eine bestehende Internetverbindung vorausgesetzt, sind folgende Schritte notwendig.

Der Browser fordert eine URL (die Adresse der Webseite) beim Webserver an. Diese URL kann bspw. ein gespeichertes Lesezeichen sein, das Ziel eines Hyperlinks der aktuell geladenen Webseite oder eine URL, die der Benutzer in der Adresszeile des Browser eingegeben hat.