docBlatt 3 - Homepage
download 
Plainte Transcription
Blatt 3 - Homepage
Prof. Dr. Th. Letschert FB MNI Internetbasierte Systeme Blatt 3 Vorbereitung Bitte kommen Sie vorbereitet zur Übung! Aufgabe 1 1. Besuchen Sie Selfhtml. Setzen Sie ein Lesezeichen und stöbern Sie ein wenig auf den Seiten herum. 2. Besuchen Sie die w3schools. Setzen Sie ein Lesezeichen und stöbern Sie ein wenig auf den Seiten herum. 3. Installieren Sie in Ihrer Eclipse HTML–Unterstützung (Siehe install new software, update site Helios, Web, XML, and Java EE Development). 4. Erstellen Sie mit Eclipse ein HTML–Dokument. Präsenzteil Aufgabe 2 Betrachten Sie folgendes HTML–Dokument: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta name="language" content="german, de, deutsch"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Ich</title> </head> <body> <h1>Ich</h1> <p>Ich bin wirklich ein Genie, vielleicht das größte, wenn nicht gar das Größte. </p> <p><em>Alle</em> sollen von meinen Taten wissen!</p> </body> </html> 1. Ist dieses Dokument ein korrektes XHTML–Dokument? Welchem Standard entspricht es? Enthält es Fehler? Wenn ja korrigieren Sie es! 2. Was ist der Unterschied zwischen dem h1—Tag und dem title–Tag? 3. Hätte man auch H1 statt h1 schreiben können? 4. Was genau bedeutet / welche Wirkung hat das Meta-Tag http-equiv? 5. Wieso enthält es den Mime-Type text/html und nicht application/xhtml+xml? 6. Installieren Sie einen Web–Server auf Ihrem System - z.B. Apache. 7. Erstellen Sie eine Datei mit dem oben angegeben Text als Inhalt. Achten Sie darauf, dass Ihr Editor die Datei im UTF-8 Format abspeichert. 8. Welche Response–Header liefert der Server wenn dieses Dokument ausgeliefert wird? (Firebug!) 9. Angenommen Die Datei wird nicht im UTF-8 Format auf dem Server abgespeichert. Was passiert? Wird sie (von wem: Server oder Browser) konvertiert? Werden Zeichen falsch dargestellt? Wird das Dokument gar nicht ausgeliefert? Hausübung Aufgabe 3 Erstellen Sie eine eigene Hompepage mit Kopfbereich, Navigationsleiste, Inhalt und Seiteninformation. Die Verwendung von Tabellen ist verboten! Beispielsweise kann Ihre Seite frei nach folgendem Vorbild gestaltet werden: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="language" content="german, de, deutsch"/> <meta name="robots" content="index,follow" /> <meta name="keywords" content="Genie, Ich"> <meta name="DC.Publisher" content="Ich"> <meta name="DC.rights" content="Alle Rechte liegen bei mir"> <title>Ich</title> </head> <body> <!-- Branding start --> <h1>Ich</h1> <blockquote> <p>Ein Blick auf ein Genie</p> </blockquote> <!-- Branding end --> <!-- Navigation start --> <div id="navi"> <h2>Entdecke mich</h2> <ul> <li><a href ="/">Startseite</a></li> <li><a href ="/Verdienste">Meine Verdienste</a></li> <li><a href ="/Erhrungen">Meine Ehrungen</a></li> </ul> </div> <!-- Navigation end --> <!-- Content start --> <div id="content"> <img src="images/ich.jpg" width="150" height="200" title="Ich" alt="Bild von mir"> <h3>Google, wo guckst Du? Such Mich!</h3> <h4>Design ist alles!</h4> <p>Lorem ipsum consectetuer adipiscing elit. </p> <p>Eget habitasse elementum est.</p> <h4>Inhalt auch!</h4> <p>Hat man keinen dann braucht man Fuellsel. Statt zu tippen suchen Sie im Internet nach 2 <em>Blindtext</em>. </p> </div> <!-- Content end --> <!-- site info start --> <div id="site_info"> <h4>Siteinfo</h4> <address class="vcard"> <span class="org">Ich Desgin, Inc.©</span><br/> <span class="email">[email protected]</span><br/> Alle Rechte vorbehalten, All Rights Reserved </address> </div> <!-- site info end --> </body> </html> Ergänzen Sie Ihre Seite um Fotos. Aufgabe 4 Erstellen Sie eine passende CSS–Datei, die die Bereiche auf der Seite positioniert, beispielsweise nach folgendem Vorbild, und binden Sie sie ein. #branding { font: Arial; color: #404040; font-weight: bold; padding-right: 12px; background-color: #7f7f7f;; } #site_info { clear: both; padding-right: 30px; font-size:10px; background-color: teal; } #navi { margin: 0px; float: left; width: 130px; padding: 20px 40px 140px 20px; background-color: silver; font: Arial; } #navi ul { list-style-type:none } #navi li { font: Arial; font-variant: small-caps; } #content { padding-right: 10px; padding-left: 20px; padding-top: 20px; margin-left: 200px; color: #202020; background-color: teal; } 3 #content p { color: #303030; font: Arial; } #content h3 { color: #202020; } #content h4 { color: #202020; } Aufgabe 5 Veröffentlichen Sie Ihre Homepage auf dem Homepageserver der FH http://homepages.fh-giessen.de/. Der Homepageserver wird von der zentralen Abteilung ITS betreut. Hinweise dazu sind unter http://www.its.fh-giessen-friedberg.de/hilfe/16-eigene-homepage.html zu finden. 4
