HyperTextMarkupLanguage (Stand: HTML 4.0)

Transkript

1 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 1 HyperTextMarkupLanguage (Stand: HTML 4.0) GRUNDSÄTZLICHES... 1 HTML-GRUNDGERÜST UND TEXTEINGABE... 2 FARBEN IN HTML... 4 BILDER... 4 VERWEISE / HYPERLINKS... 4 SONSTIGES - LAYOUT... 6 TABELLEN... 6 FRAMES... 8 FORMULARE... 9 OBJEKTE EINBINDEN... 9 GRUNDSÄTZLICHES Programme: Windows Editor oder andere Texteditoren (od. HTML-Quellcode-Editoren: z.b. Meybohm Phase5 Editor, WeaverSlave, ) zum Schreiben des Quellcodes Ein Internet-Browser zum Ansehen (z.b. Internet Explorer, Opera, Netscape, ). ACHTUNG: Nicht alle Browser interpretieren alle Tags (gleich). Zum Vorbereiten des Bildmaterials für eine Internetseite ist eine Bildbearbeitungssoftware (z.b. Adobe Photoshop, Gimp, usw.) nötig Zum Upload (Hochladen) der zuerst lokal gespeicherten Homepagedateien bedarf es eines ftp-programmes (ws-ftp, PSftp, ) HTML und CSS: Grundsätzlich gilt, dass viele Funktionen, die ehemals über HTML realisiert wurden, jetzt in CSS realisiert werden können und sollen. CSS-Grundlagen werden etwas später unterrichtet, da sie ein Grundwissen in HTML voraussetzen. In dieser Lernunterlage finden sich nur HTML-Tags ( Befehle ). Dateinamen und Konventionen Dateiendung:.htm oder.html (Empfehlung: Entscheidung für eine Variante!) Die erste Datei eines Projektes heißt immer index.htm(l) oder ev. default.htm(l) [je nach Webserver] alle Datei- / Ordner- / / Ankernamen in Kleinbuchstaben keine Umlaute keine Sonderzeichen keine Leerzeichen Ordnerkonzept Grundsätzlich befinden sich alle Dateien, die zu einem Homepageprojekt gehören, in einem Stammordner Originaldateien (Word, Photoshop, ) werden außerhalb dieses Stammordners aufgehoben Der Stammordner kann/soll weitere (sinnvoll benannte) Unterordner enthalten (z.b. Struktur und Benennung analog zur Menueführung)

2 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 2 HTML-GRUNDGERÜST UND TEXTEINGABE Das Grundgerüst einer HTML-Datei: <html> <head> <title>text des Titels</title> </head> <body> </body> </html> [hier wird der Seitentitel eingegeben] [im body steht der Inhalt der Seite] Kommentare einfügen <! > werden vom Browser nicht interpretiert, dienen der besseren Übersicht Meta-Tags werden von den meisten Suchmaschinen ausgelesen: <meta name="title" content="site-titel"> <meta name="description" content="beschreibung"> <meta name="keywords" content="schlüsselwörter"> <meta name="author" content="josef Hofer"> (Autorenhinweis der Seite) <meta name="publisher" content=""> (sofern es einen Herausgeber gibt) <meta name="copyright" content="josef hofer"> <meta name="content-language" content="de"> <meta name="revisit-after" content="5"> (Intervall Suchmaschinenbesuche in Tagen) <meta name="page-topic" content="rubriken"> (Rubriken f. Suchmasch.) <meta name="name" content="igendwelche Zustzinfos"> weitere Angaben (Zeichensätze, ) <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="expires" content="0"> (Originaldatei laden statt proxy-gesp.) <meta http-equiv="cache-control" content="no-cache"> (keinen Cache benutzen) Automatische Weiterleitung/Neuladevorgang <meta http-equiv="refresh" content="5; URL= Texte eingeben und formatieren Praktisch jeder TAG wird mit einem ENDTAG abgeschlossen: <title>seitentitel</title> <p> Beginnt einen Absatz, der bis zu </p> reicht. <p align= left > Absätze können linksbündig, rechtbündig, zentriert, geblockt sein. od. right center Am Ende eines Absatzes wird automatisch eine Leerzeile gesetzt. od. justify <div align= > </div> Zur Ausrichtung von Absätzen, Bildern, <br> Setzt Zeilenwechsel (innerhalb eines Absatzes) o. Leerzeile. <nobr> </nobr> verhindert Zeilenwechsel <wbr> Abteilen eines Wortes, sofern es am Zeilenende steht <i> Der Text, der bis zu </i> reicht, wird kursiv (italic) angezeigt <b> Der Text, der bis zu </b> reicht, wird fett (bold) angezeigt <font size= 4 > Schriftgröße des Textes, der bis zu </font> reicht festsetzen <font color= #.. > Schriftfarbe (siehe Farben) bis </font> <font face=.. > Schriftart einstellen: bis </font> <font face="arial, Helvetica, sans-serif"> <font face="times New Roman, Times, serif"> <font face="courier New, Courier, mono"> <font face="verdana, Arial, Helvetica, sans-serif">

3 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 3 <basefont> <sup> <sub> Analog zu <font> </font> setzt Schriften über Absätze, Tabellen, hinweg fest Hochgestellt Text Tiefgestellter Text Geschützes Leerzeichen, denn HTML setzt immer nur ein Leerzeichen zw. Texten Einige Umlaute und Sonderzeichen ä ä Ä Ä ö ö Ö Ö ü ü Ü Ü ß ß & & " Beispiele: GmbH & Co. KG "Text steht in Anführungszeichen&quot Schriften in HTML grundsätzlich sind in HTML nur wenige Schriftarten verfügbar, nämlich jene, die auch anderen Systemen verfügbar sind: z.b. Arial, Courier, Verdana, Times bei der Angabe der Schriften wird die erste bei Vorhandensein am System dargestellt: <font face= VERDANA,ARIAL,HELVETICA > Überschriften einfügen <h1>text</h1> h1 größtmöglichste Überschrift bis h6 kleinstmöglichste Überschrift kann mit align kombiniert werden: <h3 align= center >Text</h3> Listen mit Aufzählungszeichen oder Nummerierte Listen <ol> </ol> Nummerierte Listen (ordered list) <ul> </ul> Liste mit Aufzählungszeichen (unordered list) <li> </li> gilt für beide Formen von Listen Folgendes Beispiel verwendet eine Liste mit Aufzählungszeichen: <ul> beginnt eine Liste (unordered list) <li>text</li> Text wird mit einem Aufzählungszeichen davor dargestellt (list item) </ul> beendet eine Liste Sollte ein Listenpunkt noch untergeordnete Auflistungen enthalten, wird innerhalb der ersten Auszählung (hier z.b. Text) vor dem </li> eine weiter Liste mit <ul> begonnen, die wiederum mit </ul> beendet wird. <dt></dt> Definitionsliste Erstzeileneintrag (für Glossare) <dd></dd> hereingerückte Beiträge (bei den Glossaren) Zusätze: <ul type="circle"> bestimmen Sie ein rundes Bullet (circle = Kreis). <ul type="square"> bestimmen Sie ein eckiges Bullet (square = Rechteck). <ol type="i"> Listeneinträge mit I., II., III., IV. usw. nummeriert. <ol type="i"> Listeneinträge mit i., ii., iii., iv. usw. nummeriert. <ol type="a"> Listeneinträge mit A., B., C. usw. nummeriert. <ol type="a"> Listeneinträge mit a., b., c. usw. nummeriert. <ol start= 7 > Listeneinträge mit 7 gestartet, <li value= 7 > setzt einen best. Wert Präformatierter Text z.b. für Listings, mit <pre></pre> wird ein vorformatierter Bereich angegeben in dem alles wie im Editor wiedergegeben wird (Zeilenwechsel, Leerzeichen, ) z.b. für Dateilisten mit <pre width= 80 > kann festgelegt werden, dass nach 80 Zeichen ein Zeilenwechsel folgt

