Plhroforiki - ERG - ANAPTYXHS - EFARMOGON - INERNET

ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ INTERNET (HTML)
Επιμέλεια:
Γιαννουκάκης Αναστάσιος
582 Πληροφορική Ά έτος
ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ INTERNET (HTML) 583
ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ INTERNET (HTML)
Γενικοί ορισμοί
Πρωτόκολλο επικοινωνίας
Ονομάζεται ένα σύνολο κανόνων μέσω των οποίων επικοινωνούν οι υπολογιστές μετα-
ξύ τους. Το πρωτόκολλο που χρησιμοποιείται στο διαδίκτυο είναι το πρωτόκολλο TCP IP
(Transmission control protocol internet protocol).
Ip address (ip)
Κάθε υπολογιστής που συνδέεται στο διαδίκτυο έχει μία μοναδική διεύθυνση η οποία
ονομάζεται ip address και έχει την μορφή 192.168.14.1. Επειδή δεν είναι εύκολο να θυμό-
μαστε τις ip διευθύνσεις υπάρχει μια υπηρεσία καταλόγου για την αναζήτηση ονομάτων η
οποία ονομάζεται DNS (domain name service)
Hypertext (υπερκείμενο)
Είναι ένα ηλεκτρονικό κείμενο το οποίο είναι οργανωμένο με μη γραμμική μορφή δηλαδή
ακολουθείται μια τυχαία σειρά με βάση τους συνδέσμους που υπάρχουν. Τα σημεία σύν-
δεσης με άλλες σελίδες ονομάζονται anchors (άγκυρες)
Hypermedia (υπερμέσα)
Είναι μια συλλογή πληρφοριών αποτελούμενη από πολυμεσικά στοιχεία (βίντεο, ήχο,κεί-
μενο) η οποία είναι οργανωμένη με μη γραμμική μορφή.
Η Γλώσσα Προγραμματισμού του Internet «HTML»

Εισαγωγή
Η HTML είναι η γλώσσα κειμένου που χρησιμοποιείται για να δημιουργηθούν σελίδες
ιστού. Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα
HTML που περιλαμβάνει το κείμενο της σελίδας, τη δομή της και τους συνδέσμους προς
άλλα έγγραφα, εικόνες ή άλλα μέσα. Η HTML είναι το ακρωνύμιο των λέξεων HyperText
Markup Language, δηλ. Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου και βασίζεται στη γλώσ-
σα SGML, Standard Generalized Markup Language, που είναι ένα πολύ μεγαλύτερο σύ-
στημα επεξεργασίας εγγράφων. Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός
αρχείου κειμένου που περιλαμβάνει συνδέσμους και παρέμβαση πάνω σε αυτούς τους
συνδέσμους από το χρήστη. Η HTML δεν αποτελεί έναν επεξεργαστή κειμένου όπως το
Word ή το WordPerfect. Αντίθετα απαιτεί την δημιουργία κειμένου του οποίου τμήματα
«μαρκάρονται» σαν λογικές ενότητες, δηλαδή τίτλους, παραγράφους, λίστες κ.α. και των
οποίων η μετάφραση πραγματοποιείται από το πρόγραμμα ανάγνωσης πουχρησιμοποι-
ούμε.
Αυτό το μοντέλο ανάπτυξης σελίδων είναι ιδιαίτερα ευέλικτο καθώς επιτρέπει σε προ-
γράμματα ανάγνωσης διαφορετικών δυνατοτήτων και χαρακτηριστικών να «βλέπουν» τα
ίδια HTML αρχεία. Αναλυτικότερα, όταν κάποιος χρήστης βλέπει μια σελίδα σας, τότε το
πρόγραμμα ανά-γνωσης παίρνοντας ένα αντίγραφο του αρχείου που περιέχει αυτή τη σε-
λίδα, μεταφράζει τις ετικέτες της HTML και εμφανίζει τα αποτελέσματαστην οθόνη του
χρήστη. Αλλά με τι μοιάζει ένα HTML αρχείο; Ένα απλό παράδειγμα HTML αρχείου φαίνε-
ται παρακάτω:
ΕΝΑ ΠΑΡΑΔΕΙΓΜΑ HTML

<HTML>
<HEAD>
<TITLE>This is the title of the document</TITLE>
</HEAD>
<BODY>
<H1>This is a heading</H1>
<P>This is not a very exciting document. I bet you were expecting <EM>
poetry</EM> or some kind of <STRONG>exciting fact</STRONG> about
the Internet and the WWW.</P>
<P>Sorry, no such luck. This document does contain examples of HTML
markup, for example, here is an «unordered list» :</P>
<UL>
<LI>One item of the list</LI>
<LI>A second list item</LI>
<LI>A third list item that goes on and on and on to I ndicate that the
lists can wrap right around the page and still be nicely formatted by the
browsers.</LI>
<LI>The final item of the list</LI>
</UL>
<P>List are exciting. You can also have ordered lists (the items are num-
bered) and description lists.</P>
<HR>
<P>And you can draw horizontal lines, which are useful for dividing sec-
tions</P>
</BODY>
</HTML>
Όπως μπορεί να διακρίνει κάποιος είναι ένα απλό αρχείο κειμένου. Έτσι, ένα HTML αρ-
χείο δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου ή κάποιον πολύπλοκο HTML επεξερ-
γαστή κειμένου για να δημιουργηθεί. Μπορεί καποιος πολύ απλά να δημιουργήσει ένα
τέτοιο αρχείο με ένα απλό επεξεργαστή κειμένου όπως είναι το NotePad ή Notepad++
για PC που τρέχουν Windows ή και το TeachText για Macintosh. Βέβαια, μετά την ραγδαία
ανάπτυξη του ιστού, υπάρχουν πάρα πολλοί εύχρηστοι (ή όχι) επεξεργαστές κειμένου για
HTML μερικοί από τους οποίους είναι η HotMetal, η HTML Writer, η HotDog, το WebEdit
και πάρα πολλοί ακόμα. Φυσικά, ο καθένας πρέπει να σκεφτεί τι ακριβώς θέλει να δημι-
ουργήσει, τι απαιτήσεις έχει η εφαρμογή του έτσι ώστε να διαλέξει και τα κατάλληλα ερ-
γαλεία (στην περίπτωσή μας τον καλύτερο γι’ αυτόν HTML επεξεργαστή κειμένου ή ακόμα
και έναν απλό, κοινό επεξεργαστή κειμένου).

Η διαφορά ανάμεσα σε ένα απλό αρχείο κειμένου και ένα αρχείο HTML είναι οι ετικέτες
που χρησιμοποιεί η HTML.
Τι είναι οι ετικέτες της HTML ;

Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότε-
ρο ( < ) και μεγαλύτερο ( > ) και την εντολή μέσα στα σύμβολα αυτά που λέει στο πρόγραμ-
μα ανάγνωσης τι σημαίνει κάθε κομμάτι του κειμένου. Όταν ο web browser εμφανίζει μία
σελίδα, σαν και αυτή που φαίνεται πιο πάνω, στην ουσία διαβάζει από ένα αρχείο απλού
κειμένου και κοιτάει για ειδικούς κώδικες ή αλλιώς “ετικέτες” που περιλαμβάνονται μεταξύ
των συμβόλων < και > . Η γενική μορφή μιας HTML ετικέτας είναι:
<tag_name>Σώμα κειμένου</tag_name>
Η HTML και το Internet

Ο φυλλομετρητής (Web browser) παίρνει τις πληροφορίες από τον Web server, τις μορ-
φοποιεί και τις εμφανίζει κατάλληλα για το σύστημά μας. Διαφορετικά προγράμματα φυλ-
λομετρητή μπορεί να μορφοποιούν και να εμφανίζουν το ίδιο αρχείο με διαφορετικό
τρόπο, ανάλογα με τις δυνατότητες του συστήματος στο οποίο τρέχουν και τις επιλογές
διαμόρφωσης του προγράμματος του φυλλομετρητή.
Μια Web σελίδα ή ιστοσελίδα (Webpage) είναι ένα μεμονωμένο στοιχείο μιας παρουσία-
σης για το Web και περιέχεται σ’ ένα αρχείο στο δίσκο, το οποίο ανακτάται από έναν Web
server και μορφοποιείται μέσω ενός φυλλομετρητή.
Η αρχική σελίδα (homepage) είναι η πρώτη ή κορυφαία σελίδα μιας παρουσίασης για το
Web, είναι δηλαδή το σημείο εισόδου ή εκκίνησης για τις υπόλοιπες σελίδες της παρουσί-
ασης και η πρώτη σελίδα που θα συναντήσουν οι αναγνώστες της παρουσίασής μας. Η αρ-
χική σελίδα περιέχει συνήθως μια σύνοψη του περιεχομένου της παρουσίασης με τη μορ-
φή ενός πίνακα περιεχομένων ή μιας ομάδας εικονιδίων.
Η HTML ορίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικε-
φαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists), φόρμες (forms) και πίνακες
(tables). Ορίζει επίσης στυλ χαρακτήρων, όπως η έντονη γραφή (bold) και οι ενότητες κώ-
δικα.
Οι φυλλομετρητές, μαζί με τη δυνατότητά τους να ανακτούν σελίδες από το Web, λειτουρ-
γούν επίσης και σαν μορφοποιητές για την HTML. Όταν διαβάζουμε μια σελίδα γραμμένη
με την HTML σ’ έναν φυλλομετρητή, ο φυλλομετρητής διαβάζει (διερμηνεύει) τα tags της
HTML και μορφοποιεί το κείμενο και τις εικόνες στην οθόνη.
Διαφορετικοί φυλλομετρητές, οι οποίοι τρέχουν σε διαφορετικούς υπολογιστές, μπορεί
να αντιστοιχίζουν διαφορετικά στυλ σε κάθε στοιχείο μιας σελίδας. Αυτό σημαίνει ότι οι
σελίδες που δημιουργούμε με την HTML μπορεί να δείχνουν εντελώς διαφορετικές από
σύστημα σε σύστημα και από φυλλομετρητή σε φυλλομετρητή. Δηλαδή, οι πραγματικές
πληροφορίες και οι σύνδεσμοι που περιέχουν οι σελίδες μας θα είναι πάντα εκεί, αλλά η
εμφάνιση των σελίδων στην οθόνη θα είναι διαφορετική.
Η Δομή ενός URL (Uniform Resource Locator)

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

y το πρωτόκολλο,
y το όνομα του host υπολογιστή και
y το όνομα του καταλόγου ή του αρχείου.
http://www.line.gr/users/eraf/page1.html
πρωτόκολλο // όνομα 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.
Τα δομικά στοιχεία από τα οποία αποτελείται μια ιστοσελίδα

y Κείμενα: η δυνατότητα εισαγωγής κειμένων γίνεται μέσω της γλώσσας HTML. Σε κεί-
μενα μποροούμε να έχουμε
¾ Δημιουργία τίτλων
¾ Διάφορα μεγέθη, στυλ και χρώμματα
¾ Διαχωριστικές γραμμές, παραγράφους
¾ Γραφή μαθηματικών τύπων
¾ Υποσημειώσεις στη σελίδα
y Πίνακες: δημιουργία πινάκων
y Πλαίσια (frames) τα πλαίσια χωρίζουν την ιστοσελίδα σε ανεξάρτητα και αυτόνομα
τμήματα
y Γραφικά εικόνες, φωτογραφίες...
¾ Γρφικά bitmap: εδώ η εικόνα αναλύεται σε στοιχεία (pixel) τα οποία αποθηκεύουν την
ένταση, το χρώμα και τις συντεταγμένες για κάθε Pixel
¾ Διανυσματικά γραφικά: αποτελούνται από στοιχειώδη αλλά ολοκληρωμένα σχέδια.
Κατά την κωδικοποιήση αποθηκεύονται οδηγίες που περιγράφουν κάθε επιμέρους
σχέδιο, στις ιστοσελίδες χρησιμοποιούμε συνήθως jpeg ,gif διότι έχουν την καλύτερη
απόδοση (ποιότητα προς όγκο) μετά από συμπίεση.
y
y Γραφικό υπόβαθρο
y Διακοσμητικά γραφικά
y Κινούμενες εικόνες
y Υπερσύνδεσμοι
y Χάρτης υπερσυνδέσεων
y Μουσική και ήχοι
y Video
y Τρισδιάστατα γραφικά και VRML(VIRTUAL REALITY MARKUP LANGUAGE)
y Εφαρμογές στην ιστοσελίδα (οι εφαρμογές δημιουργούνται με γλώσσα προ- γραμ-
ματισμου java)
Επεκτάσεις της Html JAVA

APPLETS
Είναι μικρά αυτόνομα προγράμματα-εφαρμογές γραμμένα στη γλώσσα προγραμματι-
σμού java τα οποία ενσωματώνονται στις ιστοσελίδες. Εάν ο φυλλομετρητής (Browser)
υποστηρίζει την java, φορτώνει και εκτελεί τον κώδικα του Java Applet. Η εκτέλεση δηλα-
δή του κώδικα γίνεται από τη μεριά του πελάτη. Επειδή όμως ο δημιουργός της ιστοσε-
λίδας που έχει δημιουργήσει το java applet θα μπορούσε εύκολα να δημιουργήσει κώδι-
κα που να προκαλέσει ζημιά στον υπολογιστή του πελάτη, οι φυλλομετρητές περιορίζουν
πολύ τα java applets με απαγόρευση στην πρόσβαση των αρχείων του χρήστη).
ACTIVE X CONTROLS
Είναι μια τεχνολογία που αναπτύχθηκε για να προσφέρει δυνατότητα εισαγωγής πολυ-
μεσικών στοιχείων στις ιστοσελίδες. Τα active X είναι τμήμα εκτελέσιμου κώδικα τα οποία
είτε είναι εγκατεστημένα στον υπολογιστή είτε είναι διαθέσιμα από το διαδίκτυο. Ο φυλ-
λομετρητής θα πρέπει φυσικά να υποστηρίζει τη χρήση ελέγχων active X. (π.χ. Internet
Explorer, Netscape Navigator.)
SCRIPT LANGUAGES
Η τεχνολογία των γλωσσών σεναρίων έχει γνωρίσει ιδιαίτερη ανάπτυξη τα τελευταία χρό-
νια από την μεριά του πελάτη (από την μεριά του εξυπηρετητή υπήρχε). Αντιπροσωπευτι-
κές γλώσσες αυτής τις τεχνολογίες είναι η VBScript και JavaScript οι οποίες δίνουν την δυ-
νατότητα στους χρήστες να δημιουργήσουν εύκολα εφαρμογές στον υπολογιστή με την
χρήση απλών εργαλείων δημιουργίας ιστοσελίδων. Με τον τρόπο αυτό είναι πιο εύκολη
η συγγραφή εφαρμογών που εκτελούνται στον φυλλομετρητή, (browser) παρά στον εξυ-
πηρετητή. Επίσης είναι η μόνη λύση, όταν ο εξυπηρετητής δεν επιτρέπει το φόρτωμα τέ-
τοιων προγραμμάτων για λόγους ασφαλείας.
Το μειονέκτημα αυτών των εφαρμογών είναι, ότι δεν βοηθούν από την πλευρά του πελά-
τη (client) σε κάποιες εργασίες, όπως η επεξεργασία φορμών, διότι απαιτούν πρόσβαση
στον εξυπηρετητή.
Εξυπηρετητής (web server) παγκοσμίου ιστού

O web server είναι ένα πρόγραμμα που λαμβάνει και επεξεργάζεται αιτήσεις χρηστών και
έπειτα τους προμηθεύει με ιστοσελίδες μέσα από το διαδίκτυο. Η διαχείριση του σε σχέση
με την εγκατάσταση του είναι αρκετά δύσκολη και περίπλοκη και γίνεται από τους διαχει-
ριστές του ιστού που είναι γνωστοί ως webmasters. Οι λειτουργίες ενός webmaster είναι:
y Παροχή σελίδων στις σελίδες που ζητούν. Αυτό επιτυγχάνεται μέσα από το μοντέλο
client-server. Ο εξυπηρετητής (server) εντοπίζει και αποστέλλει τα κατάλληλα αρχεία
στον πελάτη (client).
y Αυθεντικοποίηση του χρήστη. Μια από τις σπουδαιότερες εργασίες του server είναι η
αναγνώριση-ταυτοποίηση (authentication) του χρήστη .
y Εκτέλεση σεναρίων (scripts). Οι εξυπηρετητές είναι υπεύθυνοι για την εκτέλεση των
σεναρίων (scripts). Τα σενάρια αυτά αποκαλούνται συνήθως CGI (Common Gateway
Interfaces scripts) δηλαδή σενάρια Συνήθων Διασυνδέσεων Εισόδου. Τα σενάρια CGI
αποτελούν εξωτερικά προγράμματα που ενεργούν ως πύλες μεταξύ εξυπηρετητών
και των υπόλοιπων εφαρμογών στον τοπικό υπολογιστή αποκαθιστώντας έτσι ένα
αμφίδρομο δίαυλο επικοινωνίας.
y Λειτουργία ως διαμεσολαβητές (proxies). Δηλαδή λειτουργούν ως διαμεσολαβητές-
αντιπρόσωποι άλλων πληροφοριών, όπως μια βάση δεδομένων ή κάποιο τόπο Υπη-
ρεσίας Μεταφοράς Αρχείων (ftp site).
Οργάνωση ιστοσελίδων
Όπως έχουμα αναφέρει ένας διαδικτυακός τόπος (web site) ή εφαρμογή Web αποτελείται
από ιστοσελίδες οι οποίες έχουν κατάληξη .html. Ανάλογα με τον τρόπο που διασυνδέο-
νται μεταξύ τους οι ιστοσελίδες ενός κοινού τόπου ή εφαρμογής διακρίνουμε δύο βασι-
κούς τρόπους οργάνωσης, τη σειριακή και την ιεραρχική οργάνωση.
Στην σειριακή κάθε σελίδα συνδέεται με την προηγούμενη και την επόμενη όπως φαίνε-
ται στο παρακάτω σχήμα:
Στη ιεραρχική οργάνωση ιστοσελίδων από μια ιστοσελίδα μπορεί να περιηγηθούμε προς
τα εμπρός ή προς τα πίσω σε περισσότερες από μια ιστοσελίδες, ενώ μπορούμε να γυρί-
σουμε πίσω στην ιστοσελίδα από την οποία μεταβήκαμε στην τρέχουσα όπως φαίνεται
στο παρακάτω σχήμα:
Η Δομή μιας HTML σελίδας

Οι σελίδες που γράφουμε με την HTML είναι απλά αρχεία κειμένου σε μορφή ASCII, που
σημαίνει, ότι δεν περιέχουν πληροφορίες για κάποιο λειτουργικό σύστημα ή πρόγραμμα
αλλά μπορούν να διαβαστούν από οποιονδήποτε συντάκτη υποστηρίζει απλό κείμενο.
Τα αρχεία της HTML περιέχουν τα ακόλουθα :
y Το κείμενο της σελίδας.
y Τα tags της HTML, τα οποία υποδεικνύουν τα στοιχεία, τη δομή και τη μορφοποίηση
των σελίδων, καθώς επίσης και τους συνδέσμους υπερ-κειμένου προς άλλες σελίδες
ή προς αρχεία άλλων μορφών (πολυμέσα).
Κανόνες Σύνταξης Html-Παράδειγμα:
y Όλες οι ετικέτες εσωκλείονται μεταξύ των “<”, και “>”.

y Οτιδήποτε βρίσκεται μεταξύ των “” είναι σχόλιο και ο browser δεν το
εμφανίζει.
y Έχουμε δύο είδη ετικέτες:
a) τις απλές ετικέτες μορφής όπως ή <BR> η οποία δηλώνει αλλαγή γραμμής και έχουμε
b) τις διπλές ετικέτες της μορφής <ετικέτα>……</ετικέτα> στις οποίες η μία είναι ετικέ-
τα αρχής και η άλλη ετικέτα τέλους ,π.χ. η ετικέτα <TITLE>.
y Σε ορισμένες ετικέτες μπορεί να ακολουθούν παράμετροι οι οποίοι να διευκρινίζουν
τη λειτουργία της ετικέτας π.χ. η ετικέτα <BODY> μπορεί να εμφανιστεί με την παρα-
κάτω μορφή: <BODY BGColor=”#cccccc”>. Στην προκειμένη περίπτωση χρησιμοποι-
ώντας την παράμετρο BGColor δηλώνουμε, ότι το χρώμα του υπόβαθρου είναι γκρι.
Αν δεν χρησιμοποιούσαμε την παράμετρο τότε εξ ορισμού το χρώμα θα ήταν λευκό.
y Οι ετικέτες (στην HTML) μπορεί να γράφονται με πεζά ή κεφαλαία γράμματα της λατι-
νικής αλφαβήτου. Είναι καλό να χρησιμοποιούμε είτε πεζά είτε κεφαλαία και όχι συν-
δυασμό κα των δύο για να υπάρχει ομοιομορφία στον κώδικα μας. (στην XHTML μό-
νο πεζά)
y Κενές γραμμές οι περισσότερα του ενός κενά μεταξύ λέξεων στο κείμενο δεν λαμβά-
νονται υπόψιν.
Τα περισσότερα tags της HTML έχουν την εξής μορφή :

<ΌνομαTag> επηρεαζόμενο κείμενο </OνομαTag>
Τα tags της HTML έχουν γενικά ένα tag αρχής και ένα tag τέλους ή ένα tag ανοίγματος και
ένα tag κλεισίματος, τα οποία περικλείουν το κείμενο που επηρεάζουν. Το tag αρχής ενερ-
γοποιεί μια λειτουργία ή ένα χαρακτηριστικό, όπως είναι για παράδειγμα η έντονη γραφή,
ενώ το tag τέλους την απενεργοποιεί. Τα tags τέλους έχουν το ίδιο όνομα με τα tags αρχής,
αλλά με πρόθεμα τον χαρακτήρα /.
Δεν αποτελούν ζευγάρι όλα τα tags της HTML, καθώς ορισμένα είναι “μονομελή”, ενώ άλλα
περιέχουν επιπλέον πληροφορίες και κείμενο μέσα στα σύμβολα <>. Ακόμη, όλα τα tags
της HTML δεν κάνουν διάκριση μεταξύ κεφαλαίων και πεζών γραμμάτων, δηλ. μπορούμε
να τα γράφουμε είτε με κεφαλαίους είτε με πεζούς χαρακτήρες είτε με οποιονδήποτε συν-

δυασμό τους. Συνήθως τα γράφουμε κεφαλαία για να μπορούμε να τα ξεχωρίζουμε ευκο-
λότερα από το κείμενο της σελίδας.
Τα αρχεία της HTML πρέπει να τα γράφουμε σε συντάκτες κειμένων, δηλ. προγράμματα
που μπορούν να αποθηκεύσουν αρχεία κειμένου σε μορφή ASCII. Τέτοια προγράμματα εί-
ναι τα Notepad, Wordpad και Write των Windows, το Edit του DOS και τα vi, emacs και pico
του UNIX.
Το όνομα του αρχείου θα πρέπει να έχει επέκταση .html ή .htm σε συστήματα DOS ή
Windows που επιτρέπουν επεκτάσεις μόνο τριών χαρακτήρων.
Η HTML χρησιμοποιεί τρία tags για την περιγραφή της συνολικής δομής μιας σελίδας, τα
οποία παρέχουν ορισμένες απλές πληροφορίες κεφαλίδας. Αυτά τα tags προσδιορίζουν
τη σελίδα μας στους φυλλομετρητές και παρέχουν επίσης απλές πληροφορίες για τη σε-
λίδα, όπως τον τίτλο ή τον συγγραφέα της, πριν από τη φόρτωση ολόκληρης της σελίδας.
Το Tag <HTML>
Το πρώτο tag που ελέγχει τη δομή μιας σελίδας που είναι γραμμένη σε κώδικα HTML είναι
το <HTML>, που υποδεικνύει ότι το περιεχόμενο του αρχείου περιέχει κώδικα γραμμένο
στη γλώσσα HTML. Όλο το κείμενο και οι εντολές μέσα σε μια HTML σελίδα θα πρέπει να
τοποθετούνται ανάμεσα στα tags αρχής και τέλους <HTML>, ως εξής :
<HTML>
... κείμενο σελίδας...
</HTML>
Το Tag <HEAD>
Το tag <HEAD> προσδιορίζει ότι, οι γραμμές που περιέχονται ανάμεσα στην αρχή και στο
τέλος του, είναι ο πρόλογος για το υπόλοιπο του αρχείου. Στην ενότητα αυτή δεν τοποθε-
τούμε ποτέ κείμενο, αλλά συνήθως μόνο τον τίτλο της σελίδας.
<HTML>
<HEAD>
<TITLE> Εδώ είναι ο τίτλος </TITLE>
</HEAD>
</HTML>
Το Tag <BODY>
Το υπόλοιπο της HTML σελίδας, δηλ. όλο το κείμενο και οποιοδήποτε άλλο περιεχόμενο,
όπως σύνδεσμοι, εικόνες κ.ά., περικλείεται μέσα σ’ ένα tag <BODY>. Η δομή της σελίδας
δείχνει τώρα ως εξής :
<HTML>
<HEAD>
<TITLE> Εδώ είναι ο τίτλος </TITLE>
</HEAD>
<BODY>
... κυρίως κείμενο...
</BODY>
</HTML>
Όλα τα tags της HTML σχηματίζουν ξεχωριστές, ένθετες ενότητες κειμένου και θα πρέπει
να είμαστε πολύ προσεκτικοί, ώστε να μην υπάρχει επικάλυψη μεταξύ των tags. Αυτό ση-
μαίνει ότι πρέπει να κλείνουμε κάθε tag που ανοίγουμε, εκτός κι αν είναι μονομερές, και
ακόμη όταν κλείνουμε ένα tag, κλείνουμε το πιο πρόσφατο tag που ανοίξαμε.
Το Tag <TITLE>
Κάθε HTML σελίδα χρειάζεται έναν τίτλο, ο οποίος θα υποδεικνύει το περιεχόμενό της και
αυτό γίνεται με το tag <TITLE>. Ο τίτλος περιγράφει το περιεχόμενο και τον σκοπό μιας σε-
λίδας και εμφανίζεται στη γραμμή τίτλου των δημοφιλέστερων φυλλομετρητών.
Τα tags <TITLE> τοποθετούνται πάντα μέσα στο ζευγάρι των tags <HEAD>, ως εξής :
<HTML>
<HEAD>
<TITLE> Παρουσίαση της Φλώρινας </TITLE>
</HEAD>
<BODY>
... κυρίως κείμενο...
</BODY>
</HTML>
Τα Tags Επικεφαλίδων
Οι επικεφαλίδες (headings) χρησιμοποιούνται για τον διαχωρισμό των ενοτήτων κειμέ-
νου, ακριβώς όπως και σ’ ένα βιβλίο. Η HTML ορίζει 6 επίπεδα επικεφαλίδων, που τα tags
τους έχουν την εξής μορφή :
<H1> Τίτλος </H1>
Οι αριθμοί υποδεικνύουν το επίπεδο επικεφαλίδας (Η1 έως Η6). Οι επικεφαλίδες δεν αριθ-
μούνται, όταν εμφανίζονται στην οθόνη αλλά έχουν ένα χαρακτηριστικό που τις ξεχωρίζει
από το κανονικό κείμενο, όπως μεγαλύτερο μέγεθος ή εντονότερο κείμενο ή υπογράμμι-
ση. Καθώς πηγαίνουμε από το Η1 στο Η6, ελαττώνεται το μέγεθος του κειμένου της επικε-
φαλίδας στην οθόνη.
Οι επικεφαλίδες είναι σαν τα στοιχεία μιας διάρθρωσης και ένα καλό παράδειγμα χρήσης
επικεφαλίδων σε μια σελίδα HTML είναι το παρακάτω :
<Η1> Η Πόλη της Αθήνας</Η1>

<Η2> Γενικά για τη Αθήνα </Η2>
<Η2> Η Ιστορία της Αθήνας </Η2>

<Η3> Η Αθήνα στην Προϊστορική Περίοδο </Η3>
<Η3> Η Αθήνα στην Αρχαιότητα </Η3>
<Η4> Η Νεώτερη Ιστορία της Αθήνας </Η4>
<Η5> Η Αθήνα σήμερα </Η5>
<Η6> Οι ολυμπιακοί αγώνες στην Αθήνα </Η6>
Τα Tags Παραγράφων
Τα tags παραγράφων είναι τα <Ρ> και </Ρ> και η αλλαγή παραγράφου σημαίνει το ξεκίνη-
μα μιας νέας γραμμής και μια επιπλέον κατακόρυφη απόσταση από παράγραφο σε παρά-
γραφο. Το tag </Ρ> είναι προαιρετικό στην HTML. (στην XHTML είναι ΥΠΟΧΡΕΩΤΙΚΟ γενι-
κά θα πρέπει να κλείνει ότι ανοίγει αλλιώς θα υπάρχει ¨διαρροή¨ πχ μορφοποίησης)
<Ρ> Πολιτιστικοί Σύλλογοι της Πόλης της Αθήνας </Ρ>
Το Tag<CENTER>
Μπορούμε να χρησιμοποιήσουμε το tag κεντραρίσματος <CENTER>, κεντράροντας όλο
το περιεχόμενο της HTML που βρίσκεται μέσα στα μέλη αρχής και τέλους.
Τοποθετούμε το tag <CENTER> πριν από το κείμενο που θέλουμε να κεντράρουμε και το
tag </CENTER> μετά το τέλος του κειμένου, ως εξής :
<CENTER>
<H1> Ο Μάντης Τειρεσίας </H1>
<H1> Ο Μάντης Κάλχας </H1>
</CENTER>
Τα Tags Φυσικών Στυλ

Τα tags φυσικών στυλ υποδεικνύουν επακριβώς τον τρόπο με τον οποίο θα μορφοποιη-
θεί το κείμενο, όπως έντονη γραφή, υπογράμμιση κ.ά. Κάθε tag μορφοποίησης (φυσικού
στυλ) έχει ξεχωριστό μέλος αρχής και τέλους και επηρεάζει το κείμενο που βρίσκεται μέ-
σα σ’ αυτά τα δύο μέλη. Τα tags φυσικών στυλ της HTML είναι τα εξής:
y Η ετικέτα <B>....</B> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με έντο-
νη γραφή
y Η ετικέτα <I>...</I> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με πλάγια
γραφή
y Η ετικέτα <U>...</U> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με πλάγια
γραφή
y Η ετικέτα <SMALL>...</SMALL> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο
με μικρού μεγέθους χαρακτήρες
y Η ετικέτα <BIG>...</BIG> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με με-
γάλου μεγέθους χαρακτήρες
y Η ετικέτα <STRONG>...</STRONG> έχει παρόμοια λειτουργία με την ετικέτα <Β>...</
Β>
y Η ετικέτα <SUB>...</SUB> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με μι-

κρού μεγέθους χαρακτήρες κάτω από την κανονική γραμμή του κειμένου (δείκτης)
y Η ετικέτα <SUP>...</SUP> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με μι-
κρού μεγέθους χαρακτήρες πάνω από την κανονική γραμμή του κειμένου (εκθέτης)
y Η ετικέτα <ΤΤ> ...</ΤΤ> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο γραμμέ-
νο με γραμματοσειρά μηχανής
Μπορούμε να δημιουργούμε ένθετα tags μορφοποίησης χαρακτήρων, για παράδειγμα

μπορούμε να χρησιμοποιήσουμε τα tags έντονης και πλάγιας γραφής ταυτόχρονα, ως
εξής :
Το Tag <PRE>
Το πρόγραμμα ανάγνωσης εμφανίζει ότι περικλείεται μέσα στην ετικέτα <PRE>...</PRE>,
όπως ακριβώς το έχουμε γράψει στην HTML, αφήνει μια κενή γραμμή και χρησιμοποιεί τη
γραμματοσειρά Courier. Έτσι, π.χ. το κείμενο που ακολουθεί θα εμφανιστεί στην οθόνη
του χρήστη όπως ακριβώς το έχουμε γράψει:
<PRE>
This text
will appear
formatted
just like this
</PRE>
Και το αποτέλεσμα στην οθόνη μας είναι:

Με την ετικέτα αυτή μπορούμε να ξεπεράσουμε δύο προβλήματα:

y να ελέξουμε την εμφάνιση του κειμένου και
y να εμποδίσουμε το πρόγραμμα ανάγνωσης να εμφανίσει το κείμενο με διαφορετική
μορφή απο αυτή που εμείς επιθυμούμε.
Παρόλο που ακούγονται σαν να λέμε το ίδιο πράγμα με δυο διαφορετικούς τρόπους, στην
πραγματικότητα πρόκειται για δυο διαφορετικές κατηγορίες προβλημάτων.
Έτσι, σχετικά με το πρώτο πρόβλημα μπορούμε να χρησιμοποιήσουμε το <PRE> για να
εμφανίσουμε κείμενο όπως εμείς το θέλουμε. Αυτό σημαίνει ότι μπορεί να θέλουμε το κεί-
μενο να εμφανιστεί στη μέση της γραμμής ή στο τέλος της. Όταν χρησιμοποιούμε έναν
επεξεργαστή κειμένου μπορούμε απλά να προσθέσουμε κενά με τον στηλοθέτη (tab) και
να ρυθμίσουμε τη θέση του κειμένου. Τα προγράμματα ανάγνωσης όμως αγνοούν τους
στηλοθέτες ή τους μεταφράζουν με τρόπους που δεν περιμένουμε. Όσον αφορά στο δεύ-
τερο πρόβλημα υπάρχουν περιπτώσεις στις οποίες τα δεδομένα δεν θέλουμε να εμφανί-
ζονται ως μια ακολουθία, π.χ. μια αναφορά από μια βάση δεδομένων.
Το Tag <HR>
Το tag <HR>, που δεν έχει αντίστοιχο tag τέλους και δεν χρησιμοποιεί κείμενο, δημιουργεί
μια οριζόντια γραμμή (γραφικό) στη σελίδα. Οι γραμμές γραφικών είναι ιδανικές για τον
οπτικό διαχωρισμό των ενοτήτων μιας Web σελίδας.
<HR>
<H2> Οι Μοίρες ήταν οι εξής :</H2>
<UL>
<LI>Κλωθώ</LI>
<LI>Λάχεση</LI>
<LI>Άτροπος</LI>
</UL>
<HR>
Στην οθόνη μας θα δούμε το εξής:
Η ετικέτα <HR> τοποθετεί μια οριζόντια γραμμή κατά μήκος της σελίδας. Μπορεί να
χρησι-μοποιηθεί επίσης και για να χωρίσει μια σελίδα σε διαφορετικές περιοχές, ανά-
λογα με το περιεχόμενο της κάθε μιας. Μπορεί να πάρει τα παρακάτω προσδιοριστικά:
<HRWIDTH=¨75%¨ SIZE=¨3¨ ALIGN=¨LEFT¨>
Το μήκος (WIDTH) μπορεί να καθοριστεί με δυο τρόπους : ο ένας αναφέρεται σε ποσοστό

επι τοις εκατό του μήκους της οθόνης και ο άλλος είναι σε εικονοστοιχεία (pixels). Έτσι, κα-
θορίζοντας WIDTH=”50%” θα πάρουμε μια ευθεία γραμμή με μήκος ίσο με το μισό του πα-
ράθυρου, ενώ με WIDTH=”200” θα πάρουμε μια ευθεία με μήκος ίσο με 200 εικονοστοι-
χεία. Το μέγεθος (SIZE) ορίζεται σε εικονοστοιχεία και το προκαθορισμένο μήκος ποικίλει
ανάλογα με το πρόγραμμα ανάγνωσης (μπορεί να είναι 2 ή 3 εικονοστοιχεία).
Το κεντράρισμα (ALIGN) έχει τη σημασία της στοίχισης της ευθείας στο κέντρο (CENTER),
δεξιά (RIGHT) ή αριστερά (LEFT). Στο δικό μας παράδειγμα, έχουμε μία οριζόντια γραμμή
που έχει το προκαθορισμένο μέγεθος (3), μήκος ίσο με το 75% της οθόνης και είναι στοι-
χισμένη στο κέντρο. Βέβαια, θα πρέπει να ληφθεί υπόψην ότι δεν υποστηρίζουν όλα τα
προγράμματα ανάγνωσης τα προσδιοριστικά αυτά και σε αυτές τις περιπτώσεις θα εμφα-
νίσουν μια ευθεία γραμμή στο προκαθορισμένο της μέγεθος και σε μήκος ίσο με το πα-
ράθυρο
Το Tag <BR>
Το tag <BR> χωρίζει μια γραμμή κειμένου στο σημείο στο οποίο εμφανίζεται. Όταν ένας
φυλλομετρητής συναντήσει ένα tag <BR>, ξεκινά το αμέσως επόμενο κείμενο από το αρι-
στερό περιθώριο της επόμενης γραμμής. Το <BR> δεν προσθέτει επιπλέον χώρο πάνω ή
κάτω από τη νέα γραμμή και δεν αλλάζει τη γραμματοσειρά ή το στυλ του κειμένου.
Οι Λίστες (Lists)
Η HTML υποστηρίζει τα εξής πέντε είδη λιστών :
y Αριθμημένεςλίστες ή αλλιώς αριθμητικούς καταλόγους, που παρουσιάζουν τα στοι-
χεία του καταλόγου κατά αύξουσα αριθμητική σειρά.
y Λίστες κουκκίδων ή αλλιώς μη αριθμητικούς καταλόγους, που χρησιμοποιούνται για
την παρουσίαση των στοιχείων τους χωρίς κάποια ιδιαίτερη σειρά.

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

Εδώ μπορούμε να δημιουργήσουμε λίστα που να δομείται σε δύο επίπεδα. π.χ: <OL>
<LI>first item
<OL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</OL>
<LI>second item
<OL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</OL>
<LI>third item
<OL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</OL>
</OL>
Εδώ πρέπει να αναφέρουμε ότι μπορεί να γίνει συνδυασμός αυτών των ειδών λίστας. Το
μόνο που χρειάζεται είναι φαντασία και φυσικά προσοχή να μην ξεχάσουμε κάποια ετικέ-
τα ή να μην βάλουμε κάποια σε μη-κατάλληλη θέση. Μπορούμε δηλαδή να έχουμε:
<OL>
<LI>first numbered item
<LI>second numbered item
<UL>
<LI>bullet item one
<LI>bullet item two
</UL>
<LI>third numbered item
</OL>
Στην ετικέτας έναρξης μπορούμε να χρησιμοποιήσουμε δύο παραμέτρους την type και
την start
<OL type = τιμή start = τιμή >
Η type δηλώνει το είδος της αριθμητικής λίστας και η start την τιμή έναρξης.
Type Start
1 Κάποια αριθμητική τιμή
A Τιμές από A έως Z
a Τιμές από a έως z
i Αριθμητική τιμή σε λατινικούς χαρακτήρες
Οι μη αριθμημένες λίστες είναι λίστες στις οποίες τα στοιχεία μπορούν να εμφανίζονται με

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

Έχουμε τη δυνατότητα να δημιουργήσουμε λίστα δυο επιπέδων, αν τα δεδομένα μας το
απαιτούν, απλά με το να «φωλιάσουμε» τη μία λίστα μέσα στη άλλη:
<UL>
<LI>first item
<UL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</UL>
<LI>second item
<UL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</UL>
<LI>third item
<UL>
<LI>first sub-item
<LI>second sub-item
<LI>third sub-item
</UL>
</UL>
Αυτές οι λίστες είναι πολύ καλές, αν έχουν δεδομένα των οποίων η δομή είναι πολύπλο-
κη αλλά θέλουν μεγάλη προσοχή για να μην ξεχάσουμε κάποια ετικέτα (θα μας εμφανίζο-
νται άλλα αντί άλλων).
Στην ετικέτα έναρξης ή στην ετικέτα στοιχείου μπορούμε να χρησιμοποιήσουμε μία πα-
ράμετρο την Type ως εξής :
<UL TYPE = ΤΙΜΗ > ή <LI TYPE = ΤΙΜΗ>
Οι δυνατές τιμές της παραμέτρου type είναι οι εξής:

Type ΕΙΔΟΣ ΣΥΜΒΟΛΟΥ
Disc Μαύρος δίσκος (bullet)
Circle Κύκλος
Square Τετράγωνο
Οι λίστες γλωσσαρίου ή αλλιώς κατάλογοι ορισμών χρησιμοποιούνται για την παρουσία-

ση σε ιστοσελίδες ορισμών και των επεξηγήσεων τους. Η μορφή τους είναι η εξής:
Εκτυπωτής
Είναι το περιφερειακό με το οποίο εκτυπώνουμε ότι έχουμε σε ηλεκτρονική μορφή σε
χαρτί.
Για την δημιουργία μιας λίστας γλωσσαρίου χρησιμοποιούμε την παρακάτω δομή:
<DL> ετικέτα έναρξης ερμηνευτικού καταλόγου
<DT> ετικέτα όρου προς επεξήγηση
<DD> ετικέτα επεξήγησης
<DT> ετικέτα όρου προς επεξήγηση
<DD> ετικέτα επεξήγησης
</DL> ετικέτα τέλους ερμηνευτικού καταλόγου
Τέλος πρέπει να αναφέρουμε ότι μπορεί να γίνει και συνδυασμός καταλόγων σε μια ιστο-
σελίδα.
Εισαγωγή Εικόνας
Σε μια ιστοσελίδα είναι ιδιαίτερα σημαντικό εκτός από κείμενο να υπάρχουν και εικόνες. Οι ει-
κόνες δεν είναι ενσωματωμένες σε μια σελίδα αλλά βρίσκονται αποθηκευμένες σε ξεχωριστά
αρχεία και καλούνται από τον κώδικα της σελίδας για να παρουσιαστούν σε συγκεκριμένα ση-
μεία. Κατά την αποθήκευση των ψηφιακών εικόνων στον υπολογιστή μας χρησιμοποιούνται
διάφοροι τρόποι μορφοποίησης (format). Μερικοί από τους πιο συνηθισμένους τύπους μορ-
φοποίησης είναι : bmp, jpg, gif, tif. Ο τρόπος κωδικοποίησης μιας εικόνας έχει σημασία γιατί
δεν υποστηρίζουν όλοι οι φυλλομετρητές όλες τις κωδικοποιήσεις. Οι περισσότεροι φυλλομε-
τρητές υποστηρίζουν .gif και jpg. Οι ένθετες εικόνες υποδεικνύονται με το tag <IMG> (image),
το οποίο δεν έχει tag τέλους αλλά έχει πολλές ιδιότητες, με πιο σημαντική την SRC (source). Η
ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε,
γραμμένο μέσα σε εισαγωγικά δηλ. <IMG SRC =”PATH/FILE PICTURE”>
Για το αρχείο image.gif, που βρίσκεται στον ίδιο κατάλογο με το αρχείο της Web σελίδας,
μπορούμε να χρησιμοποιήσουμε το ακόλουθο tag :
<P> <IMG SRC=ïmage.gif¨> </P>
ενώ αν ήταν αποθηκευμένο στον γονικό κατάλογο του τρέχοντα, το εξής :
<P> <IMG SRC=¨../image.gif¨> </P>
Το tag <IMG> πρέπει να τοποθετείται μέσα σ’ ένα στοιχείο παραγράφου ή επικεφαλίδας.
Η ετικέτα <IMG SRC = PATH /FILE IMAGE >, μπορεί να περιέχει και άλλες παραμέτρους οι
οποίες είναι οι εξής:
Παράμετρος Τιμές Λειτουργία

Alt Επεξηγηματικό κείμενο Επεξηγεί το είδος της ψηφιακής φωτογραφίας σε πε-
ρίπτωση που δεν φαίνεται στο χρήστη για οποιοδή-
ποτε λόγο
Align Left Τοποθετεί την εικόνα αριστερά
Right Τοποθετεί την εικόνα δεξιά
Top Τοποθετεί την εικόνα επάνω από το κείμενο
Middle Τοποθετεί την εικόνα στο κέντρο
Bottom Τοποθετεί την εικόνα κάτω από το κείμενο
Οι Σύνδεσμοι (Links)
Μία από τις βασικές λειτουργίες που μπορούμε να ενσωματώσουμε σε μια ιστοσελίδα εί-
ναι αυτή των υπερσυνδέσμων. Για να δημιουργήσουμε έναν σύνδεσμο (link) στην HTML,
χρειαζόμαστε τα εξής δύο πράγματα :
y Το όνομα του αρχείου στον τοπικό δίσκο ή το URL του αρχείου, για το οποίο θέλουμε
να δημιουργήσουμε τον σύνδεσμο.
y Το κείμενο που θα λειτουργεί σαν “ενεργό σημείο επιλογής”, δηλ. θα εμφανίζεται τονι-
σμένο ή υπογραμμισμένο ή με διαφορετικό χρώμα στο παράθυρο του φυλλομετρη-
τή και στο οποίο θα μπορούμε να κάνουμε κλικ για να ακολουθήσουμε τον σύνδεσμο.
Στη σελίδα είναι ορατό μόνο το δεύτερο μέρος και όταν κάνουμε κλικ στο κείμενο που δεί-
χνει σ’ έναν σύνδεσμο, ο φυλλομετρητής χρησιμοποιεί το πρώτο μέρος σαν σημείο προ-
ορισμού.
Για τη δημιουργία ενός συνδέσμου σε μια HTML σελίδα, χρησιμοποιούμε τα tags <Α> και
</Α> (anchor). Το tag <Α> αποκαλείται συχνά και tag δεσμού (anchor tag), γιατί μπορεί να
χρησιμοποιηθεί και για τη δημιουργία δεσμών, δηλ. συνδέσμων προς σημεία που βρίσκο-
νται στην ίδια σελίδα. Η μορφή του tag <Α> είναι η εξής :
<Α HREF=”αρχείο ή σημείο σύνδεσης”>λέξη ή εικόνα υπερσύνδεσμος </A>
Η ιδιότητα HREF (Hypertext REFerence, αναφορά υπερ-κειμένου) χρησιμοποιείται για τον
καθορισμό του ονόματος ή του URL του αρχείου στο οποίο δείχνει ο σύνδεσμος και είναι
υποχρεωτική.
Όλο το κείμενο που υπάρχει ανάμεσα στα tags αρχής και τέλους γίνεται ο πραγματικός
σύνδεσμος, ο οποίος εμφανίζεται με κάποιο είδος τονισμού στην οθόνη, δηλ. υπογραμμι-
σμένος ή με μπλε ή κόκκινο χρώμα, όταν εμφανίζουμε τη σελίδα σ’ έναν φυλλομετρητή. Σ’
αυτό το κείμενο μπορούμε να κάνουμε κλικ για να μεταβούμε στο σημείο που προσδιορί-
ζεται στην ιδιότητα HREF.
Δείτε κι ένα άλλο παράδειγμα δημιουργίας συνδέσμου :
Go back to <Α HREF=¨.../menu.html¨> Main Menu </A>
Γράφουμε το κείμενο που θα χρησιμοποιηθεί σαν σύνδεσμος ανάμεσα στα tags <Α> και
</Α> και προσθέτουμε το όνομα του αρχείου στο οποίο θέλουμε να οδηγεί ο σύνδεσμος
στην ιδιότητα HREF του tag αρχής του συνδέσμου. Περικλείουμε το όνομα του αρχείου σε
διπλά εισαγωγικά και χρησιμοποιούμε το σύμβολο = μεταξύ του HREF και του ονόματος.
Υπερσύνδεσμοι που οδηγούν σε άλλες HTML σελίδες

Ο παρακάτω σύνδεσμος αναφέρεται σ’ ένα αρχείο (σελίδα) 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¨> Athen’s Home Page </A>
<P> The <A HREF=»http://www.zoo.palo-alto.ca.us/ostriches/home.html»> Palo Al-

to Zoo </A> has more information on ostriches </P>
Υπερσύνδεσμοι που οδηγούν σε άλλα πολυμεσικά αρχεία

Εκτός από την σύνδεση μέσω ενός υπερσυνδέσμου σε μια άλλη σελίδα, είναι δυνατόν ο
υπερσύνδεσμος να οδηγεί στην εμφάνιση ενός απλού αρχείου εικόνας ή ήχου. Στην περί-
πτωση αυτή η ιδιότητα HREF είναι το μονοπάτι ή το όνομα του αρχείου που θέλουμε να
εμφανιστέι πατώντας τον υπερσύνδεσμο.
<A HREF=”μονοπάτι-όνομα αρχείου”> υπερσύνδεσμος </A>
Εικόνες - Σύνδεσμοι
Μια εικόνα μπορεί να αποτελέσει επίσης και σύνδεσμο υπερ-μέσου, δηλ. hypermedia,
προς άλλες Web σελίδες ή δεσμούς μέσα στο τρέχον έγγραφο. Για να γίνει αυτό, συμπε-
ριλαμβάνουμε ένα tag <IMG> ανάμεσα στα μέλη αρχής και τέλους του tag δημιουργίας
συνδέσμων <A>. Η εικόνα θα λειτουργεί σαν ένα “ενεργό σημείο” πάνω στο οποίο θα μπο-
ρούμε να κάνουμε κλικ για να ενεργοποιήσουμε τον σύνδεσμο, όπως στο παρακάτω πα-
ράδειγμα :
<A HREF=ïndex.html¨> <IMG SRC=üparrow.gif¨> </A>
Αν συμπεριλάβουμε και κείμενο μαζί με την εικόνα στο tag συνδέσμου, τότε και η εικόνα
και το κείμενο γίνονται ¨ενεργά σημεία¨, τα οποία δείχνουν στην ίδια σελίδα, όπως στο πα-
ρακάτω παράδειγμα :
<A HREF=ïndex.html¨> <IMG SRC=üparrow.gif¨> Στο index </A>
Οι Δεσμοί (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>

Μενού Κάθετου Κειμένου (Vertical text menu )

Το μενού κάθετου κειμένου δίνει στους χρήστες μια σειρά από λέξεις ή φράσεις που ανα-
πτύσσονται κάθετα και από τις οποίες πρέπει αυτός να επιλέξει. Ο χρήστης κάνοντας κλικ
πάνω σε ένα αντικείμενο μπορεί να οδηγηθεί σε μια διαφορετική σελίδα ή σε μια άλλη
ενέργεια (π.χ. να δει μια εικόνα ή να ακούσει ένα αρχείο ήχου). Το μενού αυτό έχει τη μορ-
φή:
<P>Phrase or sentence introducing to the menu :</P>

<UL>
<LI><A HREF=öption1.html¨> first option </A>
<LI><A HREF=öption2.html¨> second option </A>
<LI><A HREF=öption3.html¨> third option </A>
<LI><A HREF=öption4.html¨> fourth option </A>
<LI><A HREF=öption5.html¨> fifth option </A>
</UL>
Βλέπουμε λοιπόν ότι δημιουργούμε το μενού κάθετου κειμένου με τη χρήση ενος συνδέ-
σμου που ενεργοποιείται από κείμενο και είναι οργανωμένος ως στοιχείο μιας μη αριθ-
μημένης λίστας. Το “Phrase or sentence introducing to the menu :” που βρίσκεται ανάμεσα
στις ετικέτες <P> και </P> είναι η εξήγηση του τι περιλαμβάνει το μενού και ουσιαστικά
μας εισάγει στα αντικείμενά του. Το option1.html δηλώνει την URL της σελίδας ή της ενέρ-
γειας στην οποία θα κατευθυνθεί ο χρήστης αν επιλέξει την πρώτη φράση μέσα από το
κείμενο first option, το ίδιο φυσικά ισχύει και για τις υπόλοιπες επιλογές. Αν δε θέλουμε να
εμφανιστούν οι βούλες, σαν αποτέλεσμα της μη αριθμημένης λίστας, μπορούμε απλώς να
γράψουμε :

<UL>
<A HREF=öption1.html¨> first option </A><BR>
<A HREF=öption2.html¨> second option </A><BR>
<A HREF=öption3.html¨> third option </A><BR>
<A HREF=öption4.html¨> fourth option </A><BR>
<A HREF=öption5.html¨> fifth option </A><BR>
</UL>
Δηλαδή να παραλείψουμε τις ετικέτες <LI> και απλώς να προσθέσουμε τις <BR>, έτσι
ώστε να μην εμφανίζονται όλες οι επιλογές στοιβαγμένες σε μια σειρά.
Μενού Οριζόντιου Κειμένου

Το μενού αυτό δίνει στους χρήστες μια οριζόντια λίστα επιλογών. Είναι το ίδιο με το προ-
ηγούμενο με τη μόνη διαφορά ότι οι επιλογές είναι οργανωμένες σε οριζόντια διάταξη.
Έτσι, έχουμε:

[<A HREF=»option1.html»> first option </A>]
[<A HREF=»option2.html»> second option </A>]
[<A HREF=»option3.html»> third option </A>]
[<A HREF=»option4.html»> fourth option </A>]
[<A HREF=»option5.html»> fifth option </A>]
Τα στοιχεία που αποτελούν το μενού είναι τα ίδια με τα προηγούμενα. Εδώ όμως δεν έχου-
με <BR> στο τέλος κάθε επιλογής, έτσι ώστε όλες να εμφανίζονται οριζόντια σε μια γραμ-
μή. Για να ξεχωρίζουν οι επιλογές μεταξύ τους τοποθετούμε το χαρακτήρα [ ή μπορούμε
να βάλουμε και τον \.
Σύνδεσμοι για Αποστολή e-mail

Μια ειδική περίπτωση χρήσης των συνδέσμων και της ετικέτας <A>.. .</A> είναι η περί-
πτωση που χρησιμοποιούμε τον σύνδεσμο για την αποστολή email. Μπορούμε να δημι-
ουργήσουμε και συνδέσμους με το προσδιοριστικό πρωτοκόλλου Mailto, για να μπορούν
να μας στέλνουν οι αναγνώστες μας e-mail μ’ ένα απλό κλικ. Η ετικέτα στην συγκερκιμένη
περίπτωση χρησιμοποιείται ως εξής:
<Α HREF=”mailto:διεύθυνση ηλεκτονικού ταχυδρομείου”> υπερσύνδεσμος </A>

<A HREF=”mailto: mary@line.gr”> στείλτε μου μήνυμα </A>
Αλλαγή Χρώματος Φόντου

Το χρώμα του υπόβαθρου σε μια ιστοσελίδα είναι λευκό και των γραμματοσειρών είναι
μαύρο, εάν δεν έχουμε αλλάξει τις προκαθορισμένες (default) ρυθμίσεις. Για ν’ αλλάξουμε
το χρώμα χρησιμοποιούμε ειδικές παραμέτρους.Για να αλλάξουμε το χρώμα του φόντου
μιας σελίδας, προσθέτουμε την ιδιότητα BGCOLOR “χρώμα υπόβαθρου” και Text = “χρώ-
μα κειμένου” και ενσωματώνονται στην ετικέτα αρχής <BODY><BODY BGColor=”χρώμα
υποβάθρου” Text =”χρώμα κειμένου”>.
<BODY BGCOLOR=¨#FFFFFF¨>
<BODY BGCOLOR=¨#934CE8¨>
Επίσης μπορούμε να μεταβάλουμε τόσο το χρώμα όσο και τη γραμματοσειρά που χρη-
σιμοποιούμε σε διάφορες παραγράφους. Αυτό μπορεί να γίνει με την χρήση της ετικέτας
<FONT>...</FONT> και τις παραμέτρους γραμματοσειράς και χρώματος που μπορούμε να
ενσωματώσουμε σ’ αυτή. Οι παράμετροι αυτοί είναι Face = “όνομα γραμματοσειράς” και
Color =”χρώμα κειμένου” π.χ.
<Font Face=”όνομα γραμματοσειράς” Color=”χρώμα κειμένου”> κείμενο που επιδρά η
γραμματοσειρά </Font>
Οι τιμές αυτές μπορεί να είναι είτε χρώματα γραμμένα στην αγγλική γλώσσα έιτε εξαψή-
φιοι δεκαεξαδικοί αριθμοί της μορφής #RRGGBB, όπου κάθε δύο 16αδικά ψηφία αντιστοι-
χούν σε μια δεκαδική τιμή από 0 έως 255. Κάθε χρώμα δημιουργείται από την σύνθεση
των βασικών τριών χρωμάτων κόκκινο(R), πράσινο(G) και μπλε(B). Κάποιες από τις τιμές
που μπορούμε να δώσουμε φαίνονται παρακάτω:
ΧΡΩΜΑ ΤΙΜΗ ΤΙΜΗ
Άσπρο White
Μαύρο Black #000000
Κόκκινο Red #ff0000
Κίτρινο Yellow #ffff00
Μπεζ Light yellow #ffecb0
Μπλε Blue #0000ff
Ανοιχτό μπλε Light blue #5a68e4
Γαλάζιο Cyan #39cde8
Πράσινο Green #008000
Ανοιχτό πράσινο Light green #77f47d
Καφέ Brown #804040
Πορτοκαλί Orange #ff8000
Γκρι Gray #808080
Μοβ Magenta #800080
Ροζ Pink #ff0080
Αλλαγή Χρώματος Κειμένου

Για ν’ αλλάξουμε το χρώμα του κειμένου και των συνδέσμων σε μια σελίδα, μπορούμε να
προσθέσουμε κάποια από τις παρακάτω ιδιότητες στο tag <BODY>. Οι ιδιότητες αυτές
μπορούν να έχουν σαν τιμή έναν αριθμό ή ένα όνομα χρώματος.
y TEXT, ελέγχει το χρώμα όλου του κυρίως κειμένου της σελίδας, εκτός των συνδέσμων.
y LINK, ελέγχει το χρώμα των συνδέσμων της σελίδας που δεν έχουμε ακόμη επισκε-
φθεί και είναι εξ ορισμού συνήθως μπλε.
y VLINK, ελέγχει το χρώμα των συνδέσμων που έχουμε επισκεφθεί και είναι εξ ορισμού
συνήθως κόκκινο ή μωβ.
y ALINK, ελέγχει το χρώμα του συνδέσμου πάνω στον οποίο έχουμε κάνει κλικ χωρίς να
αφήσουμε το πλήκτρο του ποντικιού και είναι εξ ορισμού συνήθως κόκκινο.
Για παράδειγμα, για να δημιουργήσουμε μια σελίδα με μαύρο φόντο, λευκό κείμενο και
φωτεινούς μωβ τους μη επιλεγμένους συνδέσμους, θα μπορούσαμε να χρησιμοποιήσου-
με μία από τις παρακάτω εντολές :
<BODY BGCOLOR=¨#000000¨ TEXT=¨#FFFFFF¨ LINK=¨#9805FF¨>

<BODY BGCOLOR=¨black¨ TEXT=¨white¨ LINK=¨purple¨>
ΜέγεθοςΓραμματοσειράς (<Font Size=..>)

Τώρα πια τα προγράμματα ανάγνωσης μας δίνουν τη δυνατότητα να έχουμε μια ποικιλία
στο μέγεθος που θα ορίσουμε τη γραμματοσειρά του κειμένου. Έτσι, μπορούμε να έχουμε
μια λέξη ή και έναν χαρακτήρα σε διαφορετικό μέγεθος από τους υπόλοιπους. Το προκα-
θορισμένο μέγεθος είναι 3 και η κλίμακα κυμαίνεται από 1 ως και 7. Αν δεν αλλάξουμε το
μέγεθος τότε εξακολουθεί να ισχύει το τελευταίο που είχαμε ορίσει.
Είναι:
<Font size=¨1¨> This is text at a size of 1.
Η παρακάτω μορφή είναι αυτή με την οποία θα εμφανιστεί σε πρόγραμμα ανάγνωσης:
This is text at a size of 5.
Το Tag <BGSOUND>
Ο Internet Explorer πρόσθεσε και ένα tag για την αναπαραγωγή ένθετων αρχείων ήχου.
Αυτά τα αρχεία φορτώνονται αυτόματα με το φόρτωμα της σελίδας, δεν παράγουν κανέ-
να ορατό αποτέλεσμα και για να προσθέσουμε έναν ένθετο ήχο παρασκηνίου σε μια Web
σελίδα, χρησιμοποιούμε το tag <BGSOUND> με την ιδιότητα SRC, ως εξής :
<BGSOUND SRC=”mozart.au”>
Με την ιδιότητα LOOP μπορούμε να επαναλάβουμε τον ήχο πολλές φορές και αν η τιμή
της LOOP είναι το -1 ή INFINITE, ο ήχος θα επαναλαμβάνεται διαρκώς μέχρι να φύγουμε
από τη σελίδα. Το πρόγραμμα Internet Explorer υποστηρίζει τρεις διαφορετικές μορφές
αρχείων για έν-θετους ήχους, τη μορφή AU (μ-law) της εταιρείας Sun, τα αρχεία μορφής
wav των Windows καθώς και τα αρχεία MIDI (.mid).
Κινούμενο Κείμενο (Marquee)

Με τον όρο κινούμενο κείμενο ή marquee ονομάζουμε μια γραμμή κειμένου που ολισθαί-
νει και μετακινείται από τη μια πλευρά μιας Web σελίδας μέχρι την άλλη. Το κινούμενο
κείμενο είναι ένα χαρακτηριστικό του Internet Explorer που δεν υποστηρίζεται από άλ-
λους φυλλομετρητές, οι οποίοι μπορούν να εμφανίζουν το κείμενο, αλλά δεν υποστηρί-

ζουν την κίνησή του. Για να δημιουργήσουμε κινούμενο κείμενο, χρησιμοποιούμε το tag
<MARQUEE> και το κείμενο που περιλαμβάνεται μεταξύ των tags αρχής και τέλους είναι
αυτό που θα μετακινείται στην οθόνη :
<MARQUEE> Επισκεφθείτε το Νυμφαίο </MARQUEE>
Μια φράση κινούμενου κειμένου εμφανίζεται σε δική της γραμμή, με το μέγεθος και τη
γραμματοσειρά του στοιχείου της σελίδας στο οποίο ανήκει. Το κείμενο ολισθαίνει από
τα δεξιά προς τα αριστερά και εξαφανίζεται τελείως πριν επανεμφανιστεί από τα δεξιά και
πάλι. Αυτή η ανακύκλωση γίνεται συνέχεια και με αργό ρυθμό.
Στοίχιση Κειμένου
Για να στοιχίσουμε μια μεμονωμένη επικεφαλίδα ή παράγραφο κειμένου, χρησιμοποιούμε
την ιδιότητα ALIGN γι’ αυτό το HTML στοιχείο, που μπορεί να πάρει μια από τις εξής τρεις
τιμές : LEFT, RIGHT ή CENTER.
Ακολουθεί ένα παράδειγμα :
<H1 ALIGN=¨CENTER¨> Πληροφορίες για τη Φλώρινα </H1>

<P ALIGN=¨LEFT¨> Ο Νομός με τις Έξι Λίμνες </P>
<H2 ALIGN=¨RIGHT¨> <A HREF=»www.line.gr/hotels.html»>
Πού θα Μείνετε </A></H2>
<H2 ALIGN=¨RIGHT¨> <A HREF=»www.line.gr/resorts.html»>
Πού θα Πάτε </A></H2>
<H2 ALIGN=¨RIGHT¨> <A HREF=»www.line.gr/sights.html»>
Τι θα Δείτε </A></H2>
Το Tag <DIV>
Μια πιο ευέλικτη μέθοδος για τη στοίχιση κειμένου είναι η χρήση του tag <DIV> (division),
που περιλαμβάνει κι αυτό την ιδιότητα ALIGN. Αλλά, αντί να στοιχίζει μεμονωμένα στοι-
χεία, το tag <DIV> χρησιμοποιείται για να περικλείσει μια ολόκληρη ομάδα από οποιαδή-
ποτε άλλα tags της HTML και επηρεάζει όλα τα tags και το κείμενο που βρίσκεται μέσα στο
ζευγάρι των tags <DIV> και </DIV>.
Για να στοιχίσουμε ένα τμήμα κώδικα HTML, περικλείουμε αυτόν τον κώδικα μέσα στα μέ-
λη αρχής και τέλους του tag <DIV> και γράφουμε την ιδιότητα ALIGN στο tag αρχής, που
μπορεί να έχει τις τιμές LEFT, RIGHT ή CENTER.
Ακολουθεί ένα παράδειγμα:
<H1 ALIGN=¨CENTER¨> Πληροφορίες για τη Φλώρινα </H1>

<P ALIGN=¨LEFT¨> Ο Νομός με τις Έξι Λίμνες </P>
<DIV ALIGN=¨RIGHT¨>
<H2><A HREF=»line.gr/hotels.html»> Πού θα Μείνετε </A></H2>
<H2><A HREF=»line.gr/resorts.html»> Πού θα Πάτε </A></H2>
<H2><A HREF=»line.gr/sights.html»> Τι θα Δείτε </A></H2>
</DIV>
Όλος ο κώδικας HTML μεταξύ των δύο tags <DIV> θα στοιχιστεί σύμφωνα με την τιμή της
ιδιότητας ALIGN, ενώ αν υπάρχουν ξεχωριστές ιδιότητες ALIGN στις επικεφαλίδες ή στις
παραγράφους μέσα στο ζευγάρι των tags <DIV>, οι τιμές αυτές υπερισχύουν έναντι της
γενικής ρύθμισης.
Πίνακες (Tables)
Στις πρώτες μέρες του ιστού οι πίνακες δεν υπήρχαν. Ακόμα και μέχρι το πρώτο εξάμηνο
του 1995 υπήρχε ένας αρκετά σημαντικός αριθμός χρηστών των οποίων το πρόγραμμα
ανάγνωσης δεν υποστήριζε πίνακες. Σήμερα όμως μπορεί ο καθένας που φτιάχνει έναν
πίνακα να είναι σίγουρος ότι τα προβλήματα του παρελθόντος λύθηκαν. Η βασική δομή
ενός πίνακα είναι τρεις στήλες (column) και δύο γραμμές (row). Από τη στιγμή βέβαια που
κάποιος έχει κατανοήσει τη δομή αυτή είναι πολύ εύκολη οποιαδήποτε διαφοροποίηση
επιθυμεί να πραγματοποιήσει, προσθέτοντας ή αφαιρώντας στήλες ή γραμμές. Η HTML
που απαιτείται μπορεί να φανεί στην αρχή λίγο πολύπλοκη, αλλά στην πραγματικότητα
δεν είναι τόσο δύσκολο όσο φαίνεται :
<TABLE BORDER>
<CAPTION ALIGN=¨TOP¨> Caption for the table </CAPTION>
<TR> 
<TD>Content of Cell 1A</TD>
<TD>Content of Cell 1B</TD>
<TD>Content of Cell 1C</TD>
</TR> 
</TR> 
</TABLE> 
(σημείωση : ό,τι βρίσκεται ανάμεσα σε  αποτελεί σχόλιο και δεν
μεταφράζεται από το πρόγραμμα ανάγνωσης).
Αναλυτικότερα έχουμε :
<TABLE>
Ας προχωρίσουμε τώρα στην ανάλυση των ετικετών της HTML. Ενας πίνακας ορίζεται
απ’ ο,τιδήποτε υπάρχει ανάμεσα στις ετικέτες <TABLE> και </TABLE>. Μέσα στην ετικέτα
<TABLE> μπορούμε να τοποθετήσουμε προσδιοριστικά που ελέγχουν την εμφάνιση όλου
του πίνακα, όπως π.χ. να προσθέσουμε περίγραμμα γύρω από τον πίνακα :
<TABLE BORDER>.
Παράμετροι της ετικέτας table

Allign Left ή Right Καθορίζει την στοίχιση του πίνακα. Εάν δεν
δηλωθεί παράμετρος ο πίνακας στοιχίζεται
αριστερά
Bgcolor Χρώμα υποβάθρου Καθορίζεται το χρώμα του υπόβαθρου. Το
χρώμα εμφανίζεται σε όλες τις γραμμές και τα
κελιά του πίνακα εκτός και αν αναιρεθεί από
μια παράμετρο Bgcolom η οποία είναι ενσω-
ματωμένη στις ετικέτες <TR> ή<TD>
Border Τιμή > ή = 0 Καθορίζει το πάχος σε pixels του περιθωρί-
ου του πίνακα. Η τιμή 0 σημαίνει ότι ο πίνακας
δεν έχει καθόλου περιθώρια. Εάν δεν δηλωθεί
καμία παράμετρος το προκαθορισμένο πάχος
είναι 2 pixel
BorderColor Χρώμα πειθωρίου Καθορίζει το χρώμα του περιθωρίου του πίνα-
κα
Cellpadding Τιμή > ή = 0 Καθορίζει την απόσταση σε Pixel μεταξύ των
περιθωρίων των κελιών του πίνακα από τα δε-
δομένα που υπάρχουν στα κελιά
Cellspacing Τιμή > ή = 0 Καθορίζει την απόσταση σε Pixel μεταξύ των
κελιών του πίνακα
Height Θετική τιμή Καθορίζει το ύψος του πίνακα. Εάν η παράμε-
τρος δεν δηλωθεί τότε το ύψος καθορίζεται
από τα δεδομένα
Widht Θετική τιμή ή ποσοστό Καθορίζει το πλάτος του πίνακα. Εάν η παρά-
μετρος δεν δηλωθεί τότε το ύψος καθορίζεται
από τα δεδομένα
<CAPTION>
Με την ετικέτα <CAPTION>, που είναι προαιρετικό και μπορεί να παραληφθεί, προσθέτου-
με τίτλο στον πίνακα, στην περίπτωσή μας ο τίτλος θα είναι : Caption for the table, ότι βρί-
σκεται δηλαδή μεταξύ των <CAPTION> και <CAPTION>. Στην αρχική ετικέτα μπορούμε να
συμπεριλάβουμε και το προσδιοριστικό ALIGN που λαμβάνει τις τιμές top και bottom και
ορίζει ανάλογα τη θέση στην οποία θα τοποθετηθεί ο τίτλος του πίνακα.
<TR> Κάθε γραμμή του πί-
νακα εμφανίζεται ανάμεσα στις ετικέτες <TR> και </TR>.
<TD>
Το περιεχόμενο κάθε κελιού μιας γραμμής του πίνακα περικλείεται από τις ετικέτες <TD>
και </TD>. Για παράδειγμα, η πρώτη σειρά του πίνακα περιλαμβάνει τα παρακάτω τρία κε-
λιά :

</TR> 
Μπορεί να παρατηρήσει κανείς ότι οι ετικέτες <TD> και </TD> εμφανίζονται μόνο ανάμε-
σα στα <TR> και </TR>.
Οι παράμετροι της ετικέτας <TD>... </TD>

Allign Center or left or right Καθορίζει την οριζόντια στοίχιση των δεδομέ-
νων του κελιού. Η προκαθορισμένη επιλογή είναι
η αριστερή στοίχιση
Valign Bottom or middle or top Καθορίζει την κάθετη στοίχιση δεδομένων του
κελιού. Η τιμή bottom καθορίζει ότι τα δεδομένα
θα είναι κάθετα στοιχισμένα στην κάτω πλευρά,
η Middle ότι θα είναι στοιχισμένα στη μέση του
κελιού και η top ότι θα είναι στοιχισμένα στην πά-
νω πλευρά του κελιού. Η προκαθορισμένη είναι
η Middle
Bgcolor Χρώμα Καθορίζει το χρώμα υπόβαθρου του κελιού. Σε
περίπτωση που έχει δηλωθεί χρώμα υπόβαθρου
στην ετικέτα αρχής <table>και χρώμα υπόβα-
θρου κελιού στην ετικέτα αρχής <td>, τότε για το
κελί υπερισχύει το χρώμα υπόβαθρου που έχει
δηλωθεί στην <td>
Colspan Ακέραιη θετική τιμή Καθρίζει τηνον αριθμό των στηλών στις οποίες
θα επεκταθεί το κελί. Εάν δεν οριστεί κάτι επε-
κτείνεται σε μία στήλη.
Rows-
pan Ακέραιη θετική τιμή Καθορίζει τον αριθμό γραμμών στις οποίες θα
επεκταθεί το κελί. Σε περίπτωση μη ορισμού επε-
κτέινεται σε μια γραμμή.
Height Ακέραιη θετική τιμή Καθορίζει το ύψος του κελιού σε pixel. Εάν δεν
δηλωθεί παράμετρος καθορίζεται από τα δεδο-
μένα των κελιών
Width Ακέραιη θετική τιμή Καθορίζει το πλάτος του κελιού σε pixel. Εάν δεν
δηλωθεί παράμετρος καθορίζεται από τα δεδο-
μένα των κελιών
<TH>...</TH>
Η ετικέτα αυτή καθορίζει ένα κελί πίνακα το οποίο περιέχει τον τίτλο γραμμής ή στήλης
του πίνακα, η διαφορά της με την <TD> είναι ότι τα δεδομένα που περιέχο- νται στην συ-
γκεκριμένη ετικέτα είναι γραμμένα έντονα.
Πλαίσια (FRAMES)
Μια σημαντική δυνατότητα που μας δίνει η HTML είναι να χωρίζουμε την οθόνη σε πε-
ρισσότερα παράθυρα από ένα. Κάθε ένα από αυτά τα παράθυρα μπορεί να έχει τη δι-
κή του μπάρα κύλισης. Ο διαχωρισμός της οθόνης γίνεται με την παρακάτω ετικέτα
<FRAMESET>... </FRAMESET>. Ορίζει τη διάταξη των πλαισίων μέσα στο παράθυρο. Ο
διαχωρισμός μπορεί να γίνει είτε σε γραμμές είτε σε στήλες. Εάν θέλουμε να διαχωρι-
στει και σε γραμμές και σε στήλες πρέπει να χρησιμοποιήσουμε εμφωλευμένες ετικέτες
<frameset> στην αρχική ετικέτα <frameset>.
Παράμετροι της ετικέτας <frameset>
Παράμετρος Τιμή Σημασία

Rows Σειρά τιμών χωριζόμενων Καθορίζει σε πόσες γραμμές θα χωρι-
από κόμμα, οι οποίες καθο- σθεί η οθόνη και ποιο θα είναι το μέγε-
ρίζουν το ύψος των γραμ- θος των γραμμών αυτών. Ανάλογα με το
μών σε pixels ή το ύψος των πόσες τιμές υπάρχουν στην παράμετρο
γραμμών σε ποσοστά αυτή, σε τόσες γραμμές θα χωρισθεί και
η οθόνη
cols Σειρά τιμών χωριζόμενων Καθορίζει σε πόσες στήλες θα χωρι-
από κόμμα, οι οποίες καθο- σθεί η οθόνη και ποιο θα είναι το μέγε-
ρίζουν το πλάτος των στη- θος των στηλών αυτών. Ανάλογα με το
λών σε Pixels ή το πλάτος πόσες τιμές υπάρχουν στην παράμετρο
στηλών σε ποσοστά αυτή, σε τόσες στήλες θα χωρισθεί και
η οθόνη
Border Ακέραιη τιμή μεγαλύτερη ή Καθορίζει το πλάτος των περι-θωρίων
ίση με το 0 σε pixels
BorderColor Χρώμα Καθορίζει το χρώμα των περι-θωρίων
των παραθύρων
FrameBorder Yes or no Καθορίζει αν τα περιθώρια των παραθύ-
ρων θα έχουν τρισδιάστατη μορφή
<FRAME>
Ορίζει ένα πλαίσιο
Παράμετροι της ετικέτας frame

Παράμετρος Τιμή Σημασία
Bordercolor Χρώμα Καθορίζει το χρώμα του περιθωρίου
FrameBorder Yes ή no Καθορίζει αν τα περιθώρια του πα-
ραθύρου θα έχουν τρισδιάστατη
μορφή ή όχι
MarginHeight Ακέραιη τιμή μεγαλύτερη ή Καθορίζει σε pixel την απόσταση
ίση με το 0 των περιεχομένων του παραθύρου
από την πάνω και κάτω πλευρά
MarginWidth Ακέραιη τιμή μεγαλύτερη ή Καθορίζει σε Pixel την απόσταση
ίση με το 0 των περιεχομένων του παραθύρου
από την αριστερή και δεξιά πλευρά
του πλαισίου
Name Όνομα Καθορίζει το όνομα του πλαισίου
Noresize Δεν παίρνει τιμή Αν η παράμετρος δηλωθεί σημαίνει
ότι ο χρήστης δεν μπορεί να μετα-
βάλει το μέγεθος του παραθύρου
Scrolling Yes ή no ή Auto Καθορίζει αν θα εμφανίζονται μπά-
ρες ολίσθησης. Αν η τιμή είναι yes
θα εμφανί-ζονται, αν είναι no δεν
θα εμφανίζονται αν είναι auto τό-
τε ο φυλλομετρητής καθορίζει αν οι
μπάρες θα εμφανίζονται ή όχι
Srg Διεύθυνση Καθορίζει ποια ιστοσελίδα θα εμφα-
νίζεται στο πλαίσιο
<IFRAME>... </IFRAME>
Δημιουργεί ένα ένθετο πλαίσιο.
<NOFRAME>... </NOFRAME>
Εναλλακτικό περιεχόμενο για εφαρμογέs browser οι οποίες δεν υποστηρίζουν τα πλαίσια.
<APPLET>... </APPLET>
Περιλαμβάνει μια μινι εφαρμογή της java.
<AREA>
To στοιχείο AREA χρησιμοποιείται για τον ορισμό συνδέσμων και δεσμών.
<IMG>
Περιλαμβάνει μια εικόνα στο έγγραφο .
<MAP>... </MAP>
Όταν χρησιμοποιείται με το στοιχείο AREA δημιουργεί μια image map εικόνα στην πλευ-
ρά του client.
<OBJECT>... </OBJECT>
Περιλαμβάνει ένα αντικείμενο.
<PARAM>
Αρχικοποιεί ένα αντικείμενο.
Συγκεντρωτικός Πίνακας Βασικοτέρων

HTML (XHTML) TAGS
Basic
<!DOCTYPE> Defines the document type
<html>-</html> Defines an HTML document
<head>-</head> Defines information about the document
<body>-</body> Defines the document’s body
<body bgcolor=”..”>-</body> Defines body color background
<body background=”…”>-</body> Defines body background image
<title>-</title> Defines a title for the document
 Defines a comment
<hr>-</hr> Defines a thematic change in the content
<br>-</br> Inserts a single line break
<br clear=”left”|right|all”> Inserts line breaks to clear space next to image …
<nobr>-</nobr> No break
<wbr> Defines a possible line-break
<p>-</p> Defines a paragraph
<h1> to <h6> Defines HTML headings
Formatting
<em>-</em> Defines emphasized text
<strong>-</strong> Defines important text
<big>-</big> Defines big text
<small>-</small> Defines small text
<tt>-</tt> Defines teletype text
<q>-</q> Defines a short quotation
<code>-</code> Defines a piece of computer code
<ins>-</ins> Defines a text that has been inserted into a document
<del>-</del> Defines text that has been deleted from a document
<abbr title=”..”>-</abbr> Defines an abbreviation
<acronym title=”..”>-<acronym> Defines an acronym
<dfn>-</dfn> Defines a definition term
<var>-</var> Defines a variable
<samp>-</samp> Defines sample output from a computer program
<kbd>-</kbd> Defines keyboard input
<i>-</i> Defines italic text
<b>-</b> Defines bold text
<u>-</u> Defines undreline text
<s>-</s> Defines strike text
<sup></sup> Defines superscripted text
<sub></sub> Defines subscripted text
<font face=”…..”></font>
<font size=”…...”></font> Defines font, color, and size of font text
<font color=”…..”></font>
<p align=“left“></p>
<p align=“right“></p>
<p align=“center“></p> Defines the align of font of paragraph
<p align=“justify“></p>
<pre></pre> Defines preformatted text
<center>πχ (image) ή (table)</center> Defines centered…
<blockquote></blockquote> Defines a section that is quoted from another source
<marquee>-</marquee> behaviour=”slide”
direction=”left” ή “right”
bgcolor=”#555555”
behavior=”alternate”,
behavior=”alternate” scrollamount= «7» (όσο μεγαλύτερο τό-
σο πιο γρήγορο scroll)
behavior=”alternate” scrolldelay= «50» (όσο μικρότερο τόσο
πιο γρήγορο scroll)
<span>-</span> (id) The <span> tag is used to group inline-elements in a doc-
ument.
<blink>-</blink> Text blinking

Images
<img src=“path“/> Insert image in page
<...alt=“......“> Alternative text if image not seen
<...width=“....“> Image width
<...height=“....“> Image height
<...border=“....“> Image border
<...align=“......“> Bottom-top-middle-left-right
<…vspace=”..”> Vertical space at image sides
<…hspace=”..”> Horizontal space at image sides
Links
<a href=”URL”>..</a> Link
<…target=”_blank”..> Open in new tab/window
<a href=”…”><img src=”…” ></a> Thumbnails
<a id=”id”> Anchor
<a href=”#id”>..</a>
List
<ol>-</ol> Defines an ordered list
<ol> <ol type=”A”,”a”,”I”,”i”,”1”>
<li>….</li> <ol start=”5”>
<li>….</li> <li value=”10”>
</ol>
<ul>-</ul> Defines an unordered list
<ul>
<li>….</li> <ul type=”disc”,”circle”,”square”>
<li>….</li>
</ul>
<dl>-</dl> Defines a definition list
<dl>
<dt>…</dt>
<dd>..</dd>
<dt>…</dt>
<dd>..</dd>
</dl>
Tables
<table>-</table> Defines a table
<caption>-</caption> Defines a table caption
<th>-</th> Defines a header cell in a table
<tr>-</tr> Defines a row in a table
<td>-</td> Defines a cell in a table
<thead>-</thead> Groups the header content in a table
<tbody>-</tbody> Groups the body content in a table
<tfoot>-</tfoot> Groups the footer content in a table
<colspan> Specifies column properties for each col-
umn within a <colgroup> element
<colgroup>-</colgroup> Specifies a group of one or more columns
in a table for formatting
<table border=” ”> To display a table with borders
<table frame=”box|void|above|below|hsid The frame attribute specifies which parts
es|vsides|lhs|rhs”> of the outside table borders that should be
visible.
<table rules=”all|none|rows|cols|groups” The rules attribute specifies which parts of
the inside borders that should be visible.
<table align=” left|center|right”> Table align
HTML Ερωτήσεις Αυτοαξιολόγισης
Με ποιο από τα παρακάτω γίνεται εκθέτης το κείμενο;

a) <sup>
b) <textup>
c) <sub>
d) <super>
Ποιος είναι υπεύθυνος για τα Web standards;

a) The World Wide Web Consortium
b) Mozilla
c) Microsoft
Ποια ετικέτα αντιστοιχεί για την μεγαλύτερη επικεφαλίδα;

a) <heading>
b) <head>
c) <h1>
d) <h6>
Με ποιο από τα παρακάτω γίνεται πλάγιο το κείμενο;

a) <italic>
b) <i>
c) <itlc>
Τι σημαίνει η λέξη HTML;

a) Home Tool Markup Language
b) Hyper Text Markup Language
c) Hyperlinks and Text Markup Language
Ποιο από τα παρακάτω είναι σωστό για να ανοίξει το link σε νέο παράθυρο ή tab;
a) <a href=»url» target=»_blank»>
b) <a href=»url» new>
c) <a href=»url» target=»new»>
Ποιο από τα παρακάτω είναι το σωστό tag για εισαγωγή ενδιάμεσης κενής γραμμής;
a) <break />
b) <lb />
c) <br />
Με ποιον τρόπο εισάγουμε χρώμα στο background της σελίδας;

a) <background>yellow</background>
b) <body background=»yellow»>
c) <body bgcolor=”yellow”>
Ποιο από τα παρακάτω είναι σωστό για να δημιουργηθεί λίστα με αριθμούς;

a) <dl>
b) <ul>
c) <ol>
d) <list>
Ποιο από τα παρακάτω είναι σωστό για να εισάγουμε μια εικόνα;

a) <img alt=»MyImage»>image.gif</img>
b) <img href=»image.gif» alt=»MyImage» />
c) <img src=»image.gif» alt=»MyImage» />
d) <image src=»image.gif» alt=»MyImage» />
Ποιο από τα παρακάτω είναι σωστό για να δημιουργηθεί λίστα με κουκίδες;

a) <ol>
b) <list>
c) <ul>
d) <dl>
Ποιο από τα παρακάτω είναι σωστό για να δημιουργηθεί ένα e-mail link;
a) <a href=»xxx@yyy»>
b) <mail>xxx@yyy</mail>
c) <a href=»mailto:xxx@yyy»>
d) <mail href=»xxx@yyy»>
Με ποιο από τα παρακάτω γίνεται έντονο το κείμενο;

a) <bold>
b) <b>
c) <bld>
Ποιο από τα παρακάτω είναι σωστό για να εισάγουμε μια εικόνα ώς background;
a) <img src=»background.gif» background />
b) <background img=»background.gif»>
c) <body background=»background.gif»>
Ποιο από τα παρακάτω είναι σωστό για να δημιουργηθεί ένα link;

a) <a>http://www.mysite.com</a>
b) <a href=»http://www.mysite.com»> mysite.com</a>
c) <a url=»http://www.mysite.com»> mysite.com</a>
d) <a name=»http://www.mysite.com»> mysite.com</a>
Ποια ετικέτα αντιστοιχεί για την μικρότερη επικεφαλίδα;

a) <h1>
b) <h7>
c) <h6>
d) <h0>
Ανάμεσα από ποια tags βρίσκεται συνήθως το μεγαλύτερο μέρος του κώδικα της σε-
λίδας;
a) <text></text>
b) <body></body>
c) <title></title>
d) <head></head>
Με ποιο από τα παρακάτω ξεκινάς μια νέα γραμμή χωρίς να ξεκινήσει μια νέα παρά-
γραφος;
a) <newline>
b) <line>
c) <br>
d) <br clear=”all” />
Για να δημιουργήσεις ένα link σε σημείο μέσα στην ίδια σελίδα χρησιμοποιείς..
a) anchor
b) bookmark
c) extra rollover
d) table
Για να στοιχίσεις κείμενο ή εικόνα ποιο attribute θα χρησιμοποιήσεις;

