Web-Publishing: HTML

Web-Publishing: HTML im Rahmen des PS ausElektronischer Datenverarbeitung(Rechnerpraktikum)

Grundlagen • HTML: Hypertext Markup Language • Hypertext • Knoten (Hypertext-Dokumente, Grafiken,...) • Verweise (Hyperlinks) • Markup Language • Strukturierung eines Dokumentes • reines ASCII

WU Wien • jeder WU Student darf eine Homepage anlegen • notwendig: PowerNet-Account • Anforderung über WWW • http://www.wu-wien.ac.at/infocenter/homepage.html • wichtig zu notieren: • Verzeichnis auf dem PowerNet-Rechner, in das Homepage gehört • URL der Homepage

Schreiben einer HTML-Seite • Anmelden auf PowerNet-Rechner • telnet (siehe Unix) • wechseln in das richtige Verzeichnis • cd-Befehl (siehe Unix) • erstellen/bearbeiten der Seite • da ASCII-Text • möglich mittels z.B. Pico (siehe Unix)

Tags • HTML-Befehle: Tags (immer in spitzen Klammern) • die meisten Befehle: Anfangs- und Ende-Tag • Anfangs-Tag: <befehl> • dazugehöriges Ende-Tag: </befehl> • beziehen sich auf dazwischenstehenden Text • können ähnlich der Klammersetzung in der Mathematik geschachtelt werden • können Argumente besitzen

Struktur • Struktur einer HTML-Seite • Head: allgemeine Festlegungen (Bsp. Titel) • Body: eigentlicher Text/Inhalt • gesamtes Dokument: innerhalb von <HTML>...</HTML> • Head • zwischen <HEAD>...</HEAD> • dazwischen z.B. <TITLE>...</TITLE> für den Titel der Seite (wird oben im Browser angezeigt)

Struktur • Body • innerhalb <BODY>...</BODY> • auch mit Argument: <BODY bgcolor=farbe> • alle kommenden Tags innerhalb des Body • Beispiel für korrekte Struktur <html> <head> <title>Testseite</title> </head> <body> Meine erste Seite </body> </html>

Überschriften • Überschriften (Headings) • <Hx>...</Hx> • der Text innerhalb dieses Tags wird als Überschrift angezeigt (x ist eine Zahl mit 1 - wichtigste Überschrift - beginnend) • z.B. <H1>Einleitung</H1> • Trennlinie • <HR width=x%> • zeichnet eine horizontale Linie über x Prozent des Bildschirms

Listen • Listen • <UL><LI>...<LI>...</UL> bzw. <OL><LI>...<LI>...</OL> • erzeugt eine Unordered (UL) oder Ordered (OL) List (mit oder ohne Nummerierung) • von einem LI bis zum nächsten ist ein Punkt • kann beliebig geschachtelt werden • z.B. <UL><LI>Apfel<LI>Birne</UL>

Formatierung • Zeilenumbruch (break) • <BR> • erfolgt ansonsten automatisch am Rand des Bildschirm oder vor bzw. nach anderen Tags wie z.B. <H1> • Paragraph (mit Abstand) • <P> • Schriftarten • <B>...</B> fette Schrift (bold) • <I>...</I> kursive Schrift (italic)

Formatierung II • Ausrichtung • <CENTER>...</CENTER> • <LEFT>...</LEFT> • <RIGHT>...</RIGHT> • Umlaute • ö bzw. ü bzw. ä

Tabellen • Tabellen • innerhalb von <TABLE>...</TABLE> • mögliche Parameter sind border (Ränderbreite), cellspacing (Abstand zwischen Zellen) und cellpadding (Rand innerhalb einer Zelle) • <TR> erzeugt neue Reihe (table row) • <TD> erzeugt neues Feld (Spalte, table data) • Beispiel <TABLE> <TR><TD>Stefan<TD>1 <TR><TD>Ed<TD>3 </TABLE>

Grafiken • <IMG SRC="URL"> • Bild, das an URL liegt, wird eingefügt • URL kann relativ (ausgehend vom Verzeichnis der momentanen Seite) • oder absolut (vollständig - Problem beim Verschieben der Seite) angegeben werden

Hyperlinks • <A HREF=“url">...</A> • es wird unter dem Text im Tag eine Link auf den URL (wieder absolut oder relativ) eingefügt • Beispiel <A HREF=„http://www.wu-wien.ac.at“>Hauptseite der WU</A>

Web-Publishing: HTML