Html ist die Standardsprache Ihres Webbrowsers und damit können grundlegende Elemente in eine Website eingebaut werden. Was brauchen wir, um html überhaupt zu programmieren?
Wir brauchen drei Dinge. Wir brauchen ein Html-Dokument, einen Editor, um dieses Html-Dokument zu bearbeiten und den Webbrowser, um die Ergebnisse unserer Arbeit zu betrachten. Ich fange jetzt auch direkt an, indem ich hier ein html-Dokument erstelle. Das mache ich hier in Windows auf einer einfachen Festplatte und sage hier ein neues Textdokument, das ich dann benennen kann, wie ich will. Ich nenne das ganze Index, was wichtig ist, dass wir diesen Punkt txt rausnehmen und sagen Punkt html also wir brauchen eine html Datei.
etzt werde ich hier wieder gefragt, ob ich diese Endung hier wirklich wieder ändern will, dieses .txt und ob ich das ändern will, ich klicke einfach auf ja und schon habe ich hier ein html-Dokument. Ich öffne das html-Dokument mit einem Rechtsklick mit diesem Programm Notepad ++, das ich Ihnen wirklich empfehlen kann, das ist ein sehr, sehr gutes Programm zum Programmieren.
Ich öffne einfach die Datei und das ist jetzt meine Datei. Was ich noch machen muss, ist natürlich diese Datei in einem Browser zu öffnen.
Ich mache das mit einem Rechtsklick und sage öffnen mit und verwende Google Chrome hier und Sie können sehen, dass die Datei geöffnet wurde, aber wir sehen noch nicht viel, weil es in uns nichts über Dokumente gibt. Schauen wir uns mal an, was man in diesem HTML-Dokument braucht, um etwas anzuzeigen. Das erste, was man immer braucht, ist ein Doctype. Der doctype ist kein html an sich, sondern ist eine Anweisung an den Browser oder ein Hinweis an den Browser, welche html-Version im Dokument folgt. Deshalb steht dieser Doctype auch immer in der ersten Zeile.
Wir programmieren mit html5, also werden wir einfach den html5-Doctype verwenden. Html5 ist übrigens die neueste Version von html und warum sollte man nicht mit der neuesten Technologie beginnen. Werfen wir also einen Blick darauf, wie der Doctype aussieht.
Ich benutze diesen kleinen Pfeil hier und sage Ausrufezeichen, dann schreibe ich alles groß doctype und dann html und schließe diesen Pfeil hier wieder. So sieht der html5-Docktype aus.
Wie ich schon sagte, sollte er immer in der ersten Zeile stehen. Dann brauchen wir einen Bereich, in dem wir unseren html-Code programmieren können und in html werden solche Bereiche immer mit sogenannten Tags angegeben. Tags bestehen immer aus einem Start- und einem Endtag und jeder einzelne Tag ist in diese beiden Pfeile unterteilt, wie man in doctype sehen kann. Dieser auf Pfeil und dieser auf Pfeil und ja genau ich denke, es wird am deutlichsten, wenn wir das Ganze so betrachten. Wie gesagt, wir brauchen erst mal den Bereich, in dem wir den html-Code schreiben können und das machen wir nicht anders, indem wir einfach sagen, wir machen einen Pfeil hier beim html und dann haben wir schon den Startbereich gesetzt und dann gehe ich zu einer neuen Zeile und ich sage Pfeil hier, das wird jetzt mein Endtag, mache einen Schrägstrich html und der Pfeil ist wieder zu, jetzt muss ich hier hin.
Geschrieben html heißt es natürlich und jetzt habe ich einen Start- und einen Endtag Zeile drei mein Starttag Zeile fünf mein Endtag. So weit, so gut, jetzt schauen wir uns mal an, wie mein Code in diesem html wieder aufgeschlüsselt werden kann. Es gibt einen had und einen body, den wir schnell einrichten. Es funktioniert eigentlich genau so wie bei html mit Tags über diesen html-Tag dann sagen wir head und backslash oder slash head also haben wir den head-Bereich definiert und einen body-Tag-Bereich also einen body-Tag body also habe ich jetzt einen start-Tag hier head hier einen end-Tag head einen start-Tag body und einen end-Tag body. Alle sind also immer während des Tages eingerichtet.
Denn was ist der Kopfbereich und der Körperbereich, da dieser Kopf- und dieser Körperbereich unterschiedliche Bereiche sind.
Der head-Bereich soll Dinge enthalten, die nicht direkt auf der Website zu sehen sind, sozusagen im Hintergrund laufen, das können verschiedene Dinge sein wie ein Titel oder eine externe Datei wie eine CSS-Datei oder eine Java-Script-Datei und im body-Bereich kommen dann wirklich Elemente, die auf meiner Website zu sehen sind. Ich denke, wir werden uns das mal ansehen. Sie können auch einfach von oben anfangen und den Titel mit einem zusätzlichen Tag definieren. Wieder ganz äquivalent, wie wir immer Pfeil-Titel und / Titel getan haben, so habe ich ein Ende Start-Tag-Titel wieder ein Ende-Tag-Titel und dazwischen kann ich jetzt den Titel in der normalen Art und Weise zu schreiben, schreiben HTML-Tutorial und damit habe ich bereits einen Titel für meine HTML-Dokument gehen Sie nun zu meinem Browser laden Sie die Seite, indem Sie einfach hier klicken, drücken Sie Enter.
Und eigentlich denkt man, es hat sich nichts geändert, aber das html-Tutorial steht hier oben. Und das ist genau dieser Titel, den wir hier eingestellt haben. Wenn ich auf der Hauptseite etwas schreiben will, in diesem ganzen Bereich hier, dann mache ich das, indem ich etwas in diesen Body-Bereich schreibe. Jetzt sage ich also, meine erste HTML-Seite, und wenn ich das in mein Dokument lade, dann wird meine erste HTML-Seite hier oben stehen. Großartig!
Jetzt ist es natürlich noch ein bisschen hier, wenn nur meine erste html-Seite hier ist, das ist jetzt sehr, sehr wenig, ich habe nur einen Text hier zur Verfügung, ich habe nur einen.Um das zu ändern, brauchen wir natürlich mehr Tage.
Um das zu ändern, brauchen wir natürlich mehr Tage. Und wie Sie sehen, ist html im Grunde nichts anderes als das Kennenlernen von html-Tags und deren Verwendung. Je mehr html-Tags du kennst, desto besser kannst du html schreiben. Schauen wir uns noch ein weiteres html-Tag an und das ist das <b>-Tag, das zeige ich euch, das ist einfach, dass ich jetzt hier wieder diesen Pfeil b-Pfeil reinschreibe und am Ende ein b und natürlich den Schrägstrich nicht vergessen.
Was macht das jetzt? Wir schauen uns die ganze Zeit an, ich lade die ganze Seite neu. Ouh und du kannst schon sehen, meine erste html meine erste html Seite ist jetzt fett geschrieben. <b> steht für nichts anderes als Bold, was übersetzt fett heißt. Ich bekomme also einen fetten Text.
Sehr schön, so kann ich Text verwenden, um Elemente zu ändern, die ich auf meiner Seite habe. Übrigens, es macht keinen Unterschied, wenn ich hier b sagen würde, eine leere Zeile, hier eine leere Zeile und dann erst meine Tags hier schreibe, das macht keinen Unterschied, siehst du, es kommt wirklich das Gleiche raus und diese Tags sind auch da, dass du immer einen Anfangsbereich und einen Endbereich hast.
Wenn ich jetzt hier nach dem b test1 und hier vor dem b test0 etwas schreibe, dann siehst du wirklich nur den Bereich, der fett geschrieben ist zwischen diesen Tags, also test0 und test1 bleiben normal. Das soll der Einstieg in dieses Tutorial gewesen sein im nächsten Tutorial schauen wir uns viele, viele weitere html-Tags an, sehen, wie wir sie verwenden und gehen etwas tiefer in die Materie ein ich denke, dass es eine sehr gute Einführung in html war man kann sagen, dass du sehr gut angefangen hast und dass du bereit bist für die nächsten Tutorials. Ansonsten kann man sich ja mal anschauen, was man damit machen kann.
