11. Εισαγωγή στην HTML

ΚΕΦΑΛΑΙΟ 11

Υπηρεσίες και εφαρμογές Διαδικτύου

Διδακτικές Ενότητες

Γενική εισαγωγή στην HTML
Η HTML5
Ενσωμάτωση (Embedding)
Καθορίζοντας την εμφάνιση – CSS

Διδακτικοί στόχοι

Σκοπός του κεφαλαίου είναι οι μαθητές να κατανοήσουν την έννοια της HTML ως δομικού στοιχείου του Παγκόσμιου Ιστού.

Οι μαθητές πρέπει να είναι σε θέση:

να αναγνωρίζουν τη δομή ενός εγγράφου HTML και να επεξεργάζονται ετικέτες.
να ανακαλύψουν τα οφέλη του διαχωρισμού δομής και περιεχομένου ενός εγγράφου HTML από την εμφάνισή του.
να εφαρμόζουν στυλ εμφάνισης (CSS) σε έγγραφα HTML.
να ενσωματώνουν κώδικα HTML από ιστοσελίδες και να τον προσαρμόζουν.

Ερωτήματα

Γνωρίζετε τι είναι HTML;
Ξέρετε ότι μία ιστοσελίδα HTML μπορεί να εμφανιστεί τελείως διαφορετικά, αν αλλάξετε μόνο μία γραμμή του κώδικα HTML της;
Ένα έγγραφο HTML έχει δομή και σημασιολογία. Ξέρετε τι σημαίνουν αυτά;
Γνωρίζετε ότι μπορείτε εκτός από το να αναρτήσετε βίντεο από το youtube να το εμφανίσετε στο προσωπικό σας ιστολόγιο και σε πάρα πολλές άλλες ιστοσελίδες;

Βασική ορολογία

HTML, SGML, ετικέτες, σύνδεσμοι, HREF, HTML5, CSS, ενσωμάτωση

Εισαγωγή

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

Ποια είναι η χρησιμότητα της ΗΤΜL; Οι ιστοσελίδες που επισκεπτόμαστε στο Internet δεν είναι τίποτε άλλο παρά αρχεία τα οποία περιέχουν κώδικα γραμμένο στη γλώσσα HTML. Άρα, αν κάποιος γνωρίζει να συντάσσει κώδικα σε html, τότε ξέρει ένα από τα βασικά συστατικά, για να δημιουργήσει ένα web site.

Εικόνα 11.1.Ο Tim Berners-Lee,εφευρέτης της HTML και του Παγκόσμιου Ιστού

11.1 Γενική εισαγωγή στην HTML

Τι είναι η HTML

Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι ένα πολύ μεγαλύτερο σύστημα επεξεργασίας εγγράφων και είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού.

Η HTML δεν είναι μια γλώσσα προγραμματισμού αλλά μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου. Oρίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Κάθε στοιχείο έχει ένα όνομα και περιέχεται μέσα στα σύμβολα < >, που αποκαλούνται ετικέτες (tags).

Όταν ο Φυλλομετρητής ανακτά μια ιστοσελίδα, στην ουσία ανακτά τον κώδικα HTML της ιστοσελίδας. Στη συνέχεια, ο Φυλλομετρητής «διαβάζει» και «διερμηνεύει» τις ετικέτες της HTML, δημιουργεί την ιστοσελίδα και την εμφανίζει στην οθόνη, μορφοποιώντας το κείμενο και τις εικόνες της.

Ιστορική Αναδρομή

