Attribute

Wie schon in Vorlesung 1 erwähnt, können Attribute zusätzliche Informationen zu Elementen geben, bzw. dieses Erweitern. Dabei richten sich allen nach der gleichen Schreibweise:

Es gibt einige vordefinierte Attribute und es ist wichtig sich auf die vom Browser unterstützten Attribute zu beschränken, da diese ansonsten nicht erkannt und daher auch nicht ausgeführt werden können. Außerdem können auch nicht alle Attribute auf alle Elemente angewendet werden, da sie sinnvoll in Bezug auf das Element sein müssen, sie sollen ja schließlich zusätzliche Informationen geben und das Element spezifizieren.

Organisation von Ordnern

Es gibt keine Vorschrift für die Dateiorganisation von Webseiten, allerdings ist es sinnvoll, eine strukturierte Ordnerorganisation für jegliche Art von Website zu pflegen. Dazu gliedert man das Projekt in einen Haupt- und einzelne Unterordner.

So lässt sich die Webseite leichter pflegen, erweitern und nachvollziehen. Ein Beispiel für wäre beispielsweise ein Ordner für Informationen, einer für Getränke und einer für Bilder, als Unterordner für unsere KopfüBar.

Pfade

Webseiten oder Bilder, welche dann in separaten Ordnern abliegen, müssen anschließend spezifisch ausgewiesen werden, da der Browser sie sonst nicht finden wird. Dies liegt dran, dass dieser ohne Spezifizierung des Ablageortes denkt, dass die ausgewiesene Datei im gleichen Ordner abliegt, wie die Hauptdatei. Dazu muss der Pfad zur Zieldatei angegeben werden, d.h. jeder Ordner in der Hierarchie nach oben oder unten von der ausgehenden Datei muss angegeben werden und wir erhalten somit einen relativen Pfad. Dazu beginnt man auf der Seite, die den Link enthält und sucht den Pfad durch die Ordnerstruktur, bis zur Zieldatei. Die einzelnen Teile der Pfadangabe werden mit / getrennt.

Möchte man also ein Pfad zu einem Untergeordneten Pfad herstellen, muss man nur den oder die jeweiligen Ordner angeben, welche dazwischen liegen. Ein Beispiel hierfür währe: getraenke/elixir.html

Möchte man von einem Unterordner einen link in einen anderen Unterordner oder in einen dem Ursprungsverzeichnis übergeordneten Ordner, herstellen, muss man zunächst in das übergeordnete Verzeichnis verweisen und von dort aus in den gewünschten Unterordner. Das übergeordnete Verzeichnis wird dabei immer mit ../ ausgewiesen. Beispiel: ../Bilder/hellblau.jpg

Vorlesung 3

Einfache Zitate

Zitate können in HTML mit dem q-Element ausgewiesen werden, welches ein Inline-Element ist. Diese fügen sich in den Textfluss der Seite ein, ändern also nicht die grundlegende Struktur. Dafür muss nur der zu Zitierende Text im q-Element eingeschlossen werden, der Browser erkennt dies dann und gibt den Inhalt anschließen zitiert wieder. Dabei muss darauf geachtet werden, dass keine Anführungszeichen verwendet werden, da der Browser das übernimmt.

Die Verwendung des q-elements mag vielleicht erstmal unnütz und kompliziert erscheinen, hilft jedoch bei der einheitlichen Strukturierung des Codes. Außerdem teilt es dem Browser mit, dass es sich um ein Zitat handelt, der Code wird daher auch aussagekräftiger und kann besser dargestellt werden. So lassen sich Zitate beispielsweise weiter gestalten, indem dem q-Element weitere Attribute zugewiesen werden.

Ein weiterer Vorteil ist, dass Suchmaschinen oft nach Zitaten suchen und an dieser Stelle auf genau dieses Tag angewiesen sind.

Blockquotes (lange Zitate)

Lange Zitate werden mithilfe von sogenannten Blockquotes strukturiert und ausgewiesen. Dabei handelt es sich um Block-Elemente, welche durch Zeilenumbrüche vor und nach dem Block dargestellt werden.

<blockquote> erzeugt also einen eigenen Block für das Zitat und Rücken den Text ein wenig ein, sodass er als Text hervorgehoben wird.

Der weitere Inhalt, der auf das Blockquote folgt, muss dann anschließend wieder mit einem p-Element ausgewiesen werden.

Möchten wir unser Blockquote weiter strukturieren, können wir mit dem <br>-Absatzelement Absätze oder aber auch kurze Zitate mit dem <q>-Element einfügen.

Bei dem <br>-Element handelt es sich um ein Element ohne Inhalt, einem sogenannten Inhaltsleeren Element , da es nur einen Zweck erfüllt, nämlich Zeilenumbrüche zu generieren und keinen Inhalt ausweist. Es benötigt daher auch kein End-Tag und kann in kurzschreibweise geschrieben werden.

Ein weiteres Beispiel für Inhaltsleere Elemente ist das <Img>- Element.

HTML-Listen

Das Erstellen von Listen kann man durch sogenannte Listen-Elemente erreichen, ähnlich wie bei kurzen Zitaten ist dies nicht zwingend notwendig, da man dies auch mit Hilfe des p-Elements erstellen könnte, allerdings erreicht man dadurch ein Höchstmaß an Möglichkeiten und Flexibilität, zur Darstellung des Inhalts.

HTML-Listen bestehen aus zwei kombinierten Elementen, das erste Element zeichnet die einzelnen Listenelemente aus und das zweite gibt an, ob es sich um eine geordnete oder ungeordnete Liste handelt. Es ist unabdinglich, beide Elemente zu verwenden, da Listen immer eine Gruppe aus Elementen sind.

Alle Einträge werden zunächst innerhalb des li-Elements, also wie gewohnt zwischen dem Start- und End-Tag, platziert. Dabei ist darauf zu achten, dass jeder Eintrag durch ein einzelnes Listens-Element ausgewiesen wird. Anschließend werden die Einträge entweder in eine geordnete Liste, <ol> -Element, oder eine ungeordnete Liste, <ul>-Element eingeschlossen. Hierfür müssen alle Einträge, zwischen dem Start- und End-Tag des gewählten Listen-Elements stehen, die Einträge stellen also den Inhalt dar.

Bei geordneten Listen weist der Browser den Listenelementen Zahlen zu, bei ungeordneten jedoch nicht, sie stellen einfach eine Aufzählung dar.

Eine weitere Listenart ist die Definitionsliste, welche jedem Element einer Liste einen Begriff mit <dt> </dt> und eine Beschreibung mit <dd > </dd > zuweist. Ähnlich wie beim Blockquote wird die Beschreibung versetzt unter dem Begriff des Elements eingerückt, sodass genau erkenntlich wird, dass diese zueinander gehören.

Verschachtelungen

Platziert man ein Element innerhalb eines andern Elements, nennt man dies verschachteln. Man strukturiert dadurch seinen Code in übergeordnete und untergeordnete Elemente. Dabei ist es wichtig, die Elemente richtig zu verschachteln, d.h. untergeordnete Elemente müssen innerhalb der ihnen übergeordneten Elemente abgeschlossen werden, da der Code ansonsten nicht funktioniert.

Entities

Möchte Man Sonderzeichen wie beispielsweise die spitzen Klammern von Tags in einem HTML-Code als Text darstellen, nutzt man sogenannte Entitys. Das ist notwendig, da man sie logischerweise nicht einfach in den Code schreiben kann, ohne dass der Browser sie als Tags identifiziert.

Hier einige nützliche Entities:

• < = &lt;
• > = &gt;
• & = &amp;
• " = &quot;
• ' = &apos;

Vorlesung 4

Wie bereits in Vorlesung 1 erwähnt, kann man Webseiten auch selbst gestalten und Styling-Rules definieren. Dazu nutzt man CSS, wo man sogenannte Properties definiert, welche einzelne Elemente, Absätze oder ganze Seiten umgestalten und diese kann man dann entweder direkt in den HTML-Code einbetten oder CSS-Stylesheets verlinken.

Zunächst muss man dafür das Element mit dem Selektor auswählen, das property angeben, an welchem der gewünschte style festgelegt wird und anschließend die passende Angabe zum Sytle des Propertys machen. Die Angabe des Propertys mit der passenden Style-Angabe, wird zusammen als Regel bezeichnet. Alle Regeln, welche auf ein Element angewendet werden sollen, werden in Geschweiften Klammern nach dem ausgewählten Element festgehalten.

Generell gruppiert man allgemeine Styles und fügt bei Bedarf einzelnen Elemente dann spezifische Regeln hinzu. Dadurch lassen sich mehrere allgemeine Styles kombinieren, Regeln schneller für mehrere Elemente anpassen und dies führt zudem zu einer besseren Übersicht über die Menge an Regeln.

Vererbung

Einige Sytles werden Elementen vererbt, wenn diese auf deren Elternelemente angewendet wurden. D.h. man muss die Regeln nicht nochmal genau definieren, da sie sowieso darauf angewendet werden.

Ein gutes Beispiel hierfür sind Inline-elemente innerhalb eines Absatzes. Definiert man für den <p>-Selektor gewisse Regeln, werden diese auch auf alle untergeordneten inline-Elemente übertragen und müssen nicht extra als Regel definiert werden.

Überschreiben von Vererbung

Möchte man nicht, dass alle Kinderelemente die Regeln des Elternelements erben, kann man diese für spezifische Elemente überschreiben, indem man einfach separat eine individuelle Regel definiert. Das liegt daran, dass in CSS immer die spezifischste Regel Vorrang hat und der Browser das Element dementsprechend darstellt.

Generell kann man sagen, dass alle Sytles, welche das Aussehen von Text beeinflussen, vererbt werden. Andere Propertys werden nicht vererbt, da es nicht praktisch währe und man dann zu viele Tochterelemente überschreiben müsste. Ein gutes Beispiel hierfür wäre das Rahmen-Element. Man möchte dies vielleicht um den Textkörper, jedoch nicht um alle untergeordneten Elemente.

Klassen

Möchte man verschiedene Elemente, welche den gleichen Selektor besitzen, individuell gestalten, muss man diese mit Klassen kennzeichnen.

Klassen sind spezifische Zusammenfassungen von Elementen, auf welche Regeln angewendet werden können. Sie ermöglichen es zudem, einzelne Elemente des gleichen Selektors auszuwählen, um für sie eigene Regeln zu definieren.

Um eine Klasse zu erstellen, muss man das gewünschte Element, im HTML-Code, mit dem class-Attribut kennzeichnen. Dazu vermerken wir dies in dessen Start-Tag und geben der Klasse direkt einen Namen. Diese Klasse können wir dann in CSS auswählen, um Regeln für sie zu definieren.

< p class =“ Klassenname”>

Um nun Regeln zu definieren müssen wir die erstellte Klasse in CSS ansprechen und anschließend Regeln für sie Definieren, wie in Vorlesung 4 erklärt. Um Styling-Regeln für Klassen zu definieren müssen wir den Selektor mit dem Klassennamen aufrufen, also Selektor + . + Klassenname. Sollen jedoch alle Elemente derselben Klasse den gleichen Style haben, lässt man die Angabe des Selektors einfach weg.

Möchte man verschiedene Styles verwenden, welche in unterschiedlichen Klassen definiert sind, kann man dem betroffenen Element einfach mehrere Klassen zuordnen, dabei kann es jedoch zu Konflikten kommen, wenn mehrere Klassen dieselben Propertys definieren. In diesem Fall setzt sich erneut die spezifischste Regel durch, bzw. sollten zwei oder mehr Regeln gleich spezifisch sein, setzt sich die zuletzt definierte Regel im CSS-Stylesheet durch.