Συνεχίζουμε τη γνωριμία μας με το στυλοβάτη του Παγκοσμίου Ιστού, την HTML.
Το υλικό που χρησιμοποιούμε είναι μέσα από το βιβλίο μας, το κεφάλαιο 11
Πολύτιμο εργαλείο μας είναι το site https://www.w3schools.com/
Συμπληρωματικό υλικό μπορούμε να βρούμε στο http://aesop.iep.edu.gr/node/7259/1894
Αν έχουμε ξεχάσει τη χρήση του μπορούμε να μελετήσουμε ξανά το κείμενο που βρίσκεται πατώντας εδώ
Όπως αναφέρει και το βιβλίο μας μερικές βασικές "ετικέτες" (tags) φαίνονται ακολούθως
| <HTML>...<⁄HTML> | Ορίζει την αρχή και το τέλος μιας ιστοσελίδας. |
| <HEAD>...<⁄HEAD> | Ορίζει το τμήμα εκείνο της ιστοσελίδας στο οποίο αναφέρονται διαχειριστικής φύσεως πληροφορίες που αφορούν στο περιεχόμενο της ιστοσελίδας. Οι πληροφορίες αυτές δεν εμφανίζονται από τον φυλλομετρητή. |
| <BODY>...<⁄BODY> | Ορίζει το περιεχόμενο της ιστοσελίδας. |
| <TITLE>...<⁄TITLE> | Ορίζει τον τίτλο της. |
| <P>...<⁄P> | Ορίζει παράγραφο. |
| <BR> | Δηλώνει αλλαγή γραμμής. |
| <IMG> | Ορίζει την εισαγωγή κάποιας εικόνας -image- και των παραμέτρων που αφορούν στη θέση της, το μέγεθός της, κ.ά. |
| <A HREF="URL" >...<⁄A> | Ορίζει δεσμό με ιστοσελίδα που βρίσκεται στο URL. |
Για να γίνει περισσότερο κατανοητό, μπορούμε να το φανταστούμε όπως φαίνεται στην επόμενη εικόνα
Μια πολύ καλή πηγή για τις διαθέσιμες ετικέτες της HTML μπορεί να βρεθεί στο https://www.wlearn.gr/etiketes/
1) Χρησιμοποιώντας το https://www.w3schools.com/
δοκιμάζουμε να τροποποιήσουμε το παράδειγμα που βγάζει ωστε δούμε πως δουλεύουν τα "Headers" (H1 Μέχρι Η6). Μπορεί να χρησιμοποιηθεί το παράδειγμα του βιβλίου μας (ή ακόμα καλύτερα μια δική σας εκδοχή 
)
) <Η1>Γαλαξίας</Η1>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>
Στο σημείο αυτό πρέπει να τονίσουμε ότι τα H1-H6 δεν λειτουργούν μόνο σε "διακοσμητικό" επίπεδο (δηλαδή μικρά ή μεγάλα γράμματα), αλλά σε εννοιολογικό. Στο παράδειγμα του βιβλίου ο "Γαλαξίας" περιέχει πχ τη "Γη" ή οποία περιέχει την "Ευρώπη" κ.ο.κ
Άρα το H1 προορίζεται για το "πιο γενικό" και το H6 για το "πιο ειδικό". Με βάση αυτές τις παρατηρήσεις προσπαθήστε να κάνετε τη δική σας ιεραρχία.
Η ιεραρχία επίσης δεν περιορίζεται σε ένα στοιχείο μόνο. Για παράδειγμα εκτός από τη Γη στο ίδιο επίπεδο ιεραρχίας τι άλλο θα ταίριαζε? (Προσπαθήστε να σκεφτείτε κάποιους από τους υπόλοιπους πλανήτες του Ηλιακού μας συστήματος)
Στη συνέχεια θα δούμε πως μπορούμε να χρησιμοποιήσουμε την έννοια της παραγράφου.
Η παράγραφος ορίζεται με τη βοήθεια της ετικέτας <p>
Ορισμός και χρήση: Η ετικέτα <p> ομαδοποιεί το κείμενο που βρίσκεται μέσα στις ετικέτες αρχής και τέλους σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετά το τέλος αυτής.
Ετικέτα τέλους: </p>
Ας δοκιμάσουμε να προσθέσουμε αυτές τις παραγράφους κάτω από την ενότητα "Γη"
<p>Η Γη είναι ο Πλανήτης μας</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>
<p>Το μεγαλύτερο μέρος της Γης καλύπτεται από νερό</p>
<p>Η ξηρά χωρίζεται σε Ηπείρους</p>
Παρατηρούμε ότι το κείμενο αλλάζει γραμμή αυτόματα, αλλά επίσης υπάρχει και μια εννοιολογική ομαδοποίηση.
Αυτό θα είναι η εργασία σας για το επόμενο μάθημα.
ΟΛΑ ΑΥΤΑ ΜΠΟΡΟΥΝ ΝΑ ΓΙΝΟΥΝ ΚΑΙ ΑΠΟ ΚΙΝΗΤΟ / TABLET !!!
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου