Moin moin liebe Programmierfreunde und interessierte Leser.
Hier werde ich euch nach und nach ein Tutorial zu HTML erstellen.
VORAB: (!!!) IN DIESEM POST KEINE ANTWORTEN, BEI FRAGEN BITTE NEUEN THREAD ERÖFFNEN (!!!)
Dieses Tutorial, sprich alle Posts in diesem Thread, dürfen ohne meine AUSDRÜCKLICHE Genehmigung nirgendswo anders als auf kennstenich.de veröffentlicht werden.
Auch das kopieren meines Textes und als sein eigen ausgeben ist nicht gestattet.
(Siehe diverse Abkommen zum geistigen Eigentum - http://de.wikiped...s_Eigentum)
Dies Tutorial ist kein Tutorial für Profis und sehr Forgeschrittene.
Ich werde es versuchen so einfach und Verständlich wie möglich zu halten, damit es auch wirklich jeder versteht :P:
Man sollte als erstes Wissen, das HTML allein nie für eine gute Website ausreichend ist, erst durch zusätzlicher Verwendung von wenigstens einer weiteren Sprache wie PHP kann man eine gut Website erstellen.
Reine HTML Sites werden meist nur für "Vistienkarten" im Netz genutzt.
(Bsp.: www.lydias-hundestuebchen.de <- dort habe ich mit reinem HTML eine Webseite für eine Kundin erstellt. mit CSS wurden grafische Anpassungen vorgenommen und für die Bildergallerie JavaScript.)
Ihr werdet also schnell merken, dass man nur mit HTML nie sehr weit kommt.
Was eigentlich ist HTML?
HTML Ist die Sprache aus welchen Websites hauptsächlich gemacht sind.
Die Sprache HTML gibt mit sogenannten Tags an, wie eine Website aufgebaut ist.
wenn man HTML ausschreibt hat man: Hyper-Text Markup Language
Erfunden wurde diese 1990 vom Physiker Tim Berners Lee, um Dokumente miteinander zu verbinden. Mit sogenannten Hyperlinks
Und noch gut zu wissen: HTML-Befehle sollten am besten immer klein geschrieben werden.
Einige Browser z.B. haben Probleme mit der Darstellung, sollten HTML Befehle Groß oder gemischt (groß und klein) geschrieben werden.
Part #2: Struktur des Grundgerüstes sowie Zeichenerklärung
Zu allerst sollte man wissen, dass HTML Befehle immer zwischen so genannten TAGS stehen < > :
[code]<html>[/code]
Der oben stehende HTML Code steht beispielsweise IMMER am Anfang einer jeden HTML Seite.
Natürlich muss dieses am Ende des HTML Dokuments beendet werden, sprich man muss dem Dokument sagen, dass an einer gewissen Stelle Schluss mit dem gesamten HTML Code ist.
[code]</html>[/code]
Wie im Beispiel also ersichtlich, wird ein HTML Code schlicht durch das Slash / Zeichen beendet, in dem dieses nach dem open Tag (<) gesetzt wird.
Das Grundgerüst besteht natürlich nicht nur aus den beiden Beispielen oben, sondern sieht wie folgt aus:
(Öffnet Euch zunächst den Editor (Windows Standard) oder einen beliebigen normalen TextEditor)
[[bitte nach möglichkeit nicht Office Word, Erfahrungsgemäß bringt dieser einen zu schnell aus dem Konzept!]]
[code]
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
[/code]
Um Euch dieses Grundgerüst, welches Ihr IMMER benötigt besser einzuprägen, solltet Ihr es nicht kopieren sondern von Hand in den Editor tippen.
Beim Speichern müsst ihr nur darauf achten, dass ihr nicht txt als speicherformal wählt sondern bei Dateityp "Alle Dateien" auswählt.
als Dateinamen schreibt ihr bitte einfach nur: " test.html " rein (natürlich ohne "")
Ruft Ihr diese mit Eurem Browser auf, könnt Ihr sehen, dass Ihr nocht nichts seht, also eine weiße Seite. Dazu aber später mehr.
Erst einmal geht es darum Euch zu erklären woraus genau das Grundgerüst besteht.
(((((( Heute Abend schreibe ich weiter, Hab grad Feierabend ))))))
(((((( Sodale nun is Abend und es geht weiter :P ))))))
Fangen wir bei <html> an, wie oben bereits geschriegeben leitet dies am Anfang des Dokuments ein, dass es sich um ein HTML Script handelt.
<head> ist der Kopf des HTML Dokumentes (wer Englisch kann, hat das sicher mitbekommen) :P
Im Headbereich, der sich folglich zwischen <head> und </head> befindet, werden also "logische" Befehle geschrieben.
Sprich alle Sachen die "Denkweisen" enthalten wie (sehr wichtig) Metaangaben, refresh (neuladen) Befehle werden in dem Kopfbereich geschrieben.
Letztendlich also all jene Sachen, welche nicht optisch auf der Homepage erscheinen.
Ebenso auch der Titel der Seite (dieser erscheint dann im Tab des Browserfenster). Folglich würde bei unserem Script zwischen <title> </title> z.B. das Wort TESTSEITE gut passen.
Nach dem Beenden des Headbereiches durch </head> würde Anatomisch gesehen der Hals beginnen, den haben wir aber beim Lernen gestrichen voll :D
Scherz beiseite (nen Hals gibbet bei HTML nicht)
Es folgt also nun der Körper des HTML Dokumentes, welcher durch <body> beginnt.
Da man ja logischerweise Denkweisen nicht sehen kann, kommt im Body also das was gesehen werden soll.
Ein Beispiel gebe ich euch weiter unten im sehr leicht gefüllten Grundgerüst.
Auch der Body wird nach all den "optischen" HTML Befehlen mit </body> beendet.
Nach dem "Körper" kommt bei html dann nichts weiter.
So dass dem HTML Dokument mit </html> nun gesagt wird, dass das Dokument an dieser Stelle zu Ende ist.
Diesen Part können wir denke ich recht kurz fassen, da es sich einfach erklären lässt und man anhalt des Beispieles auch noch einmal sieht was genau die einzelnen Befehle bewirken.
(Merkt euch eines: in HTML wird FAST JEDER Befehl wieder durch hinzufügen von / beendet) Ausnahme sind nur wenige wie der IMG Befehl für Bilder, dazu aber später.)
<center> Zentriert die eingeschlossenen Elemente</center>
<font size="Schriftgröße"> Text in angegebener Schriftgröße</font>
<font> normaler linksbündiger Text </font> <<<--- wird von einigen nur wegen Übersichtlichkeit genutzt, da eigentlich linksbündig standard ist
<font align=center> zentrierter Text </font>
<font align=right> rechtsbündiger Text </font>
<font align=justify> Text als Blocksatz </font>
<font color="white"> Weiße Schrift </font>
<font color="black"> Schwarze Schrift </font>
<font color="#FF0000"> Rote Schrift </font>
<font face="Arial Black"> Schrift in 'Arial Black'</font>
<font face="Arial Black, Arial Narrow"> Schrift in Arial Black und alternativ in Arial Narrow</font>
<big> großer Text </big>
<small> kleiner Text</small>
<big><big><big>3 mal vergrößerter text</big></big></big>
<p> Absatz nach eingeschlossenen Elementen </p>
<b> Fetter Text <b>
<i> kursiver Text </i>
<u> unterstrichener Text </i>
<strike> durchgestrichener Text </strike>
<s> durchgestrichener Text </s>
<sub> tiefgestellter Text </sub>
<sup> hochgestellter Text </sup>
<strong> hervorgehobener Text </strong>
<em> betonter Text </em>
<h1>Überschrift 1. Ordnung</h1>
<h2>Überschrift 2. Ordnung</h2>
<h3>Überschrift 3. Ordnung</h3>
<h4>Überschrift 4. Ordnung</h4>
<h5>Überschrift 5. Ordnung</h5>
<h6>Überschrift 6. Ordnung</h6>
So dies sind glaub ich alle schriftformatierungs-relevanten Befehle, jedenfalls alle die mir gerade einfallen.
Nun sollte man bezüglich der Texte nur noch Wissen, dass Umlaute wie ä , ö , ü etc. am besten per HTML Code geschrieben werden.
Warum?
Spider, Emails, selbst einige Browser würden euch ein Zeichenwirrwar anzeigen. (es gibt Möglichkeiten dass natürlich zu umgehen, das kommt aber erst später)
Prinzipiel sollte man IMMER die folgenden Umlautcodes verwenden:
Nun fügen wir die "optischen" Befehle (die gesamten von oben) in den Body Bereich unseres Grundgerüst.
Das sollte dann so im Quellcode in eurem Editor aussehen:
[code]
<html>
<head>
<title>Schriftformatierungen</title>
<body>
<center> Zentriert die eingeschlossenen Elemente</center>
<font size="Schriftgröße"> Text in angegebener Schriftgröße</font>
<font> normaler linksbündiger Text </font> <<<--- wird von einigen nur wegen Übersichtlichkeit genutzt, da eigentlich linksbündig standard is
<font align=center> zentrierter Text </font>
<font align=right> rechtsbündiger Text </font>
<font align=justify> Text als Blocksatz </font>
<font color="white"> Weiße Schrift </font>
<font color="black"> Schwarze Schrift </font>
<font color="#FF0000"> Rote Schrift </font>
<font face="Arial Black"> Schrift in 'Arial Black'</font>
<font face="Arial Black, Arial Narrow"> Schrift in Arial Black und allternativ in Arial Narrow</font>
<big> großer Text </big>
<small> kleiner Text</small>
<big><big><big>3 mal vergrößerter text</big></big></big>
Ihr solltet auch wissen, dass es euch nichts bringt einen Absatz im Html Code zu machen, dieser wird NICHT automatisch gesetzt.
Ihr habt also zwei Möglichkeiten:
<br> Bm einen Zeilen Umbruch zu machen / <br><br> erzeugt folglich einen Umbruch und eine leere Zeile.
Oder ihr nutzt das vorgstellte <p> </p> um nach den jeweiligen Codes und Texten etc. einen Absatz zu setzen.
Bei den Umlauten wird euer Browser nun natürlich ä -> ä anzeigen, bei wenigen ein falsches Zeichen.
Warum genau die Umlaute per Code geschrieben werden sollten, darauf gehe ich später nochmal genauer ein.
Kopiert oder schreibt dies wieder im Editor, speichert es als schrift.html und schaut euch das Resultat an.
Nun noch ein kleiner Tip für die Schriftformation:
Ihr habt sicher gemerkt, dass einige verschiedene font tags dabei sind.
Nun muss man nicht beispielsweise <font color="white"><font size="6">TEXT</font></font> schreiben, dies lässt sich einfach regeln:
[code]
<font color="white" size="6"> TEXT </font>
[/code]
Dies gilt also für alle font Angaben.
((((((Das war es für heute, morgen gehts weiter))))))
So wie man ja Schriften farblich ändert wisst ihr ja bereits (<font color="FARBE/CODE"></font>)
Nun bringen wir durch Grafiken und Hintergrundfarbe etwas mehr Optik ins Spiel.
Es gibt z.B. für den gesamten Hintergrund (einer einfachen HTML Seite) zwei Möglichkeiten.
Möglichkeit 1: Hintergrundfarbe.
Nun errinnert euch an das Grundgerüst, ich nenne die Bodysektion ja gerne auf Deutsch Körper.
Nun denken wir uns einfach wir ziehen den Körper an. Sprich wir setzen den entsprechenden Code nicht zwischen den Körper, sondern in den Körper.
Das ganze funktioniert mit dem bgcolor="" befehl, der in dem Bodytag eingebaut wird.
Sieht dann wie folgt aus:
Wie Ihr hoffentlich gleich bemerkt (insofern ihr auch Aufmerksam lest) habe ich den title tag weg gelassen.
Dieser ist also kein gezwungener Tag im Grundgerüst. - allerdings schaut mal was im Browser steht (Tab) welcher Titel verwendet wird, eigentlich unschön und nur selten gewollt)
Back to Topic
bgcolor bedeutet also nichts anderes als Hintergrund Farbe / HGFarbe zu deutsch.
zwischen den "" <- welche auch da stehen müssen, gehört dann der Farbcode wie: "#ffffff" welcher für weiß steht oder der farbname: "white".
Mit dem im Beispiel genutzten Hexadezimalcode kurz Hexacode.
Im eigentlich handelt es sich dabei um R/G/B. Ohne Einsatz der Werte würde der hexacode also eigentlich so aussehen: #RRGGBB.
Nun weiter..
Die Zweite Möglichkeit wäre, den Hintergrund mit einer Grafik zu bestimmen.
Zu diesem Zweck könnt ihr gerne die Grafik aus dem Anhang nutzen um es auszuprobieren.
Genutzt wird in diesem Fall nicht bgcolor sondern den Befehl background=""
So nun fragt ihr euch sicher, wohin mit der gewählten Grafik bzw. mit der hier zur Verfügung gestellten Grafik?
Ich nehme an, Ihr habt einen Ordner für die HTML-Schule-by-Neo angelegt, wo Ihr die html Dateien ablegt.
Wenn Ihr z.B. den oben genannten Quelltext als hintergrund.html speichert und in den entsprechenden Ordner legt, gehört eben auch die Grafik dort hinein.
Es gibt natürlich auch die Möglichkeit innerhalb des Ordners HTML-Schule-by-Neo einen image Ordner anzulegen, beispielsweise den Ordner Images und die Grafik dort rein zu packen.
Dann muss der Code wie folgt aussehen:
WICHTIG UND IMMER ZU BEACHTEN:
Groß und kleinschreibung bei Ordner und Dateinamen im Quelltext ist stets zu beachten.
Heißt der Bilderordner Images und im Quelltext steht images, kann es sein, dass die Grafik nicht angezeigt wird.
Unter Windows kann es sein, dass es funktioniert. Jedoch nicht, wenn ihr die HTML Dateien etc. auf einem Webserver laden solltet.
Nun gibt es natürlich noch mehr Sachen, die man im Bodybereich erweitern könnte, z.B. welche Schriftfarbe standardmäßig genutzt wird oder welche Farbe Links haben sollen.
Da es aber mit zukünftigen HTML Versionen abgeschafft werden soll und der Standard auch schon auf bessere Hilfsmittel zugreift, werde ich auf die body tag Erweiterungen nicht näher eingehen.
Ihr Fragt euch jetzt natürlich wovon ich Rede?
Das ganze nennt sich CSS. (Cascading StyleSheet)
Darauf gehen wir aber erst etwas später ein, zunächst ist es wichtig, HTML Grundkenntnisse zu erlangen.
Im dritten Abschnitt des Part #3 zeige ich euch, wie man ein Lauftext einfügt und darunter ein Bild einbindet. (Kein Hintergrundbild sondern ein Normales)
Der zu verwendende Tag ist eigentlich vom logischen her recht einfach zu merken.
Bild -> Englisch = Picture und umgangssprachlich Image -> Kurzform = img
Pfad wird durch source und somit kurzforum src="" ersetzt.
Somit ergibt sich für das Bild der logische Befehl: <img src="">
So und wie ganz am Anfang mal geschrieben, ist das img Tag eines der absolut wenigen Tags, welche nicht beendet werden müssen, wo also kein </img> kommt würde.
Davor soll ja wie versprochen ein Lauftext auftauchen.
Leider wäre die deutsche Übersetzung Festzelt, was also nur mit der Denkweise: Festzelt, da dreht und bewegt sich was (nach einem oder mehreren Bieren), zu merken wäre.
Die Rede ist von dem "marquee tag".
Ich gebe euch vorab den Quelltext für die HTML Datei und erkläre euch hinterher, wass die einzelnen "einstellbefehle" für den marqueecode machen.
[code]
<html>
<head>
<title> Der erste Anlauf </title>
</head>
<body background="background.jpg">
<p><marquee width="100%" behavior="alternate" bgcolor="yellow">hin und her bewegender text</marquee></p>
<p><marquee width="100%" behavior="scroll" direction="right" bgcolor="yellow">Der Text bewegt sich von links nach rechts durchgehend</marquee></p>
<p><marquee width="600px" behavior="scroll" bgcolor="yellow" scrollamount="50" scrolldelay="5">Der Text bewegt sich von rechts nach links durchgehend</marquee></p>
<br>
<center>
<img src="bild.jpg">
</center>
</body>
</html>
[/code]
So in kurzen Punkten erklärt:
<img src=""> ist denke ich mal soweit klar, es ist halt der Befehl, mit welchem man ein Bild auf der Seite anzeigen lässt.
<marquee> </marquee> <- einfacher scrollender text (hin und her)
behavior="alternate" bedeutet nichts anderes als wechsel also hin und her
bgcolor="yellow" bestimmt wie im body tag die hintergrundfarbe
width="100%" bestimmt die breite des scrollbalkens, in dem fall 100% also die gesamte Breite.
behavior="scroll" bestimmt einen durchlaufenden text
direction="right" bestimmt die laufrichtung, also von rechts nach links.
scrollamount bestimmt die Pixelanzahl zwischen den Scroll-Zuständen.
scrolldelay legt die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest
Ich bin einer der Programmierer, welcher der festen Meinung ist, dass Angaben in prozenten in sehr vielen Fällen Browser und Userfreundlicher sind.
denn wenn ihr mal schaut und das fenster minimiert, seht ihr, dass sich der balken anpasst.
Gebt ihr es mit Pixeln an, ändert sich die breite nicht.
Sprich, habt ihr eine zu hohe pixelangabe, kann es sein das man auf der Seite nach rechts scrollen muss.
Generell benötigt man aber bei einigen Sachen eine Pixelangabe, z.B. wenn Bilder definitiv in einer bestimmten größe angezeigt werden sollen, oder wenn z.B. Tabellen, auf welche später eingegangen wird, eine fixierte breite haben sollen.
Prozentangaben gehen also immer von der Größe des Browser aus.
Dies war es dann erst mal mit Part #3 und geht bald mit Part 4# weiter.
Part #5 Hyperlinks und Verknüpfung von 2 HTML Dokumenten:
Was ist HTML? (Quelle: Wikipedia / http://de.wikipedia.org/wiki/Hyperlink) :
Als Hyperlink oder kurz Link (engl. für „Verknüpfung, Verbindung, Verweis“), amtsdeutsch elektronischer Verweis, bezeichnet man einen Querverweis. Funktional ist damit üblicherweise der Sprung an eine andere Stelle innerhalb desselben Hypertextes oder zu einem anderen Dokument gemeint.
Wird der Hyperlink ausgeführt, wird automatisch das in dem Hyperlink angegebene Ziel aufgerufen.
Durch das „Hypertextsystem“ können aber auch andere, in demselben System oder an das System angeschlossene Dateien aufgerufen werden. So können Hyperlinks z. B. auch genutzt werden, um Filme, Bilder und Animationen zu erreichen oder Dateien auf einen Computer herunterzuladen.
DAS HTML TAG
Um einen Hyperlink zu erstellen nutzen wir das <a href=""> Linktext </a> Tag.
in den Anführungszeichen wir der Link bzw der Verweis auf das Dokument eingeschlossen.
Mit zwischen </a href=""> und </a> kommt dann der Text, mit welchem der Link dann im Browser angezeigt wird.
Der Text zwischen dem start und end tag kann natürlich auch mit den verschiedenen text tags "umgestylt" werden.
Auch kann man anstelle von Text ein Bild benutzen, welches als Anzeige für den Link dient.
In den folgenden Beispielen werden 2 HTML Dateien erstellt, die erste HTML Datei beinhaltet nur einen Verweis auf die link2.html, in welcher dann ein Bild als Link und ein Link der im neuen Fenster geöffnet wird enthalten sind.
Um einen Link im neuen Fenster anzeigen zu lassen nutzen wir die Erweiterung target="_blank" .
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen.
Es gäbe noch 2 weitere Arten, welche Ihr vermutlich niemals benötigen werdet. (Reine Erfahrung!)
[code]
Inhalt link1.html :
<html>
<head>
<title> der erste Link </title>
</head>
<body>
<br><br><br><br>
<center> <a href="link2.html"><font color="red">Link2</font></a> </center>
</body>
</html>
[/code]
[code]
Inhalt link2.html :
<html>
<head>
<title> der zweite Link </title>
</head>
<body bgcolor="green">
<br><br><br><br>
<center> <a href="link1.html"><font color="red">Link2</font></a> </center>
<center> <a href="http://www.google.de" target="_blank"><img src="http://www.google.de/images/logos/ps_logo2.png"</a> </center>
</body>
</html>
[/code]
Nun denkt ihr sicher, so weit so schön, bei vielen seh ich aber immer dass wenn man mit der Maus drüber geht sich die Farbe oder der Hintergrund des Links ändert etc.
Dies werden wir auch noch behandeln, ist aber nicht Inhalt diesen Parts, sondern kommt wie in den vorherigen Parts schon mal vorweg genommen in den CSS Sektionen des Tutorials.
Nun Experementiert ein bisschen mit den bisherigen Erfahrungen des HTML Programmierens, in wenigen Tagen geht es weiter mit dem Tabellen Part.
Bitte tragen Sie hier Ihre Emailadresse ein und klicken Sie auf NL abonnieren bzw. NL abbestellen.
Dikusch meint
24.05.2013 07:11 Oberster Datenschützer schafft zwei Klassen-Gesellschaft! Hallo ihr da draussen – Heute meine ich: Nach einem Interview mit der BILD, berichtet auch der FOCUS über die seltsamen Ansichten des obersten Datenschützers Peter Schaar. Er hat Job-Center und Behörden davor gewarnt Empfänger von Hartz IV und Sozialleistungen in den Netzwerken, bei Facebook oder Google nachzuspionieren. Nur in absoluten Ausnahmefällen dürfe so[...]
Online Stats
Gäste Online: 1 Mitglieder Online: Keine Mitglieder Online
KennsteNich 
Neoryptos HTML Schule
x 1
x 1
