kleiner HTML-Kurs

    ### Inhaltsverzeichnis ###
    Einleitung und Grundgerüst (dieser Post)
    Verweise zu anderen Seiten (Hyperlinks)
    Verweise zu Dokumenten auf dem selben Webspace (relative Hyperlinks)
    Wir binden nen Bildche ein
    Relative Hyperlinks 2
    Umlaute
    Doctype
    Punt Machen! (Elemente und Text einfärben)
    Linkfarben und die erste Überschrift
    Setzen von Links auf einen Punkt innerhalb der selben Seite
    Tabellen
    Tabellen: coll- und rowspan
    DIVs
    DIV- Seite
    Es erschweren Bilder von eurer Webseite zu speichern
    Hotlinking verhindern (.htaccess)
    Favicon



    ### Einleitung und Grundgerüst ###


    Viele möchten gerne eine Homepage machen, die nicht bei Beepworld liegt.
    So etwas bedeutet aber auch, daß man dafür HTML können muss.
    Deshalb fange ich hier einen kleinen Kurs an und möchte jeden, der Interesse hat, dazu einladen =)


    Fangen wir also an:
    Als erstes müssen wir einstellen, daß Windows uns die Dateiendungen anzeigt. Das ist wichtig, weil wir unseren Code als "Dateiname.html" abspeichern wollen. Tun wir das nicht speichert der Editor das ganze als Textdatei (txt).


    Arbeitsplatz --> Extras --> Ordneroptionen --> Ansicht -->
    beim 5ten von oben "Erweiterungen bei bekannten Dateitypen ausblenden" den Haken entfernen.


    Nun sind wir bereit und legen los:


    Start --> (alle) Programme --> Zubehör --> Editor


    Jetzt haben wir ein leeres Blatt vor uns.


    Die erste und wichtigste Regel: Alle Tags müssen immer geschlossen sein!


    Ein "Tag" ist ein Codeteil / Codeschnipsel, der etwas aussagt was passieren soll.


    Das Grundgerüst:


    Als erstes müssen wir festlegen, daß das ganze ein Html-Dokument werden soll. Das machen wir so:
    <html>
    </html>


    <html> sagt aus, daß ab hier alles ein html-Dokument ist.
    </html> sagt aus, daß das ganze hier zuende ist.


    Die Seite selbst besteht aus einem Kopf und einem Körper. Quasi wie ein Lebewesen. Ohne diese Beiden kann niemand leben *g*


    Daher müssen wir unserer Seite nun einen Kopf und einen Körper geben.


    <html>
    <head>
    </head>
    <body>
    </body>
    </html>


    Wir sehen: Die Seite hat nun einen Kopf (head) und einen Körper (body)
    Die Html-Tags aussenrum besagen das das alles ein Html-Dokument ist.
    Die Seite ist aber bis jetzt noch leer. Hmm.. füllen wir sie also *g*


    Der Head-Tag ( Kopf der Seite )


    Hier kommen Sachen rein, die man nicht sehen kann. Das hört sich jetzt vielleicht etwas bescheuert an, aber ist es gar nicht.
    Der Browser (das Ding mit dem man im Internet unterwegs ist zB der Internetexplorer) muss zB wissen welche Sprache man benutzt hat. Dann kann man noch Sachen reinschreiben, wie zB wer die Homepage geschrieben hat oder Schlüsselworte für die Suchmaschinen. Sowas muss niemand lesen, es reicht wenns der Browser tut und die Suchmaschinen =)


    In diesem Beispiel nehme ich jetzt mal die Sprache, wiel die auf jeden Fall reinmuss.


    <meta http-equiv="content-language" content="de" />


    Das sagt aus, daß die verwendete Sprache Deutsch ist.


    Die Seite sähe jetzt so aus:


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    </head>
    <body>
    </body>
    </html>


    Was man auch noch in den Head-Tag reinschreibt ist der Titel der Seite, also das was dann ganz oben im Browser zu sehen ist. Noch vor dem Menüzeugs.
    Dieser Tag geht eigentlich einfach.
    <title>Der Titel der Seite</title>
    Das schreiben wir jetzt mal rein :winking_face:


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>
    </body>
    </html>


    Sie ist jetzt für unsere Augen immer noch leer. Also füllen wir sie doch mal =)


    Der Körper einer Seite (Body-Tag)


    Am einfachsten ist es wenn man seine Seite mit Schrift füllt.
    Machen wir das doch einfach mal =)


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>
    Hallo Welt!
    </body>
    </html>


    Jetzt haben wir eine Seite, die beim Aufrufen dem Text "Hallo Welt" ausgibt.


    Beispielseite


    wird fortgesetzt =)

    Ich danke dir!! Ich muss zur Zeit so und so Html lernen. Da kommt mir dein kleiner Kurs gerade recht :winking_face:


    Wann kommt die nächste Lektion??

    Jeder hat einen Traum, tief im Herzen. Eine Reise, die er antreten muss. Ein Schicksal, dass er erfüllen muss. Es gibt einen magischen Ort. Nicht weiter entfernt, als eure Fantasie, wo wundersame Wesen Träume war werden lassen.Das ist die Welt der Pokémon!
    Pokémon lassen sich einfangen und werden mehr als nur Haustiere. Trainer und Pokémon messen ihre Fähigkeiten und Strategien in spannenden Wettkämpfen gegen andere. Die besten Trainer werden eines Tages Pokémon-Meister.
    Das ist für viele ein großer Traum, aber der Allergrößte für Ash Ketchum.

    Ich mach ja schon weiter xD


    Verweise zu anderen Seiten (Hyperlinks)


    Wir wollen jetzt auf unserer Seite einen Link setzen, der auf eine andere Seite führt. Weil wir diese Seite besonders toll finden oder wichtig oder warum auch immer *g*


    besucht <a href="http://www.ginomegelati.de">diese Seite</a> hier!


    das "a" bedeutet anchor oder Anker. Damit verankert man praktisch einen Verweis in einem Html-Dokument. Toll ein Verweis.. aber wohin? Das zeigt "href" (hyper reference = Hyper(text)-Referenz). Hier wird dargelegt wohin der Link führen soll. In diesem Fall zu www.ginomegelati.de *g*


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>
    Hallo Welt!
    besucht <a href="http://www.ginomegelati.de">diese Seite</a> hier!
    </body>
    </html>


    Speichern wir das ganze und schauen es uns an.


    Beispiel


    oO" das ist jetzt aber nebeneinander.. nicht untereinander..


    Klar ^^ woher soll der Browser auch wissen das er die Zeile umbrechen soll *g* Sowas müssen wir ihm sagen.
    <br /> <-- das erzeugt einen Zeilenumbruch.
    Der Tag sieht deshalb so "seltsam" aus, weil ja alles geschlossen sein muss. Der alte <br>-Tag hat aber keinen Schlußtag. Deshalb benutzt man jetzt diesen hier. In diesem sind beide Tags (Anfang und Ende) vereint.


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>
    Hallo Welt!<br />
    besucht <a href="http://www.ginomegelati.de">diese Seite</a> hier!
    </body>
    </html>


    Jetzt müsste das ganze korrekt sein =)


    Beispiel



    wird fortgesetzt :winking_face:

    Schön detailliert!! Da komm ich wenigstens mit :winking_face:

    Jeder hat einen Traum, tief im Herzen. Eine Reise, die er antreten muss. Ein Schicksal, dass er erfüllen muss. Es gibt einen magischen Ort. Nicht weiter entfernt, als eure Fantasie, wo wundersame Wesen Träume war werden lassen.Das ist die Welt der Pokémon!
    Pokémon lassen sich einfangen und werden mehr als nur Haustiere. Trainer und Pokémon messen ihre Fähigkeiten und Strategien in spannenden Wettkämpfen gegen andere. Die besten Trainer werden eines Tages Pokémon-Meister.
    Das ist für viele ein großer Traum, aber der Allergrößte für Ash Ketchum.

    Ginome hat zu mir gesagt: "Mach du doch mal ne Lektion." (oder so ähnlich) und here we go.


    Verweise zu Dokumenten auf dem selben Webspace (relative Hyperlinks):


    Das was Ginome euch gerade beigebracht hat sind absolute Hyperlinks. Diese sind ja, wie nun bekannt, dafür gut auf externe Internetseite (meist die anderer Leute) zu linken.
    Was machen wir aber nun wenn wir auf andere html-dateien, etc. linken wollen die auf dem selben Webspace, oft sogar im selben Ordner liegen?
    Natürlich, wir könnten das mit absoluten Links machen, allerdings ist das 1. viel zu viel Tipparbeit für faule Coder (so nennt man euch wenn irh html schreibt) (alle Coder sind faul) und 2. wird es eine heiden Arbeit wenn ihr mit eurer Seite mal umziehen solltet.


    Also nehmen wir relative links. Das ist eigentlich genauso einfach wie die absoluten.


    Nehmen wir einfach mal an ihr wollt auf die Datei "lala.html" linken die im Ordner "dipsi" liegt dann müsste der Hyperlink dorthin einfach so aussehen:


    <a href="dipsi/lala.html">Datei über Lala</a>


    Ihr seht, vor dem / notiert ihr den Ordner und hinter dem / den Dateinamen. Das ist das gleiche Prinzip wie bei absoluten Links, eben nur ohne http://serveradresse.xx



    Wenn wir das ganze in unser Beispiel einbinden machen wir davor lieber nochmal einen Zeilenumbruch und das ganze sieht dann so aus:


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>
    Hallo Welt!<br />
    besucht <a href="http://www.ginomegelati.de">diese Seite</a> hier!<br />
    Und vergesst nicht euch die <a href="dipsi/lala.html">Datei &uuml;ber Lala</a> anzugucken. XD
    </body>
    </html>


    Beispiel gibts wenn Ginome eins gemacht hat. XD


    edit:
    Beispiel: Beispiel

    There are things... waiting in the darkness. Creatures of metal.. fire.. and blood.
    But he's out there, burning through time, facing a thousand dangers across the stars and never giving up. He looks like a man, but he's a legend. And his name... is The Doctor.
    He'll come back to save us and this time I'm gonna be ready.
    Then just like that - We'll be gone.
    Donna Noble (3rd Companion of the 10th Doctor)

    Einmal editiert, zuletzt von GinomeGelati ()

    Und weils so schön war und ich gerade eine Vermeidungsstrategie fahre um nicht Berichte schreiben zu müssen:


    Wir binden nen Bildche ein. ^^


    Da wir ja gerade auf eine Seite gelinkt haben auf der es um Lala geht binden wir darunter mal ein Bild ein um dem Besucher zu zeigen wer Lala denn ist. :D (Achtung auf einer echten Seite solltet ihr das lieber nicht machen, das hier dient nur zu Vorführzwecken ;))
    Das Bild könnt ihr unten im Anhang sehen und später auf der Beispielseite.


    Also binden wir das Bild mal ein, und da wir ganz schlau sind und das ja jetzt können machen wir das auch mit einer relativen Angabe.


    <img src="bilder/lala.jpg" style="width: 200px; height: 217px; border: 0px;" alt="Lala von den Teletubbies" />


    "src" steht für source. Also für Quelle, folglich muss hier wohl die URL zum Bild rein und wie schon gesagt, wir machen die relativ. Also liegt das Bild wohl, na ihr werdet es schon erraten haben. :winking_face: Genau, es liegt im Ordner "bilder" und heißt "lala.jpg". Wir könnten hier natürlich auch eine absolute URL benutzen, aber die nachteile habe ich ja schon beschrieben. :winking_face:


    Im Tag style=" " werden nun verschiedene Angaben des Bildes angegeben.


    width: gibt an wie breit das Bild ist. normalerweise macht man das in Pixeln (Bildpunkten) und schreibt deswegen px hinter die Zahl. Ihr könnt die Zahl in jedem Grafikprogramm ablesen oder auch wenn ihr das Bild in eurem Browser aufruft unter den Eigenschaften. Dahinter müsst ihr ein ; machen damit der Browser auch weiß dass der"width:"-Befehl zuende ist.


    height: gibt die Höhe an. Ansonsten gilt das gleiche wie für dire Breite.


    Wenn ihr width und height absolut nicht kennt könnt ihr sie auch weglassen, es wäre aber sauberer wenn ihr sie angebt, da so auch wenn das Bild nicht geht die Formatierung der Seite erhalten bleibt und das Bild nicht so lang zum laden braucht, da der Browser nicht erst die Größe Berechnen muss.


    border: gibt die Breite des Randes um das Bild herum an. Da dieser Rand meist eher hässlich ist stellt man diese Angabe auf 0px wenn ihr 1px oder höher einstellt wird der Rand immer dicker. px Steht auch hier wieder für Pixel. Auch hier das ; nicht vergessen. :winking_face:


    So nur noch ein Tag und zwar alt=" ". Alt steht für Alternativtext.
    Ihr müsst euch also überlegen was hier stehen soll wenn das Bild mal kaputt ist oder jemand mit einem text-browser die Seite besucht. Und es soll wirklich eine Alternative zu dem Bild sein.
    Hier habe ich "Lala von den Teletubbies gewählt".



    Jetzt müssen wir das ganze nur noch in unser Beispiel einbinden und machen dafür diesmal zwei Zeilenumbrüche um es etwas abzugrenzen. Und mache 2 Leerzeilen in den Code, einfach um es übersichtlicher zu machen. :winking_face:


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite</title>
    </head>
    <body>


    Hallo Welt!<br />
    besucht <a href="http://www.ginomegelati.de">diese Seite</a> hier!<br />


    Und vergesst nicht euch die <a href="dipsi/lala.html">Datei &uuml;ber Lala</a> anzugucken. XD<br /><br />


    <img src="bilder/lala.jpg" style="width: 200px; height: 217px; border: 0px;" alt="Lala von den Teletubbies" />


    </body>
    </html>


    edit:
    Beispiel

    Bilder

    There are things... waiting in the darkness. Creatures of metal.. fire.. and blood.
    But he's out there, burning through time, facing a thousand dangers across the stars and never giving up. He looks like a man, but he's a legend. And his name... is The Doctor.
    He'll come back to save us and this time I'm gonna be ready.
    Then just like that - We'll be gone.
    Donna Noble (3rd Companion of the 10th Doctor)

    Einmal editiert, zuletzt von GinomeGelati ()

    Klasse!! Es ist so einfach beschrieben, dass selbst ich es verstehe!! Gratulation. Das ist nämlich schwierig ^^"
    Dann gehe ich mal lernen, bis zur nächsten Lektion
    *voller Tatendrang ist*

    Jeder hat einen Traum, tief im Herzen. Eine Reise, die er antreten muss. Ein Schicksal, dass er erfüllen muss. Es gibt einen magischen Ort. Nicht weiter entfernt, als eure Fantasie, wo wundersame Wesen Träume war werden lassen.Das ist die Welt der Pokémon!
    Pokémon lassen sich einfangen und werden mehr als nur Haustiere. Trainer und Pokémon messen ihre Fähigkeiten und Strategien in spannenden Wettkämpfen gegen andere. Die besten Trainer werden eines Tages Pokémon-Meister.
    Das ist für viele ein großer Traum, aber der Allergrößte für Ash Ketchum.

    Musst dir schon Webspace dafür besorgen. :winking_face:

    There are things... waiting in the darkness. Creatures of metal.. fire.. and blood.
    But he's out there, burning through time, facing a thousand dangers across the stars and never giving up. He looks like a man, but he's a legend. And his name... is The Doctor.
    He'll come back to save us and this time I'm gonna be ready.
    Then just like that - We'll be gone.
    Donna Noble (3rd Companion of the 10th Doctor)

    ich glaub, das gehört hier nicht wirklich rein <.<'


    Aber um dir zu antworten:
    Webspace ist eine Art Speicherplatz im Internet... sozusagen eine virtuelle Festplatte. Dafür musst du dich erst bei einem Anbieter anmelden.. (Arcor, Tripod...)


    @Mod:so'n Thema müssten wir ja schon haben... kannst du das irgendwie verknüpfen? *gerade nicht weiß, wer hier MOD is* ^^'



    sooo


    @Thema: Ziemlich detailliert beschrieben. Find' ich gut *Daumen hoch*

    Echt gut beschrieben. Das mit den Bilder funzt nicht? das hängt aber wahrscheinlich mit der Internetverbindung zusammen. sonst hat alles einwandfrei geklappt.


    Jetzt könnt ihr mich für dumm halten aber was solls. Wenn ich das von meinem Rechner öffne kann ich loch mit dem Link auf die Seite. Bloß wie mache ich es das die Kopfzeile <title>mein erste html</title> das hier in nen thread gezeigt wird das sich dann ein neues Fenster öffnet. Oder hat das mit dem webspace zu tun?

    Zitat

    Original von Dr_Tofu
    Echt gut beschrieben. Das mit den Bilder funzt nicht? das hängt aber wahrscheinlich mit der Internetverbindung zusammen. sonst hat alles einwandfrei geklappt.


    Jetzt könnt ihr mich für dumm halten aber was solls. Wenn ich das von meinem Rechner öffne kann ich loch mit dem Link auf die Seite. Bloß wie mache ich es das die Kopfzeile <title>mein erste html</title> das hier in nen thread gezeigt wird das sich dann ein neues Fenster öffnet. Oder hat das mit dem webspace zu tun?


    du willst ein neues fenster aufmachen bei dem klicken auf den link?
    <a href="URL" target="_blank">blabla</a>


    (oder meinst du was anderes?)

    Das ist auch gut zu wissen, hab ich auch nicht gewusst.Mein ich nun aber nicht. Da ist vieles was ich noch nicht kapier.


    Also wieder zu meinem Problem.Bei manchen Signaturen sind doch nur normal Wörter Blau unterlegt, die dann zu einer Seite führen. Also nicht den Link einer Seite sonder nur ein wort das in der Signatur angezeigt wird. wie mach ich das.

    Nein das mein ich nicht mit der Harbe ist aber auch gut zu wissen.


    Also ein Link in der Signatur. Kann man ja als ling stehen [url]..... und so. dann sieht man ja die Adresse von der Seite. Wenn man da drauf klickt kommt man auf die Seite. Genau daus will ich ja. Nur das Stat der Adresse z.b. "Hier klicken" steht und ich dann auch auf die Seite komm.

    Dann erkläre ich hier nochmal ein bißchen ^^


    Wie Slowi euch gerade erklärt hat sollte man innerhalb einer Webseite relativ linken. Umso einfacher ist ein evtl. Serverumzug.
    Wenn ich jetzt aber einen Link habe, der so aussieht:


    <a href="dipsi/lala.html">meep</a>


    Wieso klappt das überhaupt? :astonished_face:


    Der Browser ist dieser Beziehung nicht sehr wählerisch. Wenn da nichts steht nimmt er einfach das aktuelle Verzeichnis auf dem aktuellen Server.
    In meinem Beispiel setzt er einfach http://home.arcor.de/andromeda_katze/ davor. Aus dipsi/lala.html wird also http://home.arcor.de/andromeda_katze/dipsi/lala.html


    Zieht man jetzt um. Meinetwegen zu Tripod würde der selbe Link so aussehen:


    http://mitglied.lycos.de/username/dipsi/lala.html


    Kapiert? ^^


    Nun zur Datei lala.html


    Die Datei lala.html heißt anders. Nicht nur der Dateiname ist anders sondern auch der Titel. Wir wollen ja schließlich, daß die Datei lala.html sich von der anderen Seite unterscheidet.


    Dann ist das Bild hier noch einmal zu sehen. Nett.. jo *g* ABER


    ich habe es nicht doppelt hochgeladen, warum auch? Es liegt ja bereits auf dem Server herum.


    Wie kommt man nun an dieses Bild heran?


    Die Datei lala.html befindet sich auch in einem Ordner. Wir müssen also erst aus dem Ordner hinaus und dann in den Ordner "bilder" um dort das Bild lala.jpg nehmen zu können.
    Wer sich an DOS erinnert, für den wird das jetzt sehr einfach sein. Die anderen nehmen das einfach als gegeben hin, k?
    Wir verlassen den Ordner dipsi durch folgende Eingabe ../ unter DOS kam man so schon eine Ebene höher und es ist hier nicht anders. Danach gehen wir in den Ordner Bilder. Allerdings schreiben wir das hier alles in eine Zeile.


    Also: ../bilder/lala.jpg


    Natürlich muss er wissen wozu er das machen soll. Wir wollen das Bild einbinden. Bild? Img-Tag? Jup, genau!


    <img src="../bilder/lala.jpg" style="width: 200px; height: 217px; border: 0px;" alt="Lala von den Teletubbies" />


    Wieso ist da eigentlich der / am Ende?
    Wir erinnern uns an den <br />-Tag? Beim Img-Tag ist das identisch. Tags, die kein Gegenstück haben müssen auch geschlossen werden. Da sie aber kein Gegenstück haben geschieht das im selben Tag :winking_face:


    Der Quellcode der Datei lala.html würde also so aussehen:


    <html>
    <head>
    <meta http-equiv="content-language" content="de" />
    <title>Beispielseite &uuml;ber Lala</title>
    </head>
    <body>


    Diese Seite zeigt Lala =D<br /><br />
    <img src="../bilder/lala.jpg" style="width: 200px; height: 217px; border: 0px;" alt="Lala von den Teletubbies" />


    </body>
    </html>


    Beispiel

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden