Einbinden externer css-Stile mit folgendem Befehl: <link rel="stylesheet" href="dateinamevonmeinemstil.css">
Die wichtigsten CSS-Selektoren:
Der Klassenselektor spricht alle Elemente einer bestimmten Klasse im Elementbaum an .warnung { background: red; } /* Alle Elemente der Klasse warnung erhalten einen roten Hintergrund. */
Beachte: Um Elemente zu selektieren, die mehreren Klassen angehören, muss man .klassenname1.klassenname2 ohne Leerzeichen notieren.
Der Typselektor spricht alle Elemente eines bestimmten Typs im Elementbaum an. p { font-size: 1.5em; } /* Jeder Textabsatz der Seite erhält eine Schriftgröße von 1.5em. */
Der ID-Selektor spricht das Element einer bestimmten ID im Elementbaum an. #autor { font-weight: bold; } /* Die Schrift des Elements mit der ID autor wird fett dargestellt. */
Der Universalselektor spricht jedes Element im Elementbaum an * { margin: 1em } /* Jedes Element der Seite erhält einen Außenabstand von 1em. */
1px "Pixel": Die Einheit px wurde definiert um klein, aber noch sichtbar zu sein. Eine horizontale, 1px breite Linie wird vom Bildschirm mit scharfen Kanten (ohne Anti-Aliasing) dargestellt werden. Daher eignet sie sich z.B. für die Angabe von border-Dicken.
1em "Breite eines großen M": Wird oft benutzt, um Abstände oder Schriftgrößen anzugeben
100% "relativer, prozentualer Wert": Wenn man angeben will, dass ein Abstand oder Schriftgröße doppelt so groß sein soll wie die aktuell benutzte, so verwendet man die Angabe 200%.
Grundlagen zum Flex-Layout
Flexlayout beim "Elternelement" einschalten: display: flex;
C) Aufhübschen des Uhrzeitrechners von Leon Wimmel
29.08.2023
Wir üben noch einmal den Grundaufbau einer Webseite bzw. einer Website (Webseite und Website bedeuten nicht das gleiche! Wo liegt der Unterschied?)
Wir versuchen heute, eine kleine Website nachzubauen. Ich habe dabei (ziemlich willkürlich) eine Vorlage im Netz herausgesucht: https://aussichtaufwelt.de/usa-blog/
Auf der verlinkten Seite erzählt ein Paar von ihrer USA-Reise.
Aufgabe: Kopiere die oben verlinkte (Teil-)website. Aber: Es dürfen nur Texte und Bilder kopiert werden - der HTML-Teil der Website muss komplett selbstgeschrieben werden! (Die Webseitennavigation ganz oben und die Kommentarfunktion ganz unten etc. lassen wir aus)
• Erstelle (mit unserer bekannten Webseitenvorlage) zunächst eine Kopie der "Startseite" mit Links auf die 6 Unterseiten. Beschränke dich zunächst nur auf den Text und funktionierende Links. Bilder und andere Stile kommen später.
• Erstelle die 6 Unterseiten (wieder nur mit Text und ggf. Links bzw. dem "Zurück zur Übersicht"-Link)
• Formatiere die Texte mit Hilfe folgender Tags: <br> <b> <i> <ol> <ul> <li> <hr> und <table> <th> <tr> <td>
• Füge Bilder mit dem <img> Tag ein
• Für schnelle Webdesigner:
• Wie erzielt man die grau unterlegten Hinweisboxen?
• Wie ändert man die Standard-Schriftart?
• Wie bekommt man kleineren Text (z.B. unter die Bilder) hin?
• Wie bekommt man die restlichen Design-Features hin?
08.08.2023
Hausaufgabe zum nächsten mal: (also zum 15.08.2023)
Lesen: https://wiki.selfhtml.org/wiki/Grundlagen/Entstehung_des_Internet#Die_60er_-_Das_ARPA-Net
Darin die Kapitel
• Die 60er - Das ARPA-Net
• Die 70er - Wissenschaftliche Einrichtungen
• 1993 - Das World Wide Web (WWW)
• Die 90er - Die Browserkriege
• Das iPhone - die mobile Revolution
• Big Data und die Cloud
1. Sitzung
• Begrüßung, Kursinhalt, zu meiner Person, Bewertung
• Alles erlaubt, aber keine Gewalt/Sex (Bilder/Namen), für die ich mich rechtfertigen müsste, wenn die Schulleitung mal reinkommt
• Essen und Trinken, eigenen USB-Stick mitbringen
• Fragen an die SuS: Wer hat Erfahrungen/Kontakt gemacht? Eltern etc. im Web-Job?
• Einordnung des Themenumfangs: Webdesign ist ein Mix aus Kunst und mindestens 50% IT (so werde ich das hier im PJK jedenfalls unterbringen). Dort, wo ich - im künstlerischen Bereich - weniger Expertise habe, werden wir selbst Kriterien festlegen.
• Zielsetzung: eher "Schreiner" als "IKEA"
Zitate:
„Design ist Kunst in der zweiten Potenz. Man muss die Ästhetik mit Zweckerfüllung multiplizieren. Damit ist es der Dimension der Kunst enthoben. Kunst betreibt Ästhetik um der Ästhetik willen. Sie ist eindimensional.“ Otl Aicher, Gestalter, aus „Die Welt als Entwurf“, Ernst & Sohn, 1991
„It took me a few seconds to draw it, but it took me 34 years to learn how to draw it in a few seconds.“ Paula Scher, Designerin
„Design setzt Inhalt voraus. Design ohne Inhalt ist Dekoration.“ Jeffrey Zeldman, Webdesigner, 2008
„Design is a relationship between form and content.“ Paul Rand, Grafikdesigner (Quelle: designersreviewofbooks.com)
„Design should never say ‚Look at me.‘ It should always say ‚Look at this.“ David Craib, Designer
Design ist ursprünglich die äußerliche Form- und Farbgestaltung eines Objekts, beinhaltet aber heute eine Vielzahl von weiteren Aspekten [...]. Insbesondere umfasst es auch die Auseinandersetzung des Designers mit der technischen Funktion eines Objekts sowie mit dessen Interaktion mit einem Benutzer. Wikipedia
Übung: Text gemeinsam formulieren: Aufgabe von Webdesign (Unterschiede zum Printmedium, responsives Webdesign)
Technische Grundlagen
MC-Test: (Ohne Einsammeln, direkte Auswertung!)
Kurzdemonstration:
Frage 0: Paris ist ....
A) Eine Stadt in Europa
B) Die Hauptstadt Frankreichs
C) Eine Stadt in Deutschland
Es sind 0,1 oder mehrere oder alle Antworten korrekt. Ich frage später bei jeder einzelnen Antwort, wer die angekreuzt hat, und wer nicht
Frage 1: Folgende Programme sind Webbrowser:
A) Google
B) Firefox
C) Microsoft Edge
D) Microsoft Windows
E) Linux
F) Apple Safari
G) Instagram
H) HTTP
Frage 2: Ein typisches Handyfoto hat heutzutage grob etwa folgende Dateigröße
A) 3 MB/s
B) 3 MB
C) 3 KB
D) 3 GB
E) 3 TB
F) 3000 KB
Frage 3: Welche der folgende Dateitypen sind für Bilddateien gedacht und auch direkt innerhalb von Webseiten darstellbar?
A) PDF
B) DOC
C) JPG
D) HTML
E) PNG
F) PIC
Frage 4: Welche der folgenden Erklärungen sind korrekt:
A) HTML ist eine Markup-Sprache, mit der man Texte für's Web sinnvoll formatieren kann
B) HTTP ist ein Protokoll, also ein Ablaufregelwerk dafür, wie Webseiten (aber auch andere Daten) über das Internet übertragen werden
C) CSS ist eine Stylesheet-Sprache, mit der man Webseiten gestalten und layouten kann
D) JavaScript ist eine Programmiersprache, die im Browser ausgeführt werden kann, um Webseiteninhalte dynamischer zu gestalten
E) Während Fotos oft in einem Rasterformat abgespeichert werden, liegen einzelne Buchstaben in der Regel in einem Vektorformat vor.
Erster Arbeitsauftrag:
• Trash-Webseite aus Word heraus und Untersuchung des Quelltextes Gemeinsam: Text formulieren: Unterschied "Word-Datei" und "Textdatei". Einheit Byte.
• Untersuchung des Quelltextes von Google oder Plusplanet, Copy Quelltext von Plusplanet in eine eigene HTML-Datei (CSS fehlt, kann aber eingebunden werden)
• Modifizierung einer ersten Webseite mit Bootstrap (columns ändern) bootstrapTest.zip