Moin,
dies ist ein Tutorial über die Grundlagen von HTML.
Da dieses Tutorial vermutlich einige Posts in Anspruch nehmen wird, werde ich es gegliedert geben und versuchen täglich zu erweitern.
Es wird einige Tage dauern, bis die ersten paar Kapitel fertig sind, da ich noch einige andere Sachen zu tun habe, habt bitte Geduld.
Ich werde versuchen, täglich mind. ein Kapitel zu schreiben.
Dies soll kein Standart 15 Min. Tutorial werden, wo auf ein paar Kleinigkeiten schnell angesprochen wird und viele Fragen entstehen,
sondern ein möglichst vollständiges Tutorial, das möglichst ausführlich gehalten ist.
Da auch ich nur ein Mensch bin, kann ich auch mal Fehler machen. Falls wer einen Fehler finden sollte, kann er dies mir am besten via pn berichten,
danke dafür.
Ich hoffe einige werden dank dem Tutorial soweit in HTML eingewiesen, dass sie einfache Webseiten erstellen und gestalten können.

Solltet ihr Fragen, Ideen oder Kritik zu diesem Tutorial haben, meldet euch bitte in diesem Thread: [Sammelthread] Fragen/Ideen zu: HTML Grundkurs/ Tutorial

Rechtliches: Dieses Tutorial wurde von mir (©Dennis321) für Easy-Scripting.net geschrieben und bedarf zur Übernahme auf anderen Plattformen meine Einverständnis.

Inhaltsverzeichnis:

1. Einleitung -Was ist HTML eigentlich und was braucht man dazu?
2. HTML, Tags und das Grundgerüst
3. Alles rund um Metatags
4. Kommentare in HTML
5. Der erste Seiteninhalt -Tags und Zeichen
6. Attribute und weitere Tags
7. Tabellen
8. Bilder
9. Bereiche in HTML (Block-Elemente)
10. id und class -Elemente Bezeichnen (mit CSS exkurs)
11. Formulare
12. Weitere Inputfelder und Attribut für Formulare
13. Auswahllisten und Formen
14. CSS Teil 2 (exkurs und eine Wiederhohlung)

1. Einleitung -Was ist HTML eigentlich?

Willkommen im ersten Kapitel des Tutorials.
HTML ist die Abkürzung für Hypertext Markup Language.
HTML ist eine Auszeichnungssprache und somit keine Programmiersprache.
Man kann mit sogut wie jedem Editor HTML Seiten schreiben (z.B. Microsoft Editor),
ich empfehle aber einen Editor, der die Syntax (Syntax = "Aufbau" der Elemente bzw. wie was in HTML aufgebaut ist) hervorheben kann.
Der meines erachtens nach beste Editor ist Notepad++, den man kostenlos hier herunterladen kann: Notepad++ download Seite
Da dieses Tutorial jedoch generell über HTML ist und nicht bezogen auf einem Editor, kann man jeden Editor benutzen, um dieses Tutorial zu folgen.
Wichtig ist, dass bei manchen Editoren, wie z.B. Notepad++ erst die Syntax hervorgehoben wird, wenn die Datei als HTML Datei (Endung .html oder .htm) gekennzeichnet ist.
Dazu kann man z.B. die Datei einfach unter DATEINAME.html oder DATEINAME.htm abspeichern.
Ob man nun als Endung .htm oder .html benutzt, ist egal. Jeder Browser kann diese lesen.

Der Browser öffnet in der Regel immer zuerst eine Datei namens index.html oder index.htm (andere Endungen wie .php sind ebenfalls möglich, darauf wird aber in einem evt. später kommendem Tutorial über php von mir eingegangen).
Somit sollte die Startseite der ersten Website index.htm oder index.html heißen.
Im weiteren Verlauf dieses Tutorials werde ich nur noch die Endung .htm benutzen, ob ihr nun ebenfalls .htm oder .html verwendet ist eure Sache.

HTML Dokumente sind Standartseiten im Internet und bieten ein Grundgerüst für komplexere Websiten.
Man kann aber auch schon mit HTML einfache gute Websiten erstellen, wobei hier CSS (Cascading Style Sheets) schnell gebraucht wird zum "designen" (Gestalten) einer Webseite.
Auf CSS werde ich in einem anderen Tutorial noch kommen,
HTML dient erstmal zum Strukturieren einer Website.






2. HTML, Tags und das Grundgerüst
HTML hat an sich ein festes Grundgerüst.
Der Vorteil daran ist, dass jeder Browser jede Website anzeigen kann.
Das erste, was in einer HTML Seite kommt, ist der Doctype. Dieser dient dem Browser als vorabinformationen, über die verwendete Syntax und sagt dem Browser, wie er die Website darstellen soll.
In diesem Tutorial habe ich nicht vor näher auf dem Doctyp einzugehen, dazu werde ich ebenfalls lieber ein kleines neues Tutorial schreiben, da dies hier sonst zu unübersichtlich wird.
Ein Beispiel für einen Doctyp, der in der HTML Dokumentation genannt wird ist:


Dieser Doctyp steht ganz oben über alles andere in der HTML Seite.
Nun kommen wir zum eigentlichen Grundgerüst.
Dies ist an sich logisch aufgebaut und besteht aus sogenannten Tags.
Ein Tag ist z.B. <title></title>, hierbei ist zu beachten, das ein geöffneter Tag (<title>) auch wieder geschlossen wird (</title>).
Zwischen den beiden Tags steht in diesem Fall übrigens der Titel (Im Browser in der Registerkarte angezeigter Titel) der Website.
Genauer darauf kommen wir später noch zu sprechen.

Das reine Grundgerüst für eine HTML Seite besteht eigentlich neben dem Doctyp nur aus 4 weiteren Tags.
Nach dem Doctyp bestimmen wir erstmal, das der Inhalt in HTML geschrieben ist.
dies tut man, indem man die komplette HTML Seite in den Tags <html></html> schreibt.
Innerhalb dieses Tags steht nun alles weitere, also quasi die komplette Website.

Innerhalb des html-Tags teilen wir die Seite nun in einen Kopfberreich und in eienn Inhaltsbereich auf.
der Kopfbereich steht in den Tags <head></head> und der darauf folgende Inhaltsbereich in den Tags <body></body>

Dies sieht insgesamt so aus:

Nun fehlt nur noch der Titel der Website,
der title-Tag steht im Header, in dem title-Tag wiederum steht der Titel unserer HTML Website (Hier mal "Erste Website").
Dies sieht nun so aus:


Nun haben wir an sich unsere erste kleine Website, die aber nichts außer einen Titel beinhaltet, der im Browser in der Registerkarte angezeigt wird.
Nun haben wir das Grundgerüst für eine HTML Seite. Im nächstem Kapitel geht es um Metatags.

3. Alles rund um Metatags

Im 3.Teil des Tutorials geht es um Metatags.
Metatags schreibt man in den Header (in der Regel über oder unter dem title-Tag).
Ein Metatag ist ein sogenannter Standalone-Tag namens meta.
Das heißt, dass der Tag nicht wie andere ein Anfangs und Endtag hat (wie z.B. <title> = Anfangstag </title> = Endtag),
er sieht z.B. so aus:

Einen Standalone-Tag haben wir übrigens am Anfang kennengelernt, und zwar den Doctyp, der ebenfalls ein Standalone-Tag ist.

Dieser Tag gibt an, wer der Autor der Seite ist. in dem Fall Dennis321.
Die einfachen Metatags sind häufig aufgebaut, indem sie Namen und Inhalt beinhalten.
Nehmen wir mal unser Beispiel mit dem Autor Metatag:

Der Name des Metatags ist: author
der Inhalt ist: Dennis321

Diese Informationen in einem Tag (wie z.B. name="author") nennt man auch Attributen.
So zimlich jeder Tag kann Attributen beinhalten, dazu aber später mehr.

die Attribute name im Metatag ist feststehend,
das heißt, dass der Metatag mit der Attribute name="author" immer den Autor enthalten muss.
Dabei bleibt das name="author" unverändert, lediglich den Namen in content="" passt man an.

Nun haben wir einen Metatag mit dem Namen des Autors.
nehmen wir nun unser Grundgerüst aus Kapitel 2 und fügen diesen Metatag mit ein, sieht dies so aus:


In diesem Prinzip gibt es viele Metatags, die man einfach untereinander auflistet.
weitere Beispiele mit kurzer Beschreibung sind:


Metatags werden von Suchmaschienen verwendet, um Informationen (Seitenname, Beschreibung, Datum, Thema, etc.) anzuzeigen.

Eine Seite mit all den Metatags sehe nun so aus:


Das wars soweit erstmal über Metatags.
Die korrekte Bezeichnung für diese sind übrigens Meta-Elemente,
Metatag ist lediglich ein mit der Zeit zustande gekommener Name,
der zwar an sich falsch wäre, dennoch in der heutigen Sprache gang und gebe ist.

4. Kommentare in HTML

Nachdem wir nun das Grundgerüst und die Metatags durchgenommen haben,
kommen wir nun zu Kommentare in HTML.
Kommentare in HTML sind Texte und kleine Anmerkungen, wie vom Browser nicht beachtet werden und somit die HTML Seite nicht beeinflusst.
Sie dienen dem Autor der Website (und den Lesern des Quellcodes) besser zu verstehen/ behalten, was man gemacht hat.
Kommentare sind meistens kurz und ehe stichwortartig geschrieben.
Wenn man eine Website im Browser (Queltextansicht) ansieht, sieht man ebenfalls die Kommentare.

In späteren Teilen des Tutorials werde ich immer wieder im Quelltext Kommentare benutzen, um etwas zu veranschaulichen.
Diese sind wie schon erwähnt für die Website selber unbedeutend und können weggelassen werden.
Ob eine Seite sehr viele oder gar keine Kommentare hat, beeinflusst die Seite selber nicht.

Es gibt 2 Arten von Kommentare:

• einzeiliger Kommentar
• mehrzeiliger Kommentar

Ein einzeiliger Kommentar ist wie der Name schon sagt nur in einer Zeile, ein mehrzeiliger Kommentar geht über mehreren Zeilen.
Ein Kommentar ist wie ein Standalone-Tag.

einzeilige Kommentare

Ein einzeiliger Kommentar:

Der Anfang des Kommentars ist <!-- und wird mit --> abgeschlossen.
Alles, was dazwischen steht, ist ein Kommentar und wird vom Browser ignoriert und nicht (außer im Quellcode) angezeigt.

mehrzeilige Kommentare
Dies ist ein zweizeiliger Kommentar:

In diesem Kommentar ist ebenfalls alles zwischen <!-- und--> ist ebenfalls ein Kommentar,
der einzige Unterschied ist, das man den Kommentar in 2 Zeilen schreibt.


Wie viel oder wenig Text man nun schreibt und wie viele Zeien man verwendet ist bei Kommentaren egal.
Hier ein einzeiliger Kommentar in unserem HTML Grundgerüst:



Browserabhängige Kommentare/ Bedingte Kommentare oder auch "Conditional Comments"

Dieser Abschnitt ist nicht zwingend nötig für einfache HTML Seiten,
ich empfehle aber ihn wenigstens einmal durchzulesen, da er eventuell Interessante Informationen für das spätere Erweitern der Website bietet.

Es gibt ebenfalls Kommentare, die nur für spezielle Versionen des Internetexplorers gelten.
Dies wird z.B. in CSS Strukturen benutzt, um ältere Browsers, die die CSS fehlerhaft einbinden würden auszuschließen.
Dabei ignoriert nur der Browser das, was im Kommentar steht, der angegeben ist. Für alle anderen Browser ist dies kein Kommentar, sondern ein Standartmäßiger Code.
Ebenfalls kann man damit normale HTML Codes nur für spezielle Browser anzeigen lassen.
Diesmal sind es 2 Kommentare, in denen die Bedingungen sind.
Die if Bedingungen an sich sehen so aus:

damit dies nun als Kommentar gilt, muss jeder Tag in einen Kommentar gesetzt werden.
Dies sieht wie folgt aus:

Alles, was nun zwischen diesen beiden Kommentaren steht, wird nur angezeigt, wenn man den Internetexplorer Version 8 benutzt.
Mit Inhalt sieht es so aus:


In dieser Bedingung haben wir nun direkt gesagt, für welche Version dies angezeigt werden soll.
Dies geht auch generell für alle Versionen:


Genauso kann man ihn nun mit einem NOT Operator (! also einem Ausrufezeichen) ausschließen:

Hier wird nur der Internetexplorer 8 ausgeschlossen.

Nun kann man auch alle Internetexplorer Versionen ausschließen:


Dies kann man ebenfalls für z.B. Windowsversionen machen, worauf ich aber erstmal nicht näher eingehen will.
Diese Kommentare mit Bedingung werden meistens wie oben schon beschrieben dazu genutzt, um für jeden Browser eine eigene CSS (Stylesheet) einzubinden,
um Fehler bei älteren Browser zu vermeiden.

Soviel zu den Kommentaren in HTML,
Im nächstem Teil werden wir in unserer Website den ersten einfachen Inhalt einfügen.

5. Der erste Seiteninhalt -Tags und Zeichen

Nachdem wir nun das Grundgerüst in HTML kennen, Metatags verwenden können und Kommentare verstehen,
werden wir nun endlich unsere Website mit Inhalt füllen.

Anstatt in diesem Teil schon mit Attributen zu beginnen, werde ich vorher noch Zeichen in HTML erklären und Attributen auf den nächsten Teil verschieben.

Der meiste Inhalt in einer einfachen HTML Seite kommt zwischen den <body></body> Tags geschrieben.
HTML erkennt im body-Tag alles, was man sowohl in HTML, als auch in text schreibt.
HTML Code wird vom Browser verarbeitet und in der richtigen Formatierung angezeigt.
Normaler Text, den man im body-Tag ohne HTML Tags (Formatierungen) schreibt, wird im Browser genauso auch wieder ausgegeben.
Dabei ist zu beachten, dass der Browser keine Zeilenumbrüche erkennt.

Nehmen wir nun einen einfachen Text mit Zeilenumbrüchen:Dieser kurze Text hat nun 3 Zeilen.
Dennoch, wenn man ihn so im body-Tag schreibt, wird der Browser folgendes ausgeben:

Dies ist ein Text, der, der keine weiteren HTML Formatierungen besitzt.Er dient der Veranschaulichung, was ein Browser macht, wenn man einen Text in einer HTML Seite mit Zeilenumbrüchen schreibt.

Der Browser ignoriert Zeilenumbrüche einfach, die Zeilenumbrüche werden nur in der Quelltextansicht im Browser angezeigt.
Der Browser macht generell erstmal nur Zeilenumbrüche, wenn der Text am rechten Seitenrand (Beim rechtsbündigem Text) angekommen ist.
Wollen wir aber nun im Text einen Zeilenumbruch, müssen wir diesen erzwingen bzw. mit einem einfachem HTML Tag.
Der HTML Tag, der einen Zeilenumbruch erzwingt sieht wie folgt aus:Dieses Zeichen fügt an dieser Stelle ein Zeilenumbruch ein.

Nun der Text mit Zeilenumbruch um Quellcode:

Dieser Text wird im Browser nun so dargestellt:

Dies ist ein Text, der, der keine weiteren HTML Formatierungen besitzt.
Er dient der Veranschaulichung, was ein Browser macht,
wenn man einen Text in einer HTML Seite mit Zeilenumbrüchen schreibt.

Zu beachten ist, dass der Tag <br /> einen reinen Zeilenumbruch, ohne das Format (größe, Abstand, etc.) zu verändern.


Der <pre></pre>
Eine besondere Ausnahme der Beachtung von Zeilenumbrüchen, geben die <pre></pre> Tags.
Sie dienen der Darstellung von Texten 1 zu 1, wie sie innerhalb dieses Tags geschrieben sind.
Hierbei werden auch Zeilenumbrüche, Tabulatoren, Leerzeichen (auch mehrere), etc. beachtet.
Das heißt, der Text, den wir oben haben können wir, anstatt in jeder Zeile ein <br /> Tag zu setzen innerhalb eines <pre></pre> Tags schreiben:



Dies wird so nun in dem Browser dargestellt:

Dies ist ein Text, der, der keine weiteren HTML Formatierungen besitzt.
Er dient der Veranschaulichung, was ein Browser macht,
wenn man einen Text in einer HTML Seite mit Zeilenumbrüchen schreibt.

<p></p> Tags
Einen Absatz kann man mit <p></p> erstellen.
Alles innerhalb dieses Tags ist ein Absatz. In einem Absatz kann man auch andere HTML-Tags verwenden, mehr dazu im kommenden Teil "Verschachtelte Tags".

Ein Beispiel:


Dieser Text sieht im Browser nun so aus:

Dies ist der erste Absatz eines Textes.
Der Absatz geht über mehrere Zeilen.
In diesem Fall über 3 Zeilen.

Dies ist der 2. Absatz,
er steht unter dem ersten Absatz.

fett, kursiv und unterstrichen
Um einen Text zu Formatieren und bestimmte Textstellen der Wörter hervorzuheben, benutzt man Formatierungen, wie fett geschrieben, kursiv geschrieben oder unterstrichen geschrieben.
Dafür gibt es ebenfalls Tags.
Die <b></b>- Tags geben einen Text fett geschrieben aus, der <i></i>- Tags geben einen Text kursiv geschrieben aus und <u></u>- Tags geben ihn unterstrichen geschrieben aus.
Hier nun mal für jedes ein Beispiel:


Dies wird im Browser so ausgegeben:

Dieser Text ist fett geschrieben
Dieser Text ist kursiv geschrieben
Dieser Text ist unterstrichen geschrieben

Überschriften
In HTML kann man Überschriften mit den HTML Tags <h1></h1> erstellen.
dabei gibt es Abstufungen die kleinste Überschrift ist 6 und die Größte 1.
Die Abstufungen bestimmt man mit der Zahl hinter dem h.
Also sind die Abstufungen:



Zeichen in HTML
In HTML gibt es verschiedene Zeichen, die man anzeigen kann.
Man kann z.B. ein oder mehrere Leerzeichen in HTML erzwingen.
Auch Umlaute (ä, ö, ü) werden mit bestimmten HTML Codes geschrieben,
da andere Länder diese Zeichen nicht haben, und dies in einigen Kodierungen an sonsten nicht angezeigt werden.
Die für Webseiten beste Kodierung ist im übrigen UTF-8.
ä, ö, ü in HTML:

Im Endeffekt ändert sich bei den Umlauten nur das 2. Zeichen (nach dem &).

ein kurzes Beispiel in einem Text:

Im Browser so angezeigt:

Dieser kürzere Übungstext hat übertrieben viele Umlaute.

Zu den Umlauten und dem Leerzeichen gibt es noch viele weitere Sonderzeichen.

6. Attribute und weitere Tags

Mittlerweile haben wir einfache Tags kennengelernt, wie z.B. <p></p> für Absätze.
Tags können auch weitere Informationen erhalten,
z.B. Stilistische, Zuweisungen, etc.
In diesem Tutorial werden längst nicht alle Tags und Attribute besprochen, die es gibt,
dafür gibt es einfach zu viele.

Attribute sind in der Regel immer im Anfangstag erhalten.
Wir benutzen im Beispiel nun mal die Tags <span></span>, und verändern in diesen die Schrift(Form, Farbe, Art, Größe, etc.).

Schreibt man nun einen Text in <span></span>, sieht man zuerst keinen Unterschied in der Formatierung des Textes.
die <span>-Tags alleine bewirken erstmal nichts.
Um
nun den Text innerhalb der span-Tags zu ändern, benötigen wir weitere
Informationen, damit der Browser weiß, was er an dem Text in den
<span>-Tags ändern soll.
Dazu benutzen wir Attribute,
hier mal Beispiele, welche wir verwenden könnten:


Diese werden wiederum in der Attribut style="" gesetzt.
In den hinterstehenden Kommentaren steht, was die jeweilige Attribut bewirkt.
Wer sich nicht mehr an Kommentare erinnern kann bzw. dazu nichts gelesen hat, kann sich dies nochmal hier durchlesen: 4. Kommentare in HTML.
Hinter dem doppelpuntkt steht der Wert (Beispiel: color:red;)

Diese Attribute kommen nun in den Anfangs Tag von <span>.
Nun zu jedem mal ein Beispielsatz:


Diese sehen nun im Browser so aus:

Dieser Text ist rot
Dieser Text ist in der Größe 12 Pixel geschrieben
Dieser Text ist in Comic Sans MS geschrieben

Microsoft bietet standardmäßig viele Schriftarten, die auf dem Computer sind.
dennoch kann es immer mal sein, dass ein PC eine Schriftart, die ihr benutzt nicht hat.
Was dann?

Dafür kann man mehrere Schriftarten wählen, die dann nach "Wichtigkeit" angegeben werden,
dies sieht so aus:

Hier wird der Browser die Schrift immer
zuerst versuchen, in Comic Sans MS darzustellen, sollte diese nicht am
PC installiert sein, so wird die nächste Schriftart verwendet, im
Beispiel Arial.

Nun gibt es auch Stande-Alone Tags, die Attribute beinhalten können.
Nehmen wir z.B. den Tag <hr />, er dient nun erstmal dazu, eine horrizontale Linie vom Anfang bis Ende des Browsers darzustellen.
Will man nun eine dickere Linie haben, kann man size="" ebenfalls in diesem Tag benutzen.
Dies sieht im Quellcode dann so aus:

Diese Linie hat nun die Größe 5.

Weitere Attribute sind z.B. id="" und class="", die für CSS Benutzt werden,
sowie Größenangaben und weitere.

Man kann nicht in jedem Tag jede Attribut benutzen,
bestimmte Attribute können nur in bestimmten Tags verwendet werden.
Dies werden wir genauer im Kapitel Bilder sehen.

7. Tabellen

Willkommen im 7. Teil,
hier werden wir alles über Tabellen in HTML lernen.
Tabellen gehören zum Grundbestandteil in HTML und wird für Veranschaulichungen und Formatierungen verwendet.
Im Grunde besteht eine Tabelle aus Zeilen und Spalten.

[table='Spalte 1,Spalte 2,Spalte 3'] [*]Zeile 1 Spalte 1 [*]Zeile 1 Spalte 2 [*]Zeile 1 Spalte 3 [*]Zeile 2 Spalte 1 [*]Zeile 2 Spalte 2 [*]Zeile 2 Spalte 3 [*]Zeile 3 Spalte 1 [*]Zeile 3 Spalte 2 [*]Zeile 3 Spalte 3
[/table]

Dies ist eine Tabelle mit 3 Spalten und 3 Zeilen (Die Headerzeile mit Inhalt Spalte 1, Spalte 2, Spalte 3 nicht mit berücksichtigt).

Diese sieht (Ohne die Headerzeile mit dem Inhalt Spalte 1, Spalte 2, Spalte 3) so aus:



Die <tr></tr>-Tags geben hier jeweils eine Zeile an und die <td></td>-Tags in den <tr>-Tags geben jeweils eine Spalte in der Zeile an.
Die Attribut border='1' steht hier für die Dicke der Linien der Tabelle.
Eine unsichtbare Tabelle (Linienlose Tabelle) hat somit die Attribut border='0'

Für Tabellen gibt es auch einen Tabellenkopf und einen Tabellenfuß.
Der Tabellenkopf steht hierbei in
<thead></thead> -Tags und der Tabellenfuß in <tfoot></tfoot> -Tags.
Bei Benutzung dieser Tags setzt man den normalen Tabelleninhalt in einen Tabellenbody, die in diesen Tags stehen: <tbody></tbody>
Da dies aber im Internetexplorer nicht richtig angezeigt wird und somit nicht produktiv für alle Browser zu empfehlen ist,
werden wir erstmal nicht näher darauf eingehen.

Verbundene Spalten

Man kann Zellen in Tabellen miteinander verbinden.
Dazu benutzt man die Attribute colspan='' (für Verbundene Spalten) und rowspan='' (für verbundene Zeilen).
n den Anführungszeichen steht hierbei die Anzahl der Zeilen/Spalten, die miteinander verbunden sein sollen.

Beispiel, wo die erste Spalte verbunden ist:


Mit den Attribute width='' und height='' kann man die Höhe und Breite der Tabelle/ Spalte oder Zeile bestimmen.

Weitere Attribute:

Mit der Attribut bgcolor='' kann man die Hintergrundfarbe einer Zelle ändern.

Soviel erstmal zu Tabellen.

8. Bilder

Kommen wir zu einer einfacheren Sache in HTML.
Damit eine Webseite anschaulich und schöner wird, fügt man Bilder ein.
Der Tag, mit dem man ein Bild einfügt ist ein Stand-Alone Tag.

im Grunde sieht er so aus:

Nun hat er so noch keine Wirkung,
um ein Bild einzufügen muss man den Pfad des Bildes wissen und ihn mit einer Attribut angeben.
Die Attribut sieht wie folgt aus:


Nun sollte man für den Fall, das das Bild nicht angezeigt werden kann einen Alternativtext berreithalten,
diesen bringt man in d er Attribut alt='' unter.

Zusammen sieht dies nun so aus:


Dies zeigt schon das Bild so an, wie es ist,
falls das Bild aus irgend welchen Gründen (z.B. Bild ist nicht mehr auf dm Server verfügbar) nicht mehr angezeigt werden kann,
so wird der alternative Text "Ein Bild" angezeigt.

Ein sogenannten Tooltip kann man mit dem Attribut title='' einfügen.
In den Anführungszeichen kommt ein Text, der dann angezeigt wird, wenn man mit der Maus über das Bild fährt.


Rahmen

Um ein Bild kann man einen Rahmen einfügen.
Dies wird mit der selben Attribut gemacht, mit der man in Tabellen die Rahmenstärke bestimmt:


Größe und Höhe

Bis jetzt wird das Bild in originalem Zustand angezeigt, mit der originalen Größe.
Die Größe eines Bildes kann man nun auch mit der Attribut
width='' und height='' ändern.
In diesen Attribute können sowohl Prozentangaben zur Größe, als auch Pixelangaben geschrieben werden.


Hier wird das Bild in 50% Breite und 50% Höhe angezeigt.

Das war nun alles Grundlegendes zu Grafiken.

9. Bereiche in HTML (Block-Element)

Im 9. Teil des Tutorials lernen wir die <div> -Tags kennen.
Sie dienen dazu, bestimmte Bereiche zu erzeugen, die man formatieren kann.
Man nennt die Bereiche auch Blöcke. Ein Block besteht aus dem kompletten Inhalt der <div> -Tags.
Der Vorteil, wenn man seine Webseite in <div> -Tags schreibt ist, dass man leicht mit CSS die Berreiche ausrichten und formatieren kann.
<div> -Tags werden einfach im body wie der restliche Inhalt benutzt.
Schreibt man einen Text in einen <div> -Tag, hat dies erstmal keine direkte Auswirkung.
Nun kann man mit verschiedene Attribute den Text formatieren.
Ein Beispiel:


Nun wird alles, was in diesen <div> -Tags steht Zentriert (Mittig der Seite) ausgerichtet (In dem Fall der Text "INHALT".)
Genauso kann man wie schon bei den Tabellen erklärt auch align="right" oder align="left" verwenden.

Im ersten Beispiel setzen wir den Block also mittig,
genauso kann man dies mit den Tags <center></center> machen.

bewirkt somit das gleiche, wie


Die <center> -Tags sind die ältere Variante. Es sollte nach Möglichkeit die Variante mit den <div> -Tags bevorzugt werden.

<div> -Tags stehen in der Regel alleine und nicht innerhalb von 2 anderen Tags.

Ein großer Vorteil ist, dass man nun den Block mit CSS formatieren kann.
Hierzu müssen wir den <div> -Tags.
Dies geht, indem man den <div> -Tag für CSS ansprechbar macht.
In CSS muss man sagen, welches Element man genau formatieren will,
damit dies geht, geben wir unseren <div> -Tags nun einen "Namen".

Dies geschieht mit class"" oder id"".
Denaues dazu gibt es im nöchstem Teil.
Wir benutzen nun mal id="", warum wird im nächsten Part erklärt.

Nun haben wir den <div> -Tags den Namen Block1 gegeben.
In CSS können wir nun Block1 ansprechen und verändern,
genaues dazu im kommendem Part.

Während die <div> -Tags alleine stehen, gibt es die <span> -Tags,
die quasi den selben Zweck erfüllen, bloß stehen diese innerhalb anderer Tags.

