Direct access to content Direct access to navigation
News4Kids - Nachrichten und Wissen für Kinder und Jugendliche
Suchen

Eine Internetseite selbst herstellen (Teil 4)

PNG - 65.6 kB

1. Dezember 2009

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 (Table row) und von links nach rechts in Spalten unterteilt. Dabei ergeben sich dann die Tabellenzellen (Table data) (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.

beigefügte Dokumente


Eure Meinung dazu:

von GEHT EUCH GAR NICHTS AN!!! 19. April 2015

Ist echt cool!
Wann kommt denn der 5. Teil?

von LWA 10. Februar 2015

LOOOLOLOLOL

von noemi 18. Januar 2015

es sollte mehr machen zum basteln haben

von Tamil 3. Juni 2014

Cool aber wann kommt teil5

von DAS ADOS 6. Mai 2014

wie kann men des ansehen oder hochladen?

von Wisser 14. April 2014

Es sollte noch einen 6. Teil geben.
Weil ich würde gerne wissen wie man ein Video auf die Webseite einfügt.

26. Februar 2014

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 Beginners All-Purpose Symbolic Instrucktion Code 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???

Eine Nachricht, ein Kommentar?


Moderiertes Forum

Sobald wir deinen Kommentar gelesen haben, werden wir ihn zu dem Artikel hinzufügen.

  • (Um einen Absatz einzufügen, einfach eine Zeile frei lassen.)

    Bitte nur sinnvolle Kommentare zum Thema des Artikels. Du darfst deine Meinung frei äußern. Was wir nicht erlauben sind Beschimpfungen anderer Seitenbesucher. Auch Adressdaten Telefonnummern und E-Mail-Adressen werden wir nicht veröffentlichen. Außerdem erlauben wir nur Links zu anderen Kinderseiten.