Franky sitzt nachts am PC, weil er für sich eine eigene coole homepage entwickeln möchte. Er hat Visual-Studio-Code auf dem PC, dort schreibt er den Code rein. Er nutzt HTML für das Grundgerüst der Webseite und mit CSS-Code versucht er die Seite zu stylen. Normalerweise hat beinahe jede Webseite auch java-script verbaut, denn damit kannst du Funktionen schreiben, aber Franky ist noch Anfänger und mit HTML und CSS klappt es eigentlich ganz gut. Als er nach mehreren Wochen Arbeit, endlich fertig ist, schickt er seiner Freundin, die gerade in der U-Bahn sitzt den Link seiner neuen Webseite. Die Freundin geht her und klickt auf den Link mit ihrem Handy an und sie sieht die Webseite. Sie schreibt zurück: „Die Webseite sieht echt scheiße aus“ … Die Tabellen sind verschoben, und vieles wird mir auf dem Handy nicht ideal angezeigt. Franky schreibt ihr zurück: “ Bei mir auf dem PC sieht aber alles ganz cool aus“. Franky ist verzweifelt. Wie kann das sein?
Beurteile den Fall- 10 Punkte, wenn du es weißt…
Lösung
Das Problem, warum die Webseite auf Frankys PC zuhause vielleicht ganz gut aussieht aber wenn die Freundin die Webseite auf dem Handy aufruft ist folgendes. Franky hat möglicherweise nicht den Aspekt der Responsivität beachtet. Was bedeutet das? Wenn man code schreibt musst du darauf achten, dass der code responsiv ist, das heißt, die Webseite muss natürlich auch auf dem Handy, Tablet und anderen Endgeräten cool aussehen. Das geht nicht von alleine. Es gibt hier verschiedene Techniken, die das beeinflussen. Auch wäre es natürlich besser gewesen, Franky hätte zuerst umfangreich getestet, wie sieht denn die Webseite auf dem Handy, oder Tablet etc. aus. Auch gibt es spezielle Techniken, um das zu überprüfen. Um eine Webseite responsive zu beeinflussen, oder zu gestalten gibt es viele verschiedene Ansätze und Techniken. Wenn du z. B. eine Tabelle aufbaust, könntest du mit CSS-Grid arbeiten. Andere allgemeine Techniken sind CSS-Flexbox- Techniken, Man kann auch Bootstrap, Tailwind, etc nutzen, oder du arbeitest mit Media-Querys. Anleitungen findest du endlos auf youtube.
Frage 3 Webseiten-Bau
Kann man eine kleine homepage bauen, nur mit HTML-Code? – Geht das oder nicht? Begründe ganz genau, ob es funktioniert, wenn ja, warum? – Wenn nein, warum… (20 Punkte)
Lies mich : Lösung
Im Grunde genommen kannst du das schon machen, aber vielleicht maximal für ein kleines Übungsprojekt vielleicht.
HTML ist ja keine Programmiersprache, sondern eine Markupsprache. Du benötigst Visual-Studio-Code dazu, denn dort schreibst du ja deinen Code rein. Das erste was du benötigst ist natürlich der sogenannte Live-Server den du drauf spielen musst, wenn du dir Visual-Studio-Code runtergeladen hast. Der Live – Server ist sozusagen eine Extension. Eine Extension ist nichts weiter als eine Erweiterung. Mit dem Live-Server hast du dann die Möglichkeit in einer Art Browser-Vorschau deine homepage in Visual-Studio-Code anzuschauen, so dass du ungefähr siehst, was dein Code genau macht.
Zu empfehlen ist sicherlich der Live-Server von Ritwick day. Unten stehend haben wir dir noch ein Video hinzgefügt, falls das ganze neu ist für dich und du nicht weißt, wie du den Live-Server draufspielen kannst in Visual-Studio-Code.
Die Grenzen von HTML
Das Problem ist, wenn du nur HTML nutzt, und kein CSS-Code ( cascading-style-sheet), dann kannst du natürlich nur schwer deine homepage cool stylen, da du hier in der Regel CSS-Code benötigst. Css ist dafür zuständig für das Styling und Layout deiner Webseite. Du bestimmst damit, wo sollen die Bilder genau hin, wie groß sollen die Abstände zwischen den Bildern sein, oder welche Hintergrundfarbe hat meine Webseite. Das alles machst du nicht mit HTML. HTML ist nur eine Art Gerüst. Du benötigst CSS-Code.
Ein weiteres Problem das schnell aufkommen wird, ist das Problem der Responsivität. Was heißt das genau?
Wird deine homepage größer und du willst sie veröffentlichen musst du natürlich schauen, dass diese responsiv ist, das heißt, deine Freunde sind vielleicht alle mit Handy oder Tablet unterwegs. Deine homepage sollte ja hier auch cool aussehen, weil die Leute ja in der Regel fast nur noch alles mit Handy machen. Damit deine homepage auf allen Endgeräten auch cool aussieht brauchst du schnell responsive Techniken, z. B. für Tabellen, oder ähnliches, sonst kann es schnell sein, dass diese verschoben angezeigt werden, auch wenn du sie zuhause auf deinem Pc in VS_Code cool hinbekommen solltest. Responsivität funktioniert nicht von alleine. Bevor du etwas veröffentlichst, musst du alles genau testen auf Handy, Tablets etc. Es gibt auch Tools dafür. Eine Möglichkeit mit Responsivität zu arbeiten, wären Media-Querys z. B.
Viele moderne Webseiten, nutzen, folgende Kombinationen: HTML, CSS, Java-script etc… Vielfach wird noch mit Bibliotheken oder frameworks gearbeitet.