Kurzeinführung in HTML (Grundlage: SelfHTML: http://de.selfhtml.org/) Autor: Jan-Willem Waterböhr (webmaster-geschichte@uni-bielefeld.de) Stand: 23.12.2011 Inhaltsverzeichnis Kurzeinführung in HTML...1 Inhaltsverzeichnis...1 Einführung...2 Wo kann ich dokumentweite Einstellungen ändern?...2 Grundgerüst HTML...3 Erste Elemente...4 Blockelemente (<div>, <span>)...5 Absätze und Zeilenumbrüche (<br />, <p>)...5 Weitere Elemente...6 Links (<a href= >)...6 Listen <ul>, <ol>...7 Bilder <img>...7 Tabellen <table>...8 Ergänzungen...8 Pfadangaben...8 1
Einführung Die folgende Hilfe für die ersten Schritte in HTML erhebt keinen Anspruch auf Vollständigkeit. Es soll denjenigen, die bisher keine oder nur wenig Erfahrung mit HTML haben, einen einfachen und kurzen Einstieg bieten, bevor das deutlich umfassendere SELFHTML (http://de.selfhtml.org/) konsultiert werden muss. Über die Sinnhaftigkeit einer solchen Kurzeinführung lässt sich sicher berechtigt streiten. Der Vorteil liegt in dem sehr übersichtlichen und kompakten Informationsangebot über die wesentlichen Elemente in HTML, die für die Betreuung der wwwhomes-dozenten-homepages notwendig sein werden. Nicht abgedeckt wird die Beziehung von HTML und XML sowie jedwede XML-Theorie oder XML- Elemente. Ebenso soll keine Einführung in CSS gegeben werden, es wird nur auf einige Elemente und Grundzüge hingewiesen. Einige Bemerkungen und zentrale Begriffe vorweg: Dozenten-Hompages : Bezeichnet die HTML-Vorlagen, die von den Webmastern der Geschichtswissenschaft an der Uni Bielefeld für Mitarbeiter, Dozenten, Professoren etc, zur Verfügung gestellt werden. Tag : Als Tag werden die Sprachelemente in HTML bezeichnet, die vom Browser interpretiert werden. Da es sich bei HTML um eine Markup-Sprache handelt, werden die Tags, sobald sie syntaktisch fehlerfrei notiert wurden, im Browser nicht mehr angezeigt. Die Tags in HTML werden in < und > angegeben. Ein Tag besteht in der Regel aus einen öffnendem ( <a> ) und einem schließendem ( </a> ) Element. Wenige Ausnahmen sind zum Beispiel das <img /> und <br /> Tag. Sie werden syntaktisch korrekt mit /> geschlossen. Attribut : Beschreibt eine Eigenschaft eines Tags in HTML, welches i.d.r. optional anzugeben ist. Allerdings macht beispielsweise das <img>-tag ohne das Attribut src keinen Sinn. <img src= http://www.google.de/bild1.jpg /> Wo kann ich dokumentweite Einstellungen ändern? Schrift (Größe, Typ, Ausstattung) In den Vorlagen der Dozenten-Homepages werden Schriftgröße, Schrifttyp und Schriftausstattung (fett/kursiv) außerhalb der HTML-Datei via CSS (cascading style sheets) festgelegt. Dies dient der Übersichtlichkeit und der Trennung von Daten und Styling. Entsprechende Angaben können in und mit der HTML-Datei verknüpften.css Datei geändert und angepasst werden (siehe Grundgerüst HTML ). Schriftgröße: Schrift-Typ: Schrift-Ausstattung: font-size: ANGABE; font-family: ANGABE; kursiv: font-style: italic; fett: font-weight: bold; unterstrichen: text-decoration: underline; Schriftgestaltung in CSS: http://de.selfhtml.org/css/eigenschaften/schrift.htm Überschriften Überschriften in HTML folgen, wie aus Word bekannt sein dürfte, einer Ebenenhierarchie; Hier von 1 5. Sie werden wie folgt gekennzeichnet: 2
<h1>überschrift 1. Ebene</h1> oder <h2>überschrift 2. Ebene</h2> Überschriften in HTML: http://de.selfhtml.org/html/text/ueberschriften.htm Einige der fünf Ebenen finden sich auch auf den Dozenten-Homepages wieder, allerdings in einer anders formatierten Form, als es die HTML-Interpreter (z.b. Firefox oder Internet Explorer) als Standard mitbringen. Auch diese geänderten Angaben finden sich in der HTML-Datei verlinkten.css Datei wieder. Hier wie folgt notiert: h1{ } h2{ } Auch diese Angaben können nach Belieben geändert und/oder angepasst werden. Grundgerüst HTML Das HTML-Grundgerüst besteht aus nur drei Elementen: Die Dokumentendeklaration, den Dokumentenkopf head und den Dokumentenkörper body. Die letzteren beiden sind von dem HTML- Wurzel-Tag <html> </html> umgeben. Die Dokumentendeklaration ist in der Regel optional, aber dennoch empfehlenswert, damit das HTML- Dokument dem W3-Standard entspricht und so Fehler in der Interpretation vermieden werden können. Die allgemeine Deklaration sieht folgendermaßen aus: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> Zur Dokumentendeklaration: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp Das zweite Element besteht aus den Kopfdaten. Es können Titel der Seite und weitere Meta-Daten mittels verschiedener Tags angegeben werden. Alle diese Angaben sind optional, es empfiehlt sich häufig dennoch zumindest den Titel ( <titel></titel> ) anzugeben. Die Kopfdaten können so aussehen: <head> <title>meine erste Homepage</title> <meta name="author" content="webmaster-geschichte"> <meta name="keywords" content="html, Meta-Informationen, HTML-Einführung, HTTP-Protokoll"> </head> In den Kopfdaten werden auch Scripte (JavaScript, PHP, Perl etc.) und Styles oder deren ausgelagerten Dateien angegeben. Dazu: http://de.selfhtml.org/html/kopfdaten/index.htm Da in den Vorlagen für die Dozenten-Homepages ausschließlich ausgelagerte Script- und Style- Dateien verwendet werden, soll die kurze Deklaration hier genügen: <link rel="stylesheet" type="text/css" href="formate.css"> 3
Diese Angabe verlinkt in dem HTML-Dokument eine CSS-Datei namens formate.css, die sich im selben Verzeichnis befindet, wie die zugehörige HTML-Datei. Sollte sich die format.css Datei in einem anderen Verzeichnis befinden, musst das href -Attribut angepasst werden (dazu mehr in Pfadangaben ). Ähnlich sieht das Einbinden von Scriptdateien aus, hier beispielhaft für eine JavaScript-Datei: <script language="javascript" src="beispielscripte.js"> Das <script>-tag verweist auf eine Scriptdatei namens beispielscripte.js (JavaScript), die wieder im selben Verzeichnis wie die HTML-Datei liegt. Der Pfad zur Datei wird diesmal mit dem Attribut src angegeben. Das Einbinden der Scripte oder Stylesheets geschieht ebenfalls, wie die Angabe der Metadaten oder des Titels zwischen den head-tags. Die Kopfdaten werden, bis auf den Titel, der in der obersten Leiste des Browsers angezeigt wird, vom Browser nicht angezeigt. Eine vollständige Kopf-Deklaration sieht folgendermaßen aus: <head> <title>meine erste Homepage</title> <meta name="author" content="webmaster-geschichte"> <meta name="keywords" content="html, Meta-Informationen, HTML-Einführung, HTTP-Protokoll"> <link rel="stylesheet" type="text/css" href="formate.css"> </head> Das dritte und letzte Element ist der Dokumentenkörper, der mit den Tags <body></body> umschlossen wird. Hier werden die eigentlichen Inhalte der HTML-Seite angegeben, die später auch vom Browser interpretiert und angezeigt werden. Die wesentlichen Elemente zur Textstrukturierung in HTML werden in den folgenden Kapiteln vorgestellt. Hier eine vollständige, vorläufige und komplette Angabe eines HTML-Grundgerüsts: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>meine erste Homepage</title> <meta name="author" content="webmaster-geschichte"> <meta name="keywords" content="html, Meta-Informationen, HTML-Einführung, HTTP-Protokoll"> <link rel="stylesheet" type="text/css" href="formate.css"> </head> <body> Hallo Welt </body> </html> Zum Grundgerüst einer HTML-Datei: http://de.selfhtml.org/html/allgemein/grundgeruest.htm Erste Elemente Das Beispiel Hallo Welt zeigt nur den einfachen Schriftzug an, ohne Elemente der Textstrukturierung. Im Folgenden soll an dessen Stelle ein kurzer Auszug aus dem Lorem Ipsum als Fließtext beispielhaft sei, welche Möglichkeiten HTML zur Textstrukturierung ermöglicht. Die folgenden Beispiele verzichten 4
auf die erneute Anführung der Dokumenten- und Kopfdaten-Deklaration. Zum Testen können sie zwischen den <body></body>-tags eingefügt werden. Zum weiteren Verständnis ist hinzuzufügen, dass zwischen die im Folgenden vorgestellten Elemente weiterer HTML-Code interpretierbar ist. D.h., dass es zwischen der Deklaration eines <div></div>- Elements möglich ist, weiteren HTML-Code zu notieren. <div> Lorem ipsum dolor sit amet, <div>consetetur sadipscing elitr, sed diam </div> nonumy eirmod tempor invidunt ut labore et <br /> dolore magna aliquyam <a href= http://www.google.de >erat</a>, sed diam voluptua. </div> Selbiges gilt für Tabellen und Listen. Blockelemente (<div>, <span>) Die Blockelemente, hier nur zwei angeführt, generierten einen Block daher der Name in dem sich zum Beispiel Texte oder Bilder befinden können. Bei den Dozenten-Homepages dienen sie vor allem der Strukturierung einzelner Elemente und Bereiche wie der Navigation, des Hauptcontents, des Profilbildes und anderer Elemente, die auf der Seite sichtbar sind. Mittels CSS werden sie formatiert (bekommen eine Größe und eine Position im HTML-Dokument). Dies geschieht über das id -Attribut, welches dem Blockelement (meist <div>) eine eindeutige Styledefinition zuweist. In der dem HTML-Dkoument zugehörige CSS-Datei befindet sich dann ein gleichnamiger Eintrag mit Styledefinitionen (Bsp: <div id= navigation ></div> - die CSS-Datei enthält dann einen Eintrag navigation ). Kein zweites <div> oder ein anderes Element im HTML-Dokument kann diese id erhalten. Der Unterschied zwischen <div> und <span> liegt darin, dass das <div>-tag nach dem schließenden Tag einen Zeilenumbruch generiert. Zu den Blockelementen: http://de.selfhtml.org/html/text/bereiche.htm#block_zentriert Absätze und Zeilenumbrüche (<br />, <p>) Zeilenumbrüche können in HTML verschieden generiert werden. Das <p>-tag ist für einen einfachen Zeilenumbruch nicht geeignet. Vielmehr generiert es einen Absatz und nach dem </p> wird der Zeilenabstand zum nächsten Absatz leicht vergrößert, als beim <br />-Tag oder einem automatischen Zeilenumbruch. <p> </p> <p> </p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat... 5
Das <br />-Tag hingegen erzwingt einen fest definierten klassischen Zeilenumbruch. Es ist eines der wenigen Tags, die nicht geschlossen werden müssen. <p> </p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam<br /> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat... Zu den Zeilenumbrüchen: http://de.selfhtml.org/html/text/absaetze.htm und http://de.selfhtml.org/html/text/zeilenumbruch.htm Weitere Elemente Nach den ersten Grundlagen folgen nun weitere, wichtige Sprachelemente in HTML. Links (<a href= >) Das womöglich zentralste und wichtigste Element in HTML ist der Link. Man unterscheidet zwischen internen (Referenz auf Elemente innerhalb derselben HTML-Datei) und externen (Referenz auf eine andere HTML-Datei) Links. Die Syntax ist dieselbe, nur die Angabe des Ziels in dem href -Attribut ist unterschiedlich. Für Links wird das <a>-tag (anchor = Anker) verwendet. An sich ist der Anker nur eine Markierung für den definierten Text. Erst durch die Angabe eines href -Attribut (hyper-reference = Verweis) wird der Anker zum Link. Dabei ist das href -Attribut die Adresse/das Ziel, auf die beim Klicken verwiesen wird. <a href= http://www.google.de >anklickbarer Text</a> Wenn im Browser anklickbarer Text angeklickt wird, wird man im selben Fenster auf http://google.de verwiesen. Durch das Einfügen des Attributs target= _blank wird der Link in einem neuen Fenster/Tab geöffnet. Für Projekt interne Links wird einfach das href-attribut wie folgt geändert: <a href= #tabelle1 >anklickbarer Text</a> <div id= tabelle1 >Test-Text</div> Dabei wird auf ein Element mit der ID (id-attribut) tabelle1 verwiesen. Das #-Zeichen deutet dem Browser an, dass sich das Element in derselben HTML-Datei befindet. Email-Adressen verlinken Das <a>-tag wird auch für Email-Adressen verwendet: <a href= mailto:mmustermann@uni-bielefeld.de >user@host.de</a> Dem href -Attribut wird zunächst gesagt, dass es sich um eine Email Adresse handelt (mailto:), dann wird die Email Adresse angegeben. Zwischen den <a> </a>-tags kann ein beliebiger Schriftzug stehen. Verweise in HTML: http://de.selfhtml.org/html/verweise/index.htm 6
Listen <ul>, <ol> Listen sind ein belebtes Element für Aufzählungen. Der Unterschied zwischen der <ol> (ordered list) und der <ul> (unordered list) sind die Aufzählungszeichen. Die <ol> zeigt ihre Elemente durchnummeriert, die <ul> mit verschiedenen Spiegelstrichen/Bullets an. Die Syntax der beiden Listen ist gleich, nur das Schlüsseltag unterscheidet sich. Demnach gilt das folgende Beispiel ebenso für die <ol>: <ul> </ul> <li>listen-element 1</li> <li>listen-element 2</li> <li>listen-element 3</li> <li>listen-element 4</li> <ul></ul> definiert den Bereich der Liste, in dem meist nur <li>-elemente (list item) akzeptiert werden. Zwischen <li>und</li> können aber wieder sämtliche HTML-Sprachelemente verwendet werden (Bilder, Absätze, Tabellen etc.). Eines der wichtigen Attribute für für das <ul>- bzw. das <ol>-tag ist das type -Attribut, welches die numerische bzw. die Darstellung der Spiegelstriche bestimmt. Für die <ul> gibt es die z.b. Standard- Möglichkeit disc (default), square oder circle. (Dazu http://de.selfhtml.org/html/text/listen.htm#html_eigenschaften ) Weitere Darstellungsmöglichkeiten ergeben sich nur mit CSS: http://de.selfhtml.org/css/eigenschaften/listen.htm Zu Listen in HTML: http://de.selfhtml.org/html/text/listen.htm Bilder <img> Das <img>-tag zum Einbinden von Bildern ist eines der weiteren seltenen Tags, die nicht mit einem schließenden Tag geschlossen werden müssen. Das Tag baut sich wie folgt auf: <img src=./beispiel.jpg name= bild1 alt= Hier sollte ein Bild dein align= right height= 250px width= 300px /> Das src -Attribut bezeichnet den Pfad, also die Quelle, zum Bild (mehr dazu in Pfadangabe ). Alle anderen Angaben sind optional. Dabei definiert name einen Bezeichner für das Bild, alt (alternative) einen Alternativ-Text, der angezeigt werden soll, falls das Bild selbst nicht angezeigt werden kann und align die Position des Bildes in Relation zum Text (http://de.selfhtml.org/html/grafiken/ausrichten.htm#zum_text ). Die Angaben width und height zwingen den Browser das Bild in der entsprechend angegebenen Größe anzuzeigen, unabhängig von der Originalgröße des Bildes. Fehlen die Angaben, wird das Bild in seiner eigenen Größe angezeigt. Zu Bildern in HTML: http://de.selfhtml.org/html/grafiken/index.htm 7
Tabellen <table> Das letzte hier interessante HTML-Sprachelement ist die Tabelle. Sie ist in der Organisation etwas komplexer, aber einmal eine richtige Vorlage gesehen, erklärt sich der Rest von selbst: Code: <table> </table> <tr> </tr> <tr> </tr> <td>feld 1.1</td> <td>feld 2.1</td> <td>feld 3.1</td> <td>feld 1.2</td> <td>feld 2.2</td> <td></td> Ergebnis: Feld 1.1 Feld 1.2 Feld 2.1 Feld 2.2 Feld 3.1 Das Schlüssel-Tag <table> definiert den Bereich der Tabelle. Zwischen <table> und </table> wie bei <ul></ul> kein normaler Text außerhalb der <tr> und <td> Text fehlerfrei angezeigt. <tr></tr> (tablerow) bezeichnet dabei die Teile einer Tabelle. Die <tr> kann dabei mehrere <td> (Tabellenfelder) enthalten. Die Anzahl der <tr> oder der in den <tr> enthaltenen <td> müssen nicht explizit definiert werden. Wenn ein Feld/eine Zeile benötigt wird, kann sie einfach eingefügt werden. Wenn, wie im Beispiel, in der ersten Zeile drei Tabellenfelder benötigt werden, in der zweiten Zeile jedoch nur zwei, muss in der zweiten Zeile ein leeres Tabellenfeld noch definiert werden. Tabellen in HTML: http://de.selfhtml.org/html/tabellen/index.htm Ergänzungen Pfadangaben In HTML werden zwei Arten von Pfadangaben unterschieden, zum Beispiel im src -Attribut des <img>- Tags oder im href -Attribut des <a>-tags: relative und absolute Pfadangaben. Relative Pfadangaben haben als Ausgangspunkt die HTML-Datei. Von ihr ausgehend (relativ) wird mit der Pfadangabe eine Datei angesprochen. <a href=./test.html >Text</a> Der Link verlinkt eine Datei namens test.html, die sich im selben Verzeichnis befindet, wie die HTML- Datei. Dies wird durch das./ gekennzeichnet; die Angabe ist in der Regel optional, sie ist aber dennoch empfehlenswert. <a href=../test2.html >Text</a> Dieser Link verweist auf die test2.html, die sich ein Verzeichnis über der HTML-Datei befindet. Dies wird durch../ gekennzeichnet. Diese Angabe ist nicht optional. Merhfachangaben von../ ist möglich. <a href=./verzeichnis2/test3.html >Text</a> Dieser Link verweist auf die Datei test3.html in dem Unterverzeichnis Verzeichnis2 relativ zur HTML-Datei. 8
Die absolute Pfadangabe beinhaltet den kompletten Pfad einer Datei. Andere Internetadressen können ausschließlich als absolute Pfadangaben angegeben werden. <a href= http://www.uni-bielefeld.de/geschichte/index.html >Text</a> <ahref= http://wwwhomes.uni-bielefeld.de/mmustermann/dokument1.pdf >Text</a> Wichtig dabei ist die komplette Angabe der Adresse, sowie das verwendete Protokoll (in diesem Fall http (hyper text transfer protocol), welches das übliche ist). Pfadangaben in HTML: http://de.selfhtml.org/html/allgemein/referenzieren.htm 9