HTML Hyper Text Markup Language
Werbung
HTML Hyper Text Markup Language Bioinformatics Programming Course LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 1 HTML Language: Elements and Tags in HTML • HTML-Dateien bestehen aus Text. Zur Textauszeichnung gibt es bestimmte Zeichen aus dem normalen Zeichenvorrat. • Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTMLElemente werden durch so genannte Tags markiert - fast alle durch ein einleitendes und ein abschließendes Tag. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert. Beispiel: <h1>HTML - die Sprache des Web</h1> Syntax: HTML-ELEMENT ::= BEGIN-TAG HTML-ELEMENT END-TAG | text BEGIN-TAG ::= <TAG> END-TAG ::= </TAG> TAG ::= html | head | body | ... | h1 | h2 LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 4 HTML Language: Elements and Tags in HTML • Es gibt einige Elemente mit "Standalone-Tags", d.h. Elemente, die keinen Inhalt haben und deshalb nur aus einem Tag bestehen statt aus Anfangsund End-Tag. Beispiel: Eine Zeile, ein manueller Zeilenumbruch<br> und die nächste Zeile Syntax: HTML-ELEMENT TAG ::= HTML-ELEMENT TAG | text ::= <br> | <p> | ... Korrekte Syntax (XHTML konform) Eine Zeile, ein manueller Zeilenumbruch<br></br>und die nächste Zeile Eine Zeile, ein manueller Zeilenumbruch<br /> und die nächste Zeile LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 5 Verschachtelung • Verschachtelung von Elementen • Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine hierarchische Struktur (strukturierter Markup). Komplexere HTML-Dateien enthalten sehr viele Verschachtelungen. Beispiel: <h1><i>HTML</i> - die Sprache des Web</h1> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 6 Kommentare <!-- Kommentar --> <!-- Dies ist ein Kommentar, der nicht dargestellt wird ... natürlich auch über mehrere Zeilen --> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 7 Grundgerüst einer HTML-Datei Eine HTML-Datei besteht grundsätzlich aus folgenden Teilen: 1. Dokumenttyp-Angabe (Angabe zur verwendeten HTML-Version) 2. Header (Kopfdaten. z.B. Angaben zu Titel u.ä.) 3. Body (Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Schema (HTML): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <title>Text des Titels</title> </head> <body> </body> </html> HTML/XHTML Varianten "Strict" | "Transitional" | "Frameset" LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 8 HTML Parser HTML-Parser • Unter einem HTML-Parser versteht man ein Programm, das HTML-Auszeichnungen erkennt und in strukturierten Text umsetzt. Jeder Web-Browser verfügt über einen HTML-Parser, um HTML zu verarbeiten. • Wegen Syntax-Fehlern auf den meisten Webseiten sind HTMLParser der heute verbreiteten Browser sind ziemlich tolerant. • Angesichts der wachsenden Komplexität der verschiedenen Sprachen, also HTML in Verbindung mit eingebettetem CSS, JavaScript, PHP usw., wird es immer wichtiger, die SyntaxRegeln von HTML einzuhalten. LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 10 Attribute in Tags • • Einleitende Tags und Standalone-Tags können zusätzliche Angaben (Attribute) enthalten. Beispiel: <h1 align="center">HTML - die Sprache des Web</h1> • Es gibt folgende Arten von Attributen in HTML-Elementen: – Attribute mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. bei <h1 align="center"> (left, center, right und justify). – Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder eine bestimmte Konvention erwartet wird, z.B. <style type="text/css"> (Mime-Types haben den Aufbau Typ/Untertyp), <table border="1"> (Tabelle mit Rahmen von 1 Pixel Stärke numerisch) – Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <p title="irgendein Text"> - Text. – Alleinstehende Attribute, z.B. <hr noshade> (Trennlinie ohne Schatten). eigentlich (XHTML-konform) <hr noshade="noshade"> • Attributenwerte müssen in Anführungszeichen stehen (seit HTML-Standard 4.0 vorgeschrieben) LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 11 Universalattribute (alle tags) • class= Gibt an, dass das HTML-Element einer bestimmten Stylesheet-Klasse angehört. Das Element übernimmt Formate, die zentral für diese Klasse definiert wurden. • dir= Gibt die Textrichtung der Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant beispielsweise bei Sprachen wie Arabisch oder Hebräisch, wo die Textrichtung von rechts nach links geht. Erlaubt sind die Angaben ltr (links nach rechts) und rtl (rechts nach links).<td dir="rtl"> • id= Ein dateiweit eindeutiger Bezeichnername für ein Element - wenn Sie Elemente damit auszeichnen, sollten Sie keinen id-Namen innerhalb einer HTML-Datei mehr als einmal vergeben. • lang= Gibt die Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant bei mehrsprachigen Dateien - aber auch für Suchmaschinen im Internet. Als Angabe ist ein standardisiertes Sprachenkürzel erlaubt, z.B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch. style= Erlaubt es, den Inhalt eines Elements individuell mit CSS Stylesheets zu formatieren. • • title= Erlaubt es, HTML-Elemente mit kommentierendem Text bzw. Meta-Information auszustatten, z.B. Maus über HTML-Elementen. <p title=„ironisch!"> huhu <p> => ("Tooltip"-Fenster) LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 12 Universalattribute (alle tags) • class= Gibt an, dass das HTML-Element einer bestimmten Stylesheet-Klasse angehört. Das Element übernimmt Formate, die zentral für diese Klasse definiert wurden. • dir= Gibt die Textrichtung der Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant beispielsweise bei Sprachen wie Arabisch oder Hebräisch, wo die Textrichtung von rechts nach links geht. Erlaubt sind die Angaben ltr (links nach rechts) und rtl (rechts nach links).<td dir="rtl"> • id= Ein dateiweit eindeutiger Bezeichnername für ein Element - wenn Sie Elemente damit auszeichnen, sollten Sie keinen id-Namen innerhalb einer HTML-Datei mehr als einmal vergeben. • lang= Gibt die Landessprache an, die innerhalb des HTML-Elements verwendet wird. Interessant bei mehrsprachigen Dateien - aber auch für Suchmaschinen im Internet. Als Angabe ist ein standardisiertes Sprachenkürzel erlaubt, z.B. de für deutsch, en für englisch, fr für französisch, it für italienisch oder es für spanisch. style= Erlaubt es, den Inhalt eines Elements individuell mit CSS Stylesheets zu formatieren. • • title= Erlaubt es, HTML-Elemente mit kommentierendem Text bzw. Meta-Information auszustatten, z.B. Maus über HTML-Elementen. <p title=„ironisch!"> huhu <p> => ("Tooltip"-Fenster) LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 12 SELFHTML LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 14 SELFHTML LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 14 Textauszeichnung LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 15 Textauszeichnung: z.B. Listen <h1>Liste wichtiger Reime</h1> <ul> <li>Probieren geht &uuml;ber Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante f&auml;llt &uuml;ber Kante</li> </ul> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 16 Textauszeichnung: z.B. Listen <h1>Liste wichtiger Reime</h1> <ul> <li>Probieren geht &uuml;ber Studieren</li> <li>Liebe geht über Triebe</li> <li>Tante f&auml;llt &uuml;ber Kante</li> </ul> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 16 Links - Hyperlinks <a href="some_url">Text_zum_link </a> <a href="http://www.lmu.de"> Die Homepage der Ludwig-Maximilians Universität München</a> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 17 Links <h1>Besuchen Sie doch mal...</h1> <p> <a href="http://www.teamone.de/training/">ein paar Kurse &uuml;ber die hier vermittelten In <a href="http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view">das <i>SELFSpezia <a href="http://babelfish.altavista.com/">den Babelfish</a><br> <a href="ftp://ftp.uni-augsburg.de/">den FTP-Server der Universit&auml;t Augsburg</a><br> <a href="gopher://ftp.std.com/1">die ganze Welt auf einem Gopher-Server</a><br> <a href="telnet://locis.loc.gov/">die &ouml;ffentliche Telnet-Anwendung der Library of Cong <a href="news:de.comm.infosystems.www.authoring.misc">die deutschsprachige Newsgroup f&uuml </p> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 18 Links <h1>Besuchen Sie doch mal...</h1> <p> <a href="http://www.teamone.de/training/">ein paar Kurse &uuml;ber die hier vermittelten In <a href="http://www.atomic-eggs.com/selfspezial/guests/advguest.cgi?view">das <i>SELFSpezia <a href="http://babelfish.altavista.com/">den Babelfish</a><br> <a href="ftp://ftp.uni-augsburg.de/">den FTP-Server der Universit&auml;t Augsburg</a><br> <a href="gopher://ftp.std.com/1">die ganze Welt auf einem Gopher-Server</a><br> <a href="telnet://locis.loc.gov/">die &ouml;ffentliche Telnet-Anwendung der Library of Cong <a href="news:de.comm.infosystems.www.authoring.misc">die deutschsprachige Newsgroup f&uuml </p> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 18 Tabellen LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 19 Tabellen <table border="8" cellspacing="10" cellpadding="20"> <tr> <th>Berlin</th> <th>Hamburg</th> <th>M&uuml;nchen</th> </tr> <tr> <td>Milj&ouml;h</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 20 Tabellen <table border="8" cellspacing="10" cellpadding="20"> <tr> <th>Berlin</th> <th>Hamburg</th> <th>M&uuml;nchen</th> </tr> <tr> <td>Milj&ouml;h</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 20 Frames LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 21 Frames <frameset cols="250,*"> <frame src="verweise2.htm" name="Navigation"> <frame src="startseite2.htm" name="Daten"> <noframes> <h1>Willkommen!</h1> <p>Dieses Projekt verwendet Frames. Bei Ihnen werden keine Frames angezeigt.</p> <p>W&auml;hlen Sie einen der Verweise aus:<br> <a href="startseite2.htm"><b>Startseite</b></a><br> <!-- weitere Verweise usw. --></p> </noframes> </frameset> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 22 Frames <frameset cols="250,*"> <frame src="verweise2.htm" name="Navigation"> <frame src="startseite2.htm" name="Daten"> <noframes> <h1>Willkommen!</h1> <p>Dieses Projekt verwendet Frames. Bei Ihnen werden keine Frames angezeigt.</p> <p>W&auml;hlen Sie einen der Verweise aus:<br> <a href="startseite2.htm"><b>Startseite</b></a><br> <!-- weitere Verweise usw. --></p> </noframes> </frameset> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 22 Frames <a href="Frames.htm" target="Daten">Über Frames</a><br> <a href="HTML.htm" target="Daten"> Über HTML </a><br> <a href="more.htm" target="Daten">Noch viel mehr</a><br> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 23 Frames <a href="Frames.htm" target="Daten">Über Frames</a><br> <a href="HTML.htm" target="Daten"> Über HTML </a><br> <a href="more.htm" target="Daten">Noch viel mehr</a><br> LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 23 Frames <a href="Frames.htm" target="Daten">Über Frames</a><br> <a href="HTML.htm" target="Daten"> Über HTML </a><br> <a href="more.htm" target="Daten">Noch viel mehr</a><br> <base <base <base <base target= ... > target="_blank"> target="_top"> target="_parent"> Default-Fenster neues Browser-Fenster gesamtes Browserfenster übergeordnetes Frameset LMU Institut für Informatik, Lehrstuhl für Bioinformatik, WS 2008/2009: Bioinformatics Programming Course 23
