Du bist hier: Startseite > Mitmachen > Kannst du..? > Eine Internetseite selbst herstellen (Teil 4)

Eine Internetseite selbst herstellen (Teil 4)

Dienstag 1. Dezember 2009 , von Carsten Werner

Im vierten Teil des News4Kids HTML-Kurses lernt ihr, wie die Internetseite durch Tabellen unterteilt wird und so Texte und Bilder optimal ausgerichtet werden können.

In den bisherigen Teilen unseres HTML-Kurses habt ihr gelernt, wie eine HTML-Seite aufgebaut ist und angelegt wird . Ihr wisst bereits, wie ihr Texte gestaltet und Links einfügt . Und ihr könnt auch bereits die eigene E-Mail-Adresse einbauen und Bilder anzeigen lassen . Oftmals reicht das alles aber noch nicht.

Profis wollen Texte und Bilder nämlich haargenau an bestimmten Stellen der Seite anzeigen lassen. Dafür braucht man Tabellen. Damit lässt sich die Seite in einzelne Bereiche aufteilen, in denen dann die Inhalte erscheinen. Auch unsere Internetseite www.news4kids.de besteht aus Texten und Grafiken, die in Tabellen in Spalten und Zellen angeordnet sind (Bild oben).

Eine Tabelle (englisch: Table ) wird von oben nach unten in Zeilen ( T able r ow) und von links nach rechts in Spalten unterteilt. Dabei ergeben sich dann die Tabellenzellen ( T able d ata) (Bild oben). Entsprechend heißen die wichtigsten Befehle bzw. für den Anfang und das Ende der Tabelle. und markieren den Anfang und das Ende einer Zeile. Und sowie stehen für Anfang und Ende der Tabellenzelle.

Um unsere Internetseite mithilfe einer Tabelle zu gestalten, müssen wir direkt nach und direkt vor die Befehle bzw. schreiben. Mit folgenden Zeilen direkt nach und vor fügen wir dann über und unter unserer Seite einen leeren Streifen ein, der genau 40 Pixel hoch ist (height = Englisch für Höhe):

Auf die gleiche Weise können wir auch die Breite einer Tabellenzelle festlegen. Statt "height" schreiben wir dann aber "width" (Englisch für Breite). Statt einer Pixel-Zahl können wir hier auch einen Prozentwert eingeben. "10%" würde bedeuten, dass die Tabellenzelle eine Breite von zehn Prozent der Gesamttabelle (bei uns die Bildschirmbreite) bekommt.

Die anderen Tabellenzellen der Zeile müssen ebenfalls einen Prozentwert als Breite erhalten. Alle gemeinsam ergeben dann 100 Prozent - also die Gesamtbreite. Die Höhe (height) einer Zeile muss ebenso wie die Breite (width) einer Spalte (mehrere Zellen untereinander) übrigens nur jeweils einmal angegeben werden:

Natürlich sollen in den Tabellenzellen meistens auch Inhalte wie Text oder Bilder erscheinen. Die entsprechenden HTML-Befehle werden einfach nach dem ">" des td-Befehls eingegeben. In folgendem Beispiel werden in einer Tabellenzelle mit einer Breite von 80 Prozent ein Bild (news4ids.jpg) und ein Text angezeigt.

Tabellen wirken recht kompliziert. Wie alles andere bei HTML sind aber auch sie nur eine Frage der Übung. Am besten du probierst es einfach selbst aus. Lege auf deiner Internetseite eine einfache Tabelle mit mehreren Zeilen und Spalten an und probiere ein wenig mit den Breiten- und Höhen-Angaben herum. Wenn du das verstanden hast, baue doch deine ganze Seite zu einer Tabelle um. Hier noch ein letztes Beispiel für eine einfache Tabelle. Unsere News4Kids-Beispieldatei für den vierten Teil unseres HTML-Kurses kannst du dir über den Link am Artikelende herunterladen.