4 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 4 FARBEN IN HTML Die Grundfarben können mit dem englischen Namen angegebene werden: z.b. <font color= blue > oder red oder yellow u.s.w. Farben werden aber auch nach dem RGB-Modell (rot grün blau) angegeben. Die Intensität der Farbe richtet sich nach dem angegebenen Wert [von 0 bis 9, dann A,B,C,D,E,F] # (alle Farbwerte auf 0) => keine Farbe => schwarz #FFFFFF weiß #FF0000 (2 Stellen für Rot, beide FF = maximale Intensität) => intensives Rot #00FF00 intensives Grün Der Farbcode setzt sich aus hexadezimalen Angaben zusammen. Somit ergibt sich aus einem Farbwert im RGB-Modus (19,8,152) ein HEX-Wert von: # [Umrechnungsmöglichkeit: Jeden Farbwert einzeln im Windows-Rechner (Start>Programme>Zubehör Einstellung Wissenschaftlich ) von Dez auf Hex umrechnen. Grundsätzlich gibt es auch websichere Farben (216), die auf möglichst verschiedenen Systemen (Mac, Windows, Linux, ) und Bildschirmen gleich dargestellt werden. BILDER Bilder einfügen <img src="bild.gif"> Folgende Bildformate sind möglich: jpg/gif/png fügt ein Bild ein, dabei gibt es noch mehrere Möglichkeiten <img align= top src="bild.gif"> Optionen: top, middle, bottom> <img src="bild.gif" alt= TEXT > <img src="bild.gif" vspace= 50 hspace= 80 > <img src="bild.gif" width= 50 height= 50 > <img src="bild.gif" border= 2 > <img src= bild.gif name= name > Text nach dem Bild wird an der Bildoberkante ausgerichtet Bildbeschreibung einfügen Abstand (horizontal, vertical) zwischen Bild und Text Bildgröße angeben (sollte angegeben werden, damit der Browser alles gleich richtig darstellt) Rahmen um das Bild (0 = kein Rahmen) Bildnamen z.b. f. Rollover (JavaScript) Wenn <img...> mit align=... kombiniert wird, können mehrere Zeilen Text neben dem Bild angeordnet werden. Hintergrundbild einfügen: <body background="bild.jpg"> Fügt ein Hintergrundbild auf der Seite ein, das gekachelt wird; d.h. es wird immer wieder nebeneinander und untereinander dargestellt, außer: <body bgproperties="fixed"> Das Hintergrundbild bleibt beim Scrollen an der selben Stelle. VERWEISE / HYPERLINKS Absolute und Relative Links in HTML absolute Links (vollst. Dateipfad): z.b.: relative Links z.b.: guestbook/index.html oder../guestbook/index.html "../" springt um einen Ordner höher in der Hierarchie

5 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 5 Text-Hyperlinks zu anderen Dokumenten: <a href="zweiteseite.htm">verweis zu einer anderen Seite des Projekts</a> zweiteseite.htm ist der Dateiname der zweiten Seite (muss im selben Ordner sein) Verweis zu einer... Text der verlinkt sein sollte <a href="privat/lebenslauf.htm">main Lebenslauf</a> privat/lebenslauf.htm Die Datei Lebenslauf befindet sich in einem Unterordner Text-Hyperlinks zu anderen Internetseiten / Zielangaben (target) für Verweise: <a href=" target="_blank">zum ORF</a> _blank öffnet die Seite ( in einem neuen Browserfenster _self öffnet den Verweis im aktuellen Fenster _parent öffnet den Verweis eine ebene über dem aktuellen Frameset _top öffnet den Verweis außerhalb jeglicher Framesets Hyperlinks, die das Standard- programm öffnen: Zeichen Zeichenkette <a href="mailto:"> </a> [neue Zeile] %0A mailto:fritz.muster@gmx.at [Wagenrücklauf] %0D [Leerzeichen] %20 folgende Befügungen: zuerst?, dann &! %21?cc= # %23 &bcc= % %25 &subject= * %2A &body= / %2F? %3F ä %E4 ö %F6 ü %FC Ä %C4 Ö %D6 Ü %DC ß %DF Bild-Hyperlinks <a href="lebenslauf.htm"> <img src="bild.gif" alt= Mein Lebenslauf > </a> Anker <a name= oben ></a> und z.b. ein paar Zeilen später <a href= #oben >nach oben</a> oder von einer anderen Seite her: <a href= seite.html#oben > zu oben </a> Farbangaben für Textlinks <body text="#ffcc99" link="#ff9966" vlink="#ff9900" alink="#ffffff"> text definiert die Standard-Textfarbe für die ganze Seite link Standardlinkfarbe vlink Farbe für bereits besuchte Links (visited link) alink Farbe für aktive Hyperlinks (active link) Hyperlinks per Tabtaste / Tastatur bedienen <a href=" tabindex="3">paperball</a> Tabindex reguliert die Reihenfolge der Links, die per TAB erreicht werden können <a href=" accesskey="t">teamone</a> [Alt]+[t]<br> Accesskey reguliert die Kurztaste

6 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 6 SONSTIGES - LAYOUT Seitenränder einstellen <body marginwidth="50" leftmargin="50" marginheight="100" topmargin="100"> marginwidth / leftmargin stellen den linken Seitenrand ein marginheight / topmargin stellen den oberen Seitenrand ein immer beide Tags angeben, einer ist für den Internet Explorer, einer für Netscape Horizontale Linie <hr> - Fügt eine horizontale Linie (horizontal rule) ein. Folgende Varianten sind möglich: noshade blendet den Schatten der Linie aus width=... gibt die Breite für die Linie an (z.b. 300 = 300 Pixel) align=... Ausrichtung, wenn sie mit width=... kombiniert ist (center,...) size=... gibt die Dicke für die Linie an (z.b. 2 = 2 Pixel) color= #.. ermöglicht, die Linie einzufärben (nur beim Internet Explorer) TABELLEN Tabellen zusammenstellen <table> Beginnt eine Tabelle <tr> beginnt eine Zeile in einer Tabelle <td> beginnt ein Segment in einer Tabelle, je mehr Spalten, desto öfter <td> </td> beendet ein Segment in einer Tabelle </tr> beendet eine Zeile in einer Tabelle <th></th> Kopfzeile einer Tabelle </table> beendet eine Tabelle Definieren von Spaltenbreiten für eine ganze Tabelle, steht unmittelbar nach <table>: <colgroup> beginnt den Spaltenbreite-Definitionsteil <col width="80"> Breite der 1. Spalte <col width="100"> Breite der 2. Spalte <col width="320"> Breite der 3. Spalte </colgroup> beendet den Spaltenbreite-Definitionsteil Größen von Tabellensegmenten width=... Breite des Tabellensegmentes in Prozent oder Pixel height=... Höhe des Tabellensegmentes in Prozent oder Pixel

7 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 7 Tabellenrahmen und Anordnung der Zellen (innerhalb des table-tags) Außenrahmen: border=... Rahmenbreite, 0 = kein Rahmen, Tabelle als Layoutmittel bordercolor=... Rahmenfarbe (oder bordercolordark, bodercolorlight) Zellen / Rahmen cellspacing=... Abstand zwischen den Tabellenzellen cellpadding=... Abstand zwischen Tabellenrahmen und Inhalt Tabellenrahmen: frame="void" (void = nichts) kein Tabellenrahmen; Wenn border= angegeben wird, werden die Gitternetzlinien sichtbar angezeigt. Die Tabelle sieht aus wie ein an allen Seiten offenes Gitter frame="above" (above = oberhalb) Rahmenlinie nur am oberen Rand der Tabelle frame="below" (below = unterhalb) unterer Rand mit Rahmenlinie frame="hsides" (hsides = horizontal sides = horizontale Seiten) es wird nur am oberen und unteren Rand eine Rahmenlinie angezeigt. frame="vsides" (vsides = vertical sides) linker und rechter Rand der Tabelle frame="lhs" (lhs = left hand side) Rahmenlinie am linken Rand der Tabelle frame="rhs" (rhs = right hand side = rechts) am rechten Rand der Tabelle rules="none" (none = keine) es werden überhaupt keine Linien gezogen, der Außenrahmen der Tabelle wird jedoch angezeigt rules="rows" (rows = Reihen) es werden Linien zwischen allen Tabellenzeilen gezogen, nicht jedoch zwischen den Spalten der Tabelle rules="cols" (cols = columns = Spalten) es werden Linien zwischen allen Tabellenspalten gezogen, nicht jedoch zwischen den Zeilen Zellen verbinden (nach dem <td>-tag: colspan= 2 hier werden 2 Segmente verbunden rowspan= 2 eine Zelle wird über 2 Zeilen gezogen Ausrichten der gesamten Tabelle align=... Ausrichtung: left right center (beim table-tag) Ausrichtung von Tabelleninhalten in Zellen align="..." Ausrichtung des Inhaltes eines Tabellensegmentes (horizontal) right left center justify valign=... vertikale Ausrichtung: top bottom middle Hintergrundfarbe und Hintergrundbilder in Tabellen/Zellen bgcolor= #... Hintergrundfarbe für den <table>-tag oder <tr> oder <td> background=... Hintergrundbild einstellen Tabellenhöhe und -breite, Zellenhöhe und -breite <table> und <td> sind mit width= und height= kombinierbar

8 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 8 FRAMES Grundgerüst eines Framesets (anders als bei einer klass. HTML-Datei) <html> <head> <title>text des Titels</title> </head> KEIN BODY-BEREICH!!! <frameset...>  <frame...>  </html> Framesets definieren <frameset rows="20%,*,10%"> oder <frameset rows="60,*,15"> Zeilenweise Aufteilung der Frames; Angaben in Pixel oder Prozent. <frameset cols="200,*"> Spaltenweise Aufteilung der Frames; Angaben in Pixel oder Prozent Beispiel: <frameset rows="33%,*"> <frameset cols="50%,50%">  <frameset cols="50%,50%">  Frames zu einem Frameset definieren <frame src= menue.html name= auswahl > In diesem Frame wird nach dem Start des Framesets die Datei menue.html dargestellt. Die Zone (Frame, Bereich) in dem sie dargestellt wird heißt auswahl. Dieser Name wird gebraucht, um später Links zu definieren, die in diesem Bereich (Frame) des Framesets dargestellt werden sollen. <noframes> </noframes> Der Inhalt der zischen den beiden Tags steht wird ausgegeben, falls der Browser Frames nicht unterstützt. Eigenschaften von Frames Rollbalken für einzelne Frames ein- / ausschalten <frame > scrolling= yes ( no auto ) Mindestabstand zwischen Inhalt und Fenterrand bei den einzelnen Frames <frame > marginwidth="3" marginheight="30" durch den User unveränderbare Framegröße <frame noresize> Rahmen für Frames / Framesets: Netscape und Internet Explorer reagieren etwas verschieden. Die unten angegebenen Optionen gehören zum <frameset> Tag frameborder= 0 (od. 1 ) (oder yes / no ) 3D-Rahmen ein- oder ausschalten border Rahmenbreite framespacing Abstand zw. Frames Farben für Framerahmen. Die unten angegebene Option gehört zum <frameset> Tag bordercolor=... Verweise / Links bei der Arbeit mit Frames bei jedem Link muss angegeben werden, wo er dargestellt werden sollte: z.b. <a href= datei.html target= rechts >

9 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 9 Der Name des Anzeigebereiches wird im Frameset bei der Framedefinition angegeben (name=... ) - siehe oben. weitere target-angaben: _blank/_parent/_top/_self siehe Texthyperlinks zu anderen Seiten Im Head-Bereich (vor </head>) kann ein base-target (= für alle Links gültiges Ziel) für die ganze Datei angegeben werden: <base target="rechtesfenster"> Komplexe Framesets - Ein Beispiel <frameset cols="*,770,*"> <frame src="leer.html" name="leerbereich_links"> <frameset rows="60,*,20"> <frame src="ueberschrift.html" name="oben"> <frame src="willkommen.html" name="hauptframe"> <frame src="impressum.html" name="unten"> <frame src="leer.html" name="leerbereich_rechts"> Eingebettete Frames (inline-frames) <iframe src="anzeigedatei.html" width= 770 height= 80% name="box"> Quelldatei angeben, Breite und Höhe des Fensters in Pixel oder Prozent, Name der Framezone (des Frames) Inline Frames werden von Netscape erst ab der Version 6.0 interpretiert. iframes haben im Vergleich zu herkömmlichen Framesets kaum Vorzüge (außer einer gewissen Arbeitsersparnis), dafür einige Nachteile bezüglich der exakten Positionierbarkeit und Kompatibilität Eigenschaften von iframes mit align= (left/right) kann der Framerahmen ausgerichet werden, der Text steht entsprechend auf der anderen Seite. mit scrolling= (yes/no/auto) kann das Erscheinen der Rollbalken eingestellt werden weitere Möglichkeiten: frameborder, vspace, hspace Verweise zu iframes Zielangabe: z.b. target= box (siehe auch Verweise / Links bei der Arbeit mit Frames ) FORMULARE Feedbackseiten, Kontaktaufnahmen, Datenbankabfragen und -eingaben, usw. sind Einsatzgebiete für die Arbeit mit Formularen. HTML bietet verschiedene Formulartypen an (Checkboxen, Radio-Buttons, ein- und mehrzeilige Eingabefelder, Auswahlmenues, Buttons usw.) Für die Übergabe, Auswertung, von Formularen bedarf es meist einer weiteren Technik: z.b. PHP, JavaScript, usw. Genaueres zu Formularen: (Verweis HTML > Formulare) OBJEKTE EINBINDEN Datendateien als Objekt einbinden Verweis-sensitive Grafiken als Objekt einbinden Java-Applets als Objekt einbinden ActiveX-Controls als Objekt einbinden Flash-Anwendungen als Objekt einbinden Infos zum Einbinden von Objekten: (Verweis HTML > Objekte )

10 HTML - BETA.Unterrichtsskript [Josef Hofer] Seite 10 Specials - gemischte Techniken (nicht nur HTML) Hintergrundmusik einfügen Internet Explorer (im head-teil) <bgsound src="background.mid" loop="infinite"> Internet Explorer und Netscape (im body-teil) <embed src="background.mid" autostart="true" loop="true" hidden="true" height="0" width="0"> Lauftext (nur Internet Explorer) <marquee>text</marquee> scrollamount="50" bestimmt Schrittweite des Scrolltextes scrolldelay="5" bestimmt Wartezeit zwischen den Scrollschritten behavior="alternate" Text läuft in beide Richtungen direction="right" Laufrichtung von links nach rechts ( left : umgekehrt) bgcolor=#... Der Lauftext hat eine eigene Hintergrundfarbe height="..." Höhe des Marquee-Textes: Interessant für Hintergrundfarben Txt-Datei in einem Rahmen einbinden <p> <object data="text.txt" type="text/plain" width="300" height="400" border="2"> Ihr Browser kann das Objekt leider nicht anzeigen! </object> </p> Bei htm-dateien müsste man type= text/html angeben. Browser-Fenster schließen Text <a href="javascript:window.close()">fenster zumachen</a> (oder: self.close) Button <form> <input type=button value="fenster schließen?" onclick="javascript:self.close()"> </form> Gepunktete Umrandung bei Links vermeiden (Internet Explorer bis 5 ) <a href="ziel.htm" onfocus="if(document.all) this.blur()">text</a> Zurück-Button <a href="javascript:history.back()">text</a> Klicken auf Text bewirkt das selbe wird der Zurück-Button des Browsers Links, bei denen sich die Statusleiste des Browsers ändert <a href="datei.htm" onmouseover="status='das ist ein Verweis';return true;">verweis</a> Browser in bestimmter Fenstergröße öffnen (im <body>-tag) <body onload="window.resizeto(800,600)">