ΓΛΩΣΣΑ HTML

ΓΛΩΣΣΑ HTML
Ο ΚΩΔΙΚΑΣ HTML ΑΠΟΤΕΛΕΙΤΑΙ ΑΠΟ 2 ΒΑΣΙΚΑ ΤΜΗΜΑΤΑ

• ΤΗΝ ΕΠΙΚΕΦΑΛΙΔΑ
• ΤΟ ΚΥΡΙΩΣ ΣΩΜΑ
<HTML>
<HEAD>
ΕΠΙΚΕΦΑΛΙΔΑ
<TITLE>MY FIRST PAGE</TITLE>

ΚΩΔΙΚΑΣ
HTML
</HEAD>
<BODY>
ΚΥΡΙΩΣ ΣΩΜΑ
MY FIRST PAGE TO INTERNET
</BODY>
</HTML>
ΕΤΙΚΕΤΕΣ
1. ΕΤΙΚΕΤΑ <BR> ΑΛΛΑΓΗ ΓΡΑΜΜΗΣ (ΑΠΛΗ ΕΤΙΚΕΤΑ)
2. ΕΤΙΚΕΤΑ <P> ΑΛΛΑΓΗ ΠΑΡΑΓΡΑΦΟΥ
<P ALIGN =”CENTER”> Η ΠΑΡΑΓΡΑΦΟΣ ΘΑ ΚΕΝΤΡΑΡΙΣΤΕΙ </P>
<P ALIGN=”LEFT”> ΣΤΟΙΧΙΣΗ ΠΑΡΑΓΡΑΦΟΥ ΑΡΙΣΤΕΡΑ
<P ALIGN=”RIGHT> ΣΤΟΙΧΙΣΗ ΠΑΡΑΓΡΑΦΟΥ ΔΕΞΙΑ
ΣΗΜΕΙΩΣΗ: H ΕΤΙΚΕΤΑ <P> ΑΦΗΝΕΙ ΜΙΑ ΚΕΝΗ ΓΡΑΜΜΗ

3. ΕΤΙΚΕΤΑ topmargin & leftmargin
<body topmargin=”20” leftmargin=”50”>
με αυτόν τον τρόπο θα έχουμε περιθώριο 20 pixels στο πάνω και στο αριστερό μέρος 20 ( το κάτω και το
δεξί μέρος δεν μπορούμε να τα πειράξουμε )
εάν θέλουμε να εξαλείψουμε το περιθώριο θέτουμε τις παραμέτρους σε 0 δηλ.

κώδικας:
<body topmargin="0" leftmargin="0">
4. ΕΤΙΚΕΤΑ <Ηn> ΔΗΜΙΟΥΡΓΕΙ ΕΠΙΚΕΦΑΛΙΔΕΣ ΜΕΓΕΘΟΥΣ n
Σύνταξη: <hn> ...... </hn>, όπου n=1...6
Λειτουργία: Το κείμενο που περικλείεται μέσα στην ετικέτα αυτή εμφανίζεται με μέγεθος
γραμματοσειράς που καθορίζεται από την τιμή του n.
Ιδιότητες: align=left(default)|center|right: για συστοίχιση της επικεφαλίδας αριστερά (προεπιλογή), στο

κέντρο ή δεξιά στη σελίδα.
Παράδειγμα: <h6> Επικεφαλίδα 6 </h6> Επικεφαλίδα 6

<h5> Επικεφαλίδα 5</h5> Επικεφαλίδα 5
<h2> Επικεφαλίδα 2 </h2> Επικεφαλίδα 2
<h1> Επικεφαλίδα 1 </h1> Επικεφαλίδα 1
<h3 align="right"> Επικεφαλίδα 3 </h3> Επικεφαλίδα 3
ΣΗΜΕΙΩΣΗ: H ΕΤΙΚΕΤΑ <Hn> ΑΦΗΝΕΙ ΜΙΑ ΚΕΝΗ ΓΡΑΜΜΗ
5. ΕΤΙΚΈΤΕΣ ΣΤΥΛ ΚΕΙΜΈΝΟΥ
ΣΎΝΤΑΞΗ: 1. <B>.... </B>

2. <U> .... </U>
3. <I> .....</I>
4. <STRIKE> ....</STRIKE>
5. <TT> ..... </TT>
6. <BIG> ..... </BIG>
7. <SMALL> ..... </SMALL>
8. <SUP> ..... </SUP>
9. <SUB> .... </SUB>
ΛΕΙΤΟΥΡΓΊΑ: 1. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΈΝΤΟΝΗ ΓΡΑΜΜΑΤΟΣΕΙΡΆ.

2. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΥΠΟΓΡΆΜΜΙΣΗ.
3. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΠΛΆΓΙΑ.
4. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΔΙΑΓΡΆΜΜΙΣΗ.
5. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΓΡΑΜΜΑΤΟΣΕΙΡΆ
ΓΡΑΦΟΜΗΧΑΝΉΣ.
6. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΜΕΓΆΛΟΥ ΜΕΓΈΘΟΥΣ
ΓΡΑΜΜΑΤΟΣΕΙΡΆ.
7. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΜΙΚΡΟΎ ΜΕΓΈΘΟΥΣ
ΓΡΑΜΜΑΤΟΣΕΙΡΆ.
8. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΣΑΝ ΕΚΘΈΤΗ.
9. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΣΑΝ ΔΕΊΚΤΗ.
ΙΔΙΌΤΗΤΕΣ: -
ΠΑΡΆΔΕΙΓΜΑ: <B> ΈΝΤΟΝΑ </B> ΈΝΤΟΝΑ

<U> ΥΠΟΓΡΑΜΜΙΣΜΈΝΑ </U> ΥΠΟΓΡΑΜΜΙΣΜΈΝΑ
<I> ΠΛΆΓΙΑ </I> ΠΛΆΓΙΑ
<STRIKE> ΔΙΑΓΡΆΜΜΙΣΗ </STRIKE> ΔΙΑΓΡΆΜΜΙΣΗ
<TT> ΓΡΑΜΜΑΤΟΣΕΙΡΆ ΓΡΑΦΟΜΗΧΑΝΉΣ ΓΡΑΜΜΑΤΟΣΕΙΡΆ
</TT> ΓΡΑΦΟΜΗΧΑΝΉΣ
<BIG> ΜΕΓΆΛΗ ΓΡΑΜΜΑΤΟΣΕΙΡΆ </BIG> ΜΕΓΆΛΗ ΓΡΑΜΜΑΤΟΣΕΙΡΆ
<SMALL> ΜΙΚΡΉ ΓΡΑΜΜΑΤΟΣΕΙΡΆ ΜΙΚΡΉ ΓΡΑΜΜΑΤΟΣΕΙΡΆ
</SMALL>
X<SUP> 2 </SUP> X2
2Δ<SUB> 3 </SUB> 2Δ 3
<B><I><H2> ΣΥΝΔΙΑΣΜΌΣ ΕΤΙΚΕΤΏΝ ΣΥΝΔΙΑΣΜΌΣ ΕΤΙΚΕΤΏΝ
</H2></I></B>
!!!ΑΥΤΌ ΠΟΥ ΠΑΡΑΤΗΡΟΎΜΕ ΕΊΝΑΙ ΌΤΙ ΑΝ ΘΈΛΟΥΜΕ ΜΠΟΡΟΎΜΕ ΝΑ ΧΡΗΣΙΜΟΠΟΙΉΣΟΥΜΕ

ΣΥΝΔΙΑΣΜΌ ΕΤΙΚΕΤΏΝ. ΤΟ ΜΌΝΟ ΠΟΥ ΠΡΈΠΕΙ ΝΑ ΠΡΟΣΈΞΟΥΜΕ ΕΊΝΑΙ Η ΣΕΙΡΆ ΜΕ ΤΗΝ ΟΠΟΊΑ
ΘΑ ΤΟΠΟΘΕΤΉΣΟΥΜΕ ΤΙΣ ΕΤΙΚΈΤΕΣ ΤΈΛΟΥΣ. Η ΣΩΣΤΉ ΣΕΙΡΆ ΕΊΝΑΙ ΝΑ "ΚΛΕΊΣΟΥΜΕ" ΠΡΏΤΑ
ΤΗΝ ΕΤΙΚΈΤΑ ΠΟΥ "ΑΝΟΊΞΑΜΕ" ΤΕΛΕΥΤΑΊΑ ΚΑΙ ΠΗΓΑΊΝΟΝΤΑΣ ΑΠΌ ΜΈΣΑ ΠΡΟΣ ΤΑ ΈΞΩ:
ΣΩΣΤΟ: <H3><STRIKE><U>..... </U></STRIKE></H3>
ΛΑΘΟΣ: <H3><STRIKE><U>..... </H3></STRIKE></U>Ι.
6.ΟΡΙΖΟΝΤΙΑ ΓΡΑΜΜΗ (<HR>)
Η ΕΤΙΚΈΤΑ <HR> ΤΟΠΟΘΕΤΕΊ ΜΙΑ ΟΡΙΖΌΝΤΙΑ ΓΡΑΜΜΉ ΚΑΤΆ ΜΉΚΟΣ ΤΗΣ ΣΕΛΊΔΑΣ. ΜΠΟΡΕΊ
ΝΑ ΧΡΗΣΙΜΟΠΟΙΗΘΕΊ ΕΠΊΣΗΣ ΚΑΙ ΓΙΑ ΝΑ ΧΩΡΊΣΕΙ ΜΙΑ ΣΕΛΊΔΑ ΣΕ ΔΙΑΦΟΡΕΤΙΚΈΣ ΠΕΡΙΟΧΈΣ,
ΑΝΆΛΟΓΑ ΜΕ ΤΟ ΠΕΡΙΕΧΌΜΕΝΟ ΤΗΣ ΚΆΘΕ ΜΙΑΣ. ΜΠΟΡΕΊ ΝΑ ΠΆΡΕΙ ΤΑ ΠΑΡΑΚΆΤΩ
ΠΡΟΣΔΙΟΡΙΣΤΙΚΆ :
<HR WIDTH=75% SIZE=3 ALIGN=”LEFT” COLOR=”….”>
ΤΟ ΜΉΚΟΣ (WIDTH) ΜΠΟΡΕΊ ΝΑ ΚΑΘΟΡΙΣΤΕΊ ΜΕ ΔΥΟ ΤΡΌΠΟΥΣ : Ο ΈΝΑΣ ΑΝΑΦΈΡΕΤΑΙ ΣΕ
ΠΟΣΟΣΤΌ ΕΠΙ ΤΟΙΣ ΕΚΑΤΌ ΤΟΥ ΜΉΚΟΥΣ ΤΗΣ ΟΘΌΝΗΣ ΚΑΙ Ο ΆΛΛΟΣ ΕΊΝΑΙ ΣΕ ΕΙΚΟΝΟΣΤΟΙΧΕΊΑ
(PIXELS). ΈΤΣΙ, ΚΑΘΟΡΊΖΟΝΤΑΣ WIDTH=50% ΘΑ ΠΆΡΟΥΜΕ ΜΙΑ ΕΥΘΕΊΑ ΓΡΑΜΜΉ ΜΕ ΜΉΚΟΣ ΊΣΟ
ΜΕ ΤΟ ΜΙΣΌ ΤΟΥ ΠΑΡΆΘΥΡΟΥ, ΕΝΏ ΜΕ WIDTH=200 ΘΑ ΠΆΡΟΥΜΕ ΜΙΑ ΕΥΘΕΊΑ ΜΕ ΜΉΚΟΣ ΊΣΟ
ΜΕ 200 ΕΙΚΟΝΟΣΤΟΙΧΕΊΑ.
ΤΟ ΜΈΓΕΘΟΣ (SIZE) ΟΡΊΖΕΤΑΙ ΣΕ ΕΙΚΟΝΟΣΤΟΙΧΕΊΑ ΚΑΙ ΤΟ ΠΡΟΚΑΘΟΡΙΣΜΈΝΟ ΜΉΚΟΣ
ΠΟΙΚΊΛΕΙ ΑΝΆΛΟΓΑ ΜΕ ΤΟ ΠΡΌΓΡΑΜΜΑ ΑΝΆΓΝΩΣΗΣ (ΜΠΟΡΕΊ ΝΑ ΕΊΝΑΙ 2 Ή 3
ΕΙΚΟΝΟΣΤΟΙΧΕΊΑ).
ΤΟ ΚΕΝΤΡΆΡΙΣΜΑ (ALIGN) ΈΧΕΙ ΤΗ ΣΗΜΑΣΊΑ ΤΗΣ ΣΤΟΊΧΗΣΗΣ ΤΗΣ ΕΥΘΕΊΑΣ ΣΤΟ ΚΈΝΤΡΟ
(CENTER), ΔΕΞΙΆ (RIGHT) Ή ΑΡΙΣΤΕΡΆ (LEFT).
ΣΤΟ ΔΙΚΌ ΜΑΣ ΠΑΡΆΔΕΙΓΜΑ, ΈΧΟΥΜΕ ΜΊΑ ΟΡΙΖΌΝΤΙΑ ΓΡΑΜΜΉ ΠΟΥ ΈΧΕΙ ΤΟ
ΠΡΟΚΑΘΟΡΙΣΜΈΝΟ ΜΈΓΕΘΟΣ (3), ΜΉΚΟΣ ΊΣΟ ΜΕ ΤΟ 75% ΤΗΣ ΟΘΌΝΗΣ ΚΑΙ ΕΊΝΑΙ ΣΤΟΙΧΙΣΜΈΝΗ
ΣΤΟ ΚΈΝΤΡΟ.
ΒΈΒΑΙΑ, ΘΑ ΠΡΈΠΕΙ ΝΑ ΛΗΦΘΕΊ ΥΠΌΨΗΝ ΌΤΙ ΔΕΝ ΥΠΟΣΤΗΡΊΖΟΥΝ ΌΛΑ ΤΑ ΠΡΟΓΡΆΜΜΑΤΑ
ΑΝΆΓΝΩΣΗΣ ΤΑ ΠΡΟΣΔΙΟΡΙΣΤΙΚΆ ΑΥΤΆ ΚΑΙ ΣΕ ΑΥΤΈΣ ΤΙΣ ΠΕΡΙΠΤΏΣΕΙΣ ΘΑ ΕΜΦΑΝΊΣΟΥΝ ΜΙΑ
ΕΥΘΕΊΑ ΓΡΑΜΜΉ ΣΤΟ ΠΡΟΚΑΘΟΡΙΣΜΈΝΟ ΤΗΣ ΜΈΓΕΘΟΣ ΚΑΙ ΣΕ ΜΉΚΟΣ ΊΣΟ ΜΕ ΤΟ ΠΑΡΆΘΥΡΟ
Η ΠΑΡΑΜΕΤΡΟΣ COLOR ΔΙΝΕΙ ΧΡΩΜΑ ΣΤΗ ΓΡΑΜΜΗ.
7.ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ ΣΤΥΛ (<PRE>...</PRE>)
ΤΟ ΠΡΌΓΡΑΜΜΑ ΑΝΆΓΝΩΣΗΣ ΕΜΦΑΝΊΖΕΙ ΌΤΙ ΠΕΡΙΚΛΕΊΕΤΑΙ ΜΈΣΑ ΣΤΗΝ ΕΤΙΚΈΤΑ

