Helma Spona - HTML & CSS Schnellkurs

Begriff "Traffic" Begriff "Traffic" Als Traffic wird im Zusammenhang mit Webspace-Tarifen der Datenverkehr bezeichnet, der durch Ihre Website verursacht wird, wenn Benutzer Daten an Ihre Website senden, aber vor allem, wenn der Browser die einzelnen Dateien abruft. Je kleiner die Dateien sind und je weniger Besucher Ihre Website hat, desto weniger Traffic erzeugt sie. Überschriften Sie das im Tarif enthaltene Traffic-Volumen, wird der zusätzliche Traffic in der Regel zusätzlich berechnet. Möchten Sie später Ihre Website erweitern und auch serverseitige Skripte und eventuell eine Datenbank verwenden, ist es optimal, wenn Ihr Webspace PHP als serverseitige Skriptsprache und eine MySQL oder SQL-Datenbank beinhaltet. In der Regel können Sie bei einem guten Provider aber jederzeit Ihren Tarif aufstocken, um mehr Leistungen zu erhalten. Sehr gute Provider, die für alle Zwecke passende Tarife haben listet die folgende Tabelle auf. Zu den angegebenen Preisen pro Monat für die Tarife kommen oftmals allerdings noch Einrichtungsgebühren, die in der Regel einmal anfallen und meist unter 20 € liegen. Tabelle 1: Preiswerte Tarife der Marktführer Anbieter Website-Adresse einfachster Tarif Tarif mit PHP und Datenbank Bezeichnung Mntl. Kosten Bezeichnung Mntl. Kosten* Hosteurope http://www.hosteurope.de Webpack S 2.0 0,99 € Webpack M 2.0 2,99 € 1&1 http://www.1und1.de 1&1 Homepage Basic 3,99 € 1&1 Homepage Perfect 6,99 € T-Online http://www.t-online.de Homepage Starter 4,99 € Homepage Basic 9,99 € Strato http://www.strato.de SiteWeb 2,99 € Powerplus 6,99 €

HTML-Grundlagen, wichtige Begriffe und Syntax HTML-Grundlagen, wichtige Begriffe und Syntax Websites werden mithilfe von HTML oder XHTML erstellt, außer es kommen serverseitige Programmier- und Skriptsprachen zum Einsatz. Diese sind nicht Thema des Kurss und werden daher nicht weiter behandelt.

Begriff "XHTML" Begriff "XHTML" XHTML ist wie HTML eine Auszeichnungssprache, die alternativ zu HTML verwendet werden kann, um Webseiten zu erstellen. Die Abkürzung steht für Extensible Hypertext Markup Language. XHTML verwendet dazu weitgehend die gleichen Elemente auch wenn es feine Unterschiede gibt. Wo notwendig, wird nachfolgend auf die Unterschiede hingewiesen.

Das Internet – ein besonderes Medium Das Internet – ein besonderes Medium Das Internet ist ein ganz besonderes Medium. Anders als Papier bietet es kein definiertes Format, das heißt keine Größe, die man beim Design berücksichtigen kann. Layouten Sie beispielsweise ein Prospekt in A4-Größe und kennen die Anforderungen der Druckerei, können Sie daran Ihr Layout anpassen. Sie wissen dann, welche und wie viele Farben Sie nutzen können, welche Seitenränder Sie mindestens einhalten müssen und wie klein die Schrift sein darf, um noch gut lesbar zu sein. All das kennen Sie beim Webdesign nicht. Die Besucher haben unterschiedliche Auflösungen, Monitore, Betriebssysteme und Browser. Das alles wirkt sich darauf aus, wie eine Seite beim Betrachter dargestellt wird, ob er alles lesen kann, ob die verwendeten Schriftarten vorhanden sind oder vielleicht viel zu kleine Ersatzschriftarten genutzt werden. Aus all diesen Gründen sollten Sie sich von dem Gedanken verabschieden, dass eine gute Webseite auf jedem Rechner gleich aussehen muss. Vielmehr muss eine gute Seite folgende Anforderungen erfüllen: Die Inhalte sollten auf allen Rechnern und mit jedem Browser lesbar sein. Die Seite sollte barrierefrei und auch für Screenreader zugänglich sein.

Begriff "Screenreader" Begriff "Screenreader" Ein "Screenreader" ist ein Programm für sehbehinderte Surfer, das in der Lage ist Webseiten vorzulesen. Damit das möglich ist, sollte die Webseite besondere Anforderungen erfüllen. Dazu gehören die Trennung von Inhalt und Formatierung sowie die Verwendung von Alternativtexten für Bilder und andere grafische Elemente um nur die wichtigsten zu nennen. Die Seite sollte intuitiv und einfach zu bedienen sein. Die Seite sollte den verfügbaren Platz ausnutzen und dem Benutzer nicht eine bestimmte Fenstergröße oder Auflösung aufzwingen. Kommt dann noch eine identische Darstellung in allen Browsern hinzu, ist dies natürlich optimal. In der Praxis ist dies aber kaum zu erreichen – schon deshalb nicht, weil die Auflösung und die Fenstergröße bestimmen, wie viel Platz die Seite maximal zur Verfügung hat. Füllt die Seite diesen Platz immer aus, kommt es zwangsweise schon durch verschiedene Auflösungen und Fenstergrößen zu unterschiedlichen Darstellungen. Berücksichtigt sind dabei natürlich noch nicht die verschiedenen Browser und deren Versionen. Ein Nutzer von Windows 98 wird nun mal nicht mit dem Internet-Explorer 7 surfen, so dass die Fehler in der HTML- und CSS-Implementation des Internet Explorers 4, 5 und 6 zu verschiedenen Darstellungen führen. Außerdem unterstützten vor allem die älteren Browser-Versionen den CSS- und (X)HTML-Standard nicht vollständig. Auch daraus ergeben sich wieder Darstellungsunterschiede.

Begriff "barrierefreie Webseite" Begriff "barrierefreie Webseite" Als barrierefrei gilt eine Webseite dann, wenn sie so gestaltet ist, dass alle Ausgabeprogramme, die (X)HTML beherrschen, die Inhalte der Seite darstellen können. Barrierefrei bedeutet also keinesfalls, dass die Seite in allen Browsern gleich aussehen muss, sondern nur, dass sie auch behinderten Besuchern zugänglich ist. Diese Besucher nutzen oft besondere Programme oder Hardware, die die Inhalte vorlesen (Screenreader) oder in Blindenschrift darstellen (Braillezeilen). Auf diesen Ausgabegeräten spielt die Formatierung dann keine Rolle. HTML ist von Haus aus eine Beschreibungs- bzw. Auszeichnungssprache, d.h., sie beschreibt den Aufbau (und ursprünglich auch die Formatierung) einer Webseite. Derzeit ist der HTML-Standard 4.1 aktuell, wenngleich auch Version 4.0 noch gängig ist und durchaus eingesetzt werden kann. Der HTML-Standard 4.1 sieht wie XHTML die strikte Trennung von Struktur und Formatierung eines HTML-Dokuments vor. XHTML ist eine Fortentwicklung von HTML, die jedoch im Gegensatz zu HTML auf XML (eXtensible Markup Language) basiert. Allerdings nutzt XHTML im Wesentlichen die gleichen Elemente wie HTML und auch die Struktur eines XHTML-Dokuments unterscheidet sich nicht wesentlich von der eines HTML-Dokuments. Die vorhandenen Unterschiede sind bezüglich des Einsatzes von Cascading Style Sheets zu vernachlässigen. HTML- und XHTML-Dateien sind Textdateien. Daher reicht es aus, wenn Sie einen einfachen Texteditor zum Bearbeiten der Dateien verwenden. Mehr Komfort bieten aber Editoren wie Expression Web oder Dreamweaver.

Regeln zur Benennung von Dateien Regeln zur Benennung von Dateien Bevor Sie die erste (X)HTML-Datei erstellen, sollten Sie wissen, wie Sie die Datei benennen. Das ist sehr wichtig, denn nicht alle Dateinamen, die auf Ihrem Rechner zulässig sind, funktionieren noch, wenn Sie die fertige Website auf den Webserver Ihres Providers hochgeladen haben. Meist haben deren Webserver ein Betriebssystem, dass bspw. anders als Windows Groß- und Kleinschreibung in Dateinamen unterscheidet. Auch wenn auf Ihrem Rechner dann "index.html" oder "index.HTML" die gleiche Datei wären, sind das für den Webserver zwei verschiedene Dateien. Auch gibt es abhängig vom Betriebssystem weitere Einschränkungen bei der Namensvergabe.

Eine leere (X)HTML-Datei erstellen Eine leere (X)HTML-Datei erstellen Um für die nächsten Übungen zunächst eine leere HTML-Datei zu erstellen, erzeugen sollten Sie zunächst ein Verzeichnis erstellen, in dem Sie dann alle Dateien für Ihr Website speichern.

Aufbau einer HTML-Datei

Beispiel "HTML-Elemente"

Der Inhalt des "

Den sichtbaren Inhalt der Seite definieren