Tutorials rund um Webdesign & Webprogrammierung - pixelversum.com

Einführung in HTML

admin — Wed, 29 Oct 2008 10:05:53 +0000

HTML bedeutet “Hypertext Markup Language” (Hypertext-Auszeichnungssprache). Diese wurde am 13. März 1989 von Tim Berners-Lee bei CERN (die Abkürzung CERN leitet sich vom früheren franz. Namen Conseil Européen pour la Recherche Nucléaire), die Europäische Organisation für Kernforschung, entwickelt. HTML wird dazu verwendet Inhalte wie Texte, Bilder und Hyperlinks in Dokumenten zu strukturieren. HTML-Dokumente sind also somit die Grundlage des World Wide Web. Diese Dokumente werden in dem Dateiformat .html oder .htm gespeichert. Neben den im Browser angezeigten Inhalten kann man weitere Informationen (Meta-Daten) zuweisen. Diese geben Auskunft über Autor, verwendete Sprache oder Anweisungen für Robots.

Den Informationen werden durch Auszeichnungen (engl. markup) von Textteilen mit Tags eine Struktur verliehen. Die meisten dieser HTML-Elemente werden durch ein Tag-Paar markiert, das heißt durch einen Starttag und einen dazugehörigen Schluss- oder Endtag. Der Grundaufbau eines HTML-Dokuments besteht aus mindestens 4 solcher Tag-Paare.

Dem HTML-Tag ()
Dem HEAD-Tag ()
Dem TITLE-Tag ()
Dem BODY-Tag ()

So könnte ein einfaches HTML-Dokument aussehen:


    
        Hier kommt der Titel der Seite rein! 
    
    
        Hier kommt der Seiteninhalt rein!

Mit weiteren Zusatztechniken bzw. Style- oder Skriptsprachen lässt sich HTML gestalten und die Anzeige des Inhaltes dynamischer machen.

Die horizontale Linie

admin — Tue, 04 Nov 2008 10:26:16 +0000

Problem: Beim Anlegen einer horizontalen Linie hat man mehrere Möglichkeiten diese zu formatieren. Man kann zum Beispiel die Höhe der Linie mit dem Attribut “size” bestimmen. Dies wird aber nicht von allen Browsern gleich dargestellt. Wie kann man dieses Problem lösen?

Lösung: Anstatt dem Attribut “size” muss man über das Attribute “style” eine Höhe angeben. Z.B.:

. So funktioniert es in allen gängigen Browsern. Normalerweise wird auch immer ein Schatten in der Linie angezeigt. Um diesen zu entfernen, schreibt man noch “noshade” in den Tag hinein.

Sonderzeichen darstellen in HTML

admin — Wed, 05 Nov 2008 09:21:11 +0000

Problem: Manchmal muss oder möchte man Sonderzeichen in einem HTML- Dokument darstellen. Dafür muss man dann bestimmte Zeichenfolgen eingeben, damit diese vom Browser erkannt werden. Doch wie sehen diese aus?

Lösung: Die nachfolgende Tabelle enthält nahezu alle Sonderzeichen, die in HTML umgesetzt werden können. (Vorsicht: Im Internet Explorer werden nicht alle Symbole dargestellt.)

Zeichen	Beschreibung	Name in HTML
“	Anführungszeichen oben	`"`
&	Ampersand-Zeichen, kaufmännisches Und	`&`
<	öffnende spitze Klammer	`<`
>	schließende spitze Klammer	`>`
	Erzwungenes Leerzeichen
¡	umgekehrtes Ausrufezeichen	`¡`
¢	Cent-Zeichen	`¢`
£	Pfund-Zeichen	`£`
¤	Währungszeichen	`¤`
¥	Yen-Zeichen	`¥`
¦	durchbrochener Strich	`¦`
§	Paragraph-Zeichen	`§`
¨	Pünktchen oben	`¨`
©	Copyright-Zeichen	`©`
ª	Ordinal-Zeichen weiblich	`ª`
«	angewinkelte Anführungszeichen links	`«`
¬	Verneinungs-Zeichen	`¬`
®	Registriermarke-Zeichen	`®`
¯	Überstrich	`¯`
°	Grad-Zeichen	`°`
±	Plusminus-Zeichen	`±`
²	Hoch-2-Zeichen	`²`
³	Hoch-3-Zeichen	`³`
´	Akut-Zeichen	`´`
µ	Mikro-Zeichen	`µ`
¶	Absatz-Zeichen	`¶`
·	Mittelpunkt	`·`
¸	Häkchen unten	`¸`
¹	Hoch-1-Zeichen	`¹`
º	Ordinal-Zeichen männlich	`º`
»	angewinkelte Anführungszeichen rechts	`»`
¼	ein Viertel	`¼`
½	ein Halb	`½`
¾	drei Viertel	`¾`
¿	umgekehrtes Fragezeichen	`¿`
À	A mit accent grave (Gravis)	`À`
Á	A mit accent aigu (Akut)	`Á`
Â	A mit Zirkumflex	`Â`
Ã	A mit Tilde	`Ã`
Ä	A Umlaut	`Ä`
Å	A mit Ring	`Å`
Æ	A mit legiertem E	`Æ`
Ç	C mit Häkchen	`Ç`
È	E mit accent grave (Gravis)	`È`
É	E mit accent aigu (Akut)	`É`
Ê	E mit Zirkumflex	`Ê`
Ë	E Umlaut	`Ë`
Ì	I mit accent grave (Gravis)	`Ì`
Í	I mit accent aigu (Akut)	`Í`
Î	I mit Zirkumflex	`Î`
Ï	I Umlaut	`Ï`
Ð	großes Eth (isländisch)	`Ð`
Ñ	N mit Tilde	`Ñ`
Ò	O mit accent grave (Gravis)	`Ò`
Ó	O mit accent aigu (Akut)	`Ó`
Ô	O mit Zirkumflex	`Ô`
Õ	O mit Tilde	`Õ`
Ö	O Umlaut	`Ö`
×	Mal-Zeichen	`×`
Ø	O mit Schrägstrich	`Ø`
Ù	U mit accent grave (Gravis)	`Ù`
Ú	U mit accent aigu (Akut)	`Ú`
Û	U mit Zirkumflex	`Û`
Ü	U Umlaut	`Ü`
Ý	Y mit accent aigu (Akut)	`Ý`
Þ	großes Thorn (isländisch)	`Þ`
ß	scharfes S	`ß`
à	a mit accent grave (Gravis)	`à`
á	a mit accent aigu (Akut)	`á`
â	a mit Zirkumflex	`â`
ã	a mit Tilde	`ã`
ä	a Umlaut	`ä`
å	a mit Ring	`å`
æ	a mit legiertem e	`æ`
ç	c mit Häkchen	`ç`
è	e mit accent grave (Gravis)	`è`
é	e mit accent aigu (Akut)	`é`
ê	e mit Zirkumflex	`ê`
ë	e Umlaut	`ë`
ì	i mit accent grave (Gravis)	`ì`
í	i mit accent aigu (Akut)	`í`
î	i mit Zirkumflex	`î`
ï	i Umlaut	`ï`
ð	kleines Eth (isländisch)	`ð`
ñ	n mit Tilde	`ñ`
ò	o mit accent grave (Gravis)	`ò`
ó	o mit accent aigu (Akut)	`ó`
ô	o mit Zirkumflex	`ô`
õ	o mit Tilde	`õ`
ö	o Umlaut	`ö`
÷	Divisions-Zeichen	`÷`
ø	o mit Schrägstrich	`ø`
ù	u mit accent grave (Gravis)	`ù`
ú	u mit accent aigu (Akut)	`ú`
û	u mit Zirkumflex	`û`
ü	u Umlaut	`ü`
ý	y mit accent aigu (Akut)	`ý`
þ	kleines Thorn (isländisch)	`þ`
ÿ	y Umlaut	`ÿ`
Α	Alpha groß	`Α`
α	alpha klein	`α`
Β	Beta groß	`Β`
β	beta klein	`β`
Γ	Gamma groß	`Γ`
γ	gamma klein	`γ`
Δ	Delta groß	`Δ`
δ	delta klein	`δ`
Ε	Epsilon groß	`Ε`
ε	epsilon klein	`ε`
Ζ	Zeta groß	`Ζ`
ζ	zeta klein	`ζ`
Η	Eta groß	`Η`
η	eta klein	`η`
Θ	Theta groß	`Θ`
θ	theta klein	`θ`
Ι	Iota groß	`Ι`
ι	iota klein	`ι`
Κ	Kappa groß	`Κ`
κ	kappa klein	`κ`
Λ	Lambda groß	`Λ`
λ	lambda klein	`λ`
Μ	My groß	`Μ`
μ	my klein	`μ`
Ν	Ny groß	`Ν`
ν	ny klein	`ν`
Ξ	Xi groß	`Ξ`
ξ	xi klein	`ξ`
Ο	Omikron groß	`Ο`
ο	omikron klein	`ο`
Π	Pi groß	`Π`
π	pi klein	`π`
Ρ	Rho groß	`Ρ`
ρ	rho klein	`ρ`
Σ	Sigma groß	`Σ`
ς	Schluss-Sigma	`ς`
σ	sigma klein	`σ`
Τ	Tau groß	`Τ`
τ	tau klein	`τ`
Υ	Ypsilon groß	`Υ`
υ	ypsilon klein	`υ`
Φ	Phi groß	`Φ`
φ	phi klein	`φ`
Χ	Chi groß	`Χ`
χ	chi klein	`χ`
Ψ	Psi groß	`Ψ`
ψ	psi klein	`ψ`
Ω	Omega groß	`Ω`
ω	omega klein	`ω`
ϑ	theta Symbol	`ϑ`
ϒ	ypsilon mit Haken	`ϒ`
ϖ	pi Symbol	`ϖ`
∀	für alle	`∀`
∂	partiell	`∂`
∃	existiert	`∃`
∅	leere Menge	`∅`
∇	Nabla	`∇`
∈	Element von	`∈`
∉	kein Element von	`∉`
∋	Element von (gespiegelt)	`∋`
∏	Produkt	`∏`
∑	Summe	`∑`
−	minus	`−`
∗	Asterisk	`∗`
√	Wurzel	`√`
∝	proportional zu	`∝`
∞	unendlich	`∞`
∠	Winkel	`∠`
∧	und	`∧`
∨	oder	`∨`
∩	Schnittmenge	`∩`
∪	Vereinigungsmenge	`∪`
∫	Integral	`∫`
∴	deshalb	`∴`
∼	ähnlich wie	`∼`
≅	kongruent	`≅`
≈	beinahe gleich	`≈`
≠	ungleich	`≠`
≡	identisch mit	`≡`
≤	kleiner gleich	`≤`
≥	größer gleich	`≥`
⊂	Untermenge von	`⊂`
⊃	Obermenge von	`⊃`
⊄	keine Untermenge von	`⊄`
⊆	Untermenge von oder gleich mit	`⊆`
⊇	Obermenge von oder gleich mit	`⊇`
⊕	Restklassenaddition	`⊕`
⊗	Kronecker-Produkt	`⊗`
⊥	senkrecht zu	`⊥`
⋅	Punkt-Operator	`⋅`
◊	Raute	`◊`
←	Pfeil links	`←`
↑	Pfeil oben	`↑`
→	Pfeil rechts	`→`
↓	Pfeil unten	`↓`
↔	Pfeil links/rechts	`↔`
↵	Pfeil unten-Knick-links	`↵`
⇐	Doppelpfeil links	`⇐`
⇑	Doppelpfeil oben	`⇑`
⇒	Doppelpfeil rechts	`⇒`
⇓	Doppelpfeil unten	`⇓`
⇔	Doppelpfeil links/rechts	`⇔`
•	Bullet-Zeichen	`•`
′	Minutenzeichen	`′`
″	Sekundenzeichen	`″`
‾	Überstrich	`‾`
⁄	Bruchstrich	`⁄`
℘	Weierstraß p	`℘`
ℑ	Zeichen für “imaginär”	`ℑ`
ℜ	Zeichen für “real”	`ℜ`
™	Trademark-Zeichen	`™`
€	Euro-Zeichen	`€`
ℵ	Alef-Symbol	`ℵ`
Œ	OE-Ligatur	`Œ`
œ	oe-Ligatur	`œ`
Š	S mit Hatschek (Caron)	`Š`
š	s mit Hatschek (Caron)	`š`
Ÿ	Y Umlaut	`Ÿ`
ƒ	Funktion	`ƒ`
–	Gedankenstrich Breite n	`–`
—	Gedankenstrich Breite m	`—`
‘	einfaches Anführungszeichen links	`‘`
’	einfaches Anführungszeichen rechts	`’`
‚	einfaches low-9-Zeichen	`‚`
“	doppeltes Anführungszeichen links	`“`
”	doppeltes Anführungszeichen rechts	`”`
„	doppeltes low-9-Zeichen rechts	`„`
†	Kreuz	`†`
‡	Doppelkreuz	`‡`
…	Auslassungszeichen	`…`
‰	Promille	`‰`
‹	angewinkeltes einzelnes Anf.zeichen links	`‹`
›	angewinkeltes einzelnes Anf.zeichen rechts	`›`
ˆ	Zirkumflex	`ˆ`
˜	kleine Tilde	`˜`

