HTML [from web] epilogis a kai b lyceiou - bmichal version 1

O Παγκόσμιος Ιστός

World Wide Web (WWW)

Υπηρεσίες Παγκόσμιου Ιστού
 Τήλε – Επικοινωνία
 Αναζήτηση πληροφοριών
 Εξ αποστάσεως
δραστηριότητες:
– Διδασκαλία
– Εμπόριο
 Διαφήμιση
 Παγκόσμιο Κοινωνικό
Φαινόμενο

Η αρχή ...

 Tim Berners-Lee
HYPERTEXT PROJECT
(1989)

 CERN

Conseil European pour la R

 Το πρώτο λογισμικό ΙΣΤΟΥ δημιουργήθηκε
τον Οκτώβριο 1990

 Καλοκαίρι 1991 το CERN διέθεσε το
λογισμικό στην διεθνή κοινότητα

 Ηλεκτρονικά «έγγραφα» με συνδέσεις με
άλλα αντικείμενα

 Hyperlinks = Συνδέσεις Hyper Text
(Υπερσύνδεσμοι)

Διευθύνσεις ΙΣΤΟΥ – URLs
 http://www.cs.uoi.gr/index.html

 ftp://www.cs.uoi.gr/pub

Το πρώτο μέρος δηλώνει το πρωτόκολλο,
ενώ το δεύτερο μέρος δηλώνει διεύθυνση.

Μοντέλο Client – Server [1]

 Ο εξυπηρετητής (server) στέλνει
«αντικείμενα» στον πελάτη (client) που τα
ζητά (ιστοσελίδες, ήχο, εικόνες, …)

 Ο server απαιτεί Η/Υ συνδεδεμένο στο
Internet και το κατάλληλο λογισμικό (server
software)

Μοντέλο Client – Server [2]
 Ο client στέλνει μηνύματα στον server και
ζητά κάποιες υπηρεσίες

 Η επικοινωνία client – server γίνεται μέσω
του πρωτοκόλλου TCP/IP

Transmission Control Protocol (TCP)

Internet Protocol (IP)

WEB BROWSERS
 Ο πρώτος «περιηγητής δικτύου»
δημιουργήθηκε στο NCSA (National
Center for Supercomputing
Applications) του Πανεπιστημίου
Illinois
 MOSAIC το όνομα του πρώτου
browser
 Κατά το 1992 – 1993
 Από τον Marc Andreessen και ομάδα
άλλων φοιτητών

Σημερινοί Browsers
 Netscape
 Internet Explorer
 Amaya
 HotJava ...
 Mozilla Firefox
 Opera
 Safari

HTML
 Hyper Text Markup Language
 Γλώσσα Σχεδιασμού Ιστοσελίδων
 Απλά αρχεία κειμένου με επέκταση html ή
htm (συνήθως, ενώ άλλες επεκτάσεις είναι
jsp, php, asp, aspx, …)
 Περιέχουν εντολές και κείμενο μαζί
 Οι εντολές απευθύνονται στον περιηγητή
 Οι εντολές καθορίζουν τον τρόπο
εμφάνισης του κειμένου της σελίδας
 Δημιουργούνται με οποιονδήποτε συντάκτη
κειμένου ή πιο εξειδικευμένα γραφικά
περιβάλλοντα

Παράδειγμα HTML αρχείου

<HTML>
<HEAD>
<TITLE> Hello World </TITLE>
<!– Νοέμβριος 2007 -->
</HEAD>
<BODY>
<H1> ΠΑΡΑΔΕΙΓΜΑ </H1>
Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να
κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου, όπως
είναι και το Σημειωματάριο (Notepad) των Windows. <P> Τέλος.
</BODY>
</HTML>

Eτικέτες (tags) HTLM
 Είναι σημάδια που χρησιμοποιεί η
HTML για να καθορίσει τον τρόπο
εμφάνισης του ενδιάμεσου κειμένου.
 Οι ετικέτες συνήθως συντάσσονται σε
ζεύγη, π.χ.: <H1> …. </H1>
 H ετικέτα <Η1> καθορίζει ότι το
κείμενο που ακολουθεί, θα εμφανιστεί
ως επικεφαλίδα πρώτου μεγέθους.
 H ετικέτα </Η1> καθορίζει το τέλος του
κειμένου επικεφαλίδας.

Η HTML είναι αναπτυσσόμενη
γλώσσα και αλλάζει συνεχώς.
 Πχ. σε παλιότερη έκδοση της HTML, η
ετικέτα <P> συντασσόταν χωρίς </P>
(βλέπε παράδειγμα).
 Σήμερα συντάσσεται ως <P> ... </P>
 Η <P> επιβάλλει αλλαγή παραγράφου.
 Στην HTML οι εντολές μπορούν να
γραφτούν με μικρά και/ή με κεφαλαία
γράμματα.

Σχόλια στην HTML


 Σχόλιο είναι οτιδήποτε βρίσκεται
ανάμεσα στα: 
 Τα σχόλια δεν εμφανίζονται στην
σελίδα
 Χρησιμοποιούνται από τους
συγγραφείς σελίδων ως επεξηγήσεις

Eξαιρέσεις & Eκπλήξεις

 Οι Browsers δεν υποστηρίζουν όλες τις
ετικέτες.
 Ετικέτες που δεν υποστηρίζονται,
απλώς παραβλέπονται.
 Ορισμένες ετικέτες μπορεί να πάψουν
να υποστηρίζονται.
 Συνέχεια προστίθενται νέες δυνατότητες
