In diesem Tutorial erfahrt ihr aus welchen Elementen eine Webseite zusammengesetzt ist. Aber es werden auch grundlegende Fragen zu den jeweiligen Dateien und deren Formaten beantwortet.
Das Ziel hier ist nicht mit Typo3, WordPress, o.ä. vorgefertigte Webseiten anzulegen, sondern sie frei zu gestalten und einfache Programme oder z.B. den Adobe Dreamweaver, o.ä. für die Erstellung der Seiten zu nutzen. Anschließend seid ihr im Prinzip in der Lage eine einfache Webseite mit einer entsprechenden Formatierung anzulegen.

Dies ist ein interaktiver Farbwähler zur Darstellung von Hex-Farbwerten. Man wählt mit einem Farbwähler, ähnlich dem einer Pipette, aus professionellen Farbpaletten die gewünschte Farbe und kann den zugehörigen Hex-Farbwert direkt ablesen. Außerdem gibt der Farbwähler den Wert für RGB, HSB und HSL aus. Dies sind wichtige Werte, die in den Styles einer Webseite, bzw. in einer CSS-Datei für den richtigen Farbton sorgen.
Mit den Hex-Farbwerten können z.B. auch Farbverläufe erzeugt werden (ohne dafür ein Bildbearbeitungsprogramm nutzen zu müssen um daraus eine Datei, bzw. ein Bild zu erzeugen).
Bitte verwende mind. 1024px horizontale Auflösung um den Farbwähler korrekt angezeigt zu bekommen.

Kommentare, wofür? Ich ging früher immer davon aus das Kommentare im Quelltext von Webseiten zur (Selbst-)Beweihräucherung der Autoren dienen und sie damit nur unnötig die Datei vergrößern.
Ich muss gestehen, es ist schon lange her wo ich so dachte. Es mag auch sein, dass der ein oder andere die Kommentare dafür genutzt hat um auf sich aufmerksam zu machen und um zu beweisen, dass er der Urheber der Programmzeilen ist. Und es ist sicherlich nicht ganz von der Hand zu weisen, dass es durch die ''leichte'' Lesbarkeit des Quelltextes (Klartext) sehr leicht ist etwas zu kopieren, doch schätze ich diese Funktionalität wegen ganz anderer, praktischer Gründe...

Ebenen sind aus der Webprogrammierung gar nicht mehr wegzudenken. Das man Inhalte überlappend und auch halbtransparent darstellen kann funktioniert noch gar nicht so lange. Das Problem sind, bzw. waren auch die Interpretationen der unterschiedlichen Browser. Das Schlusslicht von allen Browsern bleibt immer der Internet Explorer von Microsoft. Sieht eine Seite mit dem Internet Explorer gut aus, macht sie i.d.R. auch mit sämtlichen anderen Browsern keine Probleme.
Hier befinden sich ein paar nützliche Tipps zum Thema Ebenen, Überlagerung von Ebenen mit dem sog. z-index-Wert, Halbtransparenzen mit dem opacity-Wert, sowie relatives Positionieren von Ebenen mit margin-top und margin-left. Das Schlusslicht bildet die populäre Art halbtransparente Ebenen über einem Bild mit Beschriftung darzustellen.

Manchmal ist es in Webseiten erforderlich externe Dateien einzubinden. Also Dateien, deren Inhalt mit auf der Webseite angezeigt werden soll. Das können unterschiedliche Formate sein. Sehr hilfreich ist hier die Funktion iFrame, die es ermöglicht diesen Dateien eine Vorgabe in punkto Höhe und Breite zu geben.
Aber, dem einen ein Segen, dem anderen ein Fluch: wenn unterschiedliche Bildschirmauflösungen im Einsaz sind, z.B. bei Desktop-PC's, Tablet-PC's und Smartphones. Hier kann eine Vorgabe die zu Breit ist und starr in Pixel angegeben wird zu groß, oder auch zu klein sein.
Ich möchte hier die Verwendung von iFrame und dessen Parameter näher bringen um dem geschilderten Problem entgegen zu wirken.

Einen Text zu drehen, also z.B. hochkant auf einer Webseite darzustellen ist im Prinzip nicht schwer. Dabei hilft wieder die Verwendung eines div-Containers mit dem ein Objekt um den gewünschten Wert (mit der Angabe in ''Grad'') gedreht werden können. Dazu können im Übrigen auch Bilder gehören.
Wenn der Text anschließend bei einem Scrollvorgang nicht mit nach unten scrollen soll, muss er ''fixiert'' werden. Diese Fixierung kann man mit sämtlichen dieser div-Container vornehmen.
Ich finde, beides ist eine Erwähnung wert, da dies stilistische Methoden sind um Inhalte designorientiert darzustellen. Natürlich könnte man den Text auch in ein Bild umwandeln und ihn anschließend bereits in gedrehter Form abbilden. Aber die aktuelle Entwicklug erlaubt den Einsatz auch ganz ohne Bildbearbeitung und ist schneller im Aufbau der Seite und zudem flexibler...

So ein bisschen in Richtung Dreidimensionalität bewegt man sich ja schon, wenn man Texten oder Objekten einen Schatten verleiht.
Um bestimmten Elementen eine besondere Wirkung zukommen zu lassen kann ein Schatteneffekt genutzt werden. Das funktioniert noch nicht soooo lange mit HTML in sämtlichen Browsern. Besonders der Internet Explorer hat sich lange Zeit dagegen gewehrt.

Aber im Zeitalter von HTML5 ist das theoretisch ein Kinderspiel. Die Befehlszeile für das Setzen von Schatten ist relativ unspektakulär. Man sollte aber die einzelnen Werte, die hierfür in eine Zeile gesetzt werden müssen, verstehen um damit gezielt umgehen zu können.
Anschließend können sich so spezifische Elemente auf der Seite durch den Rest im wahrsten Sinne des Wortes ''hervorheben''.

Farbige Verläufe auf Webseiten sind mit CSS3 ein tolles Mittel um sie designtechnisch aufzuwerten. Mit dem Farbverlauf in einem div-Container kann mühelos ein Bildbearbeitungsprogramm umgangen werden, da der PC die Berechnung des Verlaufs übernimmt. Der Verlauf ist präzise steuerbar. So kann man angeben in welchem Winkel ein Verlauf stattfinden soll und wie die farbliche Verteilung, bzw. der Übergang der Farben stattfinden soll. Die Anwendung ist dann auf Hintergründen und Schaltflächen möglich.
In diesem Tutorial zeige ich wie diese ''eine Zeile'' in den styles des div-Containers funktioniert und entsprechend angewendet wird. Ergänzt wird das Thema durch zwei Beispiele mit Texturen.