Grundbegriffe
Begrifflichkeiten rund um das Thema World-Wide-Web & Webdesign
Aufgabe 1
Recherchiere und erstelle eine Powerpoint-Präsentation
- Wie funktioniert das Internet?
Erkläre dabei Schritt für Schritt was technisch passeirt, wenn ich zum Beispiel eine Internetseite aufrufe. - Was ist Webdesign und was gehört alles dazu?
- Was brauche ich, um eine Homepage zu entwickeln und sie zu veröffentlichen?
Lösungshinweise:
Folgende Begriffe sollten dabei erläutert werden:
- Homepage
- Webbrowser
- IP-Adresse
- Internetprotokoll
- HTML / HTML5
- CMS – Content-Management-Systeme
- Serverkommunikation, Web-Provider, Web-Server
- URL
- DNS (Domän-Name-Server)
- Programmiersprache/ Interpreter/ Compiler
Gerne in Partnerarbeit.
Speichere Deine Lösung in Teams unter dem Namen:
A1-DeinName.pptx
Info
Wie funktioniert das alles?
- aus der Zeitschrift Chip:
https://praxistipps.chip.de/wie-funktioniert-das-internet-das-wichtigste-einfach-erklaert_103193 - Einfach erklärt in Bildern:
https://www.geo.de/geolino/wissen/wie-funktioniert-das-internet-30167238.html (alle 10 Bilder & Texte) - mit Chatgpt:
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/einfuehrung-internet-mit-chatgpt/
Aufgabe 2
Erstelle nun ein Quiz mit Hilfe von kahoot für Deine Mitschüler. Dieses soll mindestens 10 Fragen beinhalten.
Info
https://praxistipps.chip.de/kahoot-app-quiz-erstellen-so-gehts_96491
_______________________________________________________________
Aufgabe 3
Aufbau eines Html-Dokuments & erste Befehle
Seiten im Internet sind mit der Programmiersprache (Auszeichnungssprache) Html erstellt.
Jeder dieser Seiten hat einen ganz bestimmten Aufbau.
Unter anderem ist die Verwendung von sog. Tags typisch für html.
mit <> wird der entsprechende Tag geöffnet und mit </> wird er abgeschlossen.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Recherchiere unter Verwendung der unterstehenden Links und beantworte die folgenden Fragen. Speichere Deine Antworten in einer Word-Datei mit dem Namen Ab3-DeinName.
WICHTIG: Kopiere unter jeder Aussage, die von Dir benutzte Quelle!
- Wofür steht die Abkürzung html?
- Was wird unter Quellcode (=Source-Code) verstanden?
- Was wird unter sog. Tags verstanden?
- Woran erkennt man einen öffnenden Tag und woran einen sich schließenden?
- Kann der Source-Code einer Internetseite vom Benutzer angeschaut werden, wenn ja wie?
- Wie ist ein Html-Dokument aufgebaut, d.h. aus welchen Elementen besteht jede Html-Seite?
- Was bedeutet
<!DOCTYPE html>? - Was bedeutet <html>?
- Welche Art von Informationen stehen im Bereich zwischen <head> und </head>?
- Welche Art von Informationen stehen im Bereich zwischen <body> und </body>?
- Welche Art von Element ist
<h1>,<h2>,<h3>?Wasbewirktes, wenn<h1> TEXT</h2>zwischen den Tags Text steht? - Welche Art von Element ist
<p>?
- https://www.schulhomepage.de/webdesign/html
- https://www.w3schools.com/html/html_intro.asp
- https://www.kstbb.de/informatik/html/kstbb/01/index.html
- https://www.kstbb.de/informatik/html/kstbb/01/1_1_Grundstruktur_eines_HTML-Dokuments.html
Speichere Deine Worddatei im PDF-Format in Teams/Aufgaben.
Erstellung einer eigenen Homepage in html
Alle Aufgaben: AB-Hmtl
Aufgabe 4 –
Erstellung einer Index-Datei
Wir erstellen eine html-Datei (index.html), die wir uns dann im Browser anschauen können:
AB-Übung-Html1
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/befehle-html/
Speichere Deine Datei in Teams
Aufgabe 5 – Styles & Farben in Html
Einführende Übung & Information: Ab-Hmtl-Styles&Colors
Wir legen nun Hintergrundfarben, Schriftfarben u.ä. fest:
Ab-Übnung-Hmtl
Aufgabe 6 –
Formatierung von Schriften in Html
https://www.w3schools.com/html/html_formatting.asp
Aufgabe 7
Listen & Emojis in html
AB-EmojLiHtml
Aufgabe 8
Tabellen in html
AB-Tab-html
Aufgabe 9
Bilder, Links u.ä. in html
Aufgabe 10
Styles & Layout (Frames) in html
alle Aufgaben als PDF: Ab-Übung-Hmtl
Aufgabe 11
Die eigene Seite online stellen …
Account bei Santesson ….
Dazu müssen jetzt deine erstellten Daten auf den Webserver übertragen werden. Dies geschieht mit Hilfe eines File-Transfer-Programmes, zum Beispiel FileZilla. 
Wie dies im Einzelnen funktioniert, ist hier am Beispiel von bplaced.net erklärt.
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/webprovider/
Auf Deinem eigenen Gerät kannst Du FileZilla einfach installieren und der FileTransfer zu bplaced sollte funktionieren.
Online-Stellen in der Schule
Leider klappt der File-Transferzu bplaced aus Sicherheitsgründen in der Schule nicht. Zu Hause sollte dies kein Problem sein.
Daher benutzen wir auf den Schulrechnern eine Domain & Webspace, die uns von einer Firma zu Schulzwecken zur Verfügung gestellt wird.
Am Ende der folgenden Seite ist das Vorgehen beschrieben:
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/webprovider/
Sobald Deine Seite online ist, teste sie und speichere den Link in Teams/Aufgaben.
Aufgabe 12 – Präsentation der Ergebnisse
Am xxx wollen wir die Ergebnisse präsentieren.
Stelle dazu Deine Seiten online!!
______________________________________________________
Aufgabe 13:
Erstellen einer Homepage mit einem CMS
Aufgabe 13a
- Recherchiere nach kostenlosen Webprovidern und liste diese auf.
- Stelle auch Vor- und Nachteile dieser dar.
- Dokumentiere Deine Ergebnisse in Word unter dem Name Webprovider-DeinName und speichere diese als PDF in Teams/Aufgaben.
Aufgabe 13b
- Bei der Lösung von Aufgabe 2, hast Du Dich ja bereits über mögliche Webprovider informiert. Nun ist es Deine nächste Aufgabe Dir bei dem Webprovider Deiner Wahl einen kostenlosen Account anzulegen.
- Dokumentiere dies zum Beispiel in Word mit Webprovider, Accountname & ggf. Domain.
CMS – Content-Mangement-Systeme
Details s.
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/content-management-systeme/
______________________________________________________________
Finale Aufgabe
http://bkovertretung.bplaced.net/wordpress/wfh12-webdesign/webdesign-finale-aufgabe/
___________________________________
#WFHD12