HTML-Grundlagen
Werbung
HTML-Grundlagen Eine Einführung in HTML für Informatik TG 11 HTML-Grundlagen Kapitel 1: Grundlegendes Benötigte Software Einen Texteditor, z.B. Microsoft Notepad WHYSIWY Editoren (Macromedia DW) Einen Browser, z.B. Mozilla oder Internet-Explorer Freitag, 30. Dezember 2005 3 HTML-Dokumente HTML-Dateien sind normale ASCIITextdokumente Sie müssen die Dateinamenserweiterung *.htm oder *.html haben Achtung: Notepad hängt normalerweise immer *.txt an Freitag, 30. Dezember 2005 4 Tags dienen zur Markierung von HTMLBefehlen Sind (fast) immer ein Paar Anfangstag: <TAG> Endetag: </TAG> Beispiel: <B>Fett</B> Freitag, 30. Dezember 2005 5 Grundgerüst HTML-Datei <HTML> ... Der HTML-Tag umschließt den Text des HTML-Dokuments als Ganzes. </HTML> Freitag, 30. Dezember 2005 6 Grundgerüst HTML-Datei <HTML> <HEAD> ... </HEAD> <BODY> ... Kopfbereich (HEAD) Körperbereich (BODY) </BODY> </HTML> Freitag, 30. Dezember 2005 Jedes HTML-Dokument besteht aus 7 zwei Teilen. Grundgerüst HTML-Datei <HTML> <HEAD> <TITLE> ... </TITLE> </HEAD> <BODY> ... </BODY> </HTML> Freitag, 30. Dezember 2005 Im Kopfbereich steht mindestens der TITLE-Eintrag. Die Anzeige erfolgt im Browser in der Titelzeile anstelle des Dateinamens. 8 Aufgabe 1.1 <HTML> <HEAD> <TITLE> Ein erstes Dokument </TITLE> </HEAD> •Erstelle ein entsprechendes <BODY> HTML-Dokument uebung1.html </BODY> •Schaue es dir im Browser an </HTML> Freitag, 30. Dezember 2005 9 Aufgabe 1.2 <HTML> <HEAD> <TITLE> Ein erstes Dokument </TITLE> </HEAD> <BODY> Ein erster Text </BODY> </HTML> •Ergänze das HTML-Dokument Freitag, 30. Dezember 2005 entsprechend zu uebung2.html •Schaue es dir im Browser an 10 HTML-Grundlagen Kapitel 2: Texte Übung 2.1 Gib den HTML-Text so ein, wie er im EditFenster erscheint. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 12 Absätze und Umbrüche <p>...</p> Umschließt einen Absatz p=paragraph <br> Liefert eine neue Zeile innerhalb des Absatzes br=break Achtung: zu <br> gibt es kein </br> Freitag, 30. Dezember 2005 13 Übung 2.2 Gliedere den Zauberlehrlingtext so, dass er durch Absätze und Zeilenumbrüche gegliedert wird. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 14 Attribute von Tags Attribute von Tags dienen dazu, spezielle Angaben zur Formatierung des Tags zu machen <TAG Attribut=Wert>...</TAG> Freitag, 30. Dezember 2005 15 Unterschiedliche Attribute Einzelattribut <ol compact> Zuweisung normierter Werte Nummerische Zuweisung Prozentuale Zuweisung Variable Werte <p align=“right“> Freitag, 30. Dezember 2005 <table width=“600“> <table width=“80%“> <a href=“http://...“ > Darstellung einer Liste Ausrichtung eines Absatzes Tabellenbreite festlegen Tabellenbreite festlegen Verweis festlegen 16 Absatzausrichtungen <p align="left">...</p> Linksbündiger Absatz Voreinstellung für <p> <p align="center">...</p> Zentrierter Absatz <p align="right">...</p> Rechtsbündiger Absatz <p align="justify">...</p> Absatz im Blocksatz Freitag, 30. Dezember 2005 17 Übung 2.3 Formatiere den ZauberlehrlingText so, dass die Überschrift zentriert und der letzte Absatz rechtsbündig ist. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 18 Überschriften <hx>...</hx> Definiert eine Überschrift h=header Für x sind die Werte von 1 bis 6 zulässig! Also: <h1>...</h1> <h2>...</h2> <h3>...</h3> ... <h6>...</h6> Freitag, 30. Dezember 2005 19 Übung 2.4 Formatiere den ZauberlehrlingText so, dass die Überschrift in der Grösse 2 erfolgt! Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 20 Kommentare <!-...--> Definiert einen Kommentar Alles, was zwischen den Kommentarklammern steht, wird bei der Interpretation durch den Browser ignoriert. Freitag, 30. Dezember 2005 21 HTML-Grundlagen Kapitel 3: Textformatierung Physische Textauszeichnung <b>...</b> bold=fett <i>...</i> italic=kursiv <u>...</u> underline=unterstrichen <s>...</s> strike=durchgestrichen <big>...</big> vergrößert <small>...</small> verkleinert <sup>...</sup> hochgestellt <sub>...</sub> tiefgestellt Freitag, 30. Dezember 2005 23 Übung 3.1 Erstelle eine neue HTML-Datei, die folgenden Text zeigt. Albert Einstein stellte 1905 1915 die allgemeine Relativitätstheorie E=mc2 auf. Freitag, 30. Dezember 2005 24 Kombinationen Physische Auszeichnungen können auch kombiniert werden. Dabei ist immer die zuletzt geöffnete auch als erste wieder zu schließen. <b><i><u>Fetter kursiver unterstrichener Text</u></i></b> Freitag, 30. Dezember 2005 <b><i><u>Fetter kursiver unterstrichener Text</b></u></i> 25 Quelltexte <pre>...</pre> Quelltextblock Alles, was zwischen den beiden pre-Tags steht, wird so wiedergegeben, wie er urspünglich formatiert war, also z.B. inklusive Einrückungen und Absätzen. Freitag, 30. Dezember 2005 26 Einrückungen <blockquote>...</blockquote> Zitate werden eingerückt Ursprünglich war der blockquote-Tag für Zitate gedacht. Da die Browser diesen Text aber einrücken, kann man blockquote auch dafür verwenden. Mehrere Einrückungen kann man durch mehrfach inander geschachtelte blockquote-Abschnitte erreichen. Freitag, 30. Dezember 2005 27 Übung 3.2 Formatiere den Zauberlehrling so, dass der erste Absatz als pre-Abschnitt und der zweite Absatz als blockquoteAbschnitt formatiert ist Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 28 Schriften <font>...</font> Auswahl von Schriftarten Ab der HTML-Version 3.2 können auch Schriftgrößen, Schriftarten oder Schriftfarben für Texte festgelegt werden. In neuerer Zeit wird allerdings für eine Trennung von Inhalt und Formatierung (CSS) plädiert. Freitag, 30. Dezember 2005 29 Schriftgröße <font size="Wert">...</font> Verändert die Schriftgröße Für Werte ist folgendes zulässig: 1...7: bestimmt die absolute Schriftgröße (1=klein) -2...+4: bestimmt die relative Schriftgrösse zur Standardgröße (Wert 3) Freitag, 30. Dezember 2005 30 Übung 3.3 Formatiere "Hexenmeister" mit +2, Geister mit 5, Werke mit +1, Geistesstärke mit 4 und den 2. Absatz mit 2. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 31 Schriftart <font face="Schrift">...</font> Verändert die Schriftart Es kann eine Schriftart in Anführungsstrichen angegeben werden. Mehrere Schriftarten können auch durch Kommata getrennt angegeben werden. Diese werden dann in der Reihenfolge nach Verfügbarkeit verwendet. Freitag, 30. Dezember 2005 32 Schriftart Setze die Schriftarten immer in Anführungszeichen Verwende für unterschiedliche Systeme immer Dreierkombinationen von Schriften Verwende nur die vier Familien SansSerif, Serif, Fixed und Symbol Freitag, 30. Dezember 2005 33 Schriftart SansSerifFamilie Serif-Familie (Verdana,)Arial, Helvetica, sans-serif (Georgia,)Times New Roman, Times, serif mono-Familie Courier New, Courier, mono Symbol-Familie Symbol Freitag, 30. Dezember 2005 34 Übung 3.4 Formatiere "Hexenmeister" mit serif, Geister mit sans-serif, Geistesstärke mit mono. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 35 Schriftfarbe <font color="Wert">...</font> Verändert die Schriftfarbe Die Schriftfarbe wird entweder durch einen vordefinierten Farbnamen oder durch eine 6-stellige Hexadezimalzahl im RGB-Farbcode angegeben. Freitag, 30. Dezember 2005 36 Schriftfarbe black navy silver blue green teal lime aqua Freitag, 30. Dezember 2005 schwarz dunkelblau silber blau dunkelgrün blaugrün hellgrün cyan maroon purple red fuchsia olive gray yellow white dunkelrot violett rot magenta ocker dunkelgrau gelb weiß 37 Schriftfarbe RGB-Code: #RRGGBB Erstes Paar von 00 bis FF → Rotanteil Zweites Paar von 00 bis FF → Grünanteil Drittes Paar von 00 bis FF → Blauanteil Browser können nur 216 reine Farben darstellen, die jeweils die Farbcodes 00,33,66,99,CC und FF haben. Freitag, 30. Dezember 2005 38 Übung 3.5 Formatiere "Hexenmeister" mit rot, Geister mit dunkelblau, Geistesstärke mit dunkelgrün. Schaue dir das Ergebnis im Browser an. Freitag, 30. Dezember 2005 39