Homepageerstellung mit HTML - Kapitel 2 - Lernstunde

Guten Tag!
Ich habe gerade Zeit und beginne dann doch schon heute mit Kapitel 2 meines Tutorials/meiner Anleitung zur Erstellung einer eigenen Homepage mit HTML! Nun geht es im Kapital zwei weiter mit den einzelnen Schritten, wie es auch schon in Kapitel eins war!

Schritt 1:
Wie sieht der Aufbau des Quelltextes in HTML aus? Welche Tags sind für den Aufbau auf jeden Fall notwendig?

Wohl die wichtigsten Tags (Befehle) für den Aufbau einer Website sind der Body-Tag sowie natürlich der HTML Tag! Ohne diese Tags wird nichts erscheinen und die Homepage auch auf gar keinen Fall funktionieren! Denn ohne diese Tags fehlen die wichtigsten Bestandteile beim Aufbau einer Website!

Aufbau:

1. <html> (Sagt, dass nun der HTML Bereich beginnt und es sich um ein HTML Dokument handelt)
2. <head> (Der Bereich über dem Body Tag, der nicht angezeigt wird)
<title> (Im Headbereich der Tag title und damit wird die Obere Leiste des Internetbrowsers beliebig benannt)
</title> (Zeigt, dass die Überschrift für die Website beendet ist)
</head> (Ende des Headbereichs)
(Wichtig: Der Headbereich ist für den Aufbau einer Website nicht notwendig! Aber es können damit weitere Tags wie der title Tag eingefügt werden, womit man für die Website eine Überschrift bestimmen kann! Der Headbereich ist immer über dem Body-Tag!)
3. <body> (Beginn des Body-Tags)
(Hier kommt der Inhalt der Website hin, der angezeigt werden soll! Er kann dann auch noch mit HTML Codes formatiert werden!)
</body> (Ende des Body-Tags)
4. </html> (Ende des HTML Bereichs, sagt dass die Websitegestaltung an dieser Stelle beendet ist)

In einem Bespiel mti den ganzen Tags für den Aufbau einer Seite zur EM könnte dann das ganze im Quelltext (also der HTML Code) so aussehen:

Quelltext/HTML Code Beispiel:

<html>
<head>
<title> Homepage zur EM 2008 in Österreich/Schweiz </title>
</head>
<body>
Dieses ist die Website zur EM 2008 in Österreich und der Schweiz! Hier wird rund um den Ball diskutiert und ihr werdet hier hoffentlich viel Spaß haben!
Also schaut euch hier ruhig um!
MFG
</body>
</html>

Probiert das ganze am besten selbst einmal im Editor aus und dann werdet ihr das Ergebnis sehen! Bei Fragen stehe ich natürlich auch jederzeit zur Verfügung! Einfach in den jeweiligen Thread schreiben!

Schritt 2:
Wie erstelle ich eigentliche einen eigenen Hintergrund mit einem HTML Code?

Das ganze funktioniert ja wie eigentlich alles mit HTML mit Tags! Dieses mal sind es die Style Tags, die ihr auch in der Tagliste von mir in Kapitel 1 wiederfindet!

Wie erstelle ich einen Hintergrund mit einem Bild/bzw. einer Farbe?

Das ganze geht wie schon gerade gesagt mit den Tags (Befehlen), die man dafür einheitlich verwendet!

Anleitung/Quelltext/HTML Code für einfarbigen Hintergrund:
1. <html> Wie immer beginnt das ganze mit dem HTML Tag, der zeigt, dass es sich um ein HTML Dokument handelt
2. <body style="background-color:#xxxxxx;") Nun kommt auch schon der wichtige Tag! Dieser Tag enthält wie man sieht den Befehl body in Kombination mit dem Tag Style! Doch nun muss man den Body Tag nicht noch extra schreiben! Der Befehl body style bedeutet, dass sich etwas vom normalen Bodybereich ändert! Der Befehl background-color kommt auch aus dem Englischen und kündigt an, dass man eine Hintergrundfarbe im anschließenden Befehl auswählt, die für den Body der Seite genutzt wird!

Ihr müsst von dem Code einfach folgendes übernehmen und dann anschließend abändern:
<body style="background-color:?;")

