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

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

World Wide Web (WWW)World Wide Web (WWW)

Υπηρεσίες Παγκόσμιου ΙστούΥπηρεσίες Παγκόσμιου Ιστού

Τήλε – ΕπικοινωνίαΤήλε – Επικοινωνία Αναζήτηση πληροφοριώνΑναζήτηση πληροφοριών Εξ αποστάσεως Εξ αποστάσεως

δραστηριότητες:δραστηριότητες:– ΔιδασκαλίαΔιδασκαλία– ΕμπόριοΕμπόριο

ΔιαφήμισηΔιαφήμιση Παγκόσμιο Κοινωνικό Παγκόσμιο Κοινωνικό

ΦαινόμενοΦαινόμενο

Η αρχή ...Η αρχή ...

Tim Berners-LeeTim Berners-Lee

HYPERTEXT PROJECT HYPERTEXT PROJECT ((19891989) )

CERNCERN

Conseil European pour la Recherche NucleaireConseil European pour la Recherche Nucleaire

http://www.physics.ntua.gr/POPPHYS/articles/cern1.html

http://el.wikipedia.org/wiki/CERN

http://en.wikipedia.org/wiki/Tim_Berners-Lee

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

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

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

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

Διευθύνσεις ΙΣΤΟΥ – Διευθύνσεις ΙΣΤΟΥ – URLsURLs

httphttp://www.cs.uoi.gr/index.html://www.cs.uoi.gr/index.html

ftpftp://www.cs.uoi.gr/pub://www.cs.uoi.gr/pub

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

http://www.cs.uoi.gr/index.html

http://www.cs.uoi.gr/index.html

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

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

Μοντέλο Μοντέλο ClientClient –– ServerServer [1] [1]

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

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

Μοντέλο Μοντέλο ClientClient –– ServerServer [2] [2]

Ο Ο clientclient στέλνει μηνύματα στον στέλνει μηνύματα στον serverserver και και ζητά κάποιες υπηρεσίεςζητά κάποιες υπηρεσίες

Η επικοινωνία Η επικοινωνία clientclient –– serverserver γίνεται μέσω γίνεται μέσω του πρωτοκόλλου του πρωτοκόλλου TCP/IPTCP/IP

Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)

Internet Protocol (IP)Internet Protocol (IP)

WEB BROWSERSWEB BROWSERS

Ο πρώτος «περιηγητής δικτύου» Ο πρώτος «περιηγητής δικτύου» δημιουργήθηκε στο δημιουργήθηκε στο NCSA (National NCSA (National Center for Supercomputing Center for Supercomputing Applications) Applications) του Πανεπιστημίουτου Πανεπιστημίου IllinoisIllinois

MOSAICMOSAIC το όνομα του πρώτου το όνομα του πρώτου browserbrowser

Κατά το 1992 – 1993Κατά το 1992 – 1993 Από τον Από τον Marc Andreessen Marc Andreessen και ομάδα και ομάδα

άλλων φοιτητώνάλλων φοιτητών

http://en.wikipedia.org/wiki/Mosaic_%28web_browser%29

http://en.wikipedia.org/wiki/Marc_Andreessen

Σημερινοί Σημερινοί BrowsersBrowsers

NetscapeNetscape Internet ExplorerInternet Explorer AmayaAmaya HotJava ...HotJava ... Mozilla FirefoxMozilla Firefox OperaOpera SafariSafari

HTMLHTML Hyper Text Markup LanguageHyper Text Markup Language Γλώσσα Σχεδιασμού ΙστοσελίδωνΓλώσσα Σχεδιασμού Ιστοσελίδων Απλά αρχεία κειμένου με επέκταση Απλά αρχεία κειμένου με επέκταση html html ή ή

htmhtm (συνήθως, ενώ άλλες επεκτάσεις είναι (συνήθως, ενώ άλλες επεκτάσεις είναι jsp, php, asp, aspxjsp, php, asp, aspx, …), …)

Περιέχουν εντολές και κείμενο μαζίΠεριέχουν εντολές και κείμενο μαζί Οι εντολές απευθύνονται στον περιηγητήΟι εντολές απευθύνονται στον περιηγητή Οι εντολές καθορίζουν τον τρόπο Οι εντολές καθορίζουν τον τρόπο

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

κειμένου ή πιο εξειδικευμένα γραφικά κειμένου ή πιο εξειδικευμένα γραφικά περιβάλλονταπεριβάλλοντα

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

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

Eτικέτες (Eτικέτες (tags) HTLMtags) HTLM

Είναι σημάδια που χρησιμοποιεί η Είναι σημάδια που χρησιμοποιεί η HTMLHTML για να καθορίσει τον τρόπο για να καθορίσει τον τρόπο εμφάνισης του ενδιάμεσου κειμένου.εμφάνισης του ενδιάμεσου κειμένου.

Οι ετικέτες συνήθως συντάσσονται σε Οι ετικέτες συνήθως συντάσσονται σε ζεύγη, π.χ.ζεύγη, π.χ.: : <H1> …. </H1> <H1> …. </H1>

HH ετικέτα <Η1> καθορίζει ότι το ετικέτα <Η1> καθορίζει ότι το κείμενο που ακολουθεί, θα εμφανιστεί κείμενο που ακολουθεί, θα εμφανιστεί ως επικεφαλίδα πρώτου μεγέθους.ως επικεφαλίδα πρώτου μεγέθους.

HH ετικέτα </Η1> καθορίζει το τέλος του ετικέτα </Η1> καθορίζει το τέλος του κειμένου επικεφαλίδας.κειμένου επικεφαλίδας.

ΗΗ HTMLHTML είναι αναπτυσσόμενη είναι αναπτυσσόμενη γλώσσα και αλλάζει συνεχώςγλώσσα και αλλάζει συνεχώς..

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

Σήμερα συντάσσεται ως Σήμερα συντάσσεται ως <P><P> ... </P> ... </P> Η Η <P><P> επιβάλλει αλλαγή παραγράφου. επιβάλλει αλλαγή παραγράφου. Στην Στην HTML HTML οι εντολές μπορούν να οι εντολές μπορούν να γραφτούν με γραφτούν με μικράμικρά και/ήκαι/ή με με κεφαλαίακεφαλαία γράμματα.γράμματα.

Σχόλια στην Σχόλια στην HTML HTML

--> Σχόλιο είναι οτιδήποτε βρίσκεται Σχόλιο είναι οτιδήποτε βρίσκεται

ανάμεσα σταανάμεσα στα: : --> Τα σχόλια δεν εμφανίζονται στην Τα σχόλια δεν εμφανίζονται στην

σελίδασελίδα Χρησιμοποιούνται από τους Χρησιμοποιούνται από τους

συγγραφείς σελίδων ως επεξηγήσειςσυγγραφείς σελίδων ως επεξηγήσεις

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

Οι Οι Browsers Browsers δεν υποστηρίζουν όλες τις δεν υποστηρίζουν όλες τις ετικέτες. ετικέτες.

Ετικέτες που δεν υποστηρίζονται, Ετικέτες που δεν υποστηρίζονται, απλώς παραβλέπονται.απλώς παραβλέπονται.

Ορισμένες ετικέτες μπορεί να πάψουν Ορισμένες ετικέτες μπορεί να πάψουν να υποστηρίζονται.να υποστηρίζονται.

Συνέχεια προστίθενται νέες δυνατότητες Συνέχεια προστίθενται νέες δυνατότητες στην στην HTML. HTML.

ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ

Κάθε HTML έγγραφο, πρέπει να έχει Κάθε HTML έγγραφο, πρέπει να έχει ένα τίτλο, κυρίως για λόγους ένα τίτλο, κυρίως για λόγους αναγνώρισης.αναγνώρισης.

<TITLE><TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE></TITLE> Υποστηρίζονται επίσης επικεφαλίδες Υποστηρίζονται επίσης επικεφαλίδες

έξη μεγεθών. έξη μεγεθών.

<H<Hnn>> ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ </H</Hnn>>((n = 1,2,…,6n = 1,2,…,6))

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

Η παράμετρος Η παράμετρος ALIGNALIGN<H1 ALIGN = <H1 ALIGN = CENTERCENTER> > ΚείμενοΚείμενο </H1> </H1>

"Κεντράρει" την επικεφαλίδα."Κεντράρει" την επικεφαλίδα. Οι δυνατές επιλογές είναι:Οι δυνατές επιλογές είναι:

– ALIGN = ALIGN = LEFT LEFT (Αριστερή στοίχιση)(Αριστερή στοίχιση)– ALIGN = ALIGN = CENTERCENTER (Κεντράρισμα)(Κεντράρισμα)– ALIGN = ALIGN = RIGHTRIGHT (Δεξιά στοίχιση)(Δεξιά στοίχιση)

Εάν παραληφθεί ισοδυναμεί με Εάν παραληφθεί ισοδυναμεί με ALIGN = LEFT ALIGN = LEFT

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

<P><P> Κείμενο παραγράφουΚείμενο παραγράφου

</</P>P>

Επίσης υποστηρίζεται η παράμετροςΕπίσης υποστηρίζεται η παράμετρος ALIGN ALIGN πχπχ

<P <P ALIGN = ALIGN = CENTERCENTER > > Κείμενο παραγράφουΚείμενο παραγράφου

</</P>P>Με προφανή (αντίστοιχα) αποτελέσματα.Με προφανή (αντίστοιχα) αποτελέσματα.

Σύνδεσμοι Σύνδεσμοι ((linkslinks)) με άλλα με άλλα έγγραφαέγγραφα

H ισχύς της H ισχύς της HTML HTML προέρχεται από προέρχεται από την δυνατότητα σύνδεσης με άλλα την δυνατότητα σύνδεσης με άλλα αρχεία.αρχεία. Τα σημεία όπου βρίσκονται οι Τα σημεία όπου βρίσκονται οι σύνδεσμοι εμφανίζονται υπογραμμισμένα σύνδεσμοι εμφανίζονται υπογραμμισμένα και και είναι συνήθως χρώματος είναι συνήθως χρώματος μπλεμπλε.. Η ετικέτα για δημιουργία συνδέσμων είναιΗ ετικέτα για δημιουργία συνδέσμων είναι: :

<A> … </A><A> … </A> και συντάσσεται με και συντάσσεται με διάφορους παραμέτρους. Το γράμμα Α διάφορους παραμέτρους. Το γράμμα Α προέρχεται από την λέξη προέρχεται από την λέξη Anchor Anchor (Άγκυρα)(Άγκυρα)

Η δημιουργία ενός συνδέσμου με κάποιο Η δημιουργία ενός συνδέσμου με κάποιο αρχείο, πχ με το αρχείο: αρχείο, πχ με το αρχείο: gradesgrades,γίνεται ως:,γίνεται ως:

<A HREF =<A HREF = ""gradesgrades">"> ΚείμενοΚείμενο </Α></Α> Ο Browser θα εμφανίσει το Ο Browser θα εμφανίσει το ΚείμενοΚείμενο υπογραμμισμένο και μπλέ. υπογραμμισμένο και μπλέ. ΚείμενοΚείμενο

Μόλις ο χρήστης κάνει "κλικ" πάνω στον Μόλις ο χρήστης κάνει "κλικ" πάνω στον σύνδεσμο (με το "ποντίκι") τότε συνδέεται σύνδεσμο (με το "ποντίκι") τότε συνδέεται με το αρχείο με το αρχείο gradesgrades (που βρίσκεται στον (που βρίσκεται στον ίδιο κατάλογο με το τρέχον αρχείο).ίδιο κατάλογο με το τρέχον αρχείο).

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

Εάν το αρχείο που "σκοπεύει" ο Εάν το αρχείο που "σκοπεύει" ο σύνδεσμος δεν είναι στον ίδιο κατάλογο με σύνδεσμος δεν είναι στον ίδιο κατάλογο με το το τρέχον αρχείο, τότε καθορίζεται από ένα τρέχον αρχείο, τότε καθορίζεται από ένα σχετικό σχετικό pathpath, πχ, πχ::

<A HREF = "depts/phys/grades"> Κείμενο </Α><A HREF = "depts/phys/grades"> Κείμενο </Α>

ήή <A HREF = "../phys/grades"> Κείμενο </Α> <A HREF = "../phys/grades"> Κείμενο </Α>

Στις παραπάνω περιπτώσεις υποτίθεται ότι Στις παραπάνω περιπτώσεις υποτίθεται ότι το τρέχον και τα υπόλοιπα αρχεία το τρέχον και τα υπόλοιπα αρχεία

βρίσκονται στον ίδιο εξυπηρετητή (server).βρίσκονται στον ίδιο εξυπηρετητή (server).

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

Σύνδεσμοι σε άλλους Σύνδεσμοι σε άλλους servers servers

Σύνδεσμοι με έγγραφα σε διαφορετικό Σύνδεσμοι με έγγραφα σε διαφορετικό serverserver απαιτούν πλήρη διεύθυνση, πχαπαιτούν πλήρη διεύθυνση, πχ::

<A HREF =<A HREF = " "http://www.uoi.gr/gradeshttp://www.uoi.gr/grades"> "> BαθμοίBαθμοί </Α> </Α>

Η πλήρης διεύθυνση ονομάζεται Η πλήρης διεύθυνση ονομάζεται URL. URL.(Universal Resource Locator)(Universal Resource Locator)

Οι διευθύνσεις έχουν το παρακάτω γενικό σχήμαΟι διευθύνσεις έχουν το παρακάτω γενικό σχήμα::

xxxxxxxx://://host.domainhost.domain//path/filenamepath/filename

όπου όπου xxxxxxxx είναι είναι: : httphttp , , gophergopher και news, και news, για αρχεία για αρχεία σε σε WWW serversWWW servers, , Gopher serversGopher servers, Usenet servers., Usenet servers.

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

Η σύνταξηΗ σύνταξη::Στείλτε τα σχόλιά σας στον Στείλτε τα σχόλιά σας στον

<<A HREFA HREF="="MAILTOMAILTO:[email protected]"> διδάσκοντα <:[email protected]"> διδάσκοντα </A/A>>

ξεκινά την διαδικασία αποστολής ξεκινά την διαδικασία αποστολής EmailEmail προς προς τον χρήστη τον χρήστη [email protected]@cs.uoi.gr

Εμφανίζεται δε ωςΕμφανίζεται δε ως::

Στείλτε τα σχόλιά σας στονΣτείλτε τα σχόλιά σας στον διδάσκονταδιδάσκοντα

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

Υπάρχει δυνατότητα για συνδέσεις σε Υπάρχει δυνατότητα για συνδέσεις σε συγκεκριμμένο σημείο εντός κάποιου συγκεκριμμένο σημείο εντός κάποιου αρχείου. Πχ. η σύνδεση στο αρχείο αρχείου. Πχ. η σύνδεση στο αρχείο zoo zoo στο στο σημείο όπου υπάρχει το κείμενο σημείο όπου υπάρχει το κείμενο lionlion

Εντός του Εντός του zoo zoo στο σημείο στο σημείο lionlion βάζουμε μια βάζουμε μια διεύθυνση: διεύθυνση: <Α<Α ΝΑΜΕ ΝΑΜΕ="="leonleon"">>lion lion </A></A> Στο τρέχον αρχείο γράφουμεΣτο τρέχον αρχείο γράφουμε:: <A <A HREFHREF="="zoozoo##leonleon"> κείμενο </A>"> κείμενο </A>

Σύνδεσμοι μέσα στο ίδιο αρχείοΣύνδεσμοι μέσα στο ίδιο αρχείο

Συνδέσεις σε σημεία του τρέχοντος αρχείου είναι Συνδέσεις σε σημεία του τρέχοντος αρχείου είναι δυνατές.δυνατές.

Πχ για την σύνδεση στο σημείο όπου υπάρχει το Πχ για την σύνδεση στο σημείο όπου υπάρχει το κέιμενο:κέιμενο: FortranFortran

Βάζουμε διεύθυνσηΒάζουμε διεύθυνση: :

<A <A NAMENAME="="calculationscalculations"> Fortran </A>"> Fortran </A>

O O σύνδεσμος υλοποιείται ωςσύνδεσμος υλοποιείται ως::

<A HREF="<A HREF="##calculationscalculations"> "> κείμενοκείμενο </Α> </Α>

Για να εμφανιστεί μια λίστα πχΓια να εμφανιστεί μια λίστα πχ:: ApplesApples OrangesOranges

Χρειάζεται η ετικέταΧρειάζεται η ετικέτα: <UL> : <UL> (unordered list) (unordered list)

και η ετικέτακαι η ετικέτα: <LI> : <LI> (list item)(list item) Η σύνταξη έχει ωςΗ σύνταξη έχει ως::

<UL><UL><LI> <LI> ApplesApples<LI> <LI> OrangesOranges</UL></UL>

ΛίστεςΛίστες [1][1]

Για να εμφανιστεί μια λίστα πχΓια να εμφανιστεί μια λίστα πχ::1. Apples1. Apples

2. Oranges2. Oranges

3. Grapes3. Grapes

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

<OL> <OL>

<LI> <LI> Apples Apples <LI> <LI> OrangesOranges <LI> <LI> GrapesGrapes

</OL></OL>

ΛίστεςΛίστες [2][2]

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

Η ετικέτα <OL> έχει παραμέτρουςΗ ετικέτα <OL> έχει παραμέτρους.. <OL TYPE = 1><OL TYPE = 1> Ταξινομεί με αριθμούςΤαξινομεί με αριθμούς

<OL TYPE = Α><OL TYPE = Α> Ταξινομεί με κεφαλαία γράμματαΤαξινομεί με κεφαλαία γράμματα

<OL TYPE = <OL TYPE = aa>> Ταξινομεί με μικρά γράμματαΤαξινομεί με μικρά γράμματα

<OL TYPE = Ι><OL TYPE = Ι> Ταξινομεί με κεφαλαίους Λατινικούς αριθμούςΤαξινομεί με κεφαλαίους Λατινικούς αριθμούς

<OL TYPE = ι><OL TYPE = ι> Ταξινομεί με μικρούς Λατινικούς αριθμούςΤαξινομεί με μικρούς Λατινικούς αριθμούς

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

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

Α.Α. Apples Apples B. OrangesB. OrangesΟι δε εντολέςΟι δε εντολές::<OL TYPE=Ι> <LI> Apples <LI> Oranges> </OL><OL TYPE=Ι> <LI> Apples <LI> Oranges> </OL>

Ι.Ι. Apples Apples ΙΙ. OrangesΙΙ. Oranges

κλπ . . .


H παράμετρος H παράμετρος STARTSTART χρησιμοποιείται με χρησιμοποιείται με την ετικέτα την ετικέτα <OL><OL> για να ξεκινήσει την για να ξεκινήσει την αρίθμηση από οποιοδήποτε αριθμό.αρίθμηση από οποιοδήποτε αριθμό.

Η παράμετρος Η παράμετρος VALUEVALUE χρησιμοποιείται με χρησιμοποιείται με την ετικέτα την ετικέτα <LΙ><LΙ> για να αποφύγει κάποιους για να αποφύγει κάποιους αριθμούς. Πχ οι εντολέςαριθμούς. Πχ οι εντολές::

<OL <OL START=3START=3>> <LI><LI> Apples Apples <LI><LI> Oranges Oranges

<LI <LI VALUE=7VALUE=7>> Grapes Grapes <LI><LI> Bananas Bananas </OL></OL>

Παράγουν το Παράγουν το παρακάτω αποτέλεσμα.παρακάτω αποτέλεσμα.


3. Apples3. Apples4. Oranges4. Oranges7. Grapes7. Grapes

8. 8. BananasBananas

Εάν αντικαταστήσουμε την ετικέτα <OL START=3> με την

<OL START=3 TYPE=A> θα έχουμε:C. ApplesD. OrangesG. Grapes

H. Bananas

Εάν αντικαταστήσουμε την ετικέτα <OL START=3>

με την <OL START=3 TYPE=i> θα έχουμε: iii. Apples iv. Orangesvii. Grapes

viii. Bananas


Χρησιμοποιούν τις ετικέτεςΧρησιμοποιούν τις ετικέτες:: <DL> … </DL><DL> … </DL> ((DDefinition efinition LList)ist) <DT><DT> ((DDefinition efinition TTerm)erm) <DD><DD> ((DDefinition efinition DData)ata)

Λίστες ΟρισμούΛίστες Ορισμού [1][1]

ΠαράδειγμαΠαράδειγμα<<DL>DL><DT> Fortran<DT> Fortran<DD> <DD> Γλώσσα προγραμματισμού κατάλληλη για Γλώσσα προγραμματισμού κατάλληλη για επιστημονικούς υπολογισμούς.επιστημονικούς υπολογισμούς.<<DT> CDT> C<DD><DD> Γλώσσα προγραμματισμού κατάλληλη για Γλώσσα προγραμματισμού κατάλληλη για προγραμματισμό συστημάτων.προγραμματισμό συστημάτων.<</DL>/DL>

Λίστες ΟρισμούΛίστες Ορισμού [2][2]

Το προηγούμενο παράδειγμα θα εμφανίσει την Το προηγούμενο παράδειγμα θα εμφανίσει την παρακάτω διάταξηπαρακάτω διάταξη::

FortranFortran Γλώσσα προγραμματισμού κατάλληλη Γλώσσα προγραμματισμού κατάλληλη για επιστημονικούς υπολογισμούς.για επιστημονικούς υπολογισμούς.CC

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

Προκαθορισμένη (Προκαθορισμένη (defaultdefault) μορφή) μορφή

Η ετικέτα Η ετικέτα <PRE> …</PRE> <PRE> …</PRE> (preformatted)(preformatted)

χρησιμοποιείται για παρουσίαση κειμένου τύπου χρησιμοποιείται για παρουσίαση κειμένου τύπου "γραφομηχανής" (όπου τα "γραφομηχανής" (όπου τα tabstabs και τα κενά μετρούν) και τα κενά μετρούν) και το κείμενο διατηρεί την μορφή του. Πχκαι το κείμενο διατηρεί την μορφή του. Πχ::

<PRE>

PROGRAM FARCEL WRITE(*,*)'TEMPERATURE IN FAHRENHEIT ? ' READ(*,*) FAR CELCIU = (FAR-32)*5./9. WRITE(*,*) ' FAHRENHEIT', ' CELCIUS ' WRITE(*,*) FAR,CELCIU END</PRE>

Eτικέτες επεξεργασίας κειμένουEτικέτες επεξεργασίας κειμένου

� <<B> … </B>B> … </B> Έντονη (Έντονη (bold) bold) γραφή.γραφή.

� <I> … </I> <I> … </I> Πλάγια (Πλάγια (Italic) Italic) γραφή.γραφή.

� <<CODE>…</CODE>CODE>…</CODE> Γραφή γραφομηχανής.Γραφή γραφομηχανής.

� <<SUP> … </SUP>SUP> … </SUP> ΕΕκθέτης.κθέτης.

� <SUB> … </SUB><SUB> … </SUB> Δείκτης.Δείκτης.

� <U> … </U><U> … </U> Υπογράμμιση.Υπογράμμιση.

� <BIG> … </BIG><BIG> … </BIG> Αύξηση μεγέθους.Αύξηση μεγέθους.

� <SMALL>…</SMALL><SMALL>…</SMALL> Μείωση μεγέθουςΜείωση μεγέθους

ΠαραδείγματαΠαραδείγματα

Το νέο βιβλίο τουΤο νέο βιβλίο του <<B>B> B. JonesB. Jones </B></B> έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του B. Jones B. Jones έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του <<BIG>BIG> B. JonesB. Jones </BIG></BIG> έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του B. Jones B. Jones έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του <<I>I> B. JonesB. Jones </I></I> έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του B. JonesB. Jones έχει τίτλο …έχει τίτλο …

Το νέο βιβλίο τουΤο νέο βιβλίο του <<CODE>CODE> B. JonesB. Jones </CODE></CODE> έχει τίτλο …έχει τίτλο …


Το νέο βιβλίο τουΤο νέο βιβλίο του <<B><U>B><U> B. JonesB. Jones</U></U> </B></B> έχει τίτλο …έχει τίτλο …


Κεντράρισμα, αλλαγή γραμμήςΚεντράρισμα, αλλαγή γραμμής

<CENTER> … </ CENTER ><CENTER> … </ CENTER > Κεντράρει στην σελίδα Κεντράρει στην σελίδα

οτιδήποτε υπάρχει ανάμεσα.οτιδήποτε υπάρχει ανάμεσα.

<<BR>BR> Επιβάλλει αλλαγή γραμμήςΕπιβάλλει αλλαγή γραμμής

<HR><HR> Τοποθετεί μια οριζόντια γραμμήΤοποθετεί μια οριζόντια γραμμή

Έχει παραμέτρουςΈχει παραμέτρους

<<HR SIZE= HR SIZE= αριθμός>αριθμός> Καθορίζει το πάχοςΚαθορίζει το πάχος

<<HR WIDTH= HR WIDTH= αριθμός ή %>αριθμός ή %> Καθορίζει το πλάτος απόλυτa Καθορίζει το πλάτος απόλυτa ή σε ποσοστό της σελίδαςή σε ποσοστό της σελίδας..

<<HR ALIGN= HR ALIGN= LEFT >LEFT > Καθορίζει την θέση της γραμμήςΚαθορίζει την θέση της γραμμής

ή =ή = CENT CENTER ER ή = ή = RIGHTRIGHT (αριστερά, κέντρο ή δεξιά) (αριστερά, κέντρο ή δεξιά)

<<HRHR NOSHADE>NOSHADE> Μη σκιασμένη γραμμή.Μη σκιασμένη γραμμή.

Εικόνες στην Εικόνες στην HTMLHTML

Η Η HTML HTML υποστηρίζει δύο ειδών αρχεία εικόνων υποστηρίζει δύο ειδών αρχεία εικόνων GIFGIFJPEGJPEG

� Όλοι οι ψηφιακοί σαρωτές (Όλοι οι ψηφιακοί σαρωτές (scanners),scanners), υποστηρίζουν τουλάχιστον μία από τις δύο μορφές.υποστηρίζουν τουλάχιστον μία από τις δύο μορφές.

� Yπάρχουν προγράμματα που μετασχηματίζουν Yπάρχουν προγράμματα που μετασχηματίζουν άλλες μορφές σε άλλες μορφές σε gifgif ή ή jpeg jpeg..

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

H ετικέτα <IMG>H ετικέτα <IMG>

Για ένθεση εικόνας που περιέχεται στο αρχείο πχ. Για ένθεση εικόνας που περιέχεται στο αρχείο πχ. globe.gifglobe.gif χρησιμοποιείται η ετικέτα χρησιμοποιείται η ετικέτα <IMG><IMG>:: <IMG SRC = "<IMG SRC = "globe.gifglobe.gif">">

Για αλλαγή του μεγέθους της εικόνας γίνεται χρήση των Για αλλαγή του μεγέθους της εικόνας γίνεται χρήση των παραμέτρωνπαραμέτρων WIDTHWIDTH και και HEIGHTHEIGHT:: <IMG SRC = "<IMG SRC = "globe.gifglobe.gif" " WIDTHWIDTH = = 200200, , HEIGHTHEIGHT = = 100100>>

Η εικόνα θα έχει πλάτος 200 και ύψος 100 Η εικόνα θα έχει πλάτος 200 και ύψος 100 pixels. pixels. <IMG SRC = "<IMG SRC = "globe.gifglobe.gif" " WIDTHWIDTH = = 50%50%, , HEIGHTHEIGHT = = 60%60%>>

Η εικόνα θα έχει πλάτος το 50% και ύψος το 60% των Η εικόνα θα έχει πλάτος το 50% και ύψος το 60% των αντίστοιχων διαστάσεων της σελίδας.αντίστοιχων διαστάσεων της σελίδας.

Eάν καθορισθεί μόνο μία εκ των δύο παραμέτρων, η άλλη Eάν καθορισθεί μόνο μία εκ των δύο παραμέτρων, η άλλη υπολογίζεται αυτόματα για ισότροπη αλλαγή.υπολογίζεται αυτόματα για ισότροπη αλλαγή.

Εικόνες – Σύνδεσμοι Εικόνες – Σύνδεσμοι

Για να χρησιμοποιηθεί η εικόνα του Για να χρησιμοποιηθεί η εικόνα του αρχείου αρχείου univ.gifuniv.gif ως σύνδεσμος για την ως σύνδεσμος για την διεύθυνση διεύθυνση www.uoi.gr www.uoi.gr γράφουμε γράφουμε::

<A HREF="<A HREF="http://www.uoi.grhttp://www.uoi.gr">"> <IMG SRC="<IMG SRC="univ.gifuniv.gif "> </A>"> </A>

Κείμενο δίπλα σε εικόνα ευθυγραμμίζεται αυτόματα με το κάτω μέρος της, εκτός εάν καθοριστεί αλλοιώς με την παράμετρο ALIGN= (top, middle,bottom).

<IMG SRC="univ.gif " ALIGN= TOP> Κείμενο ...

Φόντο σελίδαςΦόντο σελίδας

<BODY BACKGROUND = "<BODY BACKGROUND = "stone.gifstone.gif"> "> …… </ </BODY>BODY>

Το φόντο της σελίδος καθορίζεται από την εικόνα Το φόντο της σελίδος καθορίζεται από την εικόνα του αρχείου: του αρχείου: stone.gifstone.gif <BODY BGCOLOR="<BODY BGCOLOR="colorcolor"> "> …… </ </BODY>BODY>

Καθορίζει το χρώμα του φόντου.Καθορίζει το χρώμα του φόντου.

color = #color = #RRRRGGGGBBBB όπου όπου RRRR, , GGGG, , BBBB διψήφιοι διψήφιοι δεκαεξαδικοί αριθμοί για τις εντάσεις των δεκαεξαδικοί αριθμοί για τις εντάσεις των χρωμάτων χρωμάτων RR,,GG,,BB ( (ΚόκκινοΚόκκινο, , ΠράσινοΠράσινο, , ΜπλεΜπλε). ).

Τα ψηφία του δεκαεξαδικού είναι:Τα ψηφία του δεκαεξαδικού είναι: 0123456789ABCDEF0123456789ABCDEF

Πχ Πχ : : <body bgcolor="#FF0000"> <body bgcolor="#FF0000"> κάνει το φόντοκάνει το φόντο της σελίδας της σελίδας κόκκινοκόκκινο..

Επιπλέον εντολές Επιπλέον εντολές

<font color="#rrggbb"> ... </font><font color="#rrggbb"> ... </font> Καθορίζει το χρώμα των χαρακτήρων Καθορίζει το χρώμα των χαρακτήρων

του ενδιάμεσου κειμένουτου ενδιάμεσου κειμένου <font size= J > … </font><font size= J > … </font> όπου εάν J = 1,2,…,7 καθορίζει το όπου εάν J = 1,2,…,7 καθορίζει το

μέγεθος των χαρακτήρων, και μέγεθος των χαρακτήρων, και εάν J=+3, x=-2 … (με πρόσημο) την εάν J=+3, x=-2 … (με πρόσημο) την

σχετική τους διαφορά από το τρέχον σχετική τους διαφορά από το τρέχον μέγεθος. μέγεθος.

Ετικέτα Ετικέτα BASEFONT BASEFONT

<basefont size =J color = "#rrggbb" ><basefont size =J color = "#rrggbb" >

J = 1,2,…,7J = 1,2,…,7

Καθορίζει το προεπιλεγμένο (Καθορίζει το προεπιλεγμένο (defaultdefault) ) μέγεθος και χρώμα των χαρακτήρων για μέγεθος και χρώμα των χαρακτήρων για όλη την σελίδα. όλη την σελίδα.

Εισάγεται στο Εισάγεται στο <HEAD> … </HEAD><HEAD> … </HEAD> μέρος της σελίδας.μέρος της σελίδας.

ΠίνακεςΠίνακες ( (TablesTables))

<TABLE><CAPTION>The Bradys</CAPTION>

<TR><TD> Marcia </TD><TD> Carol </TD><TD> Greg </TD></TR>

<TR><TD> Jan </TD><TD> Alice </TD><TD> Peter </TD></TR>

<TR><TD> Cindy </TD><TD> Mike </TD><TD>Bobby </TD></TR>

</TABLE>

The Bradys Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby

ΕπεξηγήσειςΕπεξηγήσεις

<TABLE><TABLE> Ξεκινά τον σχηματισμό ενός πίνακαΞεκινά τον σχηματισμό ενός πίνακα

</TABLE> </TABLE> Σηματοδοτεί το τέλος του πίνακαΣηματοδοτεί το τέλος του πίνακα

<CAPTION> <CAPTION> Τοποθετεί μια λεζάντα από πάνωΤοποθετεί μια λεζάντα από πάνω

</CAPTION></CAPTION> Σηματοδοτεί το τέλος της λεζάνταςΣηματοδοτεί το τέλος της λεζάντας

<TR> <TR> Ξεκινά τον σχηματισμό μιας σειράςΞεκινά τον σχηματισμό μιας σειράς

</TR></TR> Σηματοδοτεί το τέλος της σειράςΣηματοδοτεί το τέλος της σειράς

<TD><TD> Ξεκινά τον σχηματισμό ενός κελιούΞεκινά τον σχηματισμό ενός κελιού

</TD> </TD> Σηματοδοτεί το τέλος του κελιούΣηματοδοτεί το τέλος του κελιού

<TH>...</ΤΗ> <TH>...</ΤΗ> Όπως και το <Όπως και το <TD> TD> έντονο και κέντροέντονο και κέντρο

Table Row

Table Data

<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>

<TR><TD ALIGN = "center"> Gwen </TD><TD ALIGN = "center"> Skippy </TD><TD ALIGN = "center"> Alvin </TD></TR>

<TR><TD ALIGN = "center"> Harry </TD><TD ALIGN = "center"> Melvin </TD><TD ALIGN = "center"> Joe </TD></TR>

</TABLE>

The Bradys

Agnes

Gwen

Harry

Wilma

Skippy Alvin

George

Melvin Joe


<TABLE <TABLE BORDER="3"BORDER="3" CELLSPACING="1"CELLSPACING="1" CELLPADDING="1"CELLPADDING="1">>

BORDER="3" BORDER="3" Κανονίζει το πάχος του περιγράμματοςΚανονίζει το πάχος του περιγράμματος CELLSPACING="1"CELLSPACING="1" Κανονίζει το πάχος του περιγράμματος του κελιούΚανονίζει το πάχος του περιγράμματος του κελιού CELLPADDING="1"CELLPADDING="1">> Κανονίζει το περιθώριο μέσα στο κελίΚανονίζει το περιθώριο μέσα στο κελί

<TD ALIGN = "center"> Agnes </TD>

Κανονίζει την θέση του κειμένου στο κελί.

Δυνατές τιμές: "left", "center", "right"

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

PartialPartial SubtotalsSubtotals

1999-2000

Tax2001

TOTAL

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

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

EΙΚΟΝΕΣ σε ΠΙΝΑΚΕΣ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="photos\dgp.jpg",HEIGHT=200> </td><td> <IMG src="photos\arly.jpg", HEIGHT=200> </td></tr> <tr align=center><td><IMG src="photos\nikolop04.jpg" height=200></td><td><IMG src="photos\support.jpg" height=200></td></tr> </table> </body> </html>

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

του αρχείου αυτού παρουσίασης περί HTMLτου αρχείου αυτού παρουσίασης περί HTML

ΠλαίσιαΠλαίσια (frames)(frames)

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

παραθύρωνπαραθύρων

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

Νέα παράμετρος της ετικέτας <Α>Νέα παράμετρος της ετικέτας <Α> TARGETTARGET = " = "όνομα νέου παραθύρου"όνομα νέου παραθύρου"

ΠαράδειγμαΠαράδειγμα<<A HREF="grades.html" A HREF="grades.html" TARGETTARGET="new"="new">>ΒΑΘΜΟΙ</Α>ΒΑΘΜΟΙ</Α>

Ανοίγει ένα νέο παράθυρο με το όνομα Ανοίγει ένα νέο παράθυρο με το όνομα newnew,, χωρίς να κλείσει το τρέχον. χωρίς να κλείσει το τρέχον.

Η παρουσίαση της σελίδας Η παρουσίαση της σελίδας HREF="grades.html"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>

<html><head></head><body><UL> <li>Math 19 <li>Phys 18 <li>Comp 16 <li>Lite 19</UL></body></html>

ΑΡΧΕΙΟ grades.htmlΗ πρώτη σελίδα εμφανίζεται ως:

HI there

You can see your grades here

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

HI there

You can see your grades here

Η ετικέτα Η ετικέτα BASEBASE

<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>

ΑρχείοMathematics Professor: C. F.GaussPhysics Professor: A. EinsteinComp. Science Professor: A. TuringLiterature Professor: S. Bellow

Περιεχόμεναmath.txtphys.txtcomp.txtlite.txt

Ετικέτες: Ετικέτες: FRAMESET & FRAMESET & FRAMEFRAME

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

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

FRAMESETFRAMESET

Συντάσσεται με μία εκ των δύο παραμέτρων

� COLS = "εύρος στήλης1, εύρος στήλης2,…"

� ROWS = "ύψος σειράς1, ύψος σειράς2,…"

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

<frameset COLS="110,30%,*"> …</frameset>

Η παραπάνω σύνταξη έχει ως αποτέλεσμα το χώρισμα μιας σελίδας σε τρεις στήλες . Η πρώτη έχει εύρος 110 pixels, η δεύτερη έχει εύρος ίσον προς το 30% της σελίδας, και η τρίτη προσαρμόζεται στο εναπομένον εύρος.

110 270 520

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

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

• Η πρώτη έχει ύψος 110 pixels,

• Η δεύτερη έχει ύψος ίσον προς το 30% της σελίδας, και

• Η τρίτη προσαρμόζεται στο εναπομένον ύψος.

110 2 70 5 20

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

ΣΗΜΑΝΤΙΚΟΣΗΜΑΝΤΙΚΟ

Τα παράθυρα αυτά μπορούν να έχουν ονόματα.

FRAMEFRAME

Για κάθε στήλη (ή σειρά) πρέπει να υπάρχει μια ετικέτα τύπου 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><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>

grades.html

<html> <head> <frameset cols="30%,*"> <frame src="grades.html"> <frame name="new"></frameset></head></html>

• Math 19

• Phys 18

• Comp 16

• Lite 19

• Math 19

• Phys 18

• Comp 16

• Lite 19

Mathematics Professor: C. F.Gauss

• Math 19

• Phys 18

• Comp 16

• Lite 19

Physics Professor: A. Einstein

• Math 19

• Phys 18

• Comp 16

• Lite 19

Comp. Science Professor: A. Turing

• Math 19

• Phys 18

• Comp 16

• Lite 19

Literature Professor: S. Bellow

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

<<FRAME FRAME SROLLINGSROLLING = = optionoption>>

optionoption = = AUTOAUTO, , NONO, YES, YES <<FRAME FRAME NORESIZENORESIZE>> Απαγορεύει την μεταβολή της διαμέρισης από το χρήστηΑπαγορεύει την μεταβολή της διαμέρισης από το χρήστη

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

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

Τοποθετούνται μεταξύ Τοποθετούνται μεταξύ <HEAD>…</HEAD><HEAD>…</HEAD>

Πληροφορούν τις "Πληροφορούν τις "Μηχανές ΑναζήτησηςΜηχανές Αναζήτησης" " (MA)(MA)

Οι ΜΑ ψάχνουν συνέχεια στον Ιστό και δημιουργούν Οι ΜΑ ψάχνουν συνέχεια στον Ιστό και δημιουργούν βάσεις δεδομένων που συνδέουν τις σελίδες με θεματικά βάσεις δεδομένων που συνδέουν τις σελίδες με θεματικά αντικείμενα, λέξεις κλειδιά, ονόματα συγγραφέων κλπαντικείμενα, λέξεις κλειδιά, ονόματα συγγραφέων κλπ

Δίνουν εντολές στον Δίνουν εντολές στον BrowserBrowser

Υπάρχει ένα περιορισμένο σύνολο εντολών που γίνεται Υπάρχει ένα περιορισμένο σύνολο εντολών που γίνεται δεκτό μέσω των <ΜΕΤΑ> ετικετώνδεκτό μέσω των <ΜΕΤΑ> ετικετών..

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

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

