Hi,
also mein Tipp an dich: lerne einfach mal die Grundkenntnisse von HTML.Das ist total einfach.Wenn du das gemacht hast, kannst du auch andere Sprachen lernen.Alle anderen Sprachen (z.B. php) im www benötigen eigentlich HTML-Kenntnisse.
Meine erste Webseite trägt den Namen LerneHTML.Dort kann man ziemlich schnell HTML lernen
(je länger und genauer man lernt, umso besser ist man nachher).Ich hab dir das Tutorial von meiner
Webseite einfach mal hierhin gepackt.Sonst kannst du auch zu
LerneHTML.
--- LerneHTML 0.1 Tutorial ---
Einführung
Diesen Teil musst du dir auf LerneHTML ansehen.
Lektion 1 | Start
Was braucht man? Man braucht eigentlich gar nichts, was man nicht schon hat.Mit dem Browser, mit diesem du gerade diese Seite betrachtest,
kannst du nachher deine Seiten ansehen, und mit dem Editor schreibst du den Quellcode.
Wenn du keinen Editor besitzt, weil du eventuell kein Windows hast, lad dir am besten
Notepad++ herunter.
Gut zu wissen: du brauchst keine Verbindung zum Internet um Seiten zu erstellen.
Lektion 2 | Was ist HTML?
Bevor es richtig losgeht, kannst du noch erfahren, was HTML denn genau ist - klicke dazu
hier.
Lektion 3 | Tags und Elemente
Nach diesen langen langweiligen Infos hast du doch sicher noch mehr Lust bekommen, HTML zu lernen, hab ich Recht? Tja, dann fangen wir an!
In HTML gibt es sogenannte Start- und End-Tags.Diese unterscheiden sich,indem der Start-Tag mit
beginnt und der End-Tag mit
endet.Also denk einfach so: etwas beginnt in HTML mit
und endet mit
(
einname jetzt als Beispiel genommen).Hier als Beispiel ein Element:
- du siehst da ja ein i mit Klammern.
Dieses i steht für
italic - bedeutet
kursiv.Also damit ist gemeint,dass wenn ich das schreibe,
dieser Text kursiv wird.Anderes Beispie:
nehmen wir h.H steht für Header = Header für Überschrift.Und im HTML gibt es 6 Header, meist verkleinert sich der Wert wenn die Zahl steigt,
also h1 ist meist die grösste Schrift, h2 die zweitgrösste usw.
Wie wird in Überschrift geschrieben? Ganz einfach: du musst hier einfach die
Tag-Funktion nutzen.Also wenn du h1 willst mit dem Titel
Überschrift gib einfach
ein.Kapiert?
Nun solltest du wissen, dass es Start-Tags und End-Tags gibt.Diese werden bei
ALLEN Elementen angewendet.Ausser bei den
leeren Elementen, z.B
Das bedeutet wenn ich Ich gehe morgen einkaufen
und esse bei meiner Frau schreibe, steht und esse etc. auf der nächsten Zeile (Zeilenumbruch).
Lektion 4 | Lernen und wiederholen
Am besten öffnest du jetzt dein Textprogramm, und probierst rum mit den folgenden Tags.Also, du möchtest eine Seite erstellen in HTML.Als erstes
schreibst du
.Dann kommt der head.Zuerst: was ist der Head? Ganz einfach: der head (Kopf) gibt Angaben
über dein Dokument.Also schreibe
.Jetzt hast du den Kopf, jetzt kannst du noch den Titel der Seite ändern, Beispiel:
Dann geht es weiter mit dem body (Körper).Der Körper gibt den Inhalt an.Jetzt gibt es verschiedene Elemente, die dir helfen, den Inhalt
zu erstellen.Hier sind ein paar:
Noch ein Tipp: die Codes in den Bildern sehen strukturiert aus, mit Abständen & etc., diese musst du aber nicht machen.
Hier noch ein Tipp: wenn du jetzt schon ausprobieren willst, speichere die Datei als index.html (oder .htm) (Index wird die Startseite) und öffne sie mit einem Browser.
Lektion 5 | Vorlage und neue Elemente
Um das zu sehen,
gehe zu LerneHTML
Lektion 6 | Attribute
Einigen Elementen kann man noch weitere Informationen zuweisen.
Eine solche Information nennt man Attribut.
Attribute werden immer in den Start-Tag des Elementes geschrieben und werden von einem Gleichheitszeichen gefolgt.
Die Attributwerte werden in Anführungszeichen (") geschrieben.Damit du es besser verstehst, hier noch ein kleines Beispiel:
Sonst gibt es eigentlich nicht viel mehr über Attribute zu sagen.
Lektion 7 | Links
Links sind einer der wichtigsten Dinge auf deiner Seite.Z.B kannst du damit Bilder verlinken und Menüs erstellen ohne CSS.
Um jetzt einen Link zu erstellen benötigst du ein Element, und ein Attribut (ok, und die Seite zu der man kommen soll).
Hier kannst du das ganze noch kopieren: <a href="
http://link.com">Gehe zu Link.com</a>
Inhalte auf einer Seite verlinken | Wenn du nach oben scrollst, siehst du IDs und Rauten.ID bedeutet "identification" und Raute #.Als erstes erstellst du
eine Überschrift, zu dieser man gelangen soll, wenn man die Raute nutzt.
Z.B <h1 id="heading1">Überschrift</h1> und dann die Raute.Z.B <a href="#heading1">Link zur Überschrift</a>
Es gibt noch
kleine Attribute, z.B: <a href="
http://link.com/" title="Der Titel">Klick mich</a> (Link mit Titel)
und <a href="mailto:
[email protected]">E-Mail an
[email protected] senden/a> (Email senden).
Lektion 8 | Bilder
Wäre es nicht cool, wenn du ein Bild in deine Webseite einbinden könntest?
Klingt schwer... ... aber im Grunde ist es ganz einfach.Schau einfach
dieses Element an:
Du siehst in diesem Bild img und src.Img steht für image, also
Bild.Src steht für Source, also
Quelle.
Kopiere folgenden Code: <img src="url oder dateiname" /> | Bei src musst du immer die Quelle angeben, also wenn die Datei
die du haben möchtest z.B. meinbild.jpg heisst, und diese sich im selben Ordner wie die Seite befindet, gibst du das ein: src="meinbild.jpg"
Wenn sich aber dein Bild in einem anderen Ordner befindet, gibst du das ein: src="ordnername/meinbild.jpg"
.jpg steht für das Format.Es gibt folgende Bildformate auf Homepages: .gif,.png und .jpg (am besten ist .png).
Das alt-Attribut gibt eine alternative Beschreibung des Bildes an. Diese Beschreibung wird angezeigt,wenn – aus welchen Gründen
auch immer – das Bild nicht angezeigt wird. Besonders wichtig ist alt z.B. für sehbehinderte oder blinde Internetnutzer.
Natürlich gibt es hier auch einige
kleine Attribute: <img src="htmllogo.png" title="Lerne HTML mit lernehtml" /> (Bild mit Titel)
<img src="htmllogo.png" width="141" height="32" /> | Width bedeutet Breite und height Höhe.
Mit diesen zwei Angaben kann man die Grösse von Bildern ändern - dies ändert aber nicht wirklich die Ladezeit der Seite.
Was du noch wissen solltest über Bilder: du kannst auch Bilder verlinken.
Ganz einfach: <a href="
http://link.com/"><img src="datei.png" /></a>
Um es noch eimal zu sagen: übe immer und immer wieder die gezeigten Elemente!
Schreibe sie ab und lerne sie auswendig in einem html Dokument.
Lektion 9 | Tabellen
Tabellen in HTML sind eigentlich total einfach.In diesem Tutorial zeige ich jedoch nur die ganz einfache Version einer Tabelle.
Mehr zu Tabellen:
LerneHTML.
Lektion 10 | Ende
Ob du es glaubst oder nicht, du hast jetzt die Grundkenntnisse von HTML gelernt! Hier am Schluss aber noch
nützliche Dinge.Hier möchte ich dir noch einiges zeigen, dass dir sicher helfen sollte.
Farben | Für Paragraph: <p style="background-color:#ff0000>Meine ewige Freundschaft mit HTML</p> (#ff0000 ist ein Farbcode, einfach mal googlen!)
<p style="color:blue;">Blauer Text</p> Für body (in body einbinden): <body style="background:#FFFFFF">
<body style="background-image: url('
http://link.com/ordner/bild.png');">
Grösse und Schriften | <p style="font-size:20px;">Dieser Text hat Schriftgröße 20</p>
Schrift<p style="font-family:courier;">Dieser Text hat die Schriftart Courier</p> (auch beides zusamme geht).
Wenn du z.B. auf deiner ganzen Webseite die selbe Schrift verwenden möchtest, und Grösse,
binde einfach die Codes ein mit CSS.Beispiel:
Dieser CSS-Teil ist leider unübersichtlich geworden, sollte aber nicht sehr schlimm sein, da dies ein HTML, nicht CSS Tutorial ist.
So, jetzt möchtest du sicher deine Webseite online stellen, oder? Dazu musst du sie nur auf einen Webspace hochladen (google einfach mal) und dann verzeichnis beim Anbieter wählen.
Nicht schlimm, du musst das alles jetzt nicht verstehen.Googles einfach mal dann wird dir klar, was gemeint ist.
Ich hoffe du kannst jetzt mehr oder weniger die Grundkenntnisse von HTML.Wenn du das Tutorial gut fandest, wäre es nett die Seite zu teilen.
Jetzt muss ich mich aber verabschieden.
bb ;-)! (<--- Leider habe ich w3 vergessen)...
Wie auch immer.Ich hoffe es stört die Leute hier nicht, dass ich hier so n ganzes Tutorial hingepackt hab ;)
mit freundlichen Grüssen,
Basti020
