HTML-Datei erstellt mit Notepad. Auf den folgenden Folien sind im HTML-Quelltext Zeilen numeriert und werden Tags zum besseren Verständnis farbig hervorgehoben.">

Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Einführung HTML 28.04.04Ulrich Frei Apache MySQL PHP HTML AMP Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII.

Ähnliche Präsentationen


Präsentation zum Thema: "Einführung HTML 28.04.04Ulrich Frei Apache MySQL PHP HTML AMP Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII."—  Präsentation transkript:

1 Einführung HTML Ulrich Frei Apache MySQL PHP HTML AMP Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII

2 Apache MySQL PHP HTML AMP 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ünz verwendet werden. Ziel der Einführung | HTML | PHP Coder Grundstruktur HTM-Seite> 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.)

3 Apache MySQL PHP HTML AMP 3 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.... oder... –Tags können geschachtelt sein Grundgerüst einer HTML-Datei: Header: Titel, Metatags usw. (auf Seite nicht sichtbar - Titelanzeige im Browser, Suchmaschinen) Body: (Eigentlicher Seiteninhalt) Dokumenttyp-Angabe: (verwendeten HTML-Version) HTML-Elemente | Grundgerüst HTML-Quelltext> HTML-Datei erstellt mit Notepad. Auf den folgenden Folien sind im HTML-Quelltext Zeilen numeriert und werden Tags zum besseren Verständnis farbig hervorgehoben.

4 Apache MySQL PHP HTML AMP 4 HTML-Quelltext Browseranzeige HTML-Quelltext im Editor Der HTML-Quelltext ist formatfrei. Die Formatierung des Quelltexts ist ohne Bedeutung. Das Aussehen der Seite wird ausschließlich über Tags bestimmt. formatfrei | Zeilenumbruch einige Tags> Beispiel Zeilenumbruch:Tag

5 Apache MySQL PHP HTML AMP 5 Einige wichtige Tags Überschriften | Absatz | Zeilenumbruch | Trennlinie | Textattribute | Hintergrundfarbe | Kommentar Links> Überschriften bis Textabsatz (Paragraph) Fließtext, Zeilenumruch am Ende des Absatzes Zeilenumbruch siehe vorige Folie Trennlinie Textattribute fett, kursiv unterstrichen usw. Hintergrundfarbe oder besser Kommentar Auch mehrzeilig. Eventuell enthaltene Tags werden ignoriert.

6 Apache MySQL PHP HTML AMP 6 Links Links (Verweise auf andere Dokumente) machen HTML zu Hypertext. Verweise werden durch das a-Tag (anchor) mit Parameter href (Hypertext- Referenz) gebildet. 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. Die folgenden Beispiele beziehen sich auf Links in der Basisseite usr/index.htm Das BelWü-Netz URLVerweistext href="Seite2.htm" href =" beispiele/beispiel1.htm" href ="../oben.htm" Im selben Ordner wie die Basisseite Im Unterordner beispiele Im übergeordneten Ordner htdocs Empfehlung: Datei- und Ordnernamen nur in Kleinschrift, ohne Leerzeichen usw. extern | intern - gleicher Ordner - untergeordnet - übergeordnet - parallel | Namen Links> href ="../sonst/seite3.htm" Im parallelen Ordner sonst

7 Apache MySQL PHP HTML AMP 7 Links Für Verweise auf Stellen im selben Dokument können in der HTML-Datei Anker gesetzt werden Zu den so markierten Stellen kann durch einen Link gesprungen werden. Kapitel 2 Anker | neues Fenster | FensternameGrafik> Bei einem Verweis kann man auch festlegen, dass die Seite in einem neuen Browserfenster geöffnet wir. BelWül 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 BelWül

8 Apache MySQL PHP HTML AMP 8 Grafiken einbinden Grafiken werden mit dem img-Tag eingebunden. 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)Tabellen Grafiken können auch als Verweis (anstatt Verweistext) verwendet werden. Img | Tabelle | Grafik als VerweisSonderzeichen>

9 Apache MySQL PHP HTML AMP 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. ÄÄ Ä ää ä ÖÖ Ö öö ö ÜÜ Ü üü ü ßß ß Blank   Beispiel: In München steht ein Hofbräuhaus. Dort gibt es Bier aus Maßkrügen. Allgemeines zu Zeichen in HTML: Tabelle mit Sonderzeichen: Listen>

10 Apache MySQL PHP HTML AMP 10 Listen unordered | ordered | BeispielTabellen> Listen mit (unordered list) Numerierte Listen mit (ordered List)

11 Apache MySQL PHP HTML AMP 11 Tabellen Eine Tabelle entsteht durch Kombination der folgenden Tags: Tabelle Zeile (table row) Kopfzelle (table header) Zelle (table data) Beispiel 2x3 | Grafik+TextÜbung>

12 Apache MySQL PHP HTML AMP 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) Ende 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 HTML-Grundgerüst mit Titel HintergrundfarbeÜberschrift Listeexterner LinkTabelle GrafikUmlaute So etwa soll es aussehen


Herunterladen ppt "Einführung HTML 28.04.04Ulrich Frei Apache MySQL PHP HTML AMP Einführung HTML Materialien zur Fortbildungsreihe C für die Informatik in SII."

Ähnliche Präsentationen


Google-Anzeigen