Moin Ente,
freut mich, wenn der Beitrag dich etwas weiterbringen konnte.
Wenn dich valider Quellcode grundsätzlich interessiert, kann ich dir folgenden Link ans Herz legen:
https://validator.w3.org/#validate_by_input
Hier kannst du deinen Quellcode (wie er unter einer URL erscheint --> URL aufrufen --> Rechtsklick --> Quellcode anzeigen --> STRG + A --> STRG + C --> im Validator STRG + V ) einfach einfügen und auf formale Fehler prüfen lassen.
Das Erstellen von validem Quellcode zahlt sich aus, sobald eine HTML-Seite in Wechselwirkung mit anderen Webtechniken trifft: Ist das Grundgerüst sauber, fallen alle "fortgeschrittenen" Techniken später leichter. Dazu kann z.B. gehören, deine Website zu dynamisieren (Zugriff aufs sog. Document-Object-Model (DOM), via Java-Script).
Original von Krach-Bumm-Ente
ich habe lediglich versucht den existierenden code zu bearbeiten um das Layout anzupassen.
Und das ist auch durchaus ein brauchbarer Ansatz 
Ich bin selbst Autodidakt und einen ähnlichen Weg gegangen. Letztlich kommt es darauf an, was und in welcher Tiefe du lernen möchtest. Der Umgang mit einem Website-Builder, Rich-Text-Editor oder dergleichen macht zwar vieles schneller, es hilft aber nur selten wirklich zu verstehen, was wirklich im Hintergrund passiert.
Zwei Tools, die ich persönlich gern benutze, gefolgt von zwei Muster-Quellcodes, die du lokal speichern kannst. Anschließend kannst du damit ein wenig rumspielen.
Tools / Links
(Bei Downloads nach Möglichkeit zu neutralen Quellen. Von dort aus bitte nach persönlicher Vorliebe weiter navigieren.)
- Quellcode-Editor: https://de.wikipedia.org/wiki/Notepad%2B%2B
Mit einem ordentlichen Quelltext-Editor machst du schonmal einen gewaltigen Satz nach vorne. Er strukturiert deine Arbeit und macht evtl. Fehler schon während der Erstellung deutlich. Es gibt natürlich andere Editoren, aber bei diesem hier bin ich hängen geblieben. Evtl. geben ja auch andere hier im Thread noch Anregungen.
- Lorem Ipsum: http://www.loremipsum.de/
Erzeugen von beliebig langen Blindtexten auf Knopfdruck
- Quellcode einrücken: https://de.wikipedia.org/wiki/Einr%C3%BCckungsstil#Verwendung_von_Tabulator_oder_Leerzeichen
Schreibe eingerückten Quellcode. Ich persönlich nutze die Einrückung per Tabulator. Es erhöht die Übersichtlichkeit ungemein. Von den unten aufgeführten Dummy-Codes weiß ich leider nicht, ob sie die Tabs bei meinem Copy&Paste beibehalten.
Muster-Quellcodes
Nachfolgend zwei Muster-Quellcodes. Einmal HTML und einmal CSS. Erstelle lokal bei dir auf dem Rechner - im gleichen Verzeichnis - zwei Dateien (mein_html.html und mein_css.css) und kopiere die Muster-Quellcodes entsprechend hinein.
Falls du bedenken hast, dass ich dir irgendwelchen Schadcode unterjubeln möchte, kann ich deine Sorge verstehen und ich setze dem bewusst nichts entgegen: In diesem Fall rufe ich andere fachkundige User in diesem Thread dazu auf, die Unbedenklichkeit der Muster-Quellcodes zu bestätigen.
Dummy-HTML-Quellcode
Spoiler
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mein_css.css">
<title>Titel</title>
</head>
<body>
<div class="mein_wrapper">
<h1>Meine Überschrift erster Ordnung</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
<div class="mein_wrapper">
<h2>Meine Überschrift zweiter Ordnung</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
<div class="mein_wrapper">
<h3>Meine Überschrift dritter Ordnung</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
<div class="mein_wrapper">
<h4>Meine Überschrift vierter Ordnung</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
<div class="mein_wrapper">
<h5>Meine Überschrift fünfter Ordnung</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
<div class="mein_wrapper">
<h6>Meine Überschrift sechster Ordnung</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
</p>
<div class="link_wrapper">
<a href="#">Hier könnte ein Link stehen</a>
</div>
</div>
</body>
</html>
Dummy-CSS-Quellcode
Spoiler
/*CSS
Selektor {
Eigenschaft1: Wert;
Eigenschaft2: Wert;
}*/
body {
font-family: 'Raleway', sans-serif;
line-height: 1.5em;
font-size: 1em;
max-width: 70%;
margin-right: 15%;
margin-left: 15%;
background-color: #ffffff;
}
h1 {
font-size: 3em;
line-height: 3em;
text-decoration: underline;
color: red;
}
h2 {
font-size: 2.5em;
line-height: 2.5em;
color: green;
}
h3 {
font-size: 2em;
line-height: 2em;
text-decoration: underline;
color: blue;
}
h4 {
font-size: 1.5em;
line-height: 1.5em;
text-decoration: underline;
color: yellow;
}
h5 {
font-size: 1em;
text-weight: bold;
color: purple;
}
h6 {
font-size: 1em;
font-style: italic;
color: black;
}
p {
}
a {
color: #ffffff;
line-height: 1.7em;
}
a:hover {
color: red;
font-style: italic;
}
.mein_wrapper {
background-color: #e3e3e3;
border: 1px solid #000000;
margin-bottom: 0.5em;
padding: 15px;
}
.link_wrapper {
margin: 0.5em;
border: 1px solid blue;
padding: 15px;
background: linear-gradient(to right, blue , #ffffff); /* Standard syntax */
}
Viel Erfolg und beste Grüße!
Timmel
Edit: Validator verlinken und selbst nicht aufpassen ^^
Zeile 1 Text Continued</h2>
Text Text