<PRE>...</PRE> ΌΠΩΣ ΑΚΡΙΒΏΣ ΤΟ ΈΧΟΥΜΕ ΓΡΆΨΕΙ. ΈΤΣΙ, Π.Χ. ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΑΚΟΛΟΥΘΕΊ ΘΑ
ΕΜΦΑΝΙΣΤΕΊ ΣΤΗΝ ΟΘΌΝΗ ΤΟΥ ΧΡΉΣΤΗ ΌΠΩΣ ΑΚΡΙΒΏΣ ΤΟ ΈΧΟΥΜΕ ΓΡΆΨΕΙ :
<PRE>
THIS TEXT
WILL APPEAR
FORMATTED
JUST LIKE THIS
</PRE>
ΜΕ ΤΗΝ ΕΤΙΚΈΤΑ ΑΥΤΉ ΜΠΟΡΟΎΜΕ ΝΑ ΞΕΠΕΡΆΣΟΥΜΕ ΔΎΟ ΠΡΟΒΛΉΜΑΤΑ :
- ΝΑ ΕΛΈΞΟΥΜΕ ΤΗΝ ΕΜΦΆΝΙΣΗ ΤΟΥ ΚΕΙΜΈΝΟΥ ΚΑΙ
- ΝΑ ΕΜΠΟΔΊΣΟΥΜΕ ΤΟ ΠΡΌΓΡΑΜΜΑ ΑΝΆΓΝΩΣΗΣ ΝΑ ΕΜΦΑΝΊΣΕΙ ΤΟ ΚΕΊΜΕΝΟ ΜΕ
ΔΙΑΦΟΡΕΤΙΚΉ ΜΟΡΦΉ ΑΠΟ ΑΥΤΉ ΠΟΥ ΕΜΕΊΣ ΕΠΙΘΥΜΟΎΜΕ..
ΠΑΡΌΛΟ ΠΟΥ ΑΚΟΎΓΟΝΤΑΙ ΣΑΝ ΝΑ ΛΈΜΕ ΤΟ ΊΔΙΟ ΠΡΆΓΜΑ ΜΕ ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΟΎΣ ΤΡΌΠΟΥΣ,
ΣΤΗΝ ΠΡΑΓΜΑΤΙΚΌΤΗΤΑ ΠΡΌΚΕΙΤΑΙ ΓΙΑ ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΈΣ ΚΑΤΗΓΟΡΊΕΣ ΠΡΟΒΛΗΜΆΤΩΝ.
ΈΤΣΙ, ΣΧΕΤΙΚΆ ΜΕ ΤΟ ΠΡΏΤΟ ΠΡΌΒΛΗΜΑ ΜΠΟΡΟΎΜΕ ΝΑ ΧΡΗΣΙΜΟΠΟΙΉΣΟΥΜΕ ΤΟ <PRE> ΓΙΑ
ΝΑ ΕΜΦΑΝΊΣΟΥΜΕ ΚΕΊΜΕΝΟ ΌΠΩΣ ΕΜΕΊΣ ΤΟ ΘΈΛΟΥΜΕ. ΑΥΤΌ ΣΗΜΑΊΝΕΙ ΌΤΙ ΜΠΟΡΕΊ ΝΑ
ΘΈΛΟΥΜΕ ΤΟ ΚΕΊΜΕΝΟ ΝΑ ΕΜΦΑΝΙΣΤΕΊ ΣΤΗ ΜΈΣΗ ΤΗΣ ΓΡΑΜΜΉΣ Ή ΣΤΟ ΤΈΛΟΣ ΤΗΣ. ΌΤΑΝ
ΧΡΗΣΙΜΟΠΟΙΟΎΜΕ ΈΝΑΝ ΕΠΕΞΕΡΓΑΣΤΉ ΚΕΙΜΈΝΟΥ ΜΠΟΡΟΎΜΕ ΑΠΛΆ ΝΑ ΠΡΟΣΘΈΣΟΥΜΕ
ΚΕΝΆ ΜΕ ΤΟΝ ΣΤΗΛΟΘΈΤΗ (TAB) ΚΑΙ ΝΑ ΡΥΘΜΊΣΟΥΜΕ ΤΗ ΘΈΣΗ ΤΟΥ ΚΕΙΜΈΝΟΥ. ΤΑ
ΠΡΟΓΡΆΜΜΑΤΑ ΑΝΆΓΝΩΣΗΣ ΌΜΩΣ ΑΓΝΟΟΎΝ ΤΟΥΣ ΣΤΗΛΟΘΈΤΕΣ Ή ΤΟΥΣ ΜΕΤΑΦΡΆΖΟΥΝ ΜΕ
ΤΡΌΠΟΥΣ ΠΟΥ ΔΕΝ ΠΕΡΙΜΈΝΟΥΜΕ..ΌΣΟΝ ΑΦΟΡΆ ΣΤΟ ΔΕΎΤΕΡΟ ΠΡΌΒΛΗΜΑ ΥΠΆΡΧΟΥΝ
ΠΕΡΙΠΤΏΣΕΙΣ ΣΤΙΣ ΟΠΟΊΕΣ ΤΑ ΔΕΔΟΜΈΝΑ ΔΕΝ ΘΈΛΟΥΜΕ ΕΜΦΑΝΊΖΟΝΤΑΙ ΩΣ ΜΙΑ ΑΚΟΛΟΥΘΊΑ,
Π.Χ. ΜΙΑ ΑΝΑΦΟΡΆ ΑΠΌ ΜΙΑ ΒΆΣΗ ΔΕΔΟΜΈΝΩΝ
8.ΠΏΣ ΚΕΝΤΡΆΡΕΤΕ ΈΝΑ ΚΕΊΜΕΝΟ
ΓΙΑ ΝΑ ΚΕΝΤΡΆΡΕΤΕ ΈΝΑ ΚΕΊΜΕΝΟ ΠΡΈΠΕΙ ΝΑ ΤΟ ΠΕΡΙΒΆΛΕΤΕ ΜΕ ΤΙΣ ΑΝΤΊΣΤΟΙΧΕΣ ΕΤΙΚΈΤΕΣ.

ΑΥΤΈΣ ΕΊΝΑΙ ΟΙ: <CENTER> ΠΟΥ ΑΝΟΊΓΕΙ ΤΗΝ ΔΙΑΔΙΚΑΣΊΑ ΚΑΙ </CENTER> ΠΟΥ ΤΗΝ ΚΛΕΊΝΕΙ.
ΟΤΙΔΉΠΟΤΕ ΠΕΡΙΈΧΕΤΑΙ ΜΕΤΑΞΎ ΤΩΝ ΔΎΟ ΕΤΙΚΕΤΏΝ ΘΑ ΚΕΝΤΡΑΡΙΣΤΕΊ.
ΠΑΡΆΔΕΙΓΜΑ:
<CENTER>THIS TEXT WILL BE CENTERED (=ΑΥΤΌ ΤΟ ΚΕΊΜΕΝΟ ΘΑ ΚΕΝΤΡΑΡΙΣΤΕΊ)</CENTER>
9. ΣΕΙΡΑ ΕΙΔΙΚΩΝ ΧΑΡΑΚΤΗΡΩΝ

ΑΝ ΜΕΤΑΞΥ ΤΩΝ ΛΕΞΕΩΝ ΘΕΛΟΥΜΕ ΝΑ ΑΦΗΣΟΥΜΕ ΠΕΡΙΣΣΟΤΕΡΟΥΣ ΤΟΥ ΕΝΌΣ ΚΕΝΟΥΣ
ΧΑΡΑΚΤΗΡΕΣ ΤΟΤΕ ΜΠΟΡΟΥΜΕ ΝΑ ΧΡΗΣΙΜΟΠΟΙΗΣΟΥΜΕ ΤΗΝ ΕΙΔΙΚΗ ΣΕΙΡΑ ΧΑΡΑΚΤΗΡΩΝ
&nbsp
10. ΑΛΛΆΖΟΝΤΑΣ ΤΟ ΧΡΏΜΑ ΤΟΥ ΦΌΝΤΟΥ - ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ
ΜΠΟΡΕΊΤΕ ΝΑ ΑΛΛΆΞΕΤΕ ΤΟ ΧΡΏΜΑ ΤΟΥ ΦΌΝΤΟΥ ΚΑΙ ΤΟ ΧΡΩΜΑ ΤΟΥ ΚΕΙΜΕΝΟΥ

ΠΡΟΣΘΈΤΟΝΤΑΣ
BGCOLOR="COLOR" ΚΑΙ TEXT=”COLOR” ΜΈΣΑ ΣΤΗΝ ΕΤΙΚΈΤΑ <BODY>.
ΠΑΡΆΔΕΙΓΜΑ: <BODY BGCOLOR="YELLOW" TEXT =”RED”>
11. ΕΙΚΟΝΑ ΣΤΟ ΦΟΝΤΟ
ΜΕΣΑ ΣΤΗΝ ΕΤΙΚΕΤΑ BODY ΒΑΖΩ ΤΗΝ ΕΝΤΟΛΗ:
<BODY BACKGROUND=”EIKONA.GIF”>
12. ΑΛΛΑΓΉ ΧΡΏΜΑΤΟΣ, ΓΡΑΜΜΑΤΟΣΕΙΡΆΣ ΚΑΙ ΜΕΓΈΘΟΥΣ ΧΑΡΑΚΤΉΡΩΝ (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.
Αν εφαρμόσετε ένα χρώμα σ' ολόκληρο το κείμενο, τότε μπορείτε ακόμα να αλλάξετε το χρώμα ενός μέρους του
κειμένου χρησιμοποιώντας τα 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 2</font>. This font is increased 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 2</FONT>. THIS FONT IS DECREASED BY 2.
THIS FONT IS <FONT SIZE=-1>DECREASED BY 1</FONT>. THIS FONT IS DECREASED BY 1.
13. ΛΙΣΤΕΣ (ΚΑΤΑΛΟΓΟΙ)

1) ΑΡΙΘΜΗΜΈΝΕΣ ΛΊΣΤΕΣ (ORDERED)
ΟΙ ΤΑΚΤΟΠΟΙΗΜΈΝΕΣ ΛΊΣΤΕΣ ΕΊΝΑΙ ΑΥΤΈΣ ΠΟΥ ΤΑ ΑΝΤΙΚΕΊΜΕΝΑ ΞΕΚΙΝΟΎΝ ΜΕ ΤΟ "1.". Η

ΜΌΝΗ ΔΙΑΦΟΡΆ ΣΤΗΝ ΕΤΙΚΈΤΑ ΕΊΝΑΙ ΟΤΙ ΑΛΛΆΖΕΙ ΜΌΝΟ ΤΟ UL ΣΕ OL.
ΔΕΊΤΕ ΤΟ ΠΑΡΑΚΆΤΩ ΠΑΡΆΔΕΙΓΜΑ:
ΑΡΙΘΜΗΜΈΝΗ ΛΊΣΤΑ:
1. ΣΤΟΙΧΕΊΟ 1
Ο κώδικας αυτής της λίστας είναι ο εξής:
<B>ΑΡΙΘΜΗΜΈΝΗ ΛΊΣΤΑ:</B>
<OL>
<LI> ΣΤΟΙΧΕΊΟ 1
</OL>
ΣΗΜΕΙΩΣΗ : ΣΤΗΝ ΕΤΙΚΕΤΑ ΕΝΑΡΞΗΣ ΤΟΥ ΑΡΙΘΜΗΤΙΚΟΥ ΚΑΤΑΛΟΓΟΥ ΜΠΟΡΟΥΜΕ ΝΑ

ΧΡΗΣΙΜΟΠΟΙΗΣΟΥΜΕ 2 ΠΑΡΑΜΕΤΡΟΥΣ ΤΗΝ ΠΑΡΑΜΕΤΡΟ TYPE=ΤΙΜΗ ΚΑΙ ΤΗΝ ΠΑΡΑΜΕΤΡΟ
START = ΤΙΜΗ
<OL TYPE = ΤΙΜΗ START= ΤΙΜΗ>

Η ΠΑΡΑΜΕΤΡΟΣ TYPE ΔΗΛΩΝΕΙ ΤΟ ΕΙΔΟΣ ΤΗΣ ΑΡΙΘΜΗΤΙΚΗΣ ΛΙΣΤΑΣ
Η ΠΑΡΑΜΕΤΡΟΣ START ΔΗΛΩΝΕΙ ΤΗΝ ΤΙΜΗ ΕΝΑΡΞΗΣ ΑΡΙΘΜΗΣΗΣ
TYPE START
1 ΚΑΠΟΙΑ ΑΡΙΘΜΗΤΙΚΗ ΤΙΜΗ
A ΤΙΜΕΣ ΑΠΌ Α ΕΩΣ Ζ
a ΤΙΜΕΣ ΑΠΌ a ΕΩΣ z
¡ ΛΑΤΙΝΙΚΟΥΣ ΧΑΡΑΚΤΗΡΕΣ
<OL TYPE=1 START=11>

ΝΑ ΧΡΗΣΙΜΟΠΟΙΕΙ ΑΡΙΘΜΗΤΙΚΟΥΣ ΧΑΡΑΚΤΗΡΕΣ ΚΑΙ ΝΑ ΑΡΧΙΣΕΙ ΑΠΟ ΤΟ 11
<OL TYPE=A START=K>
ΝΑ ΧΡΗΣΙΜΟΠΟΙΕΙ ΓΡΑΜΜΑΤΑ ΚΑΙ ΝΑ ΑΡΧΙΣΕΙ ΑΠΟ ΤΟ ΓΡΑΜΜΑ Κ
ΠΑΡΑΤΗΡΗΣΗ : ΑΝ ΔΕΝ ΕΧΕΙ ΟΡΙΣΘΕΙ ΚΑΠΟΙΑ ΠΑΡΑΜΕΤΡΟΣ ΤΟΤΕ ΟΙ ΠΡΟΚΑΘΟΡΙΣΜΕΝΕΣ ΤΙΜΕΣ
ΕΙΝΑΙ TYPE = 1 KAI START=1
Άσκηση
Φτιάξτε μια σελίδα ΗTML που να εμφανίζει στην οθόνη μια αριθμημένη λίστα με 5 αγαπημένους σας
τραγουδιστές.
Η σελίδα θα πρέπει να αποθηκευτεί με το όνομα ‘Askisi4.html’ και να έχει για title το : ‘Οι Τραγουδιστές μου’.
2) ΑΡΙΘΜΗΜΕΝΗ ΛΙΣΤΑ ΔΥΟ ΕΠΙΠΕΔΩΝ
μπορούμε να δημιουργήσουμε λίστα που να δομείται σε δύο επίπεδα. Είναι :

<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>
Δείτε ένα παράδειγμα χρήσης αριθμημένης λίστας μέσα σε αριθμημένη λίστα - με την ιδιότητα type μπορούμε να
έχουμε λίστες της μορφής:
I. Cheese in Pre-Historic time

A. Africa
1. Afar Triangle
2. East Coast
B. Asia
C. Europe
1. France
a. Cave paintings depicting cheese harvesting
b. Burial rituals inferred from dried cheese remnants
2. British Isles
D. North America
II. Cheese in the Middle Ages
A. King Arthur's Longhorn
B. Sharp Cheddar for the Crusades
III. Cheese in the Space Age
14. Η ΕΤΙΚΕΤΑ MARQUEE (8-1-2008)
Για τη δημιουργία μιας μαρκίζας με ένα κείμενο υπάρχει το κατάλληλο tag το οποίο είναι το <marquee> κείμενο
μαρκίζας </marquee>, το οποίο δέχεται διάφορες παραμέτρους. Οι παράμετροι είναι οι εξής:
 behavior=”scroll”: εμφανίζει κινούμενο το κείμενο της μαρκίζας.
 direction=”left”: ορίζει την κατεύθυνση κίνησης του κειμένου από δεξιά προς τα αριστερά ή ανάποδα όταν
γράψουμε “right”.
 loop=”infinite”: ορίζει το πλήθος των επαναλήψεων της εμφάνισης του κειμένου, για παράδειγμα
loop=”5” θα εμφανισθεί πέντε φορές και θα σταματήσει να κινείται.
 scrollamount=”6”: καθορίζει την ταχύτητα κίνησης του κειμένου.
 scrolldelay=”80”: ορίζει την καθυστέρηση εμφάνισης των γραμμάτων.
 bgcolor=”yellow”: ορίζει το χρώμα του φόντου της μαρκίζας. Το χρώμα και το μέγεθος των γραμμάτων
καθορίζεται από το tag font σύμφωνα με τα όσα έχουν ήδη αναφερθεί και παρουσιάζονται και στο πιο κάτω
παράδειγμα:
<html>
<head>
<title> μαρκίζα </title>
</head>
<body>
<center> <font face="Comic Sans MS" size="5" color="blue">
<b><em>
<marquee behavior="scroll" direction="left" loop="infinite"
scrollamount="6" scrolldelay="8" bgcolor="yellow">
ΤΕΙ Χαλκίδας </marquee>
</center>
</body>
</html>
ΤΕΙ Χαλκίδας
15. ΕΙΚΟΝΕΣ
Ένα μεγάλο μέρος της δημοτικότητας του ιστού οφείλεται στο γεγονός ότι επιτρέπει την
εμφάνιση γραφικών, αλλά και την επεξεργασία τους με οποιονδήποτε τρόπο. Μικρές εικόνες
μπορούν να χρησιμοποιηθούν σαν εικονίδια και να αποτελέσουν πολύ εύχρηστα κουμπιά
πλοήγησης σε μια εκτενή θέση του ιστού με αρκετές σελίδες. Ολα τα προγράμματα ανάγνωσης
που υποστηρίζουν γραφικά μπορούν να εμφανίσουν αρχεία εικόνας σε GIF μορφή, ενώ μερικά
από αυτά εμφανίζουν και JPEG γραφικά. Έτσι, μπορούμε να έχουμε :
o Απλά γραφικά
o Κείμενο στο οποίο δίπλα να υπάρχει ευθυγραμισμένο γραφικό
o Γραφικό που αποτελεί σύνδεσμο για εικόνα ή για ήχο,animation ή video clip
α) απλά γραφικά με
<IMG SRC="picture.gif" ALT="[text]">

Εδώ, το picture.gif δηλώνει την URL της εικόνας και το text θα εμφανιστεί στην οθόνη των
χρηστών που έχουν προγράμματα ανάγνωσης που δεν υποστηρίζουν γραφικά,
β) κείμενο στο οποίο δίπλα να υπάρχει ευθυγραμμισμένο γραφικό (που βέβαια σχετίζεται με
το κείμενο).
Η ευθυγράμμιση γίνεται με το προσδιοριστικό ALIGN. Φυσικά, οι τιμές που δέχεται το
ALIGN ποικίλουν μεταξύ των προγραμμάτων ανάγνωσης, γι' αυτό κάποιος που σχεδιάζει
σελίδες πρέπει να το έχει υπόψη του. Έχουμε :
<IMG SRC="picture.gif" ALT="[text]" ALIGN=position>
Το position δηλώνει τη θέση την οποία θα λάβει η εικόνα μέσα στη σελίδα σε σχέση πάντα με
το κείμενο και μπορεί να πάρει τις τιμές : LEFT, RIGHT, TOP, MIDDLE ή BOTTOM. Τα
περισσότερα προγράμματα ανάγνωσης υποστηρίζουν τις τιμές TOP, MIDDLE και BOTTOM,
ενώ αν δεν χρησιμοποιηθεί το ALIGN το πρόγραμμα ανάγνωσης θα χρησιμοποιήσει αυτόματα
το BOTTOM, και
γ) γραφικό που αποτελεί σύνδεσμο για εικόνα ή οτιδήποτε άλλο, το οποίο μπορεί να είναι
ήχος, animation ή video clip.
Εδώ έχουμε :
<A HREF="picture.gif"> <IMG SRC="iconfile.gif" ALT="[text]" > </A>
Το picture.gif είναι η URL της εικόνας, του ήχου του animation ή του video clip που θα
εμφανιστεί όταν ο χρήστης κάνει κλικ πάνω στο εικονίδιο που έχει URL την iconfile.gif και το
text θα εμφανιστεί σε αυτούς που έχουν προγράμματα ανάγνωσης που δεν υποστηρίζουν
γραφικά.
ΣΗΜΕΙΩΣΗ
ΕΙΚΟΝΕΣ ΚΑΙ ΓΡΑΜΜΗ ΚΕΙΜΕΝΟΥ
Μια εικόνα μαζί με μια σειρά κείμενο μπορεί να συμπεριληφθεί σε μια επικεφαλίδα με το
ακόλουθο τρόπο:
<H1><IMG SRC="anymodem.gif">Any Modem</H1>
Για παράδειγμα έχουμε:
Any Modem
Αν η εικόνα τοποθετηθεί μέσα σε μια παράγραφο κειμένου (<P>) τότε θα υπάρχει κείμενο δεξιά
και αριστερά της (αν φυσικά χωράει) και οι αποστάσεις μεταξύ των γραμμών θα επηρεαστούν
από το μέγεθος της εικόνας. Πάντα όμως δεξιά και αριστερά της εικόνας θα υπάρχει ΜΟΝΟ
ΜΙΑ γραμμή κειμένου.
Η εικόνα μπορεί να τοποθετηθεί διάφορες θέσεις σχετικά με το επίπεδο της γραμμής κειμένου
που υπάρχει δεξιά και αριστερά της. Αυτό θα γίνει με την οδηγία align που είδαμε και
παραπάνω.
Οι δυνατότητες που υπάρχουν είναι:
ALIGN=TOP
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο κείμενο
κείμενο κείμενο
Π.χ <IMG SRC="anymodem.gif" ALIGN=TOP> θα βάλει το πάνω μέρος της εικόνας στο ίδιο
επίπεδο με την γραμμή του κειμένου.
ALIGN=MIDDLE θα βάλει το μεσαίο επίπεδο της εικόνας στο ίδιο επίπεδο με την γραμμή του
κειμένου.
ALIGN=BOTTOM θα βάλει το κάτω μέρος της εικόνας στο ίδιο επίπεδο με την γραμμή του
κειμένου (η default επιλογή).
ΕΙΚΟΝΕΣ ΚΑΙ ΡΟΗ ΚΕΙΜΕΝΟΥ ΠΑΡΑΛΛΗΛΑ ΜΕ ΑΥΤΕΣ (TEXT WRAP)
Για να το επιτύχουμε αυτό, πρέπει η εικόνα να έχει πάρει θέση με την οδηγία ALIGN, και να
ακολουθείται από Παράγραφο, Λίστα, Επικεφαλίδα ή άλλες εικόνες.
Π.χ. <P><IMG SRC="image1.gif" ALIGN=RIGHT><P>κείμενο...
κείμενο κείμενο κείμενο
Υπάρχουν περιπτώσεις που θέλουμε να υπάρχει ροή κειμένου δεξιά ή αριστερά από μια εικόνα
αλλά να μην φτάνει μέχρι το κατώτερο σημείο της εικόνας αλλά να διακόπτεται πιο πριν. Στην
περίπτωση αυτή, χρησιμοποιούμε την οδηγία <BR CLEAR=X) όπου X=LEFT (η ροή σταματάει
μέχρι τα βρει την πρώτη γραμμή που η αριστερή άκρη της είναι ελεύθερη, δηλαδή δεν υπάρχει
εκεί στοιχημένη μια εικόνα) RIGHT (η ροή σταματάει μέχρι τα βρεί την πρώτη γραμμή που η
δεξιά άκρη της είναι ελεύθερη, δηλαδή δεν υπάρχει εκεί στοιχημένη μια εικόνα) ALL (η ροή
σταματάει μέχρι τα βρει την πρώτη γραμμή που και η δεξιά και η αριστερή άκρη της είναι
ελεύθερη, δηλαδή δεν υπάρχει εκεί στοιχημένη μια εικόνα και η γραμμή κείμενου μπορεί να
καταλάβει όλο το χώρο από την μια άκρη του παραθύρου του browser μέχρι την άλλη).
Εδώ βλέπουμε μια τέτοια περίπτωση όπου το κείμενο που έχουμε σταματά μετά από την λέξη
εδώ
και συνεχίζει όταν υπάρχει ελεύθερο δεξιό περιθώριο.
Σε HTML κώδικα το παραπάνω παράδειγμα είναι

γραμμένο ως εξής:
<p><IMG SRC="../images/frames6.gif"
ALIGN=RIGHT>Εδώ βλέπουμε μια τέτοια περίπτωση
όπου το κείμενο που έχουμε σταματά μετά από την λέξη εδώ<br clear=right> και συνεχίζει όταν
υπάρχει ελεύθερο δεξιό περιθώριο.
ΑΠΟΣΤΑΣΗ ΤΟΥ ΚΕΙΜΕΝΟΥ ΑΠΟ ΜΙΑ ΕΙΚΟΝΑ (HTML 3.2)
Καθορίζεται με τις παραμέτρους VSPACE=Χ vertical space για την απόσταση του κειμένου που
βρίσκεται πάνω και κάτω από την εικόνα) και HSPACE=Χ (horizontal space για την απόσταση
του κειμένου που βρίσκεται δεξιά και αριστερά από την εικόνα). X είναι ο αριθμός των pixels
που θέλουμε να έχει η απόσταση.
Π.χ. <IMG SRC="image2.gif" VSPACE=50 HSPACE=45 ALIGN=RIGHT>
ΚΑΝΟΝΤΑΣ ΜΙΑ ΕΙΚΟΝΑ ΠΑΡΑΠΟΜΠΗ (LINK)
Μπορεί να γίνει πολύ απλά με τον ίδιο τρόπο που γίνεται και για μια ακολουθία κειμένου.
Απλώς αντί για κείμενο, χρησιμοποιούμε την εντολή της εικόνας.
Π.χ. αν το αρχείο eexi.gif έχει τον λογότυπο της ΕΕΧΙ τότε η οδηγία για να γίνει ο λογότυπος
link για το Web site της ΕΕΧΙ θα είναι:
<A HREF="http://www.eexi.gr"><IMG SRC=eexi.gif"></A>
Οι εικόνες που γίνονται παραπομπές αποκτούν ένα λεπτό περιθώριο. Αν δεν θέλουμε να υπάρχει
αυτό το περιθώριο, τότε χρησιμοποιούμε την παράμετρο BORDER με τιμή 0. Π.χ. <a
href="http://www.eexi.gr/928/interbiz"><IMG SRC="image1.gif" border=0></a>
ALT (ΑΝ Ο ΑΝΑΓΝΩΣΤΗΣ ΤΗΣ ΣΕΛΙΔΑΣ ΔΕΝ ΒΛΕΠΕΙ ΕΙΚΟΝΕΣ)
Σε αυτή την περίπτωση, μπορούμε να χρησιμοποιήσουμε την παράμετρο ALT για να γράψουμε
ένα μικρό περιγραφικό κείμενο που εξηγεί σε όσους δεν βλέπουν εικόνες τι υπάρχει σε αυτές.
Μπορεί επίσης να χρησιμοποιηθεί και σαν παραπομπή (link) ώστε να μπορούν να την
ακολουθήσουν και όσοι δεν βλέπουν εικόνες. Η σύνταξη της ALT είναι ALT="κείμενο".
Συνήθως το κείμενο (που δεν πρέπει να είναι πολύ μεγάλο) το περικλείουμε με τις αγκύλες
[ και ].
Π.χ. Σύνταξη μια εικόνας που μας παραπέμπει στο web της ΕΕΧΙ: <a
href="http://www.eexi.gr"><IMG SRC="eexi.gif" border=0 ALT="[EEXI]"></a>
BORDER
Η παράμετρος border καθορίζει το περιθώριο που θα έχει μια εικόνα. Χωρίς αυτήν η εικόνα Δεν
έχει περιθώριο (εκτός αν είναι link). Με αυτήν ορίζεται το πάχος σε pixels που θα έχει το
περιθώριο. Π.χ. <IMG SRC="image2.gif" border=5>

ΓΛΩΣΣΑ HTML

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

ΓΛΩΣΣΑ HTML

Uploaded by

Copyright:

Available Formats

ΓΛΩΣΣΑ HTML

Ο ΚΩΔΙΚΑΣ HTML ΑΠΟΤΕΛΕΙΤΑΙ ΑΠΟ 2 ΒΑΣΙΚΑ ΤΜΗΜΑΤΑ

<TITLE>MY FIRST PAGE</TITLE>

MY FIRST PAGE TO INTERNET

ΣΗΜΕΙΩΣΗ: H ΕΤΙΚΕΤΑ <P> ΑΦΗΝΕΙ ΜΙΑ ΚΕΝΗ ΓΡΑΜΜΗ

εάν θέλουμε να εξαλείψουμε το περιθώριο θέτουμε τις παραμέτρους σε 0 δηλ.

4. ΕΤΙΚΕΤΑ <Ηn> ΔΗΜΙΟΥΡΓΕΙ ΕΠΙΚΕΦΑΛΙΔΕΣ ΜΕΓΕΘΟΥΣ n

Σύνταξη: <hn> ...... </hn>, όπου n=1...6

Ιδιότητες: align=left(default)|center|right: για συστοίχιση της επικεφαλίδας αριστερά (προεπιλογή), στο

Παράδειγμα: <h6> Επικεφαλίδα 6 </h6> Επικεφαλίδα 6

ΣΗΜΕΙΩΣΗ: H ΕΤΙΚΕΤΑ <Hn> ΑΦΗΝΕΙ ΜΙΑ ΚΕΝΗ ΓΡΑΜΜΗ

5. ΕΤΙΚΈΤΕΣ ΣΤΥΛ ΚΕΙΜΈΝΟΥ

ΣΎΝΤΑΞΗ: 1. <B>.... </B>

ΛΕΙΤΟΥΡΓΊΑ: 1. ΕΜΦΑΝΊΖΕΙ ΤΟ ΚΕΊΜΕΝΟ ΠΟΥ ΠΕΡΙΚΛΕΊΕΙ ΜΕ ΈΝΤΟΝΗ ΓΡΑΜΜΑΤΟΣΕΙΡΆ.

ΠΑΡΆΔΕΙΓΜΑ: <B> ΈΝΤΟΝΑ </B> ΈΝΤΟΝΑ

!!!ΑΥΤΌ ΠΟΥ ΠΑΡΑΤΗΡΟΎΜΕ ΕΊΝΑΙ ΌΤΙ ΑΝ ΘΈΛΟΥΜΕ ΜΠΟΡΟΎΜΕ ΝΑ ΧΡΗΣΙΜΟΠΟΙΉΣΟΥΜΕ

6.ΟΡΙΖΟΝΤΙΑ ΓΡΑΜΜΗ (<HR>)

7.ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ ΣΤΥΛ (<PRE>...</PRE>)

ΤΟ ΠΡΌΓΡΑΜΜΑ ΑΝΆΓΝΩΣΗΣ ΕΜΦΑΝΊΖΕΙ ΌΤΙ ΠΕΡΙΚΛΕΊΕΤΑΙ ΜΈΣΑ ΣΤΗΝ ΕΤΙΚΈΤΑ

8.ΠΏΣ ΚΕΝΤΡΆΡΕΤΕ ΈΝΑ ΚΕΊΜΕΝΟ

ΓΙΑ ΝΑ ΚΕΝΤΡΆΡΕΤΕ ΈΝΑ ΚΕΊΜΕΝΟ ΠΡΈΠΕΙ ΝΑ ΤΟ ΠΕΡΙΒΆΛΕΤΕ ΜΕ ΤΙΣ ΑΝΤΊΣΤΟΙΧΕΣ ΕΤΙΚΈΤΕΣ.

<CENTER>THIS TEXT WILL BE CENTERED (=ΑΥΤΌ ΤΟ ΚΕΊΜΕΝΟ ΘΑ ΚΕΝΤΡΑΡΙΣΤΕΊ)</CENTER>

9. ΣΕΙΡΑ ΕΙΔΙΚΩΝ ΧΑΡΑΚΤΗΡΩΝ

10. ΑΛΛΆΖΟΝΤΑΣ ΤΟ ΧΡΏΜΑ ΤΟΥ ΦΌΝΤΟΥ - ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ

ΜΠΟΡΕΊΤΕ ΝΑ ΑΛΛΆΞΕΤΕ ΤΟ ΧΡΏΜΑ ΤΟΥ ΦΌΝΤΟΥ ΚΑΙ ΤΟ ΧΡΩΜΑ ΤΟΥ ΚΕΙΜΕΝΟΥ

BGCOLOR="COLOR" ΚΑΙ TEXT=”COLOR” ΜΈΣΑ ΣΤΗΝ ΕΤΙΚΈΤΑ <BODY>.

ΠΑΡΆΔΕΙΓΜΑ: <BODY BGCOLOR="YELLOW" TEXT =”RED”>

11. ΕΙΚΟΝΑ ΣΤΟ ΦΟΝΤΟ

ΜΕΣΑ ΣΤΗΝ ΕΤΙΚΕΤΑ BODY ΒΑΖΩ ΤΗΝ ΕΝΤΟΛΗ:

12. ΑΛΛΑΓΉ ΧΡΏΜΑΤΟΣ, ΓΡΑΜΜΑΤΟΣΕΙΡΆΣ ΚΑΙ ΜΕΓΈΘΟΥΣ ΧΑΡΑΚΤΉΡΩΝ (FONT

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

THIS IS <FONT COLOR="GREEN">GREEN</FONT>. THIS IS GREEN.

• Αλλάξτε τη ΓΡΑΜΜΑΤΟΣΕΙΡΆ ΟΠΟΙΟΥΔΉΠΟΤΕ ΚΕΙΜΈΝΟΥ ΜΕ ΤΙΣ ΕΤΙΚΈΤΕΣ:

<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 ΝΑ ΠΑΡΙΣΤΆΝΕΙ ΤΟ ΜΕΓΑΛΎΤΕΡΟ ΚΑΙ ΤΟ 1

ΠΑΡΆΔΕΙΓΜΑ: <FONT SIZE=+4>, Ή <FONT SIZE=-2>

This font is <font size=+2>increased by 2</font>. This font is increased 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 2</FONT>. THIS FONT IS DECREASED BY 2.

THIS FONT IS <FONT SIZE=-1>DECREASED BY 1</FONT>. THIS FONT IS DECREASED BY 1.

13. ΛΙΣΤΕΣ (ΚΑΤΑΛΟΓΟΙ)

ΟΙ ΤΑΚΤΟΠΟΙΗΜΈΝΕΣ ΛΊΣΤΕΣ ΕΊΝΑΙ ΑΥΤΈΣ ΠΟΥ ΤΑ ΑΝΤΙΚΕΊΜΕΝΑ ΞΕΚΙΝΟΎΝ ΜΕ ΤΟ "1.". Η

ΔΕΊΤΕ ΤΟ ΠΑΡΑΚΆΤΩ ΠΑΡΆΔΕΙΓΜΑ:

Ο κώδικας αυτής της λίστας είναι ο εξής:

ΣΗΜΕΙΩΣΗ : ΣΤΗΝ ΕΤΙΚΕΤΑ ΕΝΑΡΞΗΣ ΤΟΥ ΑΡΙΘΜΗΤΙΚΟΥ ΚΑΤΑΛΟΓΟΥ ΜΠΟΡΟΥΜΕ ΝΑ

<OL TYPE = ΤΙΜΗ START= ΤΙΜΗ>

<OL TYPE=1 START=11>

2) ΑΡΙΘΜΗΜΕΝΗ ΛΙΣΤΑ ΔΥΟ ΕΠΙΠΕΔΩΝ

μπορούμε να δημιουργήσουμε λίστα που να δομείται σε δύο επίπεδα. Είναι :

I. Cheese in Pre-Historic time

14. Η ΕΤΙΚΕΤΑ MARQUEE (8-1-2008)

<IMG SRC="picture.gif" ALT="[text]">

ΕΙΚΟΝΕΣ ΚΑΙ ΓΡΑΜΜΗ ΚΕΙΜΕΝΟΥ

Για παράδειγμα έχουμε:

Οι δυνατότητες που υπάρχουν είναι:

ΕΙΚΟΝΕΣ ΚΑΙ ΡΟΗ ΚΕΙΜΕΝΟΥ ΠΑΡΑΛΛΗΛΑ ΜΕ ΑΥΤΕΣ (TEXT WRAP)

Σε HTML κώδικα το παραπάνω παράδειγμα είναι

ΑΠΟΣΤΑΣΗ ΤΟΥ ΚΕΙΜΕΝΟΥ ΑΠΟ ΜΙΑ ΕΙΚΟΝΑ (HTML 3.2)

Π.χ. <IMG SRC="image2.gif" VSPACE=50 HSPACE=45 ALIGN=RIGHT>

ΚΑΝΟΝΤΑΣ ΜΙΑ ΕΙΚΟΝΑ ΠΑΡΑΠΟΜΠΗ (LINK)