Επανάληψη

Block και inline elements

• p, div
• span, strong

Form

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

• text, date, week, month, time, color, number, password, email, textarea, submit, reset (https://www.w3schools.com/html/html_form_input_types.asp)

Νέα ύλη

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

• Με τον παρακάτω κώδικα μπορώ να στοιχίσω γρήγορα τα πεδία κειμένου. Ωστόσο προτείνεται η χρήση του 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

Media

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

Video

• https://www.w3schools.com/html/html5_video.asp
• πως παίρνω το link του video (προσοχή όχι της ιστοσελίδας που βρίσκεται το video)
• Παράδειγμα: https://www.videezy.com/abstract/40255-sunlight-in-green-forest-during-summertime  δεξί κλικ και “Copy video link”

• χρήση 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://www.w3schools.com/html/html5_audio.asp

Πηγή δωρεάν ήχων στο: 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.