Return to HTML 5

HTML: 5o μάθημα (block, inline, media, audio, video, iframe για youtube/maps, nav, 1η Άσκηση)

Επανάληψη

  • Semantics
  • Φόρμες εισόδου στοιχείων <forms>
    • η σημασία για την σωστή επιλογή του κατάλληλου τύπου για τις κινητές συσκευές
    • UI και UX
  • να γίνει επίδειξη της ιστοσελίδας: https://html-master.w3spaces.com/forms.html
    • με chrome και firefox στο pc
    • με chrome και firefox σε κινητό
    • τι λείπει σχετικά με τα υποχρεωτικά πεδία;
  • η σημασία για την σωστή επιλογή του κατάλληλου τύπου για τις κινητές συσκευές
  • UI και UX

Με τον παρακάτω κώδικα μπορώ να στοιχίσω γρήγορα τα πεδία κειμένου. Ωστόσο προτείνεται η χρήση του element label για τους λόγους που αναφέρθηκαν στο προηγούμενο μάθημα.

<form action="" method="get">
<pre>
username:       <input type="text" name="" id="" required> *<br>
Ονοματεπώνυμο:  <input type="text" name="" id="" minlength="3"> <br>
Ηλικία (20-26): <input type="number" name="" id="" min="20" max="26"> <br>
email:          <input type="email" name="" id="" required> *<br>
<input type="submit" value="Αποστολή">
</pre>
</form>

Το παραπάνω (χωρίς χρήση css) προτείνεται να γραφεί (προσθέτοντας fieldset) ως εξής:

<form action="" method="get" style="width: 300px;">
  <fieldset>
    <legend>Εισαγωγή στοιχείων χρήστη</legend>

    <label for="uname">username:*</label> <br>
    <input type="text" name="" id="uname" required> <br><br>

    <label for="fl-name">Ονοματεπώνυμο:</label> <br>
    <input type="text" name="" id="fl-name" minlength="3"> <br><br>

    <label for="age">Ηλικία (20-26): </label> <br>
    <input type="number" name="" id="age" min="20" max="26"> <br><br>

    <label for="email:">Ηλικία (20-26):* </label> <br>
    <input type="email" name="" id="email" required> <br><br>

    <input type="submit" value="Αποστολή">
  </fieldset>
</form>
Εισαγωγή στοιχείων χρήστη





  • Built-in form validation στην HTML5
    • Γράφοντας τον παραπάνω κώδικα παρατηρήστε ότι  αν πατήσετε το κουμπί “Αποστολή” χωρίς να συμπληρώσετε το όνομα εμφανίζεται μήνυμα ότι είναι απαραίτητη η συμπλήρωση του πεδίου
    • Αν στην Ηλικία γράψετε αριθμό εκτός ορίων τότε πάλι εμφανίζεται σχετικό μήνυμα.
    • Γενικότερα έλεγχος δεδομένων φόρμαςγίνεται για τα παρακάτω:
      • required: όταν το πεδίο είναι απαραίτητο
      • minlength, maxlength: για το μέγεθος κειμένου,
      • min, max: για αριθμούς
      • type: προσδιορίζει αν πρέπει να βάλουμε email, αριθμό ή κάποιον σχετικό τυπο δεδομένων
      • pattern: όταν θέλουμε τα δεδομένα να υπακούουν σε κάποιο συγκεκριμένο μοτίβο

Περισσότερα για το element input https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

Γενικοί κανόνες

  • Ο χρήστης/επισκέπτης το επίκεντρο:
    • είναι ο πελάτης
    • ο σκοπός είναι το site (eshop, ενημερωτικό κλπ)
  • form follows function (facebook, amazon, ebay)
  • οι αλλαγές βρίσκουν πάντα αρνητική αντιμετώπιση εάν ο χρήστης έχει συνηθίσει την τρέχουσα έκδοση. Και ιδιαίτερα εάν όλα δουλεύουν ΟΚ
  • ο χρήστης πρέπει να πλοηγηθεί μόνος του, εύκολα και γρήγορα + ασφάλεια.
  • με οποιαδήποτε συσκευή
    • Site μίας στήλης και για ΗΥ
    • εξαφάνιση πλαϊνής στήλης
    • εμφάνιση του μενού με το εικονίδιο των 3 γραμμών/κουκίδων

Ύλη

Εγκατάσταση του Live Server στο VScode

  1. Μέσα από το VScode > κλικ αριστερά στο “Extensions“
  2. Αναζητούμε και εγκαθιστούμε στο Live Server (από τον Ritwick Dey)
  3. Στο VScode > κλικ κάτω αριστερά στο “Manage” (εικονίδιο με το γρανάζι) >  “Settings” > αναζητώ τη λέξη “save” > στο πεδίο “Files: Auto Save” επιλέγω από το πτυσσόμενο μενού “afterDelay“
  4. Με τη ροδέλα κύλισης κατεβαίνω παρακάτω και στο “Files: Auto Save Delay” βάζω μια μικρότερη τιμή π.χ. 500ms

Για να ενεργοποιήσω την αυτόματη ενημέρωση του browser κάθε φορά που κάνω αλλαγές στο VScode πρέπει μέσα από το VScode:

  • δεξί κλικ πάνω στο html ή css αρχείο και επιλέγω “Open with Live Server” ή
  • Στην μπλε μπάρα κατάστασης του VSCode (δίπλα από την ένδειξη με το είδος του αρχείου π.χ. HTML) κάνω κλικ στο  “GoLive”

Χρήση του δωρεάν χώρου spaces του w3schools

  • Να γίνει παρουσίαση των απλών δυνατοτήτων
  • Να χρησιμοποιηθεί ο χώρος για την άσκηση
  • Προτίνεται να αναπτύσσονται τα html-css αρχεία στον VScode και μετά να αντιγράφονται στο αντίστοιχο αρχείο στο spaces

Containers, Block και inline Elements

 

Media

https://www.w3schools.com/html/mov_bbb.mp4

Παράδειγμα:

<video width="640" height="480" controls autoplay loop muted>
  <source src="https://www.w3schools.com/html/mov_bbb.ogg">
  <source src="https://www.w3schools.com/html/mov_bbb1.mp4">
  O browser δεν υποστηρίζει βίντεο!
</video>

 

HTTP vs HTTPS

Multimedia

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

Multimedia = ήχος + βίντεο + εικόνες (+κείμενο)

Τα αρχεία που υποστηρίζονται από το πρότυπο της HTML

Τα αρχεία που υποστηρίζονται από το πρότυπο της HTML

Τα αρχεία που υποστηρίζονται από το πρότυπο της HTML
VIDEO MP4, WebM, Ogg (- safari)
AUDIO MP3, WAV, and Ogg

VIDEO

  • Δείχνω το αποθετήριο βίντεο https://www.videezy.com !   προσοχή στο attribution!  (κάτω αριστερά από βίντεο “License Info“)
  • Δείχνω το αποθετήριο βίντεο https://www.pexels.com/el-gr/videos/ !   δεν θέλει καν attribution!
<video src="https://static.videezy.com/system/resources/previews/000/037/961/original/baby_dog15.mp4" controls></video>

<!-- για την περίπτωση που ο browser δεν υποστηρίζει όλα τα είδη αρχείων βίντεο -->

<video controls>
    <source src="videoclip1.mp4" type="video/mp4">
    <source src="videoclip1.ogg" type="video/ogg">
   Ο browser δεν υποστηρίζει το element <video>
</video>

Ενσωμάτωση βίντεο από το youtube

Επειδή το ανέβασμα βίντεο σε server καταναλώνει πολλούς πόρους, είναι προτιμότερο τα βίντεο να τα ανεβάσουμε σε μία πλατφόρμα video streaming, όπως το youtube. Οπότε χρησιμοποιούμε το element iframe για την ενσωμάτωση βίντεο στη σελίδα μας αλλά ουσιαστικά κατεβαίνει από το youtube.

share > Embed > copy

Προσοχή τον τελευταίο χρόνο το youtube δεν επιτρέπει παντού την ενσωμάτωση βίντεο και μάλλον όχι τοπικά ή από http. Οπότε μάλλον δεν θα δουλέψει ανοίγοντας το html αρχείο τοπικά στον υπολογιστή σας. Όπως φαίνεται παρακάτω στο site μου δουλεύει, όπως και στο spaces του w3schools  (δωρεάν χώρος)

Παράδειγμα

<iframe width="560" height="315" src="https://www.youtube.com/embed/FTQbiNvZqaY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Ορισμένες πληροφορίες για το iframe

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

AUDIO

Δωρεάν mp3 από pixabay (προσοχή στην άδεια χρήσης) π.χ. https://pixabay.com/music/search/genre/rock/

Το element <audio> χρησιμοποιεί τα ίδια attributes με το video

<audio controls autoplay loop>
    <source src="sport-fashion-rock-95426.mp3" >
    <source src="sport-fashion-rock-95426.wav" > 
    Ο browser δεν υποστηρίζει το element audio!
</audio>

Τελευταίες html πινελιές!

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

  • αναφορά στα plugins
  • χρήση object  και embed  element
  • object δουλεύει σε παλιούς browsers
  • embed, πιο νέο element που μπήκε επίσημα στην HTML5
  • παράδειγμα με ενσωμάτωση άλλη ιστοσελίδας (να αποφεύγεται). H σελίδα www.google.gr δεν το επιτρέπει.
  • παράδειγμα με εμφάνιση ενός pdf μέσα στην ιστοσελίδα
<p>
<object data="https://www.w3docs.com/snippets/html/which-tag-is-better-to-use-embed-or-object.html" width="500" height="300" type=""></object>
</p>
<hr>
<p>
<embed src="http://nikmavr.sites.sch.gr//wp-content/uploads/Puppy430-tutorial-English.pdf" type="" width="500" height="300" >
</p>

http://nikmavr.sites.sch.gr//wp-content/uploads/Puppy430-tutorial-English.pdf

 

Απλό μενού με Links χρησιμοποώντας το nav

https://www.w3schools.com/tags/tag_nav.asp

ΑΣΚΗΣΗ

Η άσκηση ΔΕΝ είναι υποχρεωτική!

Να δημιουργήσετε φάκελο με όνομα “home”  ο οποίος θα περιέχει έναν υπαφάκελο με το όνομα “media”. Μέσα στον φάκελο “media” θα αποθηκεύσετε όλες τις εικόνες της άσκησης, ένα favicon (ίδιο για όλες τις σελίδες) και ένα αρχείο .pdf.

Μέσα στον φάκελο “home” θα δημιουργήσετε τα αρχεία .html:

  • index.html με τίτλο “Αρχική σελίδα”. Η σελίδα θα περιέχει:
    •  3 χαρακτηριστικές εικόνες, κείμενο σε πολλαπλές παραγράφους,
    • έναν πίνακα με δεδομένα (π.χ. οικονομικά στοιχεία, είδη προίόντων, σύγκριση υπηρεσιών κλπ)
    • διάφορες επικεφαλίδες
  • portfolio.html με τίτλο “Προϊόντα και έργα της εταιρίας μας”. Η σελίδα θα περιέχει:
    • τουλάχιστον 3 φωτογραφίες και ένα βίντεο (με χρήση του element video),
    • στο κάτω μέρος θα ενσωματώσετε το αρχείο pdf αλλά θα βάλετε και σύνδεσμο για να μπορεί να γίνει κατευθείαν μεταφόρτωση (download) του αρχείου. To pdf μπορεί να είναι οτιδήποτε.
  • contact.html με τίτλο “Επικοινωνία”. Η σελίδα θα περιέχει:
    • Διεύθυνση και τηλέφωνα,
    • ενσωματωμένο google map,
    • φόρμα υποβολής ερώτησης όπως φαίνεται παρακάτω.

Σημείωση: Χρησιμοποιήστε ίδιο title και h1 σε κάθε σελίδα ώστε το όνομα της καρτέλας στον browser (title element) και η h1 επικεφαλίδα της σελίδας να αναφέρουν το ίδιο κείμενο.

Τα παρακάτω στιγμιότυπα οθόνης είναι καθάρα ενδεικτικά και προτείνεται να μην τα λάβετε σοβαρά υπόψη!

Δώστε σημασία στα elements της html.

Με τη μορφοποίηση της εμφάνισης θα ασχοληθούμε στα επόμενα μαθήματα της  css.

 

 

 

Χρώματα

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

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

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-5o-%ce%bc%ce%ac%ce%b8%ce%b7%ce%bc%ce%b1/