Το 1990 ο Tim Berners-Lee από το CERN, το Ευρωπαϊκό Επιστημονικό Εργαστήριο Μοριακής Φυσικής της Γενεύης, δημιούργησε ένα νέο πρωτόκολλο, με το οποίο μπορούμε να μεταφέρουμε κάθε είδους πληροφορία μέσα στο Διαδίκτυο. Το πρωτόκολλο αυτό ονομάστηκε HTTP (HyperText Transfer Protocol) και σηματοδότησε την αρχή του Παγκόσμιου Ιστού (World Wide Web) όπως τον ξέρουμε σήμερα. Οι ιστοσελίδες, που ήταν η βάση του παγκόσμιου ιστού, ήταν γραμμένες στην πρώτη έκδοση της γλώσσας HTML. Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από έναν διεθνή οργανισμό (Internet Engineering Task Forse). H επόμενη έκδοση, η 3.0, δεν έγινε αποδεκτή από τις Microsoft και Netscape, οπότε το 1996 αντικαταστάθηκε από την έκδοση 3.2 του W3C, μιας διεθνούς κοινότητας δημιουργών λογισμικού. Η τελευταία περιελάμβανε πολλές από τις σημάνσεις, τα λεγόμενα tags, που είχαν εισαγάγει οι δύο εταιρείες. Η έκδοση 4.0 παρουσιάστηκε το 1999 επίσης από το W3C. Συνοπτικά, η HTML, στο πέρασμα της από HTML σε HTML+, σε HTML 2, σε HTML 3.2 και τέλος σε HTML 4, από μια απλή γλώσσα παρουσίασης κειμένων με μορφοποίηση απέκτησε δυνατότητες εμφάνισης κινούμενων γραφικών εικόνων και άλλων ειδικών εφέ.

Μια πρώτη γνωριμία με τις βασικές ετικέτες

Τα αρχεία της HTML περιέχουν τα ακόλουθα :

το κείμενο της ιστοσελίδας.
τις ετικέτες της HTML, που υποδεικνύουν τα στοιχεία, τη δομή και τη μορφοποίηση των ιστοσελίδων, καθώς επίσης και τους συνδέσμους υπερ-κειμένου προς άλλες ιστοσελίδες ή προς αρχεία άλλων μορφών (πολυμέσα).

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

<ΌνομαΕτικέτας> επηρεαζόμενο κείμενο </ΌνομαΕτικέτας>

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

Τα αρχεία της HTML πρέπει να τα γράφουμε σε συντάκτες κειμένων, δηλαδή προγράμματα που μπορούν να αποθηκεύσουν αρχεία κειμένου σε μορφή ASCII, όπως το Σημειωματάριο των Windows, το Geany του Linux, με επέκταση αρχείου .html ή .htm.

Δεν αποτελούν ζευγάρι όλες οι ετικέτες της HTML, καθώς ορισμένες είναι «μονομελείς», ενώ άλλες περιέχουν επιπλέον πληροφορίες και κείμενο μέσα στα σύμβολα < >. Π.χ. η <HR> που δημιουργεί μια οριζόντια γραμμή.

<HTML>...<⁄HTML>	Ορίζει την αρχή και το τέλος μιας ιστοσελίδας.
<HEAD>...<⁄HEAD>	Ορίζει το τμήμα εκείνο της ιστοσελίδας στο οποίο αναφέρονται διαχειριστικής φύσεως πληροφορίες που αφορούν στο περιεχόμενο της ιστοσελίδας. Οι πληροφορίες αυτές δεν εμφανίζονται από τον φυλλομετρητή.
<BODY>...<⁄BODY>	Ορίζει το περιεχόμενο της ιστοσελίδας.
<TITLE>...<⁄TITLE>	Ορίζει τον τίτλο της.
<P>...<⁄P>	Ορίζει παράγραφο.
<BR>	Δηλώνει αλλαγή γραμμής.
<IMG>	Ορίζει την εισαγωγή κάποιας εικόνας -image- και των παραμέτρων που αφορούν στη θέση της, το μέγεθός της, κ.ά.
<A HREF="URL" >...<⁄A>	Ορίζει δεσμό με ιστοσελίδα που βρίσκεται στο URL.

Ο κώδικας της ιστοσελίδας test.html (κάτω) και η εμφάνισή της στον Φυλλομετρητή (δεξιά):
<HTML> <HEAD> <TITLE> Εδώ είναι ο τίτλος <⁄TITLE> <⁄HEAD> <BODY> ... κυρίως κείμενο ... <⁄BODY> <⁄HTML>

Δεν έχει σημασία για τον φυλλομετρητή, εάν οι ετικέτες γραφούν με κεφαλαία ή πεζά. Για παράδειγμα, <h3>...</h3> δεν διαφέρει από το <H3>...</H3>.

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

Οι Ετικέτες Επικεφαλίδων

Οι επικεφαλίδες (headings) χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμένου ακριβώς όπως και σ’ ένα βιβλίο. Η HTML ορίζει 6 επίπεδα επικεφαλίδων, των οποίων οι ετικέτες έχουν την εξής μορφή :

<H1> Τίτλος Επικεφαλίδας </H1>

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

Οι επικεφαλίδες αποτελούν στοιχεία διάρθρωσης κειμένου και ένα καλό παράδειγμα χρήσης επικεφαλίδων σε μια σελίδα HTML είναι το παρακάτω. Το αποτέλεσμα της διερμήνευσης των επικεφαλίδων από τον Φυλλομετρητή εμφανίζεται στο διπλανό πλαίσιο στα αριστερά:

<Η1>Γαλαξίας</Η1>
<Η2>Γη </Η2>
<Η3>Ευρώπη </Η3>
<Η4>Ελλάδα </Η4>
<Η5>Κρήτη </Η5>
<Η6>Ηράκλειο </Η6>

Οι Σύνδεσμοι (Links)

Για τη δημιουργία ενός συνδέσμου σε μια HTML ιστοσελίδα, χρησιμοποιούμε τις ετικέτες <Α> και (anchor). Η ετικέτα <Α> αποκαλείται συχνά και ετικέτα δεσμού (anchor tag), διότι μπορεί να χρησιμοποιηθεί και για τη δημιουργία δεσμών, δηλαδή συνδέσμων προς σημεία που βρίσκονται στην ίδια ιστοσελίδα. Η μορφή της ετικέτας (tag) <Α> είναι η εξής :

<Α HREF="http://www.sch.gr">ΠΣΔ </Α>

Η ιδιότητα HREF (Hypertext REFerence, αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του υπερκειμένου στο οποίο δείχνει ο σύνδεσμος. Στην ιστοσελίδα είναι ορατό μόνο το δεύτερο μέρος (στην παραπάνω περίπτωση «ΠΣΔ») και όταν κάνουμε κλικ πάνω του, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος (υπερκείμενο) ως σημείο προορισμού.

Εισαγωγή Εικόνας

Αφού αποκτήσουμε μια εικόνα σε μορφή GIF ή JPEG, μπορούμε να τη συμπεριλάβουμε σε μια ιστοσελίδα. Οι ένθετες εικόνες υποδεικνύονται με την ετικέτα <IMG> (image), η οποία δεν έχει

ετικέτα τέλους, αλλά έχει πολλές ιδιότητες, με πιο σημαντική τη SRC (source). Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε, γραμμένο μέσα σε εισαγωγικά.

Συνεπώς, για την εικόνα image.gif, που βρίσκεται στον ίδιο φάκελο με το αρχείο της ιστοσελίδας, μπορούμε να χρησιμοποιήσουμε την ακόλουθη ετικέτα (tag):

<P> <IMG SRC="image.gif"> </P>

Γρήγορη εκμάθηση της HTML
http://www.codecademy.com/ learn

Ερωτήσεις - Δραστηριότητες

Επισκεφτείτε την ιστοσελίδα του ελληνικού W3C http://www.w3c.gr και καταγράψτε περισσότερες πληροφορίες για την ιστορία της HTML.
Επισκεφτείτε την πρώτη σελίδα του ιστότοπου του σχολείου σας και εντοπίστε τον κώδικα HTML που περιέχει.
Επισκεφτείτε την ιστοσελίδα του Δήμου σας και καταγράψτε 10 ετικέτες HTML που χρησιμοποιούνται σε αυτή.
Δημιουργήστε δύο απλές σελίδες HTML σε έναν απλό επεξεργαστή κειμένου, ώστε η μία να παραπέμπει στην άλλη με αντίστοιχο σύνδεσμο (link).

11.2 Η HTML5

Η HTML5 είναι η τελευταία εξέλιξη της γλώσσας HTML η οποία χρησιμοποιείται εκτενώς και στη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές. Στο πλαίσιο του παρόντος βιβλίου δεν θα επεκταθούμε σε τεχνικές λεπτομέρειες. Αρκεί να αναγνωρίσουμε ότι η HTML5 προσθέτει νέα χαρακτηριστικά δομής και σύνταξης, δίνοντας ιδιαίτερο βάρος στη σημασιολογία των ετικετών, καθώς και νέες δυνατότητες που περιορίζουν την ανάγκη χρήσης πρόσθετων (plug-ins) στα προγράμματα πλοήγησης. Ξεχωρίζουν μεταξύ άλλων:

νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου, όπως οι header, section, article και nav.
νέες ετικέτες για εισαγωγή ήχου και βίντεο, τις audio και video αντίστοιχα.
νέες δυνατότητες σχεδίασης (canvas), μεταφοράς και απόθεσης (drag-and-drop), αποθήκευσης απλών δεδομένων (web storage) και λειτουργίας εκτός σύνδεσης (offline web applications).
εμπλουτισμένα στοιχεία για φόρμες (όπως ημερομηνίες, ηλεκτρονικές διευθύνσεις, εύρος τιμών) και πινακοποιημένα δεδομένα καθώς και ενσωματωμένη διαχείριση διανυσματικών γραφικών μορφής SVG.

Η ονομασία κάθε ετικέτας υπονοεί τη χρήση της και βοηθάει στην κατανόηση της λειτουργίας της από τον άνθρωπο. Η υπονοούμενη σημασία της ετικέτας είναι το κυριότερο χαρακτηριστικό της σημασιολογίας.

Οι εικόνες SVG είναι διανυσματικές. Δεν αλλοιώνονται με την αύξηση των διαστάσεών τους.

Πίνακας 11.1. Τι αναπαριστά στην HTML5 το περιεχόμενο που εισάγουμε στις ετικέτες;
section	μια ενότητα, ένα τμήμα του εγγράφου
article	ένα αυτόνομο τμήμα περιεχομένου, όπως το κείμενο μιας ανάρτησης σε ιστολόγιο
header	εισαγωγικές πληροφορίες και στοιχεία πλοήγησης
footer	πληροφορίες στο τέλος του εγγράφου
nav	μενού πλοήγησης ή άλλες ανάλογες πληροφορίες

Εισαγωγή βίντεο και ήχου

Η εισαγωγή βίντεο και ήχου σε ένα έγγραφο HTML5 είναι πολύ απλή διαδικασία και αποτελεί παράδειγμα ενσωμάτωσης περιεχομένου, δυνατότητας που παρουσιάζεται εκτενέστερα παρακάτω. Η ετικέτα video περιλαμβάνει ιδιότητες που καθορίζουν στοιχεία όπως το μέγεθος του βίντεο, το αν θα παρέχονται πλήκτρα ελέγχου όπως έλεγχος έντασης ήχου και διακοπής της αναπαραγωγής.

Παρατηρήστε στο παράδειγμα:

την ιδιότητα src που περιέχει τη διεύθυνση του αρχείου βίντεο
τις ιδιότητες width και height για τον ορισμό των διαστάσεων
την ιδιότητα controls για την εμφάνιση των στοιχείων ελέγχου
το κλείσιμο της ετικέτας video με </video>

Αντίστοιχα, πραγματοποιείται και η ενσωμάτωση ήχου.

<audio controls>
        <source src="ixos.mp3" type="audio/mpeg" />
        <source src="ixos.ogg" type="audio/ogg" />
        Δυστυχώς δεν υποστηρίζεται η ετικέτα audio!
     </audio>

Παρατηρήστε στο παράδειγμα ότι:

παρέχεται το ίδιο αρχείο ήχου σε δύο μορφές (mp3 και ogg), ώστε το πρόγραμμα πλοήγησης να επιλέξει το πιο κατάλληλο
κάθε εναλλακτικό αρχείο ήχου εμπεριέχεται σε εμφωλευμένη ετικέτα <source>
παρέχεται μήνυμα λάθους («Δυστυχώς δεν … audio!») στην περίπτωση που δεν μπορεί να γίνει αναπαραγωγή του ήχου λόγω μη υποστήριξης από το πρόγραμμα πλοήγησης ή έλλειψης των απαραίτητων αποκωδικοποιητών ήχου για την αναπαραγωγή του.

Οι παραπάνω παρατηρήσεις ισχύουν και στην εισαγωγή βίντεο.

Δομή εγγράφου

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

Εικόνα 11.2. Ένα πολύ απλό παράδειγμα δομής εγγράφου HTML

Το ίδιο αποτέλεσμα μπορεί να επιτευχθεί και με χρήση της γλώσσας HTML4. Στην περίπτωση αυτή δεν υπάρχει κατάλληλη ετικέτα για σήμανση της χρήσης κάθε τμήματος του εγγράφου. Η κεφαλίδα, το κυρίως κείμενο και το υποσέλιδο θα ήταν όλα «τμήματα του εγγράφου» (div) HTML4 όπως στο ακόλουθο τμήμα.

<div id="header">
<a href="#page1">Πρώτ... </a>
<a href="#page2">Δεύτ...</a> <h1>Τίτλος στην επικεφαλίδα</ h1>
</div>

...

<div id="page2">
<h3>Τίτλος σελίδας 2</h3> <p>Κείμενο σελίδας 2</p>
</div>

...

<div id="footer">
<p>Τέλος εγγράφου</p>
<a href="#">Επικοινωνία</a> |
<a href="#">Όροι χρήσης</a>
</div>

<header>
<nav>
<a href="#page1">Πρώτη σελίδα </a> <a href="#page2">Δεύτερη σελίδα </a>...
</nav>
<h1>Τίτλος στην επικεφαλίδα </h1>
</header>

...

<section id="page2">
<article>
<header><h3>Τίτλος σελίδας 2</h3></header>
<p>Κείμενο σελίδας 2</p>
</article>
</section>.

...

<footer>
<p>Τέλος εγγράφου</p>
<nav>
<a href="#">Επικοινωνία</a> | <a href="#">Όροι χρήσης</a>
</nav>
</footer>

Στην κεφαλίδα (header) υπάρχει περιοχή πλοήγησης με συνδέσεις (nav).
Στο υποσέλιδο (footer) υπάρχει διαφορετική περιοχή πλοήγησης (nav)
Το δεύτερο κείμενο (article) διαχωρίζεται από το υπόλοιπο έγγραφο, καθώς όλα του τα περιεχόμενα τοποθετούνται σε μια χωριστή ενότητα (section) του εγγράφου.
Μέσα στο δεύτερο κείμενο (article) υπάρχει κεφαλίδα, που αναφέρεται στο κείμενο αυτό.

Εύκολα γίνεται αντιληπτό ότι η δομή ενός εγγράφου HTML πρέπει να ακολουθεί κανόνες που αφορούν στη σειρά των δομικών στοιχείων από τα οποία αποτελείται, και στη σημασία που έχει το καθένα (Πίνακας 11.1).

HTML5 και εφαρμογές διαδικτύου

Μία από τις πιο διαδεδομένες χρήσεις της HTML5 είναι η κατασκευή εφαρμογών διαδικτύου. Σε συνδυασμό με τεχνολογίες όπως η Javascript οι φυλλομετρητές μπορούν να εκτελέσουν εφαρμογές που είναι εφάμιλλες των εφαρμογών που εγκαθίστανται στον προσωπικό υπολογιστή. Ακόμη, ένα ενδιαφέρον χαρακτηριστικό είναι η αξιοποίηση της HTML5 σε εφαρμογές που χρησιμοποιούνται σε φορητές συσκευές, όπως ταμπλέτες και κινητά τηλέφωνα. Με αξιοποίηση της τεχνολογίας CSS οι εφαρμογές αυτές μπορούν να προσαρμόζονται στις διαστάσεις της οθόνης και να εμφανίζουν με προσαρμοσμένο τρόπο το περιεχόμενο της εφαρμογής (responsive web design)

Ερωτήσεις - Δραστηριότητες

Επισκεφθείτε την ιστοσελίδα https://el.khanacademy.org/ και περιηγηθείτε σε αυτή. Μπορείτε να διερευνήσετε εάν η ιστοσελίδα αυτή χρησιμοποιεί HTML5;
Πολλές ιστοσελίδες και εφαρμογές προσαρμόζουν αυτόματα την εμφάνισή τους ανάλογα με το πρόγραμμα το οποίο τις χρησιμοποιεί. Επισκεφθείτε την ιστοσελίδα http://www. weebly.com/ με τον αγαπημένο σας φυλλομετρητή και με το κινητό. Παρατηρήστε τις αλλαγές στην εμφάνιση. Σχολιάστε τις και παρουσιάστε τις στην τάξη.

11.3 Ενσωμάτωση (Embedding)

Η εισαγωγή βίντεο και ήχου σε ένα έγγραφο HTML είναι ένα παράδειγμα ενσωμάτωσης περιεχομένου. Σήμερα η πλειονότητα των ιστοσελίδων παρέχουν τρόπους ενσωμάτωσης περιεχομένου σε άλλες ιστοσελίδες.

Η ενσωμάτωση βίντεο από το youtube. Ο κώδικας με την ετικέτα iframe πρέπει να εισαχθεί στην ιστοσελίδα, για να εμφανιστεί το σχετικό βίντεο. Παρατηρήστε τις ρυθμίσεις μεγέθους (420x315) και πώς αυτές αντιστοιχούν στις ιδιότητες της ετικέτας iframe, width και height, καθώς και την ιδιότητα src που παραπέμπει στην «πηγή» του περιεχομένου.

Η ενσωμάτωση πραγματοποιείται με εισαγωγή του κώδικα ενσωμάτωσης που δίνει η ιστοσελίδα η οποία έχει το περιεχόμενο, στην ιστοσελίδα που θέλει να το ενσωματώσει.

Η κυριότερη ετικέτα που χρησιμοποιείται για ενσωμάτωση περιεχομένου είναι η iframe, η οποία υποστηρίζει μεταξύ των άλλων ιδιότητες καθορισμού μεγέθους και η οποία λειτουργεί ως ένα κομμάτι ξεχωριστής πλοήγησης μέσα σε μια ιστοσελίδα. Η ενσωμάτωση μπορεί επίσης να επιτευχθεί με χρήση της ετικέτας div σε συνδυασμό με κώδικα στη γλώσσα προγραμματισμού Javascript.

Παρόλα αυτά δεν απαιτείται καμία γνώση, για να μπορέσει κανείς να ενσωματώσει περιεχόμενο. Αρκεί να γίνει αντιγραφή του κώδικα ενσωμάτωσης και επικόλληση στο έγγραφο HTML της ιστοσελίδας μας.

11.4 Καθορίζοντας την εμφάνιση – CSS

Η CSS, αρχικά των λέξεων Cascading Style Sheets (αλληλουχίες φύλλων στυλ), είναι μια γλώσσα σήμανσης για τον καθορισμό της μορφής και εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων ενός εγγράφου HTML.

Οι κανόνες αυτοί είναι ανεξάρτητοι από το ίδιο το έγγραφο HTML. Επιτρέπουν στον συντάκτη να εστιάσει στη δομή και το περιεχόμενο του εγγράφου με τη γλώσσα HTML και να καθορί-

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

Η χρήση ενός συνόλου κανόνων CSS γίνεται συνήθως με σύνδεση του αντίστοιχου αρχείου με επέκταση .css μέσα στο έγγραφο HTML με έναν από τους παρακάτω τρόπους:

με την παρακάτω ετικέτα link, μέσα στην ετικέτα head (προτεινόμενος τρόπος)
<link rel="stylesheet" media="screen" href="to-styl-mou.css">
με ενσωμάτωση των κανόνων στο έγγραφο HTML με την ετικέτα style
<style> h1 { color: red; } </style>

Χαρακτηριστικοί κανόνες μορφοποίησης

Οι κανόνες μορφοποίησης CSS συντάσσονται σε μορφή απλού κειμένου και αποτελούνται από έναν «επιλογέα» και κανόνες (μέσα σε αγκύλες) που διαχωρίζονται από το ελληνικό ερωτηματικό «;» και αποτελούνται από ζεύγη ονομάτων και τιμών χωρισμένα με άνω κάτω τελεία «:».

P { color: green; border-bottom: 1px solid black; padding: 10px; }

Το παραπάνω παράδειγμα καθορίζει ότι όλες οι παράγραφοι (P) θα έχουν χρώμα κειμένου πράσινο, κάτω περίγραμμα πάχους 1 pixel και περιθώριο 10 px από κάθε πλευρά της παραγράφου.

Οι «επιλογείς» είναι ονόματα ετικετών της γλώσσας HTML (όπως P, H1, div) αλλά συνήθως χρησιμοποιούνται σε συνδυασμό με κλάσεις ή κωδικούς αναγνώρισης. Αρκεί να γνωρίζουμε ότι οι κλάσεις (ιδιότητα class την ετικετών) ομαδοποιούν κάποια στοιχεία, ενώ οι κωδικοί αναγνώρισης (ιδιότητα id των ετικετών) χρησιμοποιούνται για τον μοναδικό προσδιορισμό κάποιων στοιχείων. Για παράδειγμα:

P#title { color: red; font-size: 20px; }

Πέρα από τους κανόνες για τις παραγράφους, ειδικά για την παράγραφο με κωδικό αναγνώρισης title, το χρώμα γραμμάτων θα είναι κόκκινο και το μέγεθος 20pixel.

P.orismos { padding-left: 20px; border-left: 2px; }

Εκτός από τους κανόνες για τις παραγράφους, για όλες τις παραγράφους με κλάση orismos θα υπάρχει περιθώριο αριστερά 20pixel και περίγραμμα αριστερά 2pixel.

Το csszengarden.com, αν και παλαιωμένο, δίνει μια μοναδική ευκαιρία εξερεύνησης των δυνατοτήτων που παρέχει ο διαχωρισμός δομής και περιεχομένου του εγγράφου HTML από τη διάταξη και παρουσίασή του. Όλες οι σελίδες του εμφανίζουν το ίδιο έγγραφο HTML με διαφορετικούς κανόνες CSS. Είναι βέβαιο πως στην αρχή δεν θα μπορείτε να διακρίνετε ότι βλέπετε το ίδιο ακριβώς περιεχόμενο. Δείτε ενδεικτικά δύο εμφανίσεις εδώ.

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

color	χρώμα κειμένου	background	φόντο	font-size	μέγεθος κειμένου
text-align	στοίχιση κειμένου	font-weight	πάχος κειμένου	border	περίγραμμα
margin	απόσταση	padding	περιθώριο	width	πλάτος

Τρόποι δημιουργίας εγγράφων HTML

Πώς μπορεί να δημιουργήσει κάποιος ένα έγγραφο HTML και πώς μπορεί να δοκιμάσει τις ετικέτες HTML αλλά και τους κανόνες στυλ που δημιουργεί; Τόσο τα έγγραφα HTML όσο και τα έγγραφα CSS είναι αρχεία απλού κειμένου. Μπορεί λοιπόν να γίνει επεξεργασία τους με οποιονδήποτε κειμενογράφο όπως το σημειωματάριο. Προτείνεται η χρήση ενός κειμενογράφου με δυνατότητες αναγνώρισης σύνταξης, όπως το Notepad++. Ο χρωματισμός των ετικετών διευκολύνει.

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

Υπάρχουν επίσης πολλές εφαρμογές διαδικτύου, όπου καθένας μπορεί να δοκιμάσει τις δυνατότητες της γλώσσας HTML και CSS, και να πειραματιστεί. Μερικές από τις πιο γνωστές εφαρμογές διαδικτύου που έχουν σχεδιαστεί ειδικά για τον σκοπό αυτό είναι το jsfiddle (http:// jsfiddle.net), το codepen (http://codepen.io), το dabblet (http://dabblet.com) και το cssdesk (http://cssdesk.com).Ένα απλό παράδειγμα δοκιμών στο codepen. Πάνω αριστερά ο κώδικας του εγγράφου HTML, κάτω αριστερά οι κανόνες CSS. Δεξιά η ζωντανή προεπισκόπηση που προσαρμόζεται άμεσα, όταν γίνεται επεξεργασία είτε στον κώδικα HTML είτε στους κανόνες CSS.

Ερωτήσεις - Δραστηριότητες

Χρησιμοποιώντας τους χάρτες στη διεύθυνση http://maps.bing.com βρείτε τη διαδρομή μεταξύ δύο πόλεων που σας ενδιαφέρουν. Εντοπίστε τρόπους ενσωμάτωσης και διαμοίρασης της διαδρομής που σχεδιάσατε και εξερευνήστε τις δυνατές ρυθμίσεις.
Επισκεφθείτε την ιστοσελίδα του σχολείου σας και αναζητήστε περιεχόμενο που έχει ενσωματωθεί. Μπορεί να αφορά σε κάποια ερευνητική εργασία που βρίσκεται στο issuu.com ή μια παρουσίαση από το slideshare.com ή ένα βίντεο από προηγούμενη σχολική εκδήλωση. Εντοπίστε τον κώδικα ενσωμάτωσης. Επισκεφθείτε τις αντίστοιχες ιστοσελίδες και εντοπίστε τρόπους ενσωμάτωσης περιεχομένου.