Was ist HTML? - Eine HTML-Seite ist eine Textdatei.
Werbung
Was ist HTML? - Eine HTML-Seite ist eine Textdatei. - Durch HTML-Tags kann dem bloßen Text Formatierung und Funktion hinzugefügt werden. Tags umschließen dabei den Inhalt. Eine Überschrift kann man z.B. so definieren: <h1>Ich bin eine Überschrift</h1> Dabei markiert der Tag <h1> den Anfang und der Tag </h1> das Ende der Überschrift - HTML-Tags selbst sind eine Art „Beschreibung“ wie der Inhalt angezeigt werden soll. Sie werden aber im Webbrowser nicht angezeigt. In unserem Beispiel würde ein Browser die Tags selbst (also <h1> und </h>) nicht anzeigen, aber dafür den Text dazwischen als Überschrift, also groß, darstellen. - Der wohl wichtigste HTML-Tag ist der Link. Er funktioniert nach dem gleichen Prinzip, enthällt jedoch noch ein Attribut, das dem Browser zeigt, wohin der Link führen soll: <a href=“http://www.lmu.de“>Link zur LMU-Seite</a> - HTML kann außer Text auch andere Inhalte in die Webseite einfügen: Bilder, Videos, Dateien, ect. - Eine HTML-Seite ist eine reine Textdatei und enthält den Text und die HTML-Tags. Die Inhalte müssen dabei den HTML-Standard und eine Hierarchie einhalten. Die Seite wird mit der Dateiendung „.html“ abgespeichert. - html-Dateien werden von einem Browser „interpretiert“ und angezeigt. Der Browser zeigt den Inhalt und formatiert ihn anhand der HTML-Tags. Webdesign bedeutet, dem Browser zu „sagen“, wo und wie man seine Elemente auf der Seite haben will. Darum wird eine html-Datei zuerst in einem Editor bearbeitet und das eigentliche Ergebnis dann in einem Browser überprüft. Beispiel: Anzeige Im Browser „Was man sieht“ HTML-Code „Was dahinter steckt“ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eine kleine Seite</title> </head> <body> <h1>Ich bin doch nur eine Webseite, was wollt ihr bloß von mir?</h1> <a href="andere_seite.html">Schaut euch mal ne andere Seite an</a> <img src="blume.jpg" alt="Blume" /> </body> </html> Designwerkstatt Webdesign | Wintersemester 2013 / 2014 | Institut für Kunstpädagogik, LMU München | Martin Pflanzer HTML Grundaufbau & Tags Grundaufbau einer HTML-Seite: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Seitentitel</title> </head> <body> Hauptinhalt </body> </html> Einige wichtige HTML-Tags: HTML-Tags bestehen fast immer aus einem öffnenden und einem schließenden Tag. Der Inhalt zwischen den Tags wird entsprechend formatiert. z.B. <h1>Kapitel 1</h1> Der Text „Kapitel 1“ wird als Überschrift dargestellt. Link <a href="pfad">...</a> Ein Link kann absolute oder relative Pfadangabe haben: Absolute Pfade sind nur dann zu gebrauchen, wenn sich die gewünschte Seite oder Datei außerhalb der eigenen Seite befindet. Ein absoluter Pfad ist z.B.: <a href="http://www.webdesign-lmu.de">...</a> Relative Pfade werden benutzt um innerhalb der Seite zu verlinken. Dabei geht der Pfad von der Seite aus, von der er aufgerufen wird. Will man z.B. eine Seite verlinken, die sich im selben Ordner wie die Seite mit dem Link befindet, so genügt die Angabe: <a href="seite2.html">...</a> Befindet sich die Seite aber in einem Über- oder Unterordner (von der Seite mit dem Link aus gesehen), so müssen die Ordner mit angegeben werden: <a href="../andererOrdner/seite2.html">...</a> Dieser Pfad bedeutet, dass zuerst der übergeordnete Ordner aufgerufen wird (durch „..“), dann geht es weiter in den Unterordner mit dem Namen „andererOrdner“, worin sich die gewünschte html-Datei „seite2.html“ befindet. Bild <img src="pfad/bild.jpg"> Bilder bekommen kein schließendes Tag. Bilder sollten für die Webseite speziell in der passenden Größe abgespeichert werden und möglichst wenig Speicherplatz benötigen. Textabsatz <p>...</p> Es können auch Parameter übergeben werden, häufig wird z.B. „text-align“ verwendet um den Text auszurichten: <p align="center">Zentrierter Text</p> Überschrift <h1> <h2> <h3> <h4> ... </h1> </h2> </h3> </h4> Fett <b>...</b> Kursiv <i>...</i> Unterstrichen <u>...</u> Tabelle <table> <tr> <th>...</th> <th>...</th> </tr> </table> Weitere Infos über alle HTML-Tags unter http://de.selfhtml.org/html/ Designwerkstatt Webdesign | Wintersemester 2013 / 2014 | Institut für Kunstpädagogik, LMU München | Martin Pflanzer