Hallo Gast und herzlich Willkommen zu Pumafells HTML-CSS-Kurs!
In meinem Kurs lernt ihr Grundlagen in der HTML-'Programmierung' und Bearbeitung mit CSS.
Ziel des Kurses wird es sein, dass ihr selbstständig eine RPG-Postvorlage erstellen könnt!
Anmelden könnt ihr euch ganz einfach, indem ihr hier einen Beitrag mit "Ich nehme teil." o.ä. postet.

Ich habe lange überlegt, wie man so ein Tutorial am Besten aufbaut und habe immer noch keine richtige Struktur gefunden.
So ein Tutorial macht man am Besten als Video; so habe ich das nämlich gelernt. Normalerweise hätte ich euch einfach auf die Video-Reihe verwiesen, doch dort wird viel mehr erzählt, als wir hier für eine Postvorlage benötigen. Falls ihr die trotzdem verlinkt haben möchtet, meldet euch einfach in einem Beitrag.

"Kurs"-Stunden versuche ich regelmäßig 2x mal pro Woche zu posten, damit genug Zeit für Fragen bleibt und ihr nicht so viel verpasst, solltet ihr mal nicht da sein. Fragen beantworte ich gern sofort und auch welche, die nicht zum aktuellen Thema passen.
Wie viele Stunden es geben wird, weiß ich noch nicht genau, aber sehr viele werden es nicht sein, da wir ja schnell unser Kurs-Ziel erreichen wollen!

Tsuki
Sumpfohr

Begriff HTML und Syntax
HTML (Hypertext Markup Language) bezeichnet eine Beschreibungssprache, die Hypertextdokumente im World Wide Web mittels Tags codiert. Diese Tags werden durch

Code:

<..>

geöffnet und duch

Code:

</..>

geschlossen.
Also wie im Foren-BB-Code, nur dass statt eckige Klammern [] kleiner/größer <> benutzt werden.
So finden sich viele Ähnlichkeiten beim Formatieren von Texten. Kursiv setzt man wie im BB-Code mittels

Code:

<i>...</i>

Selbiges für Unterstrichen (u) und fett (b).

Begriff CSS und Syntax
CSS (Cascading Style Sheets) ist eine Style-Sheet bzw. Gestaltungssprache, mit der HTML-Tags angesprochen und gestaltet werden können. Die Syntax unterscheidet sich von HTML. Ein CSS-Tag wird mittels

Code:

<style>...</style>

eingeführt, der meistens unter dem zu gestalteten und fertigen HTML-Objekt sitzt. Normalerweise ist das CSS-Stylesheet ein extra Dokument, welches in HTML implementiert wird, doch wir programmieren keine ganze Website.
Daher benutzen wir am Ende unserer Postvorlage den Style-Tag, um CSS einzuführen.
Um nun ein Objekt, bspw. einen Block (div), den wir so Einfügen:

Code:

<div>Inhalt</div>

anzusprechen, schreiben wir einfach innerhalb unseres Style-Tags den Namen den Objekt-Tags (in diesem Fall div).

Code:

<style>div</style>

Die Gestaltung des div's kann nun beginnen. Alles, was wir nun mit dem div tun wollen, kommt in geschweifte Klammern {}:

Code:

<style>div {}</style>

Eine Eigenschaft setzen wir folgerndermaßen:

Code:

Attribut: Beschreibung;

Anttribute sind bspw. Hintergrund-Farbe, Schriftart, Textschattten, Sichtbarkeit, Breite, Höhe, etc.
Beschreibung dann die jew. Farbe, Schriftart, Farbe des Textschattens, Pixel- oder Prozentangabe bei Breite/Höhe.
Abgetrennt werden Attribute mittels Semikolon ;
Einen Container mit einem schwarzen Hintergrund und weißer Schrift, würde also so aussehen:

Code:

<div>weißer Text auf schwarzem Hintergrund</div>
<style>div {color: white; background-color: black}</style>

Klassen und ID's
Wir verwenden unsere Postvorlagen innerhalb einer HTML-Website, die fertig programmiert und gestaltet ist.
Um nun die größten Fehlerquellen zu vermeiden, benutzen wir Klassen und ID's.
Denn das Forum hat ein eigenes CSS-Stylesheet, wo der div bereits fest gestaltet ist. Das heißt, mein Beispiel-div funktioniert nicht, wie er soll. (Ihr könnt den Code ja mal kopieren und auf 'Vorschau' klicken, dann seht ihr, was ich meine, aber bitte nicht auf 'Senden' gehen!
Damit wir also das Forum nicht neu gestalten, benutzen wir Klassen (ID's eher nicht).
Mittels Klassen und ID's geben wir unseren div's eigene Namen, sodass wir gezielt diesen div ansprechen. Das macht man folgendermaßen:

Code:

<div class="bsp">weißer Text auf schwarzem Hintergrund</div>

class beschreibt eine Klasse und id eine ID.
Der Unterschied zwischen ID und Klasse ist folgender:
Eine Klasse wird benutzt, wenn wir mehrere Objekte mit demselben Namen haben. ID's werden nur benutzt, wenn wir das Objekt genau einmal auf der gesamten Seite verwenden. ID's benutzen wir also nicht, weil wir ja die Post-Vorlage oft benutzen und nicht nur einmal.
Meinen Beispiel-Div kann ich also statt eine Klasse eine ID zuweisen:

Code:

<div id="bsp">weißer Text auf schwarzem Hintergrund</div>

Nun kommen wir dazu, die Klassen bzw. ID im CSS anzusprechen. Klassen rufen wir mittels .name und ID mittels #name auf. Also so:

Code:

<div class="bsp">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp {color: white; background-color: black}</style>

Code:

<div id="bsp">weißer Text auf schwarzem Hintergrund</div>
<style>#bsp {color: white; background-color: black}</style>

Nun funktioniert das Beispiel auch:

Tipps am Rande
Im Internet kann man ganz einfach das finden, was man braucht. Schaut also bitte vorher im Internet selbst nach, wie man einen Text linksbündig macht, bevor ihr hier fragt.
Euer bester Freund bei HTML und CSS wird sowieso Google sein. Habt ihr die Grundlagen drauf und auch Spaß daran, fällt euch das richtige Erlernen sehr leicht.
Es ist also ein learning-by-doing, weshalb es mir schwerfällt, andere darin zu unterrichten^^
Ein kleiner Tipp zum Schluss: Ich habe viel gelernt, indem ich im Internet auf ein Objekt mit Rechtsklick auf "Element untersuchen" gegangen bin. Rechts am Bildschirm-Rand findet ihr dann den Aufbau des Objekts mit den jew. CSS-Gestaltungen, die ihr De/aktivieren könnt, um so zu schauen, was passiert (wenn ihr die Seite neu ladet, ist sie natürlich wieder so, wie sie vom Entwickler gestaltet wurde, ihr könnt also nichts kaputt machen xD).

So, das wäre die erste Stunde gewesen (Puh, ganz schön viel).
Also gibt es auch schon die erste Hausaufgabe:
Erstellt einen div mit einem von euch ausgewählten Klassennamen und Inhalt und ändert die Schriftgröße in 20px.
Gebt außerdem den Code an, damit ich sichergehen kann, dass ihr nicht geschummelt habt.
Viel Spaß!

In der nächsten Stunde werden wir tiefer in die Thematik der divs gehen und weitere Tags kennenlernen.
Außerdem werden wir dann anfangen, Elemente ineinander, untereinander und nebeneinander zu setzen.

Super, ihr beiden, ihr habt das toll gemacht!
Freut mich auch, dass ihr den Kurs gut findet; bei Verbesserungsvorschlägen einfach melden^^

Tsuki schrieb:

Bezüglich des Codes habe ich mich an deinem Beispiel und einer für mich erstellten Postingvorlage orientiert (nur um rauszufinden, wie man Schriftgröße reinschreibt xD), ich hoffe, das zählt nicht als schummeln? owo

Mit Schummeln meinte ich, dass ihr nicht einfach den BB-Code für die Schriftgröße nehmt.^^
Du hast genau das gemacht, was ich euch indirekt auch als Aufgabe gegeben habe: Selbstständig rausgesucht, wie man das macht. Wie gesagt, das ist auch sehr wichtig.
Da also die erste Aufgabe sehr einfach war, können wie die Schwierigkeit bei der nächsten Aufgabe etwas erhöhen.

Vorab: Diese Stunde wird etwas mehr HTML-lastig sein. Mit CSS werden wir uns aber nächste Stunde mehr beschäftigen.
Div's'
'Div' kann man ganz einfach mit 'Container' übersetzen. Der Grund dafür ist die voreingestellte Größe; wie ihr selbst schon mitgekommen habt, zieht sich der Div über die gesamte Breite und ist nicht nur so lang wie euer Text. Jeder weitere Div (oder allgemein jedes weitere Element), den ihr einfügt, wird automatisch darunter gesetzt. Das liegt daran, dass die standardmäßige Anzeige des Div's block ist. Also die Eigenschaft: display: block
block bedeutet eben, dass der gesamte Block angezeigt und auch benutzt wird.

Display-Eigenschaften

block (Div nimmt gesamte Breite ein)
Die Eigenschaft klingt vielleicht blöd, doch dank ihr können wir den Div wunderbar formatieren; ihm also eine feste Höhe und feste Breite geben:

Code:

<div id="bsp0">weißer Text auf schwarzem Hintergrund</div> Dahinter kann jedoch nichts geschrieben werden.
<style>#bsp0 {color: white; background-color: black; display: block; height: 100px; width: 200px}</style>

Dahinter kann jedoch nichts geschrieben werden.


inline (Div ist nur so breit und groß wie der Inhalt):

Code:

<div id="bsp1">weißer Text auf schwarzem Hintergrund</div> Dahinter kann etwas geschrieben werden.
<style>#bsp1 {color: white; background-color: black; display: inline; height: 20px}</style>

Dahinter kann etwas geschrieben werden.

die Eigenschaft ignoriert also Formatierungen wie Höhe und Breite.

none (Block samt Inhalt wird nicht angezeigt):

Code:

<div id="bsp2">weißer Text auf schwarzem Hintergrund</div> Dahinter kann wieder etwas geschrieben werden.
<style>#bsp2 {color: white; background-color: black; display: none}</style>

Dahinter kann wieder etwas geschrieben werden.
Wozu das gut sein soll? Kommt in der nächsten (oder übernächsten) Stunde :)

inherit (Div nimmt display-Eigenschaft von Mutterelement an):
Das funktioniert nur, wenn ihr zwei Divs habt, die ineinander sitzen und dem Mutter-Element eine display-Eigenschaft gebt. Mittels display: inherit beim Tochter-Element, gebt ihr diesem die display-Eigenschaft des Mutterelements. Quasi Vererbung.
Benutze ich persönlich nicht häufig, aber vielleicht ihr.

Es gibt noch weitere Display-Eigenschaften, doch diese benutze ich selbst auch nicht und sind auch nicht zwingend notwendig.

span-Tag
Ein Span, der so eingefügt wird:

Code:

<span>...</span>

ist dem Div ähnlich, doch wenn ich ihn einfüge, sieht man schon den Unterschied:
Weißer Text auf schwarzem Hintergrund Dahinter kann wieder etwas stehen.
Der Span hat die Standard-Eigenschaft display: inline. Dies ist für Posting-Vorlagen sehr nützlich, also ein wichtiger Tag.
Viel mehr gibt es dazu eigentlich nicht zu sagen, Spans verwendet man hauptsächlich, um einen Text zu umgeben.

a-Tag
Der a-Tag ist unser Hyperlink-Tag, mit dem man Links einfügen kann. Dabei funktioniert er nicht so:

Code:

<a>http://damascenon.forumieren.de</a>

http://damascenon.forumieren.de
Er sieht zwar wie ein Link aus, doch man kann nicht darauf klicken.
Um einen funktionierenden Link einzufügen, brauchen wir im Öffnungstag den Link:

Code:

<a href="http://damascenon.forumieren.de">Name des Links</a>

also der Link muss bei href="" eingefügt werden (href = hyper reference (Hyperlink))

img-Tag
Mithile des img (Image)-Tags kann man, wie der Name schon sagt, Bilder einfügen.
Dieser Tag funktioniert ebenfalls etwas anders, denn es gibt keinen Öffnungs- und Schließ-Tag, sondern einen 'einsilbigen Tag':

Code:

<img />

Um jetzt ein Bild einzufügen, benutzen wir im Tag src="" (src = source), wo die Bildadresse reinkommt:

Code:

<img src="" />

center-Tag
Mithilfe des Center-Tags werden alle Elemente innerhalb des Tags zentriert. Also alle Divs, Spans, Bilder.
Eingefügt wird er wie üblich:

Code:

<center>...</center>

Kommentar-Tag
Der ist nicht zwingend notwendig, aber auch ganz cool, falls ihr Probleme dabei habt, euren Code über längeren Zeitraum zu verstehen.
Der Kommentar-Tag ermöglicht es euch, Kommentare in euren Code einzufügen, die später nicht angezeigt werden.
Eingefügt wird er so:

Code:

<!--Inhalt eures Kommentars-->

wichtig zu beachten: innerhalb des style-Tags, der CSS einführt, funktioniert der Tag nicht!
Der CSS-Befehl für Kommentare sieht wie folgt aus:

Code:

/* Inhalt eures Kommentars */

Tipps am Rande
Allen neuen Tags, die wir heute kennen gelernt haben, können Klassen und IDs zugewiesen und in CSS bearbeitet werden!
So können wir dem center-Tag auch sagen, er soll alle Elemente rechts platzieren, wobei der Sinn des Tags natürlich verloren geht.

Wie angekündigt heute mal etwas schwereres:

1.) Theorie:
Frage: Worin liegt der Unterschied zwischen dem center-Tag und der CSS-Eigenschaft: text-align: center? (ggf. ausprobieren)
Frage: Wie fügt man dem Bild einen Link hinzu? (Tipp: Bild im Link)

