Document
Werbung
HTML BILDER UND GRAFIK 1. ÜBUNG: EIN BILD EINFÜGEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bilder01</title> </head> <body bgcolor="ffff66"><basefont face="arial" size="4"> <h2><align="left"><font color="red">EIN BILD EINFÜGEN</font></h2> <img src="brote1.jpg" border="3" align="left"> <!-- DAS BILD WIRD MIT ALIGN AM LINKEN RAND AUSGERICHTET WIRD, DAMIT<br> AUF DER ANDEREN SEITE DER TEXT LIESSEN KANN--!> Zum Einfügen von Bildern verwendet man den Befehl IMG für image<br> und dazu verschiedene Attribute. Das wichtigste Attribut ist SRC für<br> source, denn dieses Attribut beinhaltet den Namen der Bilderdatei.<br> <p>&lt;IMG SRC="brote1.jpg" border="3" align="left"&gt;</p> Dieses Bild befindet sich im gleichen Ordner, wie das HTML-<br> Dokument. Wenn sich die Grafik in einem anderen Ordner befindet,<br> muss der Pfad angegeben werden. <br clear="left"> Das Bild wurde unmittelbar nach der Überschrift eingefügt, es ist am linken Rand ausgerichtet, damit auf der<br> anderen Seite der Text fließen kann, mit einem Rahmen Stärke 3. <p align="right">Tobias Sonnleitner, 15.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 2. ÜBUNG: ALTERNATIVTEXT FÜR EINE GRAFIK/BILD a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bilder02</title> </head> <body bgcolor=„ffff66“><basefont face="arial" size="4"> <h2>ALTERNATIVTEXT FÜR EINE GRAFIK</h2> Es kommt oft vor, dass das Laden einer Grafik sehr lange dauert oder dass eine Grafik überhaupt nicht angezeigt wird <ul type=circle> <li>weil der Browser die Grafik nicht findet <li>weil die Bildanzeige abgeschaltet wurde </ul> In diesem FAll ist es vorteilhaft, wen nstatt des Bildes ein Alternativtexxt ausgegeben wird: Er beinhaltet meistens den Dateinamen und manchmal auch eine Erklärung zu dieser Grafik.<br> &lt;IMG SRC="LogoAustronaut.gif" border="5 alt="LogoAustronaut.gif ...&gt;<br> <p><center><img src="austronaut.gif" border="5" alt="LogoAustronaut.gif - DIE BEKANNTE ÖSTERREICHISCHE SUCHMASCHINE"></center></p> Der Alternativtext wird auch dann angezeigt, wenn man mit dem Mauspfeil über ie Grafik fährt. <p align="right">Tobias Sonnleitner, 15.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 3. ÜBUNG: BILDABSTÄNDE UND BILDER AUSRICHTEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bilder 03</title> </head> <body bgcolor=”ffff66“><basefont face="arial" size="4"> <h2><font color="red">BILDABSTÄNDE</font></h2> Jedes bild hat einene horizontalen Abstand (von links und rechts) in der Größe von 10 Pixel und einen<br> vertikalen Abstand (von oben und unten) in der Größe von 10 Pixel. <img src="christian.jpg" border="6" hspace="10" vspace="10" alt="CHRISTIAN IN DER WINF-STUNDE" align="left"> <img src="brote1.jpg" border="6" hspace="10" vspace="10 alt="JAUSENBROTE VOM SCHÜLERFÜFFET" align="right"><br> Die beiden bilder wurden <br> mit ALIGN am linken und <br> rechten Rand <br> ausgerichtet. Das<br> bewirkt, dass zwischen<br> den beiden bildern Text<br> fließen kann. Die Bilder<br> haben einen Rahmen mit<br> Stärke 6. <br clear="left">Die Abstände werden mit folgendem Befehl erzeugt.<br> &lt;IMG SRC=...BORDER=... HSPACE="10" VSPACE="10" ALT=...&gt; <p align="right">Tobias Sonnleitner, 21.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 4. ÜBUNG: DIE BILDGRÖSSE ANGEBEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bild04</title> </head><basefont face="arial" size="4"> <body bgcolor=“ffff66“> <h2><font color="red">DIE BILDGRÖßE</font></h2> <img src="brote1.jpg" border="6" hspace="10" vspace="20" alt="JAUSENBROTE VOM SCHÜLERFÜFFET" width="300" height="200" align="right"> Es ist üblich beim Einfügen von bildern auch die Bildgröße <br> anzugeben mit dem Befehl:<br> &lt;IMG SRC="...WIDTH="300" HEIGHT="200" ALT=...&gt;<br> d.h. du msust zuerst die Größe des Bildes ermitteln. Das geth am <br> einfachsten<br> mit ARBEITSPLATZ - EIGENSCHAFTEN oder<br> mit PAINT, mit dem MENÜBEFEHL: BILD - ATTRIBUTE. <p>Die Größenangabe hat zwei Vorteile:</p> <ol> <li>Beim Laden der Webseite weiß der Browser sofort wieviel<br> Platz er für das Bild frei lassen muss. <li>Wenn ein Bild größer ist, wird es an die vorgegebene Größe <br> angepasst. </ol> Wenn du einen HTML-Editor wie Frontpage oder Dreamweaver verwendest, wird die Bildgröße automatisch eingefügt. <p align="right">Tobias Sonnleitner, 21.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 5. ÜBUNG: BILDER ALS AUFZÄHLUNGSZEICHEN VERWENDEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bild05</title> </head><basefont face="arial" size="4"> <body bgcolor=“ffff66“> <h2><font color="red">BILDER ALS AUFZÄHLUNGSZEICHEN</font></h2> Bilder können auch als Aufzählungszeichen in einer Liste verwendet werden. Dabei ist es wichtig, dass jedes<br> Bild am Anfang einer neuen Zeile steht, d.h. vor jedem Bild wird ein Zeilenumbruch gemacht.<br> Der TExt bzw. die Beschriftun neben dem Bild wird mit ALIGN ausgerichtet.<br> In diesenm Fall verwendet man die Attribute TOP, MIDDLE und BOTTOM. <ul> <br><img src="camera1.gif" align="top"> Dieser Text ist mit ALIGN="TOP" am oberen Rand des bildes ausgerichtet.<br> <br><img src="camera1.gif" align="middle"> Dieser TExt sit mit ALIGN="MIDDLE" an der Mitte des Bildes ausgerichtet.<br> <br><img src="camera1.gif" align="bottom"> Dieser Test ist mti ALIGN="BOTTOM" am unteren Rad des Bildes ausgerichtet<br> </ul> Die Aufzählung wurde mit dem befehl UL erstellt. <p align="right">Tobias Sonnleitner, 21.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 6. ÜBUNG: EIN HINTERGRUNDBILD EINFÜGEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>Bild06</title> </head> <body background=”hgwolken.jpg”><basefont face="arial" size="4"> <h2><font color="red">HINTERGRUNDBILDER</font></h2> Statt der Hintergrundfarbe kann auch ein Hintergrundbild geladen werden. Dabei sind zwei Dinge zu<br> beachten: <ol type="a"> <li> Das Bild soll eine kleien Dateigröße haben<br> denn eine große Datei verlängert die Ladezeit und könnte bewirken, dass der Surfer ungeduldigt wird<br> und zu einer anderen Webseite geht.<p> <li>Das Bild muss hell sein<br> ein intensives Muster oder dunkle Farben machen den Text schwer lesbar. </ol> Das Hintergrundbild für diese Webseite ist sehr klein, es hat eine Größe von 150 x 150 Pixel. Deshalb wird<br> es vom Browser sooft wiederholt, bis es die ganze Webseite ausfüllt. <p align="right">Tobias Sonnleitner, 21.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK 7. ÜBUNG: EIN BILD/GRAFIK ALS TRENNLINIE EINFÜGEN a) Kopiere die Webseite (Bildschirmausdruck) Tobias Sonnleitner, 08.04.2017 HTML BILDER UND GRAFIK b) Kopiere den Quelltext und strukturiere ihn <html> <head> <title>bild07</title> </head><basefont face="arial" size="4"> <body background="hgbeige.gif"><h2><font color="red">BILDER ALS TRENNLINIEN</font></h2> Auf vielen Internetseiten werden Grafiken als Trennlinien oder waagrechte Linien verwendet. Sie sind<br> schöner als einfache horizontale Linien und können auf den Inhalt der Webseite abgestimtm werden.<p> <br> ein englischer Rasen als Trennlinie<p> <center><img src="tlrasen.jpg"></center><p> ein Blumenband mit transparentem Hintergrund<p> <center><img src="tlblumentransp.gif"><p> diese Trennlinie besteht aus 5 Bildern, sie wurden verkleinert, aneinandergereiht und zentriert<p> <center><img src="dorsch.jpg" width="70 highth="29"><img src="dorsch.jpg" width="70 highth="29"><img src="dorsch.jpg" width="70 highth="29"><img src="dorsch.jpg" width="70 highth="29"><img src="dorsch.jpg" width="70 highth="29"> <p align="right">Tobias Sonnleitner, 21.10.2008</p> </body> </html> Tobias Sonnleitner, 08.04.2017