Rich sticky notes
Lasst euch von unseren Flügeln leiten!
Auch HTML und CSS gehören im Umgang mit dem Intenet dazu,
drum lassen wir euch auch hiermit nicht in Ruh.
Lest nach wie HTML und CSS funktionieren
und scheut euch nicht davor, es selber auszuprobieren.
Informationsquellen
Einführung
Was ist HTML?
Ausgeschrieben bedeutet HTML: Hypertext Markup Language (HyPertext Auszeichnungssprache).
Es ist eine Auszeichnungssprache für Webdokumente, welche die Struktur eines Dokumentes definiert. (vgl. Jan Winkler, http://www.html-world.de/program/html_1.php)
Was kann HTML?
HTML ist keine Programmiersprache. Man spricht hier eher vom Notieren. Insgesamt kann man mit HTML strukturieren, jedoch keine Dynamik, wie z.B. fliegende Bilder oder ähnliches einbringen. Dafür gibt es andere Sprachen, wie z.B. Java Script.
Was braucht man für HTML?
Für HTML wird ein Browser benötigt. Dieser liest das Dokument ein, wertet es aus und zeigt es schließlich gemäß der vorhandenen Definitionen an. Da es sich bei den HTML Dateien um ASCII Dateien handelt, ist für das Schreiben mit HTML ein Texteditor oder Editoren, die speziell für HTML ausgerichtet sind, von Nöten.
Was ist CSS?
CSS ist eine Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.
Wichtige Begriffe bei HTML
Elemente und Tags:
Ein Element ist eine Einheit, die eine bestimmte Struktur oder Objekt darstellt. Ein Element ist z.B. ein Bild oder ein Button, aber auch ein Absatz.
In HTML gibt es eine ganze Reihe von Elementen die verwendet werden können.
Außerdem gibt es noch den Begriff "Tag". Ein Tag ist im Prinzip auch ein Element. Der Unterschied liegt in der Begrifflichkeit: Ein Element ist die Gesamtheit eines bestimmten Bereiches und wird meist durch zwei Tags beschrieben. Mit dem ersten Tag beginnt auch der Bereich des Elements. Ist der erste Tag (auch öffnender Tag genannt) abgeschlossen, folgt der Elementinhalt oder "Gültigkeitsbereich". Soll der Elementinhalt abgeschlossen werden, folgt der zweite (schließende) Tag. Da es bei manchen Elementen vorhersehbar ist, dass diese keinen Elementinhalt haben werden (z.B. bei Bildern, Buttons oder Zeilenumbrüchen), gibt es auch Elemente die nur einen Tag benötigen. Man nennt diese "leere Elemente".
Tags notieren:
Ein Tag wird immer mit einem Kleinerals-Zeichen (<) eingeleitet. Diesem folgt der Elementname (man könnte auch sagen Tag-Name). Geschlossen wird der Tag wiederum mit einem Größerals-Zeichen (>). Damit ein Unterschied zwischen öffnendem und schließendem Tag ersichtlich wird, wird vor dem Namen des schließenden Tags ein Slash (/) gesetzt. Bsp.: <MeinElement> Ich bin Elementinhalt. </MeinElement>
Attribute und Werte
Ein Attribut ist eine bestimmte Eigenschaft eines Objektes. So ist z.B. ein Attribut eines Bildes dessen Zieldatei oder dessen Größe. Attribute werden immer innerhalb des öffnenden Tags aber nach dem Elementnamen notiert. Ein Attribut setzt sich dabei zumeist aus einem Attributnamen und einem Wert (z.B. die Größe des Bildes in Pixel) zusammen. Dabei wird als erstes der Attributname notiert, gefolgt von einem (=) - Zeichen. Anschließend folgt der Wert innerhalb von doppelten Anführungszeichen .
Bsp.:<Bild Hoehe="200 Pixel" Breite="430 Pixel"> ... </Bild>
Universalattribute:
Bei HTML sind die Attribute fest definiert. Einige Attribute sind bei HTML sehr wichtig. Dies sind:
| Attributname | Beschreibung |
|---|
| id
| Als Wert wird hier eine eindeutige Identifikation notiert. Über dieses Attribut ist das Element innerhalb des gesamten Dokuments eindeutig ansprechbar. |
| name
| Ist ähnlich zu id. Es gibt dem Element einen eindeutigen Namen innerhalb des Dokuments. |
| class
| Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben. |
| style
| Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben. |
| title
| Als Wert wird hier ein beliebiger Titel notiert der für das Element verwendet werden soll. Der Titel gilt als Zusatzinformation zum eigentlichen Element. |
| lang
| Als Wert wird ein Sprachkürzel (de, en, fr, ...) notiert. Das Attribut ist dazu gedacht, den Elementinhalt eindeutig einer Sprache zuordnen zu können. |
Da es den Rahmen sprengen würde, wenn wir euch jedes einzelne Detail zur Erstellung von HTML notieren würden und ihr trotzdem alles dazu wissen wollt, dann benutzt doch folgenden LINK.
CSS: Hauptteile definieren
Zuerst werden sowohl im HTML-Code, als auch im Stylesheet die Hauptbereiche unserer Website definiert. Im Stylesheet werden zunächst die Abmessungen (Breite u. Höhe) festgelegt. Bei den ersten Layouts ist es sinnvoll, unterschiedliche Hintergrundfarben zu vergeben, um einen ersten Eindruck vom Ergebnis zu bekommen. Folgende Bereiche sind auf den meisten Webseiten zu finden:
Header:
Im Header befindet sich meistens das Hauptmenü, manchmal klappt es beim Rollover nach unten auf ("Dropdown-Menü") und legt seine Untermenüpunkte über den Content. In vielen Fällen finden sich im Header auch Werbebanner oder einfach nur eine schicke Grafik als Blickfang.
Content / Body:
Der Contentbereich (Content = Inhalt) beherbergt die Hauptinhalte der Website. Hier finden sich oftmals kleinere Info- oder Navigationsboxen, Bilder, Textinhalte, etc.
Footer:
Im Footer am unteren Ende der Website sind meist Bemerkungen zum Copyright, Links zum Impressum etc. zu finden. Die Größe des Footers liegt i.d.R. zwischen 20 und 40 Pixeln.
Wrapper:
Der Wrapper (to wrap = verpacken, einwickeln) gruppiert alle Unterbereiche. Dadurch lassen sich die Positionen aller Elemente gleichzeitig auf der Site positionieren.
Die 10 Gebote zu HTML
Die 10 Gebote
Gebot 1
Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen I: gute HTML-Struktur
Achten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente. Entscheidet ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).
Gebot 2
Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen II: „HTML-Tags“
Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
Aus Kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt wie z.B. <br>, <img> immer zu schließen: <br />, <img />
Aus Kompatibilitätsgründen zu XHTML wird empfohlen Element- und Attributnamen
IMMER klein zu schreiben (z.B. <a href=http://www.ifmk.de >Das ist ein Link</a>)
Setzen Sie Attributwerte immer in Anführungsstriche (z.B. src=“blume.jpg“ oder alt=“Das
Photo zeigt eine Sonnenblume“)
Verwenden Sie immer Entitäten (z.B. für „ä“ - „ä“)
Auch Sonderzeichen wie z.B. € (€) können so dargestellt werden
Falls ihr nicht wisst, wie man die Sonderzeichen umwadelt, sodass sie auf der Website korrekt erscheinen, dann klickt einfach auf folgenden Link.
Dieser wandelt euch diese Sonderzeichen in entsprechende Entitäten um. Gebot 3
Du sollst darauf achten „well-formded HTML“ Seiten zu erstellen III: korrekte Hyperlinks
Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.
Sollte das Bild nicht auf der erstellten HTML Seite erscheinen, gilt es zu überprüfen, ob das Bild korrekt hochgeladen wurde und ob man auch den selben Namen des hochgeladenen Bildes in den Pfad übernommen hat.
(<img … src=“name.endung“>)
Gebot 4
Du sollst die strikte Trennung von Inhalt und Layout beachten.
HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwändig.
Gebot 5
Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.
Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status „deprecated“ (z.B. „font-Tag“). Verwenden sie deshalb ausschließlich Logische Auszeichnungen (z.B. „em-Tag“ oder „strong-Tag“) anstatt Physikalischen Auszeichnung bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).
Gebot 6
Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.
Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout. Inzwischen ist es ohne Probleme möglich tabellenfreie Layouts mit CSS zu erstellen.
Gebot 7
Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten.
Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.
Ein gutes Beispiel dafür, was man möglichst vermeiden sollte ist die Verwendung von Blinken im HTML Text (<span style=“text-decoration: Blink; color #00FF))“<Ich</span>)
Gebot 8
Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels „alt-Attribut“ hinzufügen.
Verwenden Sie stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets etc. zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.
Gebot 9
Du sollst Nutzergruppen nicht durch Aussagen wie: „optimiert für Internet Explorer 4.1, SeaMonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrollleisten ausschließen.
Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSSReferenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden). Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.
Gebot 10
Du sollst Metainformationen sinnvoll einsetzen.
Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).
Beispiele für Meta-Daten:
<meta name="description" [...]>:Beschreibung einer Seiten in einem kurzen Satz möglich
<meta name="author" [...]>: Verfasser der Seite kann aufgezeigt werden
<meta name="date" [...]>: Einsetzen des Datums des Erscheinens der Website
