ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language)

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language)"

Transcript

1 ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ιδάσκων Αν. Καθηγητής Ι.Σ.Βενιέρης Αθήνα, Ιανουάριος

2 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ Εισαγωγή Τα βασικά της HTML Ετικέτες (tags) οµή ενός εγγράφου HTML Επικεφαλίδες ιαχωριστικά Ετικέτες στυλ Λίστες Εικόνες εσµοί υπερκειµένου εσµοί σε τοπικά αρχεία Τι είναι το URL εσµοί Υπερκειµένου σε τοποθεσίες του ιαδικτύου εσµοί Υπερκειµένου σε τµήµατα της ίδιας σελίδας Παράδειγµα χρήσης των δεσµών υπερκειµένου Άλλες δυνατότητες της HTML Προσχηµατισµένο κείµενο Ειδικοί χαρακτήρες Στοίχιση κειµένου Πίνακες Χρώµα Γραµµατοσειρές εσµοί Πλαίσια Άλλες δυνατότητες της HTML Αναφορές

3 Εισαγωγή Ο Παγκόσµιος Ιστός (World Wide Web - WWW) ή πιο απλά Ιστός (Web) είναι µία αρχιτεκτονική για την προσπέλαση διασυνδεδεµένων εγγράφων τα οποία είναι κατανεµηµένα σε εκατοµµύρια υπολογιστές σε όλο το ιαδίκτυο (Internet). Ο όρος έγγραφα αναφέρεται όχι µόνο σε έγγραφα κειµένου, αλλά περιλαµβάνει όλων των ειδών τα έγγραφα, όπως εικόνες, γραφικά, βίντεο και animation. Στις µέρες µας έχει πάρει τέτοια διάδοση ώστε πολλοί το ταυτίζουν µε το ίδιο το ιαδίκτυο, αν και αποτελεί µόνο µία εφαρµογή του. Το WWW ξεκίνησε το 1989 στο Ευρωπαϊκό Κέντρο Πυρηνικών Ερευνών (CERN). Το CERN διέθετε πολλές οµάδες επιστηµόνων από διάφορες χώρες οι οποίοι είχαν την ανάγκη να επικοινωνούν µεταξύ τους. Ο φυσικός Tim Berners Lee το 1989 πρότεινε την ιδέα για τον Ιστό των διασυνδεδεµένων εγγράφων, ως έναν τρόπο για την επικοινωνία των οµάδων αυτών. Μετά από 18 µήνες λειτούργησε το πρώτο (βασισµένο µόνο σε κείµενο) πρωτότυπο. Η πραγµατική όµως διάδοση του WWW οφείλεται στον Mosaic, τον πρώτο browser µε γραφικό περιβάλλον. Ο Mosaic αναπτύχθηκε στα εργαστήρια του Πανεπιστηµίου του Ιλινόις και παρουσιάστηκε τον Φεβρουάριο του Ο Mosaic έγινε τόσο δηµοφιλής και ο δηµιουργός του, Marc Andreeseen, ένα χρόνο αργότερα (1994) δηµιούργησε, µαζί µε τον Jim Clark, την εταιρία Netscape Communications Corp που σκοπός της ήταν η ανάπτυξη εφαρµογών για το WWW. Το 1995 κυκλοφόρησε ο browser Netscape. Την ίδια χρονιά η Microsoft άρχισε την ανάπτυξη του δικού της µε γραφικό περιβάλλον browser, του Internet Explorer. Το 1994 το CERN και το MIT συµφώνησαν στη δηµιουργία του οργανισµού World wide Web Consortium (που συχνά αποκαλείτε W3C). Ο σκοπός του W3C είναι η συνεχής ανάπτυξη του Web, η ανάπτυξη προτύπων και η διαλειτουργικότητα µεταξύ των διαφόρων τοποθεσιών (site) του Web. Τον Ιούλιο του 1994 εκδόθηκε νέο πρότυπο για την HTML, γνωστό ως HTML 2, ενώ το 1995 προστέθηκαν νέες δυνατότητες στην HTML µε αποτέλεσµα τον Μάρτιο του ίδιου έτους να κυκλοφορήσει ένα νέο πρότυπο, η HTML 3. Η εξέλιξη της HTML συνεχίστηκε τον Ιανουάριο του 1997 µε την HTML 3.2, τον εκέµβριο του ίδιου έτους µε την HTML 4 και τον εκέµβριο του 1999 µε την HTML Στα επόµενα κεφάλαια θα περιγραφούν τα βασικά χαρακτηριστικά της τελευταίας έκδοσης της HTML. Αρχικά θα δοθούν κάποιοι ορισµοί που είναι απαραίτητοι για την κατανόησή της. Από την σκοπιά του χρήστη, ο Ιστός αποτελείται από µία πληθώρα διασκορπισµένων εγγράφων, τα οποία θα αποκαλούµε Ιστοσελίδες (Web pages) ή απλά σελίδες (pages). Οι σελίδες αυτές µπορεί να περιέχουν δεσµούς προς άλλες σελίδες, οι οποίοι ονοµάζονται δεσµοί υπερκειµένου (hyperlinks). Στην περίπτωση αυτή λέµε ότι οι σελίδες αποτελούνται από υπερκείµενο (hypertext). Για να µπορέσουµε να δούµε τα περιεχόµενα µίας ιστοσελίδας χρησιµοποιούµε ένα πρόγραµµα το οποίο ονοµάζουµε browser. Η βασική λειτουργία του browser είναι να ζητά από έναν εξυπηρετητή Ιστού (Web server) τα περιεχόµενα της ιστοσελίδας, κάνοντας χρήση του πρωτοκόλλου HTTP (HyperText Transfer Protocol), και στη συνέχεια να τα εµφανίζει στο µηχάνηµα του χρήστη. 3

4 1. Τα βασικά της HTML 1.1 Ετικέτες (tags) Η γλώσσα HTML (HyperText Markup Language) είναι ο τρόπος µε τον οποίο ο browser απεικονίζει τα έγγραφα. Με τον όρο έγγραφα εννοούµε κάθε είδους αρχείου, όπως αρχείο κειµένου, εικόνες, animation και βίντεο. Τα αρχεία της HTML είναι απλά αρχεία κειµένου στα οποία υπάρχουν ειδικοί κώδικες, οι οποίοι ονοµάζονται ετικέτες (tags), που δηλώνουν στον browser τον τρόπο µε τον οποίο θα εµφανιστούν τα αρχεία αυτά. Οι ετικέτες έχουν την παρακάτω γενική δοµή: <όνοµα_ετικέτας>κείµενο</όνοµα_ετικέτας> Με το όνοµα_ετικέτας δηλώνεται στον browser η ενέργεια που θα εκτελεστεί στο κείµενο. Για να δηλώσουµε το σηµείο που θα σταµατήσει να εκτελείτε η ενέργεια αυτή χρησιµοποιούµε την αντίστοιχη ετικέτα κλεισίµατος </όνοµα_ετικέτας>. Υπάρχουν περιπτώσεις ετικετών HTML που δεν έχουν ετικέτα κλεισίµατος, π.χ. όταν θέλουµε να εισάγουµε µία εικόνα απλά δηλώνουµε την ενέργεια αυτή µε την αντίστοιχη HTML ετικέτα η ετικέτα κλεισίµατος στην περίπτωση αυτή δεν έχει κανένα νόηµα. Αντίθετα, όταν θέλουµε να κάνουµε ένα κείµενο να έχει έντονη γραφή τότε πρέπει να συµπεριλάβουµε το κείµενο εντός της αντίστοιχης HTML ετικέτας. Στο όνοµα ετικέτας δε γίνεται διάκριση ανάµεσα σε πεζούς και κεφαλαίους χαρακτήρες. Οποιοσδήποτε συνδιασµός είναι αποδεκτός Π.χ. οι ετικέτες <html>, <HTML> ή <HtMl> είναι ισοδύναµες. 1.2 οµή ενός εγγράφου HTML Ένα αρχείο HTML περιέχεται µέσα στην ετικέτα <HTML> </HTML> και αποτελείται από δύο ξεχωριστά µέρη: το <HEAD> </HEAD> στο οποίο περιέχονται πληροφορίες που αφορούν το ίδιο το αρχείο και όχι το τι θα εµφανιστεί στην οθόνη του browser, και το <BODY> </BODY> στο οποίο περιέχεται ότι θα εµφανιστεί στην σελίδα. Πριν δείξουµε τα παραπάνω µε ένα παράδειγµα, θα αναφερθούµε σε µία άλλη ετικέτα, την <TITLE>Τίτλος</TITLE>. Η ετικέτα αυτή εµφανίζει τον Τίτλο στην µπάρα τίτλου του browser. Η ετικέτα αυτή δεν εµφανίζει κάποιο κείµενο στην οθόνη και βρίσκεται µέσα στην <HEAD> <HEAD>. Όπως αναφέραµε και παραπάνω ένα αρχείο HTML είναι ένα αρχείο κειµένου (ASCII). Εποµένως, για να δηµιουργήσουµε το πρώτο µας παράδειγµα HTML αρκεί να ανοίξουµε έναν επεξεργαστή κειµένου, να πληκτρολογήσουµε το κείµενό µας, να το αποθηκεύσουµε σε ένα αρχείο µε κατάληξη.htm ή.html και στη συνέχεια να το εµφανίσουµε κάνοντας χρήση του browser. Παρακάτω δίνεται ο κώδικας σε HTML της πρώτης µας σελίδας. Στο παράδειγµα αυτό εµφανίζεται το κείµενο «Μέσα στην ετικέτα body γράφουµε το κείµενο που θέλουµε να εµφανίζεται στη σελίδα.» στον browser. Επίσης, στη µπάρα τίτλου εµφανίζεται το κείµενο «Τίτλος... Εµφανίζοµαι µόνο στη µπάρα τίτλου». Στην αρχή γράφουµε σε έναν επεξεργαστή κειµένου το παρακάτω κείµενο: 4

5 <html> <head> <title> Τίτλος... Εµφανίζοµαι µόνο στη µπάρα τίτλου </title> </head> <body> Μέσα στην ετικέτα body γράφουµε το κείµενο που θέλουµε να εµφανίζεται στη σελίδα. </body> </html> Αν εµφανίσουµε το παραπάνω κείµενο σε έναν browser, όπως τον Internet Explorer, θα µοιάζει κάπως έτσι: Ανάλογα µε τον browser που χρησιµοποιούµε και το µέγεθος του παραθύρου του, η εµφάνιση της σελίδας που δηµιουργήσαµε µπορεί να διαφέρει σε µερικά σηµεία. Αυτό συµβαίνει γιατί η HTML λέει στον browser τις ενέργειες που πρέπει να εκτελέσει (π.χ. ότι ένα κείµενο πρέπει να φαίνεται µε έντονη γραφή) και όχι την ακριβή εµφάνιση που θα έχει η σελίδα µας. Αυτό είναι πλεονέκτηµα, και όχι µειονέκτηµα, αφού κάνει τη σελίδα µας ικανή να εµφανίζεται, µέσω του browser, σε οποιοδήποτε µηχάνηµα, µε οποιοδήποτε λειτουργικό σύστηµα και µε οποιαδήποτε ανάλυση οθόνης. 1.3 Επικεφαλίδες Στη συνέχεια θα περιγράψουµε τη δηµιουργία επικεφαλίδων (headings), οι οποίες χρησιµοποιούνται για την µορφοποίηση του κειµένου που εµφανίζεται στην σελίδα. Για να δηµιουργήσουµε µία επικεφαλίδα χρησιµοποιούµε την ετικέτα <hn> </hn>, όπου το N είναι ένας αριθµός από το 1 έως και το 6. Η επικεφαλίδα <h1> </h1> είναι η πιο σηµαντική. Όσο αυξάνεται το N τόσο λιγότερο σηµαντική 5

6 γίνεται η επικεφαλίδα. Παρακάτω δείχνουµε, µε ένα παράδειγµα, τον τρόπο µε τον οποίο εµφανίζονται διάφορα επίπεδα επικεφαλίδων στον Internet Explorer. <html> <head> <title>πίνακας Περιεχοµένων</title> </head> <body> <h1>κεφάλαιο 1: Τα βασικά της HTML</h1> <h2>ενότητα 1.1: Ετικέτες (tags)</h2> <h2>ενότητα 1.2: οµή ενός εγγράφου HTML</h2> <h2>ενότητα 1.3: Επικεφαλίδες</h2> <h2>ενότητα 1.4: ιαχωριστικά</h2> <h3>παράγραφος 1.4.1: Παράγραφοι</h3> <h3>παράγραφος 1.4.2: Οριζόντιες γραµµές</h3> <h3>παράγραφος 1.4.3: Αλλαγή γραµµής</h3> </body> </html> 1.4 ιαχωριστικά Η HTML γενικά αγνοεί τα κενά διαστήµατα ή και τις αλλαγές γραµµής. Για τη δηµιουργία τµηµάτων κειµένου, τα οποία θα είναι αυτοδύναµα, γίνεται χρήση διαχωριστικών. 6

7 Ένα διαχωριστικό του κειµένου είναι οι παράγραφοι. Οι παράγραφοι διαχωρίζουν το κείµενο µέσω της εµφάνισης µίας κενής γραµµής και δηλώνονται µέσω της ετικέτας <p> </p>. Στις επικεφαλίδες δεν είναι απαραίτητη η χρήση της ετικέτας παραγράφου, αφού η επικεφαλίδα είναι από µόνη της ένα ξεχωριστό κοµµάτι κειµένου. Τέλος, αν και η ετικέτα τερµατισµού </p> είναι προαιρετική καλό είναι να χρησιµοποιείται (γιατί σε περίπτωση που χρησιµοποιείται κάποια µέθοδος στοίχισης κειµένου η παρουσία της είναι υποχρεωτική - βλέπε και ενότητα 3.3). Ένας άλλος τρόπος διαχωρισµού του κειµένου είναι και οι οριζόντιες γραµµές (horizontal rules). Οι οριζόντιες γραµµές δηλώνονται µέσω της ετικέτας <hr>. Η ετικέτα αυτή δεν έχει αντίστοιχη ετικέτα τερµατισµού. Παρόµοια λειτουργία µε την παράγραφο έχει και η ετικέτα αλλαγής γραµµής <br>. Όµως, σε αντίθεση µε την παράγραφο, δεν αφήνουµε κενή γραµµή. Το παράδειγµα που ακολουθεί αποτελείται από δύο τµήµατα, τα οποία χωρίζονται µέσω µίας οριζόντιας γραµµής. Και τα δύο τµήµατα εµφανίζουν το ίδιο κείµενο, αλλά µε χρήση διαφορετικών ετικετών µορφοποίησης - διαχωρισµού. Στο πρώτο τµήµα γίνεται χρήση παραγράφων, ενώ στο δεύτερο αλλαγή γραµµής και επικεφαλίδων. Στον κώδικα του παραδείγµατος αυτού εισάγεται και η έννοια του σχόλιου. Ένα σχόλιο είναι ένα κείµενο το οποίο για τον browser είναι σαν να µην υπάρχει, αλλά χρησιµοποιείται από κάποιον ως διευκρίνιση για αυτόν που διαβάζει τον κώδικα. Ένα σχόλιο περιέχεται µέσα στα <!-- και --> και µπορεί να καταλαµβάνει περισσότερες από µία γραµµές. <html> <head> <title> ιαχωρισµός κειµένου </title> </head> <body> <!-- Πρώτο τµήµα... Το κείµενο διαχωρίζεται µέσω παραγράφων --> Η σελίδα αυτή περιέχει δύο τµήµατα. <p> Στο πρώτο τµήµα ο διαχωρισµός του κειµένου γίνεται µέσω χρήσης παραγράφων, <p> ενώ στο δεύτερο ο διαχωρισµός γίνεται µέσω της επικεφαλίδας 3 και αλλαγής γραµµής. <!-- Οριζόντια γραµµή --> <hr> <!-- εύτερο τµήµα... Το κείµενο διαχωρίζεται µέσω αλλαγών γραµµής και επικεφαλίδων --> <h3> Η σελίδα αυτή περιέχει δύο τµήµατα. </h3> Στο πρώτο τµήµα ο διαχωρισµός του κειµένου γίνεται µέσω χρήσης παραγράφων, <br> ενώ στο δεύτερο ο διαχωρισµός γίνεται µέσω της επικεφαλίδας 3 και αλλαγής γραµµής. </body> </html> 7

8 1.5 Ετικέτες στυλ Εκτός από τις παραγράφους και τις επικεφαλίδες, όταν θέλουµε να δώσουµε έµφαση σε κάποιο κείµενο µπορούµε να χρησιµοποιήσουµε και τις ετικέτες στυλ της HTML. Οι πιο βασικές είναι οι <b> </b>, που κάνει το κείµενο να εµφανίζεται µε έντονη γραφή, η <i> </i> που κάνει το κείµενο να εµφανίζεται µε πλάγια γραφή, και η <tt> </tt> που κάνει το κείµενο να εµφανίζεται σαν κείµενο γραφοµηχανής. Στο παράδειγµα που ακολουθεί γίνεται χρήση και των τριών ετικετών στυλ, για να δοθεί έµφαση στο κείµενο. 8

9 <html> <head> <title> Ετικέτες στυλ </title> </head> <body> Στην HTML µπορεί το κείµενο να εµφανίζεται σε <b> έντονη </b> γραφή, σε <i> πλάγια </i> γραφή, ως <tt> κείµενο γραφοµηχανής, </tt> αλλά και σε διάφορους συνδυασµούς, όπως <b> <i> έντονο και πλάγιο </i> </b> ταυτόχρονα. </body> </html> Όπως φαίνεται και από το παραπάνω παράδειγµα οι ετικέτες στην HTML µπορεί να είναι ένθετες, δηλαδή να βρίσκονται µέσα σε άλλες ετικέτες. Σαν παράδειγµα µπορούµε να αναφέρουµε την <body>...</body> εντός της <html> <html> και την <title> </title> εντός της <head> </head>. Ιδιαίτερη προσοχή πρέπει να δοθεί στη σειρά των ετικετών τερµατισµού, η οποία πρέπει να είναι η αντίστροφη της σειράς δήλωσης, π.χ. <head> <title> </title> </head>. 1.6 Λίστες Η HTML παρέχει επίσης και διάφορες µορφές λιστών, για την κατάταξη των αντικειµένων. Η µη αριθµηµένη λίστα (unordered list) δηλώνεται µε την ετικέτα <ul> </ul>, ενώ κάθε στοιχείο της πρέπει να περικλείεται µέσα σε µία ετικέτα <li> </li>. Κάθε στοιχείο της εµφανίζεται µε µία βούλα (ή µε κάποιο άλλο κοινό σύµβολο) µπροστά του. Στις αριθµηµένες λίστες (ordered lists) εµφανίζεται ένας αριθµός µπροστά από κάθε στοιχείο της λίστας. Η µόνη διαφορά στη δηµιουργία τους, σε σχέση µε τις µη αριθµηµένες λίστες, είναι ότι χρησιµοποιείται η ετικέτα <οl> </οl> αντί της <ul> </ul>. Οι λίστες µπορούν να είναι ένθετες, δηλαδή µία λίστα µπορεί να περιέχεται εντός κάποιας άλλης. Σε περίπτωση που έχουµε ένθετες λίστες του ίδιου τύπου, το 9

10 διακριτικό µπροστά από κάθε λίστα αλλάζει, ώστε να µπορεί να γίνεται διάκριση ανάµεσα στα στοιχεία της κάθε λίστας. Στην ενότητα 1.3 δώσαµε ένα παράδειγµα πίνακα περιεχοµένων. Στην ενότητα αυτή τροποποιούµε το παράδειγµα αυτό κάνοντας χρήση λιστών. Συγκεκριµένα, χρησιµοποιούµε µία αριθµηµένη λίστα για τις ενότητες του κεφαλαίου και µία µη αριθµηµένη λίστα για τις παραγράφους της κάθε ενότητας. Η µη αριθµηµένη λίστα είναι ένθετη εντός της αριθµηµένης λίστας. <html> <head> <title> Πίνακας Περιεχοµένων </title> </head> <body> <h2>κεφάλαιο 1: Τα βασικά της HTML</h2> <ol> <li>ετικέτες (tags)</li> <li> οµή ενός εγγράφου HTML</li> <li>επικεφαλίδες</li> <li> ιαχωριστικά</li> <ul> <li>παράγραφοι</li> <li>οριζόντιες γραµµές</li> <li>αλλαγή γραµµής</li> </ul> <li>ετικέτες στυλ</li> </ol> </body> </html> 10

11 Εκτός από τις αριθµηµένες και τις µη αριθµηµένες λίστες, η HTML διαθέτει και µία τρίτη κατηγορία λιστών, τις λίστες ορισµών (definition lists), οι οποίες επιτρέπουν την δηµιουργία επεξηγήσεων για διάφορους ορισµούς. Στις λίστες αυτές δεν εµφανίζεται κάποιο διακριτικό σηµάδι, αλλά αντίθετα η επεξήγηση του κάθε ορισµού εµφανίζεται πιο µέσα από το υπόλοιπο κείµενο. Η λίστα ορισµών δηλώνεται µε την ετικέτα <dl> </dl>, και περιέχει ζεύγη ορισµού τίτλων, µέσω της ετικέτας <dt> </dt>, και αντίστοιχης επεξήγησης, µέσω της ετικέτας <dd> </dd>. Στο παρακάτω παράδειγµα δηµιουργούµε µία λίστα ορισµών για τρία ακρώνυµα σχετικά µε τις ιστοσελίδες: HTML, WWW και HTTP. <html> <head> <title> Λίστα Ορισµών </title> </head> <body> <dl> <dt>www</dt> <dd>world Wide Web</dd> <dt>http</dt> <dd>hypertext Transfer Protocol</dd> <dt>html</dt> <dd>hypertext Markup Language</dd> </dl> </body> </html> 1.7 Εικόνες Στις παραπάνω ενότητες αναφερθήκαµε σε δυνατότητες της HTML για τη µορφοποίηση του κειµένου. Στην ενότητα αυτή θα ασχοληθούµε µε την ενσωµάτωση εικόνων στις ιστοσελίδες µας. 11

12 Ο browser (συνήθως) έχει τη δυνατότητα εµφάνισης εικόνων και γραφικών. Το µόνο που πρέπει να δηλώνεται στην ιστοσελίδα είναι η τοποθεσία στην οποία βρίσκεται η προς εµφάνιση εικόνα. Ιδιαίτερη προσοχή πρέπει να δοθεί στον τύπο της εικόνας (ο οποίος δηλώνεται και από την κατάληξη του αρχείου της εικόνας). Ο στάνταρ τύπος που µπορεί να εµφανίσει ο browser είναι ο GIF (Graphics Interchange Format), αλλά οι περισσότεροι browser υποστηρίζουν και τον τύπο JPEG (Joint Photographic Expert Group). Όταν γίνεται χρήση εικόνων σε ιστοσελίδες πρέπει να δίνεται ιδιαίτερη προσοχή στο συνολικό µέγεθος των αρχείων εικόνων που βρίσκονται σε µία ιστοσελίδα. Όσο µεγαλύτερο µέγεθος έχουν οι εικόνες και όσο πιο πολλά χρώµατα περιέχουν τόσο αυξάνεται το µέγεθος του αρχείου τους. Αυτό έχει ως αποτέλεσµα µία σελίδα που περιέχει πολλές εικόνες να αργεί να φορτωθεί στον browser, µε αποτέλεσµα οι χρήστες να περιµένουν µεγάλο χρονικό διάστηµα µέχρι να κατέβει η ιστοσελίδα. Μία καλή τεχνική είναι η ενσωµάτωση δεσµών υπερκειµένου προς τις εικόνες (Κεφάλαιο 2). Η σελίδα απλά µπορεί να περιέχει την εικόνα σε αρκετά µικρότερο µέγεθος - σε µικρογραφία (thumbnail). Για την ενσωµάτωση µίας εικόνας σε µία ιστοσελίδα χρησιµοποιείται η ετικέτα <img src=όνοµα αρχείου εικόνας>. Στην ετικέτα αυτή δηλώνουµε το όνοµα του αρχείου της εικόνας, αλλά µπορούµε να δηλώσουµε και άλλα χαρακτηριστικά, όπως το ύψος και το πλάτος της. Π.χ. για την ενσωµάτωση του αρχείου contents.gif, χρησιµοποιούµε τον ακόλουθο κώδικα: <img src= contents.gif>. Στην HTML κάθε ετικέτα µπορεί να έχει διάφορα χαρακτηριστικά (attributes). Τα χαρακτηριστικά αυτά περιγράφουν µε µεγαλύτερη ακρίβεια τον τρόπο µε τον οποίο θα εµφανιστεί το αντίστοιχο κοµµάτι της ιστοσελίδας στον browser. Το χαρακτηριστικό src της ετικέτας <img> είναι ένα παράδειγµα για τον τρόπο δήλωσης των χαρακτηριστικών: τα χαρακτηριστικά κάθε ετικέτας βρίσκονται εντός των < και > της αρχικής δήλωσης της ετικέτας (και όχι της ετικέτας τερµατισµού), πρέπει να διαχωρίζονται από το όνοµα τις ετικέτας αλλά και από τα άλλα χαρακτηριστικά που τυχόν υπάρχουν στην ίδια ετικέτα, και είναι της µορφής: όνοµα_χαρακτηριστικού=τιµή_χαρακτηριστικού. Ένα από τα σηµαντικότερα χαρακτηριστικά της ετικέτας <img> είναι το alt. Με το χαρακτηριστικό αυτό δηλώνεται το κείµενο που θα εµφανιστεί στη θέση της εικόνας σε browsers που δεν υποστηρίζουν γραφικά. Στο προηγούµενο παράδειγµα, αν θέλουµε να εµφανίζεται το κείµενο «Περιεχόµενα» σε περίπτωση που ο browser δεν υποστηρίζει γραφικά, τότε προσθέτουµε το χαρακτηριστικό alt: <img src= contents.gif alt= Περιεχόµενα >. Τέλος, δύο άλλα χαρακτηριστικά της ετικέτας <img> που χρησιµοποιούνται συχνά είναι τα height και width, µε τα οποία δηλώνεται αντίστοιχα το ύψος και το πλάτος της εµφανιζόµενης εικόνας. Π.χ. αν θέλουµε στο προηγούµενο παράδειγµα η εικόνα να εµφανίζεται µε ύψος 40 pixels και πλάτος 100 pixels γράφουµε: <img src= contents.gif height=40 width=100 alt= Περιεχόµενα >. 12

13 2. εσµοί υπερκειµένου Στο προηγούµενο κεφάλαιο αναφερθήκαµε στα βασικά στοιχεία της HTML για τη µορφοποίηση του εµφανιζόµενου κειµένου, αλλά και στην ενσωµάτωση εικόνων. Όµως η πραγµατική δύναµη της HTML είναι η δυνατότητα δηµιουργίας δεσµών υπερκειµένου (hypertext links) προς άλλα έγγραφα (όπως ιστοσελίδες, γραφικά, βίντεο και animation). Ο χρήστης, µε ένα απλό κλικ του ποντικιού, µπορεί να µεταβεί σε οποιαδήποτε τοποθεσία του ιαδικτύου. Ο Παγκόσµιος Ιστός (World Wide Web) χρησιµοποιεί ένα σχήµα διευθύνσεων που είναι γνωστό ως URL (Uniform Address Locator). Όταν χρησιµοποιείται browser µε γραφικό περιβάλλον, οι δεσµοί υπερκειµένου, συνήθως, εµφανίζονται υπογραµµισµένοι και µε µπλε χρώµα, π.χ. Εθνικό Μετσόβιο Πολυτεχνείο. Σε περίπτωση που έχουµε επισκεφτεί ήδη τον δεσµό υπερκειµένου, τότε το χρώµα του αλλάζει. Αυτό φαίνεται και στο παράδειγµα της παραγράφου εσµοί σε τοπικά αρχεία Με τον όρο δεσµοί σε τοπικά αρχεία εννοούµε δεσµούς υπερκειµένου προς αρχεία που βρίσκονται στο ίδιο µηχάνηµα µε αυτό της ιστοσελίδας που περιέχει το δεσµό υπερκειµένου. Ο απλούστερος δεσµός σε τοπικά αρχεία είναι ο δεσµός προς ένα άλλο αρχείο HTML που βρίσκεται στον ίδιο υποκατάλογο. Για το δεσµό αυτό χρησιµοποιείται η ετικέτα <a href=όνοµα αρχείου>κείµενο δεσµούς</a>. Π.χ. Αν θέλουµε να δηµιουργήσουµε στην σελίδα µας ένα δεσµό προς την ιστοσελίδα contents.htm (η οποία βρίσκεται στον ίδιο υποκατάλογο) µε κείµενο δεσµού «Περιεχόµενα» τότε γράφουµε: <a href= contents.htm >Περιεχόµενα</a>. Στο κείµενο δεσµού µπορούµε να χρησιµοποιήσουµε ετικέτες µορφοποίησης, ακόµη και εικόνες. Στο προηγούµενο παράδειγµα αν θέλουµε να χρησιµοποιήσουµε την εικόνα contents.gif για να δηλώσουµε το δεσµό υπερκειµένου τότε γράφουµε: <a href= contents.htm > <img src= contents.gif alt= Περιεχόµενα > </img> Για να δηµιουργήσουµε δεσµούς προς αρχεία σε άλλους υποκαταλόγους πρέπει εκτός από το όνοµα του αρχείου να δηλώσουµε και τον κατάλογο στον οποίο βρίσκεται. Αν βρίσκεται σε υποκατάλογο που περιέχεται στον κατάλογο της ιστοσελίδας, τότε αρκεί να δηλώσουµε το όνοµα του υποκαταλόγου, να χρησιµοποιήσουµε το σύµβολο / και στη συνέχεια να δηλώσουµε το όνοµα του αρχείου. Π.χ. αν θέλουµε να δηµιουργήσουµε στη σελίδα main.htm ένα δεσµό υπερκειµένου προς το αρχείο lesson1.htm, το οποίο περιέχεται στο κατάλογο περιέχεται στον κατάλογο lessons, τότε γράφουµε: <a href= lessons/lesson1.htm >Μάθηµα 1</a>. Σε περίπτωση που θέλουµε να χρησιµοποιήσουµε δεσµό προς σελίδα ανώτερου επιπέδου (π.χ. στο τελευταίο παράδειγµα από τη σελίδα lesson1.htm προς τη σελίδα main.htm) τότε πρέπει να χρησιµοποιήσουµε την ακολουθία «.../», για κάθε ένα επίπεδο της ιεραρχίας των καταλόγων. Π.χ. <a href=../main.htm >Κεντρική σελίδα</a>. Τα «/» και «../» µπορεί να χρησιµοποιηθούν περισσότερες από µία φορές σε µία ζεύξη και µπορεί να εµφανίζονται µε οποιαδήποτε σειρά. Π.χ. αν ένας κατάλογος περιέχει τους υποκαταλόγους lessons και presentations, και θέλουµε να 13

14 δηµιουργήσουµε µία ζεύξη υπερκειµένου από το αρχείο lesson1.htm του υποκαταλόγου lessons προς το αρχείο present1.ppt του υποκαταλόγου presentations, τότε η ζεύξη υπερκειµένου δηλώνεται ως: <a href=../presentations/present1.ppt >Παρουσίαση µαθήµατος 1</a>. 2.2 Τι είναι το URL Το URL (Uniform Resource Locator) είναι η διεύθυνση που χρησιµοποιεί το WWW για να δηλώσει τη θέση άλλων αρχείων που βρίσκονται στο Internet. Το URL βασικά αποτελείται από τρία µέρη: ένα αναγνωριστικό για τον τύπο του Internet server, ένα αναγνωριστικό για το µηχάνηµα και ένα αναγνωριστικό για τη θέση του αρχείου στο συγκεκριµένο µηχάνηµα. Η δοµή του URL είναι η ακόλουθη: type://in.ter.net.address/directory/sub-directory/.../filename Στην παραπάνω δοµή type είναι ο τύπος του Internet server. Οι τύποι που χρησιµοποιούνται, συνήθως, στις ζεύξεις υπερκειµένου, είναι οι http και ftp. Το type ακολουθείτε πάντα από το :// και στη συνέχεια από τη διεύθυνση στο Internet, που είναι της µορφής host.domain.domain.domain. Π.χ. το URL της σελίδας του µαθήµατος είναι: Στο παραπάνω URL ο τύπος του Internet server είναι http, το αναγνωριστικό του µηχανήµατος είναι icbnet.telecom.ntua.gr, ενώ το αναγνωριστικό της θέσης της ιστοσελίδας είναι selides/itech2/index.htm. Συχνά από το αναγνωριστικό της θέσης του αρχείου παραλείπεται από το όνοµα του αρχείου και δηλώνεται µόνο η θέση του (σε επίπεδο υποκαταλόγων). Όταν συµβαίνει αυτό, οι browsers ψάχνουν αυτόµατα να βρουν αν υπάρχει ένα αρχείο µε το όνοµα index.htm (ή index.html). Για το λόγο αυτό η κεντρική σελίδα των περισσότερων site ονοµάζεται index.htm. Η δυνατότητα αυτή των browser γλυτώνει και τον χρήστη από την πληκτρολόγηση του «index.htm. 2.3 εσµοί Υπερκειµένου σε τοποθεσίες του ιαδικτύου Για τη δηµιουργία ενός δεσµού σε τοποθεσίες του Internet χρησιµοποιείται η ετικέτα <a>, όπως και στην περίπτωση των δεσµών σε τοπικά αρχεία. Στην περίπτωση αυτή στη θέση του ονόµατος_αρχείου χρησιµοποιούµε το URL της τοποθεσίας στην οποία θέλουµε να δείχνει ο δεσµός: <a href= URL >Κείµενο δεσµού</a> Π.χ αν θέλουµε να δηλώσουµε ένα δεσµό που να δείχνει στην κεντρική σελίδα του µαθήµατος, µε κείµενο ζεύξης το «Εισαγωγή στις Τεχνολογίες ιαδικτύου» γράφουµε: <a href= > Εισαγωγή στις Τεχνολογίες ιαδικτύου </a> 2.4 εσµοί Υπερκειµένου σε τµήµατα της ίδιας σελίδας Πολλές φορές θέλουµε να δηµιουργήσουµε µία ιστοσελίδα η οποία περιέχει µεγάλη ποσότητα κειµένου. Ένας τρόπος οργάνωσής της είναι ο χωρισµός της σε επιµέρους ιστοσελίδες, και η δηµιουργία ενός πίνακα περιεχοµένων. Εκτός από αυτόν τον τρόπο οργάνωσης, η HTML µας παρέχει τη δυνατότητα δηµιουργίας δεσµών υπερκειµένου 14

15 προς κάποιο τµήµα της ίδιας σελίδας. Εξαιτίας της δυνατότητας αυτής µπορούµε να οργανώσουµε την ιστοσελίδα µας διαφορετικά: στην αρχή µπορούµε να δηµιουργήσουµε ένα πίνακα περιεχοµένων που θα χρησιµοποιεί δεσµούς προς άλλα τµήµατα της ιστοσελίδας, και στη συνέχεια να γράψουµε το κείµενο. Αυτό προσφέρει στο χρήστη της ιστοσελίδας µεγαλύτερη ευκολία ανάγνωσης του περιεχοµένου της ιστοσελίδας, αλλά και τη δυνατότητα αποθήκευσης όλου του κειµένου χωρίς την ανάγκη αποθήκευσης πολλών διαφορετικών ιστοσελίδων. Η HTML µας παρέχει τη δυνατότητα να δίνουµε κρυφά διακριτικά ονόµατα σε µέρη του κειµένου και στη συνέχεια να κάνουµε αναφορές (δεσµούς) σε αυτά. Για να δώσουµε ένα διακριτικό κρυφό όνοµα, π.χ. ΝΑΜΕ, σε ένα κείµενο, χρησιµοποιούµε την ετικέτα <a name= NAME >κείµενο</a>. Για την αναφορά στο τµήµα της σελίδας µε το κρυφό διακριτικό όνοµα NAME χρησιµοποιούµε την ετικέτα <a href= #NAME>Κείµενο δεσµού</a>. Τέλος, µπορούµε να δηµιουργήσουµε και δεσµούς προς τµήµατα άλλων ιστοσελίδων. Για το σκοπό αυτό χρησιµοποιείται πάλι η ετικέτα <a> µε το χαρακτηριστικό href να έχει σύνταξη URL#NAME. Στον παραπάνω συµβολισµό το URL µπορεί να αναφέρεται σε ένα αρχείο στο τοπικό µηχάνηµα ή σε ένα αρχείο στο Internet, και το NAME αναφέρεται στο κρυφό συµβολικό όνοµα µίας ενότητας του αρχείου. Π.χ. για να δηµιουργήσουµε ένα δεσµό προς το τµήµα Intro της σελίδας lessons.htm, από µία άλλη σελίδα που βρίσκεται στον ίδιο υποκατάλογο, γράφουµε: <a href= lessons.htm#intro>εισαγωγή</a>. 2.5 Παράδειγµα χρήσης των δεσµών υπερκειµένου Σκοπός µας είναι η δηµιουργία µιας βασικής δοµής για το site του µαθήµατος. Θέλουµε να έχουµε µία κεντρική σελίδα, την index.htm, στην οποία θα έχουµε δεσµούς υπερκειµένου προς 3 διαφορετικές τοπικές σελίδες, την lessons.htm, την present.htm και την descript.htm, αλλά και προς άλλες τοποθεσίες του ιαδικτύου, σχετικές µε την ύλη του µαθήµατος. Η σελίδα lessons.htm θα περιέχει τις σηµειώσεις του µαθήµατος. Συγκεκριµένα θα υπάρχουν δεσµοί υπερκειµένου προς τα αντίστοιχα µαθήµατα (σελίδες lesson_x.htm όπου x είναι ο αριθµός του µαθήµατος). Όλες οι σελίδες των µαθηµάτων βρίσκονται στον υποκατάλογο lessons. Σε κάθε σελίδα µαθήµατος θα υπάρχει ένας δεσµός προς την αντίστοιχη παρουσίαση. Η σελίδα present.htm θα περιέχει δεσµούς στις παρουσιάσεις. Ο λόγος ύπαρξής της σελίδας αυτής είναι η ευκολία του χρήστη. Όλα τα αρχεία των παρουσιάσεων (αρχεία pres_x.ppt όπου x είναι ο αριθµός του µαθήµατος στο οποίο αντιστοιχεί η παρουσίαση) καθώς και η σελίδα present.htm, θα περιέχονται στον υποκατάλογο present. Τέλος, η σελίδα descript.htm θα περιέχει γενική περιγραφή της ύλης του µαθήµατος, και θα βρίσκεται στον ίδιο κατάλογο µε την κεντρική σελίδα του µαθήµατος (index.htm). Για τους σκοπούς του παραδείγµατος αυτού θα δείξουµε µόνο τη βασική δοµή της κάθε σελίδας. Επίσης δεν θα περιγράψουµε την σελίδα descript.htm. 15

16 index.htm <html> <head> <title>εισαγωγή στις Τεχνολογίες ιαδικτύου</title> </head> <body> <h1>εισαγωγή στις Τεχνολογίες ιαδικτύου</h1> <a href="descript.htm">περιγραφή µαθήµατος</a><br> <a href="lessons/lessons.htm">σηµειώσεις µαθήµατος</a><br> <a href="present/present.htm">παρουσιάσεις</a><br> <h2>χρήσιµοι δεσµοί του ιαδικτύου </h2> <a href=" </body> </html> lessons/lessons.htm <html> <head> <title>σηµειώσεις µαθήµατος: Εισαγωγή στις Τεχνολογίες ιαδικτύου</title> </head> <body> <h1>σηµειώσεις µαθήµατος: Εισαγωγή στις Τεχνολογίες ιαδικτύου</h1> <ol> <li> <a href="lesson1.htm">εισαγωγή</a><br> </li> <li> <a href="lesson2.htm">πρωτόκολλο TCP/IP</a><br> </li> </ol> </body> </html> 16

17 lessons/lesson1.htm <html> <head> <title>εισαγωγή στις Τεχνολογίες ιαδικτύου: Εισαγωγή</title> </head> <body> <h1>εισαγωγή</h1> <p> Στις µέρες µας... </p> <a href="../present/present2.ppt">παρουσίαση</a> </body> </html> 17

18 present/present1.htm <html> <head> <title>παρουσιάσεις µαθήµατος: Εισαγωγή στις Τεχνολογίες ιαδικτύου</title> </head> <body> <h1>παρουσιάσεις µαθήµατος: Εισαγωγή στις Τεχνολογίες ιαδικτύου</h1> <ol> <li> <a href="present1.ppt">εισαγωγή</a><br> </li> <li> <a href="present2.ppt">πρωτόκολλο TCP/IP</a><br> </li> </ol> </body> </html> 18

19 3. Άλλες δυνατότητες της HTML 3.1 Προσχηµατισµένο κείµενο Ένα από τα πλεονεκτήµατα της HTML είναι η εµφάνιση του κειµένου όταν αυτό δεν χωράει σε µία γραµµή: το κείµενο αυτόµατα συνεχίζει στην επόµενη γραµµή. Επίσης, ο browser αγνοεί τυχόν κενά διαστήµατα που υπάρχουν ανάµεσα στις διάφορες λέξεις. Υπάρχουν, όµως, περιπτώσεις στις οποίες θέλουµε να απενεργοποιήσουµε αυτή τη δυνατότητα της HTML. Στις περιπτώσεις αυτές χρησιµοποιούµε την ετικέτα <pre> </pre>. Εντός της ετικέτας προσχηµατισµένου κειµένου µπορεί να χρησιµοποιηθούν οι άλλες ετικέτες της HTML. Μία σηµαντική χρήση του προσχηµατισµένου κειµένου είναι η αναπαράσταση του κώδικα διαφόρων γλωσσών προγραµµατισµού χωρίς την αλλοίωση της µορφής του. 3.2 Ειδικοί χαρακτήρες Σε πολλές περιπτώσεις είναι απαραίτητο να συµπεριλάβουµε κάποιο ειδικό χαρακτήρα στην ιστοσελίδα µας. Σαν παράδειγµα αναφέρουµε το σύµβολο του Copyright που πολλοί κατασκευαστές ιστοσελίδων έχουν στις σελίδες τους. Η HTML παρέχει τη δυνατότητα ειδικών χαρακτήρων µέσω της όπου xxxx είναι ο κωδικός για τον ειδικό χαρακτήρα. Στον παρακάτω πίνακα φαίνονται οι ειδικοί χαρακτήρες που εµφανίζονται πιο συχνά στις ιστοσελίδες. Copyright Trademark Cent Βαθµός διπλό µικρότερο από micron Άνω τελεία Άρνηση Παράγραφος Συν/Πλην Βρετανική Λίρα διπλό µεγαλύτερο από Ενότητα Γιεν «µ ±»? «µ ±» Μία άλλη χρησιµότητα των ειδικών χαρακτήρων είναι η αναπαράσταση των <, > και &. Οι τρεις αυτοί χαρακτήρες έχουν ειδική σηµασία στην HTML και για το λόγο αυτό δεν µπορούν να χρησιµοποιηθούν απευθείας στον κώδικα HTML. Αντιθέτως, οι χαρακτήρες αυτοί αναπαριστώνται από τις ακολουθίες &lt, &gt και &amp αντίστοιχα. 19

20 Τέλος, εάν θέλουµε να εισάγουµε επιπλέον κενά διαστήµατα µεταξύ των λέξεων µπορούµε να χρησιµοποιήσουµε τον ειδικό χαρακτήρα (non-breaking space) &nbsp. Μία σηµαντική χρήση του είναι στη δηµιουργία κενών κελιών σε πίνακες (ενότητα 3.4). 3.3 Στοίχιση κειµένου Στην HTML παρέχεται η δυνατότητα στοίχισης του κειµένου ένα κείµενο µπορεί να εµφανίζεται στο κέντρο της γραµµής, να είναι στοιχισµένο µόνο αριστερά, µόνο δεξιά ή αριστερά και δεξιά ταυτόχρονα. Πολλές ετικέτες της HTML περιέχουν ένα χαρακτηριστικό align που µας επιτρέπει τη στοίχιση του κειµένου. Χαρακτηριστικά αναφέρουµε την ετικέτα παραγράφου <p> </p> και τις ετικέτες επικεφαλίδων <hn> </hn>. Οι τιµές που µπορεί να πάρει το χαρακτηριστικό align είναι center, left, right για τη στοίχιση του κειµένου στο κέντρο, στα αριστερά και στα δεξιά, αντίστοιχα, της γραµµής. Για τη στοίχιση κειµένου και εικόνων η ετικέτα <img> έχει επίσης ένα χαρακτηριστικό align. ίνοντας τιµές left και right στο χαρακτηριστικό align µπορούµε να έχουµε την εικόνα στοιχισµένη αριστερά ή δεξιά της σελίδας. Το κείµενο HTML που ακολουθεί την εικόνα, στην περίπτωση αυτή, γεµίζει τον περιβάλλοντα χώρο της εικόνας. Αντίθετα, αν δεν γίνει χρήση του χαρακτηριστικού align, το κείµενο συνεχίζει σε καινούργια γραµµή κάτω από την εικόνα. Εκτός από τις παραπάνω µεθόδους, η HTML µας παρέχει και µία µέθοδο για την στοίχιση ολόκληρων τµηµάτων HTML κώδικα. Για το σκοπό αυτό χρησιµοποιείται η ετικέτα <div aligh=x> </div>, όπου το x µπορεί να πάρει τιµές left, right και center. Π.χ. αν θέλουµε να κεντράρουµε όλο το περιεχόµενο µιας σελίδας τότε µπορούµε να γράψουµε (φαίνεται µόνο το κύριο σώµα του HTML κώδικα): <body> <div align=center> </div> </body> 3.4 Πίνακες Οι πίνακες στην HTML χρησιµοποιούνται για την εκπλήρωση δύο βασικών επιδιώξεων. Πρώτον, για την συγκεντρωµένη οργάνωση άλλων στοιχείων της HTML και δεύτερον, για την διαµόρφωση της εµφάνισης των ιστοσελίδων. Γενικά, στην HTML οι πίνακες αποτελούνται από γραµµές, οι οποίες αποτελούνται από κελιά. Για να δηλώσουµε τα στοιχεία ενός πίνακα ξεκινάµε δηλώνοντας την πρώτη γραµµή, µετά τη δεύτερη, την τρίτη κτλ. έως ότου δηλώσουµε όλες τις γραµµές. Στη δήλωση της κάθε γραµµής περιέχεται η δήλωση όλων των στοιχείων κελιών που περιέχει η γραµµή. Για να δηλώσουµε έναν πίνακα χρησιµοποιούµε την ετικέτα <table> </table>. Μέσα στην ετικέτα του πίνακα δηλώνουµε τις ετικέτες της κάθε γραµµής του πίνακα <tr> </tr>, ενώ µέσα στην ετικέτα της κάθε γραµµής του πίνακα δηλώνουµε τις 20

21 ετικέτες των στοιχείων - κελιών της κάθε γραµµής. Υπάρχουν δύο ετικέτες στοιχείων: η <td> </td> και η <th> </th>. Στο εσωτερικό των παραπάνω ετικετών δηλώνονται τα δεδοµένα κάθε στοιχείου-κελιού του πίνακα. Η µόνη διαφορά µεταξύ των δύο ετικετών είναι ότι τα δεδοµένα της δεύτερης εµφανίζονται κεντραρισµένα και µε έντονα γράµµατα. Τα δεδοµένα ενός κελιού του πίνακα µπορεί να είναι οποιοδήποτε τµήµα κώδικα της HTML, π.χ. µία εικόνα ή ένας δεσµός υπερκειµένου. Η HTML µας παρέχει τη δυνατότητα να ορίσουµε το µέγεθος των περιγραµµάτων του πίνακα, χρησιµοποιώντας το χαρακτηριστικό border της ετικέτας του πίνακα. Π.χ. αν θέλουµε να δηµιουργήσουµε ένα πίνακα µε πάχος περιγράµµατος 3 pixel γράφουµε: <table border=3> </table>. Ένα σηµείο που πρέπει να προσεχτεί ιδιαίτερα είναι η ύπαρξη κενών κελιών (π.χ. κελιών που δηλώνονται ως <td></td>) στον πίνακα. Όλοι οι browsers δεν συµπεριφέρονται µε τον ίδιο τρόπο στην ύπαρξη κενών κελιών. Για την σωστή αναπαράσταση των πινάκων που έχουν κενά κελιά, τα κενά κελιά πρέπει να δηλώνονται κάνοντας χρήση του ειδικού χαρακτήρα non-breaking space (&nbsp). Εποµένως, ο σωστός τρόπος δήλωσης των κενών κελιών είναι: <td>&nbsp</td>. Στο παρακάτω παράδειγµα δηµιουργούµε έναν πίνακα 3x4. Τα στοιχεία της πρώτης γραµµής και της πρώτης στήλης του πίνακα δηλώνονται µε την ετικέτα <th> </th> για να τους δοθεί περισσότερη έµφαση σε σχέση µε τα υπόλοιπα στοιχεία του πίνακα. <html> <head> <title>στοιχεία απογραφής 2001</title> </head> <body> <h1>στοιχεία απογραφής 2001</h1> <table border=2> <tr> <!-- Πρώτη γραµµή --> <th>&nbsp</th> <th>άνδρες</th> <th>γυναίκες</th> <th>σύνολο</th> </tr> <tr> <!-- εύτερη γραµµή --> <th>σύνολο χώρας</th> <td> </td> <td> </td> <td> </td> </tr> <tr> <!-- Τρίτη γραµµή --> <th>ελλάδα</th> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> 21

22 Όπως αναφέρθηκε και στην αρχή της ενότητας, οι πίνακες µπορεί να χρησιµοποιηθούν και για τη διαµόρφωση της εµφάνισης των ιστοσελίδων. Για να αναγκάσουµε τα περιεχόµενα µίας ιστοσελίδας να στοιχιστούν µε ένα νοητό πλαίσιο δηµιουργούµε έναν πίνακα µε µηδενικό πάχος περιγράµµατος: <table border=0> </table> και στη συνέχεια δηλώνουµε όλα τα στοιχεία του πίνακα. Όλες οι παράµετροιχαρακτηριστικά για την µορφοποίηση των πινάκων, που αναφέρθηκαν προηγουµένως, µπορούν να χρησιµοποιηθούν και στην περίπτωση των «αόρατων» πινάκων. Για την στοίχιση του κειµένου χρησιµοποιείται το χαρακτηριστικό align. Το χαρακτηριστικό αυτό εφαρµόζεται σε όλες τις ετικέτες που αναφέρθηκαν στην ενότητα αυτή. Το περιεχόµενο των πινάκων µπορεί να στοιχιστεί και ως προς τον κατακόρυφο άξονα. Για το σκοπό αυτό χρησιµοποιείται το χαρακτηριστικό valign, το οποίο παίρνει τιµές top, bottom και middle για τη στοίχιση του κειµένου στην κορυφή, στο κάτω µέρος ή στο µέσο του κελιού. Η HTML παρέχει τη δυνατότητα για συνδυασµό των παραπάνω χαρακτηριστικών για την καλύτερη εµφάνιση των περιεχοµένων του πίνακα. Με τον τρόπο δηµιουργίας των πινάκων που περιγράψαµε παραπάνω δηµιουργούµε πίνακες που έχουν σε όλες τις γραµµές και σε όλες τις στήλες τον ίδιο αριθµό κελιών. Σε περίπτωση, όµως, που θέλουµε να δηµιουργήσουµε κελιά που επεκτείνονται σε περισσότερες από µία στήλες ή σε περισσότερες από µία γραµµές, πρέπει να το δηλώσουµε ρητά κάνοντας χρήση των χαρακτηριστικών colspan και rowspan στις ετικέτες <td> </td> και <th> </th>. Ανάλογα µε τη τιµή που θα δώσουµε στα παραπάνω δύο χαρακτηριστικά δηµιουργούµε κελιά που καταλαµβάνουν συγκεκριµένο αριθµό γραµµών και στηλών του πίνακα. Για την µορφοποίηση των πινάκων µπορούµε να χρησιµοποιήσουµε και άλλα χαρακτηριστικά των ετικετών που αναφέρθηκαν παραπάνω. Με το χαρακτηριστικό cellpadding µπορούµε να δηλώσουµε την απόσταση (σε pixels) που θα έχουν τα περιεχόµενα των κελιών από το περίγραµµα του κάθε κελιού. Επίσης µπορούµε να ορίσουµε και την απόσταση µεταξύ των ίδιων των κελιών (σε pixels) κάνοντας χρήση του χαρακτηριστικού cellspacing. 22

23 Επίσης, µπορούµε να δηλώσουµε και το µέγεθος του πίνακα στην οθόνη του browser. Αν δεν το δηλώσουµε ρητά, ο πίνακας θα εµφανιστεί να έχει µέγεθος που εξαρτάται από το µέγεθος των περιεχοµένων των κελιών του. Για να δηλώσουµε ρητά το µέγεθος του πίνακα χρησιµοποιούµε το χαρακτηριστικό width της ετικέτας <table>. Το πλάτος του πίνακα µπορεί να καθοριστεί είτε απόλυτα (σε αριθµό pixels) είτε σχετικά µε το µέγεθος της οθόνης του browser (επί τις εκατό). Π.χ. για να δηλώσουµε έναν πίνακα που να έχει πλάτος 300 pixels γράφουµε: <table width= 300 > </table> ενώ για να δηλώσουµε έναν πίνακα που θα καταλαµβάνει τα ¾ της οθόνης του browser γράφουµε: <table width= 75% > </table> Σε έναν πίνακα µπορούµε να δώσουµε τίτλο χρησιµοποιώντας την ετικέτα <caption> </caption>. Η ετικέτα αυτή πρέπει να βρίσκεται µέσα στην ετικέτα <table> </table> και µπορεί στο εσωτερικό της να υπάρχει οποιοσδήποτε κώδικας HTML. Ο τίτλος εµφανίζεται κεντραρισµένος στο πάνω µέρος του πίνακα. Αν θέλουµε ο τίτλος να εµφανίζεται στο κάτω µέρος του πίνακα µπορούµε να χρησιµοποιήσουµε το χαρακτηριστικό align της ετικέτας caption µε τιµή bottom: <caption align= bottom > </caption> Στη συνέχεια τροποποιούµε το παράδειγµα που δόθηκε παραπάνω, κάνοντας χρήση των χαρακτηριστικών cellpadding, cellspacing και caption. <html> <head> <title>στοιχεία απογραφής 2001</title> </head> <body> <table border=2 cellpadding=10 cellspacing=3> <caption><b><i>στοιχεία απογραφής 2001</i></b></caption> <tr> <!-- Πρώτη γραµµή --> <th>&nbsp</th> <th>άνδρες</th> <th>γυναίκες</th> <th>σύνολο</th> </tr> <tr> <!-- εύτερη γραµµή --> <th>σύνολο χώρας</th> <td> </td> <td> </td> <td> </td> </tr> <tr> <!-- Τρίτη γραµµή --> <th>ελλάδα</th> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> 23

24 3.5 Χρώµα Οι περισσότεροι από τους σύγχρονους browsers έχουν τη δυνατότητα απεικόνισης χρώµατος, τόσο για το κείµενο όσο και για το φόντο. Για την αναπαράσταση των χρωµάτων χρησιµοποιείται η RGB (Red Green Blue) κωδικοποίηση των χρωµάτων. Στην κωδικοποίηση αυτή δίνουµε τιµές από 0 έως και 255 στα τρία βασικά χρώµατα (κόκκινο πράσινο µπλε) για την αναπαράσταση της έντασης του κάθε βασικού χρώµατος στην τελική απόχρωση. Αν χρησιµοποιηθεί τιµή 0 σε ένα χρώµα το χρώµα αυτό δεν συµµετέχει στην τελική απόχρωση, ενώ αν χρησιµοποιηθεί τιµή 255 τότε συµµετέχει στο µέγιστο βαθµό. Όταν και τα τρία βασικά χρώµατα έχουν την τιµή 0 τότε παράγεται το µαύρο, ενώ όταν και τα τρία έχουν την τιµή 255 το λευκό. Στην HTML το κάθε χρώµα αναπαριστάται από την ακολουθία #xxxxxx όπου τα δύο πρώτα xx αντιστοιχούν στην τιµή του κόκκινου (στο δεκαεξαδικό σύστηµα αρίθµησης). Αντίστοιχα τα επόµενα ζεύγη xx αντιστοιχούν στο πράσινο και στο µπλε. Εκτός από την παραπάνω αναπαράσταση των χρωµάτων η HTML περιέχει και συµβολικά ονόµατα για κάποια βασικά χρώµατα. Μερικά από αυτά φαίνονται στον παρακάτω πίνακα, µε τα αντίστοιχα ονόµατά τους. #00FFFF gray # navy # silver #C0C0C0 black # green # olive # teal # blue #0000FF lime #00FF00 purple # white #FFFFFF fuchsia #FF00FF maroon # red #FF0000 yellow #FFFF00 Για να αλλάξουµε το φόντο µίας σελίδας χρησιµοποιείται το χαρακτηριστικό bgcolor της ετικέτας body. Στην ετικέτα body χρησιµοποιούνται και άλλα χαρακτηριστικά για τον έλεγχο των χρωµάτων της σελίδας: για το χρώµα του απλού κειµένου το 24

25 χαρακτηριστικό text, για το χρώµα των δεσµών υπερκειµένου το link, ενώ για τους δεσµούς υπερκειµένου τους οποίους έχουµε επισκεφτεί το vlink. Όλα τα παραπάνω χαρακτηριστικά δέχονται ως τιµή το συµβολικό όνοµα ή την ακολουθία #xxxxx του αντίστοιχου χρώµατος που θέλουµε να χρησιµοποιήσουµε. Στη συνέχεια θα τροποποιήσουµε την σελίδα index.htm του παραδείγµατος της παραγράφου 2.5, ώστε να εµφανίζεται µε διαφορετικά χρώµατα: το φόντο να είναι µαύρο, το κείµενο λευκό, οι δεσµοί κόκκινοι και οι δεσµοί που έχουµε επισκεφτεί µε το χρώµα #8888aa. <html> <head> <title>εισαγωγή στις Τεχνολογίες ιαδικτύου</title> </head> <body bgcolor="black" text="white" link="red" vlink=#8888aa> <h1>εισαγωγή στις Τεχνολογίες ιαδικτύου</h1> <a href="descript.htm">περιγραφή µαθήµατος</a><br> <a href="lessons/lessons.htm">σηµειώσεις µαθήµατος</a><br> <a href="present/present.htm">παρουσιάσεις</a><br> <h2>χρήσιµοι δεσµοί του ιαδικτύου </h2> <a href=" </body> </html> Στην περίπτωση που θέλουµε να αλλάξουµε τα προκαθορισµένα χρώµατα που χρησιµοποιεί ο browser για την αναπαράσταση των διαφόρων στοιχείων της ιστοσελίδας, ιδιαίτερη προσοχή πρέπει να δοθεί στην τιµή των χρωµάτων που θα επιλέξουµε. Μία λανθασµένη επιλογή χρωµάτων µπορεί να οδηγήσει τους χρήστες σε προβλήµατα ανάγνωσης του περιεχοµένου της ιστοσελίδας. 25

26 Τέλος, µπορούµε να έχουµε ως φόντο της ιστοσελίδας κάποια εικόνα. Για το σκοπό αυτό χρησιµοποιείται το χαρακτηριστικό background της ετικέτας body. Η τιµή του χαρακτηριστικού αυτού δηλώνεται µε τον ίδιο τρόπο που δηλώνεται και στις εικόνες. Π.χ. αν θέλουµε η ιστοσελίδα να εµφανίζεται µε φόντο το αρχείο bground.gif τότε πρέπει να δηλώσουµε την ετικέτα body ως εξής: <body background= bground.gif > </body> Σε περίπτωση που η εικόνα έχει µικρότερο µέγεθος από το παράθυρο του browser η εικόνα του φόντου επαναλαµβάνεται τόσο κατά τον κατακόρυφο όσο και κατά τον οριζόντιο άξονα ώστε να καλύψει ολόκληρη την επιφάνεια του παραθύρου. Ιδιαίτερη προσοχή πρέπει να δοθεί στο µέγεθος του αρχείου της εικόνας, ώστε να µη καθυστερεί υπερβολικά η εµφάνιση της ιστοσελίδας στον browser του χρήστη, αλλά και στην επιλογή της ίδιας της εικόνας. Πολλές φορές µία λανθασµένη επιλογή φόντου µπορεί να προκαλέσει προβλήµατα στην αναγνωσιµότητα της ιστοσελίδας. Η HTML υποστηρίζει, επίσης, χρώµατα και στα κελιά των πινάκων, αλλά η κάλυψη του θέµατος αυτού ξεπερνά τον σκοπό των σηµειώσεων αυτών. 3.6 Γραµµατοσειρές Στην προηγούµενη ενότητα είδαµε πως µπορούµε να αλλάξουµε το χρώµα και το φόντο του κειµένου ολόκληρης της ιστοσελίδας. Στην ενότητα αυτή θα δούµε πως µπορούµε να αλλάξουµε τo χρώµα του κειµένου σε κάποιο τµήµα της ιστοσελίδας. Επίσης, θα δούµε περισσότερες τεχνικές µορφοποίησης του εµφανιζόµενου κειµένου. Η ετικέτα που χρησιµοποιείται για τον σκοπό αυτό είναι η <font> </font>. Ανάλογα µε τη µορφοποίηση που θέλουµε να κάνουµε στο κείµενο που βρίσκεται στο εσωτερικό της χρησιµοποιούµε αντίστοιχα χαρακτηριστικά της. Χρησιµοποιώντας το χαρακτηριστικό size αλλάζουµε το µέγεθος του προς εµφάνιση κειµένου. Το χαρακτηριστικό αυτό µπορεί να πάρει τιµές από 1 έως και 7, µε την τιµή 3 να αντιστοιχεί στο κανονικό µέγεθος της γραµµατοσειράς. Οι τιµές 1 και 2 αντιστοιχούν σε µικρότερα µεγέθη, ενώ οι τιµές 4, 5, 6 και 7 σε µεγαλύτερα µεγέθη. Επίσης στο χαρακτηριστικό αυτό µπορούµε να δώσουµε το σχετικό µέγεθος της γραµµατοσειράς (από το κανονικό της µέγεθος). Αν θέλουµε ένα κείµενο να εµφανίζεται µε µικρότερη γραµµατοσειρά κατά δύο τάξεις µεγέθους από το κανονικό µέγεθος τότε γράφουµε: <font size=-2> </font>. Στην περίπτωση που θέλουµε να εµφανίζεται το κείµενο µεγαλύτερο κατά τρεις τάξεις µεγέθους σε σχέση µε το κανονικό µέγεθος γράφουµε: <font size=+3> </font>. Όπως αναφέρθηκε προηγουµένως η HTML για το κανονικό µέγεθος του κειµένου χρησιµοποιεί την τιµή 3. Αν θέλουµε να αλλάξουµε την παραπάνω τιµή τότε πρέπει να χρησιµοποιήσουµε την ετικέτα <basefont> µε το χαρακτηριστικό size να έχει την επιθυµητή τιµή. Π.χ. αν θέλουµε να δώσουµε στο κανονικό µέγεθος γραµµατοσειράς την τιµή 4 γράφουµε: <basefont size=4>. Για να δώσουµε κάποιο συγκεκριµένο χρώµα σε ένα κοµµάτι κειµένου της ιστοσελίδας χρησιµοποιούµε την ετικέτα <font> </font> και το χαρακτηριστικό της color. Το χαρακτηριστικό αυτό είναι αντίστοιχο µε το χαρακτηριστικό text της ετικέτας <body> </body>, και συντάσσεται µε τον ίδιο τρόπο. Π.χ. αν θέλουµε να εµφανιστεί ένα κείµενο µε κόκκινο χρώµα γράφουµε: <font color=#aa0000> </font>. Στην HTML µπορούµε να γράψουµε δείκτες και εκθέτες, που χρησιµοποιούνται συχνά σε µαθηµατικούς τύπους. Για να δηλώσουµε έναν εκθέτη (superscript) χρησιµοποιούµε την ετικέτα <sup> </sup>, ενώ για να δηλώσουµε ένα δείκτη 26

27 (subscript) την ετικέτα <sub> </sub>. Π.χ. για να δηλώσουµε στην HTML τον τύπο x 1 2 γράφουµε: x<sub>1</sub><sup>2</sup>. Για την εµφάνιση του κειµένου ο browser χρησιµοποιεί κάποιες προκαθορισµένες γραµµατοσειρές. Αν θέλουµε να χρησιµοποιήσουµε κάποια συγκεκριµένη γραµµατοσειρά πρέπει να χρησιµοποιήσουµε το χαρακτηριστικό face της ετικέτας <font> </font>. Το χαρακτηριστικό αυτό δέχεται ως τιµή µία λίστα από ονόµατα γραµµατοσειρών. Ο browser εξετάζει αν είναι εγκατεστηµένες στο σύστηµα του χρήστη οι γραµµατοσειρές που δηλώνονται στο χαρακτηριστικό αυτό, µε την ίδια σειρά µε την οποία δηλώνονται Σε περίπτωση που βρεθεί κάποια από τις επιθυµητές γραµµατοσειρές τότε χρησιµοποιείται για την απεικόνιση του κειµένου που βρίσκεται στο εσωτερικό της ετικέτας font, αλλιώς χρησιµοποιείται η γραµµατοσειρά µε την οποία εµφανίζεται η υπόλοιπη ιστοσελίδα. Στην περίπτωση που δηλώνονται, µε τον τρόπο αυτό, γραµµατοσειρές πρέπει να δοθεί ιδιαίτερη προσοχή ώστε να επιλεγούν γραµµατοσειρές που να είναι κοινές στους περισσότερους χρήστες. Στο προηγούµενο παράδειγµα αν θέλαµε να χρησιµοποιούσαµε την γραµµατοσειρά Arial για την αναπαράσταση του µαθηµατικού τύπου θα µπορούσαµε να περικλείσουµε ολόκληρη τη δήλωσή του στο εσωτερικό µίας ετικέτας font: <font face= Arial >x<sub>1</sub><sup>2</sup></font> Τέλος, εκτός από τις ετικέτες στυλ <b> </b> και <i> </i>, που αναφέρθηκαν στην ενότητα 1.5, η HTML µας παρέχει και δύο άλλες: την ετικέτα υπογράµµισης (underline) <u> </u> και την ετικέτα διαγραφής κειµένου (Strike through) <strike> </strike>. Π.χ. για να δηλώσουµε ένα κείµενο να εµφανίζεται υπογραµµισµένο και µε έντονη γραφή γράφουµε <b><u>κείµενο</u></b>. 3.7 εσµοί Πολλές φορές θέλουµε να συµπεριλάβουµε στην ιστοσελίδα µας µία διεύθυνση e- mail, ώστε ο αναγνώστης να µπορεί να έρθει σε επικοινωνία µε τον υπεύθυνο για την συντήρηση της, π.χ. για να στείλει κάποια σχόλια ως προς τα περιεχόµενά της. Η HTML παρέχει τη δυνατότητα να συµπεριλάβουµε µία διεύθυνση e mail στην ιστοσελίδα και όταν ο χρήστης κάνει κλικ µε το ποντίκι πάνω της να ανοίγει το ένα παράθυρο ή ένα πρόγραµµα (ανάλογα µε την επιλογή που έχει επιλέξει ο κάθε χρήστης στον κάθε browser). Η δηµιουργία ενός δεσµού γίνεται µε τον ίδιο τρόπο µε τον οποίο δηµιουργούνται και οι δεσµοί υπερκειµένου. Συγκεκριµένα, χρησιµοποιείται η ετικέτα <a> µε το χαρακτηριστικό href να έχει τιµή mailto:διεύθυνση_ . Η διεύθυνση αποτελείται από ένα όνοµα χρήστη και τον εξυπηρετητή: χρήστης@εξυπηρετητής. Π.χ. για να δηλώσουµε έναν δεσµό γράφουµε: <a href= mailto:xxx@yyy.com >XXX</a> 3.8 Πλαίσια Όταν κάνουµε κλικ πάνω σε ένα δεσµό υπερκειµένου τα περιεχόµενα του φορτώνονται στο ίδιο παράθυρο του browser. Χρησιµοποιώντας τα πλήκτρα back / forward του browser µπορούµε να µεταφερθούµε µεταξύ σειράς των ιστοσελίδων που έχουµε επισκεφτεί. Η HTML παρέχει τη δυνατότητα της εµφάνισης των περιεχοµένων του δεσµού σε καινούργια παράθυρο του browser καθώς και σε 27

28 (ορθογώνια) τµήµατα του παραθύρου του browser. Σχετική έννοια µε το τελευταίο θέµα είναι και η έννοια των πλαισίων (frames). Τα πλαίσια κάνουν µία σελίδα να µοιάζει µε ένα αρχείο, ενώ στην ουσία αποτελείται από περισσότερα. Αυτό έχει ως πλεονέκτηµα ορισµένα τµήµατά της να παραµένουν σταθερά ενώ κάποια άλλα τµήµατά της µεταβάλλονται (π.χ. σε ένα τµήµα του παραθύρου του browser - πλαίσιο µπορεί να υπάρχει ένας πίνακας περιεχοµένων που να παραµένει σταθερός ενώ σε άλλο πλαίσιο µπορεί να εµφανίζονται τα περιεχόµενα της ιστοσελίδας). Ως µειονέκτηµα µπορούµε να αναφέρουµε την ανάγκη δηµιουργίας και συντήρησης περισσότερων αρχείων HTML καθώς και την επιπλέον καθυστέρηση στο φόρτωµα της ιστοσελίδας από τον browser. Το πρώτο βήµα για να δηµιουργήσουµε µία ιστοσελίδα που θα περιέχει πλαίσια στην αρχή πρέπει να δηλώσουµε τον τρόπο µε τον οποίο θα χωρίζεται η οθόνη του browser, σε ένα ξεχωριστό αρχείο. Το αρχείο αυτό θα περιέχει την ετικέτα <frameset> </frameset> στη θέση της ετικέτας body. Για τον ορισµό της δοµής των πλαισίων η ετικέτα αυτή πρέπει να έχει το χαρακτηριστικό rows ή το χαρακτηριστικό cols, για τη διάσπαση της σελίδας σε πλαίσια κατά τον κατακόρυφο ή τον οριζόντιο άξονα, αντίστοιχα. Σε περίπτωση που θέλουµε να δηµιουργήσουµε µία πιο περίπλοκη δοµή πλαισίων, µπορούµε να χρησιµοποιήσουµε ένθετες ετικέτες frameset. Οι τιµές που εισάγονται στα παραπάνω χαρακτηριστικά καθορίζουν τον αριθµό και τις διαστάσεις των γραµµών ή των στηλών της σελίδας, και δίνονται ως λίστα των διαστάσεων των πλαισίων (διαχωρισµένων µε,) είτε σε απόλυτο αριθµό pixels είτε σε ποσοστό του παραθύρου του browser. Σε περίπτωση που θέλουµε ένα πλαίσιο να καταλάβει το υπόλοιπο παράθυρο του browser χρησιµοποιούµε το σύµβολο *. Χρησιµοποιώντας το σύµβολο * µετά από έναν αριθµό x (x*) δηλώνουµε ότι θέλουµε το συγκεκριµένο πλαίσιο να είναι κατά x φορές µεγαλύτερο από το πλαίσιο που δηλώθηκε µε το *. Π.χ. για να χωρίσουµε το παράθυρο του browser σε τέσσερις γραµµές, µε την πρώτη να έχει µέγεθος 100 pixels, η δεύτερη να καταλαµβάνει το 1/5 του παραθύρου και η τρίτη να είναι 3 φορές µεγαλύτερη της τέταρτης, γράφουµε: <frameset rows= 100,20%,3*,* > </frameset> Στο εσωτερικό της ετικέτας frameset πρέπει να υπάρχει αριθµός ετικετών <frame> ίσος µε τον αριθµό των πλαισίων που δηλώθηκαν στην ετικέτα frameset. Αντί της ετικέτας frame µπορεί να χρησιµοποιηθεί η ετικέτα frameset σε περίπτωση που θέλουµε να δηµιουργήσουµε πολύπλοκη δοµή πλαισίων. Κάθε ετικέτα frame περιέχει το χαρακτηριστικό src, η τιµή του οποίου είναι ένα URL ή ένα τοπικό αρχείο. Αν π.χ. θέλαµε στο προηγούµενο παράδειγµα να δηλώσουµε ότι στην πρώτη γραµµή θα εµφανίζεται το αρχείο title.htm, στη δεύτερη το contents.htm, στην τρίτη το lesson1.htm ενώ στο τέταρτο το comment1.htm θα γράφαµε: <frameset rows= 100,20&,3*,* > <frame src= title.htm > <frame src= contents.htm > <frame src= lesson1.htm > <frame src= comment1.htm > </frameset> 28

29 3.9 Άλλες δυνατότητες της HTML Όλες οι ετικέτες της HTML περιέχουν και άλλα χαρακτηριστικά για τον περαιτέρω έλεγχο του τρόπου εµφάνισης του περιεχοµένου της ιστοσελίδας. Επίσης, η HTML παρέχει µία πληθώρα άλλων δυνατοτήτων, µερικές από τις οποίες θα περιγράψουµε στην ενότητα αυτή. Σε προηγούµενη ενότητα περιγράψαµε τον τρόπο µε τον οποίο µπορούµε να ενσωµατώσουµε µία εικόνα που παράλληλα να είναι και δεσµός προς κάποια άλλο έγγραφο του τοπικού µηχανήµατος / ιαδικτύου. Η HTML παρέχει και τη δυνατότητα διαφορετικά τµήµατα της εικόνας να αντιστοιχούν σε διαφορετικές ενέργειες, π.χ. σε διαφορετικούς δεσµούς υπερκειµένου. Στην περίπτωση αυτή οι εικόνες ονοµάζονται χάρτες γραφικών (image maps). Επίσης η HTML παρέχει και την ετικέτα <META> για την συµπερίληψη στην ιστοσελίδα πληροφοριών που δεν εµφανίζονται στον browser. Η ετικέτα αυτή βρίσκεται εντός της ετικέτας <head> </head> και συχνά χρησιµοποιείται για τη µετάβαση σε διαφορετικά ιστοσελίδα µετά από προκαθορισµένο χρονικό διάστηµα και για τον εντοπισµό της ιστοσελίδας από µηχανές αναζήτησης του ιαδικτύου. Επίσης, η HTML παρέχει τη δυνατότητα να συµπεριλάβουµε στις ιστοσελίδες και άλλους τύπους πολυµέσων (multimedia) εκτός από το κείµενο και τις εικόνες που αναφέρθηκαν παραπάνω. Σε µία ιστοσελίδα µπορούµε να ενσωµατώσουµε ήχους που θα ακούγονται κατά τη διάρκεια της παραµονής µας σε αυτήν καθώς και αρχεία βίντεο. Όπως και στην περίπτωση των εικόνων, έτσι και στην περίπτωση αυτή, τα αρχεία αυτά δηµιουργούν µεγαλύτερο όγκο δεδοµένων που πρέπει να µεταφερθούν (συνήθως) πάνω από σχετικά αργές προσβάσεις, µε αποτέλεσµα µεγαλύτερη καθυστέρηση στο φόρτωµα της ιστοσελίδας. Αν τα αρχεία έχουν αρκετά µεγάλο µέγεθος, καλό είναι στην ιστοσελίδα να συµπεριληφθεί ένας δεσµός προς τα αρχεία αυτά. Τέλος, η HTML παρέχει και τη δυνατότητα εισαγωγής δεδοµένων από τον χρήστη. Τα δεδοµένα αυτά αποστέλλονται (π.χ. σε περίπτωση browser µε γραφικό περιβάλλον µέσω του πατήµατος ενός πλήκτρου που εµφανίζεται στην σελίδα) από τον browser του χρήστη στον εξυπηρετητή όπου βρίσκεται η ιστοσελίδα. Στον εξυπηρετητή µπορεί να υπάρχει κατάλληλη οντότητα που να δέχεται τα δεδοµένα και να τα επεξεργάζεται. 29

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Πίνακες. ιδιότητες ετικέτας <tr>

Πίνακες. ιδιότητες ετικέτας <tr> Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Πίνακες. ετικέτα <table>

Πίνακες. ετικέτα <table> Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

Διαβάστε περισσότερα

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

Κειµενογράφοι ετικετών

Κειµενογράφοι ετικετών ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε

Διαβάστε περισσότερα

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

<HTML> <HEAD> <TITLE> <BODY>

<HTML> <HEAD> <TITLE> <BODY> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει

Διαβάστε περισσότερα

Εισαγωγή στην HTML (1)

Εισαγωγή στην HTML (1) Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 2. Το περιβάλλον του παγκόσμιου Ιστού Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Πλεονεκτήματα παγκόσμιου Ιστού Εξυπηρετητής Ιστού & Ιστοσελίδες Κύριες

Διαβάστε περισσότερα

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp; ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

Εισαγωγή στην HTML (2)

Εισαγωγή στην HTML (2) Εισαγωγή στην HTML (2) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Εικόνες Βασικοί τύποι εικόνων στην HTML gif jpg bmp (μεγάλο μέγεθος αρχείου) tiff (μεγάλο

Διαβάστε περισσότερα

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό

Διαβάστε περισσότερα

Αλεξιάδης Γεώργιος (ΠΕ86) -

Αλεξιάδης Γεώργιος (ΠΕ86) - 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

Εισαγωγή στην πληροφορική

Εισαγωγή στην πληροφορική Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις

Διαβάστε περισσότερα

Η λίστα <ol> (ordered list)

Η λίστα <ol> (ordered list) Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

Διαβάστε περισσότερα

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week 7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς μπορεί να μας διευκολύνει στις δραστηριότητές μας. Να περιγράψουμε σύντομα την

Διαβάστε περισσότερα

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ Δρ. Κουζαπάς Δημήτριος Πανεπιστήμιο Κύπρου - Τμήμα Πληροφορικής Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς

Διαβάστε περισσότερα

Η Γλώσσα Προγραμματισμού του Internet HTML

Η Γλώσσα Προγραμματισμού του Internet HTML Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),

Διαβάστε περισσότερα

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ. Παγκόσμιος Ιστός

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ. Παγκόσμιος Ιστός ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς μπορεί να μας διευκολύνει στις δραστηριότητές μας. Να περιγράψουμε

Διαβάστε περισσότερα

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google

Διαβάστε περισσότερα

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων

Διαβάστε περισσότερα

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία

Διαβάστε περισσότερα

World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών

World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών Περιεχόµενα World Wide Web: Ο παγκόσµιος ιστός Πληροφοριών Εισαγωγή Ιστορική Αναδροµή Το ιαδίκτυο και το WWW Υπερκείµενο Εντοπισµός πληροφοριών στο WWW Search Engines Portals Unicode Java Plug-Ins 1 2

Διαβάστε περισσότερα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πίνακες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

ΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙ ΑΣ ΣΤΟ MICROSOFT WORD

ΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙ ΑΣ ΣΤΟ MICROSOFT WORD ΗΜΙΟΥΡΓΙΑ ΙΣΤΟΣΕΛΙ ΑΣ ΣΤΟ MICROSOFT WORD Σε ορισµένες περιπτώσεις είναι ιδιαίτερα χρήσιµη η δηµιουργία ιστοσελίδων ενηµερωτικού περιεχοµένου οι οποίες στη συνέχεια µπορούν να δηµοσιευθούν σε κάποιο τόπο

Διαβάστε περισσότερα

Παρουσίαση και μορφοποίηση κειμένου

Παρουσίαση και μορφοποίηση κειμένου HTML [ετικέτες] Παρουσίαση και μορφοποίηση κειμένου Στην HTML σύμφωνα με τους κανόνες, κενές γραμμές και περισσότερα του ενός κενά μεταξύ λέξεων δεν λαμβάνονται υπόψη από τον φυλλομετρητή. Για αυτό το

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.

Διαβάστε περισσότερα

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20 Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες

Διαβάστε περισσότερα

Κεφάλαιο Χρήση κειµενογράφου. 4.1 Εισαγωγή Σκοπός Τι θα µάθεις

Κεφάλαιο Χρήση κειµενογράφου. 4.1 Εισαγωγή Σκοπός Τι θα µάθεις Κεφάλαιο 4 4. Χρήση κειµενογράφου 4.1 Εισαγωγή Η επεξεργασία κειµένων και εγγράφων αποτελεί µια από τις πιο διαδεδοµένες χρήσεις του Ηλεκτρονικού Υπολογιστή. Το κεφάλαιο αυτό αποτελεί µια εισαγωγή στον

Διαβάστε περισσότερα

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Εικόνα, κείμενο και εικόνα Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό

Διαβάστε περισσότερα

International Diploma in IT Skills Proficiency Level

International Diploma in IT Skills Proficiency Level International Diploma in IT Skills Proficiency Level Εξεταστέα Ύλη ιεθνές Πιστοποιητικό στην Τεχνολογία των Πληροφοριών Επίπεδο Proficiency 3.2.5 ΓΝΩΣΤΙΚΟ ΑΝΤΙΚΕΙΜΕΝΟ 5: ΥΠΗΡΕΣΙΕΣ ΙΑ ΙΚΤΥΟΥ - ΗΜΙΟΥΡΓΙΑ

Διαβάστε περισσότερα

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

Διαβάστε περισσότερα

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

Διαβάστε περισσότερα

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section> Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά

Διαβάστε περισσότερα

ΙΕΚ ΜΕΓΑΡΩΝ ΤΜΗΜΑ ΤΕΧΝΙΚΟY ΙΑΧΕΙΡΙΣΗΣ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΠΑΡΟΧΗΣ ΥΠΗΡΕΣΙΩΝ INTERNET / INTRANET

ΙΕΚ ΜΕΓΑΡΩΝ ΤΜΗΜΑ ΤΕΧΝΙΚΟY ΙΑΧΕΙΡΙΣΗΣ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΠΑΡΟΧΗΣ ΥΠΗΡΕΣΙΩΝ INTERNET / INTRANET ΙΕΚ ΜΕΓΑΡΩΝ ΤΜΗΜΑ ΤΕΧΝΙΚΟY ΙΑΧΕΙΡΙΣΗΣ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΠΑΡΟΧΗΣ ΥΠΗΡΕΣΙΩΝ INTERNET / INTRANET Σηµειώσεις στο FRONTPAGE 2003 ΚΟΥΣΤΕΡΗ ΜΑΡΙΑ Μέγαρα εκέµβριος 2007 FRONTPAGE 2003 Εισαγωγή Το FrontPage είναι

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

ηµιουργία γραφικών πινάκων στο Word

ηµιουργία γραφικών πινάκων στο Word ηµιουργία γραφικών πινάκων στο Word 7.1. ηµιουργία γραφικών Θα δηµιουργήσουµε ένα σχεδιάγραµµα για να δείξουµε σχηµατικά πώς θα είναι κατανεµηµένος ο εξοπλισµός της πρότασής µας. Για να δηµιουργήσουµε

Διαβάστε περισσότερα

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων. World Wide Web. Παγκόσμιος Ιστός

Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων. World Wide Web. Παγκόσμιος Ιστός Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων World Wide Web Παγκόσμιος Ιστός Internet - WWW Internet: παγκόσμιο δίκτυο υπολογιστών που βασίζεται στο πρωτόκολο επικοινωνίας TCP/IP και

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

Επεξεργαστής Κειμένου: (Microsoft Word)

Επεξεργαστής Κειμένου: (Microsoft Word) Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου

Διαβάστε περισσότερα

ECDL Module 4 Υπολογιστικά Φύλλα Εξεταστέα Ύλη, έκδοση 5.0 (Syllabus Version 5.0)

ECDL Module 4 Υπολογιστικά Φύλλα Εξεταστέα Ύλη, έκδοση 5.0 (Syllabus Version 5.0) ECDL Module 4 Υπολογιστικά Φύλλα Εξεταστέα Ύλη, έκδοση 5.0 (Syllabus Version 5.0) (Module 4 Spreadsheets) Συνολική ιάρκεια: Προτεινόµενο * Χρονοδιάγραµµα Εκπαίδευσης 10-14 (δέκα έως δεκατέσσερις) ώρες

Διαβάστε περισσότερα

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και

Διαβάστε περισσότερα

ΠΕΡΙΕΧΟΜΕΝΑ. Περιγραφή της αρχικής οθόνης κάθε τάξης α. Εικονίδια επιλογής θεµατικών ενοτήτων β. Εικονίδια διαφυγής...

ΠΕΡΙΕΧΟΜΕΝΑ. Περιγραφή της αρχικής οθόνης κάθε τάξης α. Εικονίδια επιλογής θεµατικών ενοτήτων β. Εικονίδια διαφυγής... ΠΕΡΙΕΧΟΜΕΝΑ Α. ΕΚΚΙΝΗΣΗ ΚΛΕΙΣΙΜΟ ΤΗΣ ΕΦΑΡΜΟΓΗΣ.............................. 5 Β. ΒΑΣΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ.............................. 6 Γ. ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΥΛΗ ΚΑΘΕ ΤΑΞΗΣ....................................

Διαβάστε περισσότερα

Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( ) " " Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση

Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( )   Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση Επεξεργαστής κειμένου Word 2003 Πρακτικές συμβουλές κατά την πληκτρολόγηση Για να αλλάξουμε παράγραφο πατάμε Enter. Για να αφήσουμε μία κενή γραμμή, πατάμε μία φορά το Enter. Για να γράψουμε την επόμενη

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

To λεξικό του Internet

To λεξικό του Internet To λεξικό του Internet A Address: Ο τόπος που βρίσκεται μια πηγή του Internet. Μια e-mail address μπορεί να έχει την εξής μορφή : georgepapado@hotmail.com. Μια web address είναι κάπως έτσι: http://www.in.gr.

Διαβάστε περισσότερα

Μέρος Α (Ν. Αβούρης)

Μέρος Α (Ν. Αβούρης) C005-ΕΙ ΙΚΑ ΚΕΦΑΛΑΙΑ ΣΥΣΤΗΜΑΤΩΝ ΛΟΓΙΣΜΙΚΟΥ ΣΤΟ ΙΑ ΙΚΤΥΟ 10ο Εξάµηνο και Μεταπτυχιακός Κύκλος Σπουδών Μέρος Α (Ν. Αβούρης) ΕΒ ΟΜΑ ΙΑΙΑ Ι ΑΣΚΑΛΙΑ (2003-04): 3 ώρες θεωρία (Παρασκευή 9-12) 1 ώρα εργαστήριο:

Διαβάστε περισσότερα

3. Σηµειώσεις Access. # Εισαγωγή ψηφίου ή κενού διαστήµατος. Επιτρέπονται τα ση-

3. Σηµειώσεις Access. # Εισαγωγή ψηφίου ή κενού διαστήµατος. Επιτρέπονται τα ση- Μάθηµα 3 Προχωρηµένες ιδιότητες πεδίων Μάσκες εισαγωγής Οι ιδιότητες Μορφή και Μάσκα εισαγωγής περιγράφονται µαζί γιατί έχουν κοινά χαρακτηριστικά που αφορούν την εµφάνιση. Με την ιδιότητα Μορφή καθορίζουµε

Διαβάστε περισσότερα

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Οικονοµικό Πανεπιστήµιο Αθηνών Τµήµα ιοικητικής Επιστήµης & Τεχνολογίας ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων µε HMTL Γιώργος Γιαγλής Περίληψη Κεφαλαίου

Διαβάστε περισσότερα