Προγραμματιστικά εργαλεία Διαδικτύου

Παρουσίαση με θέμα: "Προγραμματιστικά εργαλεία Διαδικτύου"— Μεταγράφημα παρουσίασης:

1 Προγραμματιστικά εργαλεία Διαδικτύου

2 Υπηρεσίες του Διαδικτύου
Οι διάφορες υπηρεσίες Διαδικτύου (Internet): , ftp κτλ. Η πιο σημαντική είναι ο Ιστός (www) με κύριο χαρακτηριστικό την χρήση των υπερσυνδέσμων (υπερκειμένων, υπερμέσων) για την οργάνωση των πληροφοριών και την επικοινωνία. Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου), που περιλαμβάνει το κείμενο της σελίδας, τη δομή της και τους συνδέσμους προς άλλα έγγραφα, εικόνες ή άλλα μέσα.

3 Η δομή του Ιστού σελ. 50 Απαιτείται η εγκατάσταση λογισμικού server (web server) Η πληροφορία αποθηκεύεται σε σελίδες (web pages) Ποικίλες μορφές ύπαρξης της πληροφορίας, όπως κείμενο, εικόνα, ήχος, βίντεο. Μοναδική διεύθυνση σελίδας (URL) για εντοπισμό της σελίδας. Το URL αποτελείται από τρία μέρη: Πρωτόκολλο Διεύθυνση server Εσωτερικό όνομα αρχείου (κατάλογος, όνομα). Το σύνολο των σελίδων καλείται (web site) Υπάρχει μια κεντρική σελίδα (home page). H κατάληξη των σελίδων-αρχείων είναι htm.

4 Ανάπτυξη ιστοσελίδων Η λογική του Ιστού είναι client-server:(browser-web server). Ανάπτυξη σελίδων με χρήση της γλώσσας σήμανσης HTML (απλή γλώσσα). Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλ. Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, όπως και οι μεταγενέστερες XML, NewsML, VRML κ.τ.λ. Η HTML ορίζει ένα σύνολο κοινών στυλ για τις Web σελίδες, όπως τίτλοι (titles), επικεφαλίδες (headings), παράγραφοι (paragraphs), λίστες (lists) και πίνακες (tables). Ορίζει επίσης στυλ χαρακτήρων, όπως η έντονη γραφή (boldface) και οι ενότητες κώδικα. Κάνει χρήση των tags-ετικετών που περικλείουν οποιεσδήποτε πληροφορίες (κείμενο, εικόνα).

5 Γενικά στοιχεία Στις ιστοσελίδες (html) συνυπάρχουν δύο πράγματα: δομή και εμφάνιση άρρηκτα συνδεδεμένα μεταξύ τους. Για να δούμε τις πληροφορίες μιας σελίδας πρέπει να έχουμε ένα φυλλομετρητή (web broswer). Ο φυλλομετρητής κάνει πληθώρα εργασιών μέχρι να εμφανίσει τη σελίδα που θέλουμε (αίτημα http με πληροφορίες εμφάνισης-λήψη από server-συγκέντρωση απαιτούμενων πληροφοριών από τη βάση δεδομένων του –αποστολή - λήψη από browser – κατάλληλη εμφάνιση αποτελέσματος). Όταν διαβάζουμε μια σελίδα γραμμένη με την HTML σ’ έναν φυλλομετρητή, ο φυλλομετρητής διαβάζει (διερμηνεύει) τα tags της HTML και μορφοποιεί το κείμενο και τις εικόνες στην οθόνη.

