Lernjournal von 12.05.22
A9 Layout einer Website
Eiene Website ist im Grundaufbau immer gleich. Das Grundgerüst wird aus bestimmten HTML Elementen wie z.B. <div></div> aufgebaut. Diese HTML Elemente haben keine direkte Auswirkung auf die Funktion oder Gestaltung einer Website. Sie können allerdings später mithilfe von CSS dazu verwendet werden, um die Website einfach zu gestalten.
Grundaufbau einer Website:
--------------------------------------------------------------------------------------|
| |
| 1. |
| |
|--------------------------------------------------------------------------------------
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| 3 | | 4 | | 2 |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|---------------| |------------------------------------------------- |----------------|
| 5 |
---------------------------------------------------------------------------------------
- In der Regel beginnt eine Website immer mit einem Header. In diesem befindet sich die Top Navigation. Dadurch kann der User immer schnell zwischen den einzelnen Unterkapiteln in einer Website hin- und herspringen. Im HTML Code wird der Header einer Website mit dem Element
<header></header>abgegrenzt. - Der 2. Punkt beinhaltet die Navigationsbar. Mithilfe der Navigationsbar kann sich der User leicht auf der aktuellen Seite bewegen. In den meisten Fällen befindet sich die Navigationsbar am rechten Rand der Website. Die Navigationsbar selber wird mit den Tags
<nav></nav>abgegrenzt. - Manchmal trifft man auf der gegenüberligenden Seite des Navigationsmenüs einen weiteren Bereich an. Dieser wird mit den Tags
<aside></aside>markiert. Der Bereich kann dazu verwendet werden, um weitere Informationen anzuzeigen, welche einen Zusammenhang zu den Informationen im<main></main>haben. - Der zentrale Bereich einer Website ist der Main Bereich. In diesem befinden sich die wichtigsten Informationen, also der eigentliche Content der Website. Er wird mit dem Tag
<main></main>gekenzeichnet. - Der letzte Bereich ist der Footer. In diesem Bereich sind meistens Links zu finden, welche weitere Informationen zu den Themen Copyright, Impressum, Api, usw. beinhalten.
Weitere HTML Tags
<article></article>Kann dazu verwendet werden, um einen einzelnen Artikel einer Website zu markieren. Er kommt zum Beispiel dann zum Einsatz, wenn man in einem Shop die einzelnen Produkte voneinander trennen möchte. Allso wenn eine klare Abgrenzung zwischen den einzelnen Elementen erwünscht ist.<section>begrenzt eine einzelne Sektion in einer Website. Es ist good practice, dass die Sektion mit einem Titel (h1-h6) anfängt.<address>grenzt Informationen über eine Person ab. Das kann z.B. der Autor eines Artikels<article></article>oder auch Informationen über den Websiteneigentümer sein.<div>Ist der default Tag, um einzelne Elemente voneinander abzugrenzen. Er kommt eigentlich dann zum Einsatz, wenn es sich beim Abschnitt um einen Teil handelt, der zu keinem der oberen 3 genannten Elementen passt.
A6 Validation von HTML/CSS
Für die Entwicklung von HTML ist W3C (World Wide Web Consortium) zuständig. Dieses Consortium ist es, welches vorgibt, wie ein HTML Code formatiert werden muss. Da Suchmaschinen wie Google unter anderem beim Ranking einer Website auch darauf achten, ob HTML Code richtig formatiert ist, ist es wichtig, diesen validieren zu lassen. HTML Code kann mit Hilfe von einer Browserextension, VSC-Extension oder auch auf der Offiziellen W3C Website validiert werden. Beim Validiertvorgang überprüft der Validator, ob alle HTML Tags an richtiger Stelle platziert sind und ob good practises eingehalten wurden.
A12 Unterschied absoluter und relativen Path
Links oder auch der Speicherort von Bildern wird in HTML über Paths angegeben. Dabei gibt es 2 Typen von Paths, die absoluten und die relativer Paths. Der absolute Path führt immer vom Root Verzeichnis aus zur Ressource. Der relative Path hingegen führt vom aktuellen Verzeichnis hin zur Ressource. Im Falle eines Linux Verzeichnisses, würde das in etwa so aussehen. Wir haben ein Ressource, welche unter /home/user/data/ abgespeichert ist und wir befinden uns aktuell im home Verzeichnis, also unter /home/user/. Im Falle eines absoluten Paths, müsste man nun den ganzen Path /home/user/data angeben, um an die Ressource zu kommen. Wenn man aber nun einen relativen Path nehmen würde, musste man nur den Path vom Home Verzeichnis aus angeben ./data/.
Vorteile von relativen Paths
Relative Paths haben einen grossen Vorteil im Gegensatz zu absoluten Paths. Der Vorteil liegt darin, dass sobald sich die Ordnerstruktur vor dem relativen Path abändert, man keine Änderungen am relativen Path vornehmen muss. Vor allem im Falle einer Website hat das grosse Vorteile. Ein absoluter Path wäre dann z.B. www.example.com/ressources/bild.jpg. Dieser funktioniert problemlos, solange es die Ressource gibt. Nun wird aber entschieden die Top-Level Domain auf .site zu ändern. Im Falle eines relativen Paths (/resources/bild.jpg) würde das keine Rolle spielen, da sich dieser nicht verändern würde. Wenn man aber einen absoluten Path eingebaut hat, müsste man diesen überall im HTML File ändern.
Reflexion
Ich denke, dass ich alle Themen welche ich behandelt habe gut verstanden habe. Bei den Arbeiten an den B-Kompetenzen habe ich etwas viel Zeit mit einer Kompetenz verloren, bei der ich zuerst gedacht habe, dass mehr gefordert wurde also nur ein simples HTML File mit dem Grundaufbau. Ich habe mir deshalt vorgenmmen nächste Woche zuerst einmal die Auftragsbeschreibung genau durchlesen Wwerbe, befor ich mit dem Auftrag beginne.