Guten Tag, da ich häufiger sehe das beispielsweise IDs mehrfach genutzt werden was ein absolutes No Go ist möchte ich hier auf die Basics von HTML und CSS eingehen.
Inhaltsverzeichnis:
1. Basics HTML
1.1 Allgemeine Informationen
1.2 HTML Elemente
1.3 HTML Atribute
1.4 Das HTML Grundgerüst
2. Basics CSS
2.1 Allgemeine Informationen
2.2 CSS Arten
2.3 CSS Beispiele
3. Schlusswort
1. Basics HTML
1.1) ALLGEMEINE INFORMATIONEN - Sicherlich ist dir HTML ein Begriff. Also, gut! HTML ist die Abkürzung für "Hypertext Markup Language" was so viel bedeutet wie "Hypertext Auszeichnungssprache". Diese wird zur Strukturierung digitaler Dokumente (Texte, Hyperlinks, Bildern und mehr) verwendet. Somit können wir entnehmen das HTML die Grundlage für eine Website ist. Nun schweife ich mal kurz vom Thema ab... Denn oft ist der Unterschied zwischen einer Website und Webseite nicht bekannt. Erklärung: Website heißt so viel wie die gesamte Homepage (bestehend aus mehreren HTML Seiten sodass eine komplette Website entsteht). Bei einer Webseite ist dies jedoch anders. Eine Webseite bezeichnet man regulär als einzelnes HTML Dokument welches zu einer Website gehört. Endeffekt: Eine Website besteht meist aus mehreren Webseiten. (Gibt ja auch Websites welche nur aus einem HTML Dokument besteht).
1.2) HTML ELEMENTE - Zu den HTML Elementen zählen beispielsweise die Textauszeichnungen. Das bedeutet Texte welche du Unterstrichen, Kursiv oder Fett haben möchtest müssen die dafür definierten Elemente beziehen. Auf Deutsch: Solltest du beispielsweise einen Text unterstrichen haben wollen und du diesen in deinem Text Editor einfach mit dem Bedienfeld F K U unterstreichen lässt wird HTML dies nicht lesen können. Dafür wurden die Elemente (Textauszeichnungselemente) bereitgestellt. Im Anhang bekommst du eine kleine Auflistung...
<b>Ich bin ein fett Gedruckter Text</b>
<u>Ich bin ein Unterstrichener Text</u>
<i>Ich bin ein Kursiver Text</i>Diese kannst du dann natürlich auch kombinieren! Das heißt du kannst einen Text Bold (fett Gedruckt) und Unterstrichen (Underline) realisieren. Das würde dann so aussehen:
<b><u>Ich bin ein fetter aber auch unterstrichener Text</u></b>
Falsch wäre: <b><u>Ich bin falsch!!!</b></u>
Warum falsch? Man schließt zuerst das U da das U innerhalb des B Elements vorhanden und definiert wurde. Denn so wäre es ganz sicher falsch geschachtelt und nicht HTML Valide. (Unsere Browser verzeihen uns diese Fehler - jedoch ist es nicht richtig! Achtet daher auf die Verschachtelung eurer Elemente um professioneller zu wirken. Merksatz: (Angepasst auf das falsche beispiel) Das zuletzt geöffnete Element muss zuerst geschlossen werden.Aber Achtung! Bis jetzt haben wir alle geöffneten Elemente auch wieder geschlossen. Jedoch ist das nicht immer so! Denn es gibt auch Tags welche self-closing betreiben. Diese müssen nicht durch einen </ELEMENT> geschlossen werden. Das ist beispielsweise bei <hr> oder <br> oder <meta charset=""> der Fall. Diese müssen nicht mit einem </ELEMNT> geschlossen werden da Sie von "Natur" aus sich selbst wieder schließen.
1.3) HTML ATRIBUTEN - HTML Atributen sind wichtige Dinge im HTML Bereich. Denn mit diesen kannst du beispielsweise eine Schriftfarbe oder Schriftgröße festlegen. Hier mal ein Beispiel:
<element farbe="rot">Roter Text</element> (BEISPIEL - Alle Atributen sind natürlich auf Englisch... Heißt: Farbe wäre color und Schriftgröße wäre font-size :)1.4) HTML GRUNDGERÜST - Natürlich gibt es ein Grundgerüst für HTML Dokumente. Das bedeutet alle HTML Pages verwenden dieses. Hier liste ich mal auf woraus das ganze besteht:
-Die DOCTYPE Angabe (Zeichnet die Art des Dokuments aus)
-Den HTML Tag Bereich (In diesem befindet sich der gesamte HTML Inhalt)
-Den Head Bereich (Beinhaltet beispielsweise den Titel deiner Webseite oder beinhaltet die jeweiligen Verlinkungen zu External CSS Dateien -> Mehr Infos dazu unten!!!)
-Den Body Bereich (Inhalt deiner Webseite)
Hier mal das Grundgerüst:
<!DOCTYPE html>
<html>
<head>
<title> HTML Grundgerüst </title>
</head>
<body>
</body>
</html>Im Body werden dann beispielsweise die Texte welche auf deiner Webseite sichtbar sein sollen eingefügt. Beispiel:
<!DOCTYPE html>
<html>
<head>
<title> HTML Grundgerüst </title>
</head>
<body>
Hallo Welt
</body>
</html>Jedoch fehlen zwei wichtige Dinge im aktuellen Grundgerüst! Und zwar einmal die Definition der Sprache (de für Deutsch) und die Definition für das Codierungsformat.
Hier mal das ergänzte Gerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> HTML Grundgerüst </title>
</head>
<body>
Hallo Welt
</body>
</html>Glückwunsch! HTML Basics hast du nun drauf!!! Lust auf CSS? 
2.1) ALLGEMEINE INFORMATIONEN - Was ist CSS überhaupt? CSS ist die Abkürzung für "Cascading Style Sheets" was soviel bedeutet wie "kaskadierte Stilvorlagen". CSS ist somit (logisch) eine Stylesheet Sprache. Wer HTML oder CSS kann ist noch lange kein Programmierer da diese keine Programmiersprachen sind. CSS wird somit zum Gestallten der Elemente welche in HTML auftauchen verwendet. Zu beachten ist jedoch das es 3 Arten von CSS gibt. Mehr dazu findest du jedoch im nächsten Punkt!
2.2) CSS ARTEN - Also CSS Arten sind: Inline CSS, Internal CSS und External CSS. Wer Englisch kann sollte das nun ansatzweise verstehen. Hier jedoch ein Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> HTML Grundgerüst </title>
</head>
<body>
<p style="color: red;">Inline CSS</p>
</body>
</html>Inline CSS - Die Gestaltung erfolgt direkt im HTML Element. Dies ist jedoch nicht gerade Übersichtlich und wird daher nur sehr selten genutzt!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> HTML Grundgerüst </title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>INTENRAL CSS</p>
</body>
</html>INTERNAL CSS - Hier wird ein Style Bereich in den Head Bereich der Webseite eingefügt. Dieser enthält dann die jeweiligen Style Atributen. Schon Übersichtlicher als Inline CSS jedoch auch nicht die beliebteste Methode. Denn dadurch wird das Dokument sehr lang und irgendwann ebenfalls Unübersichtlich!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> HTML Grundgerüst </title>
<link rel="stylesheet" type="text/css" href="site.css">
</head>
<body>
<p>EXTERNAL CSS</p>
</body>
</html>External CSS - Dies greift auf eine EXTERNE Stylesheet zu und bezieht somit aus dieser alle Style Atributen. Diese Methode ist die gängigste Methode da es leichter zu warten ist. Ebenfalls ist die Übersicht besser als bei den anderen Arten 
2.3) CSS BEISPIELE - Hier mal einige Basics die zu CSS gehören...
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> HTML Grundgerüst </title>
<link rel="stylesheet" type="text/css" href="site.css">
</head>
<body>
<p>EXTERNAL CSS</p>
<p class="hello">Hello Text</p>
<p id="danger">Danger Text</p>
<p>
<b>Bold in p Tag</b>
</p>
<b class="hello">Hello Klasse mit b Tag</b>
</body>
</html>Nun könnte man sagen ich möchte alle p Elemente Grün haben. Dann würde das beispielsweise so aussehen:
p {
color: green;
}Nun sind alle p in der Farbe grün! Jetzt möchten wir jedoch das p mit der klasse hello blau ist. Beispiel:
p {
color: green;
}
p.hello {
color: blue;
}Nun wäre das <p> mit der Klasse hello blau. Alle anderen sind aktuell Grün! Warum p.hello und nicht einfach .hello? Ganz einfach! Würde ich .hello nutzen würde ich auch den Text mit dem b Element welches die Klasse hello verwendet ansprechen. Daher sage ich mit p.hello das nur die p Elemente welche die Klasse hello verwenden blau sein sollen. Nun möchte ich alle b Gelb haben. Beispiel:
p {
color: green;
}
p.hello {
color: blue;
}
b {
color: yellow;
}Nun sind alle b Gelb. Jetzt möchte ich aber das das b mit der klasse hello pink ist. Beispiel:
p {
color: green;
}
p.hello {
color: blue;
}
b {
color: yellow;
}
b.hello {
color: pink;
}Nun sind alle b welche die klasse hello verwenden pink. Heißt das normale b Element ohne die hello klasse ist weiterhin Gelb. Nun möchte ich aber das p mit der id danger rot ist.
Beispiel:
p {
color: green;
}
p.hello {
color: blue;
}
b {
color: yellow;
}
b.hello {
color: pink;
}
#danger {
color: red;
}Warum jetzt nicht p#danger? Ganz einfach... Da IDs immer nur einmal verwendet werden sollen und dürfen (eigentlich) wäre es unnötig nun das p Element welches die id verwendet anzusprechen. Da genügt schon die id selbst
Natürlich gibt es noch viel mehr Möglichkeiten... Beispielsweise kann man sagen ein b Element welches die tochter Ebene von p ist soll orange sein. Beispiel:
CSS:
p > b {
color: orange;
}
HTML:
<body>
<b>Bold Text nicht im p </b>
<p>
Text im p
<b>Bold im p </b>
</p>
</body>Somit wird nur das b Element welches im <p> Element enthalten ist angesprochen und verfärbt. Hoffe das reicht an Demos.
3) SCHLUSSWORT - Sollte hier etwas nicht korrekt sein bitte ich euch mir mitzuteilen. Mir persönlich hat es Spaß gemacht hier de HTML Anfängern etwas auf die Sprünge zu helfen. Immer Sauber bleiben, jungs!
ES IST EINE EINLEITUNG KEIN KOMPLETTER KURS - HIER WIRD NICHT ALLES BESPROCHEN. NUR UM EINEN ANREIZ ZU SCHAFFEN! PS: SRY FÜR DIE SCHRIFTGRÖßE DENN ES SOLL SICH ABHEBEN...
Viel vergnügen...
