HTML 19.01.2016 Projektanforderungen Struktur: Zentrale (index-)seite Sinnvolle Ordnerstruktur von index.html aus verlinkte Seiten mit Querverweisen (insgesamt mindestens 3 Seiten) Elemente, die irgendwo auf den Seiten enthalten sein sollen: - Textformatierungen - Links (auch einen Link zu einem Anker auf derselben Seite, z.b. nach oben - Bilder mit entsprechenden Formatierungen - Tabelle(n) - Links sollen angepasste Farben haben - Hintergrund als Bild - grundlegende Formatierungen sollen mit CSS realisiert sein Abgabetermin: 13.05.2016, 23:59 Uhr Wie ist eine HTML-Seite aufgebaut? <!doctype html> <html lang="de"> <head> </html> <meta charset="utf-8"> <meta name="description" content="beispielseite mit exemplarischem..."> <meta name= keywords content= HTML, Beispiel, Head, Beispiel > <title>exemplarische Kopfdaten</title> </head> <body> </body> head-element muss genau einmal enthalten sein. Was steht (beispielsweise) im Kopf?
<meta charset="utf-8"> <meta name="description" content="beispielseite mit exemplarischem Inhalt im Head- Bereich einer HTML-Seite"> <meta name= keywords content= HTML, Beispiel, Head, Beispiel > <title>exemplarische Kopfdaten</title> title-element muss genau einmal enthalten sein! description wird oft in Suchmaschinen zusammen mit dem Treffer angezeigt keywords hilft Suchmaschinen, die Seite zu finden Ordnerstruktur: Datentyp Oberbegriffe Dann automatisch: alphabetisch (Wichtigkeit) Datum Größe 26.01.2016 Formatierung von Text Hervorhebungen: b (bold), em, strong, mark, i, u Struktur: <> Beispieltext </> Abschnitt definieren: p-element <p>... </p> im Gegensatz zu <br> AUSNAHME: kein schließendes </br> Überschriften sind fest formatiert: Umlaute: ä ö ü <h1> Überschrift 1 </h1> 2.2.16 Wie kann meine Seite einen Hintergrund bekommen? <body background="img/background.jpg" text="#990000" link="#0000cc" vlink="#000066" alink="#000000" bgcolor="#ccffff">
Links: <a href="http://html-color-codes.info/webfarben_hexcodes/">html-farben</a> Aufgabe Wie kann man Tags schachteln? Baue den folgenden Text nach: Schachteltext
TIPP: 10-Finger-Tippen lernen, z.b. Tipp 10 16.2.16 Tabellen anlegen Grundstruktur: <table border=5px> <tr> <th>09a</th> <th>09b</th> <th>09c</th> <th>09d</th> </tr> <tr> <td>laubach</td> <td>felgenträger</td> <td>rost</td> <td>deerberg</td> </tr> <tr> <td>a210</td> <td>a203</td> <td>a208</td> <td>a209</td> </tr> </table> border=1px width="100" Breite für die gesamte Tabelle im table-tag Breite der einzelnen Spalten (hinter table-tag einfügen) <colgroup> <col width="80"> <col width="100"> <col width="320"> </colgroup> oder <colgroup width="200" span="3"> </colgroup> oder
<colgroup> </colgroup> <col width="4*"> <col width="2*"> <col width="1*"> cellspacing cellpadding nn for pixels or nn% for percentage length nn for pixels or nn% for percentage length Bilder einfügen <img src="humalogo.png" alt="humalogo"> Alle Angaben von src und alt sind Pflicht. Folgende Angaben sind optional: width und height als Angabe für Höhe und Breite einer Abbildung. Angabe ohne Einheit (Pixel) oder Prozent (hier nicht Prozent von der Bildschirmbreite sondern von der Originalgröße des Bildes) <img src="hund.gif" width="104" height="90" alt="hund"> oder <img src="hund.gif" width="80%" height="70%" alt="hund"> Grafiken werden oft von einem Untertitel ergänzt. <figure> <img src="huma-logo-neu.png" alt="huma-logo"> <figcaption> Das neue Huma-Logo von 2012 </figcaption> </figure> Pfadangaben keine Angabe, wenn Bild in gleichem Ordner wie HTML-Datei zum Überordner gehen:../img/logos/humalogo.jpg
CSS Warum CSS? Gute Referenz: http://www.css4you.de Einbindung von CSS-Dateien <link rel="stylesheet" type="text/css" href="style1.css"> Zeile muss in den Kopf der HTML-Datei Die CSS-Datei hat keine besondere Struktur, es werden einfach Eigenschaften aufgelistet, z.b. Definitionen Hier lassen sich jetzt verschiedene Eigenschaften definieren, z.b. die font- Eigenschaft für mit <p> </p> bezeichnete Abschnitte: p { font: bold 12px Georgia, Times, serif; } oder die Grundlagen einer Datei: body { font-family: 'Comic Sans MS', sans-serif; line-height: 1.5; color: #FFFFFF; background-image: url("img/black.png"); background-attachment: fixed; margin: 10px; padding: 10px; } oder weitere Eigenschaften: link { text-decoration: underline; font-family:'comic Sans MS', sans-serif; fontsize:16px; color: #3366CC;} visited { text-decoration: underline; font-family:'comic Sans MS', sans-serif; fontsize:16px; color: #6666CC;} focus {text-decoration: underline; font-family:'comic Sans MS', sans-serif; font-
size:16px; color: #87cefa;} hover {text-decoration: underline; font-family:'comic Sans MS', sans-serif; fontsize:16px; color: #9932cc;} active {text-decoration: underline; font-family:'comic Sans MS', sans-serif; fontsize:16px; color: #ffd700; } p { font-family:'comic Sans MS', sans-serif; Color:#FFFFFF; font-size:16px; } h1 {font-family:'comic Sans MS', sans-serif; Color:#FFFFFF; font-size:24px; } Referenz zu CSS: http://wiki.selfhtml.org/wiki/css Ein Hintergrundbild soll beim Scrollen fixiert bleiben (ID-Selektoren) CSS-Code #toplink {background: none; top: 0; margin: 0; padding: 0.0em 0em; position: fixed; } Hier wird mit der Raute eine Eigenschaft toplink definiert, auf die man später in der HTML-Datei zurückgreifen kann. Diese Eigenschaft toplink nennt man einen ID- Selektor HTML-Code <table id="toplink" width="100%"> <tr> <th><img src="bilder..> Hier bekommt die Tabelle in ihrem einleitenden Tag über id=... die Eigenschaft zugeordnet, die man vorher in CSS definiert hat. Hier steht das Hintergrundbild in einer unsichtbaren Tabelle, also bleibt das Hintergrundbild mit der Tabelle fixiert (position: fixed in CSS). Warum das? Wenn man beispielsweise in seinen Dokumenten viele Tabellen hat, dann kann es sein, dass man zwei Arten von Tabellen benötigt. In CSS lässt sich aber der <table>-tag nur einmal definieren. Mit einem ID-Selektor kann man die eine Tabelle mit dem Selektor #table1 und die andere mit dem #table2 definieren und dann in HTML jeweils auf die benötigte Eigenschaft zurückgreifen.
Das Hintergrundbild soll sich an die Fensterbreite anpassen Hier habe ich die folgende Lösung gefunden, wie man sofort sieht, gilt die für CSS. html {background: url(hintergrund.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Eigentlich sind die Zeilen, die mit einem Minus beginnen nicht zwingend nötig, hier geht es um Kompatibilität für unterschiedliche Browser. Entscheidend ist background-size: cover. Verweise innerhalb eines Dokuments <a href="#kurs_2">zu Kurs 2</a> Verweis zum Textanker #Kurs2 GANZ VIEL TEXT... <a name="kurs_2"></a>kurs 2 Definition des Textankers Kurs2