Return to HTML 5

HTML: 6o μάθημα (html > css)

Επανάληψη

  • 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

Χρώματα

Να δημιουργηθεί αρχείο colors.html. Να δοκιμαστούν τα χρώματα σε διαδοχικά h1 π.χ.

<h1 style="background-color:rgb(255,0,0) ;">RGB 255, 0, 0</h1>

HTTP vs HTTPS

Απορίες στην html

 

Permanent link to this article: https://nikmavr.sites.sch.gr/%cf%80%cf%81%ce%bf%ce%b3%cf%81%ce%b1%ce%bc%ce%bc%ce%b1%cf%84%ce%b9%cf%83%ce%bc%cf%8c%cf%82/html/html-6o-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/