032.3 Μάθημα 1

Πιστοποιητικό:

Web Development Essentials

Έκδοση:

1.0

Θέμα:

032 Markup HTML Εγγράφου

Σκοπός:

032.3 HTML Αναφορές και Ενσωματωμένοι Πόροι

Μάθημα:

1 απο 1

Εισαγωγή

Οποιαδήποτε σύγχρονη ιστοσελίδα σπάνια αποτελείται μόνο από κείμενο. Περιλαμβάνει πολλούς άλλους τύπους περιεχομένου, όπως εικόνες, ήχο, βίντεο και ακόμη και άλλα έγγραφα HTML. Μαζί με το εξωτερικό περιεχόμενο, τα έγγραφα HTML μπορούν να περιέχουν συνδέσμους προς άλλα έγγραφα, γεγονός που καθιστά την εμπειρία περιήγησης στο Διαδίκτυο πολύ πιο απλή.

Ενσωματωμένο Περιεχόμενο

Η ανταλλαγή αρχείων είναι δυνατή μέσω του Διαδικτύου, χωρίς ιστοσελίδες γραμμένες σε HTML, οπότε γιατί το HTML είναι η επιλεγμένη μορφή για web έγγραφα και όχι το PDF ή οποιαδήποτε άλλη μορφή επεξεργασίας κειμένου; Ένας σημαντικός λόγος είναι ότι το HTML διατηρεί τους πόρους πολυμέσων του σε ξεχωριστά αρχεία. Σε ένα περιβάλλον όπως το Διαδίκτυο, όπου οι πληροφορίες είναι συχνά περιττές και διανέμονται σε διαφορετικές τοποθεσίες, είναι σημαντικό να αποφεύγονται οι περιττές μεταφορές δεδομένων. Τις περισσότερες φορές, οι νέες εκδόσεις μιας ιστοσελίδας αντλούν τις ίδιες εικόνες και άλλα αρχεία υποστήριξης με τις προηγούμενες εκδόσεις, έτσι ώστε το πρόγραμμα περιήγησης να μπορεί να χρησιμοποιήσει τα αρχεία που ανακτήθηκαν προηγουμένως αντί να αντιγράψει τα πάντα ξανά. Επιπλέον, η διατήρηση των αρχείων ξεχωριστά διευκολύνει την προσαρμογή του περιεχομένου πολυμέσων σύμφωνα με τα χαρακτηριστικά του πελάτη, όπως η τοποθεσία, το μέγεθος της οθόνης και η ταχύτητα σύνδεσης.

Εικόνες

Ο πιο συνηθισμένος τύπος ενσωματωμένου περιεχομένου είναι οι εικόνες που συνοδεύουν το κείμενο. Οι εικόνες διατηρούνται χωριστά και αναφέρονται μέσα στο αρχείο HTML με το tag <img>:

<img src="logo.png">

Το tag <img> δεν απαιτεί closing tag. Η ιδιότητα src υποδεικνύει τη τοποθεσία για το αρχείο εικόνας. Σε αυτό το παράδειγμα, το αρχείο εικόνας logo.png πρέπει να βρίσκεται στον ίδιο κατάλογο με το αρχείο HTML, διαφορετικά το πρόγραμμα περιήγησης δεν θα μπορεί να το εμφανίσει. Η ιδιότητα τοποθεσίας δέχεται σχετικά μονοπάτια, επομένως το dot notation μπορεί να χρησιμοποιηθεί για να υποδείξει το μονοπάτι προς την εικόνα:

<img src="../logo.png">

Οι δύο τελείες υποδεικνύουν ότι η εικόνα βρίσκεται μέσα στον parent κατάλογο σε σχέση με τον κατάλογο όπου βρίσκεται το αρχείο HTML. Εάν το όνομα αρχείου ../logo.png χρησιμοποιείται μέσα σε ένα αρχείο HTML του οποίου η διεύθυνση URL είναι http://example.com/library/periodicals/index.html, το πρόγραμμα περιήγησης θα ζητήσει το αρχείο εικόνας στη διεύθυνση http://example.com/library/logo.png.

