Fr. Balter Was ist ein „Tag“? Zum Lernen für die Klassenarbeit: Musterlösung: HTML Fragen Informatik Differenzierung 8 HTML Elemente werden durch sogenannte Tags, Befehle markiert. Ein Tag wird in „<“ „>“ geschrieben und die meisten Tags werden mit <Befehl> geöffnet und müssen mit </Befehl> wieder geschlossen werden. Der Inhalt einer Webseite muss im <Body> Teil geschrieben werden. Wo steht das, was von deiner Seite im Browser dargestellt werden soll, im Quelltext? Wie erhalte ich eine Überschrift? Der Tag <h1> erzeugt die größte mögliche Überschrift. Es gibt 6 Überschriften, d.h. <h6> ist die kleinste mögliche Überschrift. Erkläre den Unterschied zwischen dem Titel, Der Titel einer Webseite wird oben in der Leiste des Browsers (z.B. Firefox) dargestellt. Der dem Dateinamen und der Überschrift einer Dateiname ist der vom Programmierer gewählte Name für die Datei (bei uns: HTML Datei). HTML-‐Seite! Die Überschrift einer HTML Seite steht im <Body> Teil und wird mit <h1> bis <h6> eingefügt. Welche Dateikennung kann eine html-‐Seite Eine Webseite kann entweder die Dateiendung .htm oder .html haben. haben? Wie kann ich die Schriftgröße eines Die Schriftgröße kann im Verhältnis zur vorigen Schrift mit <font size=“-‐1“> verkleinert Textabschnittes verkleinern? werden. Analog dazu kann die Schrift mit <font size=“+2“> um 2 Einheiten größer als die vorige Schrift dargestellt werden. Welche Textauszeichnungen kennst du? <b> (bold) für fett, <i> (italics) für kursiv, <u> (underline) für unterstrichen, <align=“left“>, <align=“center“>, <align=“right“> für die Textausrichtung, d.h. der Text wird zentriert, linksbündig oder rechtsbündig dargestellt <font size=“2“> vergibt die Größe, <font color=“#FF0000“> stellt den Text in Rot dar Was ist der Unterschied zwischen <br> und <br> steht für „break“ und veranlasst einen Zeilenumbruch; dieser Tag muss nicht <p> geschlossen werden! <p> (engl. paragraph) beginnt einen neuen Abschnitt, d.h. hier ist mehr Platz zwischen aktueller und voriger Zeile Wie kann man eine horizontale Linie <hr size=“2“ color=“#0000FF“ width=“1000“> erzeugen? Wie kann man ihre Dicke, Farbe <hr> (horizontal rule) fügt eine Querlinie ein, die Höhe/Dicke wird durch „size“ bestimmt, die und Länge festlegen? Farbe durch das Attribut „color“ und die Länge wird mit „width“ angegeben und zwar in der Einheit Pixel. Wo darfst du bei uns Umlaute verwenden, wo Im Dateinamen dürfen keine Sonderzeichen, Umlaute und Leerzeichen gespeichert werden, nicht? im normalen Fließtext auf der Webseite dürfen diese aber benutzt werden. Was macht der Befehl: Dies ist ein interner Link, d.h. ein Link auf eine andere Seite einer Webseite. Die Datei heißt <a href=“../inhalt.html>zum „inhalt.html“ und ist im Dateisystem eine Ebene höher abgespeichert als die Seite, auf der sich Fr. Balter Zum Lernen für die Klassenarbeit: Musterlösung: HTML Fragen Inhaltsverzeichnis</a> Wie setzt man einen Link auf die Seite der Pixelkids? Was ist ein Anker und wie setzt man ihn? Welche Dateiformate sind für Bilder in HTML-‐Seiten geeignet? Das Bild Ente.gif im Unterordner bilder soll mit Rand angezeigt werden. Wie lautet der Befehl? Welche Attribute des img Tags kennst du? Wie erzeugt man eine Bullet-‐Liste? Wie sieht das Grundgerüst einer zentrierten Tabelle aus? Erkläre die Bedeutung der einzelnen Teile des tags: <table bgcolor=“#FFDF00“ cellpadding=“10“ cellsp acing=“0“ bordercolor=“#0000FF“ border=“ 1“> Was ist der Unterschied zwischen <table bgcolor=“#FFDF00“> und <td bgcolor=“#FFDF00“> Welche Farbanteile haben: #00FF00, #FF00FF, #0033CC Informatik Differenzierung 8 der Link befindet. Dies ist ein externer Link und wird mit <a href=“http://www.pixelkids.de“>Zu den Pixelkids</a> realisiert. Ein Anker besteht aus zwei Teilen: 1. Anlegen einer Ankerstelle <a name=“tabelle“>Tabellen</a>, 2. Verweis auf die angelegte Ankerstelle <a href=“#tabelle“>Erfahre mehr über Tabellen</a> Bilder können die Formate .jpg, .jpeg, .gif und .png haben. <img src=“bilder/Ente.gif“ border=“1“></img> Border (Rahmen), width (Breite), height (Höhe), alt (alternativer Text falls das Bild nicht richtig dargestellt wird), align (Ausrichtung des Bilders und Ausrichtung des Beschriftungstextes); width und height werden in Pixel oder in Prozent angegeben Zuerst entscheidet man sich für eine unsortierte <ul> oder sortierte Liste <ol> mit diesem Tag. Dann schreibt man pro Listenpunkt ein <li></li> und schließt die Liste am Ende durch </ul> oder </ol> wieder. <table align=“center“> <tr> <td>1. Zelle 1. Zeile</td><td>2. Zelle 1. Zeile</td></tr> <tr> <td> 1. Zelle 2. Zeile </td><td>2. Zelle 2. Zeile</td></tr> </table> bgcolor ändert die Hintergrundfarbe der gesamten Tabelle, cellpadding bestimmt den Innenabstand einer Zelle, also den Abstand zwischen Zellenrand und Zelleninhalt, cellspacing bestimmt den Abstand der Zellen untereinander, bordercolor setzt die Randfarbe und border die Dicke der Umrandung. table bgcolor setzt die Hintergrundfarbe für die gesamte Tabelle, wohingegen tdbgcolor nur die Hintergrundfarbe für eine Zelle ändert. #00FF00 besteht aus 0% Rot, 100% Grün, 0% Blau und ist somit ein knalliges, helles Grün. #FF00FF besteht aus 100%Rot, 0% Grün und 100%Blau, d.h. ergibt pink und #0033CC besteht aus 0% Rot, wenig Grün und sehr viel Blau, d.h. ergibt ein kräftiges Blau. Bitte legt mir für die Klassenarbeit bis Montag 16.03.2015 unbedingt einen karierten Doppelbogen mit Rand ins Fach, auf dem euer Name, Datum und 2. Informatikarbeit steht! Viel Erfolg!