How-To: HTML & CSS

Thema: How-To: HTML & CSS 11/11/15, 05:45 pm

Naoko's HTML & CSS Tutorial

Lektion 1 - Die Grundlagen

Vorwort
Guten Tag Gast, erstmal freut es mich, dass du dieses Tutorial gefunden hast :3. Hier möchte ich erklären, was HTML und CSS ist und wie man es nutzen kann. Ich erkläre hier allerdings nur die Grundlagen der Textgestaltung und übermittel euch das CSS-Wissen, welches ihr für die Erstellung eines eigenen Forums brauchen könnt. Da es allerdings ein sehr umfangreiches Thema ist, wird es in mehrere Lektionen unterteilt werden, um es übersichtlicher zu gestalten. Die einzelnen Lektionen kommen im Abstand von ca. einer Woche.
Bevor es nun allerdings weitergeht, gibt es eine kleine Regel zu beachten: Das Tutorial darf nur verlinkt und nicht kopiert werden! Das wäre dann auch schon alles, nun kann's losgehen! ^-^/

Die Grundlagen
Ein Problem wenn man mit HTML anfangen will, ist das Verstehen des Prinzips. Hat man das einmal raus ist der Rest nur noch Übung. Deswegen werde ich euch nun erklären, wie HTML grob funktioniert:
Im Allgemeinen funktioniert HTML ziemlich ähnlich wie BB-Codes. Was BB-Codes sind? Tu mir einen Gefallen und öffne dieses Thema in einem neuen Tab, gehe dort nun runter zum Eingabefeld und schreibe "Hallo". Gut, jetzt mach den Text fett.

Code:

[b]Hallo[/b]

So sollte dein Text nun aussehen, richtig? Den Code, den du genutzt hat ist ein sogenannter BB-Code. Mit diesen lassen sich Texte einfach bearbeiten, das HTML zur Textformatierung funktioniert im Grunde genau so. Du hast einen Code der den Befehl einläutet und einen, der ihn wieder beendet. Um es mal an einem praktischen Beispiel mit HTML zu erläutern: Schreibe anstatt

Code:

[b]Hallo[/b]

einmal

Code:

<b>Hallo</b>

und drück auf Vorschau! Nun sollte der Text ebenfalls fett sein und ta-da, schon kannst du deinen ersten HTML-Code! \^_^/ Du kannst auch folgende Codes so umändern:

Code:

[i][/i] zu <i></i>
[center][/center] zu <center></center>
[blockquote][/blockquote] zu <blockquote></blockquote>

Nun gut, fahren wir fort, denn ganz so einfach bleibt es leider nicht. Nun gibt es im HTML aber viel mehr Codes als bei den BB-Codes, die Möglichkeiten sind schier unbegrenzt! Würde man jeden dieser Codes nun einzelnd eröffnen und beenden wäre das ein ziemliches Wirrwarr, deswegen werden die Codes zusammengefasst. Eine solche Zusammenfassung von Codes wird mit einer Tag eingeleitet, heute erläute ich die Tag "div".
Eingeleitet wird folgendermaßen:

Code:

<div style="

Dahinter kommen nun die sogenannten Attribute, mit welchen sich die Eigenschaften des Dokuments oder der Schrift bestimmen lassen. Attribute bestehen immer aus zwei Teilen, die durch einen ":" getrennt werden. Der erste Teil ist (folgende Namen sind nicht die ofiziellen Beschreibungen, die hab ich mir ausgedacht, lel) die Attributsbeschreibung, welche angibt um welches Attribut es sich handelt, z.b. Height, Width, Color, Background-color, etc. Der zweite Teil ist die Angabe, welche die Eigenschaft angibt, meistens sind es Zahlen oder Farbencodes. Die einzelnen Attribute wrden durch ";" voneinander getrennt.
Einige grundlegende Attribute:

Selbstverständlich müsst ihr nicht alle Attribute verwenden, wichtig sind vorallem Height und Width. Wenn ihr ein Attribut nicht braucht, müsst ihr es auch nicht dau schreiben.
Solltet ihr alle gebrauchten Attribute eingesetzt haben beendet ihr die Eröffnung des Codes durch folgende Zeichen: "";>"
Nun sollte es ungefähr so aussehen:

Code:

<div style="height: auto; width: 500px; background-color: #81BEF7; color: #0B615E; font-family: Georgia; font-size: 11px;">

Dies wäre z.b. der Code für dieses Dokument. Geschlossen wird dieser Code einfach durch ein

Code:

</div>

Dazwischen könnt ihr nun euren Text schreiben.

Aufbau eines Dokuments
Jetzt wisst ihr, wie HTML funktioniert und kennt auch schon einige Befehle, also steht dem ersten eigenen Dokument doch nichts mehr im Wege! Um euch zu zeigen wie ihr euer HTML Dokument aufbauen könnt, um kein totales Chaos zu haben werden wir nun gemeinsam eine Postvorlage codieren!

Schritt 1
Zuerst bestimmen wir die allgemeinen Attribute, welche das gesamte Dokument betreffen. Das sind: width, height, background-color, color, border, font-size und font-family. Also let's beginn! Als Breite wähle ich mal 400px, weil das ein schönes Mittelding ist. Bei height wählt ihr am besten immer "auto" sonst schreibt ihr irgendwann aus dem Dokument heraus. Die Schriftfarbe und der Hintergrund sollte selbstverständlich aufeinander abgestimmt sein; ich wähle jetzt mal ein helles Rosa ([Sie müssen registriert oder eingeloggt sein, um diesen Link sehen zu können]) für den BG und einen Lila-Ton ([Sie müssen registriert oder eingeloggt sein, um diesen Link sehen zu können]) für die Schrift. Ein Border, also ein Rahmen, muss nicht sein, viele finden diese nicht schön. Wir benutzen aber trotzdem einen einfachen mit der Dicke von 1px und in Blau ([Sie müssen registriert oder eingeloggt sein, um diesen Link sehen zu können]). Bei der Schriftart entscheide ich mich für Georgia und bei der Größe für 11px.
So schauts aus:

Schritt 2
Nun kommen wir zum zweiten und letzten Schritt (ja, das waren echt verdammt viele Schritte!)
Über jeden Post müsst ihr den Namen eures Charakters setzen, da es allerdings langweilig ist, diesen einfach nur fett zu schreiben, machen wir ihn etwas besonders, Dafür nutzen wir die Attribute color, text-shadow, font-size und letter-spacing. Zuerst verändern wir etwas die Farbe, ich entscheide mich für einen Blauton ([Sie müssen registriert oder eingeloggt sein, um diesen Link sehen zu können]). Beim Schatten müssen wir 3 Zahlen angeben, probiert ein wenig herum, wofür diese stehen erkläre ich im nächsten Tutorial genauer! Ich wähle 2px 2px 2px und bei der Farbe einfach schwarz. Die normale Schriftgröße beträgt 11, deswegen wähle ich für den Namen 15px und mache dazu einen Abstand von 3px zwischen den einzelnen Buchstaben.
Nun müssen wir jedoch dafür sorgen, dass nur der Name so geschrieben ist. Wie das geht? Anstatt diese Attribute mit in das erste div zu schreiben, macht ihr einfach ein neues, in welchem ihr alle diese nennt. Dieses beendet ihr einfach hinter dem Namen. Macht euch keine Sorgen, der Browser erkennt von selber welcher Befehl geschlossen wird,
So schauts aus:

Nachwort
Soo, das wars fürs erste! Ich hoffe es hat euch gefallen c:. Beim nächsten Mal gehe ich auf das Thema Border, Schatten und Google Fonts ein, solltet ihr noch weitere Wünsche haben, schreibt sie gerne ^^. Fragen könnt ihr gerne hier im Topic stellen. Ansonsten würde ich mich darüber freuen auch einige eurer Codes begutachten zu können, also stellt sie ruhig mal rein :3.
Bis dann
~Naoko

Thema: Re: How-To: HTML & CSS 18/01/16, 09:34 am

Naoko's HTML & CSS Tutorial

Lektion 2 - Google Fonts, Border & Schatten

Vorwort
Meiner unglaublichen Intelligenz bzw. eher meinem unglaublichen Gedächnis habt ihr es zu verdanken, dass das erst so spät kommt. Hatte das Tut schon längst fertig und einfach vergessen es zu posten, ich Dummi :'D. Na ja, ich wünsche euch dennoch viel Spaß (:

Google Fonts
Kennt ihr das auch? Ihr wollt die schönste der schönsten Schriftarten für euer Dokument haben und ladet sie euch extra runter, aber, oh weh, die anderen können sie ja gar nicht sehen? Nein, gut dann könt ihr auch gehen :(.
Für alle anderen gibt es die Lösung: Google Fonts! Google Fonts lassen sich ganz einfach ins HTML einbinden und sind dann für alle sichtbar ohne installiert werden zu müssen.
Zuerst müsst ihr euch eine Schritart raussuchen, dafür geht ihr auf die Google Fonts Seite und sucht euch eine passende raus. Links könnt ihr auch etwas mit den Filtern spielen, ich bin sicher, dass ihr etwas finden werdet. Sobald ihr die perfekte Schriftart gefunden habt, geht es weiter.
Unter der Vorschau findet ihr rechts Buttons. Den mittlere der drei kleinen brauchen wir jetzt, ihr klickt drauf und gelangt zu einer neuen Seite. Dot könnt ihr zuerst einen Style aussuchen, entscheidet euch für einen und scrollt nach unten (was 2. macht weiß ich ehrlich gesagt nicht, ich habs noch nie gebraucht :'D). Unter 3. findet ihr dann den gebrauchten Code, es ist der erste der unter "Standard" dargestellt wird. Diesen kopiert ihr nun in das entsprechende HTML Dokument, entweder ganz an den Anfang oder ganz an das Ende. Danach könnt ihr die Schriftart auch schon nutzen!

Beispiel:

Border
Border an sich kennt ihr ja schon, deswegen ist dieser Teil nur eine Ergänzung zum letzten Mal :3. Ich will euch hier nur die verschiedenen Arten der Border zeigen.

Solid

Dotted

Dashed

Double (mindestens 3px Dicke)

Groove (mindestens 3px Dicke)

Ridge (mindestens 3px Dicke)

Inset

Das sind alle mir bekannten Arten, das ist aber noch nicht alles! Es ist nämlich ach möglich, jede Seite des Rahmens anders zu gestalten oder auch nur an einer Seite einen Rand zu haben. Dafür müsst ihr die einzelnen Teile einfach nur einzelnd ansprechen. Das geht mt den folgenden Codes:

Code:

border-top - oberer Rand
border-left - linker Rand
border-right - rechter Rand
border-bottom - unterer Rand

Jetzt ist nur oben ein Rand o3o

Code:

border-top: 1px #2E64FE solid

JWunderschön, nicht?

Code:

border-top: 1px #2E64FE solid; border-right: 2px yellow dotted; border-left: 1px dashed green; border-bottom: 3px solid black

Shadows
Schatten, Schatten, Schatten, yeah! So wie bei den Bodern ist auch das hier nur eine Ergänzung zum letzten Tutorial. Ich werde euch kurz erklären wofür die eoinzelnen Zahlen bei den Schatten stehen.
Die erste Zahl gibt an, um wie viel sich der Schatten waagerecht verschiebt. Bei einem positiven Wert nach rechts und bei einem negativen nach links.
4px nach rechts
4px nach links

Die zweite Zahl ist für die senkrechte Verschiebung zuständig, also wird der Schatten bei positivem Wert nach unten und bei negativem Wert nach oben verschoben.
4px nach unten
4px nach oben

Die dritte Zahl definiert den Härtegrad und den Radius des Schattens, desto kleiner die Zahl, desto härter der Schatten.
2px Schatten
8px Schatten

Nachwort
Geschafft! °^°
Das nävhste Tut sollte etwas früher kommen, falls ich nicht wieder vergesse es zu posten :'D. Wobei ich aktuell ja eh nicht so gut tippen kann, aber sobald das behoben ist, kümern wir uns um Tabellen, mein absolutes Hassthema! :'D
Bis dann :3
~Naoko

Thema: Re: How-To: HTML & CSS 04/05/16, 11:27 pm

Ich möchte mich gerne zu diesen beiden Tutorials äussern, sodass die Erstellerin - sofern sie denn mag - die Tutorials ändern kann. Schliesslich werden eventuell einige den Tutorials folgen, aber HTML & CSS danach trotzdem noch nicht verstehen.

Naoko schrieb:: Hier möchte ich erklären, was HTML und CSS ist und wie man es nutzen kann.

Das hast du nicht getan.
Um das zu präzisieren, der gesamte Teil hierzu fehlt. Würde ich nichts über HTML und CSS wissen, könnte ich zwar nach deinem Tutorial ein paar deiner Codes kopieren und ein wenig umändern, was dieses HTML und CSS Zeugs ist, wüsste ich immer noch nicht.
Das klingt jetzt eventuell etwas harsch, aber weisst du selbst eigentlich, was HTML und CSS an sich ist? Weisst du, welche HTML-Version du deinen "Schülern" beibringst? In Tutorials, die um 2015/16 geschrieben werden, sollte schon der neue HTML5 Standard verwendet werden, aber du selbst benutzt für deine Tabelle veraltete Tags wie zum Beispiel der center-Tag. Sowas führt später nur zur Frustration deiner Tutoriallesern und Personen, die sich von deinen Codes inspirieren lassen, wenn sie sehen, dass sie sich das veraltete Material beigebracht haben, dass eventuell demnächst nicht mehr unterstützt wird. Der center-Tag wird in HTML5 in der Tat nicht mehr unterstützt. HTML ist wirklich nur noch für die Struktur und CSS für die gesamte Inhaltsgestaltung zuständig. Wenigstens diese schräg markierte Aussage muss einfach enthalten sein, wenn man erklären will, was HTML und CSS denn eigentlich sind, damit der Leser wenigstens eine abstrakte Grobvorstellung hat.

Naoko schrieb:: Ich erkläre hier allerdings nur die Grundlagen der Textgestaltung und übermittel euch das CSS-Wissen, welches ihr für die Erstellung eines eigenen Forums brauchen könnt.

Bevor du die Grundlagen der Textgestaltung erklärst, müssen die Grundlagen der Inhaltsstrukturierung (Text einbegriffen) her. Und unter Grundlagen der Textgestaltung verstehe ich nicht, dass man ein Wort zwischen zwei Tags quetscht oder anstatt eines allgemeinen Beispiels einfach ein paar spezifische (und darunter noch mit veralteten Tags versehene) Codeschnippsel präsentiert. Dass HTML mit Tags funktioniert, nennt sich der Syntax von HTML, den du besser in einem allgemeinen Fall erklären solltest und dann ein/zwei Beispiele anfügst.

Naoko schrieb:: Würde man jeden dieser Codes nun einzelnd eröffnen und beenden wäre das ein ziemliches Wirrwarr, deswegen werden die Codes zusammengefasst. Eine solche Zusammenfassung von Codes wird mit einer Tag eingeleitet, heute erläute ich die Tag "div".

Und hier muss ich leider sagen, dass du das Prinzip von div-Containern nicht verstanden hast. HTML-Tags sind wirklich nicht zur Textgestaltung zuständig, weswegen es auch nicht notwendig ist, zwanzig Tags ineinander zu nesten, um ein gewisses Design zu erhalten. Was du da zwischen style="" machst und "Zusammenfassung" nennst, ist bereits CSS und nicht mehr HTML, was du aber nirgendwo für den Leser erwähnt hast. Ausserdem sollte das style=""-Attribut möglichst vermieden werden, da der gesamte Code dadurch unübersichtlicher wird. Aber warum setzt du da ein div-Tag voraus? Der div-Tag wird nur benötigt, wenn du eine Block-Elementunterteilung erzeugen willst, für einen Textelement kann auch ein span-Tag verwendet werden. Benutzt man zu viele divs, verliert man die Übersicht und hat das Phänomen "divitis" erzeugt. Etwas, das man in einem Tutorial nicht beibringen sollte, du fügst aber bereits am Ende des ersten Tutorials ein unnötiges div an und nutzt den Fakt, dass CSS alles, was danach kommt, überschreibt. Das wissen deine Leser aber nicht.

Naoko schrieb:: Bei height wählt ihr am besten immer "auto" sonst schreibt ihr irgendwann aus dem Dokument heraus.

Da gibt es auch andere Alternativen als auto. Weisst du, was "auto" bewirkt? Manchmal ist das nicht die beste Lösung.

Schlusswort:
Ich würde dich echt darum bitten, mehr auf die Grundlagen einzugehen und diese vor allem korrekt übermitteln, bevor du mit zufällig zusammengewürfelten Beispielen losstartest. Google Fonts ist ein Thema, das erst sehr viel später erklärt werden sollte. Ich hoffe, ich habe nichts anderes Wichtiges übersehen, aber bin hoffentlich auf die meisten Punkte, die mir aufgefallen sind, eingegangen. Sieh es bitte als Hilfe und nicht als Angriff an :3

Thema: Re: How-To: HTML & CSS 17/05/16, 07:35 pm

[Sie müssen registriert oder eingeloggt sein, um diesen Link sehen zu können]
Ich werde mich mal auf deine gesamte Kritik beziehen, anstatt auf einzelne Passagen.
Erstmal vorweg: Ich selber habe mir HTML und CSS beigebracht, indem ich die Codes von anderen angeschaut und "analysiert" habe, indem ich beispielsweise Zahlen verändert habe oder Dinge ganz rausgenommen habe und mir dann den Effekt angeschaut habe. Weswegen ich HTML oder CSS nie wirklich theoretisch sondern nur in der Praxis gelernt habe und dementsprechend auch nur das übermitteln kann.
Ich persönlich nutze die Codes, die ich hier zeige immer in dieser Form und hatte noch nie großartige Probleme mit diesen. Mein Ziel ist es auch nicht den Usern zu zeigen wie sie HTML für den Aufbau von Webseiten nutzen können - sondern wie sie es für Postvorlagen, Steckbriefe, etc. einsetzen um so solche Dinge für sich selber erschaffen zu können :3.

/edit: Sry btw. dass die Antwort erst so spät kommt. Ich war die letzte Woche in London o/.