Im nächsten Tutorial Teil werden wir etwas näher auf die Vergabe von id und class eingehen sowie ein wenig in CSS anwenden.

10. id und class -Elemente Bezeichnen (mit CSS exkurs)

Mittlerweile der 10. Tutorialteil,
nach dem wir einiges über den Grundaufbau, einigen Tags und Attribute gelernt haben,
kommen wir nun dazu, wie wir unsere Elemente für CSS (Cascading Style Sheets) bezeichnen.

Hierzu haben wir erstmal 2 Möglichkeiten.
Einmal die Attribut id="" oder class="".

Beide Attribute geben dem Element quasi einen Namen, mit dem wir dies via CSS formatieren können.
Im vorherigem Kapitel haben wir Block-Elemente kennen gelernt,
mit denen wir nun direkt weiter arbeiten werden.

Wir haben im vorherigem Kapitel einem <div> -Tag die Attribut id="Block1" gegeben.


genauso könnten wir den <div> -Tag eine Klasse geben:


Was ist nun der Unterschied?
Der Unterschied ist, dass id="" dann benutzt wird,
wenn dieses Element nur einmal auf der Seite vorkommt.
Wenn also z.B. dieser div Tag mit der Attribut id="Block1" nur einmal auf der Seite vorkommt,
dann wird id="" verwendet.

Kommt nun ein Element mehrmals vor, wird class="" verwendet.
Man kann vielen Tags nahmen geben,
nehmen wir nun mal eine Überschrift:
<h1>Eine Überschrift</h1>

Genaueres zu Überschriften im Kapitel Der erste Seiteninhalt -Tags und Zeichen.
wenn wir den nun diese Überschrift einmal auf der Seite haben und wollen, dass die Überschrift weiß ist,
dann sieht dies so aus:

Hierbei muss noch gesagt werden, dass in den Namen von id und class KEINE Sonderzeichen, Umlaute oder sonstiges verwendet werden darf.

Nun haben wir unsere Überschrift.
damit wir die nun rot bekommen,
müssen wir sie in CSS angeben.
Da man wenn man eine richtige Webseite macht,
eine eigene Stylesheets Datei (.css) verwendet,
werden wir direkt damit anfangen.

Die .css Datei dient dazu, die Webseite und die Elemente, die z.B. via id oder class bezeichnet sind zu formatieren.
Wir brauchen um eine .css Datei zu schreiben ebenfalls nichts weiter, als ein Editor (auch hier empfehle ich Notepad++).
Die Datei speichert ihr aber anstatt .html/.htm als .css ab.



Das ist nun der Inhalt unserer CSS Datei. wir nennen sie nun mal style.css.
Nun zur Erklärung:

#ueberschrift Spricht nun das Element an, das wir mit der Attribut id="ueberschrift" benannt haben.
Nun kommt in geschweifte Klammern {} alle Formatierungen und Anweisungen rein.
Jede Angabe wird mit einem Semikolon ; abgeschlossen.
color: #ffffff; mach nun nix weiter, als den Text zu färben, in der Farbe weiß (Hexcode ffffff).

Da unsere HTMA Seite aber noch nicht mit der .css verbunden ist, so wird die Überschrift nicht weiß.
Hier müssen wir nun eine Verbindung zwischen der HTML und der CSS Datei herstellen.
Da die HTML Datei diejenige ist, die im Browser gelesen und benutzt wird, müssen wir in ihr angeben, dass wir die .css Datei auslesen wollen.

hierzu gibt es einen Stande-Alone Tag, den man in den Header machen muss.
Alle HTML Seiten, die die CSS benutzen sollen, brauchen diesen Tag.
Dieser sieht so aus:


href="" gibt den Pfad an, wo auf dem Server sich die .css Datei befindet.
Wir gehen nun mal davon aus, dass sie sich im selben Ordner, wie die HTML Seite befindet und brauchen daher nur den Dateinamen.

unsere HTML Seite sieht nun mit der Überschrift und der CSS declaration dann so aus:



Unsere style.css Datei sieht nun so aus:


Das Ergebnis, wenn man nun die HTML Seite aufruft ist, dass die Überschrift weiß ist.

Haben wir nun mehrere h1-Überschriften in unserer Seite, die alle die gleiche Formatierung (in unserem Fall Textfarbe weiß) haben sollen,
müssen wir die Attribut class="" für alle h1-Tags verwenden.


