Return to HTML 5

HTML: 6o μάθημα

Επανάληψη

Visual Studio Code:

Αν μέσα στον editor αφήσετε το βελάκι του ποντικιού πάνω σε ένα element τότε θα βγεί μια συμβουλή και αν κάνετε κλικ πάνω στον σύνδεσμο MDN Reference τότε θα οδηγηθείτε στην σχετική, για το element, ιστοσελίδα https://developer.mozilla.org/ όπου έχει απίστευτη τεκμηρίωση για τα πάντα!

Δοκιμάστε το!

Block και inline elements

  • p, div
  • span, strong

Form

Γρήγορη αναφορά σε form, label (!!!), input

Νέα ύλη

Συμπληρωματικά:

  • <select> και <option> για δημιουργία μενού
    • selected (για προεπιλογή), size (πόσα θα εμφανίζονται), multiple(δυνατότητα πολλαπλών επιλογών)
  • <fieldset> και<legend> για περίγραμμα φόρμας και τίτλο
  • Με τον παρακάτω κώδικα μπορώ να στοιχίσω γρήγορα τα πεδία κειμένου. Ωστόσο προτείνεται η χρήση του 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

Ερώτηση: Γιατί δεν χρησιμοποιώ μόνο το “text” που τα υπερκαλύπτει:

Απ.: ευκολία χρήστη (λιγότερα λάθη, λιγότερη πληκτρολόγηση, ταχύτητα [ΔΕΝ θέλουμε να γράφει ο χρήστης!]), ευκολία προγραμματιστή (λιγότερους ελέγχους-διορθώσεις).

Αν ο χρήστης έχει απορίες τότε κάτι δεν κάναμε σωστά!


Το σωστό type σε κάθε διαφορετικό input παίζει ΣΗΜΑΝΤΙΚΟ ρόλο στο εμπειρία πλοήγηση του επισκέπτη (user experience)


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

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

Media

Video

  • χρήση attributes:
    • controls
    • autoplay
    • muted
    • loop

Χρήση link και η διαφορά με την ενσωμάτωση στην ιστοσελίδα.

Χρήση:

  • src attribute και
  • source element.
    Χρήση element source μέσα στο video,  αντί για το attribute src του video. Για χρήση διαδοχικών μορφών βίντεο, και όποια παίξει. Εάν δεν υποστηρίζεται η εμφάνιση video, τότε εμφανίζεται το κείμενο.
https://static.videezy.com/system/resources/previews/000/037/961/original/baby_dog15.mp4
https://www.w3schools.com/html/mov_bbb.mp4

Και για βίντεο και για audio

  • controls
  • muted
  • autoplay
  • loop

Ενσωμάτωση βίντεο από το youtube στην ιστοσελίδα, με χρήση iframe.

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


Audio

Πηγή δωρεάν ήχων στο: https://freesound.org/s/262499/

http://users.sch.gr/nikmavr/wp-content/uploads/rythm.mp3

Προσοχή:

  • Χρειάζεται να βάλουμε το attribute controls για να εμφανιστεί κάτι στην οθόνη (ο ήχος δεν έχει εικόνα, εικονίδιο, περίγραμμα…)
  • Να γίνει σύγκριση chrome και firefox καθώς εμφανίζουν διαφορετικά video και 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://users.sch.gr/nikmavr/wp-content/uploads/Puppy430-tutorial-English.pdf" type="" width="500" height="300" >
 </p>
http://users.sch.gr/nikmavr/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.

 

Permanent link to this article: http://users.sch.gr/nikmavr/%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/