# Servus! Mit diesem Wort will ich mein erstes Tutorial zum Thema HTML und CSS anfangen. Wie ihr bereits am Titel dieses Posts erahnen könnt werde ich in diesem Post nur die Grundlagen der sogenannten Auszeichnungssprache HTML behandeln. Heute werden wir also "lernen" wie HTML aufgebaut ist warum und wofür man es braucht und wo es eingesetzt wird. Also viel Spaß bei meinem ersten und soweit ich das evaluieren konnte auch allerersten deutschem HTML-Tutorial auf dieser Plattform. Ich habe eine Art Serie geplant. Das heißt, dass in regelmäßigen Abständen neue Tutorials erscheinen werden. In den ersten Teilen werde ich eine einfache Webseite aufbauen und CSS einbinden. Dann zeige ich in den fortgeschritteneren Parts komplexere Dinge wie Drop-Down-Menüs, VU-Meter (Abbildung 1.1 & 1.2) und so weiter.

![Bild_vu.PNG](https://steemitimages.com/DQmUsA4KfScDuxBYaHGCitGd8RUfHpB8BUrT91R9Y2mR25z/Bild_vu.PNG) Abbildung 1.1

![Bild_vu2.PNG](https://steemitimages.com/DQmW38CXvLZwjY6JRPppnWArC3SedPFiQpRetCZMEQkhy26/Bild_vu2.PNG) Abbildung 1.2

Also ihr seht schon es wird mit der Zeit immer spannender ;-). In diesem Sinne - Lasst die Spiele beginnen: ## 1. Was ist HTML ? HTML ist eine Auszeichnungssprache. Wichtig ist hierbei nur, dass es sich auch wenn Laien das meistens sagen, nicht um eine Programmiersprache handelt. Jeder der sich einigermaßen auskennt wird alle die behaupten es handle sich um eine Programmiersprache köpfen, vierteilen und in Stücke schneiden nur um dann die Überreste zu verbrennen. (In dem vorherigen Satz wurden einige Inhalte überspitzt dargestellt) Wer also nicht als ein Haufen Asche in der Landschaft enden will sollte das tunlichst unterlassen. Aber was bedeutet Auszeichnungssprache eigentlich? Wenn ihr jetzt eine Seite in eurem Browser aufruft sendet dieser sozusagen eine Anfrage an den Server, auf dem die angefragte Webseite läuft. Der besagte Server sendet daraufhin den HTML-Code dieser Seite zu euch zurück. Der Browser ist dann so frei und wandelt diesen Code einfach so in die eigentliche Seite um. HTML ist also kurz gesagt also nur dafür da eine Webseite darzustellen. Es kann also keine "Entscheidungen treffen" oder seinen Inhalt an bestimmte Faktoren anpassen, so wie es eine Programmiersprache tun würde. ## 2. Wie ist HTML aufgebaut? ![Bild_web.PNG](https://steemitimages.com/DQmayZ6L7MRstQSgsHAKh2PCmTdbt7Dah3R4wCGMy6pP37J/Bild_web.PNG) Abbildung 2.1 Bitte beachtet, dass ich alle Tags ohne die notwendigen Klammern "<>" schreibe, da Steemit sie sonst als wirkliche Tags erkennt und nicht mehr anzeigt. Diese müsst ihr einfach später beim programmieren hinzufügen (siehe Abbildung 2.1 & 2.2). HTML besteht aus sogenannten Tags. Beispiele für solche Tags wären **head**, **body** oder **html**. Wie ihr auf dem oberen Bild seht muss auch fast jeder Tag wieder geschlossen werden. Das wird mit einem "/" gemacht (z.B. **head** öffnet den Head-Teil und **/head** schließt ihn wieder). Nun zu dem Grundgerüst einer Seite: Eine Seite fängt immer mit dem Tag **html** an und hört wieder mit **/html** auf. Alles was außerhalb der beiden steht wird vom Browser nicht berücksichtigt. Nun folg der schon angesprochene Head-Teil. In diesem steht alles drin, was nicht auf der Seite später zu sehen sein soll. Beispiel wäre hier de Titel der Seite, welcher oben im Tab-Fenster angezeigt wird und der Verweise auf CSS oder Javascript Dateien. Dann folgt der wahrscheinlich wichtigste Teil: Der body, also auf deutsch der Körper der Seite. Dort ist der gesamte Inhalt der Seite "verwahrt". Das absolute Grundgerüst jeder Seite sieht also am Ende so aus: ![Bild_leerTemp.PNG](https://steemitimages.com/DQmVEGHinxsgfrn4ENgnPyg5y7tNzujw5snUwh15P2gjBXj/Bild_leerTemp.PNG) Abbildung 2.2 Nun da ihr jetzt wisst wie das Grundgerüst von HTML aussieht will ich euch nicht überfordern und an dieser Stelle einen Schlussstrich für den ersten Teil ziehen. Lasst mir in den Kommentaren unbedingt Feedback da, was ihr gut bzw. nicht so gut fandet, damit ich eure Rückmeldungen im nächsten Teil gleich umsetzen kann. Also wenn ihr mich unterstützen wollt lasst doch gerne einen Kommentar oder einen Upvote da :) Lasst es mich auch gerne wissen, wenn ihr eine Möglichkeit gefunden habt HTML Tags anzuzeigen