Webseite coden- katzenwebseite – wie macht man eine webseite?

Eine kleine homepage zu erstellen, kannst du mit vielen Techniken machen. Häufig genutzt werden sogenannte CMS-Systeme, um eine Webseite zu entwickeln. Zum Beispiel Drupal, Typo 3, Joomla und natürlich weitest verbreitet WordPress. Alles sind Systeme, die du nutzen kannst, um eine Webseite zu machen.

Vorteile: Du benötigst hier keinerlei großen Programmierkenntnisse.

Nachteil: Willst du eben etwas individuelles und willst lernen, wie man Zeile für Zeile den Code aufbauen kann, dann bist du hier auf jeden Fall richtig. Es kann sein, dass es anfänglich etwas mühsamer ist und dein Lern- und Zeitaufwand dich in Code einzuarbeiten dir es vielleicht anfangs etwas schwer macht, aber langfristig macht es sich bezahlt, weil du lernst dich im Code zu bewegen und in Sekundenschnelle Anpassungen vornehmen kannst, wie du es willst und brauchst. Das ist sehr cool und kann dir später natürlich auch im Berufsleben weiterhelfen, wenn du spezifische Programmierkenntnisse hast, auch wenn es vielleicht erst mal nur Grundlagen sind.

Wie sind viele moderne Webseiten eigentlich aufgebaut?

Wenn die Webseite in klassischem Code geschrieben ist, wie wir hier das machen mit der Katzen-Webseite, dann gibt es 3 Techniken, die häufigst genutzt werden.

a) HTML – Das ist eine Markup-Sprache, für die Struktur einer Webseite – HTML ist keine Programmiersprache, sondern eine Markup-Sprache.

b) CSS – Das ist eine Stylesheet-Sprache. Damit bestimmen wir auf unserer Homepage, wie soll der Hintergrund aussehen, wo soll das Bild hin, oben, unten, rechts links. Alles was mit Style und Layout zu tun hat, das ist CSS. CSS ist die Abkürzung für Cascading-Style-Sheet.

c) java-script – Damit kannst du Funkionen schreiben. Zum Beispiel du klickst auf einen Button und es wird dir zum Beispiel ein Rabatt ausgerechnet etc. Java-Script ist für alles was sich im Hintergrund bewegt, verändert, berechnet werden soll. Java-Script ist für die Dynamic einer Webseite verantwortlich. Auch die Drag and Drop-Technik, wenn du mit der Maus zum Beispiel mit gedrückter Maustaste auf einer Webseite etwas von A nach B ziehst, zum Beispiel in einem Puzzle, auch da läuft im Hintergrund Java-Script. Eine Webseite kannst du auch bauen ohne java-Script. Das geht auch. Java-Script ist wohl meist verbreitet und beinahe jede moderne Webseite arbeitet mit java-Script.

Anmerkung: Im Text werden sehr gut erklärte youtube-Videos verlinkt aus dem Netz, über die einzelnen Techniken. Wenn du Zeit hast, schau dir die Techniken genau an. Je besser du Zusammenhänge, Konzepte und Techniken kannst, umso mehr macht es Spaß mit Code zu arbeiten.

Größter Fehler

Es ist wichtig, wenn du eine Webseite entwickeln möchtest, dass du vorher unbedingt alles durchplanst. Ein sehr großer Fehler ist, einfach loszulegen. Schulhof-Programmierung hat dazu ein 2 Stunden-Video ins Netz gestellt, wenn du zum Beispiel mit mehreren Leuten eine Webseite coden möchtest, was die einzelnen Schritte sind. Du findest das Video hier. ( 2 Stunden – Video)

Wenn du es etwas kürzer haben möchtest. Es ist wichtig, dass du ein sogenanntes Wireframe machst. Das heißt, du zeichnest grob auf, wie soll deine Webseite aussehen? Welche Links soll sie haben, wie soll sie gestaltet sein? – Welche Videos sollen rein usw… Auch die Farben kannst du dir schon in einer RGB-Farbtabelle auswählen, denn du willst ja sicherlich dass alles cool designed ist oder? Farbtabelle

Wie erstelle ich ein Wireframe?

Wenn du kein Plan hast, wie man das macht so kannst du es einfach in Excel oder in open-office oder es gibt auch sogenannte Wireframe-Programme, wo du deine Mockups bauen kannst. Mockups sind kleine Bilder, wie deine Homepage aussehen soll. Wie immer du es machen möchtest plane es gut durch. Zur Planung kannst du auch den Mini-Social-Project-Planer nutzen. Das ist ein kleines Excel-Tool, dort kannst du sogar dein Budget planen. Hast du eine schlechte Planung oder gar keine Planung ist oftmals die Gefahr hoch, dass du endlos viel Geld und Stunden in deine homepage gesteckt hast, aber aufgrund deiner Statistik nur sehr wenige Leute deine homepage interessiert. Schlimmstenfalls floppt deine Seite, weil sie einfach kaum jemand anschaut. Häufig ist es eine schlechte Planung, eine schlecht strukturierte Navigation, wo die Leute alles suchen müssen, oder schlimmstenfalls, deine Homepage sieht aus, als ob ein Lastwagenfahrer Farbe drüber geleert hätte. Möchtest du dich dann auf so einer Webseite länger aufhalten?

Eher nicht oder?-:)

Video (wireframe)

Ein wichtiger Aspekt ist auch, wie soll deine homepage heißen? Zunächst einmal ist es so, dass du im Netz auch die Möglichkeit hast, wenn du kein Geld hast, eine kostenlose Domain zu schalten, unter der, deine Homepage eben läuft. Das Problem, diese ist meist nur sehr schwer merkbar. Diese heißt dann vielleicht zumbeispiel6767676767676767676433333.de Auch hast du bei den kostenlosen Domains natürlich nur beschränkt „Webspace“, das heißt, Funktionen, Techniken und so sind natürlich stark eingeschränkt. Willst du eine professionelle Homepage entwickeln, dann musst du dir eine Domain kaufen und schon etwas Geld investieren. Das macht man bei einem Provider, der dir alles für deine homepage liefert. ( Internet-Adresse). Wie kauft man eigentlich eine Internet-Adresse?

Video ( Video wie kauft man eine Domain? )

Wenn du zum ersten mal eine homepage machst, dann willst du sie natürlich veröffentlichen. Bitte achte unbedingt darauf, dass du diese Dinge überprüfst:

Kontakt-Adresse

Ein vollständiges Impressum

Datenschutz

Cookie

Achtest du hier nicht auf die rechtlichen Vorgaben, die es gibt, kann es zu Abmahnungen kommen und das kann teuer werden! Achte auch darauf, wenn du Bilder ins Netz stellst, dass du die Rechte an dem Bild hast. Lies dazu auch zum Thema Urheberrecht. Auch Bildrechtsverletzungen sind teuer, wenn du einfach Bilder aus dem Netz nimmst, die dir nicht gehören und du nicht die Rechte an dem Bild hast. Informiere dich vorher unbedingt genau, bevor du etwas veröffentlichst über diese Punkte!

Diese Punkte sind nur allgemeine Hinweise und abhängig von deiner individuellen Webseite . Informiere dich ggf. bei einem Anwalt, was du brauchst, oder nicht brauchst für deine Webseite.

Wir benötigen: Visual-Studio-Code und den Live-Server.

Es gibt sogenannte Quelltext-Editoren. Wir bauen die Katzen-Webseite in Visual-Studio-Code auf. Natürlich kannst du auch einen anderen Code-Editor nutzen, um Zeile für Zeile zu coden. ( z. B. Notepad ++, oder einen anderen)

Was ist der Live-Server?: Der Live-Server ist eine sogenannte Extension, also eine Erweiterung in Visual-Studio_Code. Wenn du Visual-Studio-Code runterlädtst, ist der Live-Server noch nicht aufgespielt. Mit dem Live-Server kannst du einfach gesagt, deine Homepage im Vorfeld anschauen, wie deine Katzenseite ungefähr aussehen wird. Das ist nicht nur cool, sondern macht natürlich Spaß.

Dies ist eine kleine Übung – Keep it simple

Die technische Anleitung richtet sich gezielt an Anfänger. Ziel ist es auch nicht eine komplette Webseite zu erklären, sondern wenn du die Grundstruktur hast und verstanden hast, wie man so etwas aufbaut und entwickelt, dann kannst du dich Schritt für Schritt weiter vortasten und deine Seite weiterentwickeln und üben. Eine kleine Webseite zu entwickeln ist immer eine sehr gute Code-Übung, aber natürlich auch eine Herausforderung, gerade am Anfang, wenn du vielleicht noch unsicher bist im Code schreiben.

Wir beschränken und auf HTML und CSS.

An dieser Stelle einen herzlichen Dank, an Nadine, die die Bilder von ihrer Katze gemacht hat und sie zur Verfügung gestellt hat.