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.
Aufgabe 4 – Übung
Aufgabe 5 – Styles & Farben in Html
Übung: Ab-Hmtl-Styles&Colors
_____________________________________________________
Aufgabe 4 – Weitere Übungen in Html
Öffne nachfolgende Seite w3schools. Hier findest Du alle möglichen Befehle um eine Html-Seite aufzubauen und auch einen Editor https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro, um diese zu testen. Erstelle nun im Editor eine Html-Seite (mit beliebigen Inhalt) mit Überschriften (Headings) und Absätzen(Paragraphs). Kopiere dann den fertigen html-Code in eine Worddokument (im Html-Format) speichere sie in Teams/Aufgaben.
Aufgabe 5 – Erstellen einer ersten html-Seite
Deine Aufgabe ist es eine eigene html-Seite zu erstellen. Welche Elemente darin vorkommen sollten findest Du hier:
Aufgabe 6 – Erstellen von html-Seiten
Zunächst wollen wir noch einige Html-Befehle ausprobieren. Öffne dazu Deine letzte Html-Datei (index.html) und ergänze sie um die nachstehenden Dinge. Erstelle auch eine weitere html-Seite auf die Du dann von der Home-Seite springen kannst.
Welche Elemente Deine Seiten enthalten sollten findest Du hier, ebenso wie die Befehle funktionieren:
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/befehle-html/
Speichere Deine Dateien in Teams
Aufgabe 7 – Die eigene Seite online stellen
Account bei Santesson ….
Nachdem Du nun eine erste Seite erstellt hast und bereits Dir bei einem WebProvider eine Domain erstellt und auch Workspace zur Verfügung hast, soll dies nun für alle sichtbar online gestellt werden.
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 8 – Erstellen von html-Seiten – Fortsetzung
Erweitere Deine Html-Seiten nun um die Befehle, die auf der nachfolgenden Seite aufgeführt und erläutert sind.
http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/befehle-html/
Speichere Deine Dateien in Teams / Stelle sie online falls möglich!
_______________________________________________________________
Aufgabe 9 – Erste Ergebnisse
Am 11.12 wollen wir die Ergebnisse präsentieren.
Stelle dazu Deine Seiten online!!
Aufgabe 10:
Erstellen einer Homepage mit einem CMS
Aufgabe 10a
- 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 10b
- 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