HTML Lernkurs
+2
Groovy
Evoli
6 verfasser
:: Sonstiges :: Internet & Technik
Seite 1 von 1
HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:44 pm
- Spoiler:
- Teil 1
Was ist HTML?
Die Abkürzung HTML steht für "Hypertext Markup Language", dies heißt auf Deutsch so viel wie "Hypertext Auszeichnungssprache".
Dabei handelt es sich um eine "Auszeichnungssprache" für Webdokumente, welche die Struktur und Objekte definiert (bzw. beschreibt).
Es ist somit keine funktionale Programmiersprache wie beispielsweise PHP, womit Berechnungen, usw... durchgeführt werden können.
HTML beschreibt das Aussehen einer Website, beispielsweise die Positionen eines Linkes (ein Verweis auf eine andere Internetseite) oder die Farbe des Textes. HTML wird auf Englisch geschrieben.
Was kann ich mit HTML machen?
Wie schon erwähnt ist HTML eine reine "Auszeichnungssprache", d. h. dynamische Elemente wie Variablen, bewegte Links, und Ähnliches kann mit reinem HTML nicht realisiert werden.
Dazu sind dann z. B. Javascript- oder PHP-Kentnisse erforderlich, welche jedoch wiederum HTML als Grundkentnisse vorraussetzen.
Welche Anschaffungen muss ich machen um HTML programmieren zu können?
Gar keine. Sie brauchen lediglich einen beliebigen Texteditor (wie z. B. Notepad), welcher bei jedem Betriebssystem schon mitgeliefert ist.
Denn HTML-Dateien bestehen aus ganz normalen Buchstaben, die jeder beliebige Texteditor lesen und auch bearbeiten kann. Es sind somit keine Anschaffungen zu tätigen.
1.Die Syntax
Die Grundsyntax
HTML stammt ursprünglich von einer Sprache namens SGML (Standard Generalized Markup Language) ab, welche die Vorgabe für andere Sprachen festlegt. Eine HTML-Datei besteht aus sogenannten Tags (bereits vorgegebene Namen, um Objekte darzustellen, z. B. Links oder Bilder), welche wiederum Attribute (Eigenschaften) enthalten.
Tags werden immer mit dem Kleiner-als-Zeichen ( < ) eingeleitet, anschließend folgt der Name des Tags und zum Schluss wird der Tag mit dem Größer-als-Zeichen ( > ) abgeschlossen.
Die Tags müssen, nachdem sie geöffnet wurden, wieder geschlossen werden. Dazu kommt, wo er geschlossen werden soll, vor den Namen des Tags ein Slash ( / ).
Tipp: Merken Sie sich zuerst einmal, dass alle Tags, die geöffnet werden, auch wieder geschlossen werden müssen, zu Ausnahmen kommen wir später noch.
<tag>
Text
</tag>
> Listing 1.1: Beispiel für einen Tag
Zwischen der Öffnung und der Schließung des Tags kommt dann der Inhalt des Tags.
Attribute kommen nach den einleitenden Anfang des Tags und werden durch ein Leerzeichen voneinander getrennt.
Man weist ihnen durch den Gleichheits-Operator ( = ) einen Wert, der in Anführungszeichen ( " ) gesetzt wird, zu.
Die Reihenfolge der Attribute in einem Tag kann beliebig sein. Es können im Code beliebig viele Zeilenumbrüche gemacht bzw. weggelassen werden.
<tag attribut="wert">
Text
</tag>
> Listing 1.2: Beispiel für einen Tag mit Attribut
Die HTML-Grundstruktur
Die HTML-Grundstruktur ist eine Vorraussetzung bei allen HTML-Dokumenten und sollte immer zuerst geschrieben werden.
Sie fängt mit dem Tag <html> an, der zuerst die HTML-Seite einleitet. Anschließend kommt zwischen den <html>-Tag der <head>-Tag, welcher den Kopf einleitet.
In den <head>-Tag kommt alles Unsichtbare (wie die Gedanken), z. B. Informationen für Suchmaschinen.
In den <html>-Tag kommt außerdem auch noch der <body>-Tag, er ist sozusagen der Körper und hierein kommt alles Sichtbare, alles was der Benutzer sehen soll. Merken Sie sich die HTML-Grundstruktur sehr gut!
<html>
<head>
</head>
<body>
</body>
</html>
> Listing 1.3: HTML-Grundstruktur
Der Dokumenttyp
Da es im Internet neben HTML noch weitere "Auszeichnungssprachen", teilweise auch in verschiedenen Versionen gibt, ist es empfehlenswert, dass Sie einen Dokumenttyp einbinden. Der Dokumenttyp wird noch vor dem "<html>"-Einleitungstag eingebunden, sodass der Browser erkennen kann, wie er mit den folgenden Informationen in der Datei umgehen muss. Verwenden Sie vorläufig den folgenden Dokumenttyp, die genaueren Einzelheiten hierzu werden Ihnen später noch vermittelt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>
> Listing 1.4: HTML-Grundstruktur mit Dokumenttyp
Zuletzt von Evoli am Sa Jun 28, 2008 12:42 am bearbeitet; insgesamt 2-mal bearbeitet
Evoli-
Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:45 pm
- Spoiler:
- Teil 2
Sie beherrschen die HTML-Grundstruktur sehr gut und haben auch das Prinzip der HTML-Syntax verstanden?
Legen Sie zunächst die Datei "projekt1.html" in Ihrem Arbeitsverzeichnis an (betrachten Sie dazu auch "Neue .html-Datei anlegen" unten) und öffnen Sie diese in einem beliebigem Texteditor.
Anschließend fügen Sie darin die HTML-Grundstruktur ein. Zwischen den <body> - Tag kommt dann der Text der angezeigt werden soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
Ein beliebiger Text
</body>
</html>
> Listing 2.1: Anfangstext
<title> ist der erste Tag, den Sie kennenlernen, der in den <head> - Bereich einer HTML-Seite kommt.
Er definiert den Text in der Titelzeile des Browsers. Der gewünschte Titel kommt dabei zwischen <title> und </title>
Normalerweise sind die Informationen im <head>-Tag für den Benutzer nicht sichtbar, der <title>-Tag stellt jedoch eine Ausnahme dar.
Das Aussehen des Titels lässt sich nicht mit HTML beeinflussen (d. h. Sie können den Titel beispielsweise nicht fett darstellen lassen).
Betrachten Sie für das folgende Beispiel die Titelzeile Ihres Browsers (unter Windows ganz oben am Fensterrand).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
Ein beliebiger Text
</body>
</html>
> Listing 2.2: Seitentitel
Möchten wir nun z. B. das Wort "ein" fett schreiben, so fügen wir dieses Wort in den <b>-Tag ein, möchten wir das Wort "beliebiger" kursiv anzeigen lassen, fügen wir das Wort in den <i>-Tag ein und wollen wir das Wort "Text" unterstrichen formatieren, so fügen wir das Wort in den <u>-Tag ein.
Wichtig Der <b> - Tag lässt den Text fett (bold) anzeigen.
Der <u> - Tag lässt den Text unterstrichen (unterlined) anzeigen.
Der <i> - Tag lässt den Text kursiv (italic) anzeigen.
Der jetzige Stand des Projektes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<b>Ein</b> <i>beliebiger</i> <u>Text</u>
</body>
</html>
> Listing 2.3: Schriftformatierungen
Nun gibt es auch noch den <font> - Tag (font = Schrift auf Deutsch), mit dessen Hilfe noch viele weitere Dinge umgesetzt werden können.
So gibt das Attribut "color" die Farbe des Textes an und das Attribut "size" die Größe des Textes.
Falls ein "Farbcode" (immer hexadezimal, z. B: #00FF03) als Inhalt des "color" - Attributes verwendet werden soll, muss dieser mit einer Raute ( # ) eingeleitet werden, ein "Farbwort" (z. B. red) dagegen nicht.
[Sehen Sie unten: Wie erstelle ich einen hexadezimalen "Farbcode"?]
Bei dem Attribut "size" können Werte von -2 (sehr klein) bis +2 (sehr groß) eingesetzt werden.
Nehmen wir einmal an, wir möchten die Wörter "ein" und "beliebiger" rot färben, und das Wort "Text" so groß wie (bisher) möglich anzeigen lassen.
Hinweis: Da HTML zukünftig keine "Design-Sprache" wird, sondern mehr in Richtung Logik und Struktur gehen soll, möchte ich Ihnen allgemein von der Verwendung von "designspezifischen Tags" wie beispielsweise <font>, <b>, <u> und <i> abraten.
Sie werden im Laufe des Tutorials weitere Möglichkeiten kennenlernen, wie Sie Ihre designerische Vorstellungen optimal verwirklichen können.
Folgendermaßen sieht es dann aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<font color="red">
<b>Ein</b> <i>beliebiger</i>
</font>
<font size="+2">
<u>Text</u>
</font>
</body>
</html>
> Listing 2.4: Farbe und Größe
Möchten wir nun beispiesweise eine zweite Zeile unter dieser einfügen, so müssen wir zuerst einen Zeilenumbruch mit <br> (Break) machen und anschließend kann darunter ein neuer Text eingefügt werden.
Es ist übrigens egal, ob im Texteditor ein Zeilenumbruch erfolgt oder nicht, im Browser wird immer ein Zeilenumbruch dargestellt, sobald ein <br> erscheint.
Der letzte Schritt des Projektes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<font color="red">
<b>Ein</b> <i>beliebiger</i>
</font>
<font size="+2">
<u>Text</u>
</font><br>
Dies ist die zweite Zeile.
</body>
</html>
> Listing 2.5: Zeilenumbruch
Zusammengefasst Mit dem <b> - Tag kann Text fett, mit dem <u> - Tag unterstrichen, und mit dem <i> - Tag kursiv angezeigt werden.
Mit Hilfe des Tags <font> kann die Größe und die Farbe des Textes angegeben werden.
Dabei gibt das Attribut "color" die Farbe an (Raute, falls Farbcode) und "size" die Größe (von -2 bis +2).
Zeilenumbrüche können mit dem Tag <br> gesetzt werden.
In späteren Teilen des Tutorials werden Sie modernere, umfangreichere Möglichkeiten kennenlernen, um Ihre Vorstellungen in Sachen Design umzusetzen.
Neue .html-Datei anlegen
Befolgen Sie die folgenden Schritte, um eine HTML-Datei unter Windows zu erstellen:
1.Gehen Sie dazu in Ihr Arbeitsverzeichnis mit dem Explorer.
2.Üben Sie einen Rechtsklick auf eine freie Stelle im Explorer aus.
3.Fahren Sie mit dem Mauszeiger auf "Neu >" und wählen Sie "Textdokument" aus. Bestätigen Sie dies mit einem Klick.
4.Geben Sie der Datei nun die Endung ".html", indem Sie die vorhandene Endung ".txt" durch ".html" ersetzen.
(Wird diese Dateiendung nicht angezeigt, gehen Sie auf "Extras" (unter Windows 2000/XP) bzw. "Ansicht" (unter Windows 95/98/ME) -> "Ordneroptionen" und klicken Sie dort auf die Registerkarte "Ansicht". Entfernen Sie dort den Haken vor "Erweiterungen bei bekannten Dateitypen ausblenden" und bestätigen Sie dies mit einem Klick auf "OK".)
Wie erstelle ich einen hexadezimalen "Farbcode"?
Möchten Sie wissen, wie Sie unter Windows einen "Farbcode" erstellen können, mit Ihrer gewünschten Farbe?
Ein Farbcode besteht immer aus einem "#"-Zeichen am Anfang, sowie aus sechs weiteren Stellen. Ein Beispiel für ein Farbcode wäre "#FF67A2".
Der Farbcode gibt die Rot-, Grün- und Blau-Werte einer Farbe an, weshalb er auch RGB-Wert genannt wird.
1.Öffnen Sie über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Paint" das Programm Paint.
2.Klicken Sie links unten auf der Farbpalette doppelt auf eine beliebige Farbe.
3.Im daraufhin erscheinenden Fenster klicken Sie auf "Farben definieren >>".
4.Wählen Sie dort eine Farbe aus, die Ihnen gefällt.
5.Öffnen Sie neben Paint noch über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Rechner" den Taschenrechner.
6.Klicken Sie im Taschenrechner auf "Ansicht" -> "Wissenschaftlich", stellen Sie sicher, dass links "Dez" markiert ist.
7.Nehmen Sie nun wieder Paint her und geben Sie den Wert für "Rot" in den Taschenrechner ein.
8.Markieren Sie im linken Teil des Taschenrechners den Kreis links neben "Hex", dies ist der erste Wert des Farbcodes. Erscheint hier beispielsweise "D7", so haben wir bereits den noch unvollständigen Farbcode "#D7".
9.Markieren Sie im Taschenrechner wieder "Dez", nehmen Sie in Paint den "Grün"-Wert Ihrer Farbe her, geben Sie diese wieder in den Taschenrechner ein und klicken Sie auf "Hex". Kommt hier z. B. der Wert "B" (also nur ein Einstelliger) heraus, so muss davor eine 0 angefügt werden. Wir erhalten somit den bisherigen Wert "#D70B".
10.Wiederholen Sie Schritt 9 nochmals mit dem "Blau"-Wert Ihrer Farbe. Sie sollten letztendlich einen Wert in der Art, wie z. B. "#D70BAF" erhalten.
11.Abschließend können Sie Paint und den Taschenrechner schließen.
Zuletzt von Evoli am Sa Jun 28, 2008 12:42 am bearbeitet; insgesamt 3-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:46 pm
- Spoiler:
- Teil 3
Tabellen sind ein sehr wichtiges Hilfsmittel für Webdesigner. Sie ermöglichen es Seiten besser zu strukturieren, beispielsweise auch mit unsichtbaren Tabellen.
Eine Tabelle wird mit dem <table> - Tag eingeleitet und mit dem <tr> - Tag, mit dem eine neue Zeile in der Tabelle begonnen wird, fortgesetzt.
Der <td> - Tag leitet eine neue Zelle in einer Zeile ein. Die einleitenden Tags für die Tabelle, Zeile und Zelle müssen wieder geschlossen werden.
Merken Sie sich am besten, dass mit dem Öffnen einer Tabelle auch das Öffnen einer Zeile und einer Zelle verbunden ist, da eine Tabelle ohne Zeilen und Zellen keinerlei Verwendung hat.
So sieht die Grundstruktur einer Tabelle aus:
<table>
<tr>
<td>
...
</td>
</tr>
</table>
> Listing 3.1: Tabellenstruktur
Damit Sie sich im folgenden Tutorial besser zurecht finden, umranden wir die derzeit unsichtbaren Tabellen mit einem 2 Pixel-dickem Rahmen.
Dazu wird der Tabelle das Attribut "border" mit dem Inhalt "2" (in Pixeln angegeben!) zugewiesen.
Um bereits ein kleines Ergebnis feststellen zu können, binden wir noch eine Zelle (<td>) in der bereits vorhandenen Zeile (<tr>) ein.
Der aktuelle Stand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2">
<tr>
<td>
1.Zelle
</td>
<td>
2.Zelle
</td>
</tr>
</table>
</body>
</html>
> Listing 3.2: Tabellenrahmen
Möchten Sie, dass die Tabelle dieselbe Größe wie das Browserfenster hat, so legen wir dies mit dem Attribut "width" (dt. Breite) fest. Der Tag ist für den <table> - und <td> - Tag einsetzbar.
Das Attribut kann eine Prozentangabe (X% von Browserfenster, 100% = Größe des Browserfensters) als auch eine Pixelangabe beinhalten.
Der Code dazu würde so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td>
1.Zelle
</td>
<td>
2.Zelle
</td>
</tr>
</table>
</body>
</html>
> Listing 3.3: Breite
Mit dem Attribut "align" für <td> und <tr> - Tags können die Inhalte in den Zellen positioniert werden.
Der Inhalt "left" ist der Standard und gibt an, dass der Text bzw. der Inhalt nach links ausgerichtet werden soll, "center" gibt an, dass der Text bzw. Inhalt mittig sein soll und "right" definiert, dass der Text rechts angezeigt werden soll.
Mit dem (inzwischen veralteten) <center> - Tag lassen sich Texte bzw. andere Elemente zentriert auch außerhalb von Tabellen anzeigen.
Möchten wir die erste Zelle nach rechts ausrichten und die zweite Zelle mittig, so würde das wie folgt aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<table border="2" width="100%">
<tr>
<td align="right">
1.Zelle
</td>
<td align="center">
2.Zelle
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
> Listing 3.4: Zellenausrichtung
Das Attribut "bgcolor", welches sowohl für den <table> - Tag, als auch für den <body> - Tag verwendet werden kann, definiert die Hintergrundfarbe der Tabelle (beim Einsatz im <table>-Tag) bzw. der ganzen Seite (beim Einsatz im <body>-Tag).
Als Inhalt kann dem "bgcolor"-Attribut, genauso wie dem Attribut "color" des <font> - Tags sowohl individuelle Farbcodes (mit Raute beginnen!), als auch Farbwörter (wie z. B. blue), zugewiesen werden.
Nehmen Sie als Hintergrundfarbe für die Seite z. B. schwarz (black), für die Tabelle rot (red) und als Schriftfarbe (dies regeln Sie mit dem <font> - Tag) beispielsweise blau (blue).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red">
<tr>
<td align="right">
<font color="blue">1.Zelle</font>
</td>
<td align="center">
<font color="blue">2.Zelle</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
> Listing 3.5: Hintergrund- und Schriftfarbe
Um einen Abstand von 5 Pixeln zu allen anliegenden Seiten innerhalb einer Zelle zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) für die gesamte Tabelle verwendet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red" cellpadding="5">
<tr>
<td align="right">
<font color="blue">1.Zelle</font>
</td>
<td align="center">
<font color="blue">2.Zelle</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
> Listing 3.6: Hintergrund- und Schriftfarbe mit Zellenabstand
Tabellen bestehen nicht nur aus einer Zeile, sondern normalerweise aus mehreren. Natürlich lassen sich deshalb noch mehr <tr>-Tags öffnen. Bedenken Sie jedoch, dass Sie in jeder Tabelle nur maximal einen <tr>-Tag geöffnet haben dürfen.
Bedenken Sie bitte, dass die Tabellenstruktur immer dieselbe sein muss, so müssen in der zweiten Zeile beispielsweise auch wieder zwei Zellen erstellt werden, wenn dies in der ersten Zeile so ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body bgcolor="black">
<table border="2" width="100%" bgcolor="red" cellpadding="5">
<tr>
<td align="right">
<font color="blue">1.Zelle der ersten Zeile</font>
</td>
<td align="center">
<font color="blue">2.Zelle der ersten Zeile</font>
</td>
</tr>
<tr>
<td align="center">
1.Zelle der zweiten Zeile
</td>
<td>
<font color="green">2.Zelle der zweiten Zeile</font>
</td>
</tr>
</table>
<center>Testtext</center>
</body>
</html>
> Listing 3.7: Eine Tabelle mit zwei Zeilen
Zusammengefasst Die Tabelle wird mit dem <table> - Tag eingeleitet, die Zeile mit dem <tr> - Tag und die Zelle mit dem <td> - Tag.
Das Attribut "border" für den <table> - Tag gibt die Rahmendicke in Pixel an.
Mit Hilfe des Attributes "width" können Sie die Breite der Tabelle und der einzelnen Zellen festlegen.
Die Positionierung der Inhalte von einzelnen Zellen kann mit dem "align" - Attribut definiert werden.
Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen.
Um einen Abstand zu allen anliegenden Seiten innerhalb einer Zeile zu bewirken, wird das Attribut "cellpadding" (Angabe nur in Pixel!) verwendet.
Außerhalb von Tabellen kann man mit dem <center> - Tag auch Text oder andere Elemente zentriert anzeigen.
Zuletzt von Evoli am Sa Jun 28, 2008 12:43 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:47 pm
- Spoiler:
- Teil 4
Mit Tabellen können Sie bereits gut umgehen. Aber wie sieht es mit Bildern aus?
Bilder sind mittlerweile ein wichtiger Bestandteil des Internets geworden, so wird es durch Bilder beispielsweise möglich Informationen zu vermitteln (z. B. das Aussehen einer Person), die mit reinem Text nicht möglich wären.
Fangen wir zunächst wieder mit der HTML-Grundstruktur an. Mit dem <img> - Tag ("img" ist die Abkürzung für engl. "image", dt. Bild) lassen sich Bilder anzeigen.
Dabei gibt das Attribut "src" ("src" ist die Abkürzung für engl. "source", dt. Quelle) im <img>-Tag die Adresse bzw. Pfadangabe des Bildes an (z. B. "test.jpg", falls sich das Bild in demselben Pfad befindet wie die HTML-Datei).
Der <img> - Tag ist der erste Tag, den Sie kennen, welcher NICHT geschlossen werden muss.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<img src="http://www.npage.de/test.jpg">
</body>
</html>
> Listing 4.1: Eingebundenes Bild
Das war es vorerst eigentlich auch schon mit den Bildern.
Aber nun gibt es auch noch Links (Verweise zu anderen Seiten), mit denen die verschiedenen Internetseiten miteinander verknüpft sind.
Somit können Sie auf Ihrer Seite z. B. auf andere Seiten, die Ihnen gut gefallen, linken.
Links werden mit dem <a> - Tag definiert, dabei gibt das Attribut "href" die Zieladresse, wohin der Link führen soll, an.
Der Linktext, der angezeigt werden soll, kommt zwischen <a> und </a>.
Falls Sie das Ziel in einem neuen Fenster öffnen wollen, so müssen Sie noch das Attribut "target" mit dem Inhalt "_blank" hinzufügen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<a href="http://www.npage.de/" target="_blank">Testlink</a>
</body>
</html>
> Listing 4.2: Link
Möchten Sie nun beispielsweise ein Bild verlinken, so ist dies auch kein Problem. Sie fügen einfach den Code des Bildes zwischen <a>...</a> ein. Damit ist das Bild sozusagen der "Linktext".
Der Internet Explorer (und manch andere Browser), der von den meisten Surfern genutzt wird, fügt dann jedoch einen Rahmen um das Bild ein.
Um dies zu verhindern müssen Sie dem Attribut "border" mit dem Wert "0" den Rahmen explizit deaktivieren.
Der Code würde dann folgendermaßen aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<a href="http://www.npage.de/" target="_blank">
<img src="http://www.npage.de/test.jpg" border="0">
</a>
</body>
</html>
> Listing 4.3: Verlinktes Bild
Zusammengefasst Bilder werden mit dem <img> - Tag eingeleitet, welcher NICHT geschlossen wird.
Die Pfadangabe bzw. URL des Bildes wird mit dem Attribut "src" (Abk. für "source") angegeben.
Links werden mit dem <a> - Tag definiert, der Linktext kommt zwischen <a> und </a>.
Die Zielurl kommt in das Attribut "href", falls sich das Ziel im neuen Fenster öffnen soll, muss dem Attribut "target" den Wert "_blank" zugewiesen werden.
Falls ein Bild verlinkt werden soll, kommt dies ganz normal zwischen <a> und </a>, der Rahmen muss im <img> - Tag jedoch explizit deaktiviert werden, indem dem Attribut "border" der Wert "0" gegeben wird.
Zuletzt von Evoli am Sa Jun 28, 2008 12:43 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:49 pm
- Spoiler:
- Teil 5
Mittlerweile haben Sie schon Vieles über HTML gelernt und deshalb ist es nun auch Zeit für die ersten Übungen.
Speichern Sie alle Übungen am Besten in dem Ordner "uebungen" in Ihrem Arbeitsverzeichnis ab.
Auch empfehle ich Ihnen die Übungsdateien fortlaufend zu nummerieren, z. B. die erste Datei "uebung1.html" nennen, die zweite Datei "uebung2.html" und so weiter.
1. Legen Sie eine zweispaltige Tabelle an, wobei die erste Zeile eine Breite von 200 Pixeln hat und die zweite 300 Pixel (bedenken Sie: das Attribut "width" lässt sich auch bei einzelnen Zellen verwenden).
Fügen Sie anschließend den Satz "Das ist ein Testsatz." in die rechte Zelle ein. Das Wort "das" soll rot sein, das Wort "ist" kursiv, das Wort "ein" fett und das Wort "Testsatz" unterstrichen.
Der ganze Satz sollte so klein wie (bisher) möglich angezeigt werden.
2. Definieren Sie im HTML-Code eine Tabelle mit 3 Zellen, mit einer Rahmendicke von 1 Pixel.
Der Abstand zu allen Seiten sollte 3 Pixel betragen. Fügen Sie in die erste Zelle das Wort "Schuh" und in die 2.Zelle das Wort "Stadt" ein. Lassen Sie in der 3.Zelle das Wort "Schuster" anzeigen.
Die erste Zelle soll mittig ausgerichtet sein und die zweite nach rechts. Die dritte Zelle soll nach links ausgerichtet sein.
Insgesamt sollte die Breite der Tabelle 80% der Browserbreite betragen.
Die Tabelle sollte eine gelbe (yellow) Hintergrundfarbe haben.
3. Legen Sie eine HTML-Seite mit dem Titel "3.Übung" an, auf welcher sich ein beliebiges Bild befindet, das auf die Seite "http://www.htmltut.de" verweist.
Der Link soll sich in einem neuen Fenster öffnen.
Zuletzt von Evoli am Sa Jun 28, 2008 12:43 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:50 pm
- Spoiler:
- Teil 6
1. Eine zweispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit zwei Zellen integrieren.
Mit Hilfe des Attributes "width" können wir der ersten Zelle dann eine Breite von 200 Pixeln und der zweiten Zelle eine Breite von 300 Pixeln zuweisen.
Den Satz fügen wir in der zweiten Zelle zwischen <td> und </td> ein. Mit Hilfe des <font>-Tags und dem Attribut "color" können wir das Wort "das" rot ("red") einfärben; mit dem <i>-Tag das Wort "ist" kursiv (italic) darstellen; das Wort "ein" mit dem <b>-Tag fett (bold) hervorheben und das Wort "Testsatz" mit Hilfe von <u> unterstrichen.
Die derzeit kleinste Darstellung dieses Satzes erreichen wir mit dem "size"-Attribut des <font>-Tags. Dabei wird dem Attribut der Wert "-2" zugewiesen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table>
<tr>
<td width="200">
</td>
<td width="300">
<font size="-2"><font color="red">Das</font> <i>ist</i> <b>ein</b> <u>Testsatz</u></font>
</td>
</tr>
</table>
</body>
</html>
> Listing 6.1: Lösung zu Übung 1
2. Eine dreispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit drei Zellen integrieren. Indem wir dem Attribut "border" den Wert "1" zuweisen, erhalten wir eine Rahmendicke von 1 Pixel.
Mit cellpadding="3" wird ein Abstand von 3 Pixel zu allen Seiten von jeder Zelle aus erwirkt. Die Wörter "Schuh", "Stadt" und "Schuster" müssen zwischen das erste, zweite bzw. dritte <td> und </td> eingefügt werden.
Richten Sie die erste Zelle mittig aus, indem Sie dieser das Attribut "align" mit dem Wert "center" (dt. mittig) zuweisen. Die zweite Zelle können Sie nach rechts ausrichten, indem Sie dem Attribut "align" dort den Wert "right" (dt. rechts) zuweisen. Da links die Standard-Ausrichtung ist müssen Sie der 3.Zelle keine weiteren Einstellungen zuweisen.
Die Tabellengröße können Sie auf 80% der Browserbreite festlegen, indem Sie dem Attribut "width" (dt. Breite) im <table>-Tag den Wert "80%" zuweisen.
Um die Hintergrundfarbe der Tabelle gelb festzulegen, geben Sie bgcolor="yellow" im <table>-Tag an.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table border="1" cellpadding="3" width="80%" bgcolor="yellow">
<tr>
<td align="center">
Schuh
</td>
<td align="right">
Stadt
</td>
<td>
Schuster
</td>
</tr>
</table>
</body>
</html>
> Listing 6.2: Lösung zu Übung 2
3. Um der HTML-Seite den Titel "3.Übung" zu geben, müssen Sie diesen Text zwischen <title> und </title> (im <head>-Bereich) einfügen.
Binden Sie mit dem <img>-Tag (im <body>-Bereich) ein Bild in Ihre Seite ein, wobei Sie dem Attribut "src" (Abk. für "source") die Pfadangabe Ihres Bildes zuweisen. Denken Sie daran: Der <img>-Tag wird nicht geschlossen!
Fügen Sie um das Bild herum einen Link mit dem <a>-Tag ein, mit dem "href"-Attribut können Sie den Verweis auf "http://www.htmltut.de" setzen und mit target="_blank" geben Sie an, dass das Ziel in einem neuen Fenster geöffnet werden soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3.Übung</title>
</head>
<body>
<a href="http://www.htmltut.de" target="_blank">
<img src="http://www.htmltut.de/images/beispiel.jpg">
</a>
</body>
</html>
> Listing 6.3: Lösung zu Übung 3
Zuletzt von Evoli am Sa Jun 28, 2008 12:44 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:50 pm
- Spoiler:
- Teil 7
Nun haben Sie bereits die groben Grundlagen von HTML gelernt, unter anderem auch wie Sie beispielsweise Links setzen.
In diesem Abschnitt wird Ihnen aufbauend darauf gezeigt, wie eine Adressierung (z. B. bei Links) aussehen muss.
Adressierung - was ist das genau?
Wenn Sie beispielsweise eine andere HTML-Seite auf Ihrem Webspace in Ihrem Menü verlinken möchten, dann ist der Wert des Attributes "href" im Link (<a>-Tag) eine Adresse.
Der Vorgang diese Adresse zu setzen nennt sich "Adressierung".
Bei der Adressierung gibt es dabei 2 mögliche Arten von Adressen, die verlinkt werden können:
- Absolute Adressierung
Absolute Adressen beginnen (meistens) mit "http://". Für diese Verlinkung kann einfach die aktuelle Adresse aus der Adresszeile des Browsers kopiert werden.
Beispiele dafür wären "http://www.htmltut.de/teil1.html" oder "http://www.phptut.de/teil1.php".
- Relative Adressierung
Relative Adressen beginnen nicht mit "http://", sondern normalerweise mit einem Punkt oder direkt mit dem Pfad des Objektes, auf welches die Adresse verweist.
Ausgehend von der relativen Adressierung ist immer der jetzige Standort.
Befinden Sie sich also beispielsweise gerade unter "http://www.htmltut.de/abc/", so würde bei der relativen Adresse "abc.html" die Datei, die sich unter "http://www.htmltut.de/abc/abc.html" befindet, aufgerufen werden.
Würden Sie sich jetzt jedoch unter "http://www.htmltut.de/abc/def/" befinden und die relative Adresse "abc.html" heißen, so würde die Datei, die sich unter "http://www.htmltut.de/abc/def/abc.html" befindet, aufgerufen werden.
Angenommen Sie befinden sich gerade unter "http://www.htmltut.de/abc/def/" und möchten die Datei "http://www.htmltut.de/abc/abc.html" aufrufen, dann müssten Sie als relative Adresse "../abc.html" eingeben.
Durch die zwei Punkte am Anfang wird nämlich in das nächsthöhere Verzeichnis gewechselt.
Mit "./def/abc.html" können Sie beispielsweise die Datei "abc.html" des untergeordneten Verzeichnisses "def" aufrufen.
Wie Sie sehen gibt es also immer 2 Möglichkeiten der Adressierung. Ich empfehle Ihnen jedoch die relative Adressierung, da diese einerseits platzsparend ist (von der Adresslänge her gesehen) und andererseits auch bei einer Änderung der Domain beispielsweise keine Probleme entstehen.
Verwenden Sie jedoch ausschließlich die absolute Adressierung und Sie ändern Ihren Domainnamen, so müssen Sie auch alle absoluten Adressen entsprechend anpassen.
Veranschaulichen wir die Adressierung nochmals an einem Beispiel: Sie halten sich gerade im Verzeichnis "http://www.htmltut.de/test/" auf und möchten von dort aus die Datei "beispiel.html", die sich unter "http://www.htmltut.de/test2/" befindet, verlinken.
Dazu gibt es 2 Möglichkeiten:
Mit der absoluten Adressierung könnten Sie einfach auf "http://www.htmltut.de/test2/beispiel.html" verweisen.
Unter Verwendung der relativen Adressierung müssten Sie "../test2/beispiel.html" verlinken (mit den 2 Punkten wird das nächsthöhere Verzeichnis ausgewählt und dann wird das Verzeichnis "test2" aufgerufen).
Relative und absolute Adressierungen können überall verwendet werden, wo Adressen erwartet werden (z. B. bei "href" im <a>-Tag oder "src" im <img>-Tag).
Zuletzt von Evoli am Sa Jun 28, 2008 12:44 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:51 pm
- Spoiler:
- Teil 8
Die Verlinkung verschiedener Objekte und Unterseiten kennen Sie bereits.
Bei längeren Unterseiten ist es oftmals jedoch zur besseren Navigation erforderlich bestimmte Stellen in derselben Seite verlinken zu können, weshalb Sie in diesem Teil noch Anker kennenlernen werden.
Zuerst jedoch zu den Überschriften:
Überschriften werden mit den Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> definiert. Dabei steht das "h" in den Tags für "heading" (dt. Überschrift).
<h1> definiert die wichtigste Überschrift, welche am Größten hervorgehoben wird, bis <h6> werden die Überschriften dann immer kleiner. Die Tags <h1> bis <h6> müssen alle wieder geschlossen werden.
Die Überschriften-Tags erzeugen automatisch, falls benötigt, vor und nach der Überschrift einen eigenen Absatz (bzw. Zeilenumbruch). Deshalb zählt <h1> bis <h6> zu den sogenannten "Block-Elementen".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Übersicht der Überschriften</title>
</head>
<body>
<h1>1.Überschrift</h1>
<h2>2.Überschrift</h2>
<h3>3.Überschrift</h3>
<h4>4.Überschrift</h4>
<h5>5.Überschrift</h5>
<h6>6.Überschrift</h6>
</body>
</html>
> Listing 8.1: Übersicht der <h1>- bis <h6>-Tags
Um auf dieselbe HTML-Seite an verschiedenen Stellen verlinken zu können, müssen Sie sogenannte "Anker" anlegen. Dazu müssen Sie dem "name"-Attribut im <a>-Tag einen eigenen, einmaligen Namen zuweisen (der <a>-Tag stellt in diesem Fall keinen Link dar!).
Somit haben Sie schon einen Anker erstellt. Bedenken Sie jedoch immer, dass <a>-Tags immer geschlossen werden müssen.
Anker bestehen nämlich lediglich aus einem <a>-Tag mit dem "name"-Attribut.
Durch Eingabe der normalen Adressierung gefolgt von "#" und dem Namen des Ankers kommen Sie dann sofort zu der Stelle, wo Sie den Anker (den <a>-Tag in obigem Beispiel) platziert haben.
Wenn sich der Anker auf derselben HTML-Seite befindet, wie der Link können Sie die Seitenadresse weglassen und nur "#test" z. B. als Adresse verwenden.
Beispiel für eine Adresse mit Anker: testseite.html#test
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Anker (1)</title>
</head>
<body>
<a href="#test1">Link zum 1.Anker</a><br>
<a href="#test2">Link zum 2.Anker</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="test1"></a>
Hier ist der 1.Anker.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="test2"></a>
Hier ist der 2.Anker.
</body>
</html>
> Listing 8.2: <a>-Tags als Anker
Erklärung In den beiden ersten Zeilen des <body>-Bereiches werden die Links gesetzt zu den Ankern gesetzt, die weiter unten gesetzt werden (Anker "Test1" z. B. mit "<a name="test1"></a>").
Die vielen <br>-Tags im Beispiel dienen lediglich zur Veranschaulichung des Beispiels, denn wenn die Anker zu weit oben an den Links wären, würde kein Effekt bei einem Klick auf die Links zu sehen sein.
Nicht nur <a>-Tags können als Anker fungieren, sondern auch die <h1>- bis <h6>-Tags.
Hierzu wird den Tags über das Attribut "id" (dieselbe Funktionsweise wie das Attribut "name" beim <a>-Tag) ein jeweils eindeutiger Name zugewiesen.
Die Links auf Anker können hier, ebenfalls wie bei den <a>-Tags, mit der normalen Adressierung gefolgt von "#" und dem Namen des Ankers gesetzt werden.
Hinweis: Mit dem vordefinierten Anker "top" können Sie bei jeder HTML-Seite ganz an den Anfang zurückverweisen (er ist bereits vordefiniert, d. h. er funktioniert, ohne dass Sie diesen einfügen müssen). Mit "<a href="#top">nach oben</a>" können Sie also nach ganz oben wieder verweisen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Anker (2)</title>
</head>
<body>
<a href="#test1">Link zum 1.Anker</a><br>
<a href="#test2">Link zum 2.Anker</a><br>
<a href="#test3">Link zum 3.Anker</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="test1">Hier ist der 1.Anker.</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="test2">Hier ist der 2.Anker.</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h5 id="test3">Hier ist der 3.Anker.</h5><br><br>
<a href="#top">nach oben</a>
</body>
</html>
> Listing 8.3: <h1>- bis <h6>-Tags als Anker
Zusammengefasst Überschriften können mit den Tags <h1> bis <h6> erstellt werden, wobei <h1> die größte Überschrift erzeugt.
Sogenannte "Anker" ermöglichen es auf verschiedene Stellen einer HTML-Seite zu verweisen.
Wenn <a>-Tags als Anker verwendet werden sollen, muss diesem ein eindeutiger (d. h. einmaliger) Name per "name"-Attribut zugewiesen werden.
Sollen die <h1>- bis <h6>-Tags als Anker fungieren, wird ihnen ein eindeutiger Name mit Hilfe des "id"-Attributes zugewiesen. Beide Tags müssen geschlossen werden.
Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen.
Verlinkt werden kann auf einen Anker mit der normalen Adressierung gefolgt von "#" und dem Ankername.
Zuletzt von Evoli am Sa Jun 28, 2008 12:44 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:52 pm
- Spoiler:
- Teil 9
Formulare haben im Internet eine große Bedeutung. Denn mit Hilfe von Formularen können Daten, die der User eingibt, verarbeitet werden.
Auch Foren oder Suchen beinhalten Formulare. Wie Sie sehen, sind Formulare also wichtig im Internet.
Woraus besteht ein Formular überhaupt?
Formulare bestehen aus verschiedenen Elementen, zum Beispiel aus einem Textfeld, wo der Benutzer Texte eingeben kann und aus einer Radiobox, wo der Benutzer eine Sache auswählen kann.
Durch Formulare wird es möglich mit dem Benutzer in Verbindung zu treten und seine Eingaben und Daten zu bekommen.
Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Für den <form>-Tag gibt es zwei wichtige Attribute, die wir uns näher ansehen sollten.
- Action
Das "action"-Attribut definiert die Zieldatei, wohin das Formular geschickt werden soll, also die Datei, die das Formular anschließend bearbeitet.
- Method
Das Attribut "method" definiert die Methode (also Art und Weise) wie die Daten übertragen werden.
Dabei gibt es zwei Methoden zur Auswahl: POST und GET.
Bei GET werden die Daten des Formulars an die Adresse angehängt, test.php?variable1=test1&variable2=testxyz ist ein Beispiel für eine solche Adresse.
Dabei trennt ein Fragezeichen die eigentliche Adresse von den zu übergebenden Daten. Die einzelnen Inhalte werden den Feldernamen durch ein Istgleich (=) zugewiesen, die Felder wiederum sind durch ein kaufmännisches Und (&) getrennt.
Obwohl die GET-Methode standardmäßig eingestellt ist, möchte ich Ihnen davon sehr abraten. Da die Daten nämlich in der URL mit angehängt werden, kann dies bei einer bestimmten Länge zu Problemen führen (oft ist die Gesamtlänge der URLs auf 1024 Zeichen beschränkt).
Bei der POST-Methode, die ich Ihnen empfehle, können unbegrenzt viele Daten übergeben werden. Dabei erfolgt die Datenübertragung unsichtbar für den User (d. h. er sieht diese nicht in der Adressleiste seines Browsers).
Im Folgenden ein Beispiel für den Grundaufbau eines Formulars:
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
...
</form>
> Listing 9.1: Grundaufbau eines Formulars
Die Werte der Formularfelder werden beim Absenden des Formulars übermittelt. Meist werden sie mit dem <input>-Tag dargestellt.
Dabei ist das wichtigste Attribut am Anfang "type". Es gibt an, welches Formularfeld der <input>-Tag ist (z. B. Textfeld oder Auswahlfeld).
Der <input>-Tag wird nicht wieder geschlossen!
Wird dem Attribut "type" beispielsweise der Wert "text" zugewiesen, so erscheint am Bildschirm etwas ganz anderes, als bei dem Wert "radio".
Wichtige Werte für das Attribut "type" (sehen Sie sich das unten folgende Online-Beispiel an, falls Sie sich das Aussehen eines Feldes nicht vorstellen können):
text Erzeugt ein einzeiliges Textfeld, in welches der Benutzer etwas eingeben kann.
password Erzeugt ein einzeiliges Textfeld mit dem Unterschied, dass das Eingegebene nicht am Bildschirm lesbar angezeigt wird (Passwortfeld).
checkbox Erzeugt eine Checkbox. Eine Checkbox ist ein viereckiges Feld, wobei der Benutzer dieses Anklicken kann, sodass darin ein Haken erscheint. Es wird im Internet oftmals verwendet, um sicherzustellen, dass der Benutzer etwas gelesen hat.
radio Erzeugt eine Radiobox. Dabei wird dem Benutzer die Möglichkeit gegeben eine von mehreren Radioboxen auszuwählen.
submit Erzeugt einen Absende-Button. Sobald der Benutzer diesen Button betätigt, wird das Formular an die, in dem "action"-Attribut des <form>-Tags angegebene, Datei versendet.
Bedenken Sie bitte, dass mit dem <input>-Tag nur ein einzeiliges Textfeld erstellt werden kann.
Damit die Benutzereingaben später verarbeitet werden können (z. B. mit PHP), müssen Sie jedem Formularfeld einen eindeutigen Namen (der frei erfunden sein kann) mit dem "name"-Attribut zuweisen (welches Sie noch vom <a>-Tag kennen sollten).
Bei den Radioboxen gibt es eine kleine Besonderheit: Der Benutzer kann nur zwischen den Radioboxen wählen, die denselben Namen haben. Möchten Sie dem Benutzer also beispielsweise drei Auswahlmöglichkeiten zur Verfügung stellen, so müssen alle drei Auswahlmöglichkeiten denselben Name bekommen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formularfelder</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Textfeld (einzeilig): <input type="text" name="test"><br><br>
Passwortfeld: <input type="password" name="pass"><br><br>
Checkbox: <input type="checkbox" name="check"><br><br>
Radiobox: <input type="radio" name="g"><br><br>
<input type="submit">
</form>
</body>
</html>
> Listing 9.2: Übersicht der wichtigsten Formularfelder mit <input>
Hinweis: Bedenken Sie bitte, dass alle Formulare, die Sie hier sehen, keinen weiteren Sinn haben, da die verarbeitende Datei fehlt.
Bei einem Klick auf den Absende-Button werden Sie deshalb eine "Datei nicht gefunden" - Meldung erhalten.
Mit dem Attribut "value" können Sie bei einem Textfeld und Passwortfeld den Text definieren, der dort standardmäßig angezeigt wird wenn die Seite aufgerufen wird (also der vordefinierte Wert).
Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt.
Das heißt der "value"-Wert wird bei der Checkbox übermittelt, falls der Benutzer den Haken gesetzt hat, bei der Radiobox wird der "value"-Wert der markierten Radiobox übermittelt und beim Absende-Button der "value"-Wert des Buttons, der betätigt wurde (nur wichtig, falls es mehrere Buttons gibt).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formular-Beispiel</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Vorname: <input type="text" name="vorname" value="Vorname"><br><br>
Passwort: <input type="password" name="pass" value="Passwort"><br><br>
Macht es Spaß? <input type="checkbox" value="spass"><br><br>
Wählen Sie Ihr Geschlecht: <input type="radio" name="geschlecht"> männlich | <input type="radio" name="geschlecht"> weiblich<br><br>
<input type="submit"><br><br>
</form>
</body>
</html>
> Listing 9.3: Formular-Beispiel mit "value"-Werten
Zusammengefasst Formulare sind ein wichtiger Bestandteil des Internets, da Sie die Kommunikation mit dem Benutzer ermöglichen.
Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Das "action"-Attribut eines <form>-Tags gibt die Zieldatei an, die das Formular verarbeitet und wohin das Formular letztendlich gesendet wird.
Die Methode (Art und Weise), wie das Formular versendet werden soll, gibt das "method"-Attribut des <form>-Tags an. Mögliche Werte sind "post" (für den Benutzer unsichtbare Übertragung) und "get" (für den Benutzer sichtbare Übertragung; Daten werden an Adresszeile angehängt).
Formularelemente werden durch den <input>-Tag ausgedrückt. Das "type"-Attribut gibt an, welches Formularfeld letztlich dargestellt werden soll ("text" = Textfeld; "password" = Passwortfeld; "checkbox" = Checkbox; "radio" = Radiobox; "submit" = Absende-Button).
Zur späteren Verarbeitung des Formulars muss jedes Formularfeld einen einzigartigen Namen über das "name"-Attribut erhalten. Das "value"-Attribut gibt den voreingestellten Wert des Formularfelds an bzw. welcher Wert gesendet wird, je nach Benutzereingaben.
Zuletzt von Evoli am Sa Jun 28, 2008 11:56 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:54 pm
- Spoiler:
- Teil 10
Formulare haben im Internet eine große Bedeutung. Denn mit Hilfe von Formularen können Daten, die der User eingibt, verarbeitet werden.
Auch Foren oder Suchen beinhalten Formulare. Wie Sie sehen, sind Formulare also wichtig im Internet.
Woraus besteht ein Formular überhaupt?
Formulare bestehen aus verschiedenen Elementen, zum Beispiel aus einem Textfeld, wo der Benutzer Texte eingeben kann und aus einer Radiobox, wo der Benutzer eine Sache auswählen kann.
Durch Formulare wird es möglich mit dem Benutzer in Verbindung zu treten und seine Eingaben und Daten zu bekommen.
Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Für den <form>-Tag gibt es zwei wichtige Attribute, die wir uns näher ansehen sollten.
- Action
Das "action"-Attribut definiert die Zieldatei, wohin das Formular geschickt werden soll, also die Datei, die das Formular anschließend bearbeitet.
- Method
Das Attribut "method" definiert die Methode (also Art und Weise) wie die Daten übertragen werden.
Dabei gibt es zwei Methoden zur Auswahl: POST und GET.
Bei GET werden die Daten des Formulars an die Adresse angehängt, test.php?variable1=test1&variable2=testxyz ist ein Beispiel für eine solche Adresse.
Dabei trennt ein Fragezeichen die eigentliche Adresse von den zu übergebenden Daten. Die einzelnen Inhalte werden den Feldernamen durch ein Istgleich (=) zugewiesen, die Felder wiederum sind durch ein kaufmännisches Und (&) getrennt.
Obwohl die GET-Methode standardmäßig eingestellt ist, möchte ich Ihnen davon sehr abraten. Da die Daten nämlich in der URL mit angehängt werden, kann dies bei einer bestimmten Länge zu Problemen führen (oft ist die Gesamtlänge der URLs auf 1024 Zeichen beschränkt).
Bei der POST-Methode, die ich Ihnen empfehle, können unbegrenzt viele Daten übergeben werden. Dabei erfolgt die Datenübertragung unsichtbar für den User (d. h. er sieht diese nicht in der Adressleiste seines Browsers).
Im Folgenden ein Beispiel für den Grundaufbau eines Formulars:
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
...
</form>
> Listing 9.1: Grundaufbau eines Formulars
Die Werte der Formularfelder werden beim Absenden des Formulars übermittelt. Meist werden sie mit dem <input>-Tag dargestellt.
Dabei ist das wichtigste Attribut am Anfang "type". Es gibt an, welches Formularfeld der <input>-Tag ist (z. B. Textfeld oder Auswahlfeld).
Der <input>-Tag wird nicht wieder geschlossen!
Wird dem Attribut "type" beispielsweise der Wert "text" zugewiesen, so erscheint am Bildschirm etwas ganz anderes, als bei dem Wert "radio".
Wichtige Werte für das Attribut "type" (sehen Sie sich das unten folgende Online-Beispiel an, falls Sie sich das Aussehen eines Feldes nicht vorstellen können):
text Erzeugt ein einzeiliges Textfeld, in welches der Benutzer etwas eingeben kann.
password Erzeugt ein einzeiliges Textfeld mit dem Unterschied, dass das Eingegebene nicht am Bildschirm lesbar angezeigt wird (Passwortfeld).
checkbox Erzeugt eine Checkbox. Eine Checkbox ist ein viereckiges Feld, wobei der Benutzer dieses Anklicken kann, sodass darin ein Haken erscheint. Es wird im Internet oftmals verwendet, um sicherzustellen, dass der Benutzer etwas gelesen hat.
radio Erzeugt eine Radiobox. Dabei wird dem Benutzer die Möglichkeit gegeben eine von mehreren Radioboxen auszuwählen.
submit Erzeugt einen Absende-Button. Sobald der Benutzer diesen Button betätigt, wird das Formular an die, in dem "action"-Attribut des <form>-Tags angegebene, Datei versendet.
Bedenken Sie bitte, dass mit dem <input>-Tag nur ein einzeiliges Textfeld erstellt werden kann.
Damit die Benutzereingaben später verarbeitet werden können (z. B. mit PHP), müssen Sie jedem Formularfeld einen eindeutigen Namen (der frei erfunden sein kann) mit dem "name"-Attribut zuweisen (welches Sie noch vom <a>-Tag kennen sollten).
Bei den Radioboxen gibt es eine kleine Besonderheit: Der Benutzer kann nur zwischen den Radioboxen wählen, die denselben Namen haben. Möchten Sie dem Benutzer also beispielsweise drei Auswahlmöglichkeiten zur Verfügung stellen, so müssen alle drei Auswahlmöglichkeiten denselben Name bekommen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formularfelder</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Textfeld (einzeilig): <input type="text" name="test"><br><br>
Passwortfeld: <input type="password" name="pass"><br><br>
Checkbox: <input type="checkbox" name="check"><br><br>
Radiobox: <input type="radio" name="g"><br><br>
<input type="submit">
</form>
</body>
</html>
> Listing 9.2: Übersicht der wichtigsten Formularfelder mit <input>
Hinweis: Bedenken Sie bitte, dass alle Formulare, die Sie hier sehen, keinen weiteren Sinn haben, da die verarbeitende Datei fehlt.
Bei einem Klick auf den Absende-Button werden Sie deshalb eine "Datei nicht gefunden" - Meldung erhalten.
Mit dem Attribut "value" können Sie bei einem Textfeld und Passwortfeld den Text definieren, der dort standardmäßig angezeigt wird wenn die Seite aufgerufen wird (also der vordefinierte Wert).
Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt.
Das heißt der "value"-Wert wird bei der Checkbox übermittelt, falls der Benutzer den Haken gesetzt hat, bei der Radiobox wird der "value"-Wert der markierten Radiobox übermittelt und beim Absende-Button der "value"-Wert des Buttons, der betätigt wurde (nur wichtig, falls es mehrere Buttons gibt).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formular-Beispiel</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Vorname: <input type="text" name="vorname" value="Vorname"><br><br>
Passwort: <input type="password" name="pass" value="Passwort"><br><br>
Macht es Spaß? <input type="checkbox" value="spass"><br><br>
Wählen Sie Ihr Geschlecht: <input type="radio" name="geschlecht"> männlich | <input type="radio" name="geschlecht"> weiblich<br><br>
<input type="submit"><br><br>
</form>
</body>
</html>
> Listing 9.3: Formular-Beispiel mit "value"-Werten
Zusammengefasst Formulare sind ein wichtiger Bestandteil des Internets, da Sie die Kommunikation mit dem Benutzer ermöglichen.
Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Das "action"-Attribut eines <form>-Tags gibt die Zieldatei an, die das Formular verarbeitet und wohin das Formular letztendlich gesendet wird.
Die Methode (Art und Weise), wie das Formular versendet werden soll, gibt das "method"-Attribut des <form>-Tags an. Mögliche Werte sind "post" (für den Benutzer unsichtbare Übertragung) und "get" (für den Benutzer sichtbare Übertragung; Daten werden an Adresszeile angehängt).
Formularelemente werden durch den <input>-Tag ausgedrückt. Das "type"-Attribut gibt an, welches Formularfeld letztlich dargestellt werden soll ("text" = Textfeld; "password" = Passwortfeld; "checkbox" = Checkbox; "radio" = Radiobox; "submit" = Absende-Button).
Zur späteren Verarbeitung des Formulars muss jedes Formularfeld einen einzigartigen Namen über das "name"-Attribut erhalten. Das "value"-Attribut gibt den voreingestellten Wert des Formularfelds an bzw. welcher Wert gesendet wird, je nach Benutzereingaben.
Zuletzt von Evoli am Sa Jun 28, 2008 11:56 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:55 pm
- Spoiler:
- Teil 11
Nun kennen Sie bereits die wichtigsten Formularelemente, die sich mit einem <input>-Tag erzeugen lassen.
Jedoch gibt es noch weitere Formularelemente, die nicht mit einem <input>-Tag erzeugt werden können, wie z. B. ein Auswahlfeld.
Ein Auswahlfeld wird mit einem eigenem Tag dafür, nämlich mit einem <select>-Tag erzeugt. Der <select>-Tag muss geschlossen werden!
Der <select>-Tag unterstützt wie der <input>-Tag das Attribut "name", welches dem Formularfeld einen eindeutigen Namen zuweist.
In den <select>-Tag hinein kommen dann die eigentlichen Auswahlmöglichkeiten, die mit einem <option>-Tag im Code erzeugt werden.
Dabei funktioniert das Prinzip ganz ähnlich wie bei den Radioboxen: Die einzelnen Auswahlmöglichkeiten bekommen über das "value"-Attribut unterschiedliche Werte zugewiesen, wobei der "value"-Wert der Auswahlmöglichkeit übertragen wird, die der Benutzer ausgewählt hat.
Somit wird es möglich später bei der Auswertung festzustellen, welche Möglichkeit der Benutzer ausgewählt hat. Der <option>-Tag muss auch geschlossen werden. Der Text, den der Benutzer zum Auswählen sieht, kommt in den <option>-Tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel für ein Auswahlfeld</title>
</head>
<body>
<select name="beispiel">
<option value="xyz">Ja?</option>
<option value="abc">Nein!</option>
<option value="d">Wie bitte?</option>
<option value="ef">Ich weiß nicht.</option>
</select>
</form>
</body>
</html>
> Listing 10.1: Ein Auswahlfeld mit vier Auswahlmöglichkeiten
Möchten Sie nicht nur einzeilige Textfelder, sondern mehrzeilige Textfelder erstellen? Mit dem <textarea>-Tag können Sie mehrzeilige Textfelder erstellen.
Das "cols"-Attribut gibt die Anzahl der Zeichen an, die in eine Zeile des mehrzeiligen Textfeldes passen soll und das "rows"-Attribut definiert die Anzahl der Zeilen, über die das Textfeld geht.
Wie bei den anderen Formularfeldern auch definiert das "name"-Attribut, das in den <textarea>-Tag kommt einen eindeutigen Namen für das Formularfeld.
Der <textarea>-Tag muss geschlossen werden, zwischen dem geöffneten und geschlossenen Tag kommt dann der Ursprungs-Wert, der beim Aufrufen der Seite in dem Textfeld erscheint (vergleichbar mit dem "value"-Attribut bei <input>-Tags).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel für eine mehrzeilige Textbox</title>
</head>
<body>
<textarea cols="50" rows="10">Ein Beispiel</textarea>
</form>
</body>
</html>
> Listing 10.2: Eine mehrzeilige Textbox
Weitere wichtige Attribute für den <input>-Tag:
"maxlength" definiert bei einzeiligen Text- und Passwortfeldern die maximale Länge an Zeichen, die eingegeben werden darf.
"readonly" ist das erste Attribut, welches Sie lernen, welches keinen zugewiesenen Wert hat. D. h. es wird einfach nur in den <input>-Tag hineingeschrieben, ohne Wertzuweisung (Beispiel: <input type="text" value="Test" readonly>).Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt. Es darf nur bei einzeiligen Text- und Passwortfeldern, sowie mehrzeiligen Textfeldern eingesetzt werden.
"size" gibt die dargestellte Größe (gemessen in Zeichen) eines einzeiligen Text- und Passwortfeldes an.
"checked" legt bei Radio- und Checkboxen fest, ob das Element standardmäßig (beim Aufrufen) markiert ist. Wie das "readonly"-Attribut wird auch diesem Attribut kein Wert definiert. Bei Radioboxen darf nur jeweils ein Feld einer Gruppe (Radioboxen, die denselben Namen haben) dieses Attribut zugewiesen bekommen.
Bei einem Absende-Button gibt das "value"-Attribut die angezeigte Aufschrift auf dem Button an.
Im Folgenden ein Beispiel mit allen Formularfeldern und Attributen, die Sie kennen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formular-Beispiel</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Ausgewählt: <input type="text" name="ausgewaehlt" value="Kategorie 7" readonly><br><br>
Vorname: <input type="text" name="vorname" value="Vorname" size="30" maxlength="22"><br><br>
Passwort: <input type="password" name="pass" value="Passwort"size="20" maxlength="15"><br><br>
Macht es Spaß? <input type="checkbox" value="spass" checked><br><br>
Wählen Sie Ihr Geschlecht: <input type="radio" name="geschlecht"> männlich | <input type="radio" name="geschlecht" checked> weiblich<br><br>
Wählen Sie Zutreffendes: <select name="beispiel">
<option value="xyz">Ja?</option>
<option value="abc">Nein!</option>
<option value="d">Wie bitte?</option>
<option value="ef">Ich weiß nicht.</option>
</select><br><br>
Geben Sie bitte einen Kommentar ab:<br><br>
<textarea cols="50" rows="10">Ihr Kommentar</textarea><br><br>
<input type="submit" value="Absenden">
</form>
</body>
</html>
> Listing 10.3: Formular-Beispiel mit allen bereits bekannten Formularfeldern
Zusammengefasst Ein Auswahlfeld wird mit einem <select>-Tag erstellt.
Die einzelnen Auswahlmöglichkeiten werden dann mit Hilfe von <option>-Tags erzeugt.
Über das "value"-Attribut bekommen die Auswahlmöglichkeiten eindeutige Namen zugewiesen. Der "value"-Wert des ausgewählten Feldes wird beim Absenden des Formulars mitgesendet, sodass sich später erkennen lässt, welche Möglichkeit ausgewählt wurde.
Mehrzeilige Textfelder können mit dem <textarea>-Tag erstellt werden. Das &value;cols"-Attribut gibt die Anzahl der Zeichen an, die in einer Zeile des Textfeldes dargestellt werden und das "rows"-Attribut legt die Anzahl der Zeilen fest, über die das Textfeld geht.
Für <input>-Tags gibt es weitere wichtige Attribute: "maxlength" gibt die maximale Textlänge (in Zeichen) in einem einzeiligen Text- bzw. Passwortfeld an. "readonly" (ohne Zuweisungswert) legt fest, dass das Element nur angesehen werden darf (einzeilige Text- bzw. Passwortfelder und mehrzeilige Textfelder). "size" definiert die maximale Größe (in Zeichen) eines einzeiligen Text- bzw. Passwortfeldes. "checked" (ohne Zuweisungsfest) legt bei Radio- und Checkboxen fest, ob sie beim Aufruf der Seite markiert sind.
Der im "value"-Attribut angegebene Wert bei Absende-Buttons entspricht der angezeigten Aufschrift.
Zuletzt von Evoli am Sa Jun 28, 2008 11:56 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:55 pm
- Spoiler:
- Teil 12
Nun wissen Sie unter anderem auch, wie Sie Formularelemente erstellen und können bereits relative und absolute Adressen erstellen.
Speichern Sie alle Übungen am Besten in dem Ordner "uebungen" in Ihrem Arbeitsverzeichnis ab.
1. Legen Sie eine zweispaltige Tabelle an, wobei in der ersten Spalte jeweils ein Überbegriff (z. B. "Wohnort") für das Formularfeld rechts daneben in der zweiten Spalte steht.
Mit dem Formular soll der Wohnort (einzeiliges Textfeld), die dazugehörige Postleitzahl (einzeiliges Textfeld) und das Land (mit einem Auswahlfeld; z. B. Auswahl von "Deutschland", "Österreich" und "Schweiz") abgefragt werden.
Definieren Sie eine sinnvolle Größe und Maximallänge der einzelnen Felder. Vergessen Sie nicht den Absende-Button.
2. Erstellen Sie eine HTML-Seite mit einer ausreichenden Höhe, um darin zwei Anker definieren zu können.
Ganz oben auf der Seite sollen zwei Links sein, die auf jeweils einen unterschiedlichen Anker verweisen. Die Anker sollen mit Hilfe der größten Überschrift erzeugt werden, wobei die erste Überschrift grün (green) und die zweite Überschrift blau (blue) angezeigt werden soll.
Auf der Seite sollte ganz unten ein Link sein, der an den Anfang nach ganz oben verweist.
3. Erstellen Sie ein Formular mit einer Checkbox, die bereits vormarkiert ist und vier Radioboxen, wovon sich eine auswählen lassen soll.
Weiterhin soll in dem Formular ein einzeiliges Text-Feld enthalten sein, dessen Inhalt nur gelesen werden kann. In der Textbox soll beim Aufruf der Text "Titel" stehen.
Ein Passwort-Feld und eine mehrzeilige Textbox sollten ebenfalls vorkommen. Ein Absende-Button sollte nicht fehlen.
Zuletzt von Evoli am Sa Jun 28, 2008 11:56 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:56 pm
- Spoiler:
- Teil 13
1. Eine zweispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit zwei Zellen integrieren.
In die erste Spalte (jeweils immer das erste <td>) schreiben wir die Überschrift des Formularfeldes hinein (z. B. "Wohnort").
Vergessen Sie nicht das Formular mit dem <form>-Tag zu öffnen, bevor Sie mit dem <input>-Tag und dem Attribut "type" (mit dem Wert "text") ein einzeiliges Textfeld erstellen. Auswahlfelder werden mit Hilfe von <select>-Tag erstellt, dabei werden die einzelnen Optionen werden mit Hilfe von <option>-Tags definiert.
Eine sinnvolle Größe kann mit dem "size"-Attribut definiert werden, eine Maximallänge der Felder kann im "maxlength"-Attribut angegeben werden.
Ein Absendebutton lässt sich mit <input>-Tag mit type="submit" darstellen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 1 [2]</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
<table>
<tr>
<td width="100">
Wohnort
</td>
<td>
<input type="text" size="30" maxlength="50" name="wohnort">
</td>
</tr>
<tr>
<td width="100">
Postleitzahl
</td>
<td>
<input type="text" size="5" maxlength="6" name="postleitzahl">
</td>
</tr>
<tr>
<td width="100">
Land
</td>
<td>
<select name="land">
<option value="de">Deutschland</option>
<option value="a">Österreich</option>
<option value="ch">Schweiz</option>
</select>
</td>
</tr>
<tr>
<td width="100">
</td>
<td>
<input type="submit" value="Absenden">
</td>
</tr>
</table>
</form>
</body>
</html>
> Listing 12.1: Lösung zu Übung 1
2. Mit dem <a>-Tag und dem Zeichen # sowie dem Ankernamen im "href"-Attribut können Sie zwei Links zu den entsprechenden Ankern erstellen.
Platzieren Sie nach einigen <br>-Tags den ersten Anker mit dem <h1>-Tag. Über das Attribut "id" können Sie der Überschrift einen eindeutigen Ankernamen zuweisen. Verfahren Sie mit dem 2.Anker genauso.
Um den Text der ersten Überschrift grün anzeigen zu lassen, müssen Sie mit dem <font>-Tag (welchem das Attribut "color" mit dem Wert "green" zugewiesen ist) den Überschriftentext des 1.Ankers umschließen.
Verfahren Sie analog dazu mit dem zweiten Anker, aber weisen Sie dem Attribut "color" dabei den Wert "blue" zu.
Platzieren Sie ganz unten auf der HTML-Seite einen Link, der mit dem Linkziel "#top" (im "href"-Attribut) nach oben verweist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 2 [2]</title>
</head>
<body>
<a href="#anker1">Link zum 1.Anker</a><br>
<a href="#anker2">Link zum 2.Anker</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="anker1"><font color="green">1.Anker</font></h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="anker2"><font color="blue">2.Anker</font></h1><br><br>
<a href="#top">nach oben</a>
</body>
</html>
> Listing 12.2: Lösung zu Übung 2
3. Vergessen Sie auch bei dieser Übung nicht das Formular mit dem <form>-Tag einzuleiten.
Mit einem <input>-Tag und dem Wert "checkbox" können Sie eine Checkbox erstellen. Mit dem leeren Attribut "checked" ist die Checkbox vormarkiert.
Die vier Radioboxen werden mit type="radio" im <input>-Tag erstellt. Geben Sie allen vier Radioboxen denselben Namen, damit sich nur eine davon auswählen lässt.
Mit type="text" im <input>-Tag wird ein einzeiliges Text-Feld erstellt. Wird dem einzeiligen Text-Feld das leere Attribut "readonly" zugewiesen, so lässt sich dessen Inhalt nur noch lesen. Das Attribut "value" ermöglicht es einen Standardwert beim Aufruf festzulegen.
Eine mehrzeilige Textbox wird mit einem <textarea>-Tag erstellt, ein Passwortfeld (password) wird wie ein einzeiliges Text-Feld per <input>-Tag definiert.
Indem dem Attribut "type" der Wert "submit" im <input>-Tag zugewiesen wird, kann ein Absende-Button erstellt werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lösung für Aufgabe 3 [2]</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Checkbox <input type="checkbox" name="test1" checked><br><br>
<input type="radio" name="test2" value="m1"> Möglichkeit 1 | <input type="radio" name="test2" value="m2"> Möglichkeit 2 | <input type="radio" name="test2" value="m3"> Möglichkeit 3 | <input type="radio" name="test2" value="m4"> Möglichkeit 4<br><br>
<input type="text" size="20" value="Titel" name="htmltut" readonly><br><br>
<input type="password" size="20" name="passwort"><br><br>
<textarea cols="50" rows="15"></textarea><br><br>
<input type="submit" value="Absenden">
</form>
</body>
</html>
> Listing 12.3: Lösung zu Übung 3
Zuletzt von Evoli am Sa Jun 28, 2008 11:57 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Fr Jun 27, 2008 8:57 pm
- Spoiler:
- Teil 13
Es gibt in HTML allgemein zwei unterschiedliche Typen von Elementen: - Block-Elemente
Block-Elemente sind Elemente, die automatisch einen eigenen Absatz erzeugen. Die Absatzgröße variiert dabei je nach Art des Block-Elementes.
Einfacher Text und Inline-Elemente können in Block-Elementen eingebunden sein. Viele Block-Elemente (z. B. <center> und <form>) erlauben es auch, dass darin weitere Block-Elemente platziert sind.
Beispiele für Block-Elemente:
<center>, <form>, <h1> bis <h6>, <table>
- Inline-Elemente
Bei Inline-Elementen wird kein automatischer Absatz dargestellt. Inline-Elemente sind sozusagen die "untergeordneten" Elemente der Block-Elemente.
In Inline-Elementen können normalerweise nur Text und weitere Inline-Elemente platziert werden, keine Block-Elemente.
Beispiele für Inline-Elmente:
<a>, <b>, <br>, <font>, <i>, <img>, <input>, <select>, <textarea>
Anklickbare eMail-Adressen
Nun wissen Sie bereits wie man einen Link (bzw. einen Anker) erstellt und wie man diesem ein bestimmtes Ziel zuweisen kann.
Allerdings gibt es auch noch die Möglichkeit diesem keine Website als Ziel zuzuweisen, sondern eine eMail-Adresse.
Dabei wird die eMail-Adresse nach "mailto:" in das "href"-Attribut des <a>-Tags geschrieben.
...
<a href="mailto:webmaster@htmltut.de">eMail-Adresse</a>
...
> Listing 13.1: Anklickbare eMail-Adresse
Beachten Sie jedoch bitte, dass zum Versenden von eMails beim Internetbenutzer ein eMail-Programm wie Outlook installiert sein muss.
Schreibrichtung
Die Schreibrichtung können Sie mit dem HTML-Tag <bdo> angeben. Dabei gibt das Attribut "dir" letztendlich an, in welcher Richtung der Text geschrieben wird.
Der Standardwert ist "ltr" (left to right; von links nach rechts). Mit dem Wert "rtl" (right to left) im Attribut wird der Text von rechts nach links angezeigt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Text von links nach rechts</title>
</head>
<body>
<bdo dir="rtl">Beispieltext...interessant, oder?</bdo>
</body>
</html>
> Listing 13.2: Text von rechts nach links
Weitere Informationen zu Tabellen
Nun kennen Sie bereits das Attribut "cellpadding", mit welchem Sie den Abstand innerhalb einer Zelle zu allen umliegenden Seiten festlegen können.
Jedoch gibt es auch noch das Attribut "cellspacing", welches den Abstand zu den umliegenden Seiten außerhalb der Zellen in Pixeln angibt.
Sie können beide Attribute für den <table>- und <td>-Tag verwenden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zellenabstände</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3" cellpadding="7">
<tr>
<td>1-1 Zelle</td>
<td>1-2 Zelle</td>
</tr>
<tr>
<td>2-1 Zelle</td>
<td>2-2 Zelle</td>
</tr>
</table>
</body>
</html>
> Listing 13.3: Beispiel für den Einsatz von "cellpadding" und "cellspacing"
In einer Tabelle muss die Tabellenstruktur immer gleich sein (z. B. 2 Zellen in der ersten Zeile bedeutet, dass in der zweiten Zeile auch 2 Zellen sein müssen).
Um diese etwas abändern zu können, gibt es die zwei Attribute "rowspan" und "colspan".
Dabei bestimmt das Attribut "rowspan", über wieviele Zeilen (= von links nach rechts eine Reihe) sich eine Zelle erstrecken soll.
Das Attribut "colspan" gibt an, über wieviele Spalten (von oben nach unten) sich eine Zelle erstrecken soll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"Gespannte" Zellen</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3" cellpadding="7">
<tr>
<td colspan="2">1-1 + 1-2 Zelle</td>
<td>1-3 Zelle</td>
</tr>
<tr>
<td>2-1 Zelle</td>
<td>2-2 Zelle</td>
<td rowspan="2">2-3 + 3-3 Zelle</td>
</tr>
<tr>
<td>3-1 Zelle</td>
<td>3-2 Zelle</td>
</tr>
</table>
</body>
</html>
</form>
</body>
</html>
> Listing 13.4: Beispiel für den Einsatz von "rowspan" und "colspan"
Zuletzt von Evoli am Sa Jun 28, 2008 11:57 am bearbeitet; insgesamt 1-mal bearbeitet
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Groovy- Moderator
- Anzahl der Beiträge : 42
Alter : 30
Ort : NRW
Freundschaftscode : Auf Anfrage!
Anmeldedatum : 19.05.08 -
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Evoli Sa Jun 28, 2008 4:38 pm
Ich habe bei NPage extra Nachgefragt. Sie haben ja Gesagt
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Glurak 2-
Anzahl der Beiträge : 728
Alter : 28
Ort : Augsburg
Ermahnungen : 3
Freundschaftscode : keine
Anmeldedatum : 01.03.08 -
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Glurak91 Mo Jun 30, 2008 3:38 pm
Groovy hat Recht.
1.Quelle angeben!!!
2.Nicht Wortwörtlich übernehmen
Das ganze ist ne Arbeit von 30 min, wenn überhaubt...
1.Quelle angeben!!!
2.Nicht Wortwörtlich übernehmen
Das ganze ist ne Arbeit von 30 min, wenn überhaubt...
Glurak91- Moderator
- Anzahl der Beiträge : 901
Anmeldedatum : 16.05.08
purasch- Anzahl der Beiträge : 143
Alter : 29
Ort : 9330 althofen
Ermahnungen : 1
Anmeldedatum : 02.03.08 -
Re: HTML Lernkurs
von Evoli Do Jul 03, 2008 5:27 pm
Ich habe ja die Quelle Angeben.
Und noch für alle zum Mitschreiben: Ich habe NPage Gefragt! Nicht ohne erlaubnis kopiert!
Und noch für alle zum Mitschreiben: Ich habe NPage Gefragt! Nicht ohne erlaubnis kopiert!
Evoli- Anzahl der Beiträge : 638
Alter : 25
Ort : NRW
Anmeldedatum : 01.03.08 -
Re: HTML Lernkurs
von Myotisagumon Mo Aug 25, 2008 9:30 pm
Schön, hättest aber nicht für jedes einzelne Kapitel neu posten müssen, zumal du auch spoiler benutzt hast.
Myotisagumon- Anzahl der Beiträge : 172
Alter : 28
Ermahnungen : 1
Gewinnpunkte : 1
Anmeldedatum : 04.04.08 -
:: Sonstiges :: Internet & Technik
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten|
|
|