Eure Meinung dazu:

  • 26. Februar

    Hallo,

    Wie stellt man die Seite ins Internet? Ist toll erklärt!!!!!!!!!!!!!

  • von Ai 9. Juni 2013

    Hallo!

    Ich finde die Anleitungen wirklich toll beschrieben. Das hört sich ja alles (zumindest bis zum 3. Teil) ganz einfach an! Ich erstelle sogar gerade zusammen mit meinem Bruder eine Internetseite, es wird zwar keine richtige, weil man darauf nur auf unserem Computer zugreifen kann (aus Sicherheitsgründen), aber es ist ein Anfang. Uns wurde das ein bisschen anders erklärt, aber jetzt kann ich mir viel besser vorstellen, wie das funktioniert.

  • von W.e. 4. Juni 2013

    Wie kann ich die Seite in Netz stellen? Wann kommt Teil 5?

  • von Der Suchti 20. Juni 2012

    Hallo leute ich bins noch ma Der Suchti also ich habe meine internetseite komplett fertig hab sogar noch andere sachen auf meine website gestellt ist gut wie sie es erklären weil ich habs recht schnell kapiert ich geb zu das das ein bisschen schwer ist aber wenn mann den dreh raus hat ist das richtig cool und macht spaß danke News4kids Team!!!!!!!!!

  • von anakin 13. Juni 2012

    das is irgentwie schwer aber lol

  • von Der Suchti 30. Mai 2012

    Das ist wirklich gut es wird gut erklärt und mann kaüiert es schnell!!!!!!

  • von horrrrrrror 23. Mai 2012

    ehj tat klapppppt jaaaaaaaaaaaaaaaaaa juhuuuuuuuuuuuun das macht spaaaaaß bambam hahaha

  • von JOSHY 23. Mai 2012

    Das ist doch bischen Mist weil:komplierziert

  • von clone-it-all 14. August 2011

    habe herrausgefunden wie das textfeld funktioniert(dank dem seitenstark chat (der ist total cool(schaut mal rein)))

  • von RiccXXXX 14. Juli 2011

    TOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL

  • von clone-it-all 12. Juni 2011

    Hi Leute;)!

    Nochmal ich hier...

    ja,schon wieder.

    Also, zwei dinge->erstens,"Anonymer Programmierer",du bist nicht allein!Ich programmiere auch mit BASIC(Microsoft Quick BASIC)!!!

    zweitens:wie macht man so’n feld (wo ich gerade reinschreibe)??? ich BräucHtE NÄHmlIch ein forum!

    Wenn ihr antworten könnt,macht’s bitte! DANKE!!!

  • von clone-it-all 12. Juni 2011

    Hi Leute;)! Coooooooole Sache! Mein Kumpel hat mir noch ein paar Tipps gegeben, wie z.B. einfügen von Musik oder Video’s mit dem Befehl "embet: Musik-/Videoname" !

    Bloß,wie oder wo stellt man die Seiten ins Internet?!?

    Biiiiiittttteeeeee(!),sagt es mir!Biiiittteeeeeee!!!

  • von saginetLC 4. November 2010

    könnt ihr auch mit word machen einfach als html abspeichern oder als pdf... macht euch ne kostenlose homepage und habt spass!

  • von ... 29. Juli 2010

    Das wurde erstellt am 29.07.2010.wann gehts weiter?

  • von Benny07 13. Juli 2010

    Ist ja cool!!!!!!!!!!!!

  • von Knoellchen 21. Juni 2010

    Hi

    Wann kommt Eine Internetseite selbst herstellen (Teil5) ?

  • von Punkergirl 26. April 2010

    Ist ganz cool !!!!!!!!!!!!!!!!!!!!!!!?????????????????????

  • von Ninchen 23. April 2010

    Die Seite ist super und überhaupt nicht doof!!! Alle vier "Kurse" sind supa gelungen!

  • von einem Anonymen Programmierer 12. April 2010

    Ich finde die Webseite nicht so toll!
    Besser kann man mit BASIC für B eginners A ll-Purpose S ymbolic I nstrucktion C ode kurz BASIC
    arbeiten und Programme erstellen!!

  • von Computerfreak 21. März 2010

    Wie kann man dies eigentlich ins inernet stellen carsten ? Bitte Bitte Bitte Bitte Antworte

  • von Hasi 21. Februar 2010

    Klar warum nicht ist voll leicht..........................

  • von TOBIAS 14. Februar 2010

    COOL ABER,WANN KOMMT DER NÄCHSTE TEIL ???

  • von TOBIAS 14. Februar 2010

    IST VOLL COOOOOOOOOOL !!!

  • von DAS GEHT EUCH KEIN BISSCHEN AN!!!!! 26. Januar 2010

    Ich hab eine gemacht mit einen spiel von netzwelt.cool

  • von Felix 4. Januar 2010

    Ich habe ja selbst meine eigene Internetseite gemacht. Da gab es einen Desingassistenten, da mustte ich nicht die Progammierungen eingeben.

  • von Milli.Muh 8. September 2009

    Cool. Aber doof das es immer so lange dauert bis mann den nächsten teil zu gesicht bekommt!!!!!!!!!!!!!!!!!! Trotzdem es nähert sich immer mehr zum Ziel::::::::::::::::::::)))))))))))))))))):)

  • von Sini(Sinem) 3. September 2009

    cool!!! nach 3 jahren schreibt ihr mal wieder... wann schreibt ihr den 5.kurs???

© 2014 News4Kids.de | News4Kids.at | N4K.de | NachrichtenFuerKinder.de
©2009 News4Kids.de