XXXXXX παίρνει διάφορες τιμές όπως:παίρνει διάφορες τιμές όπως:

description description keywords keywords generator generator

copyrightcopyright expires expires authorauthor

YYY YYY είναι κείμενοείναι κείμενο


<META <META NAME="description"NAME="description" CONTENT="Graphics"CONTENT="Graphics">>

�� Περιγράφει τα περιεχόμενα της σελίδαςΠεριγράφει τα περιεχόμενα της σελίδας ��

<META <META NAME="keywords"NAME="keywords" CONTENT="Paint,Brush"CONTENT="Paint,Brush">>

�� Καθορίζει σχετικές λέξεις "κλειδιά" Καθορίζει σχετικές λέξεις "κλειδιά" ��

<META <META NAME="generator"NAME="generator" CONTENT="NotePad"CONTENT="NotePad">>

�� Πληροφορεί για τον κατασκευαστή της σελίδας Πληροφορεί για τον κατασκευαστή της σελίδας ��


<META <META NAME="copyright"NAME="copyright" CONTENT="IBM©2000"CONTENT="IBM©2000">>

�� Πληροφορεί για το copyriΠληροφορεί για το copyrigght της σελίδας ht της σελίδας ��<META <META NAME="expires"NAME="expires" CONTENT="11 May 2000"CONTENT="11 May 2000">>

�� Ημερομηνία διαγραφής από την βάση των Ημερομηνία διαγραφής από την βάση των μηχανών αναζήτησης μηχανών αναζήτησης ��

<META <META NAME="author"NAME="author" CONTENT="Homer"CONTENT="Homer">>

�� Πληροφορεί για το συγγραφέα της σελίδας Πληροφορεί για το συγγραφέα της σελίδας ��

<META <META HTTP-EQUIVHTTP-EQUIV="XX" ="XX" CONTENTCONTENT="YY">="YY">

Με ΧΧ και με αντίστοιχο ΥΥΜε ΧΧ και με αντίστοιχο ΥΥ

expiresexpires Wed, 26 Feb 1977 08:21:37 GMTWed, 26 Feb 1977 08:21:37 GMT

pragmapragma no-cacheno-cache

refresh refresh 2; URL= http://www.cs.uoi.gr/2; URL= http://www.cs.uoi.gr/

set-cookieset-cookie cookievalue=2; path=/cookievalue=2; path=/

window-targetwindow-target _top_top

content-typecontent-type text/html; text/html; charsetcharset=iso-8859-7=iso-8859-7

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


<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 <META HTTP-EQUIVHTTP-EQUIV="="window-targetwindow-target" " CONTENTCONTENT="="_top_top">">Φέρνει την σελίδα σε πρώτο πλάνο. Εάν πχ υπάρχουν Φέρνει την σελίδα σε πρώτο πλάνο. Εάν πχ υπάρχουν framesframes η σελίδα "απελευθερώνεται" και καταλαμβάνει όλο η σελίδα "απελευθερώνεται" και καταλαμβάνει όλο το παράθυρο.το παράθυρο.

<META <META HTTP-EQUIVHTTP-EQUIV="="content-typecontent-type" " CONTENTCONTENT="="text/html; text/html; charsetcharset=iso-8859-7=iso-8859-7 ">">Πληροφορεί τον Πληροφορεί τον BrowserBrowser για το σύνολο χαρακτήρων για το σύνολο χαρακτήρων

ΚίνησηΚίνηση

<META HTTP-EQUIV="refresh" CONTENT="1; URL= file2.html ">

Στο αρχείο file1.html, υπάρχει η ετικέτα:

Στο αρχείο file2.html, υπάρχει η ετικέτα:

<META HTTP-EQUIV="refresh" CONTENT="1; URL= file3.html ">

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

Ενέργειες . . .Ενέργειες . . .

Δημιουργούμε το σύνολο των σελίδων και τις Δημιουργούμε το σύνολο των σελίδων και τις τοποθετούμε σε ένα κατάλογο έστω με το όνομα τοποθετούμε σε ένα κατάλογο έστω με το όνομα presentpresent

Το αρχείο της κεντρικής σελίδας πρέπει να Το αρχείο της κεντρικής σελίδας πρέπει να ονομαστεί: ονομαστεί: index.htmlindex.html ή ή index.htmindex.htm

Σε κάποιο Η/Υ του τμήματος με Σε κάποιο Η/Υ του τμήματος με SolarisSolaris λειτουργικό δημιουργούμε έναν κατάλογολειτουργικό δημιουργούμε έναν κατάλογο: : public_htmlpublic_html με δικαιώματα 755με δικαιώματα 755

Μεταφέρουμε τον κατάλογο Μεταφέρουμε τον κατάλογο presentpresent εντός εντός του του public_htmlpublic_html

Όλα τα σχετικά αρχεία και οι κατάλογοι Όλα τα σχετικά αρχεία και οι κατάλογοι πρέπει να έχουν δικαιώματα 755πρέπει να έχουν δικαιώματα 755

Εάν το Εάν το loginlogin όνομα του χρήστη είναι: όνομα του χρήστη είναι: csst0188csst0188, , τότε η διεύθυνση της αρχικής τότε η διεύθυνση της αρχικής σελίδας για την εν λόγω παρουσίαση είναι:σελίδας για την εν λόγω παρουσίαση είναι: www.cs.uoi.gr/~csst0188/present/www.cs.uoi.gr/~csst0188/present/

Ενέργειες . . .Ενέργειες . . .

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

Ποιόν σκοπό εξυπηρετούν ?Ποιόν σκοπό εξυπηρετούν ?

� Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με ένα συνεπή, εύκολο και ολοκληρωμένο τρόπο.

� Διευκολύνουν το συγγραφικό έργο.

� Συντελούν στην συστηματική τήρηση κανόνων αισθητικής ομοιομορφίας.

ΥποστήριξηΥποστήριξη

Netscape Navigator 4.0Netscape Navigator 4.0 Microsoft Internet Explorer 4.0Microsoft Internet Explorer 4.0 Emacs Emacs ArenaArena AmayaAmaya

. . . και συνεχώς η λίστα αυξάνει. . . και συνεχώς η λίστα αυξάνει ..

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

<HEAD> <TITLE> CSS Example </TITLE><HEAD> <TITLE> CSS Example </TITLE>

<STYLE TYPE="text/css"><STYLE TYPE="text/css">

H1H1 {{font-size: font-size: 32pt;32pt; color: color: red}red}

H2H2 { {font-size:font-size: 24pt;24pt; color:color: blueblue}}

</STYLE></STYLE>

</HEAD></HEAD>

Η ετικέτα <STYLE> … </STYLE>Τοποθετείται μεταξύ <head> … </head>


� Η ετικέτα <STYLE> επιτρέπει την διαμόρφωση των παραμέτρων των ετικετών της HTML.

