Επανάληψη
Visual Studio Code:
- εγκαταστήστε το “live server” extension
- VScode settings
- Files: Auto Save -> after delay
- Files: Auto Save Delay -> 5008
Σωστή επιλογή input type (σημαντικό!)
- form > fieldset > legend
- Built-in form validation στην HTML5
media (video, audio)
- διαφορές:
- url σελίδας
- url video με το <a>
- url video με χρήση <video src=””>
- iframe
- Όταν χρησιμοποιούμε το audio, χρειάζεται να βάλουμε το attribute controls για να εμφανιστεί κάτι στην οθόνη
nav
object, embed
Ερωτήσεις για την άσκηση
- iframe για google maps
- πρέπει να αντιγράψουμε το μενού σε όλες τις σελίδες
Νέα ύλη
Global Attributes
https://www.w3schools.com/tags/ref_standardattributes.asp
-
- title: επιπλέον πληροφορίες για κάθε element
- hidden: <element hidden> αποκρύπτει ένα element. Συνήθως χρησιμοποιείται με javascript.
- style: για inline css. Το αποφεύγουμε. Μόνο για δοκιμές.
- class: κλάση αντικειμένων για CSS (*).
- id: Για ξεχωριστή αναφορά σε ένα και μόνο element (*). Προσοχή γιατί πρέπει να είναι μοναδικό και να αφορά μόνο ένα συγκεκριμένο element. Αν χρησιμοποιηθεί και άλλη φορά μπορεί και να δουλέψει αλλά μπορεί και να δημιουργήσει πρόβλημα. Προτιμάμε τη χρήση class.
- data-*: απλή αναφορά ότι χρησιμοποιείται για την αποθήκευση τιμών π.χ. <body data-analyticsID=”sdf123xcv789″> ή <h1 data-category=”PLL 3d printers”> σε κάποιο element και μετά να τις χρησιμοποιήσω με javascript.
Τα class, style, id θα τα χρησιμοποιήσουμε στη CSS στη συνέχεια.
Άρα είναι τα attributes που συνδέουν την html με την css.
Σχεδίαση
- Θέλει πολύ εμπειρία. Ωστόσο όλοι (ανεξαιρέτως…!) ξεκίνησαν από το επίπεδο του αρχαρίου!
- Όλα τα μεγάλα sites amazon, facebook, instagram, ebay, aliexpress, wikipedia κλπ έχουν εξαιρετικά καλή/λειτουργική σχεδίαση. Πολλά πράγματα τα κάνει ο χρήσης εύκολα, χωρίς πολλή σκέψη => άρα είναι καλοσχεδιασμένα!
- Όλα εξελίσσονται π.χ.
- τα dark themes είναι πλέον παντού, σε εφαρμογές, θέματα κινητών, σελίδες κλπ). Γιατί;
- το παράδειγμα της πλήρης οθόνης του youtube που πλέον με τη ροδέλα αποκαλύπτει τα σχόλια (πριν δεν γινόταν…)
- λιγότερα κλικς, μεγαλύτερη ευκολία, λιγότερη σκέψη, περισσότερες αγορές
- σύνδεση με συσκευές δραστηριοτήτων (π.χ. εμφάνιση διαφημίσεων σχετικών με το ιστορικό αναζήτησης μετά από προπόνηση όπου εμφανίζεται καλύτερη ψυχολογία αγορών κλπ )
- Η CSS είναι πλέον αρκετά τεκμηριωμένο και ώριμο εργαλείο σχεδίασης
- Γρήγορη (απλό κείμενο)
- Μπορεί να γίνει πολύπλοκη
- Παράγει εντυπωσιακά αποτελέσματα
- Ίδια html με διαφορετικό style.css μπορεί να είναι κάτι εντελώς διαφορετικό το οποίο όμως έχει το ίδιο περιεχόμενο (http://www.csszengarden.com/ και περισσότερες πληροφορίες για την ιστοσελίδα στο https://en.wikipedia.org/wiki/CSS_Zen_Garden
Μια ματιά στα προηγούμενα μαθήματα html
- Μαθήματα 1-7
- Η CSS μας καλεί! Συνεχίζουμε το μάθημα στο: Εισαγωγή στη CSS
