bestimmten Bereich farbig hinterlegen

Hallo ich bin hier zum ersten Mal und hoffe ihr könnt mir helfen.....wäre super:-)
Kurz vorweg ich muss in der Schule eine Webseite programmieren und komme da nicht so richtig weiter. Ich bin jetzt in der 11. Klasse und hab zum ersten Mal Informatik. Unsere Lehrerin scheint das aber nicht wirklich zu wissen, denn sie hat uns den Auftrag gegeben, unsere Schulwebseite zu erweitern, da sie teilweise nicht mehr so aktuell ist und manche Themen einfach fehlen. Um es kurz zu machen, sie möchte, dass wir eine Webseite programmieren, die vom Design etwa genau so aussieht aber ohne den Besitz von jeglichen Vorkenntnissen. Sie hat uns zwar auf die Seite Selfhtml verwiesen, aber wirklich helfen tut das uns auch nicht.
(unsere Schulwebseitenadresse lautet: http://www.plg-berlin.de, bei dem Quellcode wird mir ja schon schwindelig.....)

Mein Problem liegt darin, das ich einen Text geschrieben habe und der weiß hinterlegt werden soll. Allerdings nicht ganz bis zum Rand, sondern nur in einem gewissen Abstand zum Text. Sonst hätte man ja den Hintergrund einfach weiß machen können.

Da die Webseite nicht hochgeladen ist, füge ich einfach mal den Quellcode ein (im Anhang).
Ich hoffe ihr versteht mein Problem oder besser gesagt ich hoffe das ihr mir bei meiner Unwissenheit helfen könnt.:-D Besten Dank schon Mal im Voraus!

LG Moritz

Zitat von basti1012

Grausam. Da ist ja alles Mist drinne in der Datei. Kannst du mal kurz erklären wie das aussehen soll? Weil da irgendwas dran zu machen hat kein sinn. Das muß alles neu

HAHA ja ich weiß, ist wahrscheinlich der größte Blödsinn den du jemals gesehen hast. Danke das du/ihr mir so schnell geantwortet habt!!!

- - - Aktualisiert - - -

Zitat von Sailor

Nicht den Mut verlieren... basti1012 hat zwar Recht, aber das kann man alles fixen!
ABER!!! Bevor du dir diese Mühe machst, solltest du zunächst prüfen, ob (wenn dein Teil in die Schulseite integriert werden soll) dieses überhaupt so möglich ist?
Die Schulseite nutzt ein Conten Management System (CMS) ... hier Joomla... und das ist normalerweise sehr störrisch und lässt solche Aktionen, wie einbinden einer 'fremden' Seite kaum zu.
Wenn du deine Seite separat von der Schulseite erstellen willst, dann mach das, was basti1012 dir geraten hat - erkläre uns, wie das aussehen soll.
Bisher hast du da nur eine Überschrift und ein paar Textabschnitte drin... soll das alles sein?

Also ich denke mal das die Lehrerin bei uns das nicht ernst gemeint hat mit dem direktem Einfügen. Ich hab einmal bei Ihr auf dem Bildschirm gesehen, dass man dort auch einen Quellcode einfügen kann aber das wird sie wahrscheinlich nicht machen.
Also ihr ratet mir alles noch mal neu zu machen...was genau ist denn nicht so "korrekt". Bin echt schlecht im programmieren weil ich es noch nie gemacht habe.

Um auf deine Frage zurück zu kommen, es soll halt die Überschrift die wir haben drinnen sein und darunter dieser Lauftext. Dann kommt darunter der größere Textabschnitt der vom Rand einen gewissen Abstand haben soll (kann man ja im Nachhinein immer wieder ändern oder?). Und dieser Text soll auf einem weißen Hintergrund stehen. Dieser soll aber auch nicht komplett zum Rand gehen, damit man noch das Hintergrundbild erkennen kann. So wie hier: http://www.plg-berlin.de/index.php/fahr…mm/sommerschule
Und dann sollen wir noch ein paar Bilder einfügen wo man dann vielleicht noch etwas daneben schreibt. Aber habe halt leider keine Ahnung wie man das anstellen soll....

- - - Aktualisiert - - -

basti1012 Mit dem Hintergrund meine ich dieses eine Bild was etwas verschwommen ist. Das soll sich halt nicht bewegen können, also wenn man hinunter scrollt. Der Text dabei soll aber auf einem weiteren Hintergrund stehen der weiß ist aber zum Rand auch Abstand hat aber weniger Abstand als der Text. Hier sieht man das vielleicht ein bisschen besser: http://www.plg-berlin.de/index.php/fahr…mm/sommerschule
ich kenne mich mit den ganzen Begriffen nicht so gut aus die du genannt hast auch wenn sie alle auf Englisch sind und eigentlich selbsterklärend sind.....aber die haben bestimmt teilweise eine spezifische Bedeutung.

Zu deinem Code. Kann man den CSS Teil nicht gleich in den "style" Teil einfügen weil auf den ganzen Informationsseiten wurde das immer so gemacht.
Und wenn man den CSS Code extra macht, muss man den dann in einer ganz normalen Textdatei im gleichen Ordner abspeichern oder wie funktioniert das dann.

Zitat von Sailor

Als Erstes solltest du deinen Code gemäß dem gültigen HTML Standard erstellen - das heißt:
Das Dokument beginnt mit dem Doctype... also <!DOCTYPE html> in die erste Zeile.
Dann folgt der Rest vom Grundgerüst:

HTML

<html lang="de">
<head>


</head>


<body>


</body>
</html>

Alles anzeigen

In den <head>... </head> Bereich kommen alle deine Kopfangaben für das Dokument - inklusive eines <style>...</style> Bereiches, in dem du alle Formatierungen für die Elemente im 'body' einfügst.
Das Erste, was du da reinschreibst ist:

HTML

body {
   background-image: url("main-background.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}
main {
   width: 90%;
   max-width: 960px;
   margin: 10px auto;
   padding: 20px;
   background-color: #ffffff;
}

Alles anzeigen

Jetzt musst du diesen <main> Container in deinen Code einfügen.
direkt hinter dem <body> schreibst du <main>
und direkt vor dem </body> schreibst du </main>

Dann kannst du nach und nach alle Formatierungen, die du jetzt als inline-style hast nach oben in den <style>...</style> übertragen.
also...

HTML

a {
   color: #2a0a29;
}
a:hover {


}


.img150 {
   float: left;
   margin-left: 5px;
   height: 293px;
}


p {
   text-align: justify;
   color: #000000;
   font-size: 1.3em;
}


h1 {
   text-align: center;
   color: #000000;
}

Alles anzeigen

Die inline-styles, die du nach oben gebracht hast, musst du natürlich im Code dann löschen.

Der Rest sollte dann nur noch 'spielen mit den Werten sein!

- - - Aktualisiert - - -

Edit... alle html Tags sollten mit kleinen Buchstaben geschrieben sein!
Also <html> statt <HTML>

und dieser <FONT...></FONT> solltest du ersatzlos löschen - dafür hast du dein CSS.

Alles anzeigen

Vielen vielen dank für die gute Zusammenfassung. Ich glaube ich habe jetzt den Aufbau einigermaßen verstanden. Unsere Lehrerin meinte auch, dass wir das nur als Einführung gemacht haben (warum auch immer) und danach werden wir mit Python programmieren und ich hoffe das sie das dann mal besser erklärt oder sich erst mal die Mühe macht es überhaupt zu tun.
Trotzdem Danke für deine schnelle Hilfe!!
Ich hab jetzt deinen Code mit dem von basti1012 kombiniert und muss dann morgen in der Schule gucken was raus gekommen ist:-D.

Einen schönen Abend noch