WFH – Webdesign-Aufgaben-1

Grundbegriffe

Begrifflichkeiten rund um das Thema World-Wide-Web & Webdesign

nännchenAufgabeAufgabe 1

Recherchiere und erstelle eine Powerpoint-Präsentation
  1. Wie funktioniert das Internet?
  2. Was ist Webdesign und was gehört alles dazu?
  3. Was brauche ich, um eine Homepage zu entwickeln und sie zu veröffentlichen?

Lösungshinweise:

Folgende Begriffe sollten dabei erläutert werden:

  • Homepage
  • Webbrowser
  • 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

infoInfo

Wie funktioniert das alles?

nännchenAufgabeAufgabe 2

  • 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.

nännchenAufgabeAufgabe 3

  • 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.

nännchenAufgabeAufgabe 4

Einfache Html-Befehle

HTML.svgAufbau eines Html-Dokuments

 

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Aufgabe 4a

Recherchiere unter Verwendung der unterstehenden Links und beantworte die folgenden Fragen und speichere Deine Antworten in einer Word-Datei mit dem Namen Ab4a-DeinName.

  1. Wie ist ein Html-Dokument aufgebaut, d.h. aus welchen Elementen besteht jede Html-Seite?
  2. Was bedeutet <!DOCTYPE html>?
  3. Was bedeutet <html>?
  4. Welche Art von Informationen stehen im Bereich zwischen <head> und </head>?
  5. Welche Art von Informationen stehen im Bereich zwischen <body> und </body>?
  6. Welche Art von Element ist <h1>, <h2>, <h3>? Was bewirkt es, wenn  <h1> TEXT </h2> zwischen den Tags Text steht?
  7. Welche Art von Element ist <p> ?

info

Speichere Deine Worddatei im PDF-Format in Teams/Aufgaben.

Aufgabe 4b – Ü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:

htmlhttp://kerstin-froehlig.bplaced.net/index.html

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:

infohttp://bkovertretung.bplaced.net/wordpress/wfh-webdesign/befehle-html/

Speichere Deine Dateien  in Teams 

Aufgabe 7 – Die eigene Seite online stellen

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. 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.
infohttp://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!!

sieger

 

Aufgabe 10:
Erstellen einer Homepage mit einem CMS

CMSCMS – Content-Mangement-Systeme

Details s.

http://bkovertretung.bplaced.net/wordpress/wfh-webdesign/content-management-systeme/

______________________________________________________________

#WFHD12

K. Fröhlig