Κατασκευή Ιστοσελίδων - Τα Βασικά

1.
ΠΩΣ ΔΟΥΛΕΥΟΥΝ ΟΙ ΙΣΤΟΣΕΛΙΔΕΣ
Προκειμένου να μιλήσουμε για ιστοσελίδες και το πώς λειτουργούν, θα πρέπει να

καταλάβουμε τους τέσσερις παρακάτω όρους:
 Ιστοσελίδα (Web page) - Μια ιστοσελίδα είναι ένα απλό αρχείο κειμένου
που περιέχει όχι μόνο κείμενο, αλλά επίσης και ένα σύνολο από ετικέτες
(HTML tags) οι οποίες περιγράφουν πώς το κείμενο πρέπει να φορμαριστεί
όταν ο φυλλομετρητής (Web browser) το παρουσιάσει στην οθόνη. Οι
ετικέτες είναι απλές εντολές που λένε στον φυλλομετρητή πώς πρέπει να
φαίνεται η σελίδα όταν παρουσιαστεί. Οι ετικέτες λένε στον φυλλομετρητή
να κάνει πράγματα όπως να αλλάξει το μέγεθος ή το χρώμα των
χαρακτήρων, ή να τοποθετήσει τα αντικείμενα σε στήλες. Ο φυλλομετρητής
διερμηνεύει αυτές τις ετικέτες για να αποφασίσει πώς θα φορμάρει το
κείμενο στην οθόνη.
 HTML - HTML σημαίνει Hyper Text Markup Language. Μία "markup
language" είναι μια γλώσσα υπολογιστή που περιγράφει πώς θα
μορφοποιηθεί μια σελίδα. Αν το μόνο που θέλετε είναι μια συνεχόμενη
ακολουθία από κείμενο χωρίς ιδιαίτεροι μορφή, τότε δεν χρειάζεστε την
HTML. Αλλά αν θέλετε να αλλάζετε γραμματοσειρές, χρώματα, να
προσθέτετε επικεφαλίδες και να ενσωματώνετε γραφικά στη σελίδα σας,
τότε η γλώσσα HTML είναι αυτό που χρειάζεστε.
 Φυλλομετρητής (Web browser) - Ένας φυλλομετρητής, όπως ο
Netscape Navigator ή ο Microsoft Internet Explorer, είναι μια εφαρμογή
που κάνει δύο πράγματα:
o Ένας φυλλομετρητής ξέρει πώς να πάει σε έναν Διακομιστή Web
(Web server) στο Internet και να ζητήσει μια σελίδα, έτσι ώστε να
τη φέρει μέσω του δικτύου στον υπολογιστή σας.
o Ένας φυλλομετρητής ξέρει πώς να ερμηνεύει το σύνολο των HTML
tags μέσα στη σελίδα ώστε να αναπαραστήσει τη σελίδα στην οθόνη
όπως θα ήθελε ο κατασκευαστής της.
 Διακομιστής Web (Web server) - Ένας διακομιστής Web είναι ένα

πρόγραμμα το οποίο ανταποκρίνεται σε αιτήσεις ενός φυλλομετρητή για μια
σελίδα, και παραδίδει τη σελίδα στον φυλλομετρητή μέσω του Internet.
2. ΠΑΡΑΤΗΡΩΝΤΑΣ ΤΟΝ ΚΩΔΙΚΑ
Αρχικά, ας δούμε τα βασικά μιας ιστοσελίδας. Μπορείτε να δείτε τον κώδικα HTML
μιας οποιασδήποτε ιστοσελίδας ανοίγοντας τη σελίδα και πηγαίνοντας στο μενού
Προβολή/Προέλευση. Μπορείτε να δείτε πώς κατασκευάστηκε οποιαδήποτε σελίδα
στο Internet με αυτόν τον τρόπο.
Τώρα, ας μάθουμε τι σημαίνουν τα διάφορα tags, και ας δημιουργήσουμε μια απλή

σελίδα.
3. Η ΕΤΙΚΕΤΑ HTML
Η ετικέτα HTML λέει στον φυλλομετρητή ότι πρόκειται για ένα έγγραφο HTML.
Κάθε ετικέτα εμφανίζεται με γράμματα ή λέξεις μεταξύ ενός < και ενός >.
Π.χ.: <center>, <body>
Για να πούμε στον φυλλομετρητή να τελειώσει ότι μόλις του είπαμε να κάνει μια
κάθετος "/" χρησιμοποιείται στην ετικέτα τέλους:
Π.χ.: </center>, </body>
Οι περισσότερες ετικέτες έρχονται σε ζευγάρια “αρχής” και “τέλους”, αλλά αυτό

δεν ισχύει πάντα.
Κάθε ιστοσελίδα περιέχει τις ακόλουθες ετικέτες στην αρχή της σελίδας:
 <HTML>: λέει στον φυλλομετρητή ότι αυτή είναι η αρχή του HTML
εγγράφου
 <HEAD>: λέει στον φυλλομετρητή ότι αυτή είναι η επικεφαλίδα της
σελίδας
 <TITLE>: λέει στον φυλλομετρητή ότι αυτός είναι ο τίτλος της σελίδας
 <BODY>: λέει στον φυλλομετρητή ότι εδώ είναι η αρχή του περιεχομένου
της ιστοσελίδας
Οι ετικέτες που είναι απαραίτητες στο τέλος κάθε σελίδας είναι:
 </BODY>
 </HTML>
4. ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΜΙΑ ΑΠΛΗ ΙΣΤΟΣΕΛΙΔΑ
Για να δημιουργήσουμε μια ιστοσελίδα δε χρειαζόμαστε τίποτα άλλο από ένα απλό
επεξεργαστή κειμένου. Ακόμα και το Σημειωματάριο (Notepad) των Windows
είναι αρκετό.
Ανοίξτε το Σημειωματάριο και πληκτρολογήστε το παρακάτω HTML κείμενο:
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello there. This is my first page!
</body>
</html>
Το πώς γράφετε το κείμενο και τις ετικέτες (σε μια γραμμή, σε πολλές γραμμές,
στοιχισμένο κλπ.) δεν επηρεάζει το πώς θα φαίνεται η ιστοσελίδα στο παράθυρο
του φυλλομετρητή. Επίσης δεν παίζει ρόλο εάν χρησιμοποιείτε κεφαλαία ή μικρά
μέσα στις ετικέτες.
Σώστε το παραπάνω κείμενο σε αρχείο με κατάληξη .html ή .htm. Στη συνέχεια

ανοίξτε το με τον φυλλομετρητή που χρησιμοποιείτε (π.χ. Microsoft Internet
Explorer ή Netscape Navigator). Η ιστοσελίδα θα φαίνεται κάπως έτσι:
Τρία πράγματα παρατηρούμε στην παραπάνω εικόνα:
 Η σελίδα έχει τον τίτλο "My First Page."

 Το σώμα της σελίδας περιέχει τις λέξεις "Hello there. This is my first page!"
 Η διεύθυνση (URL) που φαίνεται στο παράθυρο address είναι C:\
WINDOWS\DESKTOP\first.html από τον τοπικό σκληρό δίσκο, αντί για
το συνηθισμένο http://... που θα περιείχε εάν περνάμε τη σελίδα από
έναν διακομιστή στο Internet.
5. ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ ΜΟΡΦΟΠΟΙΗΣΗΣ ΤΗΣ HTML
Οι παρακάτω ετικέτες χρησιμοποιούνται συνέχεια και κάνουν το 90% όλης της

μορφοποίησης που θα δείτε στις περισσότερες ιστοσελίδες.
Έντονα, Πλάγια και Υπογραμμισμένα (Bold, Italics and Underline)
 Κάνε οποιοδήποτε κομμάτι κειμένου έντονο προσθέτοντας την ετικέτα:
<b>
στην αρχή του κειμένου, και την ετικέτα τέλους:
</b>
οπουδήποτε θέλετε το έντονο χαρακτηριστικό να σταματήσει.

This is <b>bold</b>. This is bold.
 Για πλάγια χρησιμοποιείστε τα παρακάτω tags με τον ίδιο τρόπο:
<i>.....</i>
This is <i>italicized</i>. This is italicized.
 Για υπογραμμισμένα οι ετικέτες είναι:
<u>.....</u>
This is <u>underlined</u>. This is underlined.
Αλλαγές γραμμής και Παράγραφοι (Βreaks and Paragraphs)

Ο φυλλομετρητής αγνοεί όλα τα κενά, τα tabs και τα enter που πληκτρολογείτε.
Γι’ αυτό πρέπει να χρησιμοποιήσετε ετικέτες για να εισάγετε τα απαιτούμενα κενά
στις σελίδες σας.
<br> προκαλεί μια αλλαγή γραμμής.
This line is
This line is <br> broken.
broken.
<p> εισάγει νέα παράγραφο και δημιουργεί επιπλέον χώρο μεταξύ δύο γραμμών
κειμένου.
This line is
This line is <p> spaced.
spaced.
<hr> δημιουργεί μια οριζόντια γραμμή
This is a horizontal rule:

This is a horizontal rule: <hr>
Tabs
Δεν υπάρχει κανονικό HTML tag που να δημιουργεί ένα "tab" μέσα σ' ένα έγγραφο.
Πολλοί σχεδιαστές ιστοσελίδων δημιουργούν πίνακες ή χρησιμοποιούν κενές εικόνες
για τη δημιουργία διαστημάτων (πίνακες και εικόνες θα παρουσιαστούν αργότερα σ'
αυτό το άρθρο). Ένας τρόπος για τη δημιουργία εσοχών στο κείμενο είναι η χρήση του
tag <ul> το οποίο κάνει τον φυλλομετρητή να νομίζει ότι θα δημιουργήσετε μια
"λίστα". Μια λίστα αυτόματα προκαλεί την εμφάνιση του κειμένου πιο μέσα. Κλείστε με
ένα </ul> για να τελειώσετε την εσοχή. Τα tags <blockquote>...</blockquote>
επίσης δημιουργούν εσοχή κειμένου.
Άλλη επιλογή είναι το <pre> tag. Η ετικέτα αυτή χρησιμοποιείται για να εμφανίσει
προδιαμορφωμένο κείμενο (preformatted text) -- κείμενο εμφανιζόμενο "όπως
είναι". Κάθε κενό διάστημα δημιουργούμενο μέσα στις <pre> και </pre> ετικέτες θα
εμφανίζεται στον browser όπως ακριβώς εμφανίζεται και στο πηγαίο κείμενο.
Αλλαγή χρώματος, γραμματοσειράς και μεγέθους χαρακτήρων (Font Color,

Type and Size)
 Αλλάξτε το χρώμα οποιουδήποτε κειμένου με τις ετικέτες:
<font color="color">...</font>
This is <font color="red">red</font>. This is red.
This is <font color="green">green</font>. This is green.
Τα περισσότερα βασικά χρώματα θα δουλέψουν. Επίσης δοκιμάστε "lights" και

"darks" όπως "lightblue" ή "darkgreen". Μπορείτε επίσης να καθορίσετε ένα
συγκεκριμένο δεκαεξαδικό αριθμό χρώματος, όπως: <font color="#864086">.
Εάν επιθυμείτε να εφαρμόσετε ένα συγκεκριμένο χρώμα σ' ολόκληρο το κείμενο

μιας σελίδας, προσθέστε text="color" μέσα στην ετικέτα <body>.
Παράδειγμα: <body text="blue">
Αν εφαρμόσετε ένα χρώμα σ' ολόκληρο το κείμενο, τότε μπορείτε ακόμα να

αλλάξετε το χρώμα ενός μέρους του κειμένου χρησιμοποιώντας τα tags που
αναφέρθηκαν παραπάνω.
 Αλλάξτε τη γραμματοσειρά οποιουδήποτε κειμένου με τις ετικέτες:
<font face="font type"> ... </font>
This is <font face="times">Times Roman</font>. This is Times Roman.
This is <font face="impact">Impact</font>. This is Impact.
(Σημείωση: Εάν χρησιμοποιήσετε μια γραμματοσειρά που δεν την έχει

κάποιος επισκέπτης της σελίδας, τότε το κείμενο θα εμφανιστεί με την
προκαθορισμένη γραμματοσειρά του browser, συνήθως Courier ή Times
New Roman. Έτσι είναι καλύτερο να επιμένετε στις στάνταρντ
γραμματοσειρές για να είστε σίγουροι για την εμφάνιση του κειμένου σας
σε όλους τους χρήστες.)
 Αλλάξτε το μέγεθος οποιουδήποτε κειμένου με τις ετικέτες:

<font size=value>...</font>
Παράδειγμα: <font size=4>
Το size παίρνει τιμές από 1 έως 7, με το 7 να παριστάνει το μεγαλύτερο και

το 1 το μικρότερο μέγεθος. Το προκαθορισμένο font size για τους
περισσότερους browsers είναι "3", έτσι κάθε τιμή μεγαλύτερη από 3 θα
κάνει το κείμενο μεγαλύτερο, και κάθε τιμή μικρότερη του 3 θα το κάνει
μικρότερο.
Μπορείτε επίσης να αλλάξετε το μέγεθος προσθέτοντας ή αφαιρώντας από

το προκαθορισμένο μέγεθος.
Παράδειγμα: <font size=+4>, ή <font size=-2>
This font is <font size=+2>increased by This font is increased

2</font>.
by 2.
This font is <font size=+1>increased by
1</font>. This font is increased by 1.
This font is <font size=-2>decreased by

This font is decreased by 2.
2</font>.
This font is <font size=-1>decreased by

This font is decreased by 1.
1</font>.
Μπορείτε επίσης να αλλάξετε το μέγεθος με τις ετικέτες <small> και <big>:
This is <small>small</small> text. This is small text.
This is <big>big</big> text. This is big text.
Τα Heading tags επίσης αλλάζουν το μέγεθος, δημιουργώντας μια έντονη

επικεφαλίδα για μία παράγραφο ή κείμενο:
<h1>This is an H1
heading.</h1>
This is an H1
heading.
<h2>This is an H2
heading.</h2>
This is an H2 heading.
<h3>This is an H3
heading.</h3> This is an H3 heading.
Τερματίστε κάθε στοιχείο font με την ετικέτα:
</font>
Ή, βάζοντας την αντίστοιχη ετικέτα τέλους του συγκεκριμένου tag που

χρησιμοποιήθηκε:
Παράδειγμα: </small>, </big>, </H2>
Αλλάζοντας το χρώμα του φόντου

Μπορείτε να αλλάξετε το χρώμα του φόντου προσθέτοντας bgcolor="color" μέσα
στην ετικέτα <body>.
Παράδειγμα: <body bgcolor="yellow">
Δημιουργώντας λίστες
Μπορείτε να δημιουργήσετε λίστες με κουκκίδες ή με νούμερα:
Μια λίστα με κουκκίδες (unordered list) φαίνεται ως εξής:
 California
 Oregon
 North Carolina
Μια λίστα με κουκκίδες αρχικοποιείται με την ετικέτα <ul>. Η ετικέτα <li>

(αρχικά από List Item) χρησιμοποιείται πριν από το κάθε στοιχείο της λίστας. Η
ετικέτα τέλους </ul> τερματίζει τη λίστα.
Παράδειγμα:
<ul>
<li>California
<li>Oregon
<li>North Carolina
</ul>
Ο τύπος της κουκκίδας μπορεί να αλλάξει σε "circle," "square" ή "disc"

προσθέτοντας την ιδιότητα "type" μέσα στο <ul> tag:
<ul type="circle">
<li>California o California
<li>Oregon o Oregon
<li>North Carolina
o North Carolina
</ul>
<ul type="square">  California

<li>California  Oregon
<li>Oregon
<li>North Carolina
</ul>  North Carolina
Μια αριθμημένη λίστα είναι η παρακάτω:
1. oranges
2. grapes
3. cherries
Χρησιμοποιήστε τις ετικέτες <ol> και </ol> για την αρχή και το τέλος της λίστας.
Ξανά το <li> tag χρησιμοποιείται για το κάθε στοιχείο της λίστας.
<ol>
<li>oranges
<li>grapes
<li>cherries
</ol>
Μπορείτε να αλλάξετε τον τύπο της οργάνωσης προσθέτοντας την ιδιότητα "type"
μέσα στην ετικέτα <ol>.
<ol type="A"> αριθμεί τη λίστα με κεφαλαία γράμματα: (A, B, C...)
<ol type="a"> αριθμεί τη λίστα με μικρά γράμματα: (a, b, c...)
<ol type="I"> αριθμεί τη λίστα με Ρωμαϊκούς αριθμούς: (I, II, III...)
<ol type="i"> αριθμεί τη λίστα με μικρούς Ρωμαϊκούς αριθμούς: (i, ii, iii...)
Εάν θέλετε να ξεκινήσει η αρίθμηση από μια συγκεκριμένη τιμή, όπως π.χ. "6"
χρησιμοποιήστε τα ακόλουθα "start" και "value" tags:
<li value=6>
Συνδέσεις σε άλλα Sites

Μια από τις καλύτερες ιδιότητες των ιστοσελίδων είναι η δυνατότητα δημιουργίας
υπερσυνδέσμων (links) προς άλλες ιστοσελίδες του Web. Χρησιμοποιώντας τις
επόμενες ετικέτες μπορείτε να αναφέρεστε σε άλλες σελίδες του δικού σας ή
ακόμα και άλλων sites:
<a href="URL">
Γράψτε τη διεύθυνση (URL) της σελίδας μετά την ετικέτα <a> (anchor tag) και
κλείστε την ετικέτα με το:
</a>
<a href="http://www.microsoft.com"> Microsoft </a>
Αυτό θα λειτουργήσει στη σελίδα ως εξής:
Microsoft
Μπορείτε επίσης να συνδυάσετε λίστες με κουκκίδες με links ώστε να δημιουργήσετε

λίστες υπερσυνδέσμων.
Άνοιγμα σε νέο παράθυρο

Αν δε θέλετε οι επισκέπτες σας να μη φεύγουν απ' τη σελίδα σας όταν πατάνε σε
κάποιο σύνδεσμο που οδηγεί σε άλλο site, τότε προσθέστε την παρακάτω ετικέτα στο
<a> tag.
target="_blank"
Όταν πατιέται το link, η νέα σελίδα ανοίγει σε ένα νέο παράθυρο κι έτσι ο χρήστης δεν
φεύγει από το δικό σας site:
<a href="http://www.microsoft.com" target="_blank">
Χρώμα υπερσυνδέσμων
Το μπλε είναι το προκαθορισμένο χρώμα για τους συνδέσμους. Ωστόσο μπορείτε να
αλλάξετε το χρώμα των συνδέσμων της σελίδας σας εισάγοντας τα παρακάτω tags
μέσα στο <body>:
 link="color"
 vlink="color"
Το Vlink σημαίνει "visited link". Τα links αλλάζουν χρώμα όταν τα επισκεφτείτε μια
φορά. Εάν δε θέλετε τα links που επισκεφτήκατε να αλλάζουν χρώμα, τότε θέστε το
ίδιο χρώμα και στο links και στο vlinks.
Παράδειγμα: <body link="green" vlink="green">
Υπερσύνδεσμοι για λήψη E-mail

Αν θέλετε να λαμβάνετε e-mail από άτομα που διαβάζουν τις σελίδες σας,
χρησιμοποιείστε την επόμενη ετικέτα:
<a href="mailto:youremailaddress">
Έπειτα πληκτρολογήστε την e-mail διεύθυνσή σας (ή οποιοδήποτε κείμενο θέλετε)

πάλι μετά την ετικέτα. Κλείστε την ακολουθία με το:
</a>
<a href="mailto:webmaster@e-view.gr"> E-mail Me </a>
Αυτό θα φαίνεται στη σελίδα κάπως έτσι:
E-mail Me
Δημιουργώντας υπερσυνδέσμους μέσα στην ίδια σελίδα

Οι ετικέτες <a> (Anchor tags) δε χρησιμοποιούνται μόνο για να συνδέουν με
άλλες σελίδες του Internet. Μπορούν επίσης να συνδέουν και με άλλες σελίδες του
δικούς σας site ή ακόμα και με πληροφορίες που βρίσκονται μέσα στην ίδια σελίδα.
Σ' αυτή την περίπτωση μπορείτε να παραλείψετε το πρόθεμα "http://www" και
απλά βάζετε το όνομα του αρχείου του html εγγράφου:
Παράδειγμα: <a href="company.html"> Company Information </a>
Για να δημιουργήσετε σύνδεσμο σε συγκεκριμένο σημείο μιας σελίδας πρέπει

πρώτα να ονομάσετε το τμήμα του κειμένου στο οποίο αναφέρεστε, και έπειτα να
συμπεριλάβετε αυτό το όνομα μέσα στο anchor tag. Αυτό γίνεται ως εξής:
Ονομάστε κάποιο τμήμα της σελίδας εισάγοντας την παρακάτω ετικέτα ακριβώς
πριν το συγκεκριμένο τμήμα στο οποίο θέλετε να οδηγεί ο σύνδεσμος. Επιτρέπεται
οποιαδήποτε λέξη, γράμμα ή χαρακτήρας σαν όνομα:
<a name="name">
Παράδειγμα: <a name="5">
Στο anchor tag, αναφέρεστε σ' αυτό το τμήμα της σελίδας βάζοντας ένα "#"
μπροστά από το όνομα. Αν η αναφερόμενη θέση βρίσκεται στην ίδια σελίδα με
αυτή όπου υπάρχει και το link, το anchor tag που συνδέει σ' αυτή τη θέση θα
μοιάζει κάπως έτσι:
<a href="#5"> Company Information </a>
Αν ο σύνδεσμος αναφέρεται σε άλλο έγγραφο από αυτό που βρίσκεται ο ίδιος, τότε
θα πρέπει να συμπεριλάβετε επίσης και το όνομα του εγγράφου.
Παράδειγμα: <a href="company.htm#5"> Company Information </a>
Προσθήκη εικόνων και γραφικών

Προσθέστε οποιαδήποτε εικόνα στη σελίδα σας με την ετικέτα:
<img src="name of picture file.extension">
Οι εικόνες στο Web είναι είτε GIF αρχεία είτε JPG αρχεία. Κάθε εικόνα θα
περιέχει μία από αυτές τις προεκτάσεις, έτσι αν έχετε μια εικόνα με το όνομα
"logo", θα έχει πλήρες όνομα είτε "logo.gif" είτε "logo.jpg".
Καλό είναι να αποθηκεύετε τις εικόνες και τα γραφικά που θα περιέχονται στις
σελίδες σας στον ίδιο φάκελο ή κατάλογο όπου έχετε αποθηκευμένο και το "html"
αρχείο. Διαφορετικά ο υπολογιστής μπορεί να έχει πρόβλημα στο να βρει την
εικόνα που θέλετε να παρουσιαστεί. Επίσης σιγουρευτείτε ότι πληκτρολογήσατε το
όνομα της εικόνας ακριβώς όπως αυτό είναι αποθηκευμένο στον κατάλογο -
παίζουν ρόλο τα κεφαλαία και τα μικρά.
Μπορείτε επίσης να χρησιμοποιήσετε μια εικόνα ως σύνδεσμο σε άλλη σελίδα ή

στοιχείο. Γι’ αυτό το σκοπό απλά εισάγετε την ετικέτα "img src" μετά την ετικέτα
<a>. Σιγουρευτείτε να συμπεριλάβετε το "border=0" διαφορετικά ένα άσχημο
περιθώριο θα εμφανίζετε γύρω από την εικόνα.
<a href="http://www.e-view.gr"><img src="logo.jpg" border=0></a>
Στο παραπάνω παράδειγμα εάν ο χρήστης κάνει κλικ στην εικόνα "logo.jpg" θα
μεταφερθεί στην αρχική σελίδα της τοποθεσίας e-view.gr στο "http://www.e-
view.gr".
Κάθε ψηφιακή εικόνα μπορεί επίσης να χρησιμοποιηθεί και ως φόντο στη σελίδα
σας. Γι’ αυτό το σκοπό προσθέστε το background="image file name" μέσα στην
ετικέτα <body>.
Παράδειγμα: <body background="logo.jpg">
Στοίχιση των εικόνων

Εξ ορισμού το κείμενο και οι εικόνες εμφανίζονται αριστερά στην οθόνη. Αν θέλετε
να κεντράρετε οποιοδήποτε κομμάτι της σελίδας, χρησιμοποιείστε την ετικέτα:
<center>
Τερματίστε το κεντράρισμα με την ετικέτα τέλους:
</center>
Μπορείτε επίσης να ορίσετε μικρά ή μεγαλύτερα κομμάτια της σελίδας, που

λέγονται διαιρέσεις (divisions), να στοιχίζονται με ένα συγκεκριμένο τρόπο.
Ξεκινάτε τη διαίρεση με την ετικέτα <div>, συμπεριλαμβάνοντας και τη στοίχιση

που θέλετε να έχει το κείμενο ή οι εικόνες σας (π.χ. right, left, center):
Παράδειγμα: <div align="center">
Τελειώστε τη στοίχιση της διαίρεσης με την ετικέτα τέλους:
</div>
Επίσης, χρησιμοποιείστε την ετικέτα align=".." μέσα στην ετικέτα "img src" για να
πετύχετε περιτύλιξη του κειμένου γύρω από την εικόνα.
Παράδειγμα: <img src="logo.jpg" align="left">
6. ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΠΙΝΑΚΕΣ
Οι πίνακες αποτελούν ένα από τα πιο ευρέως χρησιμοποιούμενα εργαλεία για τη

δημιουργία καλοσχεδιασμένων και καλλιτεχνικά στημένων ιστοσελίδων. Με τη
χρήση των πινάκων ξεφεύγετε πλέον από την απλή "κατασκευή" των ιστοσελίδων και
περνάτε στη "σχεδίαση" ιστοσελίδων.
A1 A2
B1 B2
C1 C2
Έχουμε τρεις γραμμές και δυο στήλες.
Για τη δημιουργία ενός τέτοιου πίνακα γράφουμε τον παρακάτω κώδικα μέσα στο
HTML έγγραφο:
<table>
<tr>
<td>Α1</td>
<td>Α2</td>
</tr>
<tr>
<td>Β1</td>
<td>Β2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
Για να φαίνεται το περίγραμμα του πίνακα πρέπει να προσθέσουμε την ετικέτα

“border=value” μέσα στην αρχική ετικέτα <table>:
<table border=1>
Μπορούμε να προσδιορίσουμε το πάχος του περιθωρίου σε pixels (εδώ το

περιθώριο το ορίσαμε να έχει πάχος ενός pixel).
Υπάρχουν πολλές παράμετροι που μπορούμε να εισάγουμε σε έναν πίνακα.

Παρακάτω θα παρουσιάσουμε μερικές από αυτές.
Χρώμα φόντου
Μπορείτε να αλλάξετε το χρώμα του φόντου του πίνακα με την ιδιότητα "bgcolor"
μέσα στην αρχική ετικέτα "table":
Παράδειγμα: <table bgcolor="yellow">
Έγχρωμο φόντο μπορεί επίσης να αποδοθεί και σε μία ξεχωριστή γραμμή ή και
κελί του πίνακα. Απλά προσθέστε το bgcolor="color" είτε στην ετικέτα <tr> είτε
στην ετικέτα <td> για να χρωματίσετε το συγκεκριμένο κομμάτι του πίνακα.
Παράδειγμα: <tr bgcolor="yellow">
Μέγεθος πίνακα
Το μήκος και το ύψος των γραμμών και των στηλών ενός πίνακα θα
προσαρμοστούν αυτόματα στο περιεχόμενο των κελιών ή το μέγεθος του
παραθύρου του φυλλομετρητή. Για να καθορίσετε ρητά ένα μήκος και ένα ύψος,
συμπεριλάβετε τιμές είτε σε pixel είτε επί τις εκατό μέσα στην αρχική ετικέτα
"table":
Παράδειγμα: <table width=300 height=400>
Τα Width και Ηeight μπορούν επίσης να προσδιοριστούν και μέσα σε ένα ιδιαίτερο
κομμάτι του πίνακα προσθέτοντας τα width="value" στα αντίστοιχα <tr> ή <td>
tags.
Περιθώρια κελιών (Cellpadding)

Η ιδιότητα "cellpadding" ορίζει (σε pixels) την απόσταση μεταξύ των περιθωρίων
ενός κελιού και των δεδομένων μέσα στο κελί. Χρησιμοποιείστε το μέσα στην
αρχική ετικέτα "table":
Παράδειγμα 1: <table border=1 cellpadding=5>
This table has a cellpadding of "5"
Παράδειγμα 2: <table border=1 cellpadding=15>
This table has a cellpadding of "15"
Απόσταση κελιών (Cellspacing)

Η ετικέτα "cellspacing" ορίζει (σε pixels) την απόσταση μεταξύ των κελιών.
Χρησιμοποιείστε το μέσα στην αρχική ετικέτα "table":
Παράδειγμα 1: <table border=1 cellspacing=5>
This table has a cellspacing of "5"
Παράδειγμα 2: <table border=1 cellspacing=15>
This table has a cellspacing of "15"
Κεφαλίδες Πινάκων
Για να δημιουργήσετε έντονες και κεντραρισμένες κεφαλίδες για τις στήλες ή τις
γραμμές ενός πίνακα, χρησιμοποιείστε την ετικέτα <th> στη θέση της <td> στον
κώδικα της πρώτης γραμμής.
<table border=1>
<tr>
<th>Column 1
</th>
<th>Column 2
</th>
</tr>
<tr>
<td>A
</td>
<td>B
</td>
</tr>
<tr>
<td>C
</td>
<td>D
</td>
</tr>
</table>
Το παραπάνω θα φαίνεται ως εξής:
Column 1 Column 2
A B
C D
Στοίχιση (Alignment)
Μπορείτε να ορίσετε την οριζόντια και κατακόρυφη στοίχιση των περιεχομένων
των κελιών με τα ακόλουθα tags τα οποία μπαίνουν μέσα στις ετικέτες <td> ή
<tr>:
Για οριζόντια στοίχιση οι τιμές μπορεί να είναι left, right, ή center:
Παράδειγμα: <tr align="center">
Για κατακόρυφη στοίχιση οι τιμές μπορεί να είναι top, bottom, ή middle:
Παράδειγμα: <td valign="top">
Μπορείτε επίσης να ορίσετε την στοίχιση ολόκληρου του πίνακα και να καθορίσετε
που θα εμφανίζετε μέσα στη σελίδα. Εισάγοντας τα tags <align="right"> ή
<align="left"> μέσα στην αρχική ετικέτα "table", το κείμενο θα τυλίγεται γύρω
από τον πίνακα όπου κι αν αυτός είναι τοποθετημένος. Ή εάν θέλετε ο πίνακας να
είναι μόνος του χωρίς κείμενο γύρω του, χρησιμοποιείστε την ετικέτα <div> πριν
και την ετικέτα </div> μετά το τέλος του πίνακα.
Επέκταση Κελιών (Cell Spanning)

Είναι δυνατόν ένα κελι να εκτείνεται (Spanning) σε δύο ή περισσότερα άλλα κελιά
του πίνακα. Ακολουθεί ένα παράδειγμα με column spanning:
Αυτό το κελί εκτείνεται σε δύο στήλες Αυτό το κελί εκτείνεται σε μία στήλη
A B C
Η ιδιότητα "colspan=value" τοποθετείτε μέσα στην ετικέτα <td> του κελιού όπου
εφαρμόζεται. Παρακάτω είναι ο κώδικας που γράφτηκε για το παραπάνω
παράδειγμα:
<table border=1>
<tr>
<td colspan=2>This cell spans over two columns
</td>
<td>This cell spans over one column
</td>
</tr>
<tr align="center">
<td>A
</td>
<td>B
</td>
<td>C
</td>
</tr>
</table>
Ένα παράδειγμα με row spanning:
A B
Αυτό το κελί εκτείνεται σε δύο γραμμές
C D
Η ιδιότητα "rowspan=value" τοποθετείται μέσα στην ετικέτα <td> όπου θέλουμε

να εφαρμοστεί. Παρακάτω δίνεται ο κώδικας του παραπάνω παραδείγματος:
<table border=1>
<tr>
<td rowspan=2>This cell spans over two rows
</td>
<td>A
</td>
<td>B
</td>
</tr>
<tr>
<td>C
</td>
<td>D
</td>
</tr>
</table>
Μπορείτε επίσης να εφαρμόσετε πολλά από τα χαρακτηριστικά που αναφέρθηκαν

στις προηγούμενες παραγράφους και μέσα στους πίνακες, όπως τα font size, type
και color, εισαγωγή εικόνας, δημιουργία λίστας και προσθήκη υπερσυνδέσμων.
Απλά προσθέστε την κατάλληλη ετικέτα στο συγκεκριμένο κελί που θέλετε να
μορφοποιήσετε, ακριβώς μετά την ετικέτα <td> του κελιού αυτού.
7. ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΠΛΑΙΣΙΑ (FRAMES)
Κάποιοι σχεδιαστές ιστοσελίδων χρησιμοποιούν τα πλαίσια στις σελίδες τους για να

κάνουν τα site τους πιο όμορφα και φιλικά. Τα πλαίσια κάνουν ευκολότερη την
περιήγηση σε μια τοποθεσία χωρίς να χανόμαστε.
Μπορούμε να κάνουμε κάποια από τα πλαίσια να παραμένουν σταθερά (π.χ. το

πάνω και το αριστερά) ενώ το υπόλοιπο τμήμα της σελίδας να αλλάζει ανάλογα με
τον επιλεγόμενο υπερσύνδεσμο. Όταν χρησιμοποιούμε πλαίσια μια ξεχωριστή
σελίδα φορτώνεται σε κάθε πλαίσιο. Αυτό σημαίνει ότι με τα πλαίσια μπορούμε να
έχουμε περισσότερες από μια σελίδες ταυτόχρονα στην οθόνη του φυλλομετρητή.
Μπορείτε να επιλέξετε σε πόσα πλαίσια θέλετε να χωρίζεται η σελίδα σας, ποια θα
είναι η μορφή τους και πιο HTML έγγραφο θα περιέχει το κάθε ένα πλαίσιο.
Το Frameset Έγγραφο
Ένα frameset έγγραφο είναι ένα HTML έγγραφο που καθοδηγεί τον φυλλομετρητή
να τακτοποιήσει το περιεχόμενο της ιστοσελίδας με έναν συγκεκριμένο τρόπο. Σε
ένα frameset έγγραφο η ταμπέλα "frameset" αντικαθιστά την ταμπέλα "body".
Ξεκινάτε το frameset έγγραφο με τη συνηθισμένη μορφή:
<html><head><title>Title</title></head>
Έπειτα εισάγετε την ετικέτα <frameset>:
Παράδειγμα: <frameset rows="20%, 80%">
Η παραπάνω ετικέτα λέει ότι η σελίδα θα χωριστεί σε δύο τμήματα, ένα από πάνω
και ένα από κάτω, με τον τρόπο που ορίζουν οι δύο τιμές μέσα στην ταμπέλα. Εάν
τρεις γραμμές ήταν απαραίτητες, θα εισάγαμε τρεις τιμές:
<frameset rows="10%, 50%, 40%">
Οι αριθμητικές τιμές λένε στον φυλλομετρητή πόσο χώρο, στο παράθυρο του
προγράμματος, θα καταλάβει το κάθε τμήμα. Μπορείτε να χρησιμοποιήσετε τιμές
επί τις εκατό ή τιμές σε pixels. Ένα "*" μπορεί επίσης να χρησιμοποιηθεί στη θέση
μιας τιμής, δείχνοντας ότι το συγκεκριμένο πλαίσιο μπορεί να καταλάβει όσο χώρο
παραμένει διαθέσιμος στο παράθυρο του φυλλομετρητή:
Παράδειγμα: <frameset rows="100, *, 50">
Η παραπάνω ετικέτα ορίζει ότι η σελίδα θα χωριστεί σε τρεις γραμμές. Το πρώτο

(επάνω) πλαίσιο θα καταλάβει χώρο 100 pixels, το κάτω πλαίσιο θα καταλάβει
χώρο 50 pixels και το μεσαίο πλαίσιο θα καταλάβει όσο χώρο απέμεινε στο
παράθυρο του φυλλομετρητή.
Αν η σελίδα πρέπει να διαιρεθεί σε στήλες χρησιμοποιείστε την ιδιότητα "cols" με

τις ανάλογες τιμές:
Παράδειγμα: <frameset cols="200, *">
Εδώ η σελίδα έχει χωριστεί σε δύο στήλες. Η αριστερή καταλαμβάνει χώρο

πλάτους 200 pixels. Η δεξιά καταλαμβάνει όσο χώρο έχει απομείνει στα δεξιά του
παραθύρου.
Μπορείτε επίσης να συνδυάσετε frameset γραμμές και frameset στήλες για να

δημιουργήσετε πολυπλοκότερες σελίδες.
Ορίζοντας το περιεχόμενο των πλαισίων

Η ετικέτα <frame src> λέει στον φυλλομετρητή ποιο HTML έγγραφο να προσθέσει
σε κάθε πλαίσιο:
<html><head><title>Frameset Test</title></head>
<frameset cols="200, *">
<frame src="links.htm">
<frame src="information.htm">
</frameset>
</html>
Αυτό το παράδειγμα δείχνει ένα frameset έγγραφο το οποίο χωρίζει μία ιστοσελίδα
σε δύο στήλες ή πλαίσια. Στο αριστερό πλαίσιο και σε πλάτος 200 pixels θα
παρουσιαστεί το έγγραφο "links.htm". Η υπόλοιπη σελίδα, η δεξιά στήλη, θα
παρουσιάσει το έγγραφο "information.htm". Βλέπετε επίσης και τις ετικέτες τέλους
που χρησιμοποιούνται:
</frameset>
</html>
Ονομάζοντας τα πλαίσια
Εάν θέλουμε να πούμε στον φυλλομετρητή σε ποιο πλαίσιο θέλουμε να εμφανιστεί
μια νέα πληροφορία, τότε πρέπει να ονομάσουμε τα πλαίσια. Εάν δεν ορίσουμε σε
πιο πλαίσιο θέλουμε να εμφανιστεί η νέα πληροφορία, τότε η νέα σελίδα θα
εμφανιστεί στο πλαίσιο που ήταν η σελίδα που την κάλεσε, αντικαθιστώντας την.
Για να ονομάσουμε ένα πλαίσιο τοποθετούμε την ιδιότητα "name" μέσα στην
ετικέτα <frame src> στο frameset έγγραφο.
<frame src="links.htm" name="menu">

<frame src="information.htm" name="info">
Αφού ονομάσουμε τα πλαίσια μπορούμε να καθορίσουμε σε ποιο πλαίσιο θέλουμε

να εμφανίζεται η κάθε νέα σελίδα προσθέτοντας την ταμπέλα "target"
ακολουθούμενη από το όνομα του πλαισίου.
<a href="company.htm" target="info"> Company Information</a>
Το παραπάνω λέει στο φυλλομετρητή να εμφανίσει τη νέα σελίδα στο πλαίσιο με

το όνομα "info".
Αποθήκευση και προβολή των εγγράφων

Όπως και τα κανονικά έγγραφα HTML , και τα frameset έγγραφα αποθηκεύονται
είτε με την .htm είτε την .html προέκταση. Βεβαιωθείτε ότι τα επι μέρους
frameset αρχεία βρίσκονται στον ίδιο κατάλογο με το κυρίως HTML έγγραφο που
θα περιέχει τα πλαίσια.
Ανοίγοντας το κυρίως frameset έγγραφο στον φυλλομετρητή σας, βλέπετε μια

οθόνη διαιρεμένη σε πολλά μέρη με κάθε πλαίσιο να περιέχει μία ξεχωριστή
ιστοσελίδα.
Αφαιρώντας Scrollbars και Borders

Εάν θέλετε πλαίσια χωρίς scrollbars και περιθώρια χρησιμοποιείστε τα παρακάτω
tags:
Απαλείψτε τα scrollbars προσθέτοντας την ετικέτα "scrolling=no".
Παράδειγμα: <frame src="links.htm" scrolling=no>

Απαλείψτε τα περιθώρια με την ετικέτα "frameborder=0".
Παράδειγμα: <frame src="links.htm" frameborder=0>
Μπορείτε επίσης να καθορίσετε το πλάτος και το ύψος του εσωτερικού περιθωρίου

του κάθε πλαισίου προσθέτοντας τις ετικέτες "marginwidth=value" και
"marginheight=value" μέσα στην ετικέτα <frame src>. Μπορείτε να ρυθμίσετε τα
περιθώρια στα όσα pixels θέλετε.
Πολλαπλά πλαίσια
Μια ποικιλία από γραμμές και στήλες μπορούν να συνδυαστούν, δημιουργώντας
frameset έγγραφα μέσα σε άλλα frameset έγγραφα. Η οργάνωση των ετικετών για
την επίτευξη αυτού το εφέ μπορεί να είναι αρκετά πολύπλοκη. Παρακάτω είναι ένα
παράδειγμα μιας απλής σελίδας με "φωλιασμένα" πλαίσια:
Το frameset έγγραφο γι’ αυτή τη δομή είναι:
<html><head><title>Frame Test</title></head>
<frameset rows="20%, 80%">
<frameset cols="70%, 30%">

<frame src="logo.htm">
<frame src="address.htm">
</frameset>
<frameset cols="85%, 15%>

<frame src="info.htm">
</frameset>
</frameset>
<html>
Αναλύοντας τον παραπάνω κώδικα έχουμε:
<frameset rows="20%, 80%">

Υπάρχουν δύο γραμμές σ’ αυτό το έγγραφο. Η πάνω γραμμή καταλαμβάνει 20%
του διαθέσιμου χώρου. Η κάτω γραμμή καταλαμβάνει το 80%.
<frameset cols="70%, 30%">

Υπάρχουν δύο στήλες μέσα στην πρώτη γραμμή. Η αριστερή καταλαμβάνει το 70%
του οριζόντιου χώρου και η δεξιά το 30%.
<frame src="logo.htm">
Το HTM έγγραφο "logo" θα εμφανιστεί στην πρώτη στήλη της πρώτης γραμμής.
<frame src="address.htm">
Το HTM έγγραφο "address" θα εμφανιστεί στη δεύτερη στήλη της πρώτης
γραμμής.
Το πρώτο frameset στήλης ολοκληρώθηκε.
<frameset cols="85%, 15%>

Υπάρχουν δύο στήλες μέσα στην δεύτερη γραμμή. Η αριστερή καταλαμβάνει το
85% του οριζόντιου χώρου και η δεξιά το 15%.
<frame src="info.htm">
Το HTM έγγραφο "info" θα εμφανιστεί στην πρώτη στήλη της δεύτερης γραμμής.
Το HTM έγγραφο " links " θα εμφανιστεί στην δεύτερη στήλη της δεύτερης
γραμμής.
</frameset>
Το δεύτερο frameset στήλης ολοκληρώθηκε.
</frameset>
Το συνολικό frameset ολοκληρώθηκε.
Τα πλαίσια είναι ένα σπουδαίο εργαλείο για να κάνετε τις ιστοσελίδες σας πιο
δυναμικές και όμορφες. Σας επιτρέπουν να διατηρείτε συγκεκριμένα κομμάτια της
σελίδας σας ακόμα και αν ο χρήστης μεταβεί μέσω συνδέσμων σε άλλα τμήματα της
δικιά σας ή και άλλης τοποθεσίας.
8. ΕΙΚΟΝΕΣ-ΓΡΑΦΙΚΑ
Από την πρώτη σας κιόλας σελίδα είναι σχεδόν σίγουρο ότι θα θελήσετε να
προσθέσετε εικόνες και γραφικά. Τα γραφικά καθορίζουν σε μεγάλο βαθμό το
πόσο ωραία φαίνεται ή όχι μια ιστοσελίδα.
Μπορείτε να χρησιμοποιήσετε μικρά γραφικά:
Μακρόστενα γραφικά:
Μεγαλύτερες εικόνες:
Ακόμα και κινούμενα γραφικά (animated Gifs):
Τα μικρά εικονίδια μπορούν να χρησιμοποιηθούν και σαν κουκκίδες (bullets) σε

