Materialien zur Fortbildungsreihe C für die Informatik in SII Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII
Einführung HTML Ziel dieser Einführung HTML Hypertext Markup Language Einführung in die Erstellung von Webseiten nur so weit, wie für Projekt benötigt weiterführend kann z.B. SelfHTML von Stefan Münz verwendet werden. http://selfhtml.teamone.de/ HTML Hypertext Markup Language Seitenbeschreibungssprache. HTML-Dateien sind reine Textdateien. Sie können berabeitet werden mit: beliebigem Editor (z.B. Notepad) WYSIWYG-Editoren spezielle Editoren (Codeergänzung, Debugging, Fehleranzeige etc.) Ziel der Einführung | HTML | PHP Coder Grundstruktur HTM-Seite>
Grundstruktur einer HTML-Seite Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert. <tag> ... </tag> oder <tag Parameter> ... </tag> Tags können geschachtelt sein Grundgerüst einer HTML-Datei: HTML-Datei erstellt mit Notepad. Dokumenttyp-Angabe: (verwendeten HTML-Version) Header: Titel, Metatags usw. (auf Seite nicht sichtbar - Titelanzeige im Browser, Suchmaschinen) Body: (Eigentlicher Seiteninhalt) Auf den folgenden Folien sind im HTML-Quelltext Zeilen numeriert und werden Tags zum besseren Verständnis farbig hervorgehoben. HTML-Elemente | Grundgerüst HTML-Quelltext>
HTML-Quelltext Der HTML-Quelltext ist formatfrei. Die Formatierung des Quelltexts ist ohne Bedeutung. Das Aussehen der Seite wird ausschließlich über Tags bestimmt. Beispiel Zeilenumbruch: Tag <br> HTML-Quelltext im Editor Browseranzeige formatfrei | Zeilenumbruch einige Tags>
Einige wichtige Tags Überschriften <h1> </h1> bis <h6> </h6> http://selfhtml.teamone.de/html/text/ueberschriften.htm Textabsatz (Paragraph) <p> </p> Fließtext, Zeilenumruch am Ende des Absatzes Zeilenumbruch <br> siehe vorige Folie Trennlinie <hr> Textattribute <b> </b> fett, <i> </i> kursiv <u> </u> unterstrichen usw. http://selfhtml.teamone.de/html/text/physisch.htm Hintergrundfarbe <body bgcolor="#CCFFFF"> oder besser <body style="background-color:#CCFFFF"> http://selfhtml.teamone.de/html/dateiweit/farben.htm http://selfhtml.teamone.de/html/allgemein/farben.htm Kommentar <!-- Dies ist ein Kommentar --> Auch mehrzeilig. Eventuell enthaltene Tags werden ignoriert. Überschriften | Absatz | Zeilenumbruch | Trennlinie | Textattribute | Hintergrundfarbe | Kommentar Links>
Links Links (Verweise auf andere Dokumente) machen HTML zu Hypertext. Verweise werden durch das a-Tag (anchor) mit Parameter href (Hypertext-Referenz) gebildet. http://selfhtml.teamone.de/html/verweise/definieren.htm <a href="http://www.belwue.de/netz/"> Das BelWü-Netz </a> URL Verweistext Wird in der URL kein Server angegeben, so handelt es sich um einen internen Verweis. Er bezieht sich auf eine Seite auf dem selben Server, auf dem die Seite liegt, die den Link enthält. http://selfhtml.teamone.de/html/allgemein/referenzieren.htm Die folgenden Beispiele beziehen sich auf Links in der Basisseite usr/index.htm href="Seite2.htm" Im selben Ordner wie die Basisseite href =" beispiele/beispiel1.htm" Im Unterordner beispiele href =" ../oben.htm" Im übergeordneten Ordner htdocs href =" ../sonst/seite3.htm" Im parallelen Ordner sonst Empfehlung: Datei- und Ordnernamen nur in Kleinschrift, ohne Leerzeichen usw. extern | intern - gleicher Ordner - untergeordnet - übergeordnet - parallel | Namen Links>
Links Für Verweise auf Stellen im selben Dokument können in der HTML-Datei Anker gesetzt werden <h2><a name="kap02">Kapitel 2</a></h2> Zu den so markierten Stellen kann durch einen Link gesprungen werden. http://selfhtml.teamone.de/html/verweise/projektintern.htm <a href="#kap02">Kapitel 2</a> Bei einem Verweis kann man auch festlegen, dass die Seite in einem neuen Browserfenster geöffnet wir. http://selfhtml.teamone.de/html/verweise/definieren.htm#zielfenster <a href="http://www.belwue.de/" target="_blank">BelWül</a> Es kann auch ein Name für das Fenster angegeben werden. Wenn es ein Fenster mit diesem Namen gibt, so wird es verwendet, sonst wird ein neues Fenster angelegt <a href="http://www.belwue.de/" target=“Netzwerk">BelWül</a> Anker | neues Fenster | Fenstername Grafik>
Grafiken einbinden Grafiken werden mit dem img-Tag eingebunden. <img src ="bilder/portrait.jpg" width="368" height="383" alt =" Portrait"> Größenangabe beschleunigt den Seitenaufbau. Möglichkeit zur Skalierung. Alternativtext Das img-Tag steht ohne schließendes Tag. Um Bild und Text nebeneinander anzuzeigen, muss man diese in eine Tabelle einbinden. (Siehe Seite Tabellen) Grafiken können auch als Verweis (anstatt Verweistext) verwendet werden. http://selfhtml.teamone.de/navigation/faq.htm#grafik_als_verweis <a href="kontakt.htm"><img src="btn_kontakt.gif" alt="Kontakt"></a> Img | Tabelle | Grafik als Verweis Sonderzeichen>
Sonderzeichen, Umlaute Sonderzeichen und Umlaute werden über einen numerischen Code (Unicode) angegeben. Für häufig benutzte Zeichen gibt es sogenannte named entities, d.h. benannte Zeichen. Ä Ä Ä ä ä ä Ö Ö Ö ö ö ö Ü Ü Ü ü ü ü ß ß ß Blank Beispiel: In München steht ein Hofbräuhaus. Dort gibt es Bier aus Maßkrügen. Allgemeines zu Zeichen in HTML: http://selfhtml.teamone.de/html/allgemein/zeichen.htm Tabelle mit Sonderzeichen: http://selfhtml.teamone.de/html/referenz/zeichen.htm Listen>
Listen Listen <ul> </ul> mit <li> </li> (unordered list) Numerierte Listen <ol> </ol> mit <li> </li> (ordered List) http://selfhtml.teamone.de/html/text/listen.htm unordered | ordered | Beispiel Tabellen>
Tabellen Eine Tabelle entsteht durch Kombination der folgenden Tags: Tabelle <table></table> http://selfhtml.teamone.de/html/tabellen/ Zeile <tr></tr> (table row) Kopfzelle <th></th> (table header) Zelle <td></td> (table data) Beispiel 2x3 | Grafik+Text Übung>
Übung Für die Übungen verwenden Sie ausschließlich einen einfachen Texteditor (z.B. Notepad) und zur Kontrolle der Seiten den Browser. Erstellen Sie eine kleine Webseite „Steckbrief“ (real oder fiktiv) Überschrift Bild mit Lebenslauf Liste mit Hobbys Meine Lieblingsseite (externer Link) Entwickeln Sie die Seite schrittweise und testen Sie nach jedem Schritt mit einem Browser. Verwendete Elemente: HTML-Grundgerüst mit Titel, Hintergrundfarbe, Überschrift, Liste, externer Link, Tabelle, Grafik, Umlaute So etwa soll es aussehen Ende