στην HTML.

ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ
 Κάθε HTML έγγραφο, πρέπει να έχει
ένα τίτλο, κυρίως για λόγους
αναγνώρισης.
<TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE>
 Υποστηρίζονται επίσης επικεφαλίδες
έξη μεγεθών.
<Hn> ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ </Hn>
(n = 1,2,…,6)

Παράμετροι ετικετών

 Η παράμετρος ALIGN
<H1 ALIGN = CENTER> Κείμενο </H1>
"Κεντράρει" την επικεφαλίδα.
Οι δυνατές επιλογές είναι:
– ALIGN = LEFT (Αριστερή στοίχιση)
– ALIGN = CENTER (Κεντράρισμα)
– ALIGN = RIGHT (Δεξιά στοίχιση)
Εάν παραληφθεί ισοδυναμεί με ALIGN = LEFT

Η ετικέτα νέας παραγράφου

<P>
Κείμενο παραγράφου
</P>
Επίσης υποστηρίζεται η παράμετρος ALIGN πχ
<P ALIGN = CENTER >
Κείμενο παραγράφου
</P>
Με προφανή (αντίστοιχα) αποτελέσματα.

Σύνδεσμοι (links) με άλλα
έγγραφα
 H ισχύς της HTML προέρχεται από
την δυνατότητα σύνδεσης με άλλα αρχεία.
 Τα σημεία όπου βρίσκονται οι
σύνδεσμοι εμφανίζονται υπογραμμισμένα και
είναι συνήθως χρώματος μπλε.
 Η ετικέτα για δημιουργία συνδέσμων είναι:
<A> … </A> και συντάσσεται με
διάφορους παραμέτρους. Το γράμμα Α
προέρχεται από την λέξη Anchor (Άγκυρα)

Σύνδεσμοι ... [1]
 Η δημιουργία ενός συνδέσμου με κάποιο
αρχείο, πχ με το αρχείο: grades,γίνεται ως:
<A HREF = "grades"> Κείμενο </Α>
 Ο Browser θα εμφανίσει το Κείμενο
υπογραμμισμένο και μπλέ. Κείμενο
Μόλις ο χρήστης κάνει "κλικ" πάνω στον
σύνδεσμο (με το "ποντίκι") τότε συνδέεται
με το αρχείο grades (που βρίσκεται στον
ίδιο κατάλογο με το τρέχον αρχείο).

Σύνδεσμοι ... [2]

 Εάν το αρχείο που "σκοπεύει" ο
σύνδεσμος δεν είναι στον ίδιο κατάλογο με το
τρέχον αρχείο, τότε καθορίζεται από ένα
σχετικό path, πχ:
<A HREF = "depts/phys/grades"> Κείμενο </Α>
ή <A HREF = "../phys/grades"> Κείμενο </Α>
 Στις παραπάνω περιπτώσεις υποτίθεται ότι
το τρέχον και τα υπόλοιπα αρχεία
βρίσκονται στον ίδιο εξυπηρετητή (server).

Σύνδεσμοι σε άλλους servers
Σύνδεσμοι με έγγραφα σε διαφορετικό
server απαιτούν πλήρη διεύθυνση, πχ:
<A HREF = "http://www.uoi.gr/grades"> Bαθμοί </Α>
Η πλήρης διεύθυνση ονομάζεται URL.
(Universal Resource Locator)
Οι διευθύνσεις έχουν το παρακάτω γενικό σχήμα :
xxxx://host.domain/path/filename
όπου xxxx είναι: http , gopher και news, για αρχεία
σε WWW servers, Gopher servers, Usenet servers.

Σύνδεσμοι για Email

Η σύνταξη:
Στείλτε τα σχόλιά σας στον
<A HREF="MAILTO:iel@cs.uoi.gr"> διδάσκοντα </A>

ξεκινά την διαδικασία αποστολής Email προς
τον χρήστη iel@cs.uoi.gr
Εμφανίζεται δε ως:
Στείλτε τα σχόλιά σας στον διδάσκοντα

Σύνδεσμοι με καθορισμένα
σημεία εντός αρχείων.
Υπάρχει δυνατότητα για συνδέσεις σε
συγκεκριμμένο σημείο εντός κάποιου
αρχείου. Πχ. η σύνδεση στο αρχείο zoo στο
σημείο όπου υπάρχει το κείμενο lion
 Εντός του zoo στο σημείο lion βάζουμε μια
διεύθυνση: <Α ΝΑΜΕ="leon">lion </A>
 Στο τρέχον αρχείο γράφουμε:
<A HREF="zoo#leon"> κείμενο </A>

Σύνδεσμοι μέσα στο ίδιο αρχείο
Συνδέσεις σε σημεία του τρέχοντος αρχείου είναι
δυνατές.
Πχ για την σύνδεση στο σημείο όπου υπάρχει το
κέιμενο: Fortran
 Βάζουμε διεύθυνση:
<A NAME="calculations"> Fortran </A>
 O σύνδεσμος υλοποιείται ως:
<A HREF="#calculations"> κείμενο </Α>

Λίστες [1]
Για να εμφανιστεί μια λίστα πχ:
 Apples
 Oranges

Χρειάζεται η ετικέτα: <UL> (unordered list)
και η ετικέτα: <LI> (list item)
Η σύνταξη έχει ως:
<UL>
<LI> Apples
<LI> Oranges
</UL>

Λίστες [2]
Για να εμφανιστεί μια λίστα πχ:
1. Apples
2. Oranges
3. Grapes