6 Πλεονεκτήματα - Μειονεκτήματα
Πλεονεκτήματα : Εμφάνιση πληροφοριών Εύρεση πληροφοριών. Μειονεκτήματα : Το URL ως ενδεικτικό της τοποθεσίας της σελίδας-πληροφορίας δεν είναι το καλύτερο κυρίως για πολύ σημαντικά πράγματα, όπως επιστημονικά δεδομένα που οι αναφορές προς αυτά πρέπει να παραμένουν σταθερές (καλύτερο προσδιοριστικό το DOI και το PURL). Η εξάρτηση – σύνδεση μεταξύ μορφής εμφάνισης και της ίδιας της πληροφορίας μας περιορίζει καμιά φορά να παραλάβουμε - δούμε την πληροφορία (πχ διαφορά μεταξύ του πρωτοκόλλου wap ενός κινητού και web ενός Η/Υ. Επίσης δεν μπορείς να βρεις την χρήσιμη πληροφορία Είναι καλύτερα η εμφάνιση να μην πλέκεται με την πληροφορία.

7 Μηχανές Αναζήτησης Ιστού
(σελ. 74) Αναζήτηση με λέξεις κλειδιά: εύρεση ζητούμενων λέξεων λέξεις μέσα σε ένα κείμενο. Καλύτερη λύση αποτελούν τα μεταδεδομένα που πρέπει να συνοδεύουν μια σελίδα, ακόμα και σε HTML μορφή, ώστε να έχουμε καλύτερη ανάκτηση πληροφοριών. Αναζήτηση-ανάκτηση (search-retrieval) και κατάταξη (ranking) των σελίδων (χρήση διανυσμάτων για τη σχετικότητα μιας σελίδας). Απαιτείται μια πιο σημασιολογική δομή των ιστοσελίδων πλέον. Τα tags πλέον περιέχουν σημασία και όχι οδηγίες εμφάνισης (πχ στην XML). Χρήση φίλτρων για τους κανόνες εμφάνισης των πληροφοριών στον φυλλομετρητή.

8 Δομικά στοιχεία μιας σελίδας
(σελ.80) Κείμενα Πίνακες Πλαίσια (πλέον τα αποφεύγουν) Γραφικά: bmp, tif, gif διανυσματικά cdr Υπόβαθρο (φόντο) Εικόνες σε ειδικό παράθυρο εκτός σελίδας (flash) Κινούμενες εικόνες Γραφικοί τίτλοι κειμένων Υπερσύνδεσμοι Χάρτης υπερσυνδέσμων (site map) Μουσική και ήχοι Video Αλληλεπίδραση με τις εφαρμογές (κυρίως java) Τρισδιάστατα γραφικά και VRML.

9 Η HTML Γλώσσα Είναι δηλωτική της εμφάνισης
Δεν εκτελεί υπολογισμούς όπως πχ. Pascal, C κτλ. Δεν υποστηρίζει δομές δεδομένων (είσοδος, έξοδος) ούτε τις βασικές δομές προγραμματισμού (επανάληψη, ακολουθία, έλεγχος). Περιγράφει τη μορφή με την οποία θα εμφανιστούν οι πληροφορίες που περιέχονται σε μια σελίδα. Εργαλεία ανάπτυξης ιστοσελίδων: Διαθέσιμα δωρεάν και μη δωρεάν εργαλεία Δυνατότητα για γραφικό σχεδιασμό ή σύνταξη κώδικα Ακολουθία ή μη ενός οδηγού για εύκολη δημιουργία Χρήση κειμενογράφων (editors) πχ wordpad, ms word Εφαρμογές ανάπτυξης πχ. Hot Dog, Home Site, Front Page, Dreamweaver. On line εργαλεία δημιουργίας ιστοσελίδων (Builders).

10 Μορφή αρχείων HTML Όλες οι πληροφορίες περικλείονται από ετικέτες (tags) που υποδεικνύουν συνήθως πως αυτές θα εμφανιστούν. Η ετικέτα στην αρχή ενεργοποιεί μια λειτουργία πάνω στην πληροφορία που ακολουθεί και η ετικέτα τέλους την απενεργοποιεί. <Ετικέτα> Πληροφορία</Ετικέτα> ή <Ετικέτα1><Ετικέτα2>Πληροφορία</Ετικέτα2></Ετικέτα1> Τα κυριότερα tags ενός HTML αρχείου: <HTLM> <HEAD> <TITLE>Εδώ γράφεται ο τίτλος ολόκληρης της σελίδας </TITLE> </HEAD> <BODY> Εδώ ανάμεσα στις ετικέτες BODY γράφουμε το κείμενο που θέλουμε και τοποθετούμε τυχόν φωτογραφίες ή άλλα πολυμεσικά αρχεία. </BODY> </HTML>

11 Μορφή αρχείων HTML Κάθε HTML έγγραφο μπορεί να έχει στην αρχή του µία γραµµή που περιέχει την έκδοση της HTML που χρησιµοποιεί το τρέχον έγγραφο, για παράδειγµα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

12 Ετικέτες Μορφοποίησης κειμένου Μορφοποίησης γραμματοσειρών
Δημιουργίας καταλόγων Εισαγωγής πολυμέσων Δημιουργίας συνδέσμων Δημιουργίας πινάκων Χωρισμού της σελίδας σε παράθυρα Μεταδεδομένων Διαδραστικά παραδείγματα

13 Αλλαγή χρωμάτων Αλλαγή Χρώματος Φόντου. Προσθέτουμε την ιδιότητα BGCOLOR στο tag <BODY>, ως εξής: <BODY BGCOLOR="#FFFFFF"> ή δίνουμε απλά το όνομα του χρώματος στην ιδιότητα BGCOLOR, ως εξής : <BODY BGCOLOR=yellow> Φωτογραφία Φόντου. Προσθέτουμε την ιδιότητα BGCOLOR στο tag <BODY>, ως εξής: <BODY BACKGROUND="rainy_day_s_.jpg">. Αλλαγή Χρώματος σε όλο το κείμενο. Προσθέτουμε κάποια από τις παρακάτω ιδιότητες στο tag <BODY> TEXT για το χρώμα όλου του κυρίως κειμένου LINK για το χρώμα των συνδέσμωνVLINK για το χρώμα των συνδέσμων που έχουμε επισκεφθεί ALINK για το χρώμα του συνδέσμου πάνω στον οποίο έχουμε κάνει κλικ και οι οποίες παίρνουν τιμή παρόμοια με την BGCOLOR. Πχ <BODY BGCOLOR=black TEXT=white LINK=purple> Τροποποίηση γραμματοσειράς σε κείμενο επιλεκτικά. Χρησιμοποιούμε την εντολή FONTκαι τις ιδιότητες COLOR για αλλαγή χρώματος και FACE για αλλαγή του τύπου της γραμματοσειράς. πχ < FONT FACE =“ARIAL” COLOR=“RED”> ..κείμενο..</FONT>

14 Ετικέτες μορφοποίησης κειμένου και γραμματοσειρών
Οι ετικέτες μπορούν να έχουν ιδιότητες με συγκεκριμένες τιμές Η ετικέτα BR αλλάζει γραμμή και δεν θέλει </BR> τέλους

15 Ετικέτες μορφοποίησης κειμένου
Τα tags φυσικών στυλ της HTML είναι τα εξής : <B> κείμενο</Β>, για έντονη γραφή (Bold). <I>κείμενο </I>, για πλάγια γραφή (Italic). <U>κείμενο </U>, για υπογράμμιση. <S>κείμενο </S>, για διακριτή διαγραφή. <BIG>κείμενο </BIG>, για μεγαλύτερο μέγεθος από το περιβάλλον κείμενο. <SMALL>κείμενο </SMALL>, για μικρότερο μέγεθος από το περιβάλλον κείμενο. <SUB>γράμμα ή αριθμός </SUB>, δείκτης. <SUP>γράμμα ή αριθμός </SUP>, εκθέτης. Τα σχόλια σε έναν HTML κώδικα έχουν την εξής µορφή<!-- Αυτό είναι ένα σχόλιο -->

16 Ετικέτες μορφοποίησης κειμένου
Tags Επικεφαλίδων:6 επίπεδα (Η1-Η6), με την εξής μορφή : <H1> Η Ιστορία της Φλώρινας </H1> Tags παραγράφων: <Ρ> και </Ρ> ξεκίνημα παραγράφου σε νέα γραμμή (ακολουθεί πάντα τη BODY). Το </Ρ> τέλους είναι προαιρετικό. Το tag <PRE> και</PRE> εμφανίζει αυτούσιο ότι γράφουμε και με όποια μορφή αυτό έχει. Το tag <HR>, που δεν έχει tag τέλους, δημιουργεί στο σημείο εκείνο μια οριζόντια γραμμή (γραφικό) Το tag <BR> που δεν έχει αντίστοιχο tag τέλους, αλλάζει γραμμή στο σημείο που εμφανίζεται, καθώς στην HTML η αλλαγή γραμμής δεν γίνεται αυτόματα. Η ιδιότητα ALIGN. Μπορούμε να στοιχίσουμε οτιδήποτε οριζόντια αριστερά (ALIGN=LEFT), δεξιά (ALIGN=RIGHT) ή στο κέντρο (ALIGN=CENTER).

17

18 Ασκήσεις 1 & 2 Χρήση Frontpage, Internet Exlorer, notepad
Να γραφούν στο notepad οι βασικές εντολές της HTML. Στο Frontpage τοποθετούνται αυτόματα. Να δοθεί τίτλος Μορφοποίηση1.htm και Μορφοποίηση2.htm αντίστοιχα. Να προστεθεί μετά την εντολή BODY η ιδιότητα της BGCOLOR=“yellow” στο notepad και να επιλεγεί με δεξί κλίκ στο Frontpage(μόλις πατήσετε = διαλέξτε χρώμα. Να αποθηκεύσετε και ανοίξετε τα δύο αρχεία με Explorer. Παρόμοια να προστεθεί στη BODY και η ιδιότητα TEXT=“blue”. Να προστεθούν τουλάχιστον δύο γραμμές κείμενου, ώστε να είναι ορατά τα αποτελέσματα. Να αποθηκεύσετε και ανοίξετε τα δύο αρχεία με τον Explorer. Τι παρατηρείτε; Να τοποθετηθεί στο τέλος της κάθε γραμμής η ετικέτα <BR>. Να αποθηκεύσετε και ανοίξετε τα δύο αρχεία με Explorer. Τι παρατηρείτε; Να περικλείσετε το κείμενο μέσα στις ετικέτες <Β> και </Β>. Να περικλείσετε παρόμοια μόνο μια λέξη με την εντολή <Β> </Β>.

19 Ετικέτες καταλόγων - Λίστες

20 Οι Λίστες (Lists) Η HTML υποστηρίζει τα εξής πέντε είδη λιστών :
Αριθμημένες λίστες. Περικλείονται μέσα στα tags <OL> και </OL> και κάθε στοιχείο μέσα στη λίστα ξεκινά με το tag <LI>. Το <LI> δεν έχει tag τέλους. Χρησιμοποιούνται οι ιδιότητες TYPE και START πχ <OL TYPE=Α και STARΤ=Α > <LI>….. </OL> Λίστες κουκκίδων. Χρησιμοποιούν τα tags <UL> και </UL> και τα στοιχεία της λίστας διαχωρίζονται με το tag <LI>. Χρησιμοποιούνται οι ιδιότητες TYPE= circle, square, disk είτε καθολικά ορισμένα στην <UL>, είτε σε κάθε <LI>. Λίστες γλωσσαρίου, όπου κάθε στοιχείο της λίστας περιέχει έναν όρο και έναν ορισμό. Λίστες σε μορφή μενού, για ειδικές διατάξεις. Λίστες καταλόγου, για την παρουσίαση σύντομων στοιχείων.

21 Άσκηση 3 (Μορφοποίηση –Λίστες)
Να μορφοποιήσετε κατάλληλα το δοσμένο κείμενο ώστε να δημιουργηθεί η παρακάτω ιστοσελίδα.

22 Ειδικοί Χαρακτήρες και Σχόλια
Ορισµένοι χαρακτήρες είναι «δεσµευµένοι» από την HTML ως χαρακτήρες οριοθέτησης ή σήµανσης. Για την εισαγωγή τους στο περιεχόµενο ενός αρχείου HTML, γίνεται χρήση ενός συνδυασµού χαρακτήρων που ονοµάζονται οντότητες: Ο χαρακτήρας "<" εισάγεται µε χρήση της οντότητας < Ο χαρακτήρας ">" εισάγεται µε χρήση της οντότητας > Ο χαρακτήρας "&" εισάγεται µε χρήση της οντότητας & Ο χαρακτήρας "”" εισάγεται µε χρήση της οντότητας " Ο χαρακτήρας κενού (space) εισάγεται µε χρήση της οντότητας   Με αντίστοιχο τρόπο εισάγονται και χαρακτήρες που δεν περιλαµβάνονται στο πληκτρολόγιο. Π.χ. ο χαρακτήρας που αντιστοιχεί στο copyright (“©”) εισάγεται σαν © Για παράδειγµα το τµήµα του HTML κώδικα που ακολουθεί: <P> X>Y</P> θα απεικονίζεται σε ένα φυλλοµετρητή ως εξής: Χ>Υ

23 Άσκηση 4 Να δημιουργήσετε την παρούσα ιστοσελίδα με το όνομα «Άσκηση4 - Δομημένη Καλωδίωση στα Τοπικά δίκτυα». Ο τίτλος Arial H1. To κείμενο είναι Times New Roman.

24 Εισαγωγή κινούμενου κειμένου
Για να δημιουργήσουμε κινούμενο κείμενο, χρησιμοποιούμε το tag <MARQUEE> και το κείμενο που περιλαμβάνεται μεταξύ των tags αρχής και τέλους είναι αυτό που θα μετακινείται στην οθόνη Μπορούμε να καθορίσουμε το μέγεθος με τα γνωστά tags επικεφαλίδων, μορφοποίησης κτλ. πχ. <h3><MARQUEE> Επισκεφθείτε το Νυμφαίο</MARQUEE></h3> Αποδεκτές ιδιότητες Direction (down, up left, right) Bgcolor (χρώμα φόντου κειμένου) Behavior (scroll, slide, alternate)

25 Άσκηση 5 Την προηγούμενη άσκηση να την αποθηκεύσουμε με το όνομα «Άσκηση 5- Μαρκίζα» στην οποία στη συνέχεια θα προσθέσουμε τον τίτλο ως κινούμενο κείμενο. Στη συνέχεια να γίνουν οι εξής τροποποιήσεις: μέγεθος Η3 γραμματοσειρά Arial χρώματος κόκκινου.

26 Εισαγωγή εικόνας Οι ένθετες εικόνες (σε μορφή GIF ή JPEG), υποδεικνύονται με το tag <IMG> χωρίς tag τέλους, αλλά με πολλές ιδιότητες, με πιο σημαντική την SRC (source). Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε, γραμμένο μέσα σε εισαγωγικά (προσοχή στα κενά στην διεύθυνση που βρίσκεται η εικόνα). Το tag <IMG> πρέπει να τοποθετείται μέσα σ’ ένα στοιχείο παραγράφου ή επικεφαλίδας. πχ. <P> <IMG SRC="..\image.gif"> </P> Η ιδιότητα TITLE χρησιμοποιείται για να εμφανίζει ένα όνομα όταν περνάμε το ποντίκι μας πάνω από τη φωτογραφία. Η ιδιότητα ALIGN=LEFT,RIGHT,MIDDLE,.. μέσα στην ετικέτα P ή IMG καθορίζει τη θέση που θα εμφανιστεί η φωτογραφία σε σχέση με τη γραμμή κειμένου που βρισκόμαστε ή με όλο το κείμενο. πχ. <P ALIGN=CENTER> <IMG SRC=“..” </P> ή ακόμα και <P><IMG ALIGN=MIDDLE TITLE=PAXOI SRC="F:\'Ακης\Σχολείο\Γπ ΤΕΕ\Προγραμματιστικά εργαλεία Διαδικτύου\caves paxos.jpg"></P>

27 Εισαγωγή εικόνας Οι ιδιότητες width, height ρυθμίζουν το μέγεθος (πλάτος, ύψος) της φωτογραφίας . H ιδιότητα border ρυθμίζει το μέγεθος πλαισίου της εικόνας. <p><img src="F:\'Ακης\Σχολείο\Γπ ΤΕΕ\Προγραμματιστικά εργαλεία Διαδικτύου\Photo\δομημένη1.gif" width=“120” height=“150” border="1" ></p>

28 Άσκηση 6 Σαν συνέχεια της προηγούμενης άσκησης να αναζητήσετε στο διαδίκτυο δύο σχετικές με το θέμα φωτογραφίες. Να τις αποθηκεύσετε τοπικά και να τις εισάγετε στο αρχείο, τροποποιήσετε και τοποθετήσετε, όπως αυτές εμφανίζονται στην παρακάτω εικόνα. Να γίνει χρήση του URL της πρώτης και της σχετικής διεύθυνσης της δεύτερης -μέγεθος 300Χ300).

29 Σύνδεσμοι Για να δημιουργήσουμε έναν σύνδεσμο (link) στην HTML, χρειαζόμαστε τα εξής δύο πράγματα : Το όνομα του αρχείου στον τοπικό δίσκο ή το URL του προορισμού Το κείμενο που θα λειτουργεί σαν “ενεργό σημείο επιλογής”, Για τη δημιουργία ενός συνδέσμου σε μια HTML σελίδα, χρησιμοποιούμε τα tags <Α> και </Α> (anchor) και την ιδιότητα HREF (Hypertext REFerence) που χρησιμοποιείται για τον καθορισμό του ονόματος του αρχείου προορισμού (μέσα σε διπλά εισαγωγικά) που είναι υποχρεωτική. πχ. Go back to <Α HREF=".../menu.html"> Main Menu</A> <A HREF=" Florina’s Home Page </A> Οι ιδιότητες NAME και TITLE μπορούν να παραληφθούν <Α NAME="Up" HREF=".../menu.html" TITLE="Care">

30 Σύνδεσμοι Οι Δεσμοί (Anchors) χρησιμοποιούνται σε σημεία μέσα σε έγγραφα, για να μπορούμε να μεταβούμε με τη βοήθεια των συνδέσμων. Για τη δημιουργία των δεσμών, αντί να χρησιμοποιούμε την ιδιότητα HREF στο tag <A>, χρησιμοποιούμε την ιδιότητα ΝΑΜΕ, η οποία δέχεται μια ή περισσότερες λέξεις-κλειδιά: <A NAME="Part4"> Part Four : Learning Italian </A> Για να δείξουμε σ’ έναν δεσμό μετά από το όνομα της σελίδας γράφουμε το σύμβολο # και μετά το όνομα του δεσμού <A HREF="myfile.html#Part4"> Go to Part Four </A> Για συνδέσμους προς ενότητες της ίδιας σελίδας, παραλείπουμε το όνομα της σελίδας και γράφουμε μόνο το σύμβολο # μαζί με το όνομα του δεσμού. <A HREF="#History"> History of Macedonia </A>

31 Σύνδεσμοι Εικόνες–Σύνδεσμοι προς άλλες ή άλλους δεσμούς μέσα στο έγγραφο. Για να γίνει αυτό, ανάμεσα στο tag δημιουργίας συνδέσμων <A> και </Α>, συμπεριλαμβάνουμε ένα tag <IMG> <A HREF="index.html"> <IMG SRC="uparrow.gif"> </A> Αν συμπεριλάβουμε και κείμενο μαζί με την εικόνα στο tag συνδέσμου <A HREF="index.html"> <IMG SRC="uparrow.gif"> Στην αρχή</A> Σύνδεσμοι για αποστολή με χρήση του προσδιοριστικού πρωτοκόλλου Mailto: <A </A> ή <A μου μήνυμα</A> <A HREF="mailto:john at line.gr"> επικοινωνήστε μαζί μου </A> και όταν ανοίξει το πρόγραμμα ηλ. ταχυδρομείου αντικαθιστούμε το at

32 Εισαγωγή συνδέσμων

33 Άσκηση 7α Να δημιουργηθούν οι εξής σύνδεσμοι στην προηγούμενη άσκηση:
Ένας σύνδεσμος στο τέλος της σελίδας που να παραπέμπει στην κορυφή με την ένδειξη Μετακίνηση στην αρχή της σελίδας. Η επικεφαλίδα μας να γίνει σύνδεσμος που να παραπέμπει στην ιστοσελίδα Η δεύτερη φωτογραφία να γίνει σύνδεσμος προς την ιστοσελίδα

34 Άσκηση 7β Ένας σύνδεσμος στο τέλος της σελίδας που να παραπέμπει (για περισσότερες πληροφορίες) σε επικοινωνία μαζί σας μέσω ηλεκτρονικού ταχυδρομείου ( ).

35 Εισαγωγή ήχου στο παρασκήνιο
Για να προσθέσουμε έναν ένθετο ήχο παρασκηνίου σε μια Web σελίδα, χρησιμοποιούμε το tag <BGSOUND> με την ιδιότητα SRC, ως εξής : <BGSOUND SRC="mozart.au"> Με την ιδιότητα LOOP=1,2,3.. μπορούμε να επαναλάβουμε τον ήχο πολλές φορές ενώ αν η τιμή της LOOP είναι -1 ή INFINITE, ο ήχος θα επαναλαμβάνεται διαρκώς μέχρι να φύγουμε από τη σελίδα. Ο Internet Explorer υποστηρίζει τρεις διαφορετικές μορφές αρχείων για ένθετους ήχους, τη μορφή AU (μ-law) της εταιρείας Sun, τα αρχεία μορφής WAV των Windows καθώς και τα αρχεία MIDI (.mid). Πχ. <BGSOUND LOOP=-1 SRC="TARZAN.WAV"> Προσοχή: πιθανόν με το wordpad να υπάρξει πρόβλημα στην υλοποίηση.

36 Ορίζοντας χρώµα υποβάθρου
Η ιδιότητα background-color χρησιµοποιείται για τον καθορισµό του χρώµατος υποβάθρου ενός στοιχείου. Η ιδιότητα αυτή δέχεται ως τιµές το όνοµα ενός χρώµατος, µια τιµή που αντιστοιχεί σε ένα συγκεκριµένο χρώµα ή την λέξη transparent. Ένα παράδειγµα καθορισµού του χρώµατος υποβάθρου και του χρώµατος ενός κειµένου είναι το εξής: <html> <head> <title>Μορφοποίηση Χρώµατος Υποβάθρου</title> <style> p{ background-color: red; color: yellow; } </style> </head> <body> <p>To χρώµα υποβάθρου της παραγράφου έχει οριστεί ως κόκκινο, ενώ το χρώµα του κειµένου κίτρινο</p> </body> </html>

37 Ορίζοντας χρώµα υποβάθρου
Ιδού το αποτέλεσμα:

38 Εξωτερικά Φύλλα Στυλ Η ενσωµάτωση εξωτερικών Φύλλων Στυλ σε ένα HTML έγγραφο γίνεται µε τη χρήση της ετικέτας <link>, η οποία περιέχεται µέσα στην ετικέτα <head> του HTML εγγράφου, µε τον εξής τρόπο: <link rel=“StyleSheet” href=“url” type=“text/css”> H τιµή url της ιδιότητας href αντιστοιχεί στο διεύθυνση στην οποία βρίσκεται το αρχείο που περιέχει τους κανόνες στυλ. Επίσης, η ιδιότητα type χρησιµοποιείται για να ενηµερωθεί ο φυλλοµετρητής για το είδος του αρχείου που ενσωµατώνεται στο HTML έγγραφο. Ένα παράδειγµα χρήσης της ετικέτας <link> για την ενσωµάτωση εξωτερικών αρχείων είναι το εξής: <link rel=“StyleSheet” href=“ type=“text/css”>

39 Τα σημαντικότερα λάθη που πρέπει να αποφεύγουμε
Στην αξιολόγηση των ιστοσελίδων λαμβάνονται πάντα υπόψη και θέματα ευχρηστίας. H ευχρηστία αν και πολύ γενικός όρος, καθώς μπορεί να συμπεριλαμβάνει οτιδήποτε σχετίζεται με την λειτουργία τους, αποτελεί βασικό σημείο για την αξιολόγησή τους. Οι μακροχρόνιες μελέτες του Jacob Nielsen ανέδειξαν τα δέκα συχνότερα λάθη στη σχεδίαση στο διαδίκτυο, σχετικά με την ευχρηστία των δικτυακών τόπων, τα οποία είναι: Χρήση πλαισίων. Η χρήση πλαισίων θεωρείται σημαντικό λάθος, επειδή δεν είναι δυνατή η καταχώρηση της σελίδας μέσω σελιδοδείκτη και δυσκολεύει την εκτύπωση. 2. Υπερβολική χρήση της τελευταίας τεχνολογίας διαδικτύου. Πρέπει να αποφεύγεται η αλόγιστη χρήση εφέ, γιατί τότε ο χρήστης δίνει έμφαση στο μέσο και όχι στο περιεχόμενο.

40 Τα σημαντικότερα λάθη που πρέπει να αποφεύγουμε
3. Κυλιόμενο κείμενο, animation κλπ. Η χρήση τους συχνά αποσπά την προσοχή του χρήστη. 4. Περίπλοκα URL. Σύμφωνα με τον Nielsen η διεύθυνση του δικτυακού τόπου θα πρέπει να αντιπροσωπεύει με κάποιο τρόπο το περιεχόμενό του και να είναι απλό (να γράφεται δηλαδή όσο πιο εύκολα γίνεται). 5. Ορφανές σελίδες. Όλες οι σελίδες θα πρέπει να πληροφορούν για το σημείο του δικτυακού τόπου στο οποίο βρίσκεται ο χρήστης. Επίσης, κάθε ιστοσελίδα πρέπει να περιέχει ένα σύνδεσμο για την αρχική σελίδα, καθώς και κάποια πληροφόρηση για το σε ποια σελίδα βρίσκεται ο χρήστης. 6. Μεγάλες κυλιόμενες σελίδες. Επειδή μόνο το 10% των χρηστών (υπάρχει τάση αύξησης σε αυτό το ποσοστό) χρησιμοποιεί την κύλιση της σελίδας πέρα από το αρχικό περιεχόμενο, θα πρέπει η σημαντικότερη πληροφορία να βρίσκεται στο πάνω μέρος της σελίδας.

41 Τα σημαντικότερα λάθη που πρέπει να αποφεύγουμε
7. Έλλειψη υποστήριξης στην περιήγηση. Σύμφωνα με τους κανόνες ευχρηστίας η χρήση χάρτη για μεγάλους δικτυακούς τόπους είναι απαραίτητη. 8. Έλλειψη στάνταρ χρωματικών κωδικών στις διασυνδέσεις. Για παράδειγμα, συνήθως όταν ο υπερσύνδεσμος έχει μπλε χρώμα σημαίνει ότι δεν έχει γίνει επιλογή. Ο υπερσύνδεσμος αλλάζει χρώμα κατά την επιλογή και τελικά έχει μωβ χρώμα, αφού επιλεγεί. 9. Ξεπερασμένη πληροφορία. Ένα σημαντικό ζήτημα είναι η συχνή ενημέρωση και ανανέωση της πληροφορίας που περιέχεται στον δικτυακό τόπο. 10. Αργοί χρόνοι πρόσβασης στον δικτυακό τόπο. 11.Μικρή αξιοπιστία. Η σελίδα πρέπει να αναγράφει την ημερομηνία τελευταίας ενημέρωσης και το κείμενο να φέρει στοιχεία του συγγραφέα και της ιδιότητας του. 12. Αυτόματη ανίχνευση διευθύνσεων ηλ. ταχυδρομείου από τα robots των spammers. Κάποιοι εναλλακτικοί τρόποι γραφής διευθύνσεων σε ιστοσελίδα είναι οι εξής: Αποτύπωση των διευθύνσεων ως εικόνα. Χρησιμοποίηση ειδικού τύπου γραφής των διευθύνσεων (αντικατάσταση του με at). Χρήση κώδικα JavaScript για την αποτύπωση των διευθύνσεων.

42 Ασκήσεις 1. Βρείτε στοιχεία σε μορφή κειμένου, για ένα επάγγελμα που σας ενδιαφέρει και δημιουργήστε μια σελίδα γι’ αυτό, χρησιμοποιώντας τις ετικέτες μορφοποίησης κειμένου, τις ετικέτες δημιουργίας καταλόγων στοιχείων, καθώς και τις αντίστοιχες παραμέτρους τους εφόσον αυτές χρειάζονται. Το τελικό αποτέλεσμα πρέπει να είναι καλαίσθητο. 2. Βρείτε στο Διαδίκτυο φωτογραφικό υλικό το οποίο αφορά τον αθλητισμό (επιλέξτε ένα άθλημα που σας ενδιαφέρει), και δημιουργήστε μια ιστοσελίδα γι’ αυτό. Η σελίδα πρέπει να περιλαμβάνει τουλάχιστον 3 φωτογραφίες και αντίστοιχο κείμενο.

43 Χρήσιμοι Σύνδεσμοι Σελίδα 181 του σχολικού βιβλίου.
Για συγγραφή κώδικα ιστοσελίδας σε HTML (οδηγίες με τη μορφή ερωτήσεων απαντήσεων) (ποικιλία παραδειγμάτων XML,HTML, XSL κτλ.) Για δημιουργία σελίδας με το FrontPage Γλωσσάρι

44 Δημοσίευση ιστοσελίδας
Όποιος θέλει να δημοσιεύσει στον Παγκόσμιο Ιστό μία προσωπική ιστοσελίδα μπορεί να το κάνει δωρεάν χρησιμοποιώντας τις υπηρεσίες μιας από τις πολλές εταιρείες παροχής δωρεάν φιλοξενίας ιστοσελίδων. Αυτές οι εταιρείες, εκτός από το χώρο, προσφέρουν και δωρεάν αλλά και άλλες παροχές (γραφικά, οδηγούς κατασκευής ιστοσελίδων κ.ά.). Για ένα αναλυτικό κατάλογο τέτοιων εταιρειών επισκεφθείτε το Free Web Space Finder (

45 Δημοσίευση ιστοσελίδας
Στο συγκεκριμένο παράδειγμα δημιουργίας προσωπικής ιστοσελίδας επιλέγουμε την Ανοίγουμε τον browser και πληκτρολογούμε την παρακάτω διεύθυνση Στην ιστοσελίδα αυτή κάνουμε Sign Up. Στη συνέχεια συμπληρώνουμε τα στοιχεία που θα μας ζητηθούν καθώς και το Member Name και το Password. Αφού συμπληρώσουμε όλα τα στοιχεία, η διεύθυνση της ιστοσελίδας θα είναι: Member Name.tripod.com (όπου Member Name το όνομα που έχουμε επιλέξει). Επίσης για τους μαθητές των ΤΕΕ διατίθεται χώρος στο site

46 Δημοσίευση ιστοσελίδας
Για τη δημοσίευση της ιστοσελίδας μας στο διαδίκτυο, θα χρησιμοποιήσουμε ένα FTP client Πρόγραμμα π.χ. FTP LE 95 ( ) και θα δημιουργήσουμε ένα νέο session στο οποίο και θα ορίσουμε τις παρακάτω ρυθμίσεις: Profile Name: Το όνομα που θα δώσουμε σε αυτό το session π.χ. H ιστοσελίδα μου HostName/Address: Host Type: Automatic detect User ID: Το Username Password: Το Password που ορίσαμε αρχικά Αφού συνδεθούμε μεταφέρουμε όλα τα αρχεία της ιστοσελίδας μας (αρχεία και καταλόγους) από το χώρο αποθήκευσης στο διαδίκτυο.

47 Εισαγωγή στα μεταδεδομένα
"Metadata is machine understandable information about web resources or other things" (Tim Berners-Lee). Με τα μεταδεδομένα επιτυγχάνεται η: Αναζήτηση (find) Ανακάλυψη (discovery) Πλοήγηση (navigation) Συνεύρεση (collocation) Αναγνώριση (identify, DOI, URI) Επιλογή (select) Απόκτηση (obtain access) Οργάνωση (portals) ψηφιακών πόρων που βρίσκονται στο διαδίκτυο.

48 Που βρίσκονται τα Μεταδεδομένα
Στην ετικέτα ενός CD (ορατά) Στη σελίδα τίτλου ενός τεκμηρίου (ορατά) Στην κορυφή μιας ιστοσελίδας (ορατά) Σε διαφορετική εγγραφή, π.χ. στον κατάλογο μιας βιβλιοθήκης (ορατά) Στην ηλεκτρονική μορφή μέσα στον πόρο (ορατά) Ενσωματωμένα στο ηλεκτρονικό δημοσίευμα (μέρος της κωδικοποίησης, μη ορατά). Είναι αναγκαιότερα σε ψηφιακά αντικείμενα από ότι σε φυσικά. Πώς θα κάνουμε «ορατά» τα μεταδεδομένα από τους υπολογιστές (μηχαναγνώσιμη πληροφορία); Η eXtensible Markup Language (XML) αποτελεί μια εξαιρετικά απλή διάλεκτο της γλώσσας Standard Generalized Markup Language (SGML), η οποία αναπτύχθηκε με στόχο να διευκολύνει το χειρισμό, επεξεργασία, διακίνηση και αποθήκευση τεκμηρίων στον Παγκόσμιο Ιστό (web).

49 Σύνταξη μεταδεδομένων
Δεν υπάρχει ένα μοναδικό διεθνές πρότυπο για μεταδεδομένα. Τα σχήματα μεταδεδομένων είναι γλώσσες για να γίνονται δηλώσεις για τους πόρους: «Το βιβλίο» έχει Title "Gone with the Wind" «Η ιστοσελίδα» έχει Publisher "Springer Verlag" Οι όροι των λεξιλογίων (στοιχεία) ορίζονται με πρότυπα – όπως το Dublin Core. Κατηγορίες μεταδεδομένων σύμφωνα με το Getty Institute: Administrative Descriptive Preservation Technical Use

50 DC μεταδεδομένα σε HTML
<head> <title>Το λίγο του Κόσμου </title> <meta name = “DC.Title” content = “Το λίγο του κόσμου”> <meta name = “DC.Creator” content = “Δημουλά, Κική”> <meta name = “DC.Publisher” content = “Στιγμή”> <meta name = “DC.Date.Issued” content = “1990”> <meta name = “DC.Language” scheme = “ISO639-2” content = “gre”> </head> <body> <pre> …Υπήρξα περίεργη και μελετηρή. … </pre> </body> </html>

51 Παράδειγμα Σύνταξης με DC
<!DOCTYPE HTML PUBLIC "-//SoftQuad//DTD HoTMetaL PRO 4.0:: ::extensions to HTML 4.0//EN" "hmpro4.dtd"> <html> <head> <title>Ariadne</title> <meta HTTP-EQUIV="Content-Type" content="text/html; charset=ISO "> <meta name="package" content="(TYPE=begin) Dublin Core"> <meta name="DC.title" content="Ariadne"> <meta name="DC.subject" content="(TYPE=keyword) Ariadne UK Library magazine newsletter library information science academic network"> <meta name="DC.creator" content="(TYPE=name) Philip Hunter"> <meta name="DC.creator" content="(TYPE= ) <meta name="DC.format" content="(SCHEME=imt) text/html"> <meta name="DC.identifier" content="(TYPE=url) <meta name="DC.relation" content="(TYPE=ischildof, IDENTIFIER=url) <meta name="package" content="(TYPE=end) Dublin Core"> </head> <body BGCOLOR="#ffffff"> … </body> </html>

52 Κωδικοποίηση ενός αρχείου σε DC και η αντίστοιχη ΗTML εμφάνιση
Οδηγίες για την εμφάνιση με χρήση ενός HTML stylesheet Είναι συνήθως ένα URL