2.) Praxis/Anwendung:
Erstellt einen div mit einer selbst-gewählten Hintergrundfarbe und fügt dort ein Bild und darunter einen Text hinzu.
Tipp: Dem Div eine feste Breite und Höhe geben, Bild ebenfalls eine Höhe und Breite geben.
Gebt außerdem den Code an. Bei Fragen immer her damit :D
Viel Spaß!

Wie angekündigt werden wir uns nächste Woche (Diesntag) mehr mit CSS auseinandersetzen und etwas zu Farben, Schriftarten, Textschatten, Positionierung und vielem mehr machen!
Nach der nächsten Stunde können wir sogar unsere erste Posting-Vorlage erstellen!

@Sumpfohr bei dir gibt es nichts weiter zu sagen, alles richtig und gut gemacht^^
@Tsuki Ist bei dir alles in Ordnung? Kann ich im Stoff weitergehen, brauchst du Hilfe, hast du fragen?
Ich würde eigentlich ungern weitermachen, wenn ich deinerseits kein Feedback bekomme xD

Diesmal dürfte es wieder etwas einfacher werden.
Style direkt setzen
Eine gute Alternative zu Klassen und IDs ist das direkte Setzen des Styles im Tag.
Dies funktioniert genau so wie das Setzen des Links im a-Tag oder die Quelle im img-Tag mit

