HTML5 CSS

Bevor du anfangen kannst:

HTML5 CSS Kurs für Einsteiger

Dieser HTML5 CSS Kurs richtet sich in erster Linie an Einsteiger, aber auch wenn du nur etwas Auffrischen oder nachlesen willst.

Lerne wie das Grundgerüst aussehen muss, wie du Überschriften und Absätze gestaltest oder wie du Texte in Fettschrift oder Kursivschrift darstellst.

Auch wie du Links erstellst, Menüs darstellst und Bilder einfügst.

Desweiteren wirst du lernen, wie du mit CSS einfach deine Seite Designen kannst.

Dieser HTML5 CSS Kurs ist noch in Aufbau, also nicht wundern 🙂 

Sobald der Kurs fertig ist, schreibe ich es sofort auf meine Startseite.

Zuerst lade dir einen Editor deiner Wahl runter. Ich verwende am liebsten den Sublime Text 3. Editor. Welcher auch sehr zu empfehlen ist ist der Notepad++ Editor. In dieser Erklärung gehe ich vom Sublime Text Editor aus, aber im Grunde ist auch bei anderen Editoren alles an gleicher stelle zu finden.

Nach der Installation, erstellst du einen neuen Ordner und nennst ihn z.B. „HTML_CSS“ nun öffne den Editor und erstelle eine neue Datei „File – new File“ und speiche diese in deinem neuen Ordner „save As“.

Macht euch am besten zu jedem Abschnitt eine neue Datei und benennt sie dementsprechend.

Du kannst die Datei nenne wie du willst, aber es sollte für dich auch sinn machen. Wichtig ist dabei dass du am Ende „.html“ tippst, sonst ist es eine Standard „.txt“ Datei und damit kann der Browser nichts anfangen.

Nun kannst du loslegen!

Fragen, Anregungen, Rechtschreibfehler oder sogar eine bessere Beschreibung?

dann hinterlasse jetzt ein Kommentar (gaaans unten zu finden 😉 )! Ich freue mich auf deine Rückmeldung.

Neueste Kommentare

    HTML5

    Das Grundgerüst besteht immer aus

    <!DOCTYPE html>
    <html>
    <head>
        <title>Grundgerüst</title>
    </head>
    <body>
    </body>
    </html>

    Bei <!DOCTYPE html> wird dem Browser mitgeteilt, um welchen Standard es sich handelt.

    Direkt nacht <!DOCTYPE html> steht immer <html> und am Ende der Seite immer </html>.

    Im <head> stehen die Metainformationen. z.B. der Titel oder der Zeichensatz der verwendet werden soll, oder ob CSS Befehle mit übergeben werden. Dazu aber später mehr.

    Es ist wichtig einen Titel anzugeben, denn dieser wird im Browser im Reiter angezeigt und Google sucht nach diesem Titel. Daher sollte dieser immer passend zum Inhalt sein.

    Im <body> steht der eigentliche Inhalt.

    Jetzt haben wir unser Grundgerüst fertig und können uns um die Tags kümmern die es im Body so gibt. (Ich behandel nicht alle Tags, denn dann sitzen wir ewig hier 😉  Dazu gibt es viele gute Internetseiten, die euch aufschluss geben welche Tags es alles gibt. html-seminar.de , w3schools.com oder selfhtml.org )

    Am Anfang von jedem Inhalt sollte immer eine Überschrift stehen.

    Auch diese sind für Goolge sehr wichtig und das strukturiert unsere Seite.

    Dabei ist <h1> eigentlich immer Der Titel der Webseite und <h2> die Themen.

    <body>
    <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
    <h5>Überschrift 5</h5>
    <h6>Überschrift 6</h6>
    </body>
    </html>

    Wenn ihr euch eure Seite nach dem Speichern der Datei jetzt im Browser anseht fällt euch auf, dass unsere Texte etwas seltsam angezeigt werden.

    Überschriften_html_ohne_meta_charset

    Im Browser öffnen:

    Im Ordner die Datei  „Grundgerüst.html“ doppel klicken. Falls die Datei nun im Editor geöffnent wird, liegt das daran, dass der Editor als Standard gesetzt wurde. Sollte dies der Fall sein: auf „Grundgerüst.html“ rechts klicken und „Öffnen mit…“ auswählen.

    An diesem Punkt kommen wir zu <meta charset=“utf-8″>.

    Dieser meta-Tag setzt die verwendete Codierung. In unserem Fall utf-8. Hier werden Sonderzeichen direkt genutzt. Somit werden uns die Umlaute Ü Ä Ö sowie ß richtig angezeigt.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Grundgerüst</title>
    </head>

    Einmal speichern und voila:

    Wir können alles richtig lesen 😎

    Überschrift_mit_utf(

    Etwas Text bitte:

    <body>
    <h1>Webseiten Titel</h1>
    Wäre das nicht einfach, hier einen supertollen Text zu schreiben
    und der wird dann genauso wie wir ihn hier
    Tippen
    angezeigt?
    </body>
    </html>

    Natürlich könnt ihr Text ohne Vorgaben einfach in eure Datei schreiben. Allerdings übersetzt der Browser dies dann als Fließtext.

    Text_ohne_Absatz

    Aber HTML bietet uns hierfür natürlich auch Lösungen:

    Soll ein Satz mit einem Absatz geschrieben werden, gibt es <p>Text und so</p>.

    Wollen wir einen Zeilenumbruch, setzen wir nach dem Text ein <br>.

    Wollt ihr eine Trennlinie einfügen, verwendet ihr <hr>.

    <body>
    <h1>Webseiten Titel</h1>
    <p>Wäre das nicht einfach, hier einen supertollen Text zu schreiben</p>
    und der wird dann genauso wie wir ihn hier <br>
    Tippen<br>
    angezeigt?
    <hr>
    </body>
    </html>

    So sieht das ganze jetzt aus:

    Text_mit_Absatz

    Unsere Schrift soll schöner werden!

    Wie in den uns bekannten Schreibprogrammen, gibt es bei HTML auch

    Fettgedrucktes, kursiv, durchgestrichen, Kleingedruckt, Hochgestellt, Tiefgestellt und Last but not Least: Unterstrichen

    Allerdings solltet ihr die Unterstreichung vermeiden, denn Links sind in Texten unterstrichen und dies führt zu verwirrung.

    <body>
    
    <h1>Webseiten Titel</h1>
    <p>Wäre das nicht einfach, hier einen supertollen Text zu schreiben</p>
    und der wird dann genauso wie wir ihn hier <br>
    Tippen<br>
    angezeigt?
    <hr>
    <strong>Boah, bin ich Fett</strong><br>
    <em>mach dich nicht Krum</em><br>
    <del>Ich bin nicht mehr relevant</del><br>
    <small>Hier versteckt sich  meist das Wichtige</small><br>
    <sup>Ich bin oben</sup>
    <sub>Ich bin unten</sub><br>
    <ins>Bin ich ein Link, oder nicht?</ins>
    <hr>
    
    </body>

    Unser Ergebnis:

    Text_mit_Fett_kursiv_etc

    Ihr könnt natürlich auch einen Text Fett und kursiv anzeigen.

    Hier ist aber eine Goldene Regel wichtig: „first in, last out“!

    first in, last out

    Das bedeutet, der Tag, der als erstes gesetzt wird, wird als letztes geschlossen!

    <strong><em>Fett und kursiv</em></strong>

    probiert es aus 🙂 

    Eine Runde Verlinken bitte!

    Einen externen Link setzt ihr mit <a href=“www.hierIstDieAndereSeite.de“>.

    href=““ bedeutet hyper reference = Hyper(text)-Referenz also das gewünschte Verweisziel.

    Einen internen Link setzt ihr mit <a href=“Grundgerüst.html“>.

    Eine Webseite besteht ja aus mehreren Seiten, so habt ihr mindestens eine Startseite und ein Impressum. Damit ihr von der Startseite auch auf das Impressum (und umgekehrt) kommt. Gibt es die interne Verlinkung.

    Obacht! Dieser Link funktioniert so nur, wenn sich eure „Grundgerüst.html“ im selben Ordner befindet.

    Wollt ihr einen Seite öffnen die sich einen Ordner darüber befindet müsst ihr „../Grundgerüst.html“ angeben.

    „..“ bedeutet gehe einen Ordner hoch, daher wären zwei Ordner höher „../../Grundgerüst.html“.

    Wollt ihr eine Datei verlinken die sich im Ordner wieder in einem Ordner befindet ist es „/zweiterOrdner/Grundgerüst.html“.

    Die Ordner- und Dateinamen müssen genau so geschrieben werden, wie sie sich auch auf dem Computer befinden.

    Wenn ihr den Link zu google so öffnet, wird dieser in eurem jetzigen Tab geöffnet. Wollt ihr google in einem neuen Tab öffnen müsst ihr dem Link einen weiteren Parameter mitgeben. <a href=“https://www.google.de“ target=“new“>.

    <body>
    <a href="https://www.google.de">Link zu Goolge</a>
    <a href="Grundgerüst.html">Link zu unserer ersten Seite</a>
    <a href="https://www.google.de" target="new">Öffnet in neuem Tab</a>
    </body>

    Den <a> Tag könnt ihr auch verwenden um von der Seite oben, nach unten zu springen!

    <h1>Webseiten Titel</h1>
    <a id="oben">
    <a href="#unten">Abwärts</a>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
    takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita 
    kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <a href="#oben">Aufwärts</a>
    <a id="unten">
    </body>

    Damit dies in meinem Beispiel funktioniert, macht den Browser einfach mal ganz klein, oder wiederholt den <p>Lorem….</p> Tag mit Copy-Paste.

    Link_hoch_runter

    Mail senden mit einem Link

    Listen sind toll!

    Listen erstellen ist in HTML sehr einfach. Es gibt zwei verschiedene.  Die Sortierte Liste und dieUnsortierte Liste. Die Listeneinträge selbst werden mit <li> deklariert und danach wieder mit </li> abgeschlossen.

    Die Sortierte Liste

    Wenn wir der Liste keine Parameter mit geben ist jeder Eintrag mit 1. , 2. , 3. … Nummeriert. Wenn wir jetzt <ol type=“A“> Angeben, werden die Listen mit A. , B. , C. …. Deklariert.

    <ol>
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ol>
    
    <ol type="A">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ol>
    
    <ol type="a">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ol>

    Sortierte Liste

    Desweiteren können wir auch sagen, ab welcher Zahl angefangen werden soll. Zudem können wir mitten in der Liste die Aufzählung bei einer anderen Zahl nochmal ändern. Wenn ihr jetzt an <ol start=“5″ reversed=“reversed“> anhängt, ist die Aufzählung rückwärts! Diese Kombinationen gehen natürlich auch mit <ol type=“A“> und <ol type=“a“>!

    <ol start="5">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ol>
    <ol start="5">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li value="1">Menüeintrag 3</li>
    <li>Menüeintrag 4</li>
    <li>Menüeintrag 5</li>
    </ol>
    <ol start="5" reversed="reversed">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ol>

    Ergebnis:

    Listen ol reversedListen ol type und reversed

     

     

     

    Unsortierte Liste

    Wenn wir der Liste keine Parameter mit geben ist jeder Eintrag mit einem ausgefüllten Kreis deklariert. Die unsortierte Liste wird mit <ul> </ul> eingeleitet. Wie bei der Sortierten Liste, können wir hier auch <ul type=“square“> oder <ul type=“circle“> das Vorzeichen ändern

    <ul>
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ul>
    <ul type="square">
    <li>Menüeintrag 1</li>
    <li>Menüeintrag 2</li>
    <li>Menüeintrag 3</li>
    </ul>

    Unsortierte Liste

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.