Το dot notation ισχύει επίσης εάν το αρχείο HTML δεν είναι πραγματικό αρχείο στο σύστημα αρχείων· το πρόγραμμα περιήγησης ερμηνεύει τη διεύθυνση URL σαν να είναι ένα μονοπάτι προς ένα αρχείο, αλλά είναι δουλειά του HTTP server να αποφασίσει εάν αυτό το μονοπάτι αναφέρεται σε ένα αρχείο ή σε περιεχόμενο που δημιουργείται δυναμικά. Το domain και το σωστό μονοπάτι προστίθενται αυτόματα σε όλα τα αιτήματα στον server, σε περίπτωση που το αρχείο HTML προήλθε από αίτημα HTTP. Ομοίως, το πρόγραμμα περιήγησης θα ανοίξει τη σωστή εικόνα εάν το αρχείο HTML ανοίχτηκε απευθείας από το τοπικό σύστημα αρχείων.

Οι τοποθεσίες που ξεκινούν με κάθετο / αντιμετωπίζονται ως απόλυτα μονοπάτια. Τα απόλυτα μονοπάτια έχουν πλήρεις πληροφορίες για τις τοποθεσίες της εικόνας, επομένως λειτουργούν ανεξάρτητα από την τοποθεσία του εγγράφου HTML. Εάν το αρχείο εικόνας βρίσκεται σε άλλο server, κάτι που θα συμβεί όταν χρησιμοποιείται Content Delivery Network (CDN), πρέπει επίσης να συμπεριληφθεί το domain όνομα.

Note	Τα CDN [Δίκτυα Παράδοσης Περιεχομένου] αποτελούνται από γεωγραφικά κατανεμημένους servers που αποθηκεύουν στατικό περιεχόμενο για άλλους ιστότοπους. Βοηθούν στη βελτίωση της απόδοσης και της διαθεσιμότητας για ιστοσελίδες με μεγάλη επισκεψιμότητα.

Εάν δεν είναι δυνατή η φόρτωση της εικόνας, το πρόγραμμα περιήγησης θα εμφανίσει το κείμενο που παρέχεται από το attribute alt αντί για την εικόνα. Για παράδειγμα:

<img src="logo.png" alt="The Company logo">

Το attribute alt είναι επίσης σημαντικό για την προσβασιμότητα. Τα προγράμματα περιήγησης βασισμένα σε κείμενο και τα προγράμματα ανάγνωσης οθόνης το χρησιμοποιούν ως περιγραφή για την αντίστοιχη εικόνα.

Τύποι Εικόνας

Τα προγράμματα περιήγησης μπορούν να εμφανίσουν όλους τους δημοφιλείς τύπους εικόνων, όπως JPEG, PNG, GIF και SVG. Οι διαστάσεις των εικόνων εντοπίζονται αμέσως μόλις φορτωθούν οι εικόνες, αλλά μπορούν να προκαθοριστούν με τα attributes width και height:

<img src="logo.png" alt="The Company logo" width="300" height="100">

Ο μόνος λόγος για να συμπεριληφθούν attributes διαστάσεων στο tag <img> είναι για να αποφευχθεί η αλλοίωση της διάταξης όταν η φόρτωση της εικόνας καθυστερεί πολύ ή όταν δεν μπορεί να φορτωθεί καθόλου. Η χρήση των attributes width και height για την αλλαγή των αρχικών διαστάσεων της εικόνας μπορεί να οδηγήσει σε ανεπιθύμητα αποτελέσματα:

Οι εικόνες θα παραμορφωθούν όταν το αρχικό μέγεθος είναι μικρότερο από τις νέες διαστάσεις ή όταν η νέα αναλογία διαστάσεων [ratio] διαφέρει από τον αρχική.
Η μείωση του μεγέθους μεγάλων εικόνων χρησιμοποιεί επιπλέον bandwidth που θα έχει ως αποτέλεσμα μεγαλύτερους χρόνους φόρτωσης.

