HTML Tutorial von Anfang an richtig beginnen

Letzte Aktualisierung : |  

HTML Tutorial - Hypertext Markup Language so wie der name bereits sagt, ist es ein Markup (Gerüst) und ohne CSS würde es auch wenig bringen. Den CSS (Cascading Style Sheets) so wie auch hier der Name bereits sagt ist es das Stylen von den HTML Elementen. Mit HTML kannst Du deine Webseite erstellen aber alleinstehend nur Statische Seiten erstellen, also wo der Inhalt nicht dynamisch getauscht wird. Um Inhalte dynamisch zu tauschen benötigst Du JavaScript für den Clientseitigen dynamischen Austausch und PHP eine Serverseitige Sprache um aus der Datenbank, Dateien etc. zu lesen und auszugeben.

Als Anfänger weiß man oft nicht wo man beginnen sollte, ich habe damals, da ich mich am Anfang nicht auskannte mit PHP begonnen. Für mich war es nicht schlecht denn ich konnte nach einer weile bereits beides Serverseitige Dynamische Seiten und auch Statische Seiten erstellen. Eines der wichtigen Punkte ist jedoch das die meisten am Anfang es falsch lernen, denn sie trennen HTML und CSS nicht. Und jetzt fragst Du dich was ist damit gemeint, also man kann CSS auch direkt im HTML Tag Element als inline-style reinschreiben, aber das sollte man nicht.

Nach dem doctype umschliesst der HTML block den rest der Elemente. Der head Bereich wird z.B. für das auslagern des CSS bzw. CSS Dateien oder auch für die JavaScript Dateien usw. genutzt.



Wie HTML Datei erstellen ?

Es gibt mehrere Wege um eine HTML Datei zu erstellen, sogar mit einem Text Editor kannst Du eine HTML Datei erstellen. Jedoch gibt es sehr gute Editoren heutzutage die den ganzen Code hervorheben und so Übersichtlicher aussehen so wie bearbeiten lassen. Ich kann dir ja mal ein paar nennen die einfach sind und auch größer sind.

 VSC von Microsoft
 NotePad++
 NetBeans von Apache

Es gibt natürlich noch viele mehr, deshalb such dir eines welches dir zusagt, in diesem HTML Tutorial habe ich dir 3 vorgeschlagen. Falls Du noch andere Programmiersprachen verwenden möchtest später dann such dir gleich ein Editor, der auch die anderen Unterstützt. So kannst Du später mit dem selben Editor weitermachen, weil wir Menschen gewöhnen uns schnell etwas an und werden es nicht so leicht wieder los :) Hier ein ganz Simples Beispiel mit charset UTF-8 damit der Titel auch mit Umlauten noch funktioniert.


// HTML CODE
     0  <!DOCTYPE html>  1  <html>  2      <head>  3          <meta charset="utf-8">  4          <title>Page Title</title>  5      </head>  6      <body>  7          <h1>Das ist eine Überschrift</h1>  8          <p>Dies ist ein Paragraph.</p>  9      </body>  10  </html> 

    Am Anfang weiß man auch nicht was man reinschreiben soll, denn man ist am lernen ;) Deshalb gibt es Text von  Lorem Ipsum welchen Du als Blindtext einsetzen kannst und es sieht auch normal aus. Wenn man später einen Auftrag hat dann weiß man auch was für Text und alles aber für die Entwicklung ist Blindtext vollkommen ausreichend.




    Was ist inline-style und warum nicht verwenden ?

    Hier als Beispiel HTML 5 welches wir mit dem doctype angeben und damit können wir auch ältere HTML Versionen verwenden. Inline-style ist es direkt in einem HTML tag ein style attribute einzusetzen und das sollte man eher vermeiden, an erster stelle wegen der Übersicht. Es ist auch für deine SEO nicht gut inline-styles zu verwenden, doch heute ist jeder Programmiere und mit Halbwissen werden Falsche Informationen verbreitet. Man sollte sich heute fragen von wem man diese Information bekommt und hinterfragen ob diese Person in diesem Bereich qualifiziert ist.


    // HTML CODE
       0  <!DOCTYPE html>  1  <html>  2      <head>  3          <title>Seiten Titel</title>  4      </head>  5      <body>  6          <div style="width: 500px; height: 300px; margin: 0 auto; background-color: green;">Grüner Hintergrund</div>  7      </body>  8  </html> 

      Hier haben wir genau das selbe Beispiel jedoch nicht als inline-style sondern im head per Style tag eingebunden und es mit einer CSS klasse versehen, die wir im div tag als class attribute angeben.


      // HTML CODE
         0  <!DOCTYPE html>  1  <html>  2      <head>  3          <title>Seiten Titel</title>  4          <style>  5              .wrap {  6                  width: 500px;  7                  height: 300px;  8                  margin: 0 auto;  9                  background-color: green;  10              }  11          </style>  12      </head>  13      <body>  14          <div class="wrap">Grüner Hintergrund</div>  15      </body>  16  </html> 

        Hier im HTML Tutorial abschnitt haben wir genau das selbe Beispiel jedoch diesmal haben wir das CSS ganz ausgelagert und in einer eigenen Datei hinterlegt. Wir binden diese mit dem link tag ein und mit dem rel attribute sagen wir das es sich um ein Stylesheet handelt so wie die source angeben wo sich die Datei befindet.


        // CSS CODE
           0  .wrap {  1      width: 500px;  2      height: 300px;  3      margin: 0 auto;  4      background-color: green;  5  } 

          // HTML CODE
             0  <!DOCTYPE html>  1  <html>  2      <head>  3          <title>Seiten Titel</title>  4          <link rel="stylesheet" src="url/zu/style.css">  5      </head>  6      <body>  7          <div class="wrap">Grüner Hintergrund</div>  8      </body>  9  </html> 

            So wir haben ein wichtigen Punkt jetzt gelernt und zwar wie wir richtig HTML von unserem CSS trennen. Denn Du wirst schnell merken wenn du deine Webseite mit



            HTML link erstellen und verlinken

            Ein HTML link wird genutzt um auf der Seite die Navigation durch die Seiten zu gewährleisten. Also die einfachste form von einer Weiterleitung per Aktion. Jedes HTML tag hat bestimmte attribute und diese können für verschieden zwecke genutzt werden. Für die SEO (Suchmaschinenoptimierung) wäre zum Beispiel wichtig das der Link auch ein Title attribute aufweist.


            // HTML CODE
               0  <!DOCTYPE html>  1  <html>  2      <head>  3          <title>Seiten Titel</title>  4          <link rel="stylesheet" src="url/to/style.css">  5      </head>  6      <body>  7          <div class="wrap">Grüner Hintergrund</div>  8          <a href="url/zur/seite1.html" title="Zur Seite">Zur Seite</a>  9      </body>  10  </html> 

              Um jetzt zwischen zwei Seiten eine Verbindung herzustellen, müsste die andere HTML Datei auf die andere verweisen.

              So das was fürs erste in diesem HTML Tutorial, wenn Du nichts verpassen möchtest und mehr insider Wissen erlangen melde dich oben beim Newsletter an. Möchtest Du etwas mehr, wie man CSS als ein Profi nutzt, Elemente und Bilder richtig platziert oder auch wie man HTML Bilder einsetzt.

               HTML Text und Bild zentrieren
               Hintergrundbild
               CSS Tutorial

              Anzeige

              Dein Kommentar

              * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
              ?

              Dieses Feld ist optional
              Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

              Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

              Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
              tnado © 2019 | Alle Rechte Vorbehalten
              In Zusammenarbeit mit Hyperly