HTML eifach gemacht
- JN Codes
- 17. Apr. 2020
- 2 Min. Lesezeit
Hallo Freunde, herzlich willkommen zu einem neuen Tutorial von JN Codes. Abonniere doch unseren Kanal auf YouTube für mehr Tutorials oder abonniere unseren Newsletter. Und falls euch dieses Tutorial gefällt, lasst doch auch ein Like da. Also lasst uns starten.
Heute sprechen wir über HTML. Doch was ist das genau? Ich würde dir empfehlen das Video trotzdem zu schauen, da wir dort alles auf Powerpoint erklärt haben.
HTML steht für "Hyper Text Markup Language" und wird gebraucht, um eine Webseite zu erstellen. Doch um eine Webseite erstellen zu können, muss man auch noch CSS und eventuell PHP oder Java Script beherrschen. In einem späteren Video werde ich euch auch ein Erklärungsvideo zu CSS machen. Wollt ihr zu PHP auch ein Video? Schreibt es in die Kommentare.
Jetzt aber zurück zu HTML. Im HTML-Code schreibt man immer mit Tags (< und >). Hier siehst du wie man das anwendet:
<p>Beispieltext</p>Hier ist eine Auflistu mit den wichtigsten HTML-Befehlen:
<p>: Text
<h1>-<h6>: Überschrift
<div>: Abschnitt
<img>: Bild
<video>: Video
<head>, <body>, <html>, <title>
Wenn du normalen Text schreiben möchtest, kannst du p benutzen. Wenn du aber einen Text mit Abschnitten machen möchtest kannst du ein respektive mehrere "p" in einem "div" benutzen. Für Bilder braucht man «img» respektive «video». Wenn du einen Link auf der Seite machen möchtest, brauchst du das a täg. Und für eine Überschrift brauchst du h1, h2, h3, h4, h5 oder h6, wobei h1 die grösste und h6 die kleinste Überschrift ist. Auf die anderen Tägs komme ich gleich zu sprechen.
Hier seht ihr, wie ein HTML-File aufgebaut ist:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>Damit der Editor weiss, welche Programmiersprache wir verwenden wollen, müssen wir !DOCTYPE html schreiben. Danach brauchen wir ein html täg, um unser Dokument zu «eröffnen». Dann wird das Programm in zwei Teile eingeteilt, nämlich in «head» und «body».
Im head steht alles, was im Hintergrund passiert und die Einstellungen, welche vorgenommen werden sollen. Ausserdem steht auch der komplette «Design-Code» im head. Wie gesagt, zu CSS kommen wir in einem anderen Video. Im muss man einige Einstellungen angeben, welche aber nicht so wichtig sind, da man sie mit einer schnellen Funktion im Texteditor einfügen kann.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>Im body steht der ganze Code. Hier ist er beispielhaft erklärt.
<body>
<div>
<p>asdf</p>
<img src="#" alt="">
</div>
</body>So, das war’s auch schon mit dem Tutorial von heute. Ich hoffe, dass es euch gefallen hat und dass wir uns im nächsten Tutorial wieder sehen werden. Tschüss!
Kommentare