+- TWLan Forum (https://twlan.org)
+-- Forum: Legacy (https://twlan.org/forumdisplay.php?fid=61)
+--- Forum: TWLan 1.x (DSLan) (https://twlan.org/forumdisplay.php?fid=62)
+---- Forum: Deutsche Community (https://twlan.org/forumdisplay.php?fid=65)
+----- Forum: Spielerprojekte (https://twlan.org/forumdisplay.php?fid=9)
+------ Forum: Tutorials (https://twlan.org/forumdisplay.php?fid=11)
+------ Thread: HTML Grundkurs (/showthread.php?tid=1742)
Pages:
1
2
HTML Grundkurs - Heathen Man - 23.06.2009
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 :
![[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
RE: HTML Grundkurs - knollenmax - 23.06.2009
1.Das könnte man sich auch bei z. B. http://www.selfhtml.org beibringen!
2. Ich würde trotzdem einen Kurs belegen, da man dass nicht beim ersten mal durchlesen versteht.
3. Was bringt das hier im DSLan-Forum??? Hier ist doch eigentlich fast alles mit php geschrieben. Und der, der html-Grundkenntnisse braucht, soll doch bei selfhtml reinschauen!
RE: HTML Grundkurs - Yannici - 23.06.2009
Tutorial finde ich für Anfänger im DSLan Forum gut ;-)
Doch für andere fortgeschrittenen, die noch mehr lernen wollen, als die Basics, natürlich nicht angebracht
Naja, aber wie gesagt, für Anfänger recht Simples Tutorial
(Mit Bildern und mitgemachten Scripts, wäre das noch toller)
RE: HTML Grundkurs - Heathen Man - 23.06.2009
Php ist aber nicht alles bei den Tools. Danke erstmal für die Kritik. Ich dachte nur für Leute die mit Programmieren (zb. für die lan) anfangen wollen ist das ein schöner Einstieg.
edit : fast gleich mit yanninci gepostet --> seinen post erst jetzt gelesen : werd mich darum kümmern sobald ich vom training zurückkomm - thx für den hinweis yanninci
RE: HTML Grundkurs - maikmille - 23.06.2009
stimmt ist wirklich gut für anfänger, nur ich hab so ne lernseite kann ich ja mal reinschreiben wenn ich die finde da geht man von grundgerüst bis zu bilder und und und...
Das hat mir am anfang richtig geholfen.
RE: HTML Grundkurs - knollenmax - 23.06.2009
Ich finde das Tutorial auch gut gemacht, aber ich finde, es passt nicht ins DSLan-Forum...
OK, was solls...
RE: HTML Grundkurs - maikmille - 23.06.2009
jo stimmt passt eigendlich, aber iwie auch doch denn dslan wurde durch programmiersprachen erstellt und HTML ist ja eine programmiersprache
RE: HTML Grundkurs - Heathen Man - 23.06.2009
Nagut dann bearbeite ich das halt nicht weiter...Passt nicht zur lan. Thread kann geschlossen werden
RE: HTML Grundkurs - abbar-2 - 24.06.2009
also ich finde Html ist wichtig bei Ds Lan den alle .tpl Dateien sind in Html geschrieben
RE: HTML Grundkurs - knollenmax - 24.06.2009
Echt, hab ich noch gar nicht angeschaut...
RE: HTML Grundkurs - Yannici - 24.06.2009
knollenmax kannst überhaupt HTML?
RE: HTML Grundkurs - knollenmax - 24.06.2009
Ja, natürlich...
DAs was im Grundkurs steht und noch ein paar andere Sachen (z. B. Formulare...) Er hat ja nur Bilder, Tabellen, Links und ? Ich hab jetzt kein Bock mehr, das nochmal durchzulesen... Und eben dann noch Meta-Tags, und die Formatierungen...
Zur Zeit übe ich ein wenig CSS und PHP...
RE: HTML Grundkurs - Heathen Man - 24.06.2009
Ja das simpelste . das heißt nicht das das alles ist was ich kann ;-)
RE: HTML Grundkurs - knollenmax - 25.06.2009
Wie viel Prozent bei HTML kannst du (noch)?
Ich meine 20% vom ganzen oder so...
RE: HTML Grundkurs - Heathen Man - 25.06.2009
woher soll ich wissen wieviel das "ganze" ist?
RE: HTML Grundkurs - knollenmax - 26.06.2009
Na ja, dann lass das eben...
Frage: Könnte nun noch jemand einen PHP Grundkurs machen?
RE: HTML Grundkurs - SlimShady95 - 26.06.2009
Oh man ^^
Des wäre aber viel
Wenn du / jemand Hilfe in PHP braucht -> PN o. ICQ (479117593)
Helfe gerne
MfG Manuel
RE: HTML Grundkurs - Yannici - 26.06.2009
Mir hat er auch schon ne Menge beigebracht
Vorallem wie man Tabellen von Datenbanken ausgibt.
Danke nochmal an dich
RE: HTML Grundkurs - Jonsn - 26.06.2009
Also ich würd mich ebenfalls für php interessieren.
Bestimmt eineige andere auch. Wär super wenn da
jemand ein Turtiotial machen würde, man kann ja
auch von anderen Seiten ein paar Sachen kopieren
um nicht alles selbst schreiben zu müssen. Würde
also aus meiner Sicht schon etwas nützen auch wenn
da mehr zusammen kommt.
RE: HTML Grundkurs - knollenmax - 27.06.2009
Wenn jemand einen php-kurs macht, könnte er dann nicht gleich noch mysql ein wenig mit ein bauen? Ich kann das gar nicht!