„HTML“?
Werbung
HTMLbasics Eine Einführung in HTML 1 / 22 © Schlaich 2008 HTMLbasics Was heißt „HTML“? • HyperText Text über Hyperlinks nichtlinear zu verbinden • Markup to mark up heißt notieren • Language Sprache Sprache, um Hypertext zu notieren (Seitenbeschreibungssprache) 2 / 22 © Schlaich 2008 HTMLbasics Was kann HTML, was nicht? • HTML beschreibt die Inhalte (Semantik) einer Webseite • HTML beschreibt nicht die Gestaltung einer Webseite • Zur Gestaltung dienen ausschließlich Cascading Stylesheets (CSS) • Demo 3 / 22 © Schlaich 2008 HTMLbasics Wie lernt man eine (Fremd-)Sprache? • Regel 1: Vokabeln pauken • Regel 2: Grammatik lernen • Regel 3: Üben, üben, üben 4 / 22 © Schlaich 2008 HTMLbasics HTML-Vokabeln • Alle Vokabeln heißen Tags (sprich: Tägs) • Tags stehen in spitzen Klammern: <tag> • Tags besitzen Start- und Schlusstag: <tag>… Inhalt … </tag> • Beispiele: <b> steht für „bold“ (fett) <h1> steht für „headline“ (Überschrift) <p> steht für „paragraph“ (Absatz) 5 / 22 © Schlaich 2008 HTMLbasics HTML-Grammatik I • Tags besitzen Start- und Schlusstag: <tag>… Inhalt … </tag> • Beispiele: <b>Text wird fett</b> <p>Dies ist ein Absatz.</p> 6 / 22 © Schlaich 2008 HTMLbasics HTML-Grammatik II • Verschachtelung ist möglich: <tag1>… <tag2>…</tag2> … </tag1> • Beispiel: <p>Dies ist ein Absatz, mit einem <b>fetten</b> Wort.</p> 7 / 22 © Schlaich 2008 HTMLbasics HTML-Grammatik III • Es gibt einige leere Tags: <tag></tag> oder <tag /> • Beispiele: <br /> steht für „break“ (Umbruch) <img … /> steht für „image“ (Bild) 8 / 22 © Schlaich 2008 HTMLbasics Weche Struktur besitzt einer HTML-Datei? Eine HTML-Datei besitzt feste Struktur: <!DOCTYPE …> Beginn der HTML-Datei <html> Beginn des Dateikopfes Titel der Seite Ende des Dateikopfes <head> <title>Meine erste Seite</title> </head> Beginn des Dateikörpers Überschrift Absatz Ende des Dateikörpers Ende der HMTL-Datei <body> <h3>Hallo Welt!</h3> <p>Willkommen auf meiner ersten Website!</p> </body> </html> 9 / 22 © Schlaich 2008 HTMLbasics Wie werden HTML-Dateien gespeichert? • Dateiendung .htm oder .html ist Pflicht! • Vorsicht: Linux-Webserver unterscheiden zwischen Groß- und Kleinschreibung: z.B. index.htm Index.htm INDEX.htm • Die Startseite (Homepage) einer Website muss index.htm oder index.html heißen! 11 / 22 © Schlaich 2008 HTMLbasics Wie werden HTML-Dateien angezeigt? • Zur Anzeige wird ein Webbrowser benötigt. • Aktueller Browsermarkt (02.2008): 12 / 22 © Schlaich 2008 HTMLbasics Was folgt daraus? • Webseiten testen mit: Internet Explorer 6 (!) Internet Explorer 7 Firefox (Safari) • Webseiten testen unter Windows XP, Vista Mac OS 13 / 22 © Schlaich 2008 HTMLbasics Regel 3 für das Erlernen einer Sprache? • <tag>Üben</tag> • <tag>üben</tag> • <tag>üben</tag> 14 / 22 © Schlaich 2008 HTMLbasics Was gilt für Schriften? • HTML bindet Schriften nicht ein! Arial • Systemschriften verwenden Arial Black • Schrift evtl. als Grafik (Buttons, Headlines,…) • oder: Flash bindet Schriften ein Comic Sans Serif Rockwell Times New Roman Verdana 15 / 22 © Schlaich 2008 HTMLbasics Internet = globales Medium! • Grundlage: ASCII („Ami-Code“) • Dt. Umlaute und Sonderzeichen müssen „maskiert “ werden, z.B. &Auml; Ä &szlig; ß &euro; € • Angabe des europäischen Zeichensatzes als Meta-Tag 16 / 22 © Schlaich 2008 HTMLbasics Wozu dienen Meta-Tags? • Optionale Informationen im Dateikopf in der Form <meta …. /> • Copyright-Angaben z.B Autor, Datum • Informationen für Browser z.B. Zeichensatz • Informationen für Server z.B. Automatische Weiterleitung • Informationen für Suchprogramme z.B. Schlüsselwörter 17 / 22 © Schlaich 2008 HTMLbasics Wie kommen Bilder auf die Site? • HTML = reine Textdateien! • Bilder werden verknüpft (wie Quark, In Design) • Dateipfad immer relativ zur HTMLDatei, z.B. <img src= "venedig.jpg" /> • Bildformate: GIF für Grafik, Text JPG für Fotos PNG sowohl als auch SVG = Vektorformat! datei.htm Venedig ist schön! venedig.jpg 18 / 22 © Schlaich 2008 HTMLbasics Wie funktionieren Links? • Drei Varianten von (Hyper-)Links: • Variante 1: Links auf externe Seiten z.B. <a href="http://web.de ">Web.de</a> • Variante 2: Links auf Dateien: z.B. <a href= "news.htm" >News</a> • Variante 3: Links innerhalb einer Datei z.B. <a href="#kap1">Kapitel 1</a> datei1.htm Über Hyperlinks lassen sich HTML-Dateien verlinken. Ein Hyperlink ist ein Querverweis zu einer anderen Datei zurück datei2.htm 19 / 22 © Schlaich 2008 HTMLbasics Wozu dienen Frames? • Aufteilung einer Website in mehrere Bereiche (<frameset>) navi.htm content.htm • Jeder Bereich (<frame>) erhält eine eigene HTML-Datei • Bei Änderungen muss nicht die gesamte Seite geladen werden 20 / 22 © Schlaich 2008 HTMLbasics Wozu Formulare? • Formulare = Interaktion mit dem Anbieter einer Website • Zur Auswertung ist eine Skriptsprache notwendig, z.B. PHP • Notlösung: Formulardaten per Mail verschicken (Mail-Client erforderlich) 21 / 22 © Schlaich 2008 HTMLbasics Wo finde ich Hilfe? • HTML-“Kompendium“: http://de.selfhtml.org 22 / 22 © Schlaich 2008
