<html> Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache

Größe: px

Ab Seite anzeigen:

Download "<html> Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache"

Kerstin Kerner
vor 7 Jahren
Abrufe

1 <html> Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache

2 Überblick: Eine HTML-Kurzgeschichte Das gute und böse HTML Die Syntax: HTML-Schreiben lernen Wie man seine HTML-Traumfigur erreicht Bodybuilding: Tabellen, Listen, Frames, Layer und CSS Browsern: Über die Unfähigkeit browserunabhängige Ergebnisse zu erzielen Quelltext

3 Eine HTML-Kurzgeschichte Hypertext ist ein Softwareunabhängiges, nicht lineares Medium zur Präsentation

4 Das gute und böse HTML Zur Strukturierung (Formatierung) von Inhalten

5 Die Syntax: HTML-Schreiben lernen Quelltext im Browser anschauen. HTML-Dokumente werden im ASCII-Format gespeichert, Bsp. wie man es nicht macht: (www. ich-bin bloß zu»blöde«;mir den ASCII Zeichensatz* anzuschauen?de) und die Dateierweiterung lautet.html oder.htm Die Syntax lässt sich im Vergleich zu Programmiersprachen leicht lernen. Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen, man spricht auch von strukturiertem Markup: <h1><i>html</i> - die Sprache des Web</h1> HTML-Elemente werden durch so genannte Tags < > (Anfangstag) </ > (Endtag)markiert Tags können zusätzlich Attribute enthalten: <h1 align= center >HTML - die Sprache des Web</h1> Attributarten:

6 mit bestimmten erlaubten Werten, z.b. <h1 align= center > Überschrift 1. Ordnung zentriert ausgerichtet - hier sind nur die Werte left, center, right und justify/blocksatz erlaubt) mit freier Wertzuweisung, aber bestimmten Datentyp oder bestimmter Konvention z.b. <style type= text/css > ( Bereich für Stylesheets definieren - hier wird ein so genannter Mime-Type als Wert erwartet); Mime-Typen haben immer den Aufbau Typ/Untertyp bzw. Medientyp/Subtyp weitere Bsp.: text/html, image/gif oder <table border= 1 > ( Tabelle mit Rahmen von 1 Pixel Stärke - erwartet eine numerische Angabe) mit freier Wertzuweisung ohne weitere Konventionen, z.b. <p title= Aussage mit Vorbehalt > ( hier kann ein ganzer Text zugewiesen werden) Universalattribute, z.b. <p>hier beginnt ein Absatz, und hier ist er zu Ende.</p> <p>hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p> Zeilenumbrüche und Absätze werden im Web-Browser nicht so angezeigt wie sie im Quelltext eingegeben wurden!

7 <p>vor drei Wochen habe ich erfahren<br> dass Du krank bist<br> (br = break = Umbruch) Standalone-Tags, die keinen Inhalt haben und deshalb nur aus einem Tag bestehen

8 <h1>otto s Brief an die Mutter</h1> <p>liebe Mama!</p><p>Vor drei Wochen habe ich erfahren<br>dass Du krank bist<br>mach Dir keine Sorgen<br>Mir geht es gut.</p><nobr>aber ich hab leider keine Zeit Dich zu besuchen und weil mir das sehr leid tut, schicke ich Dir ein Video von mir.</nobr> Quelltext ( oben) Ansicht im Browser ( unten)

9 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN <html> <head> <title>seitentitel</title> <meta name= author content= wie verdammt lerne ich HTML > </head> <body> Hier befindet sich der im Browserfenster (Client) befindliche Inhalt der Webseite </body> </html> Wie man seine HTML- Traumfigur erreicht Dokumenttyp-Angabe (Angabe zur verwendeten HTML-Version) Html-Befehl (umschließt Dokument) Header (Kopfdaten. z.b. Angaben zu Titel u.ä.) Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Achtung! Bei Dateien, in denen Framesets und Frames definiert werden, muss die oben gezeigte Dokumenttyp-Angabe zur HTML-Variante Frameset notieren. XHTML-Grundgerüst-Deklaration:!DOCTYPE HTML PUBLIC -//W3C//DTD HTML-Grundgerüst-Deklaration: HTML 4.01 Transitional//EN >

10 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN > <html xmlns= xml:lang= en lang= en >  <! > Kommentare werden durch die Zeichenfolge  steht, wird bei der Anzeige im Browser unterdrückt.   <head> <title>seitentitel</title> <meta name= author content= wie verdammt lerne ich HTML > </head> <body> Hier befindet sich der im Browserfenster (Client) befindliche Inhalt der Webseite </body> </html>

