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. Das selbe gilt für alle Sprachen die man verwendet, doch das alles würde hier den Rahmen sprengen und deshalb bleiben wir in diesem Tutorial bei HTML und CSS.
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.
0 <!DOCTYPE html> 1 <html> 2 <head> 3 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. Doch leider nennt heute sich jeder Webdesigner oder auch Programmierer und mit Halbwissen werden Falsche Informationen verbreitet, was den Markt auch kaputt macht. Man sollte sich heute fragen von wem man diese Information bekommt und hinterfragen ob diese Person in diesem Bereich qualifiziert ist.
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.
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.
0 .wrap { 1 width: 500px; 2 height: 300px; 3 margin: 0 auto; 4 background-color: green; 5 } 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 vielen Dateien erstellst wird es in deinem HTML Dokument soviel werden das man den Überblick verliert. Jedoch sollte man nur für kleine Webseiten die nie geändert werden und wenige Dokumente beinhalten Statisch erstellt werden. Sonst sollte man Dynamische Seiten mit z.B. PHP erstellen damit diese generiert werden, aber dazu später in einem anderen Tutorial noch mehr.
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.
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 Editor
HTML Text und Bild zentrieren
Hintergrundbild
CSS Tutorial
Wenn dir dieser Artikel gefallen hat würde ich mich über einen Follow auf eines oder mehreren Sozialen Netzwerke freuen. Links zum teilen findest du weiter unten für diesen Artikel so wie das Kommentarfeld.
Anzeige