1 / 12

Einführung HTML

Einführung HTML. Materialien zur Fortbildungsreihe C für die Informatik in SII. Einführung HTML. Ziel dieser Einführung Einführung in die Erstellung von Webseiten nur so weit, wie für Projekt benötigt

ivria
Download Presentation

Einführung HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII

  2. Einführung HTML Ziel dieser Einführung • 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ünzverwendet werden. http://selfhtml.teamone.de/ HTMLHypertext 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>

  3. HTML-Datei erstellt mit Notepad. 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: 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>

  4. HTML-Quelltext im Editor Browseranzeige 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> formatfrei | Zeilenumbruch einige Tags>

  5. 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.htmhttp://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>

  6. <a href="http://www.belwue.de/netz/"> Das BelWü-Netz </a> URL Verweistext 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 • 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>

  7. 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>

  8. Alternativtext <img src ="bilder/portrait.jpg" width="368" height="383"alt =" Portrait"> Größenangabe beschleunigt den Seitenaufbau. Möglichkeit zur Skalierung. Grafiken einbinden • Grafiken werden mit dem img-Tag eingebunden. • 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>

  9. 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. Ä &Auml; &#196; ä &auml; &#228; Ö &Ouml; &#214; ö &ouml; &#246; Ü &Uuml; &#220; ü &uuml; &#252; ß &szlig; &#223; Blank &nbsp; &#160; Beispiel: In M&uuml;nchen steht ein Hofbr&auml;uhaus. Dort gibt es Bier aus Ma&szlig;kr&uuml;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>

  10. 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>

  11. 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>

  12. Ü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

More Related