Το SVG είναι η μόνη μορφή που δεν υποφέρει από αυτές τις συνέπειες, επειδή όλες οι γραφικές πληροφορίες του αποθηκεύονται σε αριθμητικές συντεταγμένες κατάλληλες για κλιμάκωση και οι διαστάσεις του δεν επηρεάζουν το μέγεθος του αρχείου (εξ ου και το όνομα Scalable Vector Graphics). Για παράδειγμα, μόνο η θέση, οι πλευρικές διαστάσεις και οι πληροφορίες χρώματος είναι απαραίτητες για να σχεδιάσετε ένα ορθογώνιο σε SVG. Η συγκεκριμένη τιμή για κάθε pixel θα αποδοθεί στη συνέχεια δυναμικά. Στην πραγματικότητα, οι εικόνες SVG είναι παρόμοιες με τα αρχεία HTML, με την έννοια ότι τα γραφικά τους στοιχεία ορίζονται επίσης από tags σε ένα αρχείο κειμένου. Τα αρχεία SVG προορίζονται για την αναπαράσταση σχεδίων με αιχμηρά άκρα, όπως γραφήματα ή διαγράμματα.

Οι εικόνες που δεν πληρούν αυτά τα κριτήρια θα πρέπει να αποθηκεύονται ως bitmaps. Σε αντίθεση με τις μορφές εικόνας που βασίζονται σε vectors, τα bitmaps αποθηκεύουν εκ των προτέρων πληροφορίες χρώματος για κάθε pixel στην εικόνα. Η αποθήκευση της τιμής χρώματος για κάθε pixel στην εικόνα δημιουργεί πολύ μεγάλο όγκο δεδομένων, επομένως τα bitmaps συνήθως αποθηκεύονται σε συμπιεσμένες μορφές, όπως JPEG, PNG ή GIF.

Η μορφή JPEG συνιστάται για φωτογραφίες, επειδή ο αλγόριθμος συμπίεσής της παράγει καλά αποτελέσματα για αποχρώσεις και θολά φόντα. Για εικόνες όπου επικρατούν συμπαγή χρώματα, η μορφή PNG είναι πιο κατάλληλη. Επομένως, η μορφή PNG θα πρέπει να επιλέγεται όταν είναι απαραίτητο να μετατραπεί μια vector εικόνα σε bitmap.

Η μορφή GIF προσφέρει τη χαμηλότερη ποιότητα εικόνας από όλες τις δημοφιλείς μορφές bitmap. Ωστόσο, εξακολουθεί να χρησιμοποιείται ευρέως λόγω της υποστήριξής του για animations. Πράγματι, πολλοί ιστότοποι χρησιμοποιούν αρχεία GIF για την προβολή σύντομων βίντεο, αλλά υπάρχουν καλύτεροι τρόποι προβολής βίντεο περιεχομένου.

Ήχος και Βίντεο

Περιεχόμενα ήχου και βίντεο μπορούν να προστεθούν σε ένα έγγραφο HTML με τον ίδιο σχεδόν τρόπο όπως οι εικόνες. Δεν αποτελεί έκπληξη το γεγονός ότι το tag για την προσθήκη ήχου είναι <audio> και το tag για την προσθήκη βίντεο είναι <video>. Προφανώς, τα προγράμματα περιήγησης βασισμένα μόνο σε κείμενο δεν μπορούν να αναπαράγουν περιεχόμενο πολυμέσων, επομένως τα tags <audio> και <video> χρησιμοποιούν το closing tag για να κρατήσουν το κείμενο που χρησιμοποιείται ως εναλλακτικό για το element που δεν μπορούσε να εμφανιστεί. Για παράδειγμα:

<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>

Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το tag <audio>, θα εμφανιστεί η γραμμή “Unable to play recording.mp3”. Η χρήση των closing tags </audio> ή </video> επιτρέπει σε μια ιστοσελίδα να περιλαμβάνει πιο περίπλοκο εναλλακτικό περιεχόμενο από την απλή γραμμή κειμένου που επιτρέπεται από το attribute alt του tag <img>.

Το attribute src για τα tags <audio> και <video> λειτουργεί με τον ίδιο τρόπο όπως και για το tag <img>, αλλά δέχεται επίσης διευθύνσεις URL που οδηγούν σε ένα live stream. Το πρόγραμμα περιήγησης φροντίζει για το buffering, το decoding και την εμφάνιση του περιεχομένου καθώς λαμβάνεται. Το attribute controls εμφανίζει στοιχεία ελέγχου αναπαραγωγής. Χωρίς αυτό, ο επισκέπτης δεν θα μπορεί να κάνει pause, rewind ή να ελέγξει με άλλον τρόπο την αναπαραγωγή.

Γενικό Περιεχόμενο

Ένα έγγραφο HTML μπορεί να γίνει nested μέσα σε ένα άλλο έγγραφο HTML, παρόμοια με την εισαγωγή μιας εικόνας σε ένα έγγραφο HTML, αλλά χρησιμοποιώντας την ετικέτα <iframe>:

<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>

Τα απλούστερα προγράμματα περιήγησης βασισμένα μόνο σε κείμενο δεν υποστηρίζουν το tag <iframe> και θα εμφανίζουν το εσωκλειώμενο κείμενο. Όπως και με τα tags πολυμέσων, το attribute src ορίζει την τοποθεσία προέλευσης του nested HTML εγγράφου. Τα attributes width και height μπορούν να προστεθούν για να αλλάξουν οι προεπιλεγμένες διαστάσεις του element iframe.

Το attribute name επιτρέπει την αναφορά στο iframe και την αλλαγή του nested HTML εγγράφου. Χωρίς αυτό το attribute, το nested HTML έγγραφο δεν μπορεί να αλλάξει. Ένα anchor element μπορεί να χρησιμοποιηθεί για τη φόρτωση ενός εγγράφου από άλλη τοποθεσία μέσα σε ένα iframe αντί για το τρέχον παράθυρο του προγράμματος περιήγησης.

Σύνδεσμοι

Το element της σελίδας που συνήθως αναφέρεται ως web link είναι επίσης γνωστό με τον τεχνικό όρο anchor, εξ ου και η χρήση του tag <a>. Ο anchor οδηγεί σε άλλη τοποθεσία, η οποία μπορεί να είναι οποιαδήποτε διεύθυνση υποστηρίζεται από το πρόγραμμα περιήγησης. Η τοποθεσία υποδεικνύεται από το attribute href (hyperlink reference):

<a href="contact.html">Contact Information</a>

Η τοποθεσία μπορεί να γραφτεί ως σχετικό ή απόλυτο μονοπάτι, όπως και με τα ενσωματωμένα περιεχόμενα που συζητήθηκαν προηγουμένως. Μόνο το περιεχόμενο κειμένου που εσωκλείεται (π.χ. Contact Information) είναι ορατό στον επισκέπτη, συνήθως ως υπογραμμισμένο μπλε κείμενο από προεπιλογή, με δυνατότητα κλικ, αλλά το αντικείμενο που εμφανίζεται πάνω από τον σύνδεσμο μπορεί επίσης να είναι οποιοδήποτε άλλο ορατό περιεχόμενο, όπως εικόνες:

<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>

Μπορούν να προστεθούν ειδικά προθέματα στην τοποθεσία για να ενημερώσουν το πρόγραμμα περιήγησης πώς να την ανοίξει. Εάν ο anchor δείχνει για παράδειγμα σε μια διεύθυνση email, το attribute href πρέπει να περιλαμβάνει το πρόθεμα mailto: :

<a href="mailto:info@lpi.org">Contact by email</a>

Το πρόθεμα tel: υποδεικνύει έναν αριθμό τηλεφώνου. Είναι ιδιαίτερα χρήσιμο για τους επισκέπτες που βλέπουν τη σελίδα σε κινητές συσκευές:

<a href="tel:+123456789">Contact by phone</a>

Όταν κάνετε κλικ στον σύνδεσμο, το πρόγραμμα περιήγησης ανοίγει τα περιεχόμενα της τοποθεσίας με τη ανάλογη εφαρμογή.

Η πιο κοινή χρήση των anchors είναι η φόρτωση άλλων web εγγράφων. Από προεπιλογή, το πρόγραμμα περιήγησης θα αντικαταστήσει το τρέχον έγγραφο HTML, με περιεχόμενο στη νέα τοποθεσία. Αυτή η συμπεριφορά μπορεί να τροποποιηθεί χρησιμοποιώντας το attribute target. Το _blank target, για παράδειγμα, λέει στο πρόγραμμα περιήγησης να ανοίξει τη δεδομένη τοποθεσία σε νέο παράθυρο ή νέα καρτέλα, ανάλογα με τις προτιμήσεις του επισκέπτη:

<a href="contact.html" target="_blank">Contact Information</a>

Το _self target είναι το προεπιλεγμένο όταν δεν παρέχεται το attribute target. Αναγκάζει το έγγραφο αναφοράς να αντικαταστήσει το τρέχον έγγραφο.

Άλλοι τύποι των targets σχετίζονται με το <iframe> element. Για να φορτώσετε ένα έγγραφο αναφοράς μέσα σε ένα <iframe> element, το attribute target θα πρέπει να δείχνει στο όνομα του iframe element:

<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>

<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>

Το iframe element λειτουργεί ως ξεχωριστό παράθυρο του προγράμματος περιήγησης, επομένως τυχόν σύνδεσμοι που έχουν φορτωθεί από το έγγραφο μέσα στο iframe θα αντικαταστήσουν μόνο τα περιεχόμενα του iframe. Για να αλλάξετε αυτήν τη συμπεριφορά, τα anchor elements μέσα στο πλαισιωμένο έγγραφο μπορούν επίσης να χρησιμοποιήσουν το target attribute. Το _parent target, όταν χρησιμοποιείται μέσα σε ένα πλαισιωμένο έγγραφο, θα προκαλέσει το να αντικαταστήσει η αναφερόμενη τοποθεσία το parent έγγραφο, που περιέχει τo tag <iframe>. Για παράδειγμα, το ενσωματωμένο έγγραφο gallery.html θα μπορούσε να περιέχει ένα anchor που φορτώνεται κατά την αντικατάσταση του parent εγγράφου:

<p><a href="gallery.html" target="_parent">Open as parent document</a></p>

Τα HTML έγγραφα υποστηρίζουν πολλαπλά επίπεδα nesting με το tag <iframe>. Το target _top, όταν χρησιμοποιείται σε ένα anchor μέσα σε ένα πλαισιωμένο έγγραφο, θα αναγκάσει την αναφερόμενη τοποθεσία να αντικαταστήσει το κύριο έγγραφο στο παράθυρο του προγράμματος περιήγησης, ανεξάρτητα από το αν είναι ο άμεσος parent του αντίστοιχου <iframe> ή ένας ancestor πίσω στην αλυσίδα.

Τοποθεσίες Eντός Eγγράφων

Η διεύθυνση ενός εγγράφου HTML μπορεί προαιρετικά να περιέχει ένα απόσπασμα [fragment] που μπορεί να χρησιμοποιηθεί για την αναγνώριση ενός πόρου μέσα στο έγγραφο. Αυτό το απόσπασμα, γνωστό και ως URL anchor, είναι μια συμβολοσειρά που ακολουθεί το hash σύμβολο # στο τέλος της διεύθυνσης URL. Για παράδειγμα, η λέξη History είναι ο anchor στη διεύθυνση URL https://en.wikipedia.org/wiki/Internet#History.

Όταν η διεύθυνση URL έχει ένα anchor, το πρόγραμμα περιήγησης θα πραγματοποιήσει κύλιση στο αντίστοιχο element του εγγράφου: δηλαδή στο element του οποίου το id attribute είναι ίσο με το anchor στη διεύθυνση URL. Στην περίπτωση της συγκεκριμένης διεύθυνσης URL, https://en.wikipedia.org/wiki/Internet#History, το πρόγραμμα περιήγησης θα μεταβεί κατευθείαν στην ενότητα “History”. Εξετάζοντας τον κώδικα HTML της σελίδας, διαπιστώνουμε ότι ο τίτλος της ενότητας έχει το αντίστοιχο id attribute:

<span class="mw-headline" id="History">History</span>

Τα anchors URL διευθύνσεων μπορούν να χρησιμοποιηθούν στο attribute href του tag <a>, είτε όταν δείχνουν σε εξωτερικές σελίδες είτε όταν δείχνουν σε τοποθεσίες εντός της τρέχουσας σελίδας. Στην τελευταία περίπτωση, αρκεί να ξεκινήσετε μόνο με το σύμβολο hash με το URL απόσπασμα, όπως στο <a href="#History">History</a>.

Warning

Το id attribute δεν πρέπει να περιέχει κενό χώρο (κενά διαστήματα, tabs, κ.λπ.) και πρέπει να είναι μοναδικό μέσα στο έγγραφο.

Υπάρχουν τρόποι για να προσαρμόσετε τον τρόπο με τον οποίο το πρόγραμμα περιήγησης θα αντιδράσει σε anchors URL διευθύνσεων. Είναι δυνατόν, για παράδειγμα, να γράψετε ένα JavaScript function που ακούει στο event παραθύρου hashchange και ενεργοποιεί μια προσαρμοσμένη ενέργεια, όπως ένα animation ή ένα αίτημα HTTP. Αξίζει να σημειωθεί, ωστόσο, ότι το απόσπασμα URL δεν αποστέλλεται ποτέ στον server με τη διεύθυνση URL, επομένως δεν μπορεί να χρησιμοποιηθεί ως αναγνωριστικό από τον HTTP server.

Καθοδηγούμενες Ασκήσεις

Το έγγραφο HTML που βρίσκεται στη διεύθυνση http://www.lpi.org/articles/linux/index.html έχει ένα <img> tag του οποίου το src attribute δείχνει στο ../logo.png. Ποιο είναι το πλήρες απόλυτο μονοπάτι προς αυτή την εικόνα;
Ονομάστε δύο λόγους για τους οποίους το alt attribute είναι σημαντικό στα <img> tags.
Ποια μορφή εικόνας δίνει καλή ποιότητα εικόνας και διατηρεί το μέγεθος του αρχείου μικρό όταν χρησιμοποιείται για φωτογραφίες με θολά σημεία και με πολλά χρώματα και αποχρώσεις;
Αντί να χρησιμοποιείτε έναν τρίτο πάροχο, όπως το Youtube, ποιο HTML tag σάς επιτρέπει να ενσωματώσετε ένα αρχείο βίντεο σε ένα έγγραφο HTML χρησιμοποιώντας μόνο τυπικά HTML χαρακτηριστικά;

Ασκήσεις Εξερεύνησης

Υποθέστε ότι ένα έγγραφο HTML έχει το hyperlink <a href="pic1.jpeg">First picture</a> και το iframe element <iframe name="gallery"></iframe>. Πώς θα μπορούσατε να τροποποιήσετε το hyperlink tag ώστε η εικόνα στην οποία δείχνει να φορτώνεται μέσα στο δεδομένο iframe element αφού ο χρήστης κάνει κλικ στον σύνδεσμο;
Τι θα συμβεί όταν ο επισκέπτης κάνει κλικ σε ένα hyperlink σε ένα έγγραφο, μέσα σε ένα iframe, και το hyperlink έχει ορίσει το target attribute σε _self;
Παρατηρείτε ότι το anchor μιας URL διεύθυνσης, για τη δεύτερη ενότητα της HTML σελίδας σας δεν λειτουργεί. Ποια είναι η πιθανή αιτία αυτού του σφάλματος;

Σύνοψη

Αυτό το μάθημα καλύπτει τον τρόπο προσθήκης εικόνων και άλλου περιεχομένου πολυμέσων χρησιμοποιώντας τα κατάλληλα HTML tags. Επιπλέον, ο αναγνώστης μαθαίνει τους διαφορετικούς τρόπους με τους οποίους μπορούν να χρησιμοποιηθούν τα hyperlinks, για τη φόρτωση άλλων εγγράφων και να οδηγούν σε συγκεκριμένες τοποθεσίες μέσα σε μια σελίδα. Το μάθημα περιλαμβάνει τις ακόλουθες έννοιες και διαδικασίες:

Το tag <img> και τα κύρια attributes του: src και alt.
Σχετικά και απόλυτα URL μονοπάτια.
Δημοφιλείς μορφές εικόνας για το Web και τα χαρακτηριστικά τους.
Τα tags πολυμέσων <audio> και <video>.
Πώς να εισάγετε nested έγγραφα με το tag <iframe>.
Το hyperlink tag <a>, το href attribute του και τα ειδικά targets.
Πώς να χρησιμοποιήσετε URL αποσπάσματα, γνωστά και ως hash anchors.

Απαντήσεις στις Καθοδηγούμενες Ασκήσεις

Το έγγραφο HTML που βρίσκεται στη διεύθυνση http://www.lpi.org/articles/linux/index.html έχει ένα <img> tag του οποίου το src attribute δείχνει στο ../logo.png. Ποιο είναι το πλήρες απόλυτο μονοπάτι προς αυτή την εικόνα;

http://www.lpi.org/articles/logo.png
Ονομάστε δύο λόγους για τους οποίους το alt attribute είναι σημαντικό στα <img> tags.

Τα προγράμματα περιήγησης που υποστηρίζουν μόνο κείμενο, θα μπορούν να εμφανίζουν μια περιγραφή της εικόνας που λείπει. Οι αναγνώστες οθόνης χρησιμοποιούν το alt attribute για να περιγράψουν την εικόνα.
Ποια μορφή εικόνας δίνει καλή ποιότητα εικόνας και διατηρεί το μέγεθος του αρχείου μικρό όταν χρησιμοποιείται για φωτογραφίες με θολά σημεία και με πολλά χρώματα και αποχρώσεις;

Η μορφή JPEG.
Αντί να χρησιμοποιείτε έναν τρίτο πάροχο, όπως το Youtube, ποιο HTML tag σάς επιτρέπει να ενσωματώσετε ένα αρχείο βίντεο σε ένα έγγραφο HTML χρησιμοποιώντας μόνο τυπικά HTML χαρακτηριστικά;

Το tag <video>.

Απαντήσεις στις Ασκήσεις Εξερεύνησης

Υποθέστε ότι ένα έγγραφο HTML έχει το hyperlink <a href="pic1.jpeg">First picture</a> και το iframe element <iframe name="gallery"></iframe>. Πώς θα μπορούσατε να τροποποιήσετε το hyperlink tag ώστε η εικόνα στην οποία δείχνει να φορτώνεται μέσα στο δεδομένο iframe element αφού ο χρήστης κάνει κλικ στον σύνδεσμο;

Χρησιμοποιώντας το target attribute του a tag: <a href="pic1.jpeg" target="gallery">First picture</a>.
Τι θα συμβεί όταν ο επισκέπτης κάνει κλικ σε ένα hyperlink σε ένα έγγραφο, μέσα σε ένα iframe, και το hyperlink έχει ορίσει το target attribute σε _self;

Το έγγραφο θα φορτωθεί μέσα στο ίδιο iframe, κάτι το οποίο αποτελεί προεπιλεγμένη συμπεριφορά.
Παρατηρείτε ότι το anchor μιας URL διεύθυνσης, για τη δεύτερη ενότητα της HTML σελίδας σας δεν λειτουργεί. Ποια είναι η πιθανή αιτία αυτού του σφάλματος;

Το απόσπασμα URL μετά το σύμβολο hash, δεν ταιριάζει με το id attribute στο element που αντιστοιχεί στη δεύτερη ενότητα ή το id attribute του element δεν υπάρχει.