λίστες, όπως φαίνεται παρακάτω:
First line
Second line
Third line
Για να γίνει το παραπάνω απλά εισάγετε την ετικέτα <img src> εκεί όπου θέλετε
να εμφανιστεί το bullet. Δε χρειάζεται να χρησιμοποιήσετε το tag <ul>.
Τα μακρόστενα γραφικά μπορούν να χρησιμοποιηθούν σαν διαχωριστικά

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

ιστοσελίδα με την ετικέτα:
<img src="name of file">
Μπορείτε επίσης να χρησιμοποιήσετε μια εικόνα ως υπερσύνδεσμο σε άλλη σελίδα

ή στοιχείο. Για να γίνει αυτό απλά εισάγετε την ετικέτα <img src> αμέσως μετά
από ένα anchor tag (<a href="link page">). Θυμηθείτε να θέσετε το "border=0"
μέσα στην ετικέτα της εικόνας, διαφορετικά ένα άσχημο περίγραμμα θα
εμφανίζεται γύρο από την εικόνα υπερσύνδεσμο.
Παράδειγμα: <a href="http://www.e-view.gr"><img src="logo.jpg"

border=0></a>
Στο παραπάνω παράδειγμα, όταν οι χρήστες πατάνε πάνω στην εικόνα "logo.jpg"
θα μεταφέρονται στη σελίδα "http://www.e-view.gr"
Οποιαδήποτε εικόνα μπορεί επίσης να χρησιμοποιηθεί και ως φόντο στην

ιστοσελίδα σας. Αυτό επιτυγχάνεται προσθέτοντας την ιδιότητα
background="image file name" μέσα στην ετικέτα <body>.
Παράδειγμα: <body background="logo.jpg>
Labeling
Άλλη μία χρήσιμη ετικέτα που μπορείτε να προσθέσετε στην ετικέτα της εικόνας
είναι το "alt". Με τη χρήση αυτής της ετικέτας μία ταμπέλα επεξήγησης
εμφανίζεται όταν ο χρήστης περνάει το ποντίκι πάνω από το γραφικό. Το κείμενο
της επεξήγησης εμφανίζεται επίσης και πριν εμφανιστεί η εικόνα καθώς
φορτώνεται η σελίδα στο φυλλομετρητή, και αυτό κρατάει το ενδιαφέρον των
χρηστών μέχρις ότου έρθει το γραφικό. Μπορείτε να εισάγετε οποιοδήποτε κείμενο
στην ετικέτα "alt".
Παράδειγμα: <img src="logo.jpg" alt="Welcome to our Homepage">
Στοίχιση Εικόνων (Image Alignment)

Η οριζόντια στοίχιση των εικόνων γίνεται με τους τρόπους που αναφέρθηκαν σε
προηγούμενο κεφάλαιο. Ας κάνουμε μια μικρή επανάληψη:
 Χρήση του <div align=".."> πριν την εικόνα για στοίχιση στο κέντρο,
αριστερά ή δεξιά.
 Χρήση του </div> ακριβώς μετά το image tag για να λήξει η στοίχιση.
 Χρήση του <align=".."> μέσα στην ετικέτα <img src> για αναδίπλωση του
κειμένου γύρω από την εικόνα.
Τοποθετείστε τα παρακάτω tags μέσα στην ετικέτα "img src" για να ρυθμίσετε την
κατακόρυφη στοίχιση των εικόνων σε σχέση με το κείμενο:
 align="bottom"
Το κείμενο ευθυγραμμίζεται με το κάτω μέρος της εικόνας.
TEXT
<img src="images/exampleimage.jpg" alt="Παράδειγμα στοίχισης"

border=0 align="bottom">
 align="top"
Το κείμενο ευθυγραμμίζεται με το πάνω μέρος της εικόνας.
TEXT

border=0 align="top">
 align="middle"
Το κείμενο ευθυγραμμίζεται παραπλεύρως με το μέσο της εικόνας.
TEXT
border=0 align="middle">
 align="absmiddle"
Το κέντρο του κειμένου ευθυγραμμίζεται παραπλεύρως με το μέσο της
εικόνας.
TEXT

border=0 align="absmiddle">
Στα παραπάνω παραδείγματα η εικόνα στοιχίζεται εξ' ορισμού στα αριστερά, κι έτσι
το κείμενο εμφανίζεται στα δεξιά της. Αν θέλετε το κείμενο στ' αριστερά και την
εικόνα στα δεξιά μπορείτε να χρησιμοποιήσετε την ετικέτα <div align> για τη
στοίχιση της εικόνας, όπως περιγράφηκε στην αρχή αυτής της παραγράφου.
Όταν οι εικόνες σας δεν εμφανίζονται...
Πολλοί αρχάριοι αντιμετωπίζουν προβλήματα με την προσθήκη εικόνων στις σελίδες

τους. Όταν τα GIFs και τα JPGs δεν δουλεύουν, συνήθως εμφανίζεται στη θέση τους
το παρακάτω εικονίδιο:
Η αιτία του προβλήματος είναι συνήθως η εξής: δεν έχετε πληκτρολογήσει το σωστό
όνομα αρχείου για την εικόνα. Δίνουμε παρακάτω μερικά απλά βήματα για την επίλυση
του προβλήματος:
 Απλοποιείστε τα πράγματα. Βάλτε το HTML αρχείο και τα αρχεία των εικόνων

στον ίδιο κατάλογο. Μετονομάστε το αρχείο εικόνας σε xyz.gif (ή xyz.jpg).
Δημιουργείστε την ετικέτα <img src="xyz.gif"> στην HTML σελίδα.
Εμφανίστε τη σελίδα με τον φυλλομετρητή. Αν συνεχίζετε να βλέπετε το
παραπάνω εικονίδιο αντί για την εικόνα, τότε...
 Βεβαιωθείτε ότι πραγματικά μετονομάσατε το αρχείο σε xyz.gif. Σε UNIX
μηχανήματα, παίζουν ρόλο τα κεφαλαία/πεζά, έτσι βεβαιωθείτε ότι
πληκτρολογήσατε κεφαλαία και πεζά όπως ακριβώς θα έπρεπε. Το όνομα
Xyz.gif είναι τελείως διαφορετικό από το xyz.gif σε ένα UNIX μηχάνημα.
 Στα Windows, μερικές φορές το λειτουργικό σύστημα προσθέτει μια κατάληξη

στα ονόματα των αρχείων. Για παράδειγμα, μπορεί να βλέπετε xyz.gif στον
Explorer, αλλά τα Windows να έχουν ονομάσει το αρχείο xyz.gif.gif. Ο
απλούστερος τρόπος να δείτε τι συμβαίνει είναι να χρησιμοποιήσετε την
εντολή dir στο MS-DOS prompt, έτσι ώστε να δείτε τα πραγματικά ονόματα
των αρχείων. Αν όντως τα Windows προσθέτουν προεκτάσεις, απλά
απενεργοποιήστε αυτή την συμπεριφορά από το options dialog του explorer.
9. ΔΗΜΟΣΙΕΥΣΗ ΤΩΝ ΙΣΤΟΣΕΛΙΔΩΝ ΣΤΟ ΙΝΤΕΡΝΕΤ
Έχετε δημιουργήσει λοιπόν ένα υπέροχο site και θέλετε να το "ανεβάσετε" σε

κάποιον Web server έτσι ώστε όλοι να μπορούν να τον δουν. Υπάρχουν πολλές
εταιρίες και εμπορικά sites, σε Ελλάδα και εξωτερικό, με Web servers, που
προσφέρουν δωρεάν χώρο για να τοποθετήσετε τις σελίδες σας. Το μειονέκτημα
αυτής της επιλογής είναι ότι κατά πάσα πιθανότητα θα πρέπει να εμφανίζεται στις
σελίδες σας και κάποιο διαφημιστικό της εταιρίας αυτής με τη μορφή popup
παραθύρου ή banner στο πάνω μέρος ή κάπου μέσα στην ιστοσελίδα. Επίσης,
όπως είναι φυσικό, θα υπάρχουν και πολλοί περιορισμοί στο διαθέσιμο χώρο, στην
ταχύτητα, στο traffic (μέγιστη κίνηση, συνήθως σε MBytes/μήνα) κτλ. Μερικές
από αυτές τις εταιρίες δωρεάν φιλοξενίας είναι εξής:
Ελληνικές
 Pathfinder
 Freepage
 my-Home.gr
 apn.gr
 click.gr
 Hellas Portal -Free Website
Ξένες
 Geocities
 Tripod
 Angelfire
 Liquid2k
 Coolfreepages
Εκτός από τα παραπάνω, σχεδόν όλοι οι φορείς υπηρεσιών Internet (ISPs),

προσφέρουν δωρεάν στους πελάτες τους που έχουν έναν απλό λογαριασμό
τηλεφωνικής σύνδεσης Internet, τη δυνατότητα να έχουν έναν προσωπικό τόπο.
Και πάλι φυσικά με περιορισμένο χώρο (συνήθως 5Mb) και όχι για επαγγελματική
χρήση. Επίσης, δε θα έχετε δικό σας όνομα Domain και η διεύθυνσή σας θα είναι
κάπως έτσι: www.fores.gr/~mysite ή www.fores.gr/users/~mysite
Άλλη επιλογή είναι να πληρώσετε φιλοξενία σε κάποια εταιρία. Τα περισσότερα

επαγγελματικά sites ακολουθούν αυτή την οδό. Μ' αυτό τον τρόπο θα έχετε
μεγαλύτερο χώρο αποθήκευσης, επιπλέον υπηρεσίες και αξιοπιστία. Πληρώνοντας
μια εταιρία φιλοξενίας ιστοσελίδων θα μπορείτε επίσης να έχετε και το δικό σας
domain name, τη δικιά σας δηλαδή internet διεύθυνση.
Domain Name
Όταν λέμε Domain, πρακτικά εννοούμε ιντερνετική διεύθυνση του τύπου:

www.enterprise.com ή www.enterprise.gr, όπου βέβαια enterprise είναι το όνομα της
εταιρίας μας (ή γενικότερα ο τίτλος του site μας).
Βέβαια οι πραγματικές διευθύνσεις στο Internet αποτελούνται από αριθμούς, αλλά

