HTML DOKUMENTATION. Das minimale Grundgerüst

Größe: px

Ab Seite anzeigen:

Download "HTML DOKUMENTATION. Das minimale Grundgerüst"

Hansi Förstner
vor 7 Jahren
Abrufe

1 HTML DOKUMENTATION Das minimale Grundgerüst <!DOCTYPE html> ➊ <html lang="de"> ➋ <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> ➌ <title>dokumenttitel</title> ➍ </head> <body> </body> </html> ➊ = Damit der Browser genau weiss, was da kommt! ➋ = Damit der Browser die Grundsprache Deutsch wählt ➌ = diverse Infos, zum Beispiel für das Zeichenset (utf-8) mit Sonderzeichen ö,ü,... ➍ = Dieser Titel wird im Browser als Dokumententitel verwendet, auch zum Ausdrucken Attribute für <body> Hinweis: Viele Attribute sind heute bereits überlebt, so rasch geht die Entwicklung! Da es aber gut ist, die Programmierweise mit Attributen zu kennen, bleiben wir vorerst dabei. Mit der Designsprache CSS, die wir noch anschauen werden, wird das Attribut fast ganz ersetzt! <body bgcolor="blue" text="yellow"> </body> Also: Hintergrundfarbe blau und Textfarbe im ganzen Dokument gelb. Aber Achtung: Mit dunkelblauem Hintergrund sind z.b. Links (hellblau) fast nicht mehr sichtbar! Die Linkfarbe kann auch über ein Attribut geändert werden... Titel <h1>grosser Titel der Ebene 1</h1> <h2>grosser Titel der Ebene 2</h2>... <h6>grosser Titel der Ebene 6</h6> Textstrukturierung (einige Möglichkeiten...) Text Ganz wichtig: Anfang Absatz und Ende Absatz immer verwenden, um dazwischen etwas einzupacken wie Bilder oder Text... Absätze können mit Attributen moduliert werden. Attribute für ... ... ...

2 <hr> Horizontale Linie, so breit wie die Seite... <div> Text, Bild, Liste, Tabelle </div> <ul> <li>alle Schüler</li> <li>alle Lehrpersonen</li> <li>alle Hausangestellten</li> </ul> div ist ähnlich wie, allerdings ohne Abstand vor und nach. Zudem kann <div> verwendet werden, um inhaltliche oder gestylte Blöcke zu trennen. Doch davon später mehr. Alle Schüler Alle Lehrpersonen Alle Hausangestellten <ol> <li>schüler/innen</li> <li>lehrpersonen</li> <li>hausangestellten</li> </ol> 1. Schüler 2. Lehrpersonen 3. Hausangestellten An den Zeilenanfang... Textauszeichnungen hanspeter! b = fett, Hanspeter winterthur! u = unterstrichen Winterthur weihnachten! i = kursiv, italic Weihnachten 23! sup = oben 2 3 H2O! sub = unten H2O hallo! ein ganz spezielles Element, das wir noch kennen lernen... Tabellen automatische Breite <table border="1" width="60%"> <td bgcolor="yellow">hans <td>peter <td>suzanne Zeile 1 der Tabelle <td align="center">hanspeter <td>thomas <td>henriette-claudine </table

3 Tabellen Breite etc fix <table border="1" width="465"> <col width="35"> <col width="150"> <col width="80"> <col width="200"> <td bgcolor="gray" align="center">nr <td bgcolor="gray">name <td bgcolor="gray">vorname <td bgcolor="gray">telefon <td align="center" bgcolor="yellow">1 <td>keller <td>thomas <td>festnetz: <td align="center" bgcolor="yellow">2 <td>wiedenmueller <td>ernst <td>mobile: <td align="center" bgcolor="yellow">3 <td>boeker <td>philipp <td>mobile: <td align="center" bgcolor="yellow">4 <td>musterfrau <td>elisabeth <td>festnetz: </table> Selbstverständlich gibt es noch viele weitere Gestaltungsmöglichkeiten für die Tabellen; wir werden aber im zweiten Teil das alles sehen, wenn wir die Gestaltungssprache CSS kennen lernen werden...

4 Farbtabelle mit 4x4 = 16 Zellen mit Farbnummer statt Name <table border="0" width="200" cellspacing="2"> <col width="50"> <col width="50"> <col width="50"> Dieses Zeichen: # = Alt+3 <col width="50"> <td bgcolor="#cc9933" height="50"> <td bgcolor="#cc3333" height="50"> <td bgcolor="#0066cc" height="50"> <td bgcolor="#33ffcc" height="50"> <td bgcolor="#ff00ff" height="50"> <td bgcolor="#ff0000" height="50"> <td bgcolor="#ffff00" height="50"> <td bgcolor="#00cc00" height="50"> <td bgcolor="#0066cc" height="50"> <td bgcolor="#ff9933" height="50"> <td bgcolor="#0000cc" height="50"> <td bgcolor="#ff66ff" height="50"> <td bgcolor="#33ff00" height="50"> <td bgcolor="#3399ff" height="50"> <td bgcolor="#ffcc00" height="50"> <td bgcolor="#ff3333" height="50"> Du findest die Farbcodes auf meiner Webseite, Informatik: 216 websichere Farben. Schreibweise Klein- oder Grossbuchstaben (Ausnahme...) </table>

5 Der Tag ... Auch für diesen Tag sind die Tage gezählt. Wir lernen aber hier das Prinzip, und dann fällt uns der Übergang zur Designsprache CSS ganz leicht. Für diesen Tag sind drei Attribute in jeder gewünschten Kombination möglich und üblich. thomas peter azra emirhan 7 6 5 4 3 2 1 2 3 4 5 6 7 Der Link-Tag <a href=" zu UBS</a> <a href=" target="_blanc">link zu UBS in neuem Fenster oder Tab</a>

6 Bilder einfügen Sichere eine gute Qualität des gewünschten Bildes im gleichen Ordner wie das Strukturfile! Gib dem Bild einen einfachen Namen (ohne Leerschläge und ohne Umlaute). Bearbeite das Bild in einem Bildbearbeitungsprogramm so, dass du eine gewünschte Proportion bekommst, zum Beispiel Quadratisch oder 3 x 5. In meinem Beispiel habe ich das Bild 04MTH.jpg heruntergeladen und dann in iphoto geöffnet. Ich schneide es zurecht im Format 3x5 und exportiere es in einer mittleren Qualität. Nachher gebe ich dem neuen Bild (es sollte jetzt im richtigen Ordner liegen oder wie das html File auf dem Schreibtisch) den Namen bild.jpg. <img src="bild.jpg" height="30" width="50"> <img src="bild.jpg" height="60" width="100"> <img src="bild.jpg" height="90" width="150"> Das Verhältnis von 3 x 5 muss immer stimmen, z.b. 3x20 und 5x20 height= 60 width= 100 Tabelle zur Gestaltung von Text und Bild (anspruchsvoll) In diesem Falle wird die Tabelle ohne Rahmen (border= 0 ) gebraucht, um Texten und Bildern eine Struktur zu geben. Bis zu html Version 3.0 war es nicht möglich, Text- und Bilderblöcke so zu definieren, dass sie genau an einer gewünschten Stelle sind. Heute ist dies mit html 4.01 (das, was wir lernen) gemischt mit CSS möglich. Das wird der Inhalt sein der Zeit nach den Herbstferien. Also, zuerst herkömmlich programmieren (du lernst enorm viel!) und später dann das gelernte anwenden für das anspruchsvolle Designen! Das Folgende funktioniert nur mit fixen Breiten für die Tabelle ohne Rahmen. Ich skizziere hier die Rahmen für die Planung Bild Beschr 1 Beschr 2 Bildtitel Bildbeschreibung, Menübeschreibung Rezeptbeschreibung mit Erläuterung 1 Rezeptbeschreibung mit Erläuterung 2

7 <table border="0" width="550"> <col width="200"> <col width="350"> <td><img src="spaghetti.jpg" height="160" width="200" spaghetti carbonara Probieren Sie unser feines Rezept fuer Spaghetti Carbonara aus! Sie werden begeistert sein! Testen Sie es mit Freunden aus, Sie werden mit Komplimenten eingedeckt werden! Lesen Sie unser Rezept unten! 400 g Spaghetti in siedendem Salzwasser al dente kochen. 12 Tranchen Speck 2 Zwiebeln 2 Knoblauchzehen speck in breite Streifen schneiden. Zwiebeln und Knoblauch hacken. Speck ohne Zugabe von Fett bei mittlerer Hitze knusprig braten. Zwiebeln und Knoblauch beigeben, kurz mitduensten. 4 Eier 1 dl Halbrahm etwas Parmesan pfanne vom Herd nehmen. In einem separaten Gefaess Eier, Rahm und

8 den geriebenen Parmesan gut verruehren salz, Pfeffer 1 dl Halbrahm etwas Peterli spaghetti abgiessen und gut abtropfen lassen. Zum Speck in die Bratpfanne geben, sorgfaeltig mischen. Eimischung darueber giessen. Bei schwacher Hitze ca. 3 Minuten heiss werden lassen, Spaghetti in vorgewaermte Telle verteilen, Peterli ueber die Teigwaqren zupfen und nach Belieben mit Pfeffer bestreuen. </table>

Ähnliche Dokumente

Meine erste Homepage - Beispiele

Meine erste Homepage - Beispiele Meine erste - Beispiele 1. Beispiel meine Willkommen auf meiner Befehle nicht über Hier ist ein Senior, der noch fit für's Internet ist. Probieren wir