Dort müsst ihr dann nur das Fragezeichen (?) durch eine Farbenkomination aus 6 Zahlen und Buchstaben ersetzen! Im Internet gibt es dazu etliche Tabellen! Vor diesem Code kommt dann eine Raute, was bedeutet, dass eine Farbe kommt! Wichtig ist bei dem Befehl, dass ihr alles, auch den Doppelpunkt und des Semikolon und die Anführungszeichen für den HTML Code übernehmt!

Hier findet ihr z.B. eine Farbtabelle: Farbcode HTML für die Website

Wenn ihr nach der Tabelle gerne einen schwarzen Hintergrund hättest, müsst ihr die Kombination "#000000" wählen! Im HTML Code wäre das dann wie folgt:

<body style="background-color:#000000;")

Schon hättet ihr einen schwarzen Hintergrund!

Anleitung/Quelltext/HTML Code für eigenes Hintergrundbild:

Vorab müsst ihr aufpassen! Oft sind die Bilder nicht passend für die Website! Zu große Bilder werden dann nicht ganz angezeigt! Bei kleineren Bildern hat man das Problem, dass sie sich Kacheln und damit heißt es, dass ein Bild dann viermal oder so auf der Website angezeigt wird, um den Platz auszufüllen, wenn es sonst zu klein ist!

Schritt 1:
Sucht ein Bild aus, dass ihr hochladen wollt! Sollte wie schon gesagt eine gute größe haben und wenn es sich kachelt immer noch gut und ordentlich aussehen!
Schritt 2:
Nun müsst ihr das Bild ja irgendwie ins Web bekommen! Ihr könnt es natürlich auf einen freien Webspace laden, wenn ihr einen solchen Besitzt! Doch es geht auch kinderleicht mit einem Bilduploaddienst! Ich nutze dafür immer Pictureupload (www.
Dort klickt ihr erst auf Durchsuchen rechts und wählt euer Bild aus! Es sollte am besten das Format JPG oder GIF haben, damit es auch funktioniert und nicht zu groß sein! Klickt dann rechts daneben auf hochladen! Nun müsste anschließend nach dem Hochladen ein Link erscheinen! Dort klickt ihr drauf und dann öffnet sich ein neues Fenster! Dort klickt ihr dann nocheinmal auf ein mittelgroßes Bild, dass ihr hochgeladen habt! Nun öffnet sich eine Seite im Vollbildmodus, wo ihr dann die URL (also den Link der Seite) komplett kopiert!
Schritt 3:
nun müsst ihr folgenden Befehl anwenden bzw. folgendes abändern:

<html> wie Beispiel Eins mit dem einfarbigen Hintergrund
<body style="background-image:url (Bildurl.jpg);">
Den Body style Tag habe ich ja bereits oben erklärt! Der Befehl Background-Image heißt, dass ein Hintergrundbild erscheinen soll! Der Tag url zeigt auch noch, dass nun ein Link zu dem Bild folgt. In der Klammer fügt ihr nun den eben kopierten Link aus Schritt zwei eins! Aber nur den Link! Die Klammern und alles andere behaltet ihr bei!

Mit dem Simpsonshintergrund würde das ganze dann so aussehen:

<body style="background-image:url (http://members.tripod.com/~bramdb/wolken.gif);">

Probiert es einfach wieder aus! Bei Fragen einfach wieder in diesen Thread stellen! Eine weitere Möglichkeit für das Einfügen eines Hintergrundbildes, die ich als einfacher bezeichne, werde ich morgen im dritten Kapitel veröffentlichen!

Hoffe, dass ihr mir folgen könnt! Sonst einfach fragen!

Hallo,

du könntest noch auf den DocType eingehen, der für valides HTMLzentraler Bestandpunkt ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

bzw.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Im <body>-Tag müsstest du den Text noch in <p>-Tags fassen, damit das Dokument valid bleibt (bei Transitional soweit ich weiß optional, bei Strict aber Pflicht).

(Wichtig: Der Headbereich ist für den Aufbau einer Website nicht notwendig! Aber es können damit weitere Tags wie der title Tag eingefügt werden, womit man für die Website eine Überschrift bestimmen kann! Der Headbereich ist immer über dem Body-Tag!)

Aber notwendig für eine valide Webseite.

Homepageerstellung mit HTML - Kapitel 2 - Lernstunde

Ähnliche Themen

Weitere interessante Themen

Neue aber noch unbeantwortete Themen

Aktuell 6 beste Themenschreiber der Woche