Γαβαλάς αµιανός

Transcript

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

2 HyperText Markup Language: HTML (Ι) Γλώσσα κειµένου που χρησιµοποιείται για να δηµιουργηθούν σελίδες ιστού. HyperText (υπερ-κείµενο): δίνει στο χρήστη τη δυνατότητα ανάγνωσης και κίνησης µέσα σε κείµενο και άλλες µορφές οπτικής πληροφορίας µε µη γραµµικό τρόπο ακολουθώντας µια σειρά από συνδέσµους Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός αρχείου κειµένου που προορίζεται να «δηµοσιευτεί» στον παγκόσµιο ιστό Ουσιαστικά πρόκειται για µια γλώσσα οδηγιών που καθοδηγεί διαφορετικά προγράµµατα ανάγνωσης ιστοσελίδων (φυλλοµετρητές browsers) να «µεταφράσουν» τις οδηγίες και να σχεδιάσουν τα αποτελέσµατα (πληροφορία) στη σελίδα του χρήστη Οι οδηγίες της HTML δίνονται µε χρήση των ετικετών (tags). Οι ετικέτες είναι το τµήµα εκείνο του κειµένου που περικλείεται από τα σύµβολα µικρότερο (<) και µεγαλύτερο (>) και την εντολή µέσα στα σύµβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>this text will be displayed as bold!</b> HyperText Markup Language: HTML (II) Ενα HTML αρχείο είναι ένα απλό αρχείο κειµένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειµένου. Αρκεί ένας απλός επεξεργαστής κειµένου όπως είναι το NotePad ή το MS Word Υπάρχουν ωστόσο και ειδικά προγράµµατα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το MS FtontPage ή το Micromedia Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν Η HTML δεν αποτελεί έναν "Παίρνεις Αυτό Που Βλέπεις" (What You See Is What You Get, WYSIWYG) επεξεργαστή κειµένου όπως το MS Word. ηλαδή, ο HTML κώδικας δεν απεικονίζεται αυτούσιος όταν το HTML αρχείο ανοίγεται από έναν browser 2

