23.06.2009, 12:34
Ein par Grundlegende Dinge die man braucht um HTML zu programmieren möchte ich euch hier erklären.
Vorab ersteinmal die Erklärung wie ihr eine html datei machen könnt.
Öffnet einfach den Editor und speichert das eingegebene zum Schluss wie folgt ab :
der-datei-name.html
(.htm geht auch)
[Ich erkläre hier nur einige simple Dinge, den Rest müsst ihr euch schon selber raussuchen ;-)]
1. Wie ist eine HTML-Seite aufgebaut ?
Html dient zur Darstellung von Grafiken und Texten auf einer Seite. Man kann also nicht zb. wie bei Javascript befehle einprogrammieren.
Allerdings hat auch Html bestimmte Befehle :
-
Die Tags
Tags müssen nachdem sie geöffnet wurden ein Stück später (je nachdem was der Tag enthält) wieder geschlossen werden da es sonst zu Darstellungsproblemen kommen kann.
*der Grundaufbau eines Tags :
<der-tagbefehl>Inhalt des Tags</schließen-des-befehls>
-
Kommen wir zurück zum Thema unserer "Punktüberschrift" 1 , nämlich dem
Aufbau einer HTML-Seite :
Abgesehen vom Beginn einer jeden halbwegs-professionellen Seite
(dem doctype befehl der meist die Art der Seite angibt)
und etwas schwerer zu verstehen ist, beginnt jedes html dokument
mit dem
HTML-Tag <html>
und endet mit
dessen Schließung </html>.
Nun folgt der
Head-Tag (<head>....</head>).
Der Head-Tag beinhaltet Informationen über die folgende Seite.
Aber es können auch Informationen für externe Seiten enthalten sein.
Zum Beispiel meta-tags. Man kann sie vielseitig nutzen - meist werden sie zum optimieren der Aufnahme
der eigenen Seite in Suchmaschinen genutzt. Auch hier kann man sehr viel interessantes ergoogeln.
Am einfachsten geht es natürlich mit Meta-Tag Generatoren denn diese nehmen einem praktisch das ganze
"nach meta-tags googeln" ab indem sie spezielle , auf Ihre Webseite zugeschnittene ergebnisse erhalten.
Nun kann man den Titel-Tag folgen lassen
der , wie der name schon sagt , den titel Ihrer Seite ausgibt. Das sieht dann wie folgt aus :
<title>Meine Seite</title>.
Damit schließen wir ersteinmal den head-tag und kommen zum Hauptteil einer Seite : dem
Body-Tag
Der Body-Tag enthält so ziemlich alles was die Seite enthalten muss. Von Links , Grafiken , iframe's ,
loginbereichen und vielem mehr bis hin zum Ende des body bereiches ;-)
Damit wäre unser "Punkt 1" zu ende.
2. Grundbefehle/Grundtags
HTML-Befehle die jeder Html-Programmierer auswendig kennen müsste.
-
Schrift und co.
Schrift kann man auf sehr viele unterschieldiche Arten darstellen.
Je nach stylesheet (erklärung folgt) verändert sich die Darstellung.
Die Standartdarstellung ist noch recht überschaubar :
<h1>Dies-ist-eine-Überschrift</h1>
Dieser Container gibt Den beinhaltenden Text groß geschrieben aus.
man kann <h1> bis <h6> nutzen - die schrift würde immer kleiner werden.
Stylesheet erklärung :
Stylesheets werden in der Pogrammiersprache CSS geschrieben und geben an wie Elemente einer Seite dargestellt werden.
Zum Beispiel könnte man das stylesheet von bitefight.de übernehmen und man hätte die roten Farben usw.
(<link rel="stylesheet" type="text/css" href="http://s1.bitefight.de/bite/game.css"> wobei href="..." den link zur css datei enthält.)
-
Ein Link
Ein Link bringt Besucher ihrer Seite in einen anderen Bereich des Internet's.
Das kann eine Unterseite ihrer Homepage sein, aber auch genausogut eine Empfehlung einer fremden Seite.
Je nachdem um was es sich handelt entscheiden sie wie der Link dargestellt wird bzw. wie er letztendlich funktioniert.
ein beispiel :
*Ein normaler Link sieht so aus
<a href="http://die-seite-auf-die-man-kommt.de/">Der-Text-der-gezeigt-wird</a>
Wenn der Link in einem neuen Tab geöffnet werden soll ,
[ihre Seite bleibt in diesem Fall geöffnet] müsste es so aussehen :
<a href="http://......de/" target="_blank">......</a>
Es gibt noch weitere Methoden, und es würde viel zu lange dauern sie alle hier zu schreiben.
Eine von diesen vielen werde ich gleich vorstellen.
Doch damit ihr den Sinn dieses Tag's versteht muss ich euch ersteinmal einen anderen Befehl vorstellen :
-
Iframe's
Iframe's sind Kästchen auf der eigenen Seite
(die größe ist beliebig einstellbar, ebenso das aussehen)
die andere Seiten darstellen.
Iframe's sind zwar eine ziemlich alte Methode der Webseitendarstellung, aber sie sind immernoch geläufig.
Allerdings gibt es einen haken :
Die meisten Seiten bei denen es sich lohnen würde sie in einem iframe darzustellen,
haben einen Schutz in form eines java-script's gegen diesen Befehl :
<script type="text/javascript">
if(top!=self)
top.location=self.location;
</script>
Ist dieser Code auf einer Seite platziert, würde diese nicht in einem iframe erscheinen,
sondern sie würde sich öffnen als ob man den link zur Seite angeklickt hat.....
Nun zurück zu den Iframe's .
*Der Standart Code sieht in etwa so aus:
<iframe src="http://die-seite-die-angezeigt-wird.de/" width="100" height="100" name="iframe1"></iframe>
width gibt die breite des frames in zahlen an (angabe in pixeln)
height ist fast das selbe wie width , nur das height die höhe angibt.
name wird nur benötigt wenn man will das sich ein auf Ihrer Seite befindlicher Link in dem frame öffnet.
(in diesem fall müsste der Link wie folgt modifiziert sein :
<a href="..." target="iframe1">Der-Link</a>)
iframes dürfen nichts zwischen den tags enthalten
(das heißt so wäre es falsch :
<iframe src="...">ein-text</iframe> , der Text würde nicht angezeigt werden.)
-
Bilderdarstellung
Bilder darzustellen ist ebenso einfach wie Links zu platzieren.
Wie bei fast jedem Befehl gibt es auch hier wieder zig Möglichkeiten
ein Bild zu positionieren.
*Die normale Darstellung :
<img src="http://adresse-des-bildes.de/bild.jpg" alt="Ein-Bild">
alt="..." gibt den Text an der Dargestellt wird sobald das Bild nicht verfügbar ist.
So weiß der Besucher auch wenn es nicht dargestellt wird was auf dem Bild zu sehen war.
3. Verschiedene kleinere Tag-Verknüpfungen
Zum Beispiel um eine Tabelle darzustellen oder ein Bild mit einem Link zu versehen.
-
Darstellung einer Tabelle
Ist schon etwas "komplizierter".
Hier mal ein Bild um schematisch die Funktion der Tag's zu erläutern :
Und hier das Tabellenbeispiel meinerseits :
klick mich
Hier der Quelltext dazu den ich euch gleich erläutern werde :
Alles was sich innerhalb des center-tags (<center>hier</center>) befindet wird zentriert (in die mitte der Seite gesetzt)
<table border="1"> gibt an das der Bereich innerhalb dieses Tag's einen Rand mit der größe 1 , dh. einem pixel hat.
(mit </table> wird der Befehl geschlossen)
<tr> öffnet die Zeile und
<th> öffnet eine Spalte.
Das ist eigentlich schon alles. Man muss halt gut Tags mixen können ;-)
-
Ein Bild verlinken
Etwas simpler als die Tabelle :
<a href="http://.../" target="....."><img src="http://..."></a>
Der Link umgibt das Bild sozusagen.
--------------------------------------------------------------------
Puh, geschafft ;-) Ich hoffe das hat euch HTML etwas näher gebracht.
Bin gerne für Ergänzungen und Berichtigungen empfänglich,allerdings wäre es mir lieb wenn ihr die per PN schreibt und nicht in den Thread.
mfg Heathen Man
Vorab ersteinmal die Erklärung wie ihr eine html datei machen könnt.
Öffnet einfach den Editor und speichert das eingegebene zum Schluss wie folgt ab :
der-datei-name.html
(.htm geht auch)
[Ich erkläre hier nur einige simple Dinge, den Rest müsst ihr euch schon selber raussuchen ;-)]
1. Wie ist eine HTML-Seite aufgebaut ?
Html dient zur Darstellung von Grafiken und Texten auf einer Seite. Man kann also nicht zb. wie bei Javascript befehle einprogrammieren.
Allerdings hat auch Html bestimmte Befehle :
-
Die Tags
Tags müssen nachdem sie geöffnet wurden ein Stück später (je nachdem was der Tag enthält) wieder geschlossen werden da es sonst zu Darstellungsproblemen kommen kann.
*der Grundaufbau eines Tags :
<der-tagbefehl>Inhalt des Tags</schließen-des-befehls>
-
Kommen wir zurück zum Thema unserer "Punktüberschrift" 1 , nämlich dem
Aufbau einer HTML-Seite :
Abgesehen vom Beginn einer jeden halbwegs-professionellen Seite
(dem doctype befehl der meist die Art der Seite angibt)
und etwas schwerer zu verstehen ist, beginnt jedes html dokument
mit dem
HTML-Tag <html>
und endet mit
dessen Schließung </html>.
Nun folgt der
Head-Tag (<head>....</head>).
Der Head-Tag beinhaltet Informationen über die folgende Seite.
Aber es können auch Informationen für externe Seiten enthalten sein.
Zum Beispiel meta-tags. Man kann sie vielseitig nutzen - meist werden sie zum optimieren der Aufnahme
der eigenen Seite in Suchmaschinen genutzt. Auch hier kann man sehr viel interessantes ergoogeln.
Am einfachsten geht es natürlich mit Meta-Tag Generatoren denn diese nehmen einem praktisch das ganze
"nach meta-tags googeln" ab indem sie spezielle , auf Ihre Webseite zugeschnittene ergebnisse erhalten.
Nun kann man den Titel-Tag folgen lassen
der , wie der name schon sagt , den titel Ihrer Seite ausgibt. Das sieht dann wie folgt aus :
<title>Meine Seite</title>.
Damit schließen wir ersteinmal den head-tag und kommen zum Hauptteil einer Seite : dem
Body-Tag
Der Body-Tag enthält so ziemlich alles was die Seite enthalten muss. Von Links , Grafiken , iframe's ,
loginbereichen und vielem mehr bis hin zum Ende des body bereiches ;-)
Damit wäre unser "Punkt 1" zu ende.
2. Grundbefehle/Grundtags
HTML-Befehle die jeder Html-Programmierer auswendig kennen müsste.
-
Schrift und co.
Schrift kann man auf sehr viele unterschieldiche Arten darstellen.
Je nach stylesheet (erklärung folgt) verändert sich die Darstellung.
Die Standartdarstellung ist noch recht überschaubar :
<h1>Dies-ist-eine-Überschrift</h1>
Dieser Container gibt Den beinhaltenden Text groß geschrieben aus.
man kann <h1> bis <h6> nutzen - die schrift würde immer kleiner werden.
Stylesheet erklärung :
Stylesheets werden in der Pogrammiersprache CSS geschrieben und geben an wie Elemente einer Seite dargestellt werden.
Zum Beispiel könnte man das stylesheet von bitefight.de übernehmen und man hätte die roten Farben usw.
(<link rel="stylesheet" type="text/css" href="http://s1.bitefight.de/bite/game.css"> wobei href="..." den link zur css datei enthält.)
-
Ein Link
Ein Link bringt Besucher ihrer Seite in einen anderen Bereich des Internet's.
Das kann eine Unterseite ihrer Homepage sein, aber auch genausogut eine Empfehlung einer fremden Seite.
Je nachdem um was es sich handelt entscheiden sie wie der Link dargestellt wird bzw. wie er letztendlich funktioniert.
ein beispiel :
*Ein normaler Link sieht so aus
<a href="http://die-seite-auf-die-man-kommt.de/">Der-Text-der-gezeigt-wird</a>
Wenn der Link in einem neuen Tab geöffnet werden soll ,
[ihre Seite bleibt in diesem Fall geöffnet] müsste es so aussehen :
<a href="http://......de/" target="_blank">......</a>
Es gibt noch weitere Methoden, und es würde viel zu lange dauern sie alle hier zu schreiben.
Eine von diesen vielen werde ich gleich vorstellen.
Doch damit ihr den Sinn dieses Tag's versteht muss ich euch ersteinmal einen anderen Befehl vorstellen :
-
Iframe's
Iframe's sind Kästchen auf der eigenen Seite
(die größe ist beliebig einstellbar, ebenso das aussehen)
die andere Seiten darstellen.
Iframe's sind zwar eine ziemlich alte Methode der Webseitendarstellung, aber sie sind immernoch geläufig.
Allerdings gibt es einen haken :
Die meisten Seiten bei denen es sich lohnen würde sie in einem iframe darzustellen,
haben einen Schutz in form eines java-script's gegen diesen Befehl :
<script type="text/javascript">
if(top!=self)
top.location=self.location;
</script>
Ist dieser Code auf einer Seite platziert, würde diese nicht in einem iframe erscheinen,
sondern sie würde sich öffnen als ob man den link zur Seite angeklickt hat.....
Nun zurück zu den Iframe's .
*Der Standart Code sieht in etwa so aus:
<iframe src="http://die-seite-die-angezeigt-wird.de/" width="100" height="100" name="iframe1"></iframe>
width gibt die breite des frames in zahlen an (angabe in pixeln)
height ist fast das selbe wie width , nur das height die höhe angibt.
name wird nur benötigt wenn man will das sich ein auf Ihrer Seite befindlicher Link in dem frame öffnet.
(in diesem fall müsste der Link wie folgt modifiziert sein :
<a href="..." target="iframe1">Der-Link</a>)
iframes dürfen nichts zwischen den tags enthalten
(das heißt so wäre es falsch :
<iframe src="...">ein-text</iframe> , der Text würde nicht angezeigt werden.)
-
Bilderdarstellung
Bilder darzustellen ist ebenso einfach wie Links zu platzieren.
Wie bei fast jedem Befehl gibt es auch hier wieder zig Möglichkeiten
ein Bild zu positionieren.
*Die normale Darstellung :
<img src="http://adresse-des-bildes.de/bild.jpg" alt="Ein-Bild">
alt="..." gibt den Text an der Dargestellt wird sobald das Bild nicht verfügbar ist.
So weiß der Besucher auch wenn es nicht dargestellt wird was auf dem Bild zu sehen war.
3. Verschiedene kleinere Tag-Verknüpfungen
Zum Beispiel um eine Tabelle darzustellen oder ein Bild mit einem Link zu versehen.
-
Darstellung einer Tabelle
Ist schon etwas "komplizierter".
Hier mal ein Bild um schematisch die Funktion der Tag's zu erläutern :
![[Image: aufbau.png]](http://de.selfhtml.org/html/tabellen/aufbau.png)
klick mich
Hier der Quelltext dazu den ich euch gleich erläutern werde :
Alles was sich innerhalb des center-tags (<center>hier</center>) befindet wird zentriert (in die mitte der Seite gesetzt)
<table border="1"> gibt an das der Bereich innerhalb dieses Tag's einen Rand mit der größe 1 , dh. einem pixel hat.
(mit </table> wird der Befehl geschlossen)
<tr> öffnet die Zeile und
<th> öffnet eine Spalte.
Das ist eigentlich schon alles. Man muss halt gut Tags mixen können ;-)
-
Ein Bild verlinken
Etwas simpler als die Tabelle :
<a href="http://.../" target="....."><img src="http://..."></a>
Der Link umgibt das Bild sozusagen.
--------------------------------------------------------------------
Puh, geschafft ;-) Ich hoffe das hat euch HTML etwas näher gebracht.
Bin gerne für Ergänzungen und Berichtigungen empfänglich,allerdings wäre es mir lieb wenn ihr die per PN schreibt und nicht in den Thread.
mfg Heathen Man