Die Links

admin — Wed, 05 Nov 2008 09:21:16 +0000

Problem: Beim Programmieren einer Webseite möchte man seine individuelle Klasse zeigen. Dazu gehört auch, dass die Hyperlinks nicht vom Browser formatiert werden, sondern man möchte seine eigenen Farben dafür verwenden. Wie kann man das erreichen?

Lösung: Man kann den Links ganz einfach seinen ganz persönlichen Stempel aufdrücken, indem man Ihnen Farben zuweist. Dies macht man gleich im body-Tag. Dort kann man zum einen die eigentliche Linkfarbe ändern mit link=”gewünschte Farbe”, aber auch die Farbe der bereits besuchten und den aktiven Links. Dazu gibt man dann im body-Tag noch alink-für die aktive Linkfarbe und vlink-für die bereits besuchten Links an. Bsp.:

Ein Absatz

admin — Wed, 05 Nov 2008 09:21:21 +0000

Problem: Wie kann ich in HTML ganz einfach einen Absatz einrücken?

Lösung: Man kann einen Absatz einrücken, indem man Ihn in das dir-Tag schreibt. Bsp.:

Ich bin ein eingerückter Text. . Dieser Ausdruck ist aber nicht mehr empfohlen und man sollte deshalb das ul-Tag benutzen.

