Huhu,
ich lerne gerade etwas HTML 5 und CSS3 und dachte, dass kann ich doch mit euch teilen.
Heute beginn ich mit dem Crashkurs #1 (Beitrag wird nach und nach ergänzt!)
#1
HTML
Gründgerüst einer HTML-Seite
Spoiler anzeigen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leere Seite</title>
</head>
<body>
<!-- Kommentar -->
</body>
</html>
Erklärung einzelner Elemente:
1. <html> .... </html>
Spoiler anzeigen
Das sind Paare von Elementen. Diese werden auch Tags genannt!
2. <meta charset="utf-8">
Spoiler anzeigen
Damit sagt ihr dem Browser in welcher "Sprache" eure Seite ist.
Bzw. was ihr für Buchstaben benutzt! Damit funktionieren auch: Ä Ö Ü
3. <title>Leere Seite</title>
Spoiler anzeigen
Das war ihr da oben reinschreibt, wird der Titel eurer Seite!
Dieser wird in geöffneten Tabs angezeigt.
4. <!-- Kommentar -->
Spoiler anzeigen
Mit: <!--...--> könnt ihr Kommentare in eurem Quelltext hinterlassen, die auf der Seite nicht angezeigt werden!
Das ist nützlich, wenn ihr in einem Team an einer Webseite arbeitet.
Wichtig: Keine vertraulichen Informationen, da JEDER euren Quelltext aufrufen kann.
5. <!DOCTYPE html>
Spoiler anzeigen
Sagt dem Browser, dass die Seite in HTML 5 geschrieben ist!
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Überschriften:
Diese lassen sich folgendermaßen darstellen:
<h1> Überschrift 1 </h1>
<h2> Überschrift 2 </h2>
....
<h6> Überschrift 6 </h6>
1 ist am Größten!
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Sonstiges:
Spoiler anzeigen
<p>Text wird als ein Absatz dargestellt</p>
<a href= "http://www.google.de" target="_blank"> Öffne Google im neuen Tab!.</a>
Wenn es nicht in neuem Tab geöffnet werden soll: Einfach target="_blank" weglassen!
<a href="mailto: Godlike@test.de">Email an Godlike</a>
<img src="Godlike.png" alt="Bild von Godlike">
Wichtig: Bild muss im selben Ordner sein!
alt="..." Wird angezeigt, falls das Bild nicht geladen werden kann!
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS:
Inline Styles:
Spoiler anzeigen
<p style="color: #660000; background-color: black;">
Roter Text auf schwarzem Hintergrund!
</p>
Lokales werd ich nicht erklären, da es sinnlos ist!
Externe Styles:
Das folgende müsst ihr in euer HTML Dokument schreiben!
<head>
...
<link rel="stylesheet" href="default.css" type="text/css">
...
</head>
Eure erstellte css Datei muss dann auch default.css heießen!
So sieht unsere externe CSS Datei aus: (Das bedeutet ihr solltet es dann so reinschreiben!
Das müsst ihr in euer HTML Dokument schreiben!
Spoiler anzeigen
h1 {
font-family: Arial, sans-serif;
background-color: gray;
padding: 5px;
}
Gild dann für ALLE Überschriften die h1 sind!
CSS Regeln:
Auswahl {Eigenschaft: Wert; )
Auswahl bedeutet z.B h1 oder h2 etc.
Wenn ihr ein einzelnes Element haben wollt, müsst ihr das per ID machen!
In der CSS Datei:
Spoiler anzeigen
#Godlike { margin: 15px; }
In der Html Datei:
Spoiler anzeigen
<img id="Godlike" src="Godlike.png" alt="Bild von Godlike">
Hoffe es hilft dem einem oder anderem! Je nachdem wie die Ressonanz ist, kommt Teil 2. 
Ehm ja holt euch zum Probieren am Besten einfach nen HTML Editor.
Viel Spaß
