HTML und CSS lernen| Online-Kurse

HTML und CSS online lernen tutorials und online-kurseHTML und CSS lernen | Online-Kurse 

HTML bildet die Grundlage des World Wide Webs, ohne HTML wĂŒrde es also diese Webseite hier nicht geben ; )

Dieser Artikel gibt dir grundlegende Infomationen zu HTML und CSS und hilft dir die ZusammenhÀnge zwischen HTML und CSS besser zu verstehen.

Wenn du schon weißt was HTML und CSS ist oder einfach direkt durchstarten möchtest, kannst du hier zu der Tutorial-Liste springen🚀:


Unterschied zwischen HTML und CSS 

 

HTMLđŸ—ïž

HTML verleiht dem Inhalt einer Webseite Struktur und ermöglicht es Inhalte anzuordnen.

HTML oder auch Hypertext Markup Language genannt, ist eine Auszeichnungsprache.

Hypertext Markup Language Bedeutung:

Hypertext: Sind Dokumente im Internet, die durch Links miteinander verbunden sind.

Markup: Bedeutet ĂŒbersetzt „Textauszeichnung“ und funktioniert mithilfe von sogenannten Tags (mehr dazu weiter unten).

Language: Im Unterschied zu einer Programmiersprache enthÀlt HTML keine Kontrollstrukturen,
Variablen oder Befehle fĂŒr Berechnungen. Wenn du also mit Entwicklern zusammen arbeitest oder deine Freunde beindrucken möchstest solltest du dir merken, dass HTML keine Programmiersprache, sondern eine Auszeichnungsprache ist.

 

Grundlegender Aufbau einer HTML-Datei:

HTML Dokument aufbau, html head body html

CSSđŸ–Œïž

CSS hingegen beschÀftigt sich mit der Gestaltung und der Darstellung von Inhalten.

CSS auch Cascading Style Sheets genannt ermöglicht es den Inhalt einer Webseite von der Gestaltung zu trennen, was die Erstellung von Webseiten um einiges erleichtert.

Einfache CSS-Datei:

CSS Datei


HTML-Elemente 

 

HTML Tags

HTML verwendet sogenannte Tags <h1> hallo </h1> um Text auszuzeichnen. Dem Text „hallo“ wĂŒrde hier zum Beispiel eine große Überschrift durch die HTML-Tags <h1></h1> zugewiesen werden.

Du kannst dir also vereinfacht gesagt vorstellen, dass man in dem Beispiel mittels HTML einen Bereich markiert der eine große Überschrift sein soll, der Browser erkennt dann die Markierung und zeigt dem Nutzer eine große Überschrift an.

Struktur von HTML-Elementen

HTML-Elemente enthalten meist einen Start-Tag und einen End-Tag.

<Anfangs-Tag> Inhalt </End-Tag>

Es gibt auch Elemente die kein schließenden End-Tag benötigen wie zum Beispiel <img>.

In dem Start-Tag können Attribute wie zum Beispiel CSS Klassen oder auch Verweise stehen. Keine Sorge, das musst du noch nicht alles verstehen wichtig ist, dass du den groben Aufbau eines HTML-Elements mittels Start-Tag und End-Tag verstanden hast : )

HTML-Element Aufbau Beispiel: HTML-Element Aufbau mit Start-Tag und End-Tag

 


Was ist CSS?

 

Cascading Style Sheets (CSS) ist eine Formatierungsprache, die Stilregeln fĂŒr die Darstellung von HTML-Elementen enthĂ€lt.

Mittels CSS kann also die Hintergrundfarbe, die Schriftart, SchriftgrĂ¶ĂŸe, Hover-Effekte und vieles mehr angepasst werden.

So sieht eine CSS Stilregel aus, die die Schriftart der großen Überschriften (h1) auf Arial einstellt:

CSS Stilregel Beispiel aufbau mit Selektor


WofĂŒr braucht man CSS?

 

So sÀhe das Ergebnis einer einfachen HTML-Datei ohne CSS aus: HTML Dokument html lernen

 

So sieht es dann mit CSS aus, immer noch nicht schön aber es sollte klar sein wofĂŒr man CSS braucht 😀

HTML und CSS lernen warum css

 

 

HTML & CSS online lernen| Tutorial Übersicht 

 

HTML und CSS online zu lernen ist ganz einfach, am besten eignen sich dafĂŒr Video oder Online-Tutorials bei denen du gleichzeitig mitmachen kannst. Hier ist eine Übersicht von HTML und CSS Tutorials.

 

Freecodecamp:

Ist eine Plattform zum Coden lernen, alle Kurse sind kostenlos verfĂŒgbar. Auf der Plattform bekommst du Aufgaben, die du im eingebauten Editor lösen musst.  Der Kurs Responsive Web Design bietet sich an um HTML und CSS zu lernen. Wenn du nicht mehr weiter weißt, kannst du auf „get help“ klicken und dann ein ErklĂ€rvideo schauen oder im Forum nach einer Lösung suchen.

Freecodecamp Screenshot

KursĂŒbersicht
Kursprache: Englisch
Zertifikate:  Ja
Preis:  Kostenlos

 

Udemy der ultimative HTML5 und CSS3 Komplettkurs*: 

Udemy bietet ĂŒber 100.000 Online-Kursen zu den unterschiedlichsten Themen an. 

Ich habe mal einen Udemy Kurs herausgesucht der auf mich einen ganz guten Eindruck gemacht hat, selbst getestet habe ich diesen jedoch nicht.

Udemy html css kurs

KursĂŒbersicht
Kursprache: Deutsch
Zertifikate:  Ja
Preis:  16,99 €

 

HTML  und CSS YouTube Tutorials von NEW – Vadim

In seiner YouTube Playlist mit 12 Videos stellt NEW-Vadim die Grundlagen von HTML vor. Auf seinem Kanal sind auch noch weiter Videos zu CSS und JavaScript zu finden. 

HTML und CSS YouTube Tutorial

KursĂŒbersicht
Kursprache: Deutsch
Zertifikate: Nein
Preis: Kostenlos

Preisangaben können abweichen(Stand 23.03.2021)

Weiter Kurse folgen : )

 

Weitere Webseiten die HTML und CSS erklÀren:

 

W3schools ist eine englischsprachige Website die viele schriftliche coding Tutorial anbietet.

SELFHTML ist eine Website mit unzÀhligen schriftlichen HTML und CSS Tutorials.

PlanetHTML gibt dir schriftliche Anleitungen um HTML und CSS zu lernen.

HTML-einfach beitet schriftliche Tutorials um HTML und CSS online zu lernen.

 


HTML und CSS Cheatsheet📜

 

Ein Cheatsheet ist eine Art Spickzettel und beinhaltet in unserem Fall alle wichtigen HTML und CSS Befehle und Elemente auf einen Blick:

HTML Cheatsheet: Hier ist der Link zu einem HTML Cheatsheet PDF von hostinger.com.

CSS Cheatsheet:  Hier ist der Link zu einem CSS Cheatsheet, auf der Webseite sind auch noch andere Cheatsheets zu finden.

 

Wenn du noch weitere Online-Kurse kennst, dann teile sie gerne in den Kommentaren. Share den Beitrag mit Freunden und Kollegen, und helfe diesem kleinen Blog mehr Leser zu bekommen ; )

Hier findest du noch weitere kostenlose E-Learning-Plattformen .

 

Gesicht TimBeitrag erstellt von Tim. 

*Affiliate Links

Bewerte hier den Beitrag !