επειδή μας είναι πιο εύκολο να θυμόμαστε ονόματα, χρησιμοποιούμε την υπηρεσία
ονομάτων Domain, για να αντιστοιχίζουμε ονομαστικές διευθύνσεις στις αριθμητικές.
Όταν λοιπόν λέμε ότι πήραμε ένα Domain, ουσιαστικά ενημερώθηκε η βάση
δεδομένων της υπηρεσίας ονομάτων Domain με τη δική μας διεύθυνση κι έτσι όταν
κάποιος πληκτρολογεί την ονομαστική μας διεύθυνση, η υπηρεσία Domain επιστρέφει
στον υπολογιστή του την αριθμητική μας διεύθυνση.
Για να αποκτήσουμε όνομα Domain, κάνομε αίτηση στον φορέα που διαχειρίζεται
το Domain, συνήθως συμπληρώνοντας μια φόρμα στις ιστοσελίδες του. Το
ελληνικό Domain το διαχειρίζεται το Ινστιτούτο Πληροφορικής του Ιδρύματος
Τεχνολογίας και Ερευνας, (http://www.ics.forth.gr/index-gr.html ή για το
ελληνικό Domain: http://www.hostmaster.gr), ενώ το διεθνές το διαχειρίζεται η
Internic: (http://www.internic.net). Εκτός από τις καταλήξεις .com που σημαίνει
εταιρία και .gr Που σημαίνει Ελλάδα, είναι διαθέσιμες και οι καταλήξεις: .edu
(εκπαιδευτικός οργανισμός), .gov (κυβερνητική υπηρεσία), .mil (στρατιωτική
υπηρεσία), .net (δίκτυο), .org (οργανισμός).
Το κόστος για την καταχώρηση και κατοχή ενός ελληνικού ονόματος είναι 25,97€
(περικλείεται 18% Φ.Π.Α.) για κάθε χρόνο. Η αρχική χρέωση είναι για δύο χρόνια
καταχώρησης και είναι 51,94€. Για την καταχώρηση ενός διεθνούς ονόματος το
κόστος ποικίλει ανάλογα με την εταιρία μέσω της οποίας θα επιλέξετε να κάνετε
την καταχώρηση, ενώ κάποιες εταιρίες προσφέρουν και δωρεάν καταχώρηση σαν
μέρος ενός πακέτου φιλοξενίας ιστοσελίδων. Για παράδειγμα η Network Solutions,
μια υποδιαίρεση της InterNIC, προσφέρει καταχώρηση με $35 το χρόνο αν
φιλοξενείτε τη σελίδα σας σ' αυτήν, και με $40 αν όχι. Έτσι, προτού παραγγείλετε ένα
domain name, επικοινωνήστε πρώτα με την εταιρία που φιλοξενεί το site σας.
Αρκετές από αυτές αναλαμβάνουν οι ίδιες να κάνουν την καταχώρηση αντί για εσάς.
10. ΧΡΗΣΙΜΑ ΕΡΓΑΛΕΙΑ
Αφού ανεβάσετε το site σας, σίγουρα θα θελήσετε να μάθετε πόση και τι είδους
κίνηση έχετε. Τοποθεσίες όπως οι Νedstat, HitBox, SiteMeter ή Ηotstats
(ελληνική) σας παρέχουν δωρεάν διάφορες υπηρεσίες στατιστικών στοιχείων για
την επισκεψημότητα της σελίδας σας. Αν πάλι θέλετε έναν απλό μετρητή
επισκεπτών, τότε η FastCounter είναι μια εύκολη λύση.
Υπάρχουν διάφορα εργαλεία που μπορείτε να χρησιμοποιήσετε για να κάνετε το

site σας καλύτερο. Ένα από τα καλύτερα υπάρχει στο http://www.bcentral.com,
με το οποίο ελέγχετε το site σας για HTML λάθη, ορθογραφικά λάθη, συμβατότητα
με τους διάφορους φυλλομετρητές (browser compatibility), λανθασμένα links,
δημιουργία meta tags (δείτε παρακάτω) κτλ.
11. META TAGS
Αν σκοπεύετε να εισάγετε τις ιστοσελίδες σας σε μηχανές αναζήτησης (search

engines) έτσι ώστε οι άλλοι να μπορούν να τις βρίσκουν, θα πρέπει να προσθέσετε
στη σελίδα σας τις ειδικές ετικέτες που λέγονται Meta tags. Τα δύο πιο γνωστά
Meta tags σας επιτρέπουν να προσδιορίσετε μια περιγραφή και ένα σύνολο από
λέξεις κλειδιά, αντίστοιχα. Τα Meta tags πάντα τοποθετούνται μεταξύ των ετικετών
<HEAD> και </HEAD> του HTML αρχείου.
<Meta Name="Description" Content="Μια σύντομη περιγραφή του περιεχομένου

της σελίδας">
<Meta Name="keywords" Content="λέξη1, λέξη2, λέξη3, λέξη4, λέξη5">
Το πρώτο tag είναι μια περιγραφή της σελίδας. Οι μηχανές αναζήτησης

χρησιμοποιούν αυτό το κείμενο κατ' ευθείαν στις λίστες τους. Αν δεν βάλετε
description meta tag, τότε οι μηχανές είτε αφήνουν την περιγραφή σας κενή, είτε
χρησιμοποιούν τις πρώτες μία ή δύο προτάσεις από τη σελίδα σας.
Το δεύτερο tag παρέχει ένα σύνολο από επιπλέον λέξεις κλειδιά (keywords). Οι
μηχανές αναζήτησης συνήθως καταγράφουν όλες τις λέξεις σε μια σελίδα, αλλά σε
πολλές περιπτώσεις ίσως να μη χρησιμοποιείτε κάποια λέξη στο κυρίως κείμενο,
και η οποία μπορεί να χρησιμοποιηθεί από κάποιον για να αναζητήσει τη σελίδα
σας. Αν ξέρετε ότι οι χρήστες πληκτρολογούν συχνά λάθος μια λέξη, τότε μπορείτε
επίσης να βάλετε και τις λανθασμένα γραμμένες λέξεις στη λίστα.
Υπάρχουν κι άλλα Meta tags που μπορείτε να βάλετε. Πολλά HTML εργαλεία
τοποθετούν αυτόματα κάποια από αυτά. Για παράδειγμα δείτε παρακάτω δύο tags
που τοποθετεί αυτόματα το Microsoft Word όταν το χρησημοποιείτε για κατασκευή
ιστοσελίδων:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-

1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
Σε καμία περίπτωση τα meta tags δεν επηρεάζουν το πως φαίνεται η ιστοσελίδα στο
φυλλομετρητή. Τα Meta tags "description" και "keywords" είναι τα πιο συχνά
χρησιμοποιούμενα.
12. ΠΡΟΩΘΗΣΗ ΤΟΥ SITE
Για να μπορεί ο κόσμος να βρίσκει και να επισκέπτεται την ιστοσελίδα σας, θα

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

να χρησιμοποιήσετε για να αυξήσετε τους επισκέπτες της σελίδας σας.
Καταχώρηση σε Μηχανές Αναζήτησης

Οι μηχανές αναζήτησης διαβάζουν μια ιστοσελίδα και καταγράφουν όλες τις λέξεις
που βρίσκουν. Οι χρήστες της μηχανής μπορούν να βρούν μια σελίδα ψάχνοντας
για λέξεις κλειδιά (keywords). Το καλό με τις μηχανές αναζήτησης είναι ότι σας
επιτρέπουν να βρείτε οτιδήποτε περιέχει μία συγκεκριμένη λέξη, ή σύνολο λέξεων.
Το μειονέκτημά τους είναι ότι γενικά επιστρέφουν και πάρα πολλά άχρηστα
πράγματα.
Γενικά είναι πολύ εύκολο να βάλετε μια ιστοσελίδα στη λίστα μιας μηχανής
αναζήτησης. Η κάθε μηχανή έχει κάπου στη σελίδα της ένα "submit a site"
υπερσύνδεσμο, ή κάτι ανάλογο. Μέσω αυτού μπορείτε να συμπληρώσετε μια
φόρμα όπου ζητάτε την καταχώρηση του δικού σας site. Η καταχώρηση δε γίνεται
αμέσως, συνήθως απαιτούνται 4-6 εβδομάδες ανάλογα με τη μηχανή, και σε
μερικές περιπτώσεις πρέπει να υποβάλετε το site αρκετές φορές μέχρι να
προστεθεί. Η κάθε μηχανή αναζήτησης είναι διαφορετική. Καλό είναι να
υποβάλλετε την κάθε μία σελίδα του site σας ξεχωριστά, για να είστε σίγουροι ότι
οι λέξεις κλειδιά της κάθε σελίδας θα συμπεριληφθούν.
Παρακάτω δίνεται μια λίστα με τις διευθύνσεις των φορμών υποβολής των
κυριοτέρων μηχανών αναζήτησης:
Ελληνικές
 In.gr
 Forthnet
 Anazitisis
 Pathfinder
 Phantis
 APN
 Vizzavi
 Robby
 Evresis
Ξένες
 AltaVista
 AOL Search
 Excite
 Google
 HotBot
 Infoseek/Go
 Lycos
 WebCrawler
Για μια πλήρη λίστα όλων των διεθνών μηχανών αναζήτησης, δείτε αυτή τη λίστα
από το Yahoo.
Καταχώρηση σε Καταλόγους (Link Sites)

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

προστεθούν νέοι ιστοχώροι, καθώς κάθε νέο υποβαλλόμενο site πρέπει πρώτα να
εξεταστεί για να μπεί στη σωστή κατηγορία. Παρακάτω δίνετε μια λίστα με τα
σημαντικότερα sites καταλόγους.
 Yahoo
 Hot Links
 Jayde Online Directory
 Links2U
 LookSmart
 Nerd World
 Northern Light
 Open Directory
 Rocket Links
Υπηρεσίες Καταχώρησης (Registration Services)

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

το κάνετε από μόνοι σας. Απλά η χρήση τους είναι θέμα εξοικονόμησης χρόνου.
Δωρεάν:
 ip.gr (ελληνική)
 Add Me!
 Links2U
 SiteAdd
 SelfPromotion
Επί πληρωμή:
 123 Add URL

 Register
 Submit It
Για μια πλήρη λίστα όλων των διαθέσιμων υπηρεσιών καταχώρησης, δείτε αυτή τη
λίστα από το Yahoo.

Κατασκευή Ιστοσελίδων - Τα Βασικά

Uploaded by

Document Information

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

Κατασκευή Ιστοσελίδων - Τα Βασικά

Uploaded by

Copyright:

Available Formats

1.

ΠΩΣ ΔΟΥΛΕΥΟΥΝ ΟΙ ΙΣΤΟΣΕΛΙΔΕΣ

Προκειμένου να μιλήσουμε για ιστοσελίδες και το πώς λειτουργούν, θα πρέπει να

 Διακομιστής Web (Web server) - Ένας διακομιστής Web είναι ένα

2. ΠΑΡΑΤΗΡΩΝΤΑΣ ΤΟΝ ΚΩΔΙΚΑ

Τώρα, ας μάθουμε τι σημαίνουν τα διάφορα tags, και ας δημιουργήσουμε μια απλή

Π.χ.: <center>, <body>

Π.χ.: </center>, </body>

Οι περισσότερες ετικέτες έρχονται σε ζευγάρια “αρχής” και “τέλους”, αλλά αυτό

Οι ετικέτες που είναι απαραίτητες στο τέλος κάθε σελίδας είναι:

4. ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΜΙΑ ΑΠΛΗ ΙΣΤΟΣΕΛΙΔΑ

Ανοίξτε το Σημειωματάριο και πληκτρολογήστε το παρακάτω HTML κείμενο:

Σώστε το παραπάνω κείμενο σε αρχείο με κατάληξη .html ή .htm. Στη συνέχεια

Τρία πράγματα παρατηρούμε στην παραπάνω εικόνα:

 Η σελίδα έχει τον τίτλο "My First Page."

5. ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ ΜΟΡΦΟΠΟΙΗΣΗΣ ΤΗΣ HTML

Οι παρακάτω ετικέτες χρησιμοποιούνται συνέχεια και κάνουν το 90% όλης της

Έντονα, Πλάγια και Υπογραμμισμένα (Bold, Italics and Underline)

 Κάνε οποιοδήποτε κομμάτι κειμένου έντονο προσθέτοντας την ετικέτα:

στην αρχή του κειμένου, και την ετικέτα τέλους:

οπουδήποτε θέλετε το έντονο χαρακτηριστικό να σταματήσει.

 Για πλάγια χρησιμοποιείστε τα παρακάτω tags με τον ίδιο τρόπο:

This is <i>italicized</i>. This is italicized.

 Για υπογραμμισμένα οι ετικέτες είναι:

This is <u>underlined</u>. This is underlined.

Αλλαγές γραμμής και Παράγραφοι (Βreaks and Paragraphs)

<br> προκαλεί μια αλλαγή γραμμής.

<hr> δημιουργεί μια οριζόντια γραμμή

This is a horizontal rule:

Αλλαγή χρώματος, γραμματοσειράς και μεγέθους χαρακτήρων (Font Color,

 Αλλάξτε το χρώμα οποιουδήποτε κειμένου με τις ετικέτες:

This is <font color="red">red</font>. This is red.

This is <font color="green">green</font>. This is green.

Τα περισσότερα βασικά χρώματα θα δουλέψουν. Επίσης δοκιμάστε "lights" και

Εάν επιθυμείτε να εφαρμόσετε ένα συγκεκριμένο χρώμα σ' ολόκληρο το κείμενο

Παράδειγμα: <body text="blue">

Αν εφαρμόσετε ένα χρώμα σ' ολόκληρο το κείμενο, τότε μπορείτε ακόμα να

 Αλλάξτε τη γραμματοσειρά οποιουδήποτε κειμένου με τις ετικέτες:

<font face="font type"> ... </font>

This is <font face="times">Times Roman</font>. This is Times Roman.

This is <font face="impact">Impact</font>. This is Impact.

(Σημείωση: Εάν χρησιμοποιήσετε μια γραμματοσειρά που δεν την έχει

 Αλλάξτε το μέγεθος οποιουδήποτε κειμένου με τις ετικέτες:

Παράδειγμα: <font size=4>

Το size παίρνει τιμές από 1 έως 7, με το 7 να παριστάνει το μεγαλύτερο και

Μπορείτε επίσης να αλλάξετε το μέγεθος προσθέτοντας ή αφαιρώντας από

Παράδειγμα: <font size=+4>, ή <font size=-2>

This font is <font size=+2>increased by This font is increased

This font is <font size=-2>decreased by

This font is <font size=-1>decreased by

Μπορείτε επίσης να αλλάξετε το μέγεθος με τις ετικέτες <small> και <big>:

This is <small>small</small> text. This is small text.

This is <big>big</big> text. This is big text.

Τα Heading tags επίσης αλλάζουν το μέγεθος, δημιουργώντας μια έντονη

Τερματίστε κάθε στοιχείο font με την ετικέτα:

Ή, βάζοντας την αντίστοιχη ετικέτα τέλους του συγκεκριμένου tag που

Παράδειγμα: </small>, </big>, </H2>

Αλλάζοντας το χρώμα του φόντου

Παράδειγμα: <body bgcolor="yellow">

Μια λίστα με κουκκίδες (unordered list) φαίνεται ως εξής:

Μια λίστα με κουκκίδες αρχικοποιείται με την ετικέτα <ul>. Η ετικέτα <li>

Ο τύπος της κουκκίδας μπορεί να αλλάξει σε "circle," "square" ή "disc"

<ul type="square">  California

Μια αριθμημένη λίστα είναι η παρακάτω: