docWord Pro - html.lwp - Otto-Brenner
download 
Denúncia Transcrição
Word Pro - html.lwp - Otto-Brenner
Einführung in HTML HTML: HyperText Markup Language ist Seitenbeschreibungssprache oder auch ein Dokumentenformat zur Auszeichnung von Hypertext im World Wide Web. Hypertext erlaubt die Vernetzung von Texten, d.h. beliebige Stellen innerhalb als auch außerhalb eines Dokumentes können über sog. Hyperlinks angewählt werden. HTML-Dateien werden im Browser (Mozilla Firefox, Opera, Konqueror, Internetexplorer...) angezeigt, in dem der so genannte Quelltext interpretiert wird. HTML-Quelltexte sind mit jedem Editor / jeder Textverarbeitung zu erzeugende, lesbare Texte. Sie sollten, falls man in den gängigen Textverarbeitungsprogrammen entwickelt, im Format "unformatierter Text" abgespeichert werden. HTML wurde 1989 von Tim Berners-Lee am CERN (Conseil Européen pour la Recherche Nucléaire) in Genf entwickelt. Das W3C (World Wide Web Consortium) entwickelt HTML weiter und schafft damit einen Standardfür die Erstellung von HTML-Seiten. Wenigstens dieser HTML-Standard sollte in allen modernen Browsern verwirklicht sein, was jedoch leider für CSS Level 2 noch immer nicht der Fall ist. Dieser Standardisierungsbestrebung wirkten und wirken immer mal wieder die Browserhersteller entgegen, indem sie ihr eigenes Süppchen kochen, sprich neue Tags entwickeln, um den geneigten Kunden auf seine Seite zu ziehen. Es bleibt zu hoffen, dass Webdesigner und Nutzer von Browsern nur noch die Produkte nutzen, die den W3C-Standard zu hundert Prozent umsetzen. Soll heißen, dass im Unterricht nur Beispiele behandelt werden, die auch in den von uns testbaren Browsern laufen. Elemente und Tags in HTML Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt zwischen den Tags ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert: <tagname> </tagname> Verschachtelung von Elementen Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Deshalb sprechen Fachleute auch von strukturiertem Markup. -1- Attribute in Tags Attribute sind Erweiterungen von Tags, mit denen man spezielle Eigenschaften der zu formatierenden Objekte festlegen kann. Einleitende und allein stehende Tags können Attribute enthalten. Beispiel: <img src="bild.gif" width="22" height=" 22" alt="ein Bild"> src, width, height, und alt sind zum Beispiel Attribute des img-Tags. Ihnen werden bestimmte Werte zugewiesen. Diese Werte sollten in Anführungszeichen stehen. Tags und Attributnamen sollen mit Kleinbuchstaben geschrieben werden, jedoch wird auch Großschreibung toleriert. Grundgerüst einer HTML-Datei Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: y Dokumenttyp-Angabe (Angabe zur verwendeten HTML-Version) y Header (Kopfdaten. z.B. Angaben zu Titel u.ä.) y Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Beispiel (Ulli Meybohm's HTML-Editor): <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel der Seite</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Makowski"> <meta name="generator" content=" Ulli Meybohms HTML EDITOR"> </head> <body> Hier steht der Inhalt der Seite!!! </body> </html> Erläuterung: doctype html public: W3C: DTD HTML 4.0: EN: <html> </html> Nutzung der öffentlich verfügbare HTML-Version Herausgeber der HTML-Version (WWW-Konsortium) Document Type Definition (DTD) ist "HTML", Sprachversion 4.0 Sprachenkürzel für die Sprache, in der die Tags und die Namen der Attribute definiert sind leitet die HTML-Seite ein bzw. beendet -2- <head> </head> <title> </title> <body> </body> schließt die Kopfdaten ein, werden nicht dargestellt, bilden aber nützliche Zusatzinformationen ermöglicht Darstellen des Seitennamens in der obersten Browserzeile notieren des eigentlichen Inhalts der Datei, der im Anzeigefenster des WWW-Browsers dargestellt werden sol l Formatierung der HTML-Datei Derzeit findet bzgl. des HTML-Standards ein Umbruch statt. Das W3C empfiehlt zur Erstellung eines Designs von HTML-Seiten weitestgehend Cascading Stylesheets (CSS) zu benutzen. Damit werden HTML-Seiten viel übersichtlicher und sind leichter zu warten. D.h. TagAttribute und auch Tags, die zur Formatierung nutzbar sind, werden einfach verschwinden, weil sie keiner mehr nutzt. Da der Prozess der Umstellung sehr schnell erfolgt, gibt es neben einer Seite für HTML gleichzeitig eine für die Grundlagen zur Benutzung von CSS. Farbmodell Hexadezimale Farbcodes: ="#rrggbb" für rot-, grün- blau-Anteil (jeweils von 0..F) Klartextfarbcodes. z.B. die Namen der 16 Grundfarben ="black"|"gray"|"maroon"|"red"|"green"|"lime"| "olive"|"yellow"|"navy"|"blue"|"purple"|"fuchsia"| "teal"|"aqua"|"silver"|"white" Beispiel: Gegeben: Gesucht: Lösung: Dezimalcode durch 16 teilen: ganzzahligen Anteil ist die erste Hexzahl der Lösung: ganzzahligen Anteil hernehmen und mit 16 multiplizieren: Differenz aus Dezimalcode und dieses Produkts ist die zweite Hexzahl der Lösung: also entspricht 249 dezimal F9 hexadezimal Dezimalcode: 249 249 : 16 = 15,5625 15 => F 15 * 16 = 240 249 - 240 = 9 Die Hexadezimalcodes sind den Farbnamen vorzuziehen, um den Browsern Interpretationsmöglichkeiten zu nehmen. -3- Formatierung des HTML-Textes Überschriften: <h1 bis h6>Text</h1 bis h6> Absatz: <p>Text</p> Vorformatierter Text: <pre>Text</pre> hier werden Leerzeichen und Tabulatoren akzeptiert; eignet sich hervorragend zur Darstellung von Programmlistings Block-Element: <span>Bereich</span> (hat selbst keine Eigenschaften; zur Formatierung mehrerer Inlineelemente; Konstrukt für CSS) Block-Element: <div>Bereich</div> (hat selbst keine Eigenschaften; zur Formatierung mehrerer Blockelemente; Konstrukt für CSS) Zeilenumbruch: <br> (Standalonetag) Vorformatierter Text: <pre>Text</pre> Leerzeilen und -zeichen und Tabulatoren werden akzeptiert, Formatierungen, wie Fettdruck oder Blocksatz werden nach wie vor ignoriert; eignet sich hervorragend zur Darstellung von Programmlistings Listen: Aufzählungsliste (unorderd list) <ul> <li>Text</li> <li>Text</li> <ul> Nummerierte Lieste (orderd list) <ol> <li>Text</li> <li>Text</li> <ol> Zeile einer Liste <li>Text</li> -4- Hyperlinks: Hyperlinks haben prinzipiell die Form: <a href="Ziel">Text</a> Mit Hilfe des href-Attributs wird die Stelle angegeben, auf die verwiesen wird. Das kann ein URL oder auch ein Anker innerhalb eines Textes. Text ist die Textstelle, die als Hyperlink fungieren soll. Ziele: Anker: #ankername Anker in der gleichen Datei datei.htm andere Datei ../ordner/datei.htm Datei in anderem Ordner datei.htm#Ankername Anker in der anderer Datei http://... Adresse im WWW file://... absolute lokale Adresse <a name="Ankername">ZielText</a> wird von einem Hyperlink angesprungen ist die Stelle in der Datei, in der ZielText steht Beispiel für die Verknüpfung von Anker und Hyperlink: <a name="anfang"><a href="#ziel1">Ziel1</a></a><br> <a href="#ziel2">Ziel2</a><br> . . . <a name="ziel1"><a href="#anfang">Anfang</a></a><br> . . . <a name="ziel2"><a href="#anfang">Anfang</a></a> -5- Tabellen Tabellen sind eines der wichtigsten Gestaltungsmittel von HTML-Seiten. Gerade deshalb sollte man auf exaktes Design achten, da die Definition von Tabellen mitunter heikel ist und nicht das gewünschte Ergebnis zeitigt. Deshalb ist es für den "Webdesigner" nicht unwichtig, seine Seite auf möglichst vielen Systemen zu testen. Tags zur Tabellendefinition <table></table> schließt die Tabelle ein <tr> Text </tr> schließt eine Tabellenzeile ein <th> Text </th> schließt eine Kopfzelle ein <td> Text </td> schließt eine Tabellenzelle ein Attribute für den table-Tag (Auswahl): border cellpadding cellspacing = "Rahmenbreite in Pixel" = "Abstand zwischen Zellenrand und Zelleninhalt in Pixeln oder Prozent" = "Abstand zwischen den Zellen in Pixeln oder Prozent" Attribute für den th und den td-Tag (Auswahl): colspan rowspan nowrap = "Anzahl der Spalten über die sich die Zelle erstrecken soll" = "Anzahl der Spalten über die sich die Zelle erstrecken soll" verhindert automatischen Zeilenumbruch innerhalb der Zelle Beispiel: <table border="1"> <tr> <th >SPD</th> <th >Grüne</th> <th >CDU/CSU</th> </tr> <tr> <td >38,1%</td> <td >8,8%</td> <td >38,8%</td> </tr> <tr> <td >Schröder</td> <td >Fischer</td> <td >Stoiber</td> </tr> </table> -6- Einbinden von Grafiken erlaubte Grafikformate, die von jedem Browser richtig angezeigt werden: gif Graphics Interchange Format jpg Joint Photographic Expert Group <img> Standalone-Tag; erfordert immer Attribute Attribute zu <img> src alt border width height align align hspace vspace = "Bilddatei" = "alternativer Text" (falls die Bilddatei nicht angezeigt wird) = "Rahmenbreite in Pixel" = "Wert oder Prozentwert" (zur genauen Festlegung der Bildbreite, in Pixel) = "Wert oder Prozentwert" (zur genauen Festlegung der Bildhöhe, in Pixel) = "top"|"middle"|"bottom" (Ausrichtung der Beschriftung der Grafik) = "left"|"center"|"right" (Ausrichtung der Grafik im Fließtext) = "horizontaler Abstand zum Fließtext" = "vertikaler Abstand zum Fließtext in Pixel"Beispiel: Beispiel: <p> <img src="url_01.gif" alt="Urlaub" height="222" width="111" align="bottom"> Unser schauer Urlaub </p> Beachte: Die Bildgröße sollte so angegeben werden, dass keine wesentlichen Verzerrungen gibt. Der Alternativtext soll vergeben werden und ist auch sinnvoll, wenn das Bild angezeigt wird, nämlich als Bildname, wenn keine Bildbeschriftung vorhanden ist. Im Beispiel ist eine Bildbeschriftung eingerichtet (Unser schauer Urlaub), nämlich unten neben dem Bild. Ansonsten gilt wie immer: Ausprobieren schafft mehr Klarheit!!! -7- Frames Frames werden vorwiegend zur Definition bzw. Abgrenzung von Navigationsbereichen und dem eigentlichen Inhalt der Seite genutzt. Vorteilhaft ist, dass der Inhalt des Navigationsframes auf dem Bildschirm fixiert bleibt, obwohl der Infaltsframe weitergesrollt werden kann. Ein Argument gegen Frames ist immer, dass es Browser gibt, die Frames nicht darstellen können. Wohl eher eine Ausrede, denn Opera 6.x oder Internetexplorer 5 laufen unter Windows 95 auf einer 486-er Maschine mit 16 MB erträglich schnell. Problematisch jedoch ist es wirklich, dass eine Suchmaschine mitunter auf eine Inhaltsseite aus einem Frameset verlinkt. Hier kann der Benutzer ohne das vorhandene Navigationsframe mit der Seite nicht so recht viel anfangen. Und so geht es: Man benötigt eine ganz einfache Seite. Stefan Müntz (Selfhtml) empfiehlt folgende Doktypeangabe: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Im Anschluss werden die Frames definiert. Ein Bodytag kommt in den Framedefinitionsdateien nicht vor, da in der Definitionsdatei keine Inhalte vermittelt werden sollen. Frames werden als Frameset definiert. Dabei können die Frames entweder untereinander oder nebeneinander liegen. Unübersichtlicherweise kann man Framsets ineinanderschachteln. Beispiel: <frameset rows="20%,80%"> <frame src="dateiname1.htm" name="framename1"> <frame src="dateiname2.htm" name="framename2"> <noframes> Ihr Browser kann diese Seite leider nicht anzeigen! </noframes> </frameset> Erklärung: Im Frameset werden zwei ROWS (Zeilen) definiert. D.h. die Frames liegen untereinander. Hätte man statt dessen COLS (Spalten) benutzt, würden die Frames nebeneinander liegen. Die Aufteilung der Frames ist hier 20% zu 80%. Es ist genauso möglich, die Framegröße absolut anzugeben. Auch die Benutzung von Jokern (*) ist erlaubt und oft sogar zwingend nötig. Das Attribut "scr" gibt die Datei an, die im jeweiligen Frame dargestellt werden soll. Mit dem "name" -Attribut wird der Name des Framefensters festgelegt. Das ist hilfreich für Verlinkungen von einem Frame in ein anderes. Im Link kann dann als target der Framename des Zielframes angegeben werden. Der noframe-Tag ermöglicht es, dem Surfer zu erklären, warum man unbedingt einen modernen Browser benötigt. -8- Beispiel: <frameset cols="20,*,20"> <frame src="links.htm" name="links"> <frameset rows="20%,80%"> <frame src="oben.htm" name="oben"> <frame src="unten.htm" name="unten"> </frameset> <frame src="rechts.htm" name="rechts"> <noframes> Ihr Browser kann diese Seite leider nicht anzeigen! </noframes> </frameset> Erklärung: Das äußere Frameset besteht aus drei Spalten, von denen das linke und das rechte Frame jeweils 20 Punkte breit ist. Die Größe des mittleren ist variabel. Im mittleren Frame wird ein neues Frameset definiert, welches aus einem oberen und unteren Frame besteht, die sich den zur Verfügung stehenden Platz zur Hälfte teilen. Regeln bei der Texteingabe 1. Benutze möglichst einen HTML-Editor und nutze seine Möglichkeiten zur Strukturierung des Quelltextes! 2. Erstelle eine neuen HTML-Datei möglichst automatisch! 3. Ersetze folgende Zeichen durch die geeigneten Kürzel: ä Ä ö Ö ü Ü ß € < > & " Leerzeichen © ® ä Ä ö Ö ü Ü ß &euro < > & " © ® 4. HTML erkennt die Zeilenumbrüche, Leerzeilen, Tabulatoren und mehrere aufeinanderfolgende Leerzeichen aus der Textverarbeitung nicht. Deshalb nutze sie zur Strukturierung des Quelltextes! 5. Zum Ablachen noch viele weitere Regeln unter: http://www.karzauninkat.com/Goldhtml/goldhtml.htm http://www.karzauninkat.com/Goldhtml/goldhtm2.htm -9- Regeln zur Seitenerstellung 1. Überlege Dir Dein gewünschtes Layout erst einmal auf Papier! 2. Speichere Dein Projekt in einem eigenen Ordner! 3. Lege Dir am besten sofort einige Unterordner an, in denen Du Deine Dateien ordentlich strukturiert abspeichern kannst! 4. Nutze DOS / UNIX-Dateinamen (max 8 Zeichen . max 3 Zeichen; keine Umlaute; nur Ziffern und nur kleine Buchstaben)! 5. Die erste Datei heißt index.htm oder index.html! 6. Strukturiere Deinen Quelltext durch Nutzung von Einrückungen und Zeilenumbrüche (Enter)! 7. Versuche mit möglichst wenigen , gut durchdacht gesetzten Tags auszukommen! Quellen: http://selfhtml.teamone.de/ von Stefan Münz Wenz, C., Hauser, T. (2000): Jetzt lerne ich Dynamic Web-Publishing, Markt+Technik Verlag HTML-Editor Phase 5 von Ulli Meybohm - 10 -
