1 Ergebnis für name gefunden

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!

LEER

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.