Das Formular

admin — Wed, 05 Nov 2008 09:21:29 +0000

Problem: Beim Erstellen eines Formulars scheint es nicht möglich zu sein den gewünschten Text neben dem Formular einzufügen, denn vor und nach dem form-Tag wird immer ein Zeilenumbruch eingefügt. Was muss man tun, damit man dieses Problem lösen kann?

Lösung: Die Lösung ist, dass man dem form-Tag ein style-Attribut gibt mit dem Inhalt: “display:inline”. Dadurch wird der Zeilenumbruch umgangen.

Allgemeines

admin — Wed, 05 Nov 2008 11:26:06 +0000

HTML-Tag	Attribute	End-Tag	Bedeutung
		−−>	Damit können ganze Passagen ausgeklammert werden und werden vom Browser nicht mehr angezeigt. Sehr schöne Möglichkeit, um Dinge auszuprobieren!!! So werden Kommentare im HTML-Code vermerkt, die auf der im Browser angezeigten Seite nicht sichtbar, aber beim Erstellen und Erweitern hilfreich sind.
			Damit können Trennlinien eingezogen werden. Farbe, Länge und Stärke können bestimmt werden. (e: hr = horizontal ruler = horizontale Linie)
			Anfang und Ende des HTML-Codes. Ihre neue Spielwiese (e: html=hypertext markup language)
			Der Kopfbereich, in dem allgemeine Angaben gemacht werden, die nicht im Browserfenster angezeigt werden. (e: head=kopf)
			ab hier kommt unser eigentlicher Inhalt, der im Gegensatz zum head-Bereich im Browserfenster angezeigt wird. (e: body=Körper)