Χρειάζονται οι ετικέτες: <OL> και <LI>
(OL = Ordered List)
<OL>
<LI> Apples <LI> Oranges <LI> Grapes
</OL>

Λίστες – Παράμετροι [1]

Η ετικέτα <OL> έχει παραμέτρους.
 <OL TYPE = 1> Ταξινομεί με αριθμούς
 <OL TYPE = Α> Ταξινομεί με κεφαλαία γράμματα
 <OL TYPE = a> Ταξινομεί με μικρά γράμματα
 <OL TYPE = Ι> Ταξινομεί με κεφαλαίους Λατινικούς αριθμούς
 <OL TYPE = ι> Ταξινομεί με μικρούς Λατινικούς αριθμούς

<OL TYPE = 1> ισοδυναμεί με <OL>

Πχ οι εντολές:
<OL TYPE=A> <LI> Apples <LI> Oranges> </OL>
Παράγουν το παρακάτω αποτέλεσμα.
Α. Apples
B. Oranges
Οι δε εντολές:
<OL TYPE=Ι> <LI> Apples <LI> Oranges> </OL>
Ι. Apples
ΙΙ. Oranges
κλπ . . .

 H παράμετρος START χρησιμοποιείται με
την ετικέτα <OL> για να ξεκινήσει την
αρίθμηση από οποιοδήποτε αριθμό.
 Η παράμετρος VALUE χρησιμοποιείται με
την ετικέτα <LΙ> για να αποφύγει κάποιους
αριθμούς. Πχ οι εντολές:
<OL START=3> <LI> Apples <LI> Oranges
<LI VALUE=7> Grapes <LI> Bananas </OL>
Παράγουν το παρακάτω αποτέλεσμα.

3. Apples Εάν αντικαταστήσουμε την ετικέτα
4. Oranges <OL START=3> με την
7. Grapes <OL START=3 TYPE=A> θα έχουμε:
8. Bananas C. Apples
D. Oranges
G. Grapes
H. Bananas

Εάν αντικαταστήσουμε την ετικέτα <OL START=3>
με την <OL START=3 TYPE=i> θα έχουμε:
iii. Apples
iv. Oranges
vii. Grapes
viii. Bananas

Λίστες Ορισμού [1]
Χρησιμοποιούν τις ετικέτες:
 <DL> … </DL> (Definition List)
 <DT> (Definition Term)
 <DD> (Definition Data)
Παράδειγμα
<DL>
<DT> Fortran
<DD> Γλώσσα προγραμματισμού κατάλληλη για
επιστημονικούς υπολογισμούς.
<DT> C
<DD> Γλώσσα προγραμματισμού κατάλληλη για
προγραμματισμό συστημάτων.
</DL>

Λίστες Ορισμού [2]
Το προηγούμενο παράδειγμα θα εμφανίσει την
παρακάτω διάταξη:

Fortran
Γλώσσα προγραμματισμού κατάλληλη
για επιστημονικούς υπολογισμούς.
C
Γλώσσα προγραμματισμού κατάλληλη
για προγραμματισμό συστημάτων.

Προκαθορισμένη (default) μορφή
Η ετικέτα <PRE> …</PRE> (preformatted)
χρησιμοποιείται για παρουσίαση κειμένου τύπου
"γραφομηχανής" (όπου τα tabs και τα κενά μετρούν)
και το κείμενο διατηρεί την μορφή του. Πχ:
<PRE>
PROGRAM FARCEL
WRITE(*,*)'TEMPERATURE IN FAHRENHEIT ? '
READ(*,*) FAR
CELCIU = (FAR-32)*5./9.
WRITE(*,*) ' FAHRENHEIT', ' CELCIUS '
WRITE(*,*) FAR,CELCIU
END
</PRE>

Eτικέτες επεξεργασίας κειμένου
<B> … </B> Έντονη (bold) γραφή.
<I> … </I> Πλάγια (Italic) γραφή.
<CODE>…</CODE> Γραφή γραφομηχανής.
<SUP> … </SUP> Εκθέτης.
<SUB> … </SUB> Δείκτης.
<U> … </U> Υπογράμμιση.
<BIG> … </BIG> Αύξηση μεγέθους.
<SMALL>…</SMALL> Μείωση μεγέθους

Παραδείγματα
 Το νέο βιβλίο του <B> B. Jones </B> έχει τίτλο …
Το νέο βιβλίο του B. Jones έχει τίτλο …
 Το νέο βιβλίο του <BIG> B. Jones </BIG> έχει τίτλο …
 Το νέο βιβλίο του <I> B. Jones </I> έχει τίτλο …
 Το νέο βιβλίο του <CODE> B. Jones </CODE> έχει τίτλο …
 Το νέο βιβλίο του <B><U> B. Jones</U> </B> έχει τίτλο …

Κεντράρισμα, αλλαγή γραμμής
<CENTER> … </ CENTER > Κεντράρει στην σελίδα
οτιδήποτε υπάρχει ανάμεσα.
<BR> Επιβάλλει αλλαγή γραμμής
<HR> Τοποθετεί μια οριζόντια γραμμή
Έχει παραμέτρους
<HR SIZE= αριθμός> Καθορίζει το πάχος
<HR WIDTH= αριθμός ή %> Καθορίζει το πλάτος απόλυτa
ή σε ποσοστό της σελίδας.
<HR ALIGN= LEFT > Καθορίζει την θέση της γραμμής
ή = CENTER ή = RIGHT (αριστερά, κέντρο ή δεξιά)
<HR NOSHADE> Μη σκιασμένη γραμμή.

Εικόνες στην HTML
Η HTML υποστηρίζει δύο ειδών αρχεία εικόνων
 GIF
JPEG
Όλοι οι ψηφιακοί σαρωτές (scanners),
υποστηρίζουν τουλάχιστον μία από τις δύο μορφές.
Yπάρχουν προγράμματα που μετασχηματίζουν
άλλες μορφές σε gif ή jpeg.
Οι εικόνες μπορούν να χρησιμοποιηθούν και σαν
σύνδεσμοι, και να εμφανίζονται σε διαφορετικές
διαστάσεις (μεγενθυμένες ή σε σμίκρυνση).

H ετικέτα <IMG>
Για ένθεση εικόνας που περιέχεται στο αρχείο πχ.
globe.gif χρησιμοποιείται η ετικέτα <IMG>:
 <IMG SRC = "globe.gif">
Για αλλαγή του μεγέθους της εικόνας γίνεται χρήση των
παραμέτρων WIDTH και HEIGHT:
 <IMG SRC = "globe.gif" WIDTH = 200, HEIGHT = 100>
Η εικόνα θα έχει πλάτος 200 και ύψος 100 pixels.
 <IMG SRC = "globe.gif" WIDTH = 50%, HEIGHT = 60%>
Η εικόνα θα έχει πλάτος το 50% και ύψος το 60% των
αντίστοιχων διαστάσεων της σελίδας.
 Eάν καθορισθεί μόνο μία εκ των δύο παραμέτρων, η άλλη
υπολογίζεται αυτόματα για ισότροπη αλλαγή.

Εικόνες – Σύνδεσμοι
Για να χρησιμοποιηθεί η εικόνα του
αρχείου univ.gif ως σύνδεσμος για την
διεύθυνση www.uoi.gr γράφουμε:
<A HREF="http://www.uoi.gr">
<IMG SRC="univ.gif "> </A>
 Κείμενο δίπλα σε εικόνα ευθυγραμμίζεται αυτόματα
με το κάτω μέρος της, εκτός εάν καθοριστεί αλλοιώς
με την παράμετρο ALIGN= (top, middle,bottom).
<IMG SRC="univ.gif " ALIGN= TOP> Κείμενο ...

Φόντο σελίδας
<BODY BACKGROUND = "stone.gif"> … </BODY>
Το φόντο της σελίδος καθορίζεται από την εικόνα
του αρχείου: stone.gif
 <BODY BGCOLOR="color"> … </BODY>
Καθορίζει το χρώμα του φόντου.
color = #RRGGBB όπου RR, GG, BB διψήφιοι
δεκαεξαδικοί αριθμοί για τις εντάσεις των
χρωμάτων R,G,B (Κόκκινο, Πράσινο, Μπλε).
Τα ψηφία του δεκαεξαδικού είναι: 0123456789ABCDEF
Πχ : <body bgcolor="#FF0000">
κάνει το φόντο της σελίδας κόκκινο.

Επιπλέον εντολές
 <font color="#rrggbb"> ... </font>
Καθορίζει το χρώμα των χαρακτήρων
του ενδιάμεσου κειμένου
 <font size= J > … </font>
όπου εάν J = 1,2,…,7 καθορίζει το
μέγεθος των χαρακτήρων, και
εάν J=+3, x=-2 … (με πρόσημο) την
σχετική τους διαφορά από το τρέχον
μέγεθος.

Ετικέτα BASEFONT

 <basefont size =J color = "#rrggbb" >
J = 1,2,…,7
Καθορίζει το προεπιλεγμένο (default)
μέγεθος και χρώμα των χαρακτήρων για
όλη την σελίδα.
Εισάγεται στο <HEAD> … </HEAD>
μέρος της σελίδας.

Πίνακες (Tables)
<TABLE>
<CAPTION>The Bradys</CAPTION>
<TR>
<TD> Marcia </TD>
<TD> Carol </TD>
<TD> Greg </TD>
</TR>
<TR> The Bradys
<TD> Jan </TD> Marcia Carol Greg
<TD> Alice </TD>
<TD> Peter </TD> Jan Alice Peter
</TR>
Cindy Mike Bobby
<TR>
<TD> Cindy </TD>
<TD> Mike </TD>
<TD>Bobby </TD>
</TR>
</TABLE>

Επεξηγήσεις
 <TABLE> Ξεκινά τον σχηματισμό ενός πίνακα
</TABLE> Σηματοδοτεί το τέλος του πίνακα
 <CAPTION> Τοποθετεί μια λεζάντα από πάνω
</CAPTION> Σηματοδοτεί το τέλος της λεζάντας
 <TR> Table Ξεκινά τον σχηματισμό μιας σειράς
Row
</TR> Σηματοδοτεί το τέλος της σειράς
 <TD> Table Ξεκινά τον σχηματισμό ενός κελιού
Data
</TD> Σηματοδοτεί το τέλος του κελιού
 <TH>...</ΤΗ> Όπως και το <TD> έντονο και κέντρο

<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">
<CAPTION>The Bradys</CAPTION>
<TR>
<TD ALIGN = "center"> Agnes </TD>
<TD ALIGN = "center"> Wilma </TD>
<TD ALIGN = "center"> George </TD>
</TR> The Bradys

<TR> Agnes Wilma George
<TD ALIGN = "center"> Gwen </TD>
<TD ALIGN = "center"> Skippy </TD> Gwen Skippy Alvin
<TD ALIGN = "center"> Alvin </TD>
</TR> Harry Melvin Joe
<TR>
<TD ALIGN = "center"> Harry </TD>
<TD ALIGN = "center"> Melvin </TD>
<TD ALIGN = "center"> Joe </TD>
</TR>
</TABLE>

<TABLE BORDER="3" CELLSPACING="1"
CELLPADDING="1">
 BORDER="3"
Κανονίζει το πάχος του περιγράμματος
 CELLSPACING="1"
Κανονίζει το πάχος του περιγράμματος του κελιού
 CELLPADDING="1">
Κανονίζει το περιθώριο μέσα στο κελί
<TD ALIGN = "center"> Agnes </TD>
Κανονίζει την θέση του κειμένου στο κελί.
Δυνατές τιμές: "left", "center", "right"

Σύνθετοι Πίνακες

1999-2000
Partial Subtotals 2001
Tax
TOTAL

ΠΑΡΑΔΕΙΓΜΑ
<html><head><title>Strange</title></head>
<body>
<table bgcolor="lightblue" border="3">
<tr> <td colspan="3" align="center" > <b>1999-
2000</b></td> <th rowspan="3"
bgcolor="yellow">2001</th> </tr>
<tr><td bgcolor="red" rowspan="2"
valign="middle">Tax</td>
<td>Partial</td> <td> Subtotals </td></tr>
<tr> <td bgcolor="green" align="center"
colspan="2">TOTAL</td> </tr>
</table> </body> </html>

EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ
<html> <head> <title> Photos in Table </title></head>
<body bgcolor="silver"> <H1> Many Photos </H1>
<table border="0" bgcolor="black" cellspacing="0" >
<tr align=center >
<td> <IMG src="photosdgp.jpg",HEIGHT=200> </td>
<td> <IMG src="photosarly.jpg", HEIGHT=200> </td>
</tr>
<tr align=center>
<td><IMG src="photosnikolop04.jpg" height=200></td>
<td><IMG src="photossupport.jpg" height=200></td>
</tr> </table> </body> </html>

Φωτογραφίες ομάδας που δημιούργησε την πρώτη μορφή
του αρχείου αυτού παρουσίασης περί HTML

Πλαίσια (frames)

Δυνατότητα παρουσιάσεων
με χρήση πολλών
παραθύρων

Συνδεδεμένα Παράθυρα

Νέα παράμετρος της ετικέτας <Α>
 TARGET = "όνομα νέου παραθύρου"
<A HREF="grades.html" TARGET="new">ΒΑΘΜΟΙ</Α>
Ανοίγει ένα νέο παράθυρο με το όνομα new,
χωρίς να κλείσει το τρέχον.
Η παρουσίαση της σελίδας HREF="grades.html"
θα εμφανιστεί στο νέο παράθυρο.

ΠΑΡΑΔΕΙΓΜΑ
<html> <head> </head> <body>
<h1> HI there </h1>
You can see your
<a href ="grades.html" target="new"> grades here</a>
</body></html>
ΑΡΧΕΙΟ grades.html
Η πρώτη σελίδα εμφανίζεται ως:
<html><head></head>
HI there <body>
<UL>
You can see your grades here <li>Math 19
<li>Phys 18
<li>Comp 16
<li>Lite 19
</UL>
</body></html>

HI there
You can see your grades here

• Math 19
• Phys 18
• Comp 16
• Lite 19

Η ετικέτα BASE

<BASE TARGET= "ΌΝΟΜΑ_ΠΑΡΑΘΥΡΟΥ" >

Εισάγεται στο <HEAD> … </HEAD> μέρος της
σελίδας.
Έχει ως αποτέλεσμα να εμφανίζονται στο καθορισμένο
παράθυρο, όλες οι σελίδες που σχετίζονται με δεσμούς
στους οποίους η παράμετρος TARGET έχει παραλειφθεί.

<html><head><base target="profs"></head>
<body>
<UL>
<li> <a href=math.txt>Math 19 </a>
<li> <a href=phys.txt>Phys 18 </a>
<li> <a href=comp.txt>Comp 16 </a>
<li> <a href=lite.txt>Lite 19 </a>
</UL>
</body></html>

Αρχείο Περιεχόμενα
math.txt Mathematics Professor: C. F.Gauss
phys.txt Physics Professor: A. Einstein
comp.txt Comp. Science Professor: A. Turing
lite.txt Literature Professor: S. Bellow

Ετικέτες: FRAMESET &
FRAME
Με τις ετικέτες FRAMESET καθορίζουμε
την δομή του πλαισίου, που απαρτίζεται από
διαφορετικά παράθυρα.

Με τις ετικέτες FRAME καθορίζουμε τα
περιεχόμενα των διαφορετικών παραθύρων
του πλαισίου.

FRAMESET
Συντάσσεται με μία εκ των δύο παραμέτρων
COLS = "εύρος στήλης1, εύρος στήλης2,…"
ROWS = "ύψος σειράς1, ύψος σειράς2,…"

Τα εύρη (ύψη) καθορίζονται είτε:
• Σε αριθμό pixels, ή
• Σε ποσοστό κάλυψης ή
• Με ένα αστερίσκο (*) για αυτόματη ρύθμιση.

<frameset COLS="110,30%,*">
…
</frameset>
Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας
σελίδας σε τρεις στήλες . Η πρώτη έχει εύρος 110 pixels, η
δεύτερη έχει εύρος ίσον προς το 30% της σελίδας, και η
τρίτη προσαρμόζεται στο εναπομένον εύρος.
110 270 520

<frameset ROWS="110,30%,*">
…

110
</frameset>
Η παραπάνω σύνταξη έχει ως
αποτέλεσμα το χώρισμα μιας
σελίδας σε τρεις σειρές.

270
• Η πρώτη έχει ύψος 110 pixels,
• Η δεύτερη έχει ύψος ίσον προς
το 30% της σελίδας, και
• Η τρίτη προσαρμόζεται στο

520
εναπομένον ύψος.

ΣΗΜΑΝΤΙΚΟ

Κάθε μέρος (στήλη ή σειρά)
της διαμέρισης είναι ένα
διαφορετικό παράθυρο.
Τα παράθυρα αυτά μπορούν
να έχουν ονόματα.

FRAME
Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια
ετικέτα τύπου FRAME που θα καθορίζει το
περιεχόμενο της διαμέρισης.
<html> <head> <frameset cols="30%,*">
<frame src="grades.html">
<frame src="tex8.gif" name="new">
</frameset></head></html>

Χωρίζεται η σελίδα σε δύο στήλες. Η πρώτη
καταλαμβάνει τα 30% του εύρους της σελίδας και τα
υπόλοιπα 70% η δεύτερη.

Τα περιεχόμενα της πρώτης στήλης καθορίζονται
από το αρχείο grades.html που ορίζεται μέσω
της παραμέτρου SRC:
<frame SRC="grades.html">
Τα περιεχόμενα της δεύτερης στήλης καθορίζονται
από το αρχείο tex8.gif που επίσης ορίζεται
μέσω της παραμέτρου SRC:
<frame SRC="tex8.gif" name="new">
Παρατηρήστε την επιπλέον παράμετρο
name="new", που ονομάζει το παράθυρο της
δεύτερης στήλης new. Αυτό το όνομα μπορεί να
χρησιμοποιηθεί σε συνδυασμό με την TARGET
παράμετρο της ετικέτας <Α>

<html> <head> <frameset cols="30%,*">
<frame src="grades.html">
<frame name="new">
</frameset></head></html>
grades.html
<html><head><base target="new"></head>
<body>
<UL>
<li><a href="math.txt"> Math 19</a>
<li><a href="phys.txt"> Phys 18</a>
<li><a href="comp.txt"> Comp 16</a>
<li><a href="lite.txt"> Lite 19</a>
</UL>
</body></html>

• Math 19
• Phys 18
• Comp 16
• Lite 19

• Math 19 Mathematics Professor: C. F.Gauss

• Phys 18
• Comp 16
• Lite 19

• Math 19 Physics Professor: A. Einstein

• Phys 18
• Comp 16
• Lite 19

• Math 19 Comp. Science Professor: A. Turing

• Phys 18
• Comp 16
• Lite 19

• Math 19 Literature Professor: S. Bellow

• Phys 18
• Comp 16
• Lite 19

Επιπλέον παράμετροι

 <FRAME SROLLING = option>
option = AUTO, NO, YES
 <FRAME NORESIZE>
Απαγορεύει την μεταβολή της διαμέρισης από το χρήστη

 <FRAME ΜΑRGINHEIGHT = number>
 <FRAME ΜΑRGINWIDTH = number>
Κανονίζει το κατακόρυφο και οριζόντιο περιθώριο

Ετικέτες <META>
 Τοποθετούνται μεταξύ <HEAD>…</HEAD>
 Πληροφορούν τις "Μηχανές Αναζήτησης" (MA)
Οι ΜΑ ψάχνουν συνέχεια στον Ιστό και δημιουργούν
βάσεις δεδομένων που συνδέουν τις σελίδες με θεματικά
αντικείμενα, λέξεις κλειδιά, ονόματα συγγραφέων κλπ
 Δίνουν εντολές στον Browser
Υπάρχει ένα περιορισμένο σύνολο εντολών που γίνεται
δεκτό μέσω των <ΜΕΤΑ> ετικετών.

Ετικέτες <META> ...

<META NAME="XXX" CONTENT="YYY">

XXX παίρνει διάφορες τιμές όπως:
description keywords generator
copyright expires author
YYY είναι κείμενο


<META NAME="description" CONTENT="Graphics">
Περιγράφει τα περιεχόμενα της σελίδας
<META NAME="keywords" CONTENT="Paint,Brush">
Καθορίζει σχετικές λέξεις "κλειδιά"
<META NAME="generator" CONTENT="NotePad">
Πληροφορεί για τον κατασκευαστή της σελίδας


<META NAME="copyright" CONTENT="IBM©2000">
Πληροφορεί για το copyright της σελίδας
<META NAME="expires" CONTENT="11 May 2000">
Ημερομηνία διαγραφής από την βάση των
μηχανών αναζήτησης
<META NAME="author" CONTENT="Homer">
Πληροφορεί για το συγγραφέα της σελίδας

Ετικέτες <META>
<META HTTP-EQUIV="XX" CONTENT="YY">
Με ΧΧ και με αντίστοιχο ΥΥ
expires Wed, 26 Feb 1977 08:21:37 GMT
pragma no-cache
refresh 2; URL= http://www.cs.uoi.gr/
set-cookie cookievalue=2; path=/
window-target _top
content-type text/html; charset=iso-8859-7


<META HTTP-EQUIV="expires"
CONTENT="Wed, 26 Feb 1977 08:21:37 GMT">
<META HTTP-EQUIV="pragma"
CONTENT="no-cache">
Εντέλει τον Browser να μην αποθηκεύσει την σελίδα
ούτε καν προσωρινά.
<META HTTP-EQUIV="refresh"
CONTENT="2; URL= http://www.cs.uoi.gr/ ">
Σε χρόνο 2 sec "φορτώνει" το καθορισμένο URL

<META HTTP-EQUIV="window-target"
CONTENT="_top">
Φέρνει την σελίδα σε πρώτο πλάνο. Εάν πχ υπάρχουν
frames η σελίδα "απελευθερώνεται" και καταλαμβάνει όλο
το παράθυρο.
<META HTTP-EQUIV="content-type"
CONTENT="text/html; charset=iso-8859-7 ">
Πληροφορεί τον Browser για το σύνολο χαρακτήρων

Κίνηση

Στο αρχείο file1.html, υπάρχει η ετικέτα:
CONTENT="1; URL= file2.html ">
Στο αρχείο file2.html, υπάρχει η ετικέτα:
CONTENT="1; URL= file3.html ">

Μεταφορά στον Παγκόσμιο Ιστό

Ενέργειες . . .
 Δημιουργούμε το σύνολο των σελίδων και τις
τοποθετούμε σε ένα κατάλογο έστω με το όνομα
present
 Το αρχείο της κεντρικής σελίδας πρέπει να
ονομαστεί: index.html ή index.htm
 Σε κάποιο Η/Υ του τμήματος με Solaris
λειτουργικό δημιουργούμε έναν κατάλογο:
public_html με δικαιώματα 755

Ενέργειες . . .
 Μεταφέρουμε τον κατάλογο present εντός
του public_html
 Όλα τα σχετικά αρχεία και οι κατάλογοι
πρέπει να έχουν δικαιώματα 755
 Εάν το login όνομα του χρήστη είναι:
csst0188, τότε η διεύθυνση της αρχικής
σελίδας για την εν λόγω παρουσίαση είναι:
www.cs.uoi.gr/~csst0188/present/

Cascading Style Sheets (CSS)
Ποιόν σκοπό εξυπηρετούν ?
Τα "Στυλιστικά Φύλλα" σκοπό έχουν να
επιδρούν στην εμφάνιση των σελίδων με ένα
συνεπή, εύκολο και ολοκληρωμένο τρόπο.
Διευκολύνουν το συγγραφικό έργο.
Συντελούν στην συστηματική τήρηση κανόνων
αισθητικής ομοιομορφίας.

Υποστήριξη

 Netscape Navigator 4.0
 Microsoft Internet Explorer 4.0
 Emacs
 Arena
 Amaya
. . . και συνεχώς η λίστα αυξάνει .

Εισαγωγικά Παραδείγματα

Η ετικέτα <STYLE> … </STYLE>
Τοποθετείται μεταξύ <head> … </head>
<HEAD> <TITLE> CSS Example </TITLE>
<STYLE TYPE="text/css">
H1 {font-size: 32pt; color: red}
H2 {font-size: 24pt; color: blue}
</STYLE>
</HEAD>

Η ετικέτα <STYLE> επιτρέπει την διαμόρφωση
των παραμέτρων των ετικετών της HTML.
H1 {font-size: 32pt; color: red}
Καθορίζει ότι η ετικέτα <Η1> θα χρησιμοποιεί
γραμματοσειρά μεγέθους 32 στιγμών και
χρώματος κόκκινου.
H2 {font-size: 24pt; color: blue}
Αντίστοιχα για την ετικέτα <Η2>

Στυλιστική Σύνταξη
TAG {Ιδιότητα_1: τιμή; Ιδιότητα_2: τιμή; … }

Όπου TAG οποιοδήποτε όνομα HTML ετικέτας, πχ:
Η1
BODY
P

Απομένει να καθοριστούν οι ιδιότητες και οι
αντίστοιχες τιμές.

Παραδείγματα Ιδιοτήτων …

P {text-indent: 3em ; color: red; font-size: 18pt }

Καθορίζει ότι για την παράγραφο (<P>…</P>),
η εσοχή θα είναι 3 φορές το μέγεθος της
γραμματοσειράς.
Το χρώμα της γραμματοσειράς κόκκινο.
Το μέγεθος της γραμματοσειράς 18 στιγμών.

Κατηγορίες
Classes
Classes

Είναι δυνατόν να δημιουργήσουμε διάφορες
κατηγορίες διαμόρφωσης για την ίδια ετικέτα.
Δηλαδή η ίδια ετικέτα μπορεί να έχει
περισσότερα του ενός στυλ.
Παράδειγμα:
 H1.norm { color: #0000FF; font-size: 24pt }
 H1.enh { color: #FF2288; font-size: 32pt }

Στο παράδειγμα κατασκευάστηκαν δύο
κατηγορίες για την ετικέτα Η1.
Η norm
και η enh

Θα μπορούν δε να χρησιμοποιούνται ως εξής:
<H1 class = norm> Εισαγωγή </H1>
<H1 class = enh > ΚΕΦΑΛΑΙΟ VI </H1>

 Οι κατηγορίες μπορούν να ορίζονται
και ξεχωριστά , χωρίς την παρουσία
κάποιας ετικέτας HTML. Πχ:
.norm { color: #0000FF; font-size: 24pt }
.enh { color: #FF2288; font-size: 32pt }

Θα μπορούν δε να χρησιμοποιούνται ως εξής:
<H1 class = norm> Εισαγωγή </H1>
<P class = enh > ΚΕΦΑΛΑΙΟ VI </P>

Ένας εναλλακτικός τρόπος για τον
καθορισμό του στυλ είναι ο ID επιλογέας
(ID selector).
#pib {color: black; font-size: 40pt }
Χρησιμοποιείται δε ως:
<h1 id=pib > Εισαγωγή </h1>
<p id=pib > Εισαγωγή </p>

Είναι προτιμητέα η χρήση
των κατηγοριών

Ετικέτες σε συνάφεια
Contextual selectors
Contextual selectors

Παράδειγμα:
P EM { background: yellow }
Προσοχή: Όχι κόμμα !!!
Προσοχή: Όχι κόμμα !!!

Το παραπάνω στυλ ερμηνεύεται ως εξής:
Κείμενο που είναι εντός και των δύο ετικετών:
<P>… <EM> κείμενο </EM> … </P>
Θα έχει κίτρινο φόντο.

<html><head>
<style>
P EM { background: yellow }
</style>
</head>
<body>
<h1> Παράδειγμα </h1>
<p>
This is an <em> emphasized piece of text </em>
and it is treated specially
</p>
Isn't it great ?
<P> <em> INDEED </em> !!! </p>
</body></html>

Εμφάνιση

This is an emphasized piece of text and it is treated specially
Isn't it great ?
INDEED !!!

Ομαδοποίηση
Grouping
Grouping

Είναι δυνατόν να ορίσει κανείς κοινές
ιδιότητες για μια ομάδα ετικετών. Π.χ:
H1, H2, H3 {color: red;
font-family:sans-serif}

Ο παραπάνω κανόνας επιβάλει ότι για τις
ετικέτες <Η1>, <Η2> και <Η3> το χρώμα
θα είναι κόκκινο και η γραμματοσειρά
τύπου sans-serif.

Ψευδοκατηγορίες
Pseudo-classes
Pseudo-classes

Οι δηλώσεις: Anchor pseudo-classes
Anchor pseudo-classes
 A:link {color: red}
 A:active { color: blue; font-size: 125% }
 A:visited {color: green; font-size: 85% }
Έχουν ως αποτέλεσμα:
 Οι δεσμοί είναι κόκκινοι
 Οι ενεργοί δεσμοί μπλε και 125% μεγαλύτεροι
 Οι χρησιμοποιημένοι δεσμοί πράσινοι και 85%
μικρότεροι

Πρώτη Γραμμή - Πρώτο γράμμα
Οι δηλώσεις:
 P:first-line {font-variant: small-caps;
font-weight: bold}
 P:first-letter {font-size: 300% ; float: left}

Επηρεάζουν αντίστοιχα την πρώτη γραμμή
και το πρώτο γράμμα μιας παραγράφου.

Ιδιότητες
Ορίζονται ιδιότητες σχετικά με τις
παρακάτω έννοιες

 Font
 Color & Background
 Text
 Box

FONT
 Font-Family
 Font-Style
 Font-Variant
 Font-Weight
 Font-Size
 Font

Font-Family
Font-family: Name1, Name2, …, Generic1, Generic2, …

P {Font-Family: Arial, Times, serif}
Name1, Name2 είναι ονόματα γραμματοσειρών
Generic1, … είναι γενικός τύπος γραμματοσειρών
Δυνατές τιμές για τα Generic1, … είναι:
• serif Times
• sans-serif Arial
• cursive Zapf-Chancery
• fantasy Western
• monospace Courier

Font-Style
 Font-Style: XXX
Όπου: XXX μπορεί να είναι:
 normal
 italic
 oblique
H1 { font-style: oblique }
P { font-style: normal }

Font-Variant
 Font-Variant: XXX
 normal
 small-caps
H1 { font-variant:small-caps }

Font-Weight
 Font-Weight: XXX
 normal
 bold bolder lighter
 100 200 … 900
H1 { font-weight: 800 }
P { font-weight: 300 }

Font-Size
 Font-Size: XXX
 xx-small x-small small medium large x-
large xx-large
 larger smaller
 Aριθμός σε pt ή in (points/inches)
 Αριθμός σε %
P { font-size: 90% }

Font
 Font: XXX
 font-style font-variant font-weight
 font-size/line-height

P { font: italic bold 12pt/14pt Times, serif }

Επιπλέον ...
Περαιτέρω πληροφορίες και περιγραφή μπορεί να
αναζητηθούν στο Word Wide Web (WWW).
Ορισμένες χρήσιμες διευθύνσεις είναι:
http://www.w3.org/
http://netspace.students.brown.edu/users/dwb/www-authoring.html
http://www.wnetc.com/technical/html.html
http://oneworld.wa.com/htmldev/devpage/dev-page1.html

Υπάρχουν πολλά βιβλία για την HTML, αλλά λόγω της φύσης της
(συνεχώς ανανεώνεται) η καλύτερη (πιο σύγχρονη) ενημέρωση βρίσκεται
στον παγκόσμιο ιστό.

Τ Ε Λ Ο Σ (… προς το παρόν)

 Επεξεργασία, ενημέρωση, διόρθωση του
παρόντος αρχείου παρουσίασης (περί Γλώσσας
Σχεδιασμού Ιστοσελίδων) από τον
Μιχαλόπουλο Βασίλη [ΠΕ20] – καθηγητή
Πληροφορικής

HTML [from web] epilogis a kai b lyceiou - bmichal version 1

Recommended

Recommended

More Related Content

Similar to HTML [from web] epilogis a kai b lyceiou - bmichal version 1

Similar to HTML [from web] epilogis a kai b lyceiou - bmichal version 1 (20)

More from Vassilis Michalopoulos

More from Vassilis Michalopoulos (6)

Recently uploaded

Recently uploaded (20)

HTML [from web] epilogis a kai b lyceiou - bmichal version 1