HTML & CSS – Grundlagen

Grundlagen sind ja sowas von LANGWEILIG!!! Ja ernsthaft. Das sind sie meist und ich gebe euch völlig recht, aber leider kommt man machmal nicht drum herum und gerade beim coden ist es wichtig die Basics irgendwie zu wissen.

Ich halte mich aber kurz, versprochen.

Editoren

Bevor es los gehen kann, braucht ihr einen Editor in dem ihr euren Code schreiben könnt. Ein Editor ist Schreibprogramm
mit dem man Webseiten mit HTML-Code erstellen und bearbeiten kann.
In unserem Fall sind es dann keine Webseiten oder Foren sondern einfach nur kleine Codes. Aber in der Praxis und mit Übung kann man das natürlich auch.

Es gibt vermutlich duzende Editoren im Netz, kostenlose und kostenpflichtige. Natürlich könnt ihr euch den suchen, der für euch passend ist. Ich stelle euch hier mal die zwei häufigsten vor

Brackets

Brackets ist ein sehr simples und einfaches Programm, dass in vielen Dingen selbsterklärend ist. Vorteil gegenüber Notepad++ ist, dass es auch für den Mac erhältlich ist.

Bei Brackets müsst ihr zuerst eine Neue Datei (Datei –> Neu) erstellen und diese direkt speichern ( Datei –> speichern unter) ´ Gebt dem Kind einen Namen und speichert es unter EURER_NAME.HTML. Das Html am Ende ist wichtig, denn sonst speichert es nicht richtig und euch gehen die Featurs im Programm verloren.

Habt ihr die Datei richtig gespeichert ist es nämlich so, dass wenn ihr anfangt zu schreiben schlägt euch das Programm automatisch Möglichkeiten vor

und ihr könnt entweder von alleine fertig schreiben oder es einfach anklicken.

Habt ihr einen Befehlt fertig geschrieben, wird das Ende automatisch eingefügt

Und zum kontrollieren werden immer Anfang und Ende markiert sobald ihr auf eines klickt. So könnt ihr sehen ob auch alles stimmt

Es gibt noch viel mehr aber damit will ich euch erst mal nicht erschlagen. Ich selbst nutze Brackets und liebe es.

Notepad++

Nodepad++ ist ein Editor für Windows. Auch hier ist es so, dass wenn man anfängt zu schreiben, wird einem schon einiges an Vorschlägen gemacht, dass man dann auswählen kann

Anders wie bei Brackets wird das Ende nicht automatisch eingesetzt. Sondern man muss darauf achten, dass man Befehle immer wieder schließt. Das könnt ihr aber einstellen in den Einstellungen. Da ich mit dem Programm nicht arbeite müsstet ihr euch da mal einlesen. Das is aber nur ein Häkchen.

Aber genau wie bei dem anderen Editor wird der Anfang und das Ende markiert sobald man auf eines geht

Beide Editoren sind super und einfach zu nutzen. Ich würde euch empfehlen einen der beiden zu nutzen. Es gibt aber noch duzent andere Editoren die man gut nutzen kann. Ihr müsst nur den finden, der zu euch passt.

CSS und HTML

CSS, HTML WAS???? Was soll das sein? Kann man das essen? Ich fand die Begriffe am Anfang total verwirrend. Im Grunde ist es aber recht einfach

.CSS{ }

CSS ist der Teil des Codes der darüber bestimmt wie der Code aussieht.  Es ist also eurer Werkzeug für die Formatierung. Mit CSS legt man die Größe, die Farbe, die Form und die Eigenschaften wie Scrollbalken oder Hover fest.

<HTML>

HTML ist der Teil des Codes mit eurem Inhalt des Codes. Im HTML steht der Text, sind die Bilder und Links untergebracht.