Akhâphurdam
23.05.2004, 15:35
HTML - Grundbefehle
1. Kapitel - Einführung
Sogenannte Tags müssen immer geschlossen werden, mit Ausnahme vom <br>-Tag. Der sorgt für einen krassen Zeilenumbruch, und wird in der Sprache sehr oft genutzt.
Diesen TuT habe ich geschrieben, weil mir totlangweilig war/ist. Ich hoffe er gefällt euch.
2. Kapitel - Grundstruktur
<html> Kündigt die Datei an.
<head> Der Header-Bereich mit Titel und Metatags
<title>Titel</title> Der Text, der oben im Browserfenster angezeigt wird
</head> Schließt den -> <head> <-
<body> Jetzt kommt die Body-Datei, das "Wahre" HTML, was angezeigt wird
//TexTexTexT//
//HTML Codes...//
//Hier schreibt man halt rein, was man angezeigt bekommen möchte//
//Hier kommen noch viele Codes rein//
</body> Schließt den -> <body> <-
</html> Schließt die Datei ab.
3. Kapitel - Formatierung von Texten
Z.b.
<p>Peter ging nach Hause. Sein Vater war nicht mehr da. Er ging in den Wald.</p><p>Dann sah er einen <b>Bären</b>, wobei er hoch aufsprang und sich an den Kopf stosste.</p><p>Es tat <i>sehr</i> weh, und er starb an Herzkreislaufstörungen</p>
Der Text würde jetzt so angezeigt werden:
Peter ging nach Hause. Sein Vater war nicht mehr da. Er ging in den Wald.
Dann sah er einen Bären, wobei er hoch aufsprang und sich an den Kopf stosste.
Es tat sehr weh, und er starb an Herzkreislaufstörungen.
Der <p>-Tag sorgt für Absätze in einem langem Text, es wird dann übersichtlicher. Der <i>-Tag sorgt, dass ein Wort kursiv dargestellt wird. Der <b>-Tag sorgt dafür, dass ein Wort fett dargestellt wird.
4. Kapitel - Absätze
Z.b.
Hallo liebe Anne,<br><br>
herzlichen Glückwunsch zu deinem Geburtstag!<br>
Ich hoffe das Tante Jutta sich nicht wieder unter den Tisch säuft und du hoffentlich auch nicht!<br>
Während du feierst, kann ich nicht kommen. Mein Onkel<br>hat Leberwürste bestellt und will sie jetzt unbedingt mit<br>mir aufessen.
Das würde so aussehen:
Hallo liebe Anne,
herzlichen Glückwunsch zu deinem Geburtstag!
Ich hoffe das Tante Jutta sich nicht wieder unter den Tisch säuft und du hoffentlich auch nicht!
Während du feierst, kann ich nicht kommen. Mein Onkel
hat Leberwürste bestellt und will sie jetzt unbedingt mit
mir aufessen.
Der <br>-Tag sorgt dafür, damit jeweils eine Zeile frei bleibt. Man nimmt zwei <br>-Tags und setzt sie in den Code, hat man eine Leerzeile.
5. Kapitel - CSS CascadingStyleSheets
Jetzt geht es um Gestaltungshilfen, die HTML-Seiten sehr gut verschönern können. Nachfolgend werde ich euch verschiedene Möglichkeiten zeigen, um CSS einzusetzen.
Direkteinbindung in HTML-Tag:
<b style="border:1px solid;border-color:green;border-style:groove;>Hallo</b>
Probiert den Code aus. Es wird ein stylischer Rahmen
um das Wort angezeigt, der auf schwarzem Hintergrund hervorragend aussieht.
Head-Bereich-CSS
<style type="text/css">
<!--
.rahmen
{ border:1px solid;border-color:green;border-style:groove; }
-->
</style>
Das kopiert ihr in den Head-Bereich zwischen <head> und </head>. Dann müsst ihr das in einen Tag einfügen:
<b class="rahmen">Hallo</b>
Das wars mit CSS. Nachher gibt es noch eine Befehlsliste.
;-)
-. -. -. -. -. -. -. -.
Tutorial by DoneD
Version 1.04
Edits werden noch eingefügt, bis dahin bitte toppen, wenn es geht.
Edit 1: CSS-Tutorial hinzugefügt... :)
1. Kapitel - Einführung
Sogenannte Tags müssen immer geschlossen werden, mit Ausnahme vom <br>-Tag. Der sorgt für einen krassen Zeilenumbruch, und wird in der Sprache sehr oft genutzt.
Diesen TuT habe ich geschrieben, weil mir totlangweilig war/ist. Ich hoffe er gefällt euch.
2. Kapitel - Grundstruktur
<html> Kündigt die Datei an.
<head> Der Header-Bereich mit Titel und Metatags
<title>Titel</title> Der Text, der oben im Browserfenster angezeigt wird
</head> Schließt den -> <head> <-
<body> Jetzt kommt die Body-Datei, das "Wahre" HTML, was angezeigt wird
//TexTexTexT//
//HTML Codes...//
//Hier schreibt man halt rein, was man angezeigt bekommen möchte//
//Hier kommen noch viele Codes rein//
</body> Schließt den -> <body> <-
</html> Schließt die Datei ab.
3. Kapitel - Formatierung von Texten
Z.b.
<p>Peter ging nach Hause. Sein Vater war nicht mehr da. Er ging in den Wald.</p><p>Dann sah er einen <b>Bären</b>, wobei er hoch aufsprang und sich an den Kopf stosste.</p><p>Es tat <i>sehr</i> weh, und er starb an Herzkreislaufstörungen</p>
Der Text würde jetzt so angezeigt werden:
Peter ging nach Hause. Sein Vater war nicht mehr da. Er ging in den Wald.
Dann sah er einen Bären, wobei er hoch aufsprang und sich an den Kopf stosste.
Es tat sehr weh, und er starb an Herzkreislaufstörungen.
Der <p>-Tag sorgt für Absätze in einem langem Text, es wird dann übersichtlicher. Der <i>-Tag sorgt, dass ein Wort kursiv dargestellt wird. Der <b>-Tag sorgt dafür, dass ein Wort fett dargestellt wird.
4. Kapitel - Absätze
Z.b.
Hallo liebe Anne,<br><br>
herzlichen Glückwunsch zu deinem Geburtstag!<br>
Ich hoffe das Tante Jutta sich nicht wieder unter den Tisch säuft und du hoffentlich auch nicht!<br>
Während du feierst, kann ich nicht kommen. Mein Onkel<br>hat Leberwürste bestellt und will sie jetzt unbedingt mit<br>mir aufessen.
Das würde so aussehen:
Hallo liebe Anne,
herzlichen Glückwunsch zu deinem Geburtstag!
Ich hoffe das Tante Jutta sich nicht wieder unter den Tisch säuft und du hoffentlich auch nicht!
Während du feierst, kann ich nicht kommen. Mein Onkel
hat Leberwürste bestellt und will sie jetzt unbedingt mit
mir aufessen.
Der <br>-Tag sorgt dafür, damit jeweils eine Zeile frei bleibt. Man nimmt zwei <br>-Tags und setzt sie in den Code, hat man eine Leerzeile.
5. Kapitel - CSS CascadingStyleSheets
Jetzt geht es um Gestaltungshilfen, die HTML-Seiten sehr gut verschönern können. Nachfolgend werde ich euch verschiedene Möglichkeiten zeigen, um CSS einzusetzen.
Direkteinbindung in HTML-Tag:
<b style="border:1px solid;border-color:green;border-style:groove;>Hallo</b>
Probiert den Code aus. Es wird ein stylischer Rahmen
um das Wort angezeigt, der auf schwarzem Hintergrund hervorragend aussieht.
Head-Bereich-CSS
<style type="text/css">
<!--
.rahmen
{ border:1px solid;border-color:green;border-style:groove; }
-->
</style>
Das kopiert ihr in den Head-Bereich zwischen <head> und </head>. Dann müsst ihr das in einen Tag einfügen:
<b class="rahmen">Hallo</b>
Das wars mit CSS. Nachher gibt es noch eine Befehlsliste.
;-)
-. -. -. -. -. -. -. -.
Tutorial by DoneD
Version 1.04
Edits werden noch eingefügt, bis dahin bitte toppen, wenn es geht.
Edit 1: CSS-Tutorial hinzugefügt... :)