3 HyperText Markup Language: HTML (IΙI) Σε µια ιστοσελίδα χρησιµοποιούνται διαφορετικοί τρόποι αναπαράστασης πληροφορίας: κείµενο, εικόνες και σύνδεσµοι,... Η HTML δεν δηµιουργεί αυτά τα αντικείµενα, αλλά λέει στον browser που και πώς να τοποθετήσει τα αντικείµενα αυτά στην επιφάνεια της σελίδας Η HTML είναι επεκτάσιµη (extensible) γλώσσα, δηλαδή µπορούν να προστεθούν σε αυτή νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείµενα ανεπτυγµένα σε παλαιότερες εκδόσεις της Κάθε HTML έγγραφο είναι ένα έγγραφο κειµένου (δηλ. περιέχει ASCII χαρακτήρες) και µπορούν να δηµιουργηθούν όπως το notepad Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm (συνήθως,.html είναι η κατάληξη της κεντρικής σελίδας: index.html, ή default.html Ο έλεγχος ενός αρχείου HTML µπορεί να γίνει «τοπικά» µε τη χρήση browser και χωρίς να είναι αναγκαία η εγκατάσταση του αρχείου σε κάποιο διακοµιστή (web server) Ιστορία της HTML (Ι) Στο ξεκίνηµά του, το World Wide Web ήταν ένα σύστηµα βασισµένο σε κείµενο που καθοριζόταν απο την HyperText MarkUp Language (HTML). Οι ετικέτες (tags) και η µετάφραση τους βασίζονταν σε προδιαγραφές (HTML 1.0) που καθοριζόταν από µια διεθνής επιτροπή ( Ακολουθώντας αυτές τις προδιαγραφές, οι πληροφορίες ήταν απολύτως ανεξάρτητες του browser και της πλατφόρµας του Η/Υ όπου έτρεχε ο browser Ο πρώτος browser Mosaic (1993) ως ο πρώτος web browser έχει δυνατότητα παρουσίασης γραφικών και ακολουθεί αυτές τις προδιαγραφές HTML 2.0, µε νέες ετικέτες Μια οµάδα αποτελούµενη από τον άνθρωπο που ανέπτυξε το Mosaic δηµιούργησε µια νέα εταιρία, προωθώντας έναν ταχύτερο και πιο αξιόπιστο browser: Netscape Navigator Το Netscape περιλαµβάνει όλες τις σχετικές της HTML 2.0 καθώς και επιπλέον ετικέτες για πράγµατα που δεν µπορούσαν να γίνουν µε την HTML 2.0. Αυτές οι «επεκτάσεις» (extensions) ή "εµπλουτισµοί" προκάλεσαν διαφωνίες ανάµεσα στους υποστηρικτές της "καθαρής" HTML και σε αυτούς που τους αρέσουν οι προσθήκες του Netscape. Άρχισαν επίσης να εµφανίζονται σελίδες µε το µήνυµα: "This page optimized for Netscape". Νέοι browsers εµφανίστηκαν υποστηρίζοντας «καθαρή HTML 2.0+". 3

4 Ιστορία της HTML (ΙΙ) Το w3c αντιµετωπίζει το δίληµµα να γίνουν αυτές οι «επεκτάσεις» µέρος της HTML. Στην HTML 3.0 συµπεριλήφθηκαν οι περισσότερες ετικέτες που είχε εισαγάγει η Netscape. Το 1996 όταν η Microsoft εισήγαγε τις δικές της HTML ετικέτες. Η HTML 4.0 (1997) υιοθετήθηκε από το σύνολο των web browsers. Περιέχει νέες λειτουργίες όπως τα Style Sheets (CSS) που παρέχουν ένα αποτελεσµατικό µέσο για την ανανέωση ενός ολόκληρου web site µε πιο µεγάλη συνέπεια. Σύγχρονες τάσεις: XHTML (extensible HTML), 2000: Νέα γλώσσα υπερκειµένου, προσφέρει συµβατότητα µε την τεχνολογία XML. Έγγραφα γραµµένα σε XHTML είναι συµβατά µε τους browsers της HTML. Υπάρχουν εργαλεία που µετατρέπουν HTML έγγραφα σε XHTML Τι σηµαίνουν οι εκδόσεις της HTML για τον web developer; ηµιουργώντας ιστοσελίδες, πρέπει να σκέφτεστε πάντα τι πρόγραµµα θα χρησιµοποιούν οι αναγνώστες σας για να διαβάζουν τις σελίδες σας. Πιο απλά, "δηµοσιεύοντας" τις ιστοσελίδες σας µέσα απο έναν Internet server δεν θα έχετε ιδέα τι browser ή ακόµη και τι υπολογιστής χρησιµοποιείται κάθε φορά από τους χρήστες. Μπορείτε να χρησιµοποιήσετε ειδικές προειδοποιήσεις στις σελίδες σας. Μπορείτε να παραµείνετε πιστοί στις προδιαγραφές που υποστηρίζουν όλοι οι browsers. Ακόµη και αν χρησιµοποιήσετε ειδικές ετικέτες, υπάρχουν συνήθως τρόποι για να αποφύγετε την δηµιουργία χάους στους χρήστες διαφορετικών browsers. Το πιο σηµαντικό είναι να µην εφησυχάζετε µε την άψογη εµφάνιση των ιστοσελίδων σας στον δικό σας υπολογιστή. Οι αναγνώστες σας µπορεί να χρησιµοποιούν διαφορετικούς browsers, διαφορετικές γραµµατοσειρές, διαφορετικά χρώµατα, αναλύσεις οθόνης και γενικά όλα εκείνα που µπορεί να προκαλέσουν διαφοροποίηση στο µέγεθος και στην εµφάνιση. Αν µπορείτε δοκιµάστε τις ιστοσελίδες σας σε διαφορετικούς υπολογιστές, µεγαλώστε ή µικρύνετε το παράθυρο του browser, αλλάξτε τις γραµµατοσειρές. Ευτυχώς, ο αρχικός σχεδιασµός της HTML έχει ένα ανοιχτό σετ από κανόνες που συγχωρεί, σε γενικές γραµµές, τα λάθη. Αν ο browser συναντήσει µια ετικέτα που δεν αναγνωρίζει ή δεν µπορεί να απεικονίσει, απλά αγνοεί την ετικέτα αυτή. 4

5 Βασική δοµή ενός HTML εγγράφου ηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόµενο που περιλαµβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Επικεφαλίδα: περιέχει πληροφορίες σχετικά µε το υπερκείµενο (τίτλος, λέξειςκλειδιά,...) Τι είναι οι ετικέτες (tags) της HTML; Οδηγίες προς τον browser σχετικά µε το πως θα µορφοποιήσει ένα σώµα κειµένου. Η γενική µορφή µιας HTML ετικέτας είναι: <tag_name>σώµα κειµένου</tag_name> Κάθε δοµικό συστατικό (στοιχείο) ενός HTML εγγράφου αποτελείται από 3 µέρη: Την ετικέτα έναρξης (start tag), < > Το περιεχόµενό του Την ετικέτα λήξης (end tag), </ > Πχ <TITLE> Hello World </TITLE> Μπορούν να υπάρξουν και «άδεια στοιχεία» (δεν περιλαµβάνουν περιεχόµενο ούτε έχουν ετικέτα λήξης, π.χ. <br> HHTML δεν κάνει διάκριση µεταξύ ετικετών γραµµένων µε µικρά ή κεφαλαία γράµµατα, π.χ. ο κώδικας <title>κεφάλαιο 1ο</title> ταυτόσηµος µε τον <TITLE1>Κεφάλαιο 1ο</TITLE1> 5

6 H HTML δεν είναι WYSIWYG <html> <head> <title>wyswyg</title> <head> <body> Αυτό το κείµενο έχει πολλά κενά µεταξύ των λέξεων όπως επίσης αλλαγές γραµµών... </body> </html> <html> <head> <title>wyswyg</title> <head> <body> Αυτό το κείµενο έχει πολλά κενά µεταξύ των λέξεων όπως επίσης αλλαγές γραµµών... </body> </html> Παράδειγµα Προσθήκη σχολίων στην HTML Συνήθως στην πρώτη γραµµή ενός HTML εγγράφου υπάρχει µια γραµµή σαν την ακόλουθη: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Αυτή ή γραµµή δεν εµφανίζεται στην οθόνη ούτε είναι τεχνικά απαραίτητη αλλά είναι ένας κώδικας που λέει στον browser για ποιά έκδοση της HTML είναι γραµµένη η συγκεκριµένη σελίδα. Προσθήκη σχολίων (επίσης δεν εµφανίζονται): <!-- διάφορα σχόλια --> Γιατί είναι απαραίτητα τα σχόλια; 6

7 Ετικέτες επικεφαλίδων (I) Για να δηµιουργήσουµε µια επικεφαλίδα N-οστού επιπέδου γράφουµε: <hn>κείµενο Τίτλου</hN> π.χ., ο κώδικας <h1>κεφάλαιο 1ο</h1> θα δηµιουργήσει µια επικεφαλίδα επιπέδου 1 µε κείµενο «Κεφάλαιο 1ο» Όσο µικρότερο το Ν, τόσο µεγαλύτερη θα εµφανίζεται η ετικέτα Ο κώδικας της HTML έχει σχεδιαστεί για να παίρνουν οι επικεφαλίδες τους 6 τύπους (h1 to h6)! Ετικέτες επικεφαλίδων (II) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <!-- Το head περιέχει πληροφορίες που αφορούν το αρχείο και δεν εµφανίζονται στην οθόνη. --> <TITLE>Ετικέτες...</TITLE> <BODY> <!-- Γραµµένο από τον..., στις... --> <h1>επικεφαλίδα επιπέδου 1</h1> <h2>επικεφαλίδα επιπέδου 2</h2> <h3>επικεφαλίδα επιπέδου 3</h3> <h4>επικεφαλίδα επιπέδου 4</h4> <h5>επικεφαλίδα επιπέδου 5</h5> <h6>επικεφαλίδα επιπέδου 6</h6> </BODY> </HTML> 7

8 Παράγραφοι, Αλλαγή γραµµής, οριζόντιες γραµµές Ο web browser αγνοεί όλα τα κενά από το πάτηµα του ENTER µέσα στο κείµενο. Για αυτό το λόγο, η HTML έχει ετικέτα για την τοποθέτηση µιας παραγράφου. Αυτή η ετικέτα λέει στον browser να αφήσει µία κενή γραµµή. Ο κώδικας είναι ο ακόλουθος: <p> Η ετικέτα της παραγράφου, δεν χρειάζεται ετικέτα τέλους όπως οι άλλες: </p> Επίσης, πριν και µετά την <h> ετικέτα, δεν τοποθετούµε την <p> ετικέτα, αφού αλλάζει από µόνη της παράγραφο H ετικέτα <br> (επίσης δεν χρειάζεται ετικέτα τέλους) απλά αλλάζει γραµµή (χωρίς να αφήνει κάποιο κενό διάστηµα µεταξύ των παραγράφων όπως κάνει η ετικέτα <p> Τέλος, η ετικέτα <hr> εισάγει µια οριζόντια γραµµή στο έγγραφο Σηµείωση: µετά από µια επικεφαλίδα (<hn>) δεν αλλάζουµε παράγραφο µε την ετικέτα <p> (τα headers αλλάζουν παράγραφο αυτόµατα) Παράγραφοι / Αλλαγή γραµµής Παράγραφος (ετικέτα <p>) Αλλαγή γραµµής (ετικέτα <br>) Οριζόντια γραµµή (ετικέτα <hr>) 8

9 Ετικέτες στυλ <b>this is Bold</b> <i>this is Italics</i> <u>this is Underline...</u> <strike>this is Strike-through...</strike> <tt>this is typewriter</tt> Πως θα µορφοποιήσω ένα κείµενο ως bold + underlined; <b><u>this is Bold and underlined</u></b> Λίστες: µη αριθµηµένες λίστες (unordered) <B>Μη Αριθµηµένη Λίστα:</B> <ul> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </ul> 9

10 Λίστες: αριθµηµένες λίστες (ordered) <B>Μη Αριθµηµένη Λίστα:</B> <οl> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </οl> Λίστες: σύνθετες λίστες Πως θα δηµιουργήσω λίστες πολλαπλών ιεραρχικών επιπέδων; <ol> Προσοχή στη στοίχιση (indentation) του HTML κώδικα!!! <li>this is the first item <li>this is the second item <ul> <li> This is the first subitem of the second item <ol> <li> And this is a numbered subitem of a subitem <li> And this is another numbered subitem of a subitem <li> Getting lost yet? </ol> <li> This is the second subitem of the second item <li> This is the third subitem of the second item </ul> <li>this is the third item </ol> 10

11 Προ-µορφοποιηµένο κείµενο (preformatted) <html> <head> <title>preformatted</title> <head> <body> <pre> Αυτό το κείµενο έχει πολλά κενά µεταξύ των λέξεων όπως επίσης αλλαγές γραµµών... </pre></body> </html> Blockquote <blockquote> "Αυτή είναι µια υποσηµείωση απο ένα πολύ διάσηµο πρόσωπο. Εφόσον είναι µεγάλη και ενδιαφέρουσα, πρέπει να ξεχωρίζει απο το υπόλοιπο κείµενο. Έτσι δείχνουµε οτι η σηµείωση προέρχεται απο κάποιον άλλο εκτός του συγγραφέα." </blockquote> 11

12 Ορίσµατα (attributes) Καθορίζουν τις ιδιότητες κάποιας ετικέτες, πχ η ετικέτα <hr> (horizontal line) έχει τα ορίσµατα: WIDTH, που καθορίζει το µήκος της γραµµής σε σχέση µε το πλάτος της σελίδας (πχ 70%) SIZE, που καθορίζει το πάχος της γραµµής σε pixels (πχ 10) ALIGN, που καθορίζει τη στοίχιση της γραµµής (δηλ. left, right, center) Παράδειγµα: <HR SIZE=6 WIDTH= 10% ALIGN= left> Όταν σε ένα browser δεν δίνουµε συγκεκριµένες οδηγίες για το πώς να εµφανίσει ένα στοιχείο (ορίσµατα), τότε χρησιµοποιεί τις αρχικές του (default) ρυθµίσεις Οι default ρυθµίσεις εξαρτώνται από το συγκεκριµένο browser Στοίχιση <html> <body> Το κατηγόρηµα (attribute) align είναι µέσα στο άνοιγµα της ετικέτας h1, άρα αφορά µόνο το κείµενο που πρόκειται να µορφοποιηθεί ως επικεφαλίδα πρώτου επιπέδου. Η χρήση attributes είναι προαιρετική. <h1 align="center">αυτή είναι επικεφαλίδα επιπέδου 1</h1> <p>η παραπάνω επικεφαλίδα έχει στοιχηθεί στο κέντρο. </body> </html> 12

13 Μορφοποίηση κειµένου (Ι) Ορισµός µεγέθους γραµµατοσειράς <font size=n>σώµα Κειµένου</font> Ορισµός σχετικού µεγέθους <font size=+1>σώµα Κειµένου</font> <font size=-2>σώµα Κειµένου</font> Αλλαγή προκαθορισµένου µεγέθους <basefont size=5> Μορφοποίηση κειµένου (ΙΙ) <HTML><HEAD><TITLE>Fonts</TITLE> </HEAD> <BODY> <p><b><font size=+5>v</font><font size=+3>olcano WEB</font></b></p> <font size=12>info about volcanos...</font> </BODY></HTML> 13

14 Χρώµα γραµµατοσειράς (Ι) <font color=red>...</font> <font color=#993459>...</font> <font color=lime>...</font> <font color=#002200>...</font> <font color=navy>...</font> <font color=#193467>...</font> Χρώµα γραµµατοσειράς (ΙΙ) <HTML><HEAD><TITLE>Font Colors</TITLE> </HEAD> <BODY> <B><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></B> <p><font size=12>info about volcanos...</font> </BODY></HTML> 14

15 Είδη γραµµατοσειράς Η σύνταξη της HTML για τον καθορισµό µιας γραµµατοσειράς είναι: <font face="γραµµατοσειρά_1,γραµµατοσειρά_2">κείµενο π.χ. <HTML><HEAD><TITLE>Font Types</TITLE> </HEAD> <BODY> <B><font face="arial,helvetica" size=+4 color=#ff66ff>v</font> <font face="arial,helvetica" size=+3 color=#dd0055>olcano WEB</font></B> <p><font size=12>info about volcanos...</font> </BODY></HTML> Subscripts/Superscripts Subscript: H₂O H 2 O Superscript: km³ km 3 15

16 Subscripts/Superscripts Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N₂), carbon dioxide (CO₂), and ammonia (NH₄). <p> Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km³ in erupted volume) than ones observed by humans. 16