Grundlegende Informationen und Hilfe zu HTML

[Katana]

Ich hab' mir mal gedacht, ich mache hier eine kleine Übersicht mit Tips, Tricks und wichtigen Informationen zum Thema Webdesign, allerdings zum größten Teil zum Thema sauberer Code

Wer Links, etc. hat, darf die natürlich gerne zum Thema beisteuern und natürlich darf auch diskutiert werden.
Die Posts, die sich im Nachhinein jedoch als contraproduktiv erweisen werde ich jedoch löschen um Neulinge nicht allzusehr zu verwirren und die Informationen kompakt und übersichtlich zu halten.

In diesem Thread wird's nur um HTML, JavaScript und evtl. CSS gehen, keine Scriptsachen mit PHP, ASP oder JSP, keine Sonderheiten wie Java-, Flash-, etc. Applets und auch nicht um Sonderformen von HTML wie XHTML oder DHTML sondern halt die ""Basics""


Gut, was ist HTML?

HTML steht für HyperText Markup Language, also eine ""erweiterte Beschreibungs- bzw. Darstellungssprache"".
Diese wird im WWW (World Wide Web (Weltweites Netz(werk)) über die Protokolle HTTP (HyperText Transfer Protocol) und HTTPS (HyperText Transfer Protocol Secure, also ein ""sicheres"" HTTP) übertragen.
Jede Seite die im Internet angezeigt wird, basiert auf den Grundregeln einer HTML-Seite. Dieser Standard ist notwendig, damit die Informationen einheitlich (von allen Browsern) dargestellt werden können.
Im Gegensatz zu XML (eXtensible Markup Language, erweiterbare Beschreibungssprache) ist es bei HTML nicht möglich eigene, sogenannte, Tags zu entwickeln, sondern man ist limitiert auf das, was einem vom HTML Standard zugebilligt wird.
Mit diesen Tags (""Beschreibungsobjekte"") ist es einem möglich, das Aussehen und den Inhalt eine HTML Seite zu bestimmen, z.B. Tabellen, Bilder oder Absätze einfügen.

Der Nachteil von HTML ist sicherlich daß es keine Programmiersprache ist (wie immernoch viele annehmen oder behaupten), sondern halt eine reine Beschreibungs- bzw. Darstellungssprache ist und somit statisch. Ein HTML Dokument kann während der Laufzeit (außer mit JavaScript & Co) nicht mehr verändert werden. Ein Bild z.B. wird immer seine Position behalten, bis man das Design (also die Seite selber) verändert.


Wie ist eine HTML Seite aufgebaut?

Eine HTML Seite besteht wie oben gesagt aus so genannten HTML-Tags. Diese machen das eigendlich Design der HTML Seite aus. Ein ""Tag"" wird in HTML in spitze Klammern (< und >) geschrieben und beschreibt, wie der Text dazwischen aussehen soll.
Dazwischen? Werden Unerfahrene jetzt vielleicht fragen. Genau, dazwischen. Ein Tag existiert nämlich *nie* alleine sondern hat immer einen Gegenpart, der das Tag beendet. So wie man manche Texte in Klammern schreibt. Wenn ich eine Klammer öffne, muß sich sie zu einem späteren Zeitpunkt wieder schließen, sonst ergibt der Satz keinen Sinn
Das ""End-Tag"" zu einem ""Tag"" wird genauso geschrieben, nur vor den Namen des Tags noch ein ""/"" gesetzt.
Ein Beispiel wäre z.B. das <title>-Tag, welches der HTML-Seite ihre Überschrift gibt. Zwischen den Tags steht dann der Titel der Seite und das sieht dann folgendermaßen aus:

Code: Alles auswählen

<title>Überschrift</title>

[Katana]

Was heißt hier ein Tag existiert *nie* alleine? Was ist denn z.B. mit <br> oder <hr>?
Diese Frage werden sich vielleicht einige stellen, die schon öfter in HTML geschrieben haben, bzw. sich HTML-Quelltexte angeschaut haben.
Nun, bei den obengenannten Tags gibt es auch Gegenstücke, die Notation wäre also richtigerweise

Code: Alles auswählen

<br></br>

bzw.

Code: Alles auswählen

<hr></hr>

Nun gibt es jedoch eine kleine Besonderheit bei HTML, die auch bei XML zu sehen ist, und zwar das Tags zwischen denen (im Gegensatz zum <title>-Tag) kein Text steht (z.B. <br>, <hr>, <img>, etc.) auch direkt geschlossen werden und zwar nicht wie oben angegeben einfach

Code: Alles auswählen

<br>

sondern richtiger weise

Code: Alles auswählen

<br />

Das erste würde das <br>-Tag öffnen, es aber niemals schließen. Bei den meisten Tags dieser Art ist es den Browsern zwar egal, genüg aber nicht dem HTML Standard.

Kann ich denn nur Text zwischen HTML Tags schreiben?
Ja und nein. Der Text, der auf einer Seite dargestellt werden soll, steht *immer* zwischen zwei Tags, auch wenn es *nur* die <html></html> Tags sind, aber es gibt auch möglichkeiten, einem HTML-Tag sogenannte Attribute zu übergeben, die das Aussehen des in ihnen eingeschlossenen Textes verändern können.
So z.B. beim <td>-Tag (td steht für TableData, Tabellendaten, und meint damit die Zelle einer Tabelle). Ihm kann man z.B. das Attribute ""align"" übergeben, was dann bestimmt, ob der Text linkbündig (""left""), rechtsbündig (""right"") oder zentriert (""center"") ausgegeben werden soll.
Dies würde in der Praxis dann z.B. so aussehen:

Code: Alles auswählen

<td align="center">Text</td>

Die Werte von Attributen (in diesem Falle ""center"") müssen solange es keine numerischen Werte (-n...0...n) sind immer in Anführungszeichen gesetzt werden. Es empfiehlt sich jedoch, Parameter einfach grundsätzlich in Anführungszeichen zu setzen.

Muß ich beim verwenden von Tags auf etwas achten?
Ja, muß man.
Man muß Tags immer schließen (siehe oben) und wenn man Tags verschachtelt (z.B. <b><u>Text</u></b> - stellt den Text fett und unterstrichen da), muß man darauf auchen daß man die Elemente die man als letztes geöffnet hat, als erstes schließt.
Falsch:

Code: Alles auswählen

<b><u>Text</b></u>

Richtig:

Code: Alles auswählen

<br><u>Text</u></b>

So, also der weitere Aufbau einer HTML-Seite.
Der Inhalt der HTML-Seite steht zwischen den <html></html> Tags, davor und danach dürfen keine Tags mehr kommen. Diese werden entweder gar nicht interpretiert, oder evtl. fehlerhaft.
Nun, ganz richtig ist auch das nicht, denn vor dem öffnenden <html>-Tag sollte (bzw. muß) der DOCTYPE des Dokumentes stehen.
Dieser DOCTYPE (DOCument TYPE, Dokumententyp) sagt dem Browser wie er die Seite darzustellen hat und bestimmt auch die Auswahl der HTML-Tags die verwendet werden dürfen.

[Katana]

Wie sieht denn so ein DOCTYPE aus?

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

wäre ein Beispiel für einen DOCTYPE. Es ist erkennbar, daß es sich um eine HTML-Datei handelt und daß diese nach dem 4.01er Standard interpretiert werden soll (ältere Tags fallen weg, neuere sind hinzugekommen).

Es gibt folgende DOCTYPES für die (aktuelle) 4.01er Version von HTML:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Nach Möglichkeit sollte man den ""Strict"" HTML DOCTYPE verwenden und die damit angenommenen Einschränkungen. Grob gesagt unterstützt die Strict DTD (Document Type Definition, Dokumententypsdefinition) die wenigsten und die Transitional DTD die meisten HTML-Tags. Genaueres gibt es hier: Strict, Transitional und Frameset.
Die Frameset DTD ist wirklich nur dafür gedacht, wenn man ein Frameset, also eine Seite bestehend aus mehreren Fenstern in eine Seite gefasst, darstellen will.

Gut, wir wissen also wie wir die Seite anfangen, also wie wir dem Browser sagen, welche Funktionalitäten wir genau brauchen (für den Anfang empfiehlt sich immer Transitional).
Als nächstes definieren wir den Bereich in dem wir unseren HTML-Code unterbringen möchten und zwar folgendermaßen:

Code: Alles auswählen

<html></html>

Alles, was dazwischen steht wird, sofern nicht anders angegeben, vom Browser als HTML-Code interpretiert.

Desweiteren ist eine HTML-Seite in den Kopf (head) und Körper (body) unterteilt. Im Kopf stehen grundlegende Informationen zur Seite, wir unse oben angesprochene Seitenüberschrift (<title>) oder der Schriftsatz (z.B. UTF-8 oder ISO-8859-1) der verwendet werden soll, die Seite anzuzeigen.
Im Körper stehen dann die Informationen, die auch für den Benutzer sichtbar sein sollen, z.B. Bilder und Tabellen.

Fangen wir also mit unserem Kopf an. Welche Informationen können in ihm enthalten sein?
Im Kopf dürfen folgende HTML-Tags verwendet werden: <script>, <style>, <meta>, <link>, <object>
Verwendet werden muß: <title>

In ein <script>-Tag werden Scriptquelltexte geschrieben, z.B. in JavaScript oder VBScript.

In ein <style>-Tag kommen z.B. CSS-Informationen (Cascading Style Sheets).

In <meta>-Tags können verschiedene Informationen enthalten sein, wichtig ist für uns aber hier nur folgendes Meta-Tag:

Code: Alles auswählen

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Dieses beschreibt den Schriftsatz (hier ISO-8859-1, westlicher Standard) der für das Dokument benutzt werden soll.
Am interessantesten sind wohl

• ISO-8859-1 (westlicher Standard)
• ISO-8859-15 (westlicher Standard mit Eurozeichen)
• UTF-8 (nach dem UTF-8 Standard kodiert)

[Katana]

Es empfiehlt sich auf jeden Fall dieses Tag zu verwenden, da sonst z.B. europäische Seiten falsch interpretiert werden und dt. Sonderzeichen vom Browser evtl. als chinesische bzw. japanische Zeichen dargestellt werden.

Durch ein <link>-Tag können externe Informationen, z.B. externe CSS-Dateien eingebunden werden.

Ein <object>-Tag lädt bestimmte Objekte.

Das <title>-Tag hatten wir oben schon erwähnt, es bestimmt die Überschrift der HTML Seite die in der Titelzeile des Browsers angezeigt wird.

Nun zum Körper
Nun, zwischen die <body></body>-Tags kommt der Rest, also alles das, was angezeigt werden soll.
Hier mal die gängigsten Tags:

Um ein Bild einzufügen:

Code: Alles auswählen

<img src="URL des Bilder" alt="Text der angezeigt werden soll, falls das Bild nicht geladen/angezeigt wird. Ist erforderlich!" />

Eine Tabelle:

Code: Alles auswählen

<table><tr><td>Zeile 1, Spalte 1</td><td>Zeile 1, Spalte 2</td></tr><tr><td>Zeile 2, Spalte 1</td><td>Zeile 2, Spalte 2</td></tr></table>

Die <table></table>-Tags bestimmen hier den Anfang und das Ende der gesammten Tabelle und schließen weitere Tags ein.
Die <tr></tr>-Tags beschreiben eine ganze Zeile und enthalten die <td></td>-Tags, welche je eine einzelne Zelle beschreiben.

Eine Verknüpfung:

Code: Alles auswählen

<a href="Ziel der Verknüpfung (URL mit Protokoll)">Verknüpfungstext</a>

Ein Zeilenumbruch:

Code: Alles auswählen

<br />

Ein Absatz:

Code: Alles auswählen

<div />

So, das war's für's erste, Erweiterungen/Veränderungen sind natürlich nicht ausgeschlossen, nieman ist perfekt und sicherlich werden Änderungen gemacht werden müssen

Noch ein paar Links zu dem Thema:
Struktur von HTML Dateien: http://www.w3.org/TR/REC-html40/struct/global.html (englisch)
Seite des W3C: http://www.w3.org (englisch)
HTML-Validator: http://validator.w3.org (englisch, prüft auf korrektes HTML)
SelfHTML: http://selfhtml.teamone.de (deutsch)

(c)24.10.2003 by Katana

[mr.selfdestruct]

katana is teh 1337*SHRRRUUUUGGGG*

[Katana]

Hmm, außer einem mehr oder weniger unsinnigen Post keine Anmerkungen, Antworten, etc.?

[ex-venom]

na ja. Das sind so Sachen was dreamweaver eh kann und wenn man damit ne Zeit lang rumgemacht hat geht das einem auch per Editor fast wie von selbst.

[Jimmy]

Bis auf das mit dem ""doctype"" ist das alles doch recht einfach.
Ich finds aber nett das du für die n00bs sowas machts ^__^

Bring denen doch ncoh table's und framesets bei dann gehen wir gemeinsam in CSS über

[Vindicare]

Danke 刀, aber du hättest dir die Arbeit ersparen können und schlicht www.selfhtml.teamone.de posten können...

Edit:
Ähm, hast du ja, ich Dödl!

[Katana]

Ich dachte einfach, sowas gehört hier rein

SelfHTML sollten die meisten eigentlich kennen, sollte ja auch nicht so umfangreich wie SelfHTML werden, sondern nur die Basics.
Hoffe, das habe ich einigermaßen hingekriegt

[Vindicare]

Ein Zeilenumbruch:

Code: Alles auswählen

<br />

Warum <br /> und nicht <br>??? Neuer Standard???

[Katana]

Jepp, damit's XML konform wird.

Jedes geöffnete Tag muß auch wieder geschlossen werden, also eigentlich

Code: Alles auswählen

<br></br>

da das BR-Tag jedoch wie z.B. das IMG- oder INPUT-Tag keinen ""Inhalt"" zwischen den Tags haben, kann man diese auch so beenden:

Code: Alles auswählen

<br />
<img [...] />
<input [...] />

[Vindicare]

Aha, hab mir sowas gedacht, muss das noch in der neuen Version meiner HP ändern. Was für ein Editor benutzt du eigentlich?

[Katana]

Ich nutze für HTML und PHP den Weaverslave und bin damit recht zufrieden.
Kann allerdings kein WYSIWYG, wer das also braucht sollte sich nach einem anderen Editor umsehen.

[Vindicare]

Muss ich mal austesten. Ich bin zum Glück über das WYSIWYG Stadium hinweg und kann daher mit einem normalen Editor umgehen...
Edit:
Geht das Preview immer über IE oder den Standardbrowser (in meinem Fall Firebird)?

Edit 2:
Aha! Einstellbar!!!