� H1 {font-size: 32pt; color: red}

Καθορίζει ότι η ετικέτα <Η1> θα χρησιμοποιεί γραμματοσειρά μεγέθους 32 στιγμών και χρώματος κόκκινου.

� H2 {font-size: 24pt; color: blue}

Αντίστοιχα για την ετικέτα <Η2>

Στυλιστική ΣύνταξηΣτυλιστική Σύνταξη

TAGTAG { {Ιδιότητα_1: Ιδιότητα_1: τιμήτιμή; ; Ιδιότητα_2: Ιδιότητα_2: τιμήτιμή; …; … } }

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

� Η1

� BODY

� P

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

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

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

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

� Το χρώμα της γραμματοσειράς κόκκινο.

� Το μέγεθος της γραμματοσειράς 18 στιγμών.

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

Είναι δυνατόν να δημιουργήσουμε διάφορες Είναι δυνατόν να δημιουργήσουμε διάφορες κατηγορίες διαμόρφωσης για την ίδια ετικέτα. κατηγορίες διαμόρφωσης για την ίδια ετικέτα.

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

ΠαράδειγμαΠαράδειγμα::

H1H1..normnorm { color: #0000FF; font-size: 24pt } { color: #0000FF; font-size: 24pt }

H1H1..enhenh { color: #FF2288; font-size: 32pt } { color: #FF2288; font-size: 32pt }

ClassesClasses

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

� norm � enh

Θα μπορούν δε να χρησιμοποιούνται ως εξής:

<H1 class = norm> Εισαγωγή </H1>

<H1 class = enh > ΚΕΦΑΛΑΙΟ VI </H1>

Ηκαι η

Οι κατηγορίες μπορούν να ορίζονται Οι κατηγορίες μπορούν να ορίζονται και ξεχωριστά , χωρίς την παρουσία και ξεχωριστά , χωρίς την παρουσία κάποιας ετικέτας κάποιας ετικέτας HTML. HTML. Πχ:Πχ:

.norm.norm { color: #0000FF; font-size: 24pt } { color: #0000FF; font-size: 24pt }

..enhenh { color: #FF2288; font-size: 32pt } { color: #FF2288; font-size: 32pt }

Θα μπορούν δε να χρησιμοποιούνται ως εξής:

<H1 class = norm> Εισαγωγή </H1>

<P class = enh > ΚΕΦΑΛΑΙΟ VI </P>

Ένας Ένας εναλλακτικόςεναλλακτικός τρόπος για τον τρόπος για τον καθορισμό του στυλ είναι ο καθορισμό του στυλ είναι ο IDID επιλογέας επιλογέας ((ID selectorID selector).).� #pib#pib {color: black; font-size: 40pt }{color: black; font-size: 40pt }

Χρησιμοποιείται δε ως:Χρησιμοποιείται δε ως:� <h1 <h1 id=pibid=pib > Εισαγωγή </h1> > Εισαγωγή </h1>� <<pp id=pibid=pib > Εισαγωγή </p> > Εισαγωγή </p>

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

Ετικέτες σε συνάφειαΕτικέτες σε συνάφειαContextual selectorsContextual 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 speciallyIsn't it great ?INDEED !!!

ΕμφάνισηΕμφάνιση

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

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

font-family:sans-serif}font-family:sans-serif}

GroupingGrouping

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

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

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

μικρότεροιμικρότεροι

Pseudo-classesPseudo-classes

Anchor pseudo-classesAnchor pseudo-classes

Πρώτη Γραμμή - Πρώτο γράμμαΠρώτη Γραμμή - Πρώτο γράμμα

Οι δηλώσεις:Οι δηλώσεις: P:first-line {font-variant: small-caps;P:first-line {font-variant: small-caps;

font-weight: bold}font-weight: bold} P:first-letter {font-size: 300% ; float: left}P:first-letter {font-size: 300% ; float: left}

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

ΙδιότητεςΙδιότητες

FontFont Color & BackgroundColor & Background TextText BoxBox

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

FONTFONT

Font-FamilyFont-Family Font-StyleFont-Style Font-VariantFont-Variant Font-WeightFont-Weight Font-SizeFont-Size FontFont

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-StyleFont-Style

Font-Style: XXXFont-Style: XXX

ΌπουΌπου: : XXX μπορεί να είναι:XXX μπορεί να είναι: normalnormal italicitalic obliqueoblique

H1 { font-style: oblique }H1 { font-style: oblique }

P { font-style: normal }P { font-style: normal }

Font-VariantFont-Variant

Font-Variant: XXXFont-Variant: XXX

ΌπουΌπου: : XXX μπορεί να είναι:XXX μπορεί να είναι: normalnormal small-capssmall-caps

H1 { font-variant:small-caps }H1 { font-variant:small-caps }

Font-WeightFont-Weight

Font-Weight: XXXFont-Weight: XXX

ΌπουΌπου: : XXX μπορεί να είναι:XXX μπορεί να είναι: normalnormal bold bolder lighterbold bolder lighter 100 200 … 900100 200 … 900

H1 { font-weight: 800 }H1 { font-weight: 800 }

P { font-weight: 300 }P { font-weight: 300 }

Font-SizeFont-Size

Font-Size: XXXFont-Size: XXX

ΌπουΌπου: : XXX μπορεί να είναι:XXX μπορεί να είναι: xx-small x-small small medium large x- xx-small x-small small medium large x-

large xx-largelarge xx-large larger smallerlarger smaller Aριθμός σε Aριθμός σε pt pt ή ή in (points/inches)in (points/inches) Αριθμός σε %Αριθμός σε %

P { font-P { font-sizesize: 90% }: 90% }

FontFont Font: XXXFont: XXX

ΌπουΌπου: : XXX μπορεί να είναι:XXX μπορεί να είναι: font-style font-variant font-weightfont-style font-variant font-weight font-size/line-heightfont-size/line-height

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

Επιπλέον ...Επιπλέον ...

Περαιτέρω πληροφορίες και περιγραφή μπορεί να Περαιτέρω πληροφορίες και περιγραφή μπορεί να αναζητηθούν στο αναζητηθούν στο Word Wide WebWord Wide Web (WWW). (WWW).

Ορισμένες χρήσιμες διευθύνσεις είναι:Ορισμένες χρήσιμες διευθύνσεις είναι:

http://www.w3.org/http://www.w3.org/http://netspace.students.brown.edu/users/dwb/www-authoring.htmlhttp://netspace.students.brown.edu/users/dwb/www-authoring.htmlhttp://www.wnetc.com/technical/html.htmlhttp://www.wnetc.com/technical/html.htmlhttp://oneworld.wa.com/htmldev/devpage/dev-page1.htmlhttp://oneworld.wa.com/htmldev/devpage/dev-page1.html

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

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

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

http://homepages.pathfinder.gr/bmichal/

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

Education

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