Επανάληψη
- Visual Studio Code > προβλήματα με την εγκατάσταση του live server
- Διευκρινήσεις για την άσκηση
media (video, audio)
- διαφορές:
- url σελίδας
- url video με το <a>
- url video με χρήση <video src=””>
- iframe
- Όταν χρησιμοποιούμε το audio, χρειάζεται να βάλουμε το attribute controls για να εμφανιστεί κάτι στην οθόνη
- διαφορές:
Νέα ύλη
Global Attributes
https://www.w3schools.com/tags/ref_standardattributes.asp
-
- title: επιπλέον πληροφορίες για κάθε element
- hidden: <element hidden> αποκρύπτει ένα element. Συνήθως χρησιμοποιείται με javascript.
- style: για inline css. Το αποφεύγουμε. Μόνο για δοκιμές.
<p style="color: greenyellow;background-color:darkred;">Lorem </p>
Βάζω ακόμη 2 παραγράφους. Τι θα πρέπει να κάνω αν πρέπει να έχουν την ίδια μορφοποίηση;
Αντί να αντιγράψω το inline style (φανταστείτε μετά να κάνω δοκιμές και να το αλλάζω παντού ) δημιουργώ internal style
-
- 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
Χρώματα
- https://www.w3schools.com/html/html_colors.asp
- rgb και rgba
- hex
- hsl και hsla
- Να δειχθεί και ο color picker της google
- https://whocanuse.com/ για τον έλεγχο της σωστής χρήσης χρωμάτων! (εξαιρετικό!)
Να δημιουργηθεί αρχείο colors.html. Να δοκιμαστούν τα χρώματα σε διαδοχικά h1 π.χ.
<h1 style="background-color:rgb(255,0,0) ;">RGB 255, 0, 0</h1>
HTTP vs HTTPS
- Τι είναι το http και το https;
Απορίες στην html
- Μαθήματα 1-5
- Η CSS μας καλεί! Συνεχίζουμε το μάθημα στο: Εισαγωγή στη CSS