12 Kilobyte Praxis für Einsteiger

Aufgabenstellung

Ein guter Start und Einstieg ist für viele oft die Praxis. Der reine Quellcode der Simple Single Page hat keine 12 Kilobyte Quellcode. Im Paket ist das HTML und CSS Framework für eine Single-Page. Bilder, Hintergrundbilder, Farben, Formen, Menu mit Links und Positionierung sowie Ansätze bei Animation: Kurz, die ersten Meilensteine sind exemplarisch enthalten. Die Bilder sind natürlich frei verwendbar.

Auf Basis der Simple Single Page soll eine Webseite zu einem eigenen Thema erstellt werden. Das Thema kann frei gewählt werden: Musik, Video, Film, Haustiere, Kosmetik, Videospiele, Sport ... alles ist möglich

Wichtig ist dass die verwendeten Medien benutzt werden dürfen und so auch später öffentlich ausgestellt werden können. Dies ist in einem eigenen Impressum darzustellen.

Nutzerinnen und Nutzer die einfach so damit arbeiten wollen, sind herzlich dazu eingeladen aufkommende Fragen hier in die Kommentare zu schreiben.


Fakten und Ressourcen

CODEBeschreibung
NiveauEinsteiger


PackHTML und CSS Datei sowie die Bilder der sofort funktionstüchtigen Simple Single Page als gezipptes Paket.

CODE-Pack-Simple-Single-Page.zip (5.6 MiB)



Keine Bildnachweise nötig:
Lizenz Pixabay CC0 PD

header.jpg
hund0.jpg
hund1.jpg
hund2.jpg
Hund3.jpg
Hund4.jpg
Hund6.jpg
Katze0.jpg
Katze1.jpg
Katze2.jpg
Katze.jpg
nager0.jpg
nager1.jpg
nager2.jpg
nager3.jpg
nager4.jpg
nager5.jpg
vogel1.jpg
vogel2.jpg
vogel3.jpg
vogel4.jpg
Pfote.png - Seeliger Public Domain CC0
SheetPraktische Übersicht des HTML- und CSS- Quellcode der Simple Single Page. Sehr hilfreich wenn man den Quellcode bespricht und für Notizen. 2 Seiten DIN A3

CODE-Sheet-Simple-Single-Page-A3.zip (960.1 KiB)

Lernkarten

Das CODE "Hallo Welt" Lernkarten-Basispaket enthält die 100 wichtigsten HTML und HTML-Attribute sowie CSS Selektoren, CSS-Eigenschaften und Werte. Die Inhalte entsprechen dem Skript, das Format der Lernkarten bietet jedoch andere Möglichkeiten. Die Karten sind zu jeweils 10 Nutzen auf 1 DINA4 Seite angelegt und lassen sich somit gut beidseitig ausdrucken.

CODE-Lernkarten-Basis (7.1 MiB)

Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)

Try-itsViele Einzelteile ergeben in der Summe das Ganze. Hier auf der Plattform sind die Elemente der Simple Single Page in den Editoren als Try-its zum Experimentieren verfügbar.
Elemente semantisch gliedern und selektieren
Geschickt mit CSS selektieren
Design mit CSS
Text mit CSS gestalten
Inhalte verlinken
Aufbau und Inhalt des <head>
Bilder
Hintergrund-Bilder
Positions
Float und Clear
Transition
Abgabetermin15.10.2015 für 11GMTA1
16.10.2015 für 11GMTA2
Bewertung• Funktionstüchtige Webseite
• Sauber verfasster und kommentierter Quellcode
• Farbe ist stimmig
• Schrift ist stimmig und lesefreundlich
• Bildmotive sind stimmig
• Einträge im Logbuch
• Beständige und eigenverantwortliche Mitarbeit
• Impressum
Abgabetermin ist eingehalten
LogbücherLogbuch 11GMTA1
Logbuch 11GMTA2

Empfohlene Software

Diese kostenlose Open Source Software hat sich vielfach bewährt.

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.

Kommentare One thought on “Simple Single Page

  1. Florian Bagus

    Der Bereich „Lernsituation“ ist eine wunderbare Ergänzung!

    Viele Grüße

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit