Η Γλώσσα Προγραμματισμού του Internet HTML μέρος 2

Post Pic
στις 25.05.09. Kατηγορίες HTML με Κανένα Σχόλιο

Στο δεύτερο μέρος της εισαγωγής στην HTML θα δούμε τις Λίστες (Lists) , τους Σύνδεσμους (Links) , τους Δεσμούς (Anchors) και τις Δομές των URLs.

Θα δούμε τι είναι και πώς χρησιμοποιούνται.

Οι Λίστες (Lists)

Η HTML υποστηρίζει τα εξής πέντε είδη λιστών :

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

Οι αριθμημένες λίστες ή λίστες με συγκεκριμένη σειρά κατάταξης είναι λίστες στις οποίες το κάθε στοιχείο είναι αριθμημένο. Περικλείονται μέσα στα tags <OL> και </OL>, δηλ. Ordered List, και κάθε στοιχείο μέσα στη λίστα ξεκινά με το tag <LI>, δηλ. List Item. Το tag <LI> δεν έχει tag τέλους και η εμφάνιση ενός άλλου tag <LI> ή του tag τέλους </OL> υποδεικνύει το τέλος ενός στοιχείου της λίστας.

<Ρ> Πολιτιστικοί Σύλλογοι της Πόλης της Φλώρινας </Ρ>
<OL>
<LI> Λέσχη Πολιτισμού Φλώρινας
<LI> Αριστοτέλης
<LI> Στέγη Φιλοτέχνων Φλώρινας
<LI> Εύξεινος Λέσχη Φλώρινας
<LI> Σύλλογος Μικρασιατών Φλώρινας
</OL>

Οι μη αριθμημένες λίστες είναι λίστες στις οποίες τα στοιχεία μπορούν να εμφανίζονται με οποιαδήποτε σειρά. Χρησιμοποιούν τα tags <UL> και </UL>, δηλ. Unordered List, και τα στοιχεία της λίστας διαχωρίζονται με το tag <LI>. Οι λίστες αυτές μορφοποιούνται συνήθως με κουκκίδες ή κάποιο άλλο σύμβολο.

<P> Οι τρεις Ερινύες ήταν :</P>
<UL>
<LI> Τισιφόνη
<LI> Μέγαιρα
<LI> Αληκτώ
</UL>

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

Για να δημιουργήσουμε έναν σύνδεσμο (link) στην HTML, χρειαζόμαστε τα εξής δύο πράγματα :
•    Το όνομα του αρχείου στον τοπικό δίσκο ή το URL του αρχείου, για το οποίο θέλουμε να δημιουργήσουμε τον σύνδεσμο.
•    Το κείμενο που θα λειτουργεί σαν “ενεργό σημείο επιλογής”, δηλ. θα εμφανίζεται τονισμένο ή υπογραμμισμένο ή με διαφορετικό χρώμα στο παράθυρο του φυλλομετρητή και στο οποίο θα μπορούμε να κάνουμε κλικ για να ακολουθήσουμε τον σύνδεσμο.
Στη σελίδα είναι ορατό μόνο το δεύτερο μέρος και όταν κάνουμε κλικ στο κείμενο που δείχνει σ’ έναν σύνδεσμο, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος σαν σημείο προορισμού.
Για τη δημιουργία ενός συνδέσμου σε μια HTML σελίδα, χρησιμοποιούμε τα tags <Α> και </Α> (anchor). Το tag <Α> αποκαλείται συχνά και tag δεσμού (anchor tag), γιατί μπορεί να χρησιμοποιηθεί και για τη δημιουργία δεσμών, δηλ. συνδέσμων προς σημεία που βρίσκονται στην ίδια σελίδα. Η μορφή του tag <Α> είναι η εξής :

<Α NAME="Up" HREF=".../menu.html" TITLE="Care">

Οι ιδιότητες (attributes) NAME, HREF και TITLE περιγράφουν τον ίδιο τον σύνδεσμο. Η ιδιότητα HREF (Hypertext REFerence, αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του ονόματος ή του URL του αρχείου στο οποίο δείχνει ο σύνδεσμος και είναι υποχρεωτική. Οι ιδιότητες NAME και TITLE μπορούν να παραληφθούν.
Όλο το κείμενο που υπάρχει ανάμεσα στα tags αρχής και τέλους γίνεται ο πραγματικός σύνδεσμος, ο οποίος εμφανίζεται με κάποιο είδος τονισμού στην οθόνη, δηλ. υπογραμμισμένος ή με μπλε ή κόκκινο χρώμα, όταν εμφανίζουμε τη σελίδα σ’ έναν φυλλομετρητή. Σ’ αυτό το κείμενο μπορούμε να κάνουμε κλικ για να μεταβούμε στο σημείο που προσδιορίζεται στην ιδιότητα HREF.
Δείτε κι ένα άλλο παράδειγμα δημιουργίας συνδέσμου :

Go back to <Α HREF=".../menu.html"> Main Menu </A>

Γράφουμε το κείμενο που θα χρησιμοποιηθεί σαν σύνδεσμος ανάμεσα στα tags <Α> και </Α> και προσθέτουμε το όνομα του αρχείου στο οποίο θέλουμε να οδηγεί ο σύνδεσμος στην ιδιότητα HREF του tag αρχής του συνδέσμου. Περικλείουμε το όνομα του αρχείου σε διπλά εισαγωγικά και χρησιμοποιούμε το σύμβολο = μεταξύ του HREF και του ονόματος.
Ο παρακάτω σύνδεσμος αναφέρεται σ’ ένα αρχείο (σελίδα) HTML που υπάρχει στον τοπικό μας δίσκο και μάλιστα στον ίδιο φάκελο (κατάλογο) με το αρχείο HTML από το οποίο καλείται. Ο σύνδεσμος αυτός υπάρχει σ’ ένα στοιχείο μιας λίστας.

<LI><Α HREF="florina.html"> Πληροφορίες για τη Φλώρινα </Α>

Οι απομακρυσμένες σελίδες (remote pages) είναι σελίδες που περιέχονται κάπου αλλού στο Web, μακριά και έξω από το σύστημα με το οποίο δουλεύουμε. Το tag της HTML που χρησιμοποιούμε για τη δημιουργία συνδέσμων προς σελίδες που είναι αποθηκευμένες κάπου αλλού στο Web, είναι σχεδόν όμοιο με το tag που χρησιμοποιούμε για τη δημιουργία συνδέσμων μεταξύ τοπικών σελίδων.
Χρησιμοποιούμε και πάλι το tag <A> με την ιδιότητα HREF και το κείμενο που θέλουμε να εμφανίζεται, αλλά αντί για μια διαδρομή αρχείου στην ιδιότητα HREF, χρησιμοποιούμε το URL της απομακρυσμένης Web σελίδας, όπως στα παρακάτω παραδείγματα :

<A HREF="http://www.line.gr"> Florina’s Home Page </A>
<P> The <A HREF="http://www.zoo.palo-alto.ca.us/ostriches/home.
html"> Palo Alto Zoo </A> has more information on ostriches
</P>

Οι Δεσμοί (Anchors)

Οι δεσμοί (anchors) είναι ειδικά σημεία μέσα σε έγγραφα, στα οποία μπορούμε να μεταβούμε με τη βοήθεια των συνδέσμων, δηλ. οι σύνδεσμοι μπορούν να μας μεταφέρουν σ’ αυτά τα ειδικά σημεία μέσα σε μια σελίδα, αντί να μας μεταφέρουν στην κορυφή μόνο της σελίδας.
Ο σύνδεσμος που δημιουργούμε θα περιέχει και το όνομα του αρχείου που διασυνδέουμε, αλλά και το όνομα του δεσμού. Έτσι, ο φυλλομετρητής θα φορτώσει τη σελίδα και μετά θα μεταβεί στη θέση του δεσμού. Μπορούμε ακόμη να χρησιμοποιούμε συνδέσμους και δεσμούς μέσα στην ίδια σελίδα.
Οι δεσμοί δημιουργούνται περίπου με τον ίδιο τρόπο όπως και οι σύνδεσμοι, αλλά αντί να χρησιμοποιούμε την ιδιότητα HREF στο tag <A>, χρησιμοποιούμε την ιδιότητα ΝΑΜΕ, η οποία δέχεται μια ή περισσότερες λέξεις-κλειδιά (keywords), που χρησιμοποιούνται για την ονομασία του δεσμού.
Ακολουθεί ένα παράδειγμα δημιουργίας δεσμού :

<A NAME="Part4"> Part Four : Learning Italian </A>

Το κείμενο μεταξύ των tags αρχής και τέλους του δεσμού χρησιμοποιείται από τον φυλλομετρητή όταν επιλέγουμε έναν σύνδεσμο ο οποίος δείχνει σ’ αυτόν τον δεσμό. Ο φυλλομετρητής κυλάει τη σελίδα έτσι ώστε το κείμενο του δεσμού να εμφανισθεί στην κορυφή της οθόνης.
Για να δείξουμε σ’ έναν δεσμό μέσα από έναν σύνδεσμο, χρησιμοποιούμε την ίδια μορφή με τη δημιουργία συνδέσμων, με το όνομα αρχείου ή το URL της σελίδας στην ιδιότητα HREF. Όμως, μετά από το όνομα της σελίδας γράφουμε το σύμβολο # και το όνομα του δεσμού, ακριβώς όπως εμφανίζεται στην ιδιότητα ΝΑΜΕ αυτού του δεσμού, ως εξής :

<A HREF="myfile.html#Part4"> Go to Part Four </A>

Στο παραπάνω παράδειγμα, ο φυλλομετρητής θα φορτώσει τη σελίδα myfile.html και μετά θα πάει στον δεσμό που έχει το όνομα Part4. Το κείμενο που υπάρχει στον ορισμό του δεσμού θα εμφανισθεί στην κορυφή της οθόνης.
Για να δημιουργήσουμε συνδέσμους προς ενότητες της ίδιας σελίδας, παραλείπουμε το όνομα της σελίδας και γράφουμε μόνο το σύμβολο # μαζί με το όνομα του δεσμού. Για παράδειγμα, για να δημιουργήσουμε έναν σύνδεσμο προς έναν δεσμό με όνομα History, ο οποίος βρίσκεται στην ίδια σελίδα με τον σύνδεσμο, θα δημιουργήσουμε τον σύνδεσμο ως εξής :

<A HREF="#History"> History of Macedonia </A>

Σύνδεσμοι για Αποστολή e-mail
Μπορούμε να δημιουργήσουμε και συνδέσμους με το προσδιοριστικό πρωτοκόλλου Mailto, για να μπορούν να μας στέλνουν οι αναγνώστες μας e-mail μ’ ένα απλό κλικ.

<A HREF="mailto : john@line.gr"> john@line.gr </A>
<A HREF="mailto : mary@line.gr"> στείλτε μου μήνυμα </A>

Η Δομή ενός URL

Τα URLs είναι ουσιαστικά διευθύνσεις για κομμάτια πληροφορίας που υπάρχουν στο Internet. Τα περισσότερα URLs περιέχουν τα εξής τρία μέρη :

•    το πρωτόκολλο,
•    το όνομα του host υπολογιστή και
•    το όνομα του καταλόγου ή του αρχείου.

Το πρωτόκολλο είναι ο τρόπος με τον οποίο προσπελάζουμε μια σελίδα, δηλ. το είδος του προγράμματος που θα χρησιμοποιήσει ο φυλλομετρητής για να προσπελάσει το αρχείο. Αν ο φυλλομετρητής χρησιμοποιεί το ΗΤΤΡ για να προσπελάσει το αρχείο, το πρωτόκολλο στη διεύθυνση URL είναι το http, αν ο φυλλομετρητής χρησιμοποιεί το FTP, τότε το πρωτόκολλο είναι το ftp, αν χρησιμοποιούμε το Gopher, τότε το πρωτόκολλο είναι το gopher κοκ.
Το πρωτόκολλο αντιστοιχεί σ’ έναν server πληροφοριών, ο οποίος πρέπει να είναι εγκατεστημένος στο σύστημα αυτό για να δουλέψει. Αυτό σημαίνει ότι δεν μπορούμε να χρησιμοποιήσουμε ένα URL με πρωτόκολλο FTP σ’ ένα σύστημα που δεν έχει εγκατεστημένο έναν FTP server.
Τα URLs με πρωτόκολλο HTTP είναι η πιο δημοφιλής μορφή διευθύνσεων URL στο Internet. Το HTTP είναι το ακρωνύμιο του HyperText Transfer Protocol (Πρωτόκολλο Μεταφοράς Υπερ-Κειμένου), και είναι το πρωτόκολλο που χρησιμοποιούν οι servers του Internet για να διακινούν τις HTML σελίδες στο δίκτυο.
Αν ένα URL τελειώνει με το σύμβολο /, τότε το τελευταίο μέρος του URL θεωρείται ότι αποτελεί ένα όνομα καταλόγου. Το αρχείο που φορτώνεται όταν χρησιμοποιούμε ένα τέτοιο URL είναι το προκαθορισμένο (default) αρχείο γι’ αυτόν τον κατάλογο, όπως ορίζεται από τον HTTP server και συνήθως έχει το όνομα index.html.

Tags:

Pantso { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
Ο Παναγιώτης έχει σπουδάσει προγραμματιστής και προγραμματιστής Video Games ενώ τώρα κάνει το Bachelor του σε Computer Science από το Πανεπιστήμιο του Roehampton στο Λονδίνο. Έχει εργαστεί στο Darkfall Online , το πρώτο ελληνικό MMORPG, ως World Builder, είναι BlackBoard Support Certified , ενώ σήμερα εργάζεται ώς HTML Author στην Atcom SA.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>