Die CSS sieht fast genau so aus,
nur das wir anstatt der Raute im Namen (#ueberschrift)
einen Punkt verwenden (.ueberschrift).

Dies sieht in der .css nun so aus:



Dies war´s soweit mit id und class sowie ein kleiner CSS Exkurs.

11. Formulare

Willkommen zum 11. Part der HTML Tutorial Reihe,
nach einer aus Zeitgründen kleiner Pause wollen wir uns nun mal mit Formulare beschäftigen.
Dies wird auch das erste HTML Tutorial sein, wo ich ein paar Bilder als Beispiel mit einbaue, sowie Beispielseiten angeben werde, dazu will ich direkt sagen,
das sie auf einem Server von mir liegen und auch nicht hier im Thread verschwinden werden. Sollte dies doch mal der Fall sein, das Bilder oder Beispielseiten z.B. durch einen Serverumzug oder ähnliches nicht mehr erreichbar sind, bitte ich mich darüber zum Beispiel via pn zu benachrichtigen.
Parallel zu diesem Tutorial werde ich noch ein php Tutorial zu Formulare und die Übergabe von Daten der Formulare machen, das ich dann hier verlinken werde.
Das php Tutorial wird aber ein paar tage verzögert zu diesem hier rauskommen, da es zeitilch nicht anders möglich ist.
Gleich zu Anfang will ich schon mal sagen, dass wir uns hier nur mit dem Erstellen des Formulares beschäftigen, nicht aber mit der Funktion, dies ab zu schicken oder gar zu speichern,
dafür wird das php Tutorial sein.

Was sind Formulare?
Formulare sind quasi Eingabefelder mit der Möglichkeit diese abzusenden.
Mit Formularen kann man vieles machen, z.B. in Foren die Texteingaben sind Formulare, Gästebucheinträge oder auch Kontaktformulare so wie Bestellformulare im Internet.

Ein ganz einfaches Formular
Wir fangen mal mit dem denkbar einfachsten Formular an.
Ein Formular, wo man seinen Namen eingeben soll und dies dann absenden kann.

zuerst müssen wir eine Form erstellen, in der wir das Formular einbauen werden.
Diese besteht aus den HTML-Tags <form> und </form>.

hier müssen wir 2 Attribut einsetzen,
die erste sagt an, welche Methode wir zum absenden des Formulars verwenden wollen.
hierzu benutzen wir die Methode "POST", warum und wofür wird im php Tutorial erklärt.
als 2. Attritut verwenden wir action, dies gibt an, wohin wir das Formular absenden wollen.
Wir können das Formular z.B. an sich selbst senden, oder aber an eine andere PHP Datei, wobei dann die Eingaben übergeben werden.
genau wird auch dies im php Tutorial erklärt.

Setzen wir die beiden Attribut nun in den Start-Tag ein, sieht dies so aus:


Der Dateiname bei action="" gibt an, wohin das Formular gesendet werden soll.
In diesem fall wird dies zu der php Datei "eintrag.php" gesendet, diese Datei würde die Eingabe nun weiter verarbeiten und ggf. ausgeben.

Wir haben nun ein leeres Formular, wo wir nun ein Eingabefeld so wie ein Absende Button rein machen wollen.
Für ein Eingabefeld (Inputfeld) benutzt man <input>.
Auch hier brauchen wir im grunde erstmal zwei Attribut, einmal die Attribut, die angibt was für eine Eingabe in den Input erwartet wird type=""
und einmal die Attribut, die dem Inputfeld einen Namen gibt, der später für die php Verarbeitung wichtig sein wird.
Da wir erstmal einfach ein Inputfeld haben wollen, wo wir unseren Namen eintragen können und dieser ein Text (String) ist, geben wir ihm den Typ "Text" (type="Text").
Es gibt noch andere typen, wie z.B. email (Checkt, ob eingabe ein @ enthält) oder password, was die Eingabe mit Punkten anzeigt.
Als name geben wir dem Inputfeld einen Namen, mit dem wir ihm identifizieren können, da wir unseren Namen eintragen sollen, geben wir ihm auch einfach den Namen "name" (name="name"). Dies zusammen sieht nun so aus:
<input type="Text" name="name" />

fügen wir dies nun in unser Formular ein,
haben wir schonmal ein Inputfeld:


Nun wollen wir noch ein absende Button,
damit wir die Eingabe an die Datei eintrag.php senden können.
Dies ist ebenfalls ein <input>, nur diesmal mit dem Typ "Submit" und einer Attribute namens value="", in der wir das eingeben,
was nachher auf dem Absende Button stehen soll.
Somit sieht dies dann so aus:
<input type="Submit" value="Absenden" />
Wir haben hier als Aufschrift des Buttons "Absenden".

Nun wollen wir das alles in die Form packen.
Da wir alles untereinander und nicht nebeneinander haben wollen,
machen wir noch einen Zeilenumbruch (<br />) hinter jeden Input.
Damit jeder weiß, was man in das Inputfeld eintragen soll,
schreiben wir darüber einfach hin, was rein soll ("Gib deinen Namen ein:<br />")

Dies sieht dann komplett so aus:

und im Browser wird dies so angezeigt:
[Blockierte Grafik: http://firecity.de/Tutorials_Pics/Formular_simpel-0.PNG]

Nun haben wir unser erstes kleines Formular fertig.
Doch dabei soll es natürlich nicht bleiben,
wir wollen als nächstes ein Formular für ein Gästebucheintrag machen.

Zuerst müssen wir uns überlegen,
was für Felder wir alles brauchen.
Standardmäßig:

• Name
• Gästebuchnachricht
• Email Adresse
• und vielleicht auch noch Homepage (da das wieder ein input type="text" wäre, lassen wir dies hier mal aus)
  
• Und natürlich den Absendebutton
  

Nun müssen wir uns überlegen,
was wir für welches Feld benutzen.
Name

Hier würde sich ein einfaches input type="text" anbieten, welches wir bereits kennen gelernt haben.
<input type="Text" name="name" />
Gästebuchnachricht
Da man ein Gästebucheintrag über mehrere Zeilen schreibt, bietet sich ein Inputfeld nicht so gut an.
Statt dessen verwenden wir lieber ein Feld, wo man einen Text über mehrere Zeilen schreiben kann und welches auch über eine Scrollbar verfügen kann.
Hier bieten sich neue HTML-Tags an, ein sogenanntes Textfeld.
Die HTML-Tags hierfür sind relativ einfach: <textare></textare>.
Als Attribut brauchen wir erstmal lediglich name="", damit wird dies später verarbeiten können.
Als Name geben wir dem Textfeld nun mal "eintrag" (name="eintrag").
Nun sieht unser Textfeld so aus:

<textarea name='eintrag'></textarea>
EMail
Ob man nu ein Gästebuch mit oder ohne EMaileintrag macht, ist jedem selber überlassen,
wir werden dieses Feld nun benutzen, um ein weiteren Typ fpür Input zu zeigen.
Wir benutzen also einfach ein Inputfeld vom Typ "email" (type="email") mit dem Namen email (name="email").
<input type="email" name="email" />

Der Absendebutton
Ist uns ja mitlerweile auch bekannt:
<input type="Submit" value="Absenden" />


Wir können diese nun wie oben einfach mit einem Zeilenumbruch (<br />) untereinander schreiben,
und über jedem Feld ein Text schreiben, was dann so aussehen würde:


Im Browser wird dies dann so ausgegeben:
[Blockierte Grafik: http://firecity.de/Tutorials_Pics/Formular_simpel-2.PNG]


Wir wollen dies nun aber mal etwas schöner gestalten,
und zwar sollen die Texte zu den Feldern links neben den Feldern sein und das alles gleichmäßig und in einer Reihe.
Damit sowohl Texte als auch Inputs in einer Reihe passend untereinander sind kann man diese nun in einer Tabelle formatieren.
Wie man eine Tabelle aufbaut könnt ihr hier nochmals nachlesen: </tr>



Man baut quasi in der Form eine Tabelle,
wo man dann alles formatiert. die Zeile mit dem Buttom ist zusammen genommen, da er länger ist und dort nur eine Spalte sein muss.

Im Browser sieht dies dann so aus:
[Blockierte Grafik: http://firecity.de/Tutorials_Pics/Formular_simpel-3.PNG]


Größen im Formular
Als letztes wollen wir noch sehen, wie man die größe der Inputfelder sowie des Textfeldes ändert.
hieruz gibt es 2 Unterschiede:
Im Textfeld können wir sowohl Höhe als auch Breite ändern und im Inputfeld nur die Länge.

Im Inputfeld
Für das Inputfeld verwendet man einfach die Attribut size="" um die länge zu ändern.
Als Beispiel:
<input type="text" name="name" size="30" />
als weiteres können wir nun die maximale Anzahl an Zeichen angeben, mit der Attribut maxlength=""
Als Beispiel: <input type="text" name="name" size="30" maxlength="20" />
Im letztem Beispiel kann man nun also maximal 20 Zeichen eingeben.

Im Textfeld
In einem Textfeld kann man nun die Höhe und breite angeben.
Hierzu verwenden wir die Attribut cols="" und rows="".
Als Beispiel:
<textarea name="eintrag" cols="55" rows="15"></textarea>


Das war es mit dem 11. Part des HTML Grundkurses,
was nun als 12. dran kommt weiß ich noch nicht, bei Ideen könnt ihr euch gerne mal im Sammelthread zu diesem Tutorial melden:
[Sammelthread] Fragen/Ideen zu: HTML Grundkurs/ Tutorial

12. Weitere Inputfelder und Attribut für Formulare

Im 12. Part der HTML Tutorialreihe wollen wir ein paar weitere Inputfelder für Formulare kennen lernen.
Im Part 11 haben wir bereits gelernt, wie wir ein Formular gestalten und aufbauen.
Dazu haben wir Inputfelder des Types Text, Submit und email verwendet, sowie ein Textfeld.
Es gibt noch einige andere Inputfelder, die wir hier nun durchgehen werden.
Wir haben mitlerweile gelernt, das die Attribut name="" das Feld einen Namen gibt und value="" dem Feld einen zu übergebenden Inhalt.
Der Inhalt hier wird gegebenenfalls noch erweitert.

zuerst schauen wir uns einige Varianten und Möglichkeiten mit Buttons an.

Type="image"
Wir fangen an mit einem weiterem Feld zum absenden von Formularen.
Wir kennen mitlerweile den Absende Button mit dem Inputfeld type="Submit".
Nun kann man genauso statt ein Button ein Bild als Button verwenden.
Hierbei gibt es außer das der Type statt Submit nun image ist und man ein Bild einsetzt keine unterschiede im Code vom eigentlichem Button.
Anstatt des Buttons wird nun das Bild angezeigt, auf das man klicken kann, um das Formular abzusenden.
Dieser sieht so aus:

die Attribut src="" gibt den Bildname/ Bildpfad genau wie bei dem HTML-Tag <img> an.

Type="reset"
Dieser Button setzt alle Eingabefelder zurück,
das heißt, dass alles Text aus den Eingabefeldern gelöscht wird, Checkboxen ungesetzt werden,
also das Formular zum ursprüngilchem Standartzustand zurückkehrt.
Dieser simple Button braucht keine weiteren Attribut, außer type="reset".
Aussehen tut dies dann so:


Weiter gibt es noch die sogenannten Checkboxen und Radioboxen.
Diese dienen zur Auswahl verschiedener Optionen.
Während man von Checkboxen mehrere Sachen auswählen kann,
kann man im Browser in Radioboxen nur eine Auswahl treffen.

Type="checkbox"
Hat man ein Formular mit mehreren Checkboxen, kann man davon sowohl nur eine, als auch mehrere Auswahlen treffen.

name="" ist hier wieder der Name der Checkbox und value="" der mit zu übergebende Inhalt.
Zusätzlich kann man noch die Attribut checked="checked" benutzen, um vorab in diesem Feld ein Hacken zu setzen,
somit ist standartmäßig dann ein Hacken gesetzt.

Type="radio"
Das Radiofeld ist ähnilch wie die Checkbox, nur kann man hier immer nur eine Auswahl treffen.
Ausseen tut dieses so:

Hier haben wir ein Radiobutton mit dem Name "name" (name="name") und dem mitgeschicktem Inhalt value="inhalt".
hat man nun mehrere radiobuttons des gleichen Namen, so kann man nur eines dieser auswählen.
Als Beispiel:

Hier haben wir nun 3 Radiobuttons, alle mit der Attribut name="name".
Somit kann man nur eines der 3 auswählen, nur der Inhalt des ausgewählten wird mit übergeben.

Nun werden wir uns einige weitere Input Textfelder ansehen.

Type="password"
Im Internet werden in Loginformularen Passwordfelder unkenntlich gemacht,
das heißt, das man bei einer Eingabe nicht den eingegebenen Text sieht, sondern Punkte, sogenannte Zensuren.
Dies dient zu einem, dass keiner der bei der Passworteingabe gerade neben der Person steht das Passwort mitlesen kann
und zum anderen gibt das dem User ein Gefühl von Sicherheit.
Dieses Feld ist vom type="password", unterscheidet sich an sonsten aber nicht mit dem standarisiertem type="text".


Type="file"
Ein weiteres häufig benutzte Eingabefeld ist der Type "file".
Hierbei handelt es sich um ein Feld zum durchsuchen des Computers nach einer Datei,
zum beispiel zu deren Upload.
Hierzu ist etwas wichtiges anzumerken,
wenn ein Formular eine Datei mit überträgt (ein file), so muss die Übertragungsart dementsprechend angegeben werden.
Dies macht man im <form>-Tag und zwar mit der Attribut enctype="multipart/form-data".
enctype="" erhält die Übertragungsart, für Files wird hier "multipart/form-data" benötigt.
Das Inputfeld sieht so aus:


Type="hidden"
Bisher hatten wir Inputfelder, die der User sehen kann und wo der User selber eine Eingabe tätigen kann.
Es gibt nun aber auch die Möglichkeit versteckt etwas mitzusenden, z.B. die IP-Adresse oder die Browserkennung.
Dazu benutzen wir nun mal ein sogenanntes verstecktes Inputfeld.
Dieses Feld ist im Grunde sowas wie ein Textfeld, nur das man dieses nicht sehen kann und den Inhalt somit in der Programmierung mit reinsetzen muss.
Aussehen tut dies so:

Hier haben wir ein verstecktes Inputfeld (type="hidden") mit dem Namen "hiddenfield" und dem Inhalt "inhalt".
Dies wird wie ein textfeld übergeben und kann genauso in PHP ausgelesen werden.

Das waren ein paar weitere Inputfelder.
Nun noch 2 Attribute, die die Eingabe im Inputfeld einschränken.
und disabled="disabled"

readonly="readonly"
readonly="readonly" ist eine Attribut, die ein Textfeld unveränderbar für den User macht.

Hier haben wir nun ein Textfeld, wodrinnen schon "nicht ändern" steht.
readonly="readonly" bedeutet nun, das der User das Textfeld zwar lesen kann, aber nicht dort drinnen schreiben oder den Text verändern kann.

disabled="disabled"
Mit disabled="disabled" können wir nun ein textfeld deaktiviren.
Dank diese Attribut wird das Textfeld nun grau hinterlegt angezeigt und kann vom User nicht benutzt oder angewählt werden:


Das wars mit dem 12. Teil des HTML Tutorials,
wie oben schon erwähnt wird dieser Part gegebenenfalls noch etwas erweitert.

13. Auswahllisten und Formen

Willkommen zum 13. Part des HTML Tutorials,
heute wollen wir uns mit Auswahlfelder beschäftigen.
Dies wird ein kleinerer Part, als die bisherigen, da wir eigentlich nur auf 2 Arten eingehen werden,
und auf ein paar dazugehörige Attribute.

Im Grunde erstellen wir einfach eine Auswahlliste, woraus man entweder nur eine Auswahl oder mehrere treffen kann.
Diese können wir auch in ein Formular einbinden und wie bei den <input> -Tags mit dem Absende-Button absenden und via php auswerten.


Die Drop/Down Auswahlliste
Fangen wir mit einer Auswahlliste an,
in der wir nur eine Auswahl treffen können, eine so genannte Drop/Down Liste.
Im Grunde sieht diese so aus:

allerdings haben wir hier noch keine Möglichkeit, etwas auszuwählen.
Innerhalb dieser Tags können wir nun mehrere Auswahlmöglichkeiten setzen, wovon man dann eine wählen kann.
Jede Auswahlmöglichkeit schreibt man in <option> -Tags.

Eine Auswahl kann nun zum Beispiel so aussehen:

Setzen wir dies nun in die <select> -Tags sieht dies so aus:


Nun haben wir eine Auswahlmöglichkeit in der Liste.
Auf dieser Art können wir nun mehrere hinzufügen:


Standardmäßig ist nun erstmal "Auswahl 1" ausgewählt.
Will man nun, dass als erstes steht, das man etwas auswählen soll, so benutzt man als erste Auswahlmöglichkeit einfach "Bitte auswählen..."


In dieser Liste kann man nun eine Möglichkeit auswählen.
Wir können nun auch eine andere Auswahl als Standart setzen,
indem wir die Attribut selected="" verwenden.
Dies sieht dann beispielsweise so aus:

Nun ist erstmal "Auswahl 2" ausgewählt.

Nun können wir z.B. für die spätere php Auswertung dem Drop/Down Feld einen Namen mit der Attribut name="" geben.
Dazu sollte man jeder Auswahlmöglichkeit ebenfalls für die Auslese noch einen Wert zuweisen, mit value="".
fertig sieht dies nun so aus:

Im Browser sieht dies so aus:
[Blockierte Grafik: http://firecity.de//Tutorials_Pics/Auswahllist1.png]


Die Auswahlliste mit mehreren Auswahlmöglichkeiten
Als nächstes wollen wir uns einem Auswahlformular widmen, das mehrere Auswahlmöglichkeiten zulässt.
An sich ist dies immer noch die selbe Liste, wie unsere Erste,
daher nehmen wir sie als Anfangspunkt:


Und erweitern den Start <select> -Tag um eine Attribut: multiple="multiple".
Diese Attribut erlaubt es, das mehrere Möglichkeiten ausgewählt werden können.


Diese sieht im Browser so aus:
[Blockierte Grafik: http://firecity.de/Tutorials_Pics/listfeld_multi.PNG]

Hier können wir mit selected="selected" Auswählen bestimmen, die anfangs ausgewählt sind,
im grunde das selbe, wie oben beschrieben.

Wir können die komplette Liste deaktivieren und somit unbenutzbar für den User machen, wie wir es im Kapitel 12 schon mit <input> gemacht haben:

Diese Liste ist nun deaktiviert.


Dies wars mit dem 13. Part der HTML Tutorial Reihe,
evt. werde ich hier nochmal was ergänzen.
Vorschläge, Verbesserungen und Wünsche sind wie immer im dafür vorgesehenem Thread gerne gesehen.

14. CSS Teil 2 (exkurs und eine Wiederhohlung)

Willkommen zum 14. Part des HTML Tutorials,
dieses mal wieder mit einem kleinen Exkurs Richtung CSS.
In diesem Part wollen wir uns näher mit verschiedene Arten beschäftigen,
in HTML Dateien Styles via CSS einzubinden. Einiges wird sich hier mit dem Part 10. id und class -Elemente Bezeichnen (mit CSS exkurs)
schneiden, das schon mal vorab.

localer Style
Als localer Style gilt ein Style, der nur für diese bzw. in dieser Seite eingebundenen Seiten gilt.
Dabei wird der Style direkt in der Webseite geschrieben, im Gegensatz zu der globalen Variante,
in der der Style in einer externen .css Datei geschrieben wird und so einfach in jeder HTML Datei eingebunden werden kann.

Wir benutzen für den Style den Tag <style>,
Dies sieht dann so aus:

Als Attribut geben wir nun die Stylesprache in dem Starttag an,
in unserem Fall text/css, mit type="".
Dies sieht nun so aus:


Hier können wir nun unser Style reinschreiben.
Im Part "10. id und class -Elemente Bezeichnen (mit CSS exkurs) " haben wirbereits <div>-Elemente kennen gelernt,
sowie verschiedene Tags eine id oder eine class zugewiesen.
Nun haben wir schon angeschnitten gelernt, wie man diese via externe .css Datei formatieren kann,
im Grunde machen wir hier auch nichts anderes, nur das wir dieses mal den Stylesheet direkt in die Datei schreiben.

Nehmen wir als Beispiel aus Teil 10 der Tutorialreihe die Überschrift:


Hier haben wir nun wieder die Überschrift mit der class="ueberschrift".
Diese wollen wir nun im Stylesheet im Head formatieren,
das könnte dann so aussehen:

In dem Fall haben wir die Überschrift nun rot eingefärbt.

Wir können natürlich noch viele weitere Formatierungen angeben,
z.B. Größen, Positionen, etc.

Hier einfach noch mal das selbe mit einem dunkel blauem Hintergrund,
wir haben also eine rote Überschrift auf blauem Hintergrund:


soweit können wir nun also in diesen Styletags alles an Style reinmachen, was wir auf dieser HTML Seite haben wollen,
genau wie in eine .css Datei.

Hier noch mal das Beispiel in unserer kompletten HTML Struktur:


globaler Style
Nachdem wir nun einen localen Style haben,
kommen wir mal zu einem globalen, den wir einfach mit allen HTML Dateien verknüpfen können,
die wir so benutzen. Hier will ich noch mal darauf hinweisen, dass wir sowohl das Beispiel aus 10. id und class -Elemente Bezeichnen (mit CSS exkurs) verwenden werden,
als das sich dies jetzt auch im Thema überschneiden wird. Um dies genauer zu lesen bitte diesen Part lesen, da wir das hier nur noch mal kurz wiederholen,
um den Unterschied zwischen globalem und localem Style zu sehen.

Wir verwenden nun erstmal wieder unsere HTML Seite:


Hier haben wir nun unsere Seite,
die einmal eine Verbindung zu der Satei style.css beinhaltet,
einmal die Überschrift mit der class="ueberschrift".

Nun haben wir die Datei, namens style.css,
in der wir nun an sich das selbe machen, wie mit dem localem Style,
also der Inhalt der .css Datei zum Ansprechen der class sehe wie folgt aus:


Nun haben wir hier ebenfalls eine rote Überschrift mit blauem Hintergrund.

Nun, warum diese 2 Arten?
Es ist wie in diesem Part schon öfters hervorgekommen ist einfach manchmal sinnvoll,
den Style direkt in die HTML Datei zu machen, wenn man ihn in keiner anderen braucht, da man einfach eine Datei für den Style bzw. einige Zeilen in der style.css spart.
Es dient also zur Übersicht, natürlich kann man auch diese Sachen in der style.css machen, was bei einer großen Webseite mit einer großen style.css nicht sinnvoll wäre, dort für eine spezielle Seite noch mehr Code zu produzieren.

Das soll es hiervon schon gewesen sein,
ich würde eventuell gerne einen kleinen hier drauf anschließenden CSS Grundkurs schreiben,
was bisher aber noch nicht sicher ist,
sollte dies von mir kommen, werde ich es nachträglich hier verlinken.

Als weiteres noch 2 Sachen:
1. "Ey Dennis, es gibt auch einen BB-Code hier im Forum für css, den kannst du doch bei den localen Styles verwenden!" -Ich weiß es, aber ich habe ihn aus dem Grund nicht verwendet, da dies in einer HTML Seite steht und in vielen Editoren auch ohne Syntaxhighlights angezeigt wird.

2. "Überschrift <--- &Uuml;" -Auch die Zeichenreferenz ist mir bekannt, siehe dazu: 5. Der erste Seiteninhalt -Tags und Zeichen

Diese beiden Sachen wollte ich nur schon mal vorweg beantworten, da das erfahrungsmäßig früher oder später von einem Leser gemeldet wird.
Zum Schluss noch etwas Schleichwerbung,
ich habe jetzt nämlich hier auf easy-scripting.net einen Blog nur für meine Tutorials,
wo ihr immer die aktuellen Sachen über meine Tutorials lesen könnt: Blog Dennis321 Tutorials