Κεφάλαιο 11.1 :Γενική εισαγωγή στην HTML
- Τι είναι η HTML και πώς εξελίχθηκε ιστορικά;
Η HTML είναι η Γλώσσα Χαρακτηρισμού Υπερκειμένου και βασίζεται στη γλώσσα SGML, αποτελώντας το θεμέλιο για τη δόμηση των σελίδων του Παγκόσμιου Ιστού. Δεν είναι γλώσσα προγραμματισμού, αλλά περιγραφική γλώσσα που χρησιμοποιεί ετικέτες < > για να ορίζει στοιχεία όπως τίτλους, παραγράφους, λίστες και πίνακες. Όταν ο φυλλομετρητής ανακτά μια ιστοσελίδα, διαβάζει και ερμηνεύει τις ετικέτες HTML ώστε να εμφανίσει το περιεχόμενο σωστά. Η HTML ξεκίνησε το 1990 μαζί με το πρωτόκολλο HTTP που δημιούργησε ο Tim Berners-Lee, και εξελίχθηκε μέσα από τις εκδόσεις HTML+, HTML 2.0, HTML 3.2 και HTML 4.0, προσθέτοντας συνεχώς νέες δυνατότητες όπως γραφικά και ειδικά εφέ. Συνολικά, από μια απλή μορφοποιημένη γλώσσα κειμένου εξελίχθηκε σε βασικό εργαλείο δημιουργίας σύγχρονων ιστοσελίδων.
- Τι περιέχουν τα αρχεία HTML και πώς λειτουργούν οι βασικές ετικέτες;
Τα αρχεία HTML περιέχουν το κείμενο της ιστοσελίδας και τις ετικέτες που καθορίζουν τη δομή και τη μορφοποίησή της. Οι ετικέτες μπορεί να δημιουργούν συνδέσμους ή να δείχνουν πολυμεσικό περιεχόμενο. Οι περισσότερες εμφανίζονται σε ζεύγη: μία για την αρχή και μία για το τέλος. Μεταξύ των δύο ετικετών τοποθετείται το κείμενο που επηρεάζουν.
Παράδειγμα: <ΌνομαΕτικέτας> κείμενο </ΌνομαΕτικέτας>.
- Ποιες είναι οι βασικές ετικέτες για επικεφαλίδες, συνδέσμους και εικόνες;
Οι επικεφαλίδες χρησιμοποιούν τις ετικέτες H1 έως H6, με την μορφή <H1>Τίτλος</H1>. Οι σύνδεσμοι δημιουργούνται με την ετικέτα <A> και την ιδιότητα HREF, π.χ. <A HREF="url">Κείμενο</A>. Η ετικέτα A μπορεί επίσης να χρησιμοποιηθεί για συνδέσμους μέσα στην ίδια σελίδα. Για την εισαγωγή εικόνας χρησιμοποιείται η ετικέτα <IMG>, η οποία δεν έχει ετικέτα τέλους. Η σημαντικότερη ιδιότητά της είναι η SRC, που δηλώνει το αρχείο της εικόνας.
Κεφάλαιο 11.2 :Η HTML5
- Ποιες νέες δυνατότητες εισάγει η HTML5 για τη δημιουργία ιστοσελίδων και εφαρμογών;
Η HTML5 προσθέτει νέες ετικέτες για σημασιολογικό διαχωρισμό του εγγράφου (header, section, article, nav), ετικέτες για ήχο και βίντεο (audio, video), δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης. Επίσης, εμπλουτίζει τα στοιχεία για φόρμες και διανυσματικά γραφικά (SVG).
- Πώς εισάγονται βίντεο και ήχος σε μια ιστοσελίδα HTML5 και ποιες ιδιότητες χρησιμοποιούνται;
Στην HTML5, η εισαγωγή βίντεο γίνεται με την ετικέτα <video> και η εισαγωγή ήχου με την ετικέτα <audio>. Χρησιμοποιούνται ιδιότητες όπως src για το αρχείο, width και height για τις διαστάσεις του βίντεο, και controls για την εμφάνιση στοιχείων ελέγχου. Στην περίπτωση του ήχου, μπορούν να δοθούν πολλαπλές μορφές αρχείων μέσα σε ετικέτες <source>, ενώ παρέχεται μήνυμα σφάλματος αν το πρόγραμμα πλοήγησης δεν υποστηρίζει την αναπαραγωγή.
- Ποια είναι η δομή ενός απλού εγγράφου HTML5 και τι περιλαμβάνουν τα βασικά τμήματά του;
Ένα απλό έγγραφο HTML5 έχει συγκεκριμένη δομή που περιλαμβάνει κεφαλίδα (header), κύριο περιεχόμενο (article) και υποσέλιδο (footer). Στην κεφαλίδα υπάρχει περιοχή πλοήγησης (nav), ενώ στο υποσέλιδο μπορεί να υπάρχει άλλη περιοχή πλοήγησης. Το κύριο κείμενο διαχωρίζεται σε ξεχωριστή ενότητα (section) και μπορεί να περιέχει τη δική του κεφαλίδα. Η σειρά και η σημασία των στοιχείων είναι σημαντικές για τη σωστή δομή του εγγράφου.
ΚΕΦΑΛΑΙΟ 11.3 :Ενσωμάτωση (Embedding)
-
Τι είναι η ενσωμάτωση περιεχομένου σε ένα έγγραφο HTML και με ποιους βασικούς τρόπους μπορεί να πραγματοποιηθεί;
Η ενσωμάτωση περιεχομένου σε ένα έγγραφο HTML είναι η διαδικασία κατά την οποία εισάγουμε στοιχεία, όπως βίντεο, ήχο ή περιεχόμενο από άλλες ιστοσελίδες, μέσα στη δική μας ιστοσελίδα. Αυτό μπορεί να γίνει κυρίως με τη χρήση της ετικέτας iframe, που επιτρέπει την εμφάνιση εξωτερικού περιεχομένου σε ένα καθορισμένο πλαίσιο, αλλά και με την ετικέτα div σε συνδυασμό με κώδικα JavaScript. Στις περισσότερες περιπτώσεις δεν απαιτείται τεχνική γνώση, αφού το μόνο που χρειάζεται είναι η αντιγραφή και επικόλληση του κώδικα ενσωμάτωσης στο HTML αρχείο.
ΚΕΦΑΛΑΙΟ 11.4 :Καθορίζοντας την εμφάνιση – CSS
- Τι είναι η CSS και γιατί χρησιμοποιείται;
- Με ποιους τρόπους μπορεί να συνδεθεί η CSS σε ένα έγγραφο HTML;
Η πιο σωστή και προτεινόμενη μέθοδος είναι η χρήση εξωτερικού αρχείου CSS μέσω της ετικέτας <link> στο <head>. Υπάρχει επίσης η δυνατότητα ενσωμάτωσης κανόνων απευθείας στο HTML μέσω της ετικέτας <style> όταν χρειάζονται γρήγορες ή μικρές αλλαγές. Αυτές οι δύο μέθοδοι επιτρέπουν την οργάνωση του κώδικα και τη διαχείριση της μορφοποίησης με ευελιξία. Η χρήση εξωτερικού αρχείου παραμένει η πιο καθαρή λύση για μεγάλες ιστοσελίδες.
- Από τι αποτελείται ένας κανόνας CSS και πώς λειτουργεί;
Κάθε κανόνας CSS αποτελείται από έναν επιλογέα και ένα σύνολο ιδιοτήτων μέσα σε αγκύλες. Ο επιλογέας καθορίζει ποιο HTML στοιχείο θα επηρεαστεί, ενώ οι ιδιότητες ορίζουν το πώς θα εμφανίζεται. Οι ιδιότητες χωρίζονται από τις τιμές τους με άνω κάτω τελεία και κάθε δήλωση τελειώνει με ελληνικό ερωτηματικό. Έτσι η CSS καθορίζει με ακρίβεια την εμφάνιση συγκεκριμένων στοιχείων ή ομάδων στοιχείων.
- Ποια είναι η διαφορά ανάμεσα σε class και id στην CSS;
Η class χρησιμοποιείται για την ομαδοποίηση πολλών στοιχείων που πρέπει να έχουν κοινή μορφοποίηση. Από την άλλη, το id προορίζεται για ένα και μόνο μοναδικό στοιχείο μέσα στη σελίδα. Αυτή η διάκριση επιτρέπει στη CSS να εφαρμόζει κανόνες είτε σε πολλές περιοχές είτε σε ένα μόνο συγκεκριμένο σημείο. Η σωστή χρήση τους βοηθά στη δημιουργία καθαρού και οργανωμένου κώδικα.
- Ποια είναι μερικές βασικές ιδιότητες που χρησιμοποιούνται συχνά στην CSS;
Βασικές ιδιότητες είναι το color, το background, το font-size, το text-align, το border, το margin και το padding. Με αυτές ρυθμίζεται η εμφάνιση του κειμένου, το φόντο, τα περιθώρια, τα περιγράμματα και οι αποστάσεις μεταξύ των στοιχείων. Η κατανόηση αυτών των ιδιοτήτων είναι απαραίτητη γιατί αποτελούν το θεμέλιο της μορφοποίησης. Χρησιμοποιούνται σχεδόν σε κάθε ιστοσελίδα ανεξαρτήτως πολυπλοκότητας.
- Με ποια εργαλεία μπορεί κάποιος να δημιουργήσει και να δοκιμάσει HTML και CSS;
Τα αρχεία HTML και CSS είναι απλό κείμενο και μπορούν να δημιουργηθούν με οποιονδήποτε κειμενογράφο, όπως το Σημειωματάριο ή το Notepad++ που προσφέρει χρωματισμό σύνταξης. Για άμεσο πειραματισμό υπάρχουν διαδικτυακές πλατφόρμες όπως το jsfiddle, το codepen, το dabblet και το cssdesk. Σε αυτές μπορούμε να βλέπουμε τις αλλαγές σε πραγματικό χρόνο καθώς γράφουμε κώδικα. Πρόκειται για πολύ χρήσιμα εργαλεία για αρχάριους αλλά και προχωρημένους.
