HTML: 4o μάθημα

Επανάληψη

• Δημιουργία αρχείου test.html, εικόνες, p, lorem, strong, i,
  • <q>  για αναφορά σε λόγια τρίτου [βάζει εισαγωγικά]
  • <abbr> for Abbreviations [συντομογραφία]
  • <cite> [αναφορά έργου π.χ. πίνακα, ποιήματος κλπ. Δεν το βάζουμε για τον δημιουργό]
  • CTRL+/ για μετατροπή ενός ολόκληρου element σε σχόλιο
• inline style παραδείγματα
• Ερωτηματολόγιο για το λειτουργικό σύστημα https://strawpoll.com/polls
• Ενημέρωση για το μάθημα της Δευτέρας

Ύλη

• Τι είναι το http και το https;
  • • https://www.cloudflare.com/learning/ssl/why-is-http-not-secure/
    • https://el.wikipedia.org/wiki/SSL
• Δημιουργία φακέλου 4rdLesson
• για αλλαγή γραμμής <br> και για κενά (space ή διάστημα) γράφουμε &nbsp;
• αναφορά στο div και στο span
• https://www.w3schools.com/html/html_links.asp
  • Σχετικά και απόλυτα urls
  • Να γίνει παράδειγμα σε νέο αρχείο html
  • Να γίνει παράδειγμα με εικόνα
  • περισσότερα για τις τιμές του attribute target εδώ.

• Ερωτηματολόγιο για την υπολογιστική συσκευή (ΗΥ, tablet, κινητό) https://strawpoll.com/polls/
• https://www.w3schools.com/html/html_images.asp
  • να αναφερθούν θα είδη εικόνων για web (jpg, png, gif)
  • ενημέρωση για το νέο πρότυπο εικόνας webp (https://developers.google.com/speed/webp)
  • ενημέρωση για το πρότυπο εικόνας svg (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)

Πίνακες

• table, tr, td, th, thead, tbody, tfoot, scope, colspan, text,
  style=”font-size: 120%;”, style=”text-align: center;”

  OXI για δημιουργία στηλών ή μορφοποίηση εμφάνισης. Μόνο για την εμφάνιση δεδομένων σε κελιά (όπως στα υπολογιστικά φύλλα).

  https://www.w3schools.com/html/html_tables.asp

  https://www.w3schools.com/html/html_table_headers.asp

  https://www.w3schools.com/html/html_table_colspan_rowspan.asp

ΑΣΚΗΣΗ: Να προστεθεί και 3η στήλη για τον Μάρτιο. Να γίνουν οι απαραίτητες προσθήκες και διορθώσεις.

Λίστες

Να δημιουργηθεί αρχείο lists.html

• https://www.w3schools.com/html/html_lists.asp
• https://www.w3schools.com/html/html_lists_unordered.asp
• https://www.w3schools.com/html/html_lists_ordered.asp

Χρώματα

• 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>

Favicon

• https://www.favicon.cc/ με το οποίο μπορείτε να δημιουργήσετε online ένα κλασσικό favicon
• https://realfavicongenerator.net/ δημιουργία favicon για πληθώρα συσκευών και εφαρμογών από μια εικόνα. Έχει αρκετές πληροφορίες και προσφέρει έλεγχο συμβατότητας.
• https://www.w3schools.com/html/html_favicon.asp
• Αποθηκεύονται και στους σελιδοδείκτες. Βοηθούν στην γρήγορη επιλογή ανάμεσα σε ανοικτά tabs και στη λίστα με τα bookmarks (σελιδοδείκτες).