a) align
b) justify
c) push
d) center
Ποιο είναι το εύρος τιμών, των ετικετών για τη δημιουργία επικεφαλίδων;

a) <h1> to <h3>
b) <h1> to <h6>
c) <h1> to <h8>
d) <h1> to <h7>
Ποιο από τα παρακάτω είναι λάθος;

a) <body bgcolor=»red»>
b) <body bgcolor=»black»>
c) <body bgcolor=»blue»>
d) <body bgcolor=green»>
Τι θα συμβεί εάν γράψεις το παρακάτω:

<p align=”right”><a href=»page4.html»><b>Next Page</b></a> </p>
a) Μετάβαση στην σελίδα 3
b) Μετάβαση στην σελίδα 5
c) Δημιουργεί link το οποίο εάν πατηθεί θα μεταβεί ο επισκέπτης από την σελίδα 3 στην
σελίδα 4.
d) Τίποτα από τα παραπάνω
e) Δημιουργεί link το οποίο εάν πατηθεί θα μεταβεί ο επισκέπτης από την σελίδα 4 στην
σελίδα 5.
Πως μπορείς να κάνεις το κείμενο έντονο;

a) και με τα δύο
b) <b>
c) <strong>
Μπορείς να δημιουργήσεις “φωλιασμένες” λίστες, δηλαδή λίστα μέσα στην λίστα;

a) Μπορείς
b) Δεν μπορείς
Πως μπορείς να δημιουργήσεις λίστα με κύκλους;

a) <ul>
b) <ol>
c) <ul type=»circle»>
d) <οl type=”circle”>
Με ποιο από τα παρακάτω στοιχίζω τα περιεχόμενα ενός κελιού αριστερά;

a) <td left>
b) <td=»left»>
c) <td valign=»left»>
d) <td align=»left»>
Ποια από τα παρακάτω είναι ετικέτες πίνακα;

a) <table><tb><tr>
b) <tfoot><head><tbody>
c) <table><tr><td>
d) <table><il><ul>
Πως μπορείς να δημιουργήσεις λίστα με μικρούς λατινικούς αριθμούς;

a) <ul type=»i»>
b) <οl type=»arabic»>
c) <ol type=»i»>
d) <ol type=»small arabic»>
Η ετικέτα <dl> προέρχεται από τις αγγλικές λέξεις:

a) drop down list
b) definition list
c) data list
d) drop list
Η ετικέτα <οl> προέρχεται από τις αγγλικές λέξεις:

a) order list
b) one list
c) unorder list
d) drop down list
Η ετικέτα <ul> προέρχεται από τις αγγλικές λέξεις:

a) unorder list
b) use of list
c) order list
d) drop down list
Με ποιο απο τα παρακάτω προσθέτω σχόλια στον κώδικα χωρίς να εμφανίζονται

από φυλλομετρητή;
a) <--σχόλια-->
b) <//σχόλια//>
c) 
d) <--σχόλια!->
Ποιo από τα παρακάτω δεν βρίσκεται στο κομμάτι Head της σελίδας;
a) <title>
b) <meta>
c) <table>
Ποιο από τα παρακάτω είναι σωστό anchor;

a) <a href=»#anchor»>
b) <a href=»anchor»>
c) <a name=»#anchor»>
d) <a id=»#anchor»>
Ποιο από τα παρακάτω είναι για την δημιουργία anchor;

a) <a href=»#anchor»>
b) <a name=»#anchor»>
c) <a id=»#anchor»>
d) <a id=»anchor»>
Η επέκταση .htm και .html είναι το ίδιο;

a) Ναι
b) Όχι
Ποιο από τα παρακάτω χρησιμοπείται περισσότερο από τις μηχανές αναζήτησης;

a) Heading
b) Title
c) Paragrah
d) caption
Ποιο απο τα παρακάτω είναι attribute για το <image> tag;

a) url
b) path
c) src
Μπορεί ένα κελί ενός πίνακα να περιέχει images;

a) Ναι
b) Όχι
Μπορεί ένα κελί ενός πίνακα να περιέχει χρώμα στο παρασκήνιο (background) του;
a) Ναι
b) Όχι
Μπορεί ένα κελί ενός πίνακα να περιέχει ως παρασκήνιο (background) του ένα
image;
a) Ναι
b) Όχι
Κάθε λίστα, είτε ταξινομημένη είτε όχι, έχει:

a) list tag
b) ls tag
c) li tag
d) ol tag
Εάν γράψω width=”100” και width=”100%” σε έναν πίνακα, είναι το ίδιο;

a) Ναι
b) Όχι
Τι είναι το cellpadding;
a) Το κενό ανάμεσα στα κελιά ενός πίνακα.
b) Το κενό ανάμεσα στο περίγραμμα ενός πίνακα.
c) Το πάχος του περιγράμματος ενός πίνακα.
d) Το εσωτερικό κενό ανάμεσα στα περιεχόμενα και το ίδιο το κελί ενός πίνακα.
Τι είναι το cellspacing;
a) Το κενό ανάμεσα στα κελιά ενός πίνακα.
b) Το κενό ανάμεσα στο περίγραμμα ενός πίνακα.
c) Το πάχος του περιγράμματος ενός πίνακα.
d) Το εσωτερικό κενό ανάμεσα στα περιεχόμενα και το ίδιο το κελί ενός πίνακα.
Cellcontent ονομάζουμε:
a) Τα περιεχόμενα ενός κελιού του πίνακα.
b) Το εσωτερικό κενό ανάμεσα στα περιεχόμενα και το ίδιο το κελί ενός πίνακα.
c) Το κενό ανάμεσα στο περίγραμμα ενός πίνακα.
d) Το κενό ανάμεσα στα κελιά ενός πίνακα.
Πως αλλάζω διαστάσεις σε ένα image;

a) Using resize attribute
b) Using height and width
c) Using size attribute
d) Using rs attribute
Κάνω συγχώνευση κελιών οριζόντια με:

a) collspan
b) rowspan
c) cellspan
d) colmerge
Κάνω συγχώνευση κελιών κάθετα με:

a) collspan
b) rowspan
c) cellspan
d) colmerge
Μπορώ να έχω cellpadding και στοίχιση κελιών αριστερά ταυτόχρονα:

a) Ναι
b) Όχι
Το παρακάτω είναι σωστό;

<table width=»500»>
<tr width=»400»><td>a</td></tr>
<tr width=»200»><td>b</td></tr>
</table>
a) Ναι
b) Όχι
Το παρακάτω είναι σωστό;

<table>
<tr><td cellpadding=”5”>a</td></tr>
<tr><td cellspacing=”5”>b</td></tr>
</table>
a) Ναι
b) Όχι
Κάντε την αντιστοίχιση

<TR> ξεκινά ένα νέο κελί/στήλη
BORDER=»5» Συγχώνευση 3 columns
</TH> Συγχώνευση 3 rows
<TD> τέλος κελιού/στήλης
</TABLE> τέλος πίνακα
ROWSPAN=3 τέλος κελιού με επικεφαλίδα μέσα
COLSPAN=3 ξεκινά νέα γραμμή
CELLPADDING=5 Προσθέτει περίγραμμα 5px
CELLSPACING=5 Δημιουργεί 5px κενό γύρω από τα περιεχό-
μενα και το ίδιο το κελί
</TD> Δημιουργεί 5px κενό μεταξύ των κελιών
Σημειώσεις
Σημειώσεις

Plhroforiki - ERG - ANAPTYXHS - EFARMOGON - INERNET

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Plhroforiki - ERG - ANAPTYXHS - EFARMOGON - INERNET

Uploaded by

Copyright:

Available Formats

ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ INTERNET (HTML)

ΕΡΓΑΛΕΙΑ ΑΝΑΠΤΥΞΗΣ ΕΦΑΡΜΟΓΩΝ INTERNET (HTML)

Η Γλώσσα Προγραμματισμού του Internet «HTML»

ΕΝΑ ΠΑΡΑΔΕΙΓΜΑ HTML

και έναν απλό, κοινό επεξεργαστή κειμένου).

Τι είναι οι ετικέτες της HTML ;

Η HTML και το Internet

Η Δομή ενός URL (Uniform Resource Locator)

Internet. Τα περισσότερα URLs περιέχουν τα εξής τρία μέρη:

Το πρωτόκολλο είναι ο τρόπος με τον οποίο προσπελάζουμε μια σελίδα, δηλ.

στη διεύθυνση URL είναι το http, αν ο φυλλομετρητής χρησιμοποιεί το FTP, τότε

Το πρωτόκολλο αντιστοιχεί σ’ έναν server πληροφοριών, ο οποίος πρέπει να

Τα URLs με πρωτόκολλο HTTP είναι η πιο δημοφιλής μορφή διευθύνσεων

Αν ένα URL τελειώνει με το σύμβολο /, τότε το τελευταίο μέρος του URL

Τα δομικά στοιχεία από τα οποία αποτελείται μια ιστοσελίδα

Επεκτάσεις της Html JAVA

Εξυπηρετητής (web server) παγκοσμίου ιστού

Η Δομή μιας HTML σελίδας

y Όλες οι ετικέτες εσωκλείονται μεταξύ των “<”, και “>”.

Τα περισσότερα tags της HTML έχουν την εξής μορφή :

να τα γράφουμε είτε με κεφαλαίους είτε με πεζούς χαρακτήρες είτε με οποιονδήποτε συν-

<Η1> Η Πόλη της Αθήνας</Η1>

<Η2> Η Ιστορία της Αθήνας </Η2>

<Ρ> Πολιτιστικοί Σύλλογοι της Πόλης της Αθήνας </Ρ>

Τα Tags Φυσικών Στυλ

y Η ετικέτα <SUB>...</SUB> εμφανίζει το περιλαμβανόμενο στην ετικέτα κείμενο με μι-

Μπορούμε να δημιουργούμε ένθετα tags μορφοποίησης χαρακτήρων, για παράδειγμα

Και το αποτέλεσμα στην οθόνη μας είναι:

Με την ετικέτα αυτή μπορούμε να ξεπεράσουμε δύο προβλήματα:

Στην οθόνη μας θα δούμε το εξής:

Το μήκος (WIDTH) μπορεί να καθοριστεί με δυο τρόπους : ο ένας αναφέρεται σε ποσοστό

την παρουσίαση των στοιχείων τους χωρίς κάποια ιδιαίτερη σειρά.

Αριθμημένη λίστα δύο επιπέδων

Οι μη αριθμημένες λίστες είναι λίστες στις οποίες τα στοιχεία μπορούν να εμφανίζονται με

Μη Αριθμημένη Λίστα δύο επιπέδων

<UL TYPE = ΤΙΜΗ > ή <LI TYPE = ΤΙΜΗ>

Οι δυνατές τιμές της παραμέτρου type είναι οι εξής:

Οι λίστες γλωσσαρίου ή αλλιώς κατάλογοι ορισμών χρησιμοποιούνται για την παρουσία-

Παράμετρος Τιμές Λειτουργία

Δείτε κι ένα άλλο παράδειγμα δημιουργίας συνδέσμου :

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

Υπερσύνδεσμοι που οδηγούν σε άλλες HTML σελίδες

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

<A HREF=¨http://www.line.gr¨> Athen’s Home Page </A>

<P> The <A HREF=»http://www.zoo.palo-alto.ca.us/ostriches/home.html»> Palo Al-

Υπερσύνδεσμοι που οδηγούν σε άλλα πολυμεσικά αρχεία

<A HREF=¨index.html¨> <IMG SRC=¨uparrow.gif¨> </A>

<A HREF=¨index.html¨> <IMG SRC=¨uparrow.gif¨> Στο index </A>

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

<A HREF=¨myﬁle.html#Part4¨> Go to Part Four </A>

Στο παραπάνω παράδειγμα, ο φυλλομετρητής θα φορτώσει τη σελίδα myﬁle.html και με-

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

Μενού Κάθετου Κειμένου (Vertical text menu )

<P>Phrase or sentence introducing to the menu :</P>

Και το αποτέλεσμα στην οθόνη μας είναι:

<P>Phrase or sentence introducing to the menu :</P>

Και το αποτέλεσμα στην οθόνη μας είναι:

Μενού Οριζόντιου Κειμένου

<P>Phrase or sentence introducing to the menu :</P>

Και το αποτέλεσμα στην οθόνη μας είναι:

Σύνδεσμοι για Αποστολή e-mail

<Α HREF=”mailto:διεύθυνση ηλεκτονικού ταχυδρομείου”> υπερσύνδεσμος </A>

Αλλαγή Χρώματος Φόντου