</td> <td></td> <td>	Wichtig! Titel hat mehrere wichtige Funktionen: - Titelzeile des Anzeigefensters - Namen von gesetzten Lesenzeichen/Bookmarks - Liste der bereits besuchten Seiten - und für die Eintragung bei Suchmaschinen (e: title=Titel)

Schriftattribute

admin — Wed, 05 Nov 2008 11:26:43 +0000

HTML-Tag	Attribute	End-Tag	Bedeutung
			Schrift wird fett angezeigt (e: b=bold=fett)
			kursive Schrift (e: i=italic)
			unterstrichene Schrift - sehr mit Vorsicht zu genießen, da der Surfer bei unterstrichenen Passagen von Links ausgeht! (e: u=underlined=unterstrichen)
			hochgestellte Schrift, z.B. 0^C (e: sup=superscript, zu deutsch etwa Hochstellung)
			tiefgestellte Schrift, z.B. H₂O (e: sub=subscript, zu deutsch ungefaehr Tiefstellung)
			bewirkt Schrift mit gleichen Abständen (dicktengleich) (e: tt=teletyper=Fernschreiber)

Schriftgröße

admin — Wed, 05 Nov 2008 11:27:02 +0000

HTML-Tag	Attribute	End-Tag	Bedeutung
..		..	Leitet eine Überschrift ein (reagiert wie Absatz!) x kann einen Wert von 1 bis 6 annehmen. Die größte Überschrift ist 1, die kleinste 6. (e: h=heading=Überschrift)
..	align=left align=center align=right align=justify	..	Überschriften können wie Absätze ausgerichtet werden (jetzt in CSS umsetzen)
			Macht die Schrift um einen Schritt kleiner (e: small=klein)
			Macht die Schrift um einen Schritt größer (e: big=groß)
		< /font >	Bestimmen Sie hier die Schriftgröße von 1 - 7. Die Angaben sind relativ. Die Normalschriftgröße ist 3. Größere Schrift bekommt man mit 4,5,6 oder 7. Kleinere Schrift mit 1 oder 2. (e: font size = Schriftgröße)

Absatzaufbau

admin — Wed, 05 Nov 2008 11:27:50 +0000

HTML-Tag	Attribute	End-Tag	Bedeutung
	align=”left” align=”center” align=”right” align=”justify”		Absatzbeginn - vor und nach dem Absatz wird automatisch Platz gehalten (e: p=paragraph) (e: align=Ausrichtung)
			zentrierte Ausrichtung (oft bei Gedichten) (e: center=zentriert)
			erzwungener Zeilenumbruch (Zeilenende) (e: br=break=Umbruch)
			erzwungener Zusammenhalt, was z.B. für Wortgebilde wie”V 4.1″geschickt ist. (e: nobr=nobreak=kein Umbruch)
			Hiermit können Zitate aufgenommen werden. Tag verhält sich wie Absatztag, wobei das aussehen vom Browser definiert wird! Meistens eingerückt, auf jeden Fall anders formatiert wie Rest. (e: blockquote=geblocktes Zitat)