11 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN <html> <head> <meta http-equiv= content-type content= text/html; charset=iso /> <title>kaliber10000 { The Designers Lunchbox }</title> <meta name= ROBOTS content= ALL /> <meta name= author content= mschmidt + token + per + barney /> <meta name= description content= The designers lunchbox, a global digital design portal for people who actually have something to say, and know how to do it. Updated weekly with a new issue, updated hourly with design news. /> <meta name= keywords content= typography, digital media, graphic design, design, typography, kaliber10000, kaliber, k10k, token, mschmidt, virus, lotsofpeopleinboxes, photography, issues, noise, forum, typographicadelic, lunchbox, designer, designers, news, features, on display, exhibition, per, barney, beagle, virus1, virusone, wulffmorgenthaler, event calendar, matchmaker, cuban council /> </head> <body> Hier befindet sich der im Browserfenster (Client) befindliche Inhalt der Webseite </body> </html> In Meta-Angaben kann man verschiedene nützliche Anweisungen für Web-Server, Web- Browser und automatische Suchprogramme im Internet ( Robots ) notieren.

12 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN > <html> <head> <title>spalten vordefinieren</title> </head> <body> <h1>betroffene Menschen</h1> <table border= 1 rules= groups > <thead> <tr> <th>assoziation 1</th> <th>assoziation 2</th> <th>assoziation 3</th> </tr> </thead> <tfoot> <tr> <td><i>betroffen:<br>4 Mio. Menschen</i></td> <td><i>betroffen:<br>2 Mio. Menschen</i></td> <td><i>betroffen:<br>1 Mio. Menschen</i></td> </tr> </tfoot> <tbody> <tr> <td>berlin</td> <td>hamburg</td> <td>münchen</td> </tr><tr> <td>miljöh</td> <td>kiez</td> <td>bierdampf</td> </tr><tr> <td>buletten</td> <td>frikadellen</td> <td>fleischpflanzerl</td> </tr> </tbody> </table> </body> </html> Bodybuilding: Tabellen, Listen, Frames, Layer und CSS Tabellen Um tabellarische Daten darzustellen oder Grundgestaltungsmittel für Seitenlayouts ( blinde T.).

13 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN > <html> <head> <title>text des Titels</title> </head> <body> <h1>todo-liste</h1> <ol> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li>  </ol> <ul> <li>bei Anette vorbeischauen</li> <li>bei Bianca vorbeischauen</li> <li>bei Christine vorbeischauen</li>  </ul> </body> </html> Listen Spezielle Absatztypen; zur Strukturierung von HTML und Hervorhebung von Aufzählungen es gibt Aufzählunslisten, Defintionslisten, Einträge, Menülisten, Ver zeichnisisten numeriert und unge ordnete Listen

14 <frameset rows= 100,*,60 >  </frameset> <noframes> wird angezeigt, wenn der browser keine frames anzeigen kann </noframes> </frameset> Frames Frei definierbare Segmente für Browserfenster definierbar, die jeweils eigene Inhalte enthalten.

15 <html> <head> <title>typography</title> </head> <STYLE TYPE= text/css >  </STYLE> {font-size:10px;font-family:verdana,arial;color:#9c9c9c;} {font-size:10px;font-family:verdana,arial;color:#9c9c9c;text-decorati on:none} {font-size:10px;font-family:verdana,arial;color:#9c9c9c;} {font-size:10px; font-family:verdana,arial; color:#b8b8b8} {font-size:10px; font-family:verdana,arial; color:#b8b8b8} {font-size:10px; font-family:verdana,arial; color:#b8b8b8} Layer ( Schichten) Um exakt positionierte Bereiche aus zuzeichnen. Gute gestalterische Effekte erzielbar. kein Standard, funktionieren nur mit Netscape 4.x!!! CSS ( Cascading Stylesheets) Ist die Sprache für die Optik CSS ( Cascading Stylesheets) im Beispiel

16 Browsern: Über die Unfähigkeit browserunabhängige Ergebnisse zu erzielen Die verbreitetsten Browser unter denen man seine HTML-Seite testen sollte sind: Microsoft Internet Explorer Netscape Navigator Opera Safari

17 </html> Keine Panik! Du kannst alles bei einem Tässchen Kaffee nachlesen unter oder als PDF-Bettlektüre ausdrucken. Viel Spass und träum was Schönes. aktuelle und vollständige Informationen unter: Quelltext: Die Sprachen des Web: HTML & XHTML, Robert Tolksdorf/ 4., aktualisierte und erw. Aufl. Heidelberg: dpunkt. Verl., 2000 HTML GE-PACKT, Dirk Chung/ Robert Agular, 1. Aufl. Bonn: MITP-Verlag, 2001

Ähnliche Dokumente

<html> Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache

<html> Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache Hypertext Markup Language zu deutsch Hypertext-Auszeichnungssprache Überblick: Eine HTML-Kurzgeschichte Das gute und böse HTML Die Syntax: HTML-Schreiben lernen Wie man seine HTML-Traumfigur erreicht