GRUNDLAGEN zu HTML Quelltext Darstellung im Browser Befehlsübersicht unter: http://de.selfhtml.org/ http://www.wien4matik.at/ 1
INHALTSVERZEICHNIS 1. Was ist HTML?... 3 2. HTML-TAG... 3 3. Anfangs- und End-TAGs... 3 4. Aufbau einer html-seite im EDITOR:... 3 5. Erste HTML-Seite... 5 6. Absätze erstellen... 6 7. Umbrüche erzwingen... 6 8. Texte formatieren:... 7 9. Schachteln von HTML-TAGs... 9 10. Listen, Aufzählungen... 10 11. Trennlinien und Attribute von TAGs... 11 12. Attribute... 11 13. Links (Hyperlinks) in HTML erstellen... 13 14. Tabellen... 15 15. Grafiken in Homepages integrieren (unbedingt das Copyright beachten!).... 17 16. Formate:... 18 http://www.wien4matik.at/ 2
1. Was ist HTML? HTML ist eine Seitenbeschreibungssprache, mit der dem Browser "gesagt" wird, welche Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.b. fett gedruckt werden, in bestimmten Farben dargestellt werden, welche Farbe der Hintergrund hat, etc. Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass die HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Das zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht. Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen angezeigt werden sollen. Das geschieht über HTML-TAGs. 2. HTML-TAG Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet. Es werden Bereiche innerhalb von seinem Inhalt gekennzeichnet, diese werden in bestimmter Weise angezeigt. Ein Bereich BEGINNT: und ENDET: 3. Anfangs- und End-TAGs Weiterhin gibt es einen Anfangs-TAG ( )und einen End-TAG. Sonst hätten wir nicht die Möglichkeit, mehrere Absätze zu erstellen. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt () 1. Die TAGs sitzen immer zwischen Kleiner- und Größerzeichen <.. > 2. Zwischen den < > befindet sich die Anweisung z.b: html. Dementsprechend sind alle Anweisungen nur Abkürzungen (von englischen Begriffen). 3. Alle HTML-TAGs immer klein schreiben! Dies ist für XHTML und valide Webseiten wichtig. 4. Aufbau einer html-seite im EDITOR: Öffne einen Editor z.b.: (Start - Programme Zubehör Editor) Setzte folgenden Aufbau ein: http://www.wien4matik.at/ 3
Verschiedene Bereiche: <title> </title> Bereich html Hier fängt nun der HTML-Bereich an - den Endtag finden Sie am Ende und diese umfassen den head und den body-bereich. head-bereich Im Head-Bereich sind verschiedene Dinge definiert, die der Besucher nicht sieht (mit Ausnahme von title) und für die Technik und Suchmaschinen da sind. Der wichtigste Eintrag ist der <title>-bereich. Dort wird eingetragen, was in der Internetbrowser-Kopfzeile angezeigt wird. Dieser Eintrag wird auch von Suchmaschinen verwendet. Einfach ausgedrückt: was im Kopf (bei einem Menschen zu mindestens) vorgeht, sieht man nicht, aber der Körper ist sehr wohl sichtbar. body-bereich Alles was hier eingetragen wird, zeigt der Browser an. Wir schreiben alle Eintragungen zwischen und. Alle Eintragungen, die der Browser anzeigen soll, werden im Body-Bereich eintragen. Aus Platzgründen wird bei den folgenden Übungen und Beispielen nicht mehr das komplette Grundgerüst gezeigt! http://www.wien4matik.at/ 4
5. Erste HTML-Seite Der Auftrag lautet nun: In einem Editor innerhalb der body tags den Text genau so eingeben, wie er im folgenden Ausdruck dargestellt ist.: Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste Homepage, die ich versuche zu erstellen! Jens JENSI Anschließend wird die Editor-Datei gespeichert: ACHTUNG als Dateiendung htm oder html verwenden. Beispiel: test01.html Wenn man die Datei doppelt anklickt, dann wird diese im Webbrowser angezeigt. Und wir können sie uns ansehen.die Ausgabe im Browser wird ungefähr wie folgt aussehen: Herzlich willkommen auf meiner ersten HTML-Seite Hier finden Sie meine erste Homepage, die ich versuche zu erstellen! Jens JENSI Alle Enter sind beseitigt und mehrere Leerzeichen werden zu einem Leerzeichen zusammengefasst. Also müssen einige Tags eingebaut werden, damit alles so aussieht, wie man es sich vorstellt.. http://www.wien4matik.at/ 5
6. Absätze erstellen <p> steht für paragraph = Absatz Das Ergebnis ist eine Trennung mit Leerzeile: <p>hier meine erste Website.</p> <p>hallo liebe Freunde!</p> Hier meine erste Webseite. Hallo liebe Freunde! Hinweis: Anfangs-TAG <p> und am Ende der End-TAG </p>. unbedingt einhalten, da es laut XHTML zwingend erforderlich ist. Für einen zukunftssicheren Code immer an den End-TAG einfügen! Dasselbe Ergebnis kann auch ohne den End-TAG erhalten werden, dabei reagiert aber jeder Browser unterschiedlich. Der Internet Explorer zum Beispiel ist sehr fehlertolerant, andere Browser zeigen teilweise bei fehlenden End-TAGs gar nichts mehr an. 7. Umbrüche erzwingen Umbruch erzwingen bedeutet eigentlich: kein Absatz. Sondern nur eine neue Zeile. Dazu wird der TAG <br />verwendet. <p> Hier kommt unser erster Test. <br /> Hallo Welt.</p> Die Ausgabe im Browser sieht wie folgt aus: Hier kommt unser erster Test. Hallo Welt. Alle HTML-TAGs kommen aus dem Englischen. So ist <br /> die Abkürzung für break = Umbruch. Der TAG <br /> ist XHTML konform. Oft werden Sie noch den "Vorgänger" in Form von <br> sehen - funktioniert zwar auch, aber besser ist es, gleich den aktuellen TAG zu verwenden - dann ist man für die Zukunft gerüstet. http://www.wien4matik.at/ 6
8. Texte formatieren: Überschriften Für die Textgliederung und -strukturierung. sind verschiedene Hierarchien (Wichtigkeit) von Überschriften möglich, z.b. Kapitelüberschrift, Unterkapitel, Abschnitte, usw. Es wird der TAG <hx> genutzt. Das h steht für engl. header = Überschrift. Das X wird durch 1 bis 6 ( für die Wichtigkeit) ersetzt. h1 ist die größte und wichtigste h6 die kleinste und somit unwichtigste (aber immer noch wichtiger als normaler Text) <h1> Überschriften-Ebenen 1 </h1> <h2> Überschriften-Ebenen 2 </h2> <h3> Überschriften-Ebenen 3 </h3> <h4> Überschriften-Ebenen 4 </h4> <h5> Überschriften-Ebenen 5 </h5> <h6> Überschriften-Ebenen 6 </h6> <p> normaler Text </p> Nach der Überschrift (End-TAG) erfolgt automatisch ein Umbruch. Die Ausgabe im Browser sieht wie folgt aus: Überschriften-Ebenen 1 Überschriften-Ebenen 2 Überschriften-Ebenen 3 Überschriften-Ebenen 4 Überschriften-Ebenen 5 Überschriften-Ebenen 6 normaler Text http://www.wien4matik.at/ 7
Fett - hervorgehoben Um wichtige Passagen oder Wörter hervorzuheben, können diese fett ausgegeben werden. Dafür gibt es 2 verschiedene Befehle. Einerseits steht dafür der TAG <b> zur Verfügung. Das b steht für das engl. bold = fett. Andererseits haben wir den HTML-TAG <strong> - engl. "überzeugend, kräftig, fest, derb". <p> nun <b>wichtiger</b> Text mit b</p> <p>nun <strong>wichtiger</strong> Text mit strong</p> nun wichtiger Text mit b nun wichtiger Text mit strong Achtung: wenn der End-TAG vergessen wird, ist auch der restliche Text fett geschrieben. kursiv - schräge Sache Um Passagen oder Wörter hervorzuheben, die aber nicht so stark wie bei Fettdruck sein sollten, kann ein Text kursiv (in Windrichtung liegend) dargestellt werden: <p> Dieser Text ist nun in <i>kursiver (schräger)</i> Schrift.</p> Dieser Text ist nun in kursiver (schräger) Schrift. Das i steht für das engl. italic = italienisch. ( i ist ein Andenken an den ersten Schriftsetzer in der Druckerei von Aldus Manutius, der schräge Buchstaben entwickelte, um mehr Buchstaben auf eine Seite zu bekommen und dadurch das erste Taschenbuch herausbringen zu können. Dieser war Italiener und die Druckerei war in Venedig. Das erste Taschenbuch musste nicht in Hosentaschen passen, sondern in Satteltaschen.) unterstrichen - (nicht einsetzen!) NICHT EINSETZEN - weil jeder Surfer denkt, es handele sich bei unterstrichenem Text um einen Link. http://www.wien4matik.at/ 8
Text größer und kleiner Um innerhalb von Text eine Textpassage größer oder kleiner darzustellen, gibt es den TAG <big> für größer und <small> für kleiner. Dabei sollten der entsprechende End-TAG nicht vergessen werden (</big> und </small>. <p> Manchmal ist etwas <big>größer</big> oder <small> kleiner </small> als es erscheint. </p> Manchmal ist etwas größer oder kleiner, als es erscheint. 9. Schachteln von HTML-TAGs TAGs verschachtelt Die TAGs können nun gemischt (verschachtelt) werden. z. B.: einen Text erst fett und dann noch kursiv darstellen. <p> Hier kommt nun <b>fetter und <i>kursiver (schräger)</i></b> Text </p> Hier kommt nun fetter und kursiver (schräger) Text Hinweis: Wie bei Schachteln, die ineinander gestapelt werden, müssen die Tags auch geöffnet und geschlossen werden, <b> <i> Inhalt </i> </b> http://www.wien4matik.at/ 9
10. Listen, Aufzählungen Wir haben unsortierte Aufzählungen <ul> und sortierte Aufzählungen <ol> Dabei steht <ul> für das engl. unsorted list = unsortierte Liste. Dieser TAG hat zur Folge, dass für jedes <li> ein Spiegelstrich in Form einer Kugel gesetzt wird. Dabei steht <li> für engl. list=liste Jeder Auflistungspunkt wird mit <li> eingeleitet und mit </li> bendet. Bitte folgendes eingeben: <ul> <li> erster Listenpunkt </li> <li> zweiter Listenpunkt </li> <li>...</li> <li> x-ter Listenpunkt </li> </ul> erster Listenpunkt zweiter Listenpunkt... x-ter Listenpunkt Art der Nummerierung bestimmen Der TAG <ol> kann durch <ol type=x>. ergänzt werden. Für das X gibt es verschiedene Möglichkeiten. Durch Auswechseln von <ul type=> eine andere Anzeige möglich ist, z. B. mit 1.,2., 3.... oder mit A, B, C,... oder römischen Ziffern type=1 normale Aufzählung (arabische Ziffern) : 1, 2, 3... type=a Aufzählung mit Großbuchstaben: A,B,C,..., Z type=a Aufzählung mit Kleinbuchstaben: a,b,c,..., z type=i Aufzählung mit römischen Ziffern in klein: i,ii,iii,iv,v,... type=i Aufzählung mit römischen Ziffern in groß: I,II,III,IV,V,... Start der Nummerierung festlegen Hier wird über das Attribut start="zahl" der Beginn der Zählung festgelegt. <ol start="5" type="a"> http://www.wien4matik.at/ 10
11. Trennlinien und Attribute von TAGs Trennlinien Trennlinien <hr /> sind an und für sich nichts Besonderes. Diese trennen zwei Abschnitte. Das <hr /> steht für engl. horizont ruler = horizontale Linie. <p> Text eins <hr /> Text zwei </p> Text eins Text zwei 12. Attribute Spannend ist das Prinzip von Attributen. Bisher wurden bei allen HTML-TAGs keine Attribute aufgeführt, obwohl es welche gibt. Wird kein Attribut aufgeführt, wird das Standard-Attribut angenommen, z. B. dass etwas links ausgerichtet ist. Aufbau Attribute Attribute setzent sich aus 2 Teilen zusammen. Im ersten, z.b. "size", wird die Art der Beeinflussung festgelegt Im zweiten dann die Ausprägung, hier 20. Länge eines Elementes Eine Trennlinie kann auch eine Länge haben, genauso wie eine Schrift eine Schriftgröße und jedes Mal ist die Benennung dieselbe. Das Attribut lautet size="x". Bei dem TAG <hr /> sieht das dann wie folgt aus <p> Text eins <hr size="20" /> Text zwei</p> http://www.wien4matik.at/ 11
Anmerkung: Die Attribute wiederholen sich bei verschiedenen TAGs - allerdings sind nicht alle Attribute bei allen TAGs erlaubt. Text eins Text zwei Breite eines Elementes Ein weiteres Attribut ist die Breite width (engl. Breite/Weite). Im folgenden Beispiel sehen Sie die Trennlinie mit einer Breite von 55. Text eins Text zwei Abhängig vom Browserfenster!!! - ganz wichtig für alles weitere: Die fixe Angaben, wie im letzten Beispiel mit 55 Bildpunkten, wird jetzt geändert auf Prozente. Im nächsten Beispiel soll die Linie 55% breit abhängig vom Browserfenster sein. Beim ändern der Fenstergröße des Browsers. wird die Linie automatisch sofort kleiner bzw. größer. <p> Text eins <hr width="55%" /> Text zwei </p> Text eins Text zwei Ausrichtung - rechts, links, mittig Die Position der Elemente kann ausgerichtet werden. Dazu dient das Attribut "align" (engl.: ausrichten) Dabei sind folgende Möglichkeiten vorhanden align="left" align="center" align="right" http://www.wien4matik.at/ 12
<p> Eine Linie verteilt auf einer Seite...</p> <hr width="55" align="left" /> <hr width="55" align="center" /> <hr width="55" align="right" /> 13. Links (Hyperlinks) in HTML erstellen Mehrere Arten von Links innerhalb der Homepage auf andere Seiten im Internet mit E-Mail-Funktion Das Aussehen der Links kann verschieden sein. Entweder als Text, oder als Grafik. Ein Link hat immer die Form von <a href="dateinamen.htm">beschreibung</a> Wichtig die Namensgebung der Dateien zu denen der Link führen soll: 1. keine äöüß oder sonstige Sonderzeichen 2. keine Leerzeichen im Namen, stattdessen ein - (Minus) oder _ (Unterstrich), das Minus ist vorzuziehen 3. als Endung (.htm oder.html) sollte immer bei allen HTML-Dateien einheitlich verwendet werden. Z. B. immer nur.htm oder immer nur.html - entscheiden und dabei bleiben! 4. der Dateinamen wird komplett klein geschrieben 5. den Inhalt in minimalistischer Form beschreiben Hier ein Beispiel mit vier Seiten die untereinander verlinkt werden. Die Namen der Seiten könnten sein: index.html hobbies.html ueber-mich.html linksammlung.html http://www.wien4matik.at/ 13
innerhalb der Homepage Es wird nur der Pfad ab der Startebene der Seite angegeben. Wenn keine Unterverzeichnisse verwendet werden, gibt es auch kein Verzeichnis So sieht der HTML-Code aus: <a href="index.htm"> eine beliebige Umschreibung </a> Datei liegt im Verzeichnis: kurse kurse/index.htm Aber nicht vergessen bei mehreren Seiten: auf jeder Seite den entsprechenden Link auf die nächsten Seiten oder zurück einfügen. externe Links Links auf andere Seiten Bei externen Links muss die komplette URL angegeben werden. Dienstart, Servername und Länderkürzel und die Unterverzeichnisse müssen eingegeben werden. Am sichersten ist es, die Seite auf die ein Link gesetzt wird, im Browser aufrufen und, wenn die Seite erfolgreich angezeigt wird, die URL kopieren und in den HTML-Code übernehmen. <a href=http://www.kidsweb.at/news-zeit.html> Kidswebseite </a> Um die User nicht an die neue Homepage zu verlieren, muss der Link so eingegeben werden, dass er in einem neuen Fenster geöffnet wird: <a href="http://www.wien4matik.at/" target="blank"> Homepage der Wiener Informatikschulen </a> http://www.wien4matik.at/ 14
Aufgabe Erstelle eine Linkliste mit fünf Automarken oder Firmen für deine Webseite, verwende dazu eine nummerierte Liste. 14. Tabellen Woraus besteht ein Tabellenaufbau? Jede Tabelle bestehen aus Reihen und Spalten. Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle an und mit dem entsprechenden END-TAG </table> hört diese auf. Es ist wichtig, beide zu setzen, da bei fehlendem END-TAG der IE die halbfertige Tabelle anzeigt, dagegen andere Browser unter Umständen gar nichts anzeigen. Als nächsten Schritt legen wir eine Zeile mit <tr> an. Das steht für engl. table row = Tabellen Reihe <table> <tr> </tr> </table> Jetzt fehlen noch die Tabellendatenzellen - also der HTML-TAG <td>, für das engl. table data = Tabellen Daten. <table> <tr> <td> </td> </tr> </table> Und jetzt kommt noch der Inhalt (Text) dazu, dann sollte unsere Eingabe folgendermaßen aussehen: <table> <tr> <td> Inhalt 1 </td> </tr> </table> http://www.wien4matik.at/ 15
Inhalt 1 Um es auch wirklich als Tabelle sichtbar zu machen, soll der Rahmen der Tabelle auch angezeigt werden. <table border="1"> <tr> <td> Inhalt 1 </td> </tr> </table> INHALT 1 Wobei: border= 1 die Rahmenbreite angibt. Mehr Spalten werden in Form von <td> hinzugefügt. <table border="1"> <tr> <td> Inhalt 1 </td> <td> Inhalt 2 </td> </tr> </table> INHALT 1 INHALT 2 Das gleiche mit mehr Zeilen - beides kann nach Belieben variiert werden. <table border="1"> <tr> <td> INHALT ZELLE 1 </td> <td> INHALT ZELLE 2 </td> </tr> <tr> <td> INHALT ZELLE 3 </td> <td> INHALT ZELLE 4 </td> </tr> </table> INHALT 1 INHALT 2 INHALT 3 INHALT 4 Ein Tabellenaufbau sollte so aussehen. Wichtig die Einrückungen, um die einzelnen Zellen besser unterscheiden zu können. http://www.wien4matik.at/ 16
15. Grafiken in Homepages integrieren (unbedingt das Copyright beachten!). wie, was, wo, wie groß GIF und JPG sind die Grafikformate, die heute im Internet verwendet werden. Die Grundstruktur des HTML-TAGs dafür lautet: <img src="bildname.jpg" /> (img = engl. image = Bild) <img src="bildname.jpg" /> Für Bilder gibt es weitere Attribute, die aus verschiedenen Gründen sehr wichtig sind. <img src="bildname.jpg" width="474" height="66" border="1"/> width: die Breite des Bildes height: die Höhe des Bildes border: Rahmen, die Zahl gibt die Breite des Rahmens an; 0 - kein Rahmen Der komplette Code sieht also wie folgt aus. Erstellen Sie Ihre Internetseite mit Bild, fahren Sie mit der Maustaste auf das Bild und warten Sie kurz. Jetzt erscheint der Alternativtext als Tooltip. <img src="bildname.jpg" width="474" height="66" border="1"/> Es ist günstig für mehr Übersicht, ein Unterverzeichnis für Bilder anzulegen. Der entsprechende tag sollte dann so aussehen: <img src="bilder/bildname.jpg" width="474" height="66" border="1"/> http://www.wien4matik.at/ 17
16. Formate: Unterschied GIF JPG Anzahl der Farben: 256 16,7 Mio Möglichkeiten zur Animation: Möglichkeiten zur Kompression: Eignung: Ja automatisch kleine Grafiken, Buttons, animierte Grafiken Nein Kompressions-Grad einstellbar Bilder mit vielen Farben (Photos) Die Datengröße eines Bildes soll möglichst gering sein. Je größer (mehr KB oder gar MB), desto länger wird gewartet bis sich das Bild öffnet (Übertragungsgeschwindigkeit im www). Es ist daher günstig mit einem Bildbearbeitungsprogramm die Daten des Bildes zu bearbeiten. Z.B.: für Web-speichern und als jpg speichern. Copyright von Bildern Bilder und Grafiken unterliegen (auch nur Teile davon) einem Copyright (jemand hat die Rechte an diesem Werk). Daher entweder nur eigene Werke verwenden, oder den Copyright-Besitzer fragen, ob er einer Verwendung auf Ihrer Homepage zustimmt. Eine freundliche E-Mailanfrage ist wichtig um rechtlichen Schwierigkeiten vorzubeugen. Freie Bilder findet man unter anderem am Tiroler Bildungsserver: http://tibs.at/ http://bilder.tibs.at/index.php?page_id=6&img=16738 Text zu Bildern positionieren: Der Befehl lautet: align="top bottom middle" innerhalb des IMG-TAGS. align="top" - Text wird an der oberen Bildkante ausgerichtet (top = oben) align="middle" - Text wird mittig zum Bild ausgerichtet (middle = mittig) align="bottom" - Text wird an der unteren Bildkante ausgerichtet (bottom = unten) <p> Bild01 - <img src="bildname.jpg" align="top" height="137" width="175" /> </p> <p> Bild02 - <img src="bildname.jpg" align="middle" height="137" width="175" /> </p> <p> Bild03 - <img src="bildname.jpg" align="bottom" height="137" width="175" /> </p> http://www.wien4matik.at/ 18