Code:

<TAG-NAME style="">

Man kann damit alle Tags gestalten.
Innerhalb style="" wird ganz normal wie im CSS-Tag geschrieben,

Code:

style="color: white; background-color: black; border-radius: 10px;"

nur dass wir nichts ansprechen müssen (da wir ja in dem Objekt, der gestaltet werden soll, den Style einführen)
Ich hoffe, man versteht, was ich sagen will.

Wenn wir den Style direkt im Tag setzen, minimieren wir die Nutzung von Klassen und ID's, was man immer tun sollte.
Wenn wir allerdings zwei Textboxen haben, die gleich aussehen sollen, sollten Klassen benutzt werden, sonst kann der Code schnell unübersichtlich werden und Fehlerquellen sind schwieriger zu finden.
Eine Überschrift oder einen einzelnen Span würde ich immer direkt im Tag den Style setzen.

Außerdem ist wichtig zu beachten, dass der Style nicht vererbt wird. Was ich damit meine?
Hier mal ein kleines Bsp:

Code:

<div class="bsp00" style="background-color: grey; width: 150px; height: 80px; color: darkblue; border-radius: 10px">Inhalt1<div class="bsp00">Inhalt2</div></div>
<style>.bsp00 {background-color: black; width: 100px; color: white}</style>

Hier haben wir zwei Divs ineinander gesetzt (der schwarze im grauen).
Dem Mutter-Div habe ich den broder-radius: 10px (abgerundete Ecken) gegeben,
doch das Tochter-Element (schwarzer Div) hat keine runden Ecken.

Außerdem sieht man hier, dass sich der Style, der direkt im Tag sitzt, immer über den Style, der im style-Tag definiert ist, setzt.
Also kann man ganz bequem in einem gestalteten Div einen Span setzen und den im Tag gestalten.
Hier ein Praxisbeispiel:

Code:

<div class="bsp10"><span style="font-size: 20px; text-shadow: 0px 0px 5px black; font-style: italic; color: lightsteelblue">Überschrift</span>
Hier ein kleiner Beispieltext, um die Theorie zu veranscheulichen. Der Text besitzt keinerlei Inhalt, also nicht worth, ihn zu lesen</div>
<style>.bsp10 {box-shadow: 0px 0px 5px black; width: 200px; font-size: 14px; color: white; background-color: black; padding: 2px;}</style>

CSS-Gestaltungsmöglichkeiten
Hover (Mouse-over)
Wie wir einen Link erstellen, wissen wir bereits.
Und wir wissen auch, dass sich standard-mäßig (hier im Forum) der Unterstrich ändert,
wenn man mit der Maus darüberfährt (Mouse-over).
Dieses Aussehen können wir auch ändern, und zwar nicht nur für Links, sondern für alles!
Dies geht aber nur mit Klassen, da man das Objekt im Style-Tag ansprechen muss:

Code:

<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;}</style>

Damit wir jetzt das Mouse-over des divs "bsp2" ansprechen, ergänzen wir den Style-Tag mit:

Code:

.bsp2:hover{}

:hover zeigt uns an, dass wir das Mouse-over gestalten möchten:

Code:

<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;} .bsp12:hover{color:black; background-color: white}</style>

Positionierung
So, an sich könnten wir jetzt schon eine eigene RPG-Postvorlage erstellen.
Doch was ist, wenn ich ein Bild direkt neben dem Text haben möchte?



Obwohl wir das Bild neben den Text gesetzt haben, sitzt er nicht rechts neben dem Text, sondern darunter.
Dies können wir mithilfe von der float (Fließ)-Eigenschaft ändern.
Dabei gibt es: float: left und float: right (Entweder sitzt das Element links oder rechts)
Dies bewirkt, dass wir mehrere Elemente, die sonst untereinander sitzen, nebeneinander platzieren können:

Code:

<div class="bsp141"><img src="https://i.servimg.com/u/f95/18/82/12/58/platzh10.png" style="float: right" />Hier ist Text, der direkt neben dem Bild stehen soll und sich an den Text anpasst, bzw. sich der Text am Bild anpasst.</div>
<style>.bsp141 {width: 300px; color: white; background-color: black;}</style>

Wichtig ist hierbei, dass das Bild vor dem Text stehen muss, andernfalls funktioniert es nicht richtig (ggf. ausprobieren).

Die float-Eigenschaft ist etwas seltsam und schwierig zu erklären am Besten, ihr probiert es selbst mal aus!

Bild als Hintergrund
Statt einer background-color, können wir auch ein background-image setzen. Dafür müssen wir in den CSS-Teil.
Das Einfügen ist auch wieder etwas anders, aber nicht schwer:

Code:

<style>.bspname {background-color:url('BILDLINK')}</style>

Außerdem können wir dem Bild sagen (falls es sehr groß ist), es soll nur genauso groß sein, wie der Inhalt des Elements:

Code:

<style>.bspname {background-color:url('BILDLINK'); background-size: 100%}</style>

weitere Kleinigkeiten
Hier mal eine kleine Übersicht von Sachen, die man mittels CSS einstellen kann:

Name	Beschreibung	Kommantar/Beispiel
color: FARBE	Schriftfarbe	mittels 6-stelligen Hex-Code (#XXXXXX) rgb(ROTANTEIL, GRÜNANTEIL, BLAUANTEIL) (von 0 bis 255) rgba(ROT, GRÜN, BLAU, SICHTBARKEIT) Farbname (Hier eine Liste aller Farbnamen)
font-size: ANGABE	Schriftgröße	XXpx (Pixelhöhe) XX% (Prozent von Elternelement) X.Yem (das X,Y-fache von der Standard-Schriftgröße)
font-family: SCHRIFTART	Schriftart/-style	serif: Serif-Schriftart Sans-Serif: serifenlos Schriftart (Hier eine Liste aller Schriftarten) eigene Schriftart von Google-Fonts einfach vor Postvorlage posten
font-style:	Schrift-'Style'	italic normal
text-decoration:	Schrift-Dekorationen	overline underline line-through none
font-variant:	Schriftvariante	Small-Caps all-small-caps normal
text-align	Textausrichtung	left, center, right
text-shadow: Xpx Ypx Zpx FARBE	Textschatten	X: Verschiebung auf X-Achse (Horizontale) Y: Verschiebung auf Y-Achse (Vertikale) Z: Reichweite des Schattens
box-shadow: Xpx Ypx Zpx FARBE	Box-Schatten	siehe oben
margin:	Außenabstand	in Pixel oder %-Angabe auch einzeln definierbar: margin-right; margin-eft; margin-top: margin-bottom Am Besten selbst informieren
padding	Innenabstand	siehe oben
border: Xpx ART FARBE	Rahmen	Xpx: Pixelstärke ART: Rahmen-Art: solid, dotted, groove einfach mal ausprobieren auch hier: border-top, border-right, etc. mgl.
border-radius: Xpx	Ecken-radius	0px: eckige Ecken 10px: rundere Ecken Auch Prozent und em-Angabe mgl. (einfach ausprobieren)
background-color	Hintergrundfarbe	Farbwahl wie bei color
background-position:	Hintergrundposition (bei Bild)	right, left, center, top-center, etc

Falls ihr noch etwas braucht oder so, einfach melden!

Diesmal habe ich keine konkrete Aufgabe...
Aber versucht euch mal an eure erste Postvorlage!
Bei Fragen bin ich jederzeit da.
Viel Spaß!

Die nächste Stunde wird erst in einer Woche sein, damit ihr genug Zeit habt.
Ich würde nächste Stunde auch nur ein paar Beispiel-Vorlagen durchgehen und Fragen beantworten.