Lernjournal vom 29.04.2022

Ausgangslage

Ich habe bereits in der Vergangenheit mit HTML und CSS und ein wenig JavaScript ein kleines Projekt im Geschäft erstellt. Auch arbeite ich in den letzten Monaten im Geschäft am Backend für eine Website und kenne mich dementsprechend ziemlich gut mit dem Prinzip hinter Requests usw. aus. Ich erhoffe mir vom Modul, dass ich neue Fertigkeiten in HTML und JavaScript lerne. Auch erhoffe ich mir, dass ich einen kurzen Einblick in das Thema PHP erhalte.

Ziele:

ein sauberes Lernjournal schreiben und auch immer UpToDate halten (nicht am Ende des Modules alles nachschreiben).
Meine Kenntnisse in JavaScript auffrischen und neue dazulernen.
Das Projekt sauber durchplanen, um es dann auch sauber durchführen zu können.
Code genügend dokumentieren (Kommentare schreiben, saubere und ausführliche Dokumentation usw.).
CleanCode/korrekt formatierter Code schreiben, besonders bezüglich HTML.

1. Auftrag: Kennenlernen von HTML Tags

Ein HTML Tag ist immer in 2 eckigen Klammern geschrieben z.B. <p> . Ein HTML Tag wird anschliessend geschlossen, wenn der gleiche HTML Tag ein Slash davor stehen hat </p>. Gewissen HTML Tags, wie Bilder, müssen nicht zwingend geschlossen werden. Meistens wird er allerdings dennoch für eine bessere Lesbarkeit geschlossen.

Aufbau eines HTML Formulars

HTML Formulare unterscheiden sich in der Grundstruktur kaum. Beginnen tut das HTML Formular immer mit <!DOCTYPE html>, welches dem Browser sagt, dass es sich bei diesem Formular um ein HTML Formular handelt. Anschliessend kommt der Tag <html></html>. Dieser Tag erstreckt sich über das gesammte Dokument und zeigt, von wo bis wo es sich um ein HTML Formular handelt. Als nächstes kommen die beiden Tags <body></body> und <head></head>. Im Head stehen normalerweise Metadaten wie, das Charset, JavaScrips und CSS, welches Icon angezeigt werden soll und auch der Tag <title></title>. Mit diesem Tag wird angegeben, welcher Name oben im BrowserTap ersichtlich ist. Im Body kommt dann der Inhalt der Webseite rein.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>

</body>

</html>

Weitere HTML Tags:

<h1> </h1>H1 steht für Header 1. Es gibt verschiedene Formen von Header (h1-h6). In den meisten Fällen werden aber maximal die ersten 3-4 verwendet.
<ul></ul> und <li></li> Mit diesen beiden Tags ist man in der Lage, eine Liste zu erstellen. Dabei benutzt man den Tag <ul></ul> um die Liste einzuleiten. Mit den Tags <li></li> beschreibt man, wo ein Punkt auf der Liste anfängt, und wo einer aufhört.</br>
Beispiel:

<ul>
    <li>Erster Eintrag</li>
    <li>Zweiter Eintrag</li>
</ul>

<ol></ol> und <li></li> wie auch der Tag <ul></ul> können dazu verwendet werden, eine Liste zu erstellen. Der Unterschied zwischen <ol> und <ul> ist, dass bei <ul> ein Punkt und bei <ol> eine Zahl als Aufzählungszeichen verwendet wird.
<p></p> grenzt Paragraphen ab. Wird primär verwendet, um Textstellen voneinander zu trennen.
<b></b> markiert einen Text fett. Wird aber selten gebraucht, da man Texte normalerweise mit der Hilfe von CSS fett/kursiv macht.
<a></a> kann verwendet werden, um einen Link zu definieren. Dabei kann man einen absoluten oder auch einen reellen Pfad benutzen. Der Link wird mit href beschrieben. <a href="http://example.com">Examplewebsite</a>
 Kann verendet werden, um einen Kommentar zu schreiben, welcher vom Browser ignoriert wird.
<s></s> kann verwendet werden, um Text durchzustreichen.
<strong></strong> Kann dazu verwendet werden, um eine Textstelle besonders hervorzuheben.

Reflexion

Ich denke, dass ich diese Woche gut im Unterricht mitgekommen bin. Ich konne alle wichtigen HTML Tags noch einam Repetieren und konnte dazu auchnoch ein gutes Lernjournal erstellen.

m293-lernjournal

Made by Yanni8