Download
1 / 41
410 likes | 521 Views
Html Einführung. Html wurde Anfang der 90er Jahre von Tim Berners Lee im Kernforschungszentrum CERN in Genf entwickelt. Html bedeutet H per t ext M arkup L anguage.
E N D
Html Einführung • Html wurde Anfang der 90er Jahre von Tim Berners Lee im Kernforschungszentrum CERN in Genf entwickelt. • Html bedeutet Hpertext Markup Language. • Wie der Name andeutet, bestand der ursprüngliche Sinn darin, mittels Hyperlinks wissenschaftliche Dokumente auf dem gleichen oder unterschiedlichen Servern zu verknüpfen.
Html Einführung • html ist eine reine Auszeichnungssprache, d.h. Tags bestimmen die Darstellung im Browser. • Ein html Dokument beginnt mit einem einleitenden Tag <html> und schliesst mit einem abschliessenden Tag </html>. • In sich besteht ein html Dokument aus einem “head“ und einem “body“.
Html Einführung • Befehle oder auch ein “head“ oder “body“ stehen in sogenannten Tags, dies sind spitze Klammern (z.B. <head>) • Im “head“ stehen Metainformationen, wie z.B. Verfasser, Thema und Titel. • Die Informationen im “head” dienen auch den Suchmaschinen zum Auslesen von Informationen über die entsprechende Seite.
Html Einführung • Die Informationen im “body” betreffen die eigentliche Darstellung in einem Browser. • Die meisten Tags müssen wieder mit einem “/” geschlossen werden (z.B. </head>) • Im Beispiel auf der nächsten Seite sehen Sie links ein sehr einfaches Dokument, in dem eine Überschrift erster Ordnung definiert wird, die auf der rechten Seite im Browser dargestellt ist.
Html Einführung • Als Bearbeitungstool für html • kann jeder Texteditor • verwendet werden. • Hier ist Editpad abgebildet, • welches frei im Netz erhältlich • ist.
html Einführung • Jeder Browser kennt sechs unterschiedlich große Überschriften (<h1> bis <h6>). • Wichtig! Browser kennen weder Umlaute, noch das scharfe “s”. Diese werden wie folgt dargestellt: z.B. Übernächtigt in html: Übernächtigt z.B. daß in html: daß • Die Überschriften werden standardmäßig linksbündig dargestellt. Es ist aber auch
Html Einführung • eine Darstellung in der Bildmitte oder • rechts möglich. • Dies sieht dann folgendermaßen aus: • <h1 align=center>Überschrift 1.Ordnung</h1> • <h3 align=right >Überschrift 3.Ordnung</h3> • Ein neuer Absatz wird mit dem Tag <p> • eingeleitet (SGML konform). • <p>erster Absatz</p> • <p>zweiter Absatz</p> • Absätze können ebenfalls wie oben • ausgerichtet werden:
Html Einführung <p align=center>erster Absatz</p> <p align=right>zweiter Absatz</p> • Eine neue Zeile wird mit dem Tag <br> eingeleitet. erste Zeile <br> zweite Zeile • Ein Satz oder Bild kann mit dem Tag <center> in der Bildmitte angeordnet werden. <center>Bild</center>
Html Einführung Es soll im folgenden das jeweils gelernte am Beispiel eines virtuellen Autohauses für die Entwicklung eines Webauftritts benutzt werden: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> </head> <body> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <center>Bild</center> </body> </html>
Html Einführung • Im “head” können Angaben zum Style gemacht • werden. Dies sieht dann z.B. so aus: • <style type="text/css"> • <!-- h3 {font-family:Arial; • font-size:38pt; color:red; font-style:italic}//--> • </style> • Diese Angaben bestimmen die Schriftart • (Arial usw.), die Schriftgröße, die Schriftfarbe und • den Schriftstil (kursiv, usw.) der Überschrift dritter • Ordnung in der aktuellen Seite. Die Zeichen
Html Einführung • <!-- und //--> bewirken, daß Browser die keine • style-sheets kennen diese nicht als darzustellenden Text interpretieren. • Diese style-sheet Informationen können auch in einer eigenen Datei abgespeichert werden, auf die sich dann alle Seiten eines Webauftritts beziehen. Darauf wird später noch eingegangen.
Html Einführung Style-sheets einfügen: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:red; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <center>Bild</center> </body> </html>
Html Einführung • Bilder werden wie folgt in eine Seite einbezogen: • <img src=“images/bild1.jpeg” alt=Bildchen> • Der image Tag muß nicht geschlossen werden • und “images/Bild1.gif” besagt, daß Bild1.gif sich • im Unterordner “images” befindet. Die Angabe • des Bildtyps (gif, jpeg, usw.) ist unbedingt • notwendig. In der Ergänzung “alt=“ steht ein Text, • der statt des Bildes erscheint, wenn dieses nicht • dargestellt werden kann.
Html Einführung Einfügen eines Bildes: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <center><img src=“images/Porsche_959.jpg” alt=Porsche></center> </body> </html>
Html Einführung • Das Erscheinungsbild eines Webauftritts kann durch passend gewählte Hintergrundfarben oder Hintergrundbilder (Wallpapers) aufgewertet werden. • Die Angaben für Hintergrundfarben erfolgen im einleitenden “Body“-Tag: <body bgcolor=#0000ff> bzw. <body bgcolor=blue> Die Farbe kann Hexadezimal oder durch direkte Angabe definiert werden. Dies gilt übrigens auch für die weiter oben erwähnte Schriftfarbe. Die Hexadezimalangaben mit Muster können z.B unter folgendem Link nachgeschlagen werden, der sich ohnehin auch als weitere Lektüre anbietet: http://www.teamone.de/selfhtml/
Html Einführung Einführen einer Hintergrundfarbe: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body bgcolor=#0000ff> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <center><img src=“images/Porsche_959.jpg” alt=Porsche></center> </body> </html>
Html Einführung • Bei einer Wallpaper wird ein .gif oder .jpeg über den gesamten Desktop hinweg wiederholt. Allerdings ist nicht jedes Bild dafür geeignet. Am besten verwendet man ein kleines oder abstraktes Bild. Auch beim Wallpaper erfolgt die Angabe im einleitenden “Body“-Tag: <body background=”images/wall.gif">
Html Einführung Einfügen einer Wallpaper: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body background="images/wall.gif"> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <center><img src=“images/Porsche_959.jpg” alt=Porsche></center> </body> </html>
Html Einführung • Zur besseren Textgestaltung können Trennlinien zwischen Textabschnitte gesetzt werden (mittels <hr>). • Es können verschiedene Eigenschaften dieser Trennlinien beeinflusst werden, so z.B. die Ausrichtung, Breite (width) , Dicke (size) und ob die Trennlinie mit oder ohne einen Schatten zur Unterstützung des räumlichen Effekts (<hr noshade>) dargestellt werden soll. • Im folgenden Beispiel hat die Trennlinie eine Breite von 60% des Bildschirms und eine Dicke von 5 Pixeln.
Html Einführung Einfügen von Trennlinien: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body background="images/wall.gif"> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <hr width=60% align=center size=5> <center><img src="images/Porsche_959.jpg" alt=Porsche></center> </body> </html>
Html Einführung • Das wohl bedeutendste Element, das html mitbringt, ist • das Linking. Mittels eines Links kann man zwischen • unterschiedlichen Dokumenten “hin- und herspringen”. • Links werden aber auch zur Navigation innerhalb eines • Webauftritts benutzt. • Zwischen den Tags steht das, was später den Link • repräsentiert (Hier wird der Cursor zur Hand). • Link zu einer anderen Domäne: • <a href=“http://www.porsche.com”>Porsche Homepage</a> • Link zur Navigation: • <a href=“neuheiten.html”>Zum Diablo Roadster und anderen • Neuheiten</a>
Html Einführung Einfügen von Links: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <style type="text/css"> <!-- h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:red; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial}//--> </style> </head> <body background="images/wall.gif"> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Ihr Partner für Supersportwagen</h3> <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> <hr width=60% align=center size=5> <center><img src="images/Porsche_959.jpg" alt=Porsche></center> <center><a href="http://www.porsche.com">Porsche Homepage</a></center> <br> <br> <center><h2><a href="neuheiten.html">Zum Diablo Roadster und anderen Neuheiten</a></center> </body> </html>
Html Einführung • Wie im vorderen Textteil angesprochen, bietet html mittels style-sheets in einer eigenen Datei die Möglichkeit, für einen gesamten Webauftritt einheitliche Grafikmerkmale, wie z.B. Schriftfarbe, Schriftart, Hintergrund, usw. zentral zu bestimmen. • Dies hat z.B. den Vorteil, daß Änderungen zentral vorgenommen werden können und die html Dateien schlank bleiben. • Der Tag mit dem Verweis auf ein style-sheet sieht so aus: <link rel=stylesheet type="text/css" href=”mystyle.css">
Html Einführung • Dieser Tag steht innerhalb des “head“, und verweist in diesem Fall auf eine Datei names “mystyle.css“. • Der Dateityp “.css“ ist zwingend! • In diesem Beispiel werden z.B. die Größen der Überschriften und das “wallpaper“ festgelegt. • Das style sheet sieht wie folgt aus (Mehr befindet sich nicht in der “mystyle.css“ Datei!): h1 {font-size:38pt; color:#ff0000; font-style:italic} h2 {font-family:Arial; font-size:24pt; color:#ff0000; font-style:aerial} h3 {font-size:18pt; color:red; font-style:aerial} body { background-image:url(images/wall.gif); background-repeat:repeat; }
Html Einführung • Die html Datei: • <html> • <head> • <META NAME="Author" CONTENT="Hans Fleissig"> • <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> • <TITLE>Hansis Sportwagen</TITLE> • <link rel=stylesheet type="text/css" href="mystyle.css"> • </head> • <body> • <h1 align=center>Hansis Autohaus</h1> • <h3 align=center>Ihr Partner für Supersportwagen</h3> • <p align=center>Unser Haus führt eine Selektion hochkarätiger Sportwagen, die Ihnen den Atem rauben wird.</p> • <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, Lamborghini, Ferrari und BMW vorrätig</p> • <hr width=60% align=center size=5> • <center><img src="images/Porsche_959.jpg" alt=Porsche></center> • <center><a href="http://www.porsche.com">Porsche Homepage</a></center> • <br> • <br> • <center><a href="neuheiten.html"><h2>Zum Diablo Roadster und anderen Neuheiten</h2></a></center> • </body> • </html> • Die Festlegung des Hintergrundbildes befindet sich nun auch nicht mehr in der html Datei! • Die Darstellung im Browser entspricht exakt der vorhergehenden, weshalb auf einen Screenshot verzichtet wird.
Html Einführung • Um die Übersichtlichkeit zu verbessern und die • Navigation sinnvoll anzuordnen, kann das Browserfenster in verschiedene Segmente (Frames) aufgeteilt werden, die unterschiedliche Inhalte präsentieren. • Üblicherweise wird in einem kleinen Frame eine Navigationsleiste angeordnet und in einem großen Frame die jeweils angesteuerte Seite. • Zu diesem Zweck wird ein Frameset definiert, das wir in unserem Beispiel in die Datei “index.html” schreiben, damit es als erstes vom Browser geöffnet wird.
Html Einführung Diese Frameset sieht wie folgt aus: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> </head> <frameset cols="280,*"> <frame src="navi.html" Name="Frame1"> <frame src="home.html" Name="Frame2"> </frameset> <body> <noframes> <h1 align=left>Bitte einen aktuelleren Browser benutzen.</h1> </noframes> </body> </html> • Die Angaben im Frameset-Tag geben die • Aufteilung des Bildschirms an. In diesem • Beispiel wird der Bildschirm vertikal (cols) in • zwei Segmente unterteilt. Davon hat das • erste eine Breite von 280 Pixeln und das • zweite nimmt den Rest ein, was mittels des • Sterns definiert wird. Es ist alternativ auch • eine prozentuale Angabe möglich. • Eine horizontale Segmentierung wird mit • “rows” erreicht (z.B. <frameset rows=”30%, • 70%">). • Der erste der beiden frame src -Tags gibt nun an, daß im ersten (linken) Segment die Datei “navi.html” geöffnet wird und eben dieses Segment den Namen “Frame1” hat. Im zweiten (rechten) Segment wird die Datei “home.html” geöffnet und eben dieses Segment heißt “Frame2”. • In den noframes-Tags stehen Informationen die Benutzer angezeigt bekommen, die einen alten, nicht Frames tauglichen Browser benutzen, was aber wohl • mittlerweile recht selten ist.
Html Einführung • Die Datei home.html (das bisherige Beispiel • nun zunaechst in Frame2) sieht jetzt so aus: • <html> • <head> • <META NAME="Author" CONTENT="Hans Fleissig"> • <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> • <TITLE>Hansis Sportwagen</TITLE> • <link rel=stylesheet type="text/css" href="mystyle.css"> • </head> • <body> • <h1 align=center>Hansis Autohaus</h1> • <h3 align=center>Ihr Partner für Supersportwagen</h3> • <p align=center>Unser Haus führt eine Selektion hochkarätiger • Sportwagen, die Ihnen den Atem rauben wird.</p> • <p align=center>Wir haben Wagen der Marke Porsche, Mercedes-Benz, • Lamborghini, Ferrari und BMW vorrätig</p> • <hr width=60% align=center size=5> • <center><img src="images/Porsche_959.jpg" alt=Porsche></center> • <center><a href="http://www.porsche.com">Porsche Homepage</a></center> • </body> • </html> • Der Link “Zum Diablo Roadster und anderen • Neuheiten” steht nun in der Navigationsleiste! • Die Datei navi.html (Frame1) sieht wie folgt aus: • <html> • <head> • <META NAME="Author" CONTENT="Hans Fleissig"> • <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> • <TITLE>Hansis Sportwagen</TITLE> • <link rel=stylesheet type="text/css" href="mystyle.css"> • </head> • <body> • <h1 align=center>Navigation</h1> • <a href="home.html" target="Frame2"><h2>Hauptseite</h2></a> • <br> • <a href="neuheiten.html" target="Frame2"><h2>Zum Diablo Roadster und anderen Neuheiten</h2></a> • </body> • </html> • Hier bedeutet die Ergänzung “target” in den Links, daß die angeklickten Seiten sich im Frame2 öffnen.
Html Einführung • Um Tabellendaten darzustellen, oder Text und Grafiken • optisch ansprechender zu präsentieren, können • Tabellen verwendet werden. • Es kann grundsätzlich zwischen zwei Tabellenarten • unterschieden werden. Dies sind “blinde” Tabellen, bei • denen die Gitterstruktur unsichtbar ist und solche bei • denen sie sichtbar ist (wird mit dem Befehl “border” • bestimmt). • Mit border=8 wird z.b bestimmt, daß der • Tabellenaußenrand 8 Pixel dick ist. • Mit cellspacing=2 wird z.B. bestimmt, daß die Gitter • innerhalb der Tabelle 2 Pixel breit sind.
Html Einführung • Mit cellpadding=4 wird bestimmt, daß der Inhalt einer • Zelle einen Abstand von 4 Pixeln zu den Zellenrändern • hat. • Es können auch die Abmessungen einer Tabelle • erzwungen werden • (<table border width=60% height=400>). Das • bedeutet 60% der Breite des Browserfensters und eine • Höhe von 400 Pixeln. • Mit den Befehlen colspan und rowspan können Spalten • bzw. Zeilen verbunden werden.
Html Einführung • Die Tabelle wird eröffnet mit dem table-Tag, • neben dem auch noch die oben angeführten • Definitionen stehen können. • Der tr-Tag steht für eine neue Tabellenzeile. • Der td-Tag steht für eine neue • Tabellenzelle. • Mit rowspan=2 werden die beiden • nebenstehenden Tabellenzellen zeilenweise • verbunden. • Eine identische Tabelle mit spaltenweiser • Verbindung sähe im Code so aus: • <tr> • <td colspan=2><center><img src="images/Viper_GTS.jpg" alt=Viper> • </center> • </td> • </tr> • <tr> • <td> • <img src="images/Lamborghini.jpg" alt=Lambo></td> • <td><center><img src="images/Hotrod.jpg" alt=Hotrod></center> • </td> • </tr> Einfügen einer Tabelle: <html> <head> <META NAME="Author" CONTENT="Hans Fleissig"> <META NAME="KeyWords" CONTENT=”Auto, Sportwagen"> <TITLE>Hansis Sportwagen</TITLE> <link rel=stylesheet type="text/css" href="mystyle.css"> </head> <body> <h1 align=center>Hansis Autohaus</h1> <h3 align=center>Neuheiten</h3> <center> <table border cellspacing=8 cellpadding=10> <tr> <td rowspan=2><img src="images/Viper_GTS.jpg" alt=Viper> </td> <td> <img src="images/Lamborghini.jpg" alt=Lambo> </td> </tr> <tr> <td> <center><img src="images/Hotrod.jpg" alt=Hotrod></center> </td> </tr> </table> </center> </body> </html>
Html Einführung • So das waren die Grundlagen von html, für weitere • Einzelheiten sind wie gesagt die Seiten von team-one sehr zu empfehlen: (http://www.teamone.de/selfhtml/) • Das Arbeiten mit einem Editor sollte für den Anfang noch unterbleiben, da so nur wenig über die Struktur von html gelernt werden kann, was aber z.B. für kleine Änderungen in einem html Dokument oder die Fehlersuche wichtig ist.
