Επανάληψη
- Πίνακες
- Λίστες
- επιπλέον:
- ol>li*3
- reversed
- επιπλέον:
- Δημιουργία favicon
- Χρώματα
- Να δημιουργηθεί φάκελος Lesson5 και αρχείο colors.html. Να δημιουργηθούν 5 h1 με διαφορετικό background-color και διαφάνεια.
Ύλη
Block και inline Elements
- https://www.w3schools.com/html/html_blocks.asp
- Δημιουργία αρχείου BlockInline.html
Φόρμες/ Εισαγωγή δεδομένων
Εμφανίζονται διαφορετικά σε διαφορετικούς browsers.
Προσπαθούμε ο χρήστης να γράφει όσο το δυνατόν λιγότερο.
Να σκέφτεται λιγότερο (να συμπληρώνει φυσικά τα πεδία χωρίς να προβληματίζεται) ώστε όλα να συμπληρώνονται εύκολα και γρήγορα.
και επιπλέον :
- form. Είναι container, η ίδια η φόρμα δεν εμφανίζεται.
<form action="readFormData.php"> <label for="fname">Όνομα</label> <input type="text" name="" id="fname" placeholder="Το όνομά σου"> </form>
-
- action: που θα στείλει τα δεδομένα η φόρμα μόλις κάνω αποστολή
-
method=””: get ή post. Πως θα στείλει τα δεδομένα η φόρμα. Εξορισμού είναι η get και όλα τα δεδομένα εμφανίζονται στη γραμμή διευθύνσεων!!!
- το type αλλάζει και τη μορφή και τη λειτουργικότητα του input
- input type=”text”, εξ’ορισμού μέγεθος 20 χαρακτήρες.
- value > αρχική τιμή (εξ’ορισμού)
- placeholder > προτεινόμενη τιμή. Χάνει όμως την ένδειξη όταν ξεκινήσει να γράφει. Άρα θέλει κείμενο από έξω. Πρέπει να το βάζουμε, γιατί διευκολύνουμε τον χρήστη.
- input type=”number” min max step. Δοκιμή για να βάλω αριθμό εκτός min…max
- input type=”tel” . Βοηθά στο κινητό εμφανίζοντας μόνα αριθμητικό πληκτρολόγιο
- input type=”email”
- checkbox
<input type="radio" name="glossa" id="" value="1"> html <br> <input type="radio" name="glossa" id="" value="2"> css <br> <input type="radio" name="glossa" id="" value="3"> javascript <br>
- ομοίως: date, week, month, time, color, radio, file, range, reset, password, textarea
- ΠΡΟΣΟΧΗ: tel και email σημαντικά για κινητά καθώς δεν ανοίγουν τα αλφαβητικά πλήκτρα.
- password δεν το κρυπτογραφεί ο browser
- Autofocus
- button
- disabled
- select για την δημιουργία dropdown μενού και option
<select name="" id="" multiple>; <option value="1">one</option> <option value="2">two</option> <option value="3" selected>any other </option> </select>
- submit: το κουμπί με το οποίο στέλνουμε τα δεδομένα της φόρμας
-
disabled
-
<input type="submit" value="Αποστολή">
ΑΠΑΡΑΙΤΗΤΑ χρησιμοποιούμε τα σωστά types στα inputs ανάλογα με τη λειτουργία τους
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>
