Webdesign-Multimedia HTML und CSS

Transkript

1 Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente bilden die Grundlage aller Seiten des Internets. Der Inhalt des Dokuments bestimmt die Struktur der Seite, die über jeden Browser abgerufen werden kann. Die Darstellung der Seite kann durch CSS (Kapitel 2) verändert werden. 1.2 Syntax Die Syntax, also die korrekte Grammatik von HTML, wird durch Tags gebildet. Tags können als Umgebungen verstanden werden, in denen bestimmte Regeln gelten Tags Ein Tag öffnet solch eine Umgebung mit spitzen Klammern und dem jeweiligen Typ und schließt diese mit einem zusätzlichen Backslash. Ein kleines Beispiel: <p> Dies ist ein Textabsatz. </p> Die meisten Tags werden wie hier erwähnt geöffnet und geschlossen. Es gibt jedoch auch Ausnahmen, z.b.: <br> (Zeilenumbruch) <img> (Bild) <link> (Verknüpfung zu externen Dokumenten) Tags werden nur vom Browser als Information ausgewertet und erscheinen nicht im sichtbaren Dokument. 1

2 1.2.2 Datei HTML-Dokumente werden im.html-format abgespeichert und benötigen eine Aufteilung in Informationen über das Dokument und den eigentlichen Inhalt. Wichtig ist auch die Information an den Browser, dass es sich um ein HTML-Dokument handelt. Dieser bezieht die Information nicht aus dem Dateityp. Dateityp In alten HTML-Versionen (vor HTML5) musste zu Beginn jedes Dokuments der Dateityp deklariert werden. Dies ist zum Glück nicht mehr (doppelt) notwendig und wird aus dem Tag <html> abgeleitet, welcher die Umgebung eurer kompletten Datei darstellt. Dennoch wird aus Kompabilitätsgründen dazu geraten, diese Information dennoch miteinzubeziehen. Informationen des Dokuments Meta-Informationen Der Tag <head> bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets. < head > < title > Seitenname </ title > </ head > Inhalt Der Inhalt eurer Seite wird durch den Tag <body> bestimmt. Alle Elemente innerhalb (mit Ausnahme der Tags und Kommentaren) sind sichtbar. < head > < title > Seitenname </ title > </ head > <b ody > Inhalt des Dokuments </b ody > In den folgenden Beispielen werden die Tags immer im <body> stehen, sofern nicht anders gekennzeichnet Kommentare Kommentare ermöglichen euch Hinweise für euch oder andere Personen in der Datei zu hinterlassen, ohne, dass diese auf der Seite sichtbar sind. (Anmerkung: Im Internet ist 2

3 alles sichtbar, wenn man nur danach sucht.) Kommentare sind - ähnlich wie Tags - Umgebungen. Das heißt, dass innerhalb der Kommentar-Umgebung der Inhalt nicht angezeigt wird. Kommentare werden mit  geschlossen. <p> Dies ist sichtbar!</p> <!-- Dies ist nicht sichtbar -- > Attribute Manche Tags benötigen Attribute, um spezifische Angaben festzulegen. Beispielsweise sind die Tags <link> und <img> sinnlos, solange ihr nicht angebt, worauf sie referenzieren, also welches Bild z.b. angezeigt werden soll. Attribute sind Teil eines Tags und werden innerhalb der spitzen Klammern gesetzt. <img src= " picture.jpg "> Links Neben den Links zu Bildern und Dateien können auch Links zu anderen Internetseiten gesetzt werden. Dies wird durch den Tag <a> ermöglicht, welcher das Attribut href benötigt. Links können auf verschiedene Arten gesetzt werden. Zwei Beispiele: Relativ Relative Links verweisen auf Dateien relativ zum aktuellen Ordner. Das heißt, dass wenn eure HTML-Datei im gleichen Ordner wie ein Bild liegt, könnt ihr wie folgt darauf verweisen: <img src= " picture.jpg "> Ihr könnt natürlich auch auf Dateien außerhalb (oder innerhalb anderer Ordner) des aktuellen Ordners zugreifen. Bei Dateien innerhalb eines Ordners im aktuellen Ordner: <img src= " pictures / picture.jpg "> Bei Dateien außerhalb des aktuellen Ordners: <img src= "../ pictures / picture.jpg "> 3

4 Absolut Absolute Links verweisen auf die genau Adresse einer Datei oder Seite. Absolute Links sollten nur im absoluten Notfall auf Dateien gesetzt werden, da eine Anpassung der Datei-Struktur absolute Links zerstört. <a href= "C:\ user \ website \ index.html "> Text zum Link </a> Möchtet ihr jedoch auf eine Seite oder Datei im Internet zugreifen müsst ihr auf die vollständige Adresse (mit oder verweisen. <a href= " http: // /12345/ "> Webdesign-Multimedia </a> 1.3 Semantik Erst durch die Anwendung verschiedener Tags wird eure Seite später auch die Struktur annehmen, die ihr erreichen wollt. So könnt ihr beispielsweise auch Tags innerhalb anderer Tags nutzen. <p><b> Fett gedruckter </b> und <i> kursiver </i> Text </p> Einteilung der Seite - Teil 1 Wichtig ist auch die Einteilung eures Inhalts in verschiedene Bereiche. So könnt ihr später mit CSS leichter die einzelnen Teile eurer Seite visuell anpassen. HTML5 bietet hierbei u.a. folgende Tags an: <header> (Den Kopf eures Inhalts, z.b. Logo) <nav> (Navigationsleiste) <section> (Einzelne Sektionen) <footer> (Fußzeile, z.b. für Kontaktdaten) 4

5 Beispielsweise könnte euer Dokument wie folgt aufgebaut werden: < head > < title > Seitenname </ title > </ head > <b ody > < head er> < nav > <h1> Titel </h1> <img src= " logo.png "> </ nav > </ head er> <s ection > <h2> Nachrichten </h2> < p > Hier erscheinen aktuelle Nachrichten </ p > </s ection > < footer > <a href= " http: // google.de /"> Google </a> </ footer > </b ody > Listen Listen können in HTML entweder sortiert (bspw. 1-n) oder unsortiert dargestellt werden. <ol> < li > Dies wird mit einer Eins dargestellt </ li > < li > Dies wird mit einer Zwei dargestellt </ li > < li > Dies wird mit einer Drei dargestellt </ li > </ol> <ul> < li > Dies wird mit einem Punkt dargestellt </ li > < li > Dies wird mit einem Punkt dargestellt </ li > < li > Dies wird mit einem Punkt dargestellt </ li > </ul> Es ist auch möglich Sublisten zu erstellen: <ol> < li > Dies wird mit einer Eins dargestellt </ li > <ol> < li > Dies wird mit Eins Punkt Eins dargestellt </ li > < li > Dies wird mit Eins Punkt Zwei dargestellt </ li > < li > Dies wird mit Eins Punkt Drei dargestellt </ li > </ol> < li > Dies wird mit einer Zwei dargestellt </ li > < li > Dies wird mit einer Drei dargestellt </ li > </ol> 5

6 1.3.3 Zeilenumbrüche Text innerhalb von Tags (z.b. <p>) wird anders formatiert, als ihr es in eurer Datei spezifiziert. So werden bspw. unnötige Leerzeichen, leere Zeilen oder Zeilenumbrüche entfernt. Dies ist sinnvoll, da ihr so euren Code besser lesbar formatieren könnt. <p> Dies ist der gleiche Satz. </p> <p> Dies ist der gleiche Satz. </p> Wenn ihr bewusst Zeilenumbrüche innerhalb eurer Textabschnitte darstellen wollt müsst ihr das Tag <br> nutzen Einteilung der Seite - Teil 2 Neben den vorhin erwähnten Tags von HTML5 könnt ihr mit dem Tag <div> euren Inhalt besser strukturieren. Dies ermöglicht z.b. die Verlinkung auf Teile eures Dokuments. < div id= " news "> < p > Hier stehen aktuelle Nachrichten. </ p > </ div > < div id= " weather "> <p> Hier kö nnt ihr das aktuelle Wetter sehen. </p> <a href= "# news "> Zur ück zu den Nachrichten </a> </ div > Identifikator Das Attribut id="name" kann für die meisten Tags genutzt werden. Dies definiert einen festen Namen für die aktuelle Umgebung. Der Name des Attributs sollte nur einmal benutzt werden. Klassen Das Attribut class="name" kann für die gleichen Tags wie id, jedoch mehrfach mit dem gleichen Namen benutzt werden. Dies ist später sehr hilfreich für die visuelle Anpassung durch CSS Tabellen Tabellen sollten nur zur Darstellung von Daten und nicht zur Strukturierung eurer Seite verwendet werden. Beispielsweise könnt ihr so Statistiken geordnet darstellen. Eine Tabelle wird durch das Tag <table> definiert. Innerhalb der Tabelle definiert ihr (ähnlich zu <head> und <body>) Meta-Informationen und Inhalt. 6

7 < table > <th ead > Informationen zu den Spalten </th ead > < tbody > Inhalt der Spalten </ tbody > </ table > Der Inhalt der Tabelle wird jeweils durch Zeilen (<tr>) definiert. Innerhalb dieser Zeilen definiert ihr die einzelnen Zellen. Diese sind entweder Datenzellen (<td>) oder Überschriftszellen (<th>). < table > <th ead > <tr> <th> Name </th> <th> Adresse </th> </tr> </th ead > < tbody > <tr> <td>max Mü ller </td> <td> Musterstra ße 1</td> </tr> <tr> <td> Melanie Mü ller </td> <td> Musterstra ße 2</td> </tr> </ tbody > </ table > 7

8 2 CSS 2.1 Was ist CSS? CSS steht für Cascading Style Sheets und ist eine Stylesheet-Sprache für elektronische Dokumente und kann zur visuellen Änderung unter anderem für HTML verwendet werden. 2.2 Syntax Die korrekte Syntax, also die Grammatik von CSS wird durch Selektoren, Eigenschaften und Werte gebildet. Diese wählen z.b. bereits definierte Tags aus und ermöglichen die Änderung der visuellen Darstellung durch Eigenschaften und Werte. Selektor { Eigenschaft: Wert; Selektoren sind erneut Umgebungen, die die Anpassung der visuellen Darstellung auf einen Bereich im Stylesheet limitieren. Innerhalb der Selektoren bestimmt ihr durch Eigenschaften Arten der visuellen Änderung, welche durch Werte spezifiziert werden. Paare von Eigenschaften und Werten müssen immer mit einem Semikolon beendet werden Selektoren Selektoren können grundlegend auf drei verschiedene Weisen Elemente selektieren: Tags Tags können durch Selektoren ausgewählt werden, indem der Name des Tags, d.h. im Falle von <p> einfach p geschrieben wird. p { color: blue; Klassen Klassen werden von euch im HTML-Code für bestimmte Elemente definiert, die die gleichen Eigenschaften teilen sollen. So könnt ihr beispielsweise eine Klasse roter großer text definieren, dessen Text immer rot und groß dargestellt werden soll. Klassen werden in CSS durch einen Punkt und dem Namen der Klasse angegeben.. roter_gro ß er_text { font- size: large; 8

9 Identifikatoren Identifikatoren werden von euch einmalig für bestimmte Elemente im HTML-Code definiert, die eine einzigartige Eigenschaft besitzen sollen. Identifikatoren werden in CSS durch eine Raute und den Namen des Identifikators angegeben. # test { margin: 1 em; Kombination von Selektoren Ihr könnt Selektoren auch kombinieren. Wenn ihr beispielsweise nur Bilder verstecken wollt, die die Klasse class="hidden" haben, so könnt ihr dies wie folgt machen: img. hidden { display: none; Andererseits könnt ihr euch auch die Hierarchie eurer Tags zu Nutze machen. Wenn ihr z.b. nur Links innerhalb des Tags <header> rot färben möchtet: header a { Dies würde alle Links innerhalb des Tags <header> auswählen. Wenn ihr nur direkte Kinder (erste Hierarchie-Stufe) wählen wollt: header > a { Als Beispiel der Hierarchie: < head er> <a> Direktes < div > <a> Zweite </ div > </ head er> Kind </a> Hierarchie-Stufe </a> 9

10 Pseudo-Klassen Selektoren Es gibt weitaus mehr Selektoren und auch Pseudo-Selektoren, die eine sehr fortgeschrittene visuelle Bearbeitung eures HTML-Dokuments ermöglichen. Um euch nicht direkt zu überfordern zeige ich euch hier nur die nützlichste Form von Pseudo-Klassen-Selektoren, die Möglichkeit der visuellen Änderung, wenn die Maus über einem Element schwebt. a { color: blue; /* Der Text wird rot, wenn die Maus dar ü ber liegt */ a: hover { Kommentare Kommentare in CSS-Dokumenten werden durch /* geöffnet und durch */ geschlossen. p { /* roter Text */ Sie können sich auch über mehrere Zeilen erstrecken. /* Text wird: -rot gef ä rbt - gro ß dargestellt */ p { font- size: large; 2.3 Nutzung von CSS CSS kann auf drei verschiedene Weisen verwendet werden. Entweder schreibt ihr den CSS-Code in den Tag <style> im <head> eures HTML-Dokuments: < head > <s tyle > p { </s tyle > </ head > 10

11 Dies ist (für Anfänger) jedoch nicht ratsam, da eure Internetseite meist aus mehreren HTML-Dokumenten besteht, die (in Teilen) das gleiche Aussehen haben soll. So müsstet ihr den gleichen CSS-Code mehrfach in eure HTML-Dokumente schreiben. Ihr könnt durch den Tag <link> auf eine CSS-Datei (.css) verweisen und so die mehrfache Nutzung erleichtern. < head > <li nk rel= " stylesheet " type= " text / css " href= " style.css "> </ head > Zudem könnt ihr CSS-Code auch als Attribut von Tags verwenden. <p style= " "> Roter Text </p> 11