Hallo Freund
Na du, bist du wieder zurück? Ich frage mich, wie es dir ohne mich ergangen ist. Ich hoffe du konntest die Themen etwas festigen und hast schon Lust auf unseren gemeinsamen Lernblog. Wir legen heute mit Web Development los und speziell mit HTML.
Wieso ich HTML lerne? Ich möchte perspektivisch DApps (Dezentrale Applikationen) programmieren, was das ist? Dazu kommen wir in einem anderen Abschnitt. Jetzt fangen wir erstmal mit den wirklichen Grundlagen der Web Entwicklung(Web Development) an.
Ja ich weiß, dass ich ein paar englische Wörter reingepackt habe. Leider lässt sich das nicht hundertprozentig in unserem Bereich vermeiden, aber ich versuche es immer zu erklären und zu übersetzen. Also kannst du dich wieder setzen und das Nudelholz wegpacken.
Hast du dir schon was leckeres zu essen oder trinken geholt? Nein? Dann aber los und bis gleich.
Was ist HTML?
HTML steht für HyperText Markup Language. Das „HyperText“ steht einfach für Texte die auf andere Seiten oder Texte verweisen (Links) und „Markup Language“ bedeutet Auszeichnungssprache, Sie gibt Text eine Struktur und Bedeutung.
Also eine große Schrift ist nicht nur einfach größer geschrieben, sondern eine Überschrift und Sie steht nicht einfach mitten im Text, sondern gibt eine Struktur vor, in dem Sie über dem kleingeschriebenen Text steht.
Wir nutzen HTML, um einer Webseite ihre Struktur zu geben. Du kannst dir vorstellen, das HTML ein Haus mit Grundrissen, Etagen und Räumen darstellt, aber ohne Farbe, Texturen oder irgendetwas mit Gestaltung. Wirklich nur das Gebäude in seiner rohen Form. Die Sachen, die unsere Wände und Räume gestalten, zu denen kommen wir später.
Grundlagen HTML
Im letzten HowTo Beitrag waren wir doch bei T-Shirt Sprüchen. Nach diesem Beitrag kannst du so tolle Sprüche mit HTML Grundlagen verstehen wie zum Beispiel <head> oder <body> Referenzen. Natürlich darf in keinem Beitrag ein trockener Witz fehlen wie z.B.: Warum sind HTML-Tags schlechte Lügner? Weil Sie immer alles „offen“ legen.
Dann fangen wir mal mit den Grundlagen an
Unser Fundament
Ein HTML Dokument bildet die Struktur für unsere Webseite, aber wie sieht diese Struktur eigentlich aus?
Erstmal haben wir ein paar Begriffe die wir klären müssen. Ich zähle Sie in einer Liste auf und dann gehen wir genauer darauf ein.
Diese Begriffe bilden unsere Grundstruktur
- <!DOCTYPE html>
- <html>
- <head>
- <body>
- <title>
Erstmal kommen wir auf diese kleinen Klammern zurück. In HTML wird alles in <> geschrieben, sogenannte Tags. In diese Tags schreiben wir eines der Schlüsselwörter rein und dann weiß der Browser, wie er unsere Struktur darstellen muss.
Hier unten habe ich ein kleines Beispiel aus meiner Entwicklungsumgebung hinzugefügt, damit du es mal in einem Editor siehst. Die Grundstruktur sollte immer so aussehen (außer der Title, da dürfen auch Dinge davor oder danach stehen), damit alles richtig dargestellt werden kann.
Das sieht für dich bestimmt richtig kryptisch und etwas verwirrend aus? Ja am Anfang ist so etwas fremd, aber du kannst wirklich stolz auf dich sein, da viele schon hier aufgegeben hätten. Aber ich weiß, dass wir das zusammen schaffen können und du gehst da nicht alleine durch. Du begleitest mich ja auf meiner Reise, also alle Probleme die wir haben, haben wir zusammen und lösen wir auch zusammen.
Wir machen das alles in kleinen Teilen, da uns die Zeit ja nicht wegrennt. Jeden Mittwoch kommen wir etwas weiter und irgendwann können wir uns kleine Projekte gegenseitig zeigen, das wäre schon cool oder?
So, jetzt erkläre ich dir erstmal was diese komischen Begriffe da oben bedeuten.
<!DOCTYPE html>
Sagt unserem Browser, welche Version ( auch Standard genannt ) er nutzen muss, damit unsere Seite richtig angezeigt wird, da verschiedene Versionen von HTML, verschieden dargestellt werden könnten. Dieser „DOCTYPE“ bedeutet HTML5, also HTML Version 5.
<html></html>
Gibt deinem Browser an, wo der HTML Code (das was wir schreiben) anfängt und endet, damit er nichts unnötiges lädt oder Fehler erzeugt, weil er etwas liest, was gar nicht für ihn gedacht war. Hier schreiben wir alles rein.
Du hast bestimmt entdeckt, dass wir auch </html> haben und da einfach ein Slash oder auch Querstricht reingeschrieben ist oder? Das heißt, „closing Tag / schließende Markierung“ also er beendet den Bereich eines Tags. Er zeigt den Anfang und das Ende an und das etwas dazwischen stehen kann z.B.: unsere ganzer Code.
Hat ein Schlüsselwort keinen „Closing Tag“, dann steht er nur für sich selbst und es kann nichts dazwischen stehen.
<head></head>
Ist der Kopfbereich, welcher nicht direkt auf der Seite angezeigt wird. Hier werden wichtige Sachen reingeschrieben in sogenannten „Meta Tags“, dass sind Zusatzinfos, die dem Browser zum Beispiel sagen welche Kodierung er nutzen sollte, Informationen über die Webseite die für eine Suchmaschine oder andere Webdienste nützlich sind oder in welcher Sprache der Inhalt ist.
Hier definieren wir auch den Namen, der oben in dem „Browser-Tab“ angezeigt wird und zwar mit <title></title>. Wir erinnern uns, das Schlüsselwort hat einen „Closing Tag“, also kann etwas dazwischen stehen und in diesem Fall stehen die Wörter aus der Referenz dazwischen:
So sieht es dann im Tab aus:
Auch können wir hier andere Dateien einbinden, aber dazu kommen wir in einem anderen Beitrag. Das war schon ganz schön viel. Da fühlt man sich ziemlich überladen, aber das ist ganz normal.
Mit der Zeit werden die Begriffe nicht mehr fremd sein und die Grundlagen helfen uns auch den Rest zu verstehen. Sei stolz auf dich, das ist der Anfang von etwas wirklich tollen und wenn du diese Reihe mitmachst, dann versteht du irgendwann wie Webseite funktionieren und diese sind ein wesentlicher Bestandteil unseres Alltags.
Wir haben es gleich geschafft, es ist nur noch ein Teil und zwar der Hauptteil.
<body></body>
Erstellt den Hauptteil unserer HTML Datei und beinhaltet später unseren ganzen angezeigten Code wie Überschriften, Texte, Tabellen, eingebundene Bilder, Formulare und vieles mehr!
Woar, wir sind durch, dass ging schneller als gedacht oder? Klopf dir auf die Schulter, denn du hast heute eine Menge gelernt. Du kannst jetzt schon eine kleine Webseite bauen, die im „Browser Tab“ den Text anzeigt, den du möchtest. Schon cool, wenn man Kontrolle über die Technik hat, oder?
Ich habe für dich noch eine kleine Übungsaufgabe. Versuche mal herauszufinden, wie du eine normale Überschrift und einen kurzen Text hinzufügst. Nächste Woche Mittwoch gibt es dann die Auflösung und wir lernen weiter. Ich erkläre dir in dem letzten Absatz noch kurz, wo du HTML schreiben kannst.
Wo kann ich das Ganze denn schreiben?
Du kannst dir kostenlos auf Visual Studio Code einen „Code Editor“ runterladen, da kannst du auch mehrere Programmier- oder Skriptsprachen schreiben, er ist sehr praktisch und kostenlos.
Nach dem du die Datei installiert hast, klickst du auf die Rechtecke auf der linken Seite:
Dann gibst du in der Suchleiste HTML ein und klickst auf der rechten Seite installieren:
Jetzt kannst du auf File / Datei klicken und einen Ordner aussuchen, in dem du deine Dateien ablegen möchtest
Danach klickst du auf das kleine Dokument und erstellst eine Datei mit dem Namen „index.html“.
Jetzt kannst du wild drauf los schreiben! Du hast heute so viel geschafft und gelernt. Das Ganze muss man jetzt erstmal mit ein bisschen Praxis und Zeit festigen, damit man sich nicht überlädt, aber wir schaffen das. Ich hoffe du hattest auch ein bisschen Spaß beim HTML lernen und bist schon auf die weiteren Sachen gespannt.
Bis zum nächsten Mal, Freund.
Der Hash des ersten Beitrags: 144ff11c5fb3516a6cc291eb99632d19b2f228ce8e5fceda0ba985c3874acad0
Der Hash dieses Beitrags: ceb6bab6b5bcd557ec2b933a6e13fd24bfcb8909efe38e1ec3167b43cc3a1ca4
Hallo Freund 😊
Ich freue mich darauf, Ihren neuen Vortrag hochzuladen zu sehen. Ich bin wirklich froh, den neuen Vortrag zu lesen. Heute habe ich das Programm entsprechend Ihrer Klasse installiert und überprüft. Ich dachte, es wäre schwierig, aber ich war so froh, dass es gut funktioniert hat. Es war großartig, Zeit zu haben, um zu überprüfen, was Sie selbst gelernt haben, während Sie auf Ihre Schreiben schauen. Wenn Sie diese Teile in der Zukunft haben, wird es mir sehr hilfreich sein, über sie zu erfahren. Vielen Dank, dass Sie immer gute Vorträge hochladen!
Vielen Dank für deinen netten Kommentar MoiMoi :]
Mich freut wirklich zu hören, dass du allem gut folgen konntest, du es nachmachen konntest und Spaß daran hattest. Falls du Ideen oder Vorschläge hast, wie es noch besser für dich/andere sein könnte, dann gib mir gerne Feedback und ich versuche es umzusetzen.