[TUT] Einführung in HTML und CSS

  • 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...

    Code
    <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:

    Code
    <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:

    Code
    <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:

    HTML
    <!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:

    HTML
    <!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:

    Glückwunsch! HTML Basics hast du nun drauf!!! Lust auf CSS? :P

    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:

    Inline CSS - Die Gestaltung erfolgt direkt im HTML Element. Dies ist jedoch nicht gerade Übersichtlich und wird daher nur sehr selten genutzt!

    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!

    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...

    Nun könnte man sagen ich möchte alle p Elemente Grün haben. Dann würde das beispielsweise so aussehen:

    Code
    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:

    Code
    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:

    Code
    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:

    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:

    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:

    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...

    8q4ZhSZ.png

    OD0sbfs.png


    Ich und Kindisch? Kommt Teddys, wir gehen!

    3 Mal editiert, zuletzt von Analritter von Salzgitter (10. April 2018 um 01:38) aus folgendem Grund: Schriftgröße, Info Text

  • Na ja. Gefällt mir im großen und ganzen nicht.

    Ich mein, wenn du schon ein > Tutorial < machst bzw. Einführung, dann auch richtig...

    Naja anstatt zu sagen das es dir nicht gefällt könntest du sagen was fehlt. So kann ich dieses dann ausbessern. Ebenfalls ist das eine Einleitung. Eine Einleitung ist so viel wie ein Anfang. Somit ist es normal das nicht alles demonstriert wird. Wenn würde ich es Komplett Kurs nennen.

    8q4ZhSZ.png

    OD0sbfs.png


    Ich und Kindisch? Kommt Teddys, wir gehen!

  • Nette Sache, doch gehört zu den Grundlagen wesentlich mehr. Dadurch, dass das Tutorial die fehlenden Grundlagen derweil nicht ergänzt, macht es das Tutorial unbrauchbar.

    Natürlich gehört mehr dazu. Das streite ich nicht ab. Jedoch soll dies eine Einstiegs Hilfe sein. Würde ich hier alles also wirklich alles demonstrieren würde ich sicherlich Probleme mit dem Zeichen Limit erhalten.

    8q4ZhSZ.png

    OD0sbfs.png


    Ich und Kindisch? Kommt Teddys, wir gehen!

  • Hallo lieber Analritter von Salzgitter !

    Mir ist aufgefallen das du krampfhaft versuchst den Entwickler zu spielen, wofür das ganze sei mal beiseite gestellt.

    Es ist wirklich äußerst freundlich zu versuchen anderen zu helfen, nur wie kann man jemandem helfen wenn man selbst nur 10% Ahnung hat? Dazu hast du auch in einem anderen Thema falsche Versprechen gemacht worauf ich hier auch nicht weiter eingehen werde, dennoch ist das Fakt - richtig?

    Nun zu deinem Tutorial, ich habe es mir mal angeschaut.

    Es ist höchstwahrscheinlich nicht nachvollziehbar für Neulinge, Gründe dafür:

    • Du erwähnst Tags dessen Funktion du nirgendswo erklärt hast.
    • Du gehst nicht auf einzelne Sachen ein, z.B warum <!DOCTYPE> kein HTML Tag ist sondern eine Deklaration ist, etc.

    Selbst wenn jemand daraus lernt, wüsste er nicht was er mit dem neuen Wissen anfangen soll, welcher Schritt der nächste ist.

    Dazu fehlen mir alle wichtigen Sachen, vor allem weil du noch speziell HTML5 erwähnst!

    • Aufzählung von ALLEN Content Models, davon bist du effektiv durchgegangen 5%.
    • Die Standard-HTML5 Struktur sieht so aus mein lieber: https://i.pinimg.com/originals/a1/3…5d75092cd0f.jpg
    • Das ist doch für Neulinge - Images? Headings? Kommentare(Commenting)? etc. <- Das gehört auf jeden Fall zu den Basics!
    • HTML5 Forms, SVG & Canvas / Erklärung von Pro / Contra.


    Ich könnte viel mehr aufzählen, das ist aber erstmal alles was ich so schlagartig kritisieren kann.

    Und ich möchte mich nochmal wiederholen, mein Beitrag ist nicht dafür um dich bloß zu stellen sondern um dir einen Denkanstoß zu geben, denn diese Zeit die du damit verschwendest Halbwissen zu verbreiten, könntest du darin investieren wirklich die Sprache zu lernen die dich interessiert.

    Tut euch selbst einen gefallen und versucht aus anderen Quellen zu lernen.

    Ich finde das hier ist einfach nur etwas zusammengewürfeltes um Eindruck zu schinden.

    Edit: Aber hey! Witzig war's schon. LUL

  • Wie ich bereits sagte: Ich kann nicht auf alles eingehen. Immerhin wäre der Thread dann viel zu lang und das meiste interessiert die ganz frischen 0. Es soll eine kleine Einführung sein und kein komplett Kurs. Ebenfalls: Das hier ist keine Website auf der ich X Beliebig viele Themen anordnen und durchsprechen kann. Wie bereits gesagt es soll den neuen etwas beim einstig helfen und kein kompletter Kurs sein.

    Edit: Aber hey! Witzig war's schon. LUL

    8q4ZhSZ.png

    OD0sbfs.png


    Ich und Kindisch? Kommt Teddys, wir gehen!

  • Nein, scherz beiseite, du solltest noch die üblichen Hexcodes und/oder die Geschichte mit &aauml, &WCF_AMPERSANDü und &WCF_AMPERSANDö einführen, sowie &WCF_AMPERSAND© und ähnliches. Du musst ab meinem Beispiel mit Copy ja nicht alles mögliche auflisten, eine Referenz reicht.

    Natürlich könnte man das ganze auch einbringen. Jedoch übernimmt ü ä ö ... das utf-8.

    Jedoch:
    &auml; -> ä

    &Auml; -> Ä

    &ouml; -> ö

    &Ouml; -> Ö

    &uuml; -> ü

    &Uuml; -> Ü

    &szlig; -> ß

    &copy; -> ©

    &sect; -> §

    EDIT: Gibt natürlich noch mehr...

    8q4ZhSZ.png

    OD0sbfs.png


    Ich und Kindisch? Kommt Teddys, wir gehen!

  • 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).

    lel, stop dis

  • omit 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.

    9ZEKwpT.png

    Eventuell meinst du ja Webpage, Website und Webseite sind nur Sprachunterschiede.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!