Erstellen Sie folgende Webseite mit einem einfachen Editor
Lösung anzeigen..<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Übung 1</title> </head> <body> <h1>Seite des 28. Juli 2001</h1> <p>Heute war ein schöner Tag, ich bin mit dem Fahrrad nach Wiesenbach gefahren.</p> <p><img src="graph/fahrrad.jpg" alt="Bild eines Fahrrades" height="400" width="267" style="float: right; margin-left:14px">Das ist mein <em>Fahrrad</em><br> Das hat:</p> <ol> <li>eine Gangschaltung</li> <li>einen Lenker</li> <li>und Satteltaschen</li> </ol> <p><u><strong>Hinweis:</strong></u> Fahrradbild gibts unter:</p> <p><a href="/webpublish/050_fragen-uebung/graph/fahrrad.jpg">http://mezmedia.de/webpub/03-11-09_fragen-uebung/graph/fahrrad.jpg</a></p> <p>Es ist 267 breit, 400 hoch und hat 14 Pixel Abstand links.</p> <p>Ersatztext: Bild eines Fahrrades</p> <hr> <p>Und hier ist meine Mail Adresse: <a href="mailto:Hubert.Rasar@nirgends.com">Hubert.Rasar@nirgends.com</a></p> </body> </html>
Übung
Erzeugen Sie folgende Seite in HTML strukturiert auf Papier .
Hinweis zur Reihenfolge: Überschrift, Linie, Text, Bild, Liste, Linie, Tabelle..
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Aufgabe 2</title> <style> table{ width: 400px; border-collapse:collapse; border:thick groove green; } th, td{ border:2px dotted blue; padding: 3px; } </style> </head> <body> <h1 style="text-align:center">Die Überschrift</h1> <hr> <p style="text-align:right">Dies ist das Bild "seepferd.gif" 200*126</p> <img src="graph/seepferd.gif" alt="Seepferd" height="200" width="126" style="float:right; margin-left:5px"> <ol> <li>Dies ist eine Liste <ul> <li>mit Unterpunkt 1</li> <li>mit Unterpunkt 2</li> </ul> </li> <li>und weiteren Stichpunkten</li> <li>z.B. diesem</li> </ol> <hr> <table> <tr> <th>Tabelle 400 breit</th> <th>Zellen</th> </tr> <tr> <td>border-collapse:collapse;<br> border:thick groove green; </td> <td> border:2px dotted blue;<br> padding: 3px;</td> </tr> </table> <p>Das ist ein relativer Link auf <a href="3aufgabe.html">"aufgabe3.html"</a></p> </body> </html>
Übung
Erzeugen Sie folgende Seite in HTML strukturiert auf Papier ..
Tipp: Schauen Sie sich erst die Seite genau an und entnehmen Sie die Hinweise.
Der Hund..
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>HTML Übung 3</title> <style> table { width:95%; border:5px outset grey; background-color:#ffc; border-spacing:15px; } th, td{ border:1px solid black; padding:10px; } </style> </head> <body style="background-color:#FDF; font-family: sans-serif;"> <h2 style="text-align:center;">Das ist die Überschriftgröße 2</h2> <hr> <p><b>Hinweis:</b> Schrift ist serifenlos, Hintergrundfarbe ist #FDF.<br> Reihenfolge ist Überschrift, Linie, Paragraph, Tabelle, Überschrift, Liste, Paragraph.</p> <table> <tr> <td>Tabellenrand:<br> border:5px outset grey;</td> <th>Tabelle ist 95% des Fensters breit</th> <td>Der Zelleninnenabstand mißt 10 Pixel</td> </tr> <tr> <td>Text auf der linken Seite<br> noch mehr Text!</td> <td><img src="graph/hund.gif" alt="Hund" height="204" width="252"></td> <td>Und Hier auf der rechten Seite <hr> noch Text unter der Linie</td> </tr> <tr> <td>Der Steg ist 15 Pixel breit</td> <td>Das ist das Bild "hund.gif" 252*204</td> <td>Tabellenhintergrundfarbe: "#FFC"</td> </tr> </table> <h3>Und noch ne Überschriftgröße 3:</h3> <ul> <li>Das ist der erste Streich <ul> <li>Der zweite ist ein Unterstreich</li> </ul> </li> <li>Und das wieder ein Oberstreich</li> </ul> <p>Wie viele <br> braucht es auf Seite?</p> </body> </html>
Übung
Erzeugen Sie folgende Seite in HTML strukturiert auf Papier ..
Die Krabbe.. 
Der Hintergrund
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Die Krabbe Tom</title> <style> body {font-family: sans-serif; background: url(graph/back.gif) } table { width:500px; border: 1px solid #00C; padding:5px; background:#ffc; } th, td { border: 1px solid red; padding:3px; } </style> </head> <body> <h2 style="text-align:center">Überschrift Grösse 2</h2> <p><strong>Hinweise:</strong> Die Schrift ist serifenlos und als Seitenhintergrund wird ein Bild mit dem Namen <em>back.gif </em>verwendet, daß sich im Ordner <em>graph</em> befindet. Seitentitel ist "Die Krabbe Tom"</p> <hr> <table> <tr> <th>Tabellenfarbe: ffc</th> <td>Die Krabbe Tom</td> </tr> <tr> <td>Tabelle: <ol> <li>ist 500 px breit</li> <li>Rand 1px solid #00C</li> <li>Polsterung 5px</li> </ol> <p>Tabellenzellen:</p> <ul> <li>border: 1px solid red;</li> <li>padding:3px;</li> </ul></td> <td><img src="graph/krabbe.gif" alt="Krabbe" height="120" width="141" style="display:block;margin:8px auto;">Bild: <ul> <li>"krabbe.gif" 141 * 120</li> <li>"display:block;margin:8px auto;"</li> </ul></td> </tr> </table> <p>Es gibt 0 <br> auf dieser Seite!</p> <p>© Oliver Mezger <a href="https://mezdata.de">mezdata.de</a></p> </body> </html>