Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Transcript

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

2 HyperText Markup Language: HTML (Ι) Γλώσσα κειμένου που χρησιμοποιείται για να δημιουργηθούν σελίδες ιστού. HyperText (υπερ-κείμενο): δίνει στο χρήστη τη δυνατότητα ανάγνωσης και κίνησης μέσα σε κείμενο και άλλες μορφές οπτικής πληροφορίας με μη γραμμικό τρόπο ακολουθώντας μια σειρά από συνδέσμους Σχεδιάστηκε για να καθορίσει τη λογική οργάνωση ενός αρχείου κειμένου που προορίζεται να «δημοσιευτεί» στον παγκόσμιο ιστό Ουσιαστικά πρόκειται για μια γλώσσα οδηγιών που καθοδηγεί διαφορετικά προγράμματα ανάγνωσης ιστοσελίδων (φυλλομετρητές browsers) να «μεταφράσουν» τις οδηγίες και να σχεδιάσουν τα αποτελέσματα (πληροφορία) στη σελίδα του χρήστη Οι οδηγίες της HTML δίνονται με χρήση των ετικετών (tags). Οι ετικέτες είναι το τμήμα εκείνο του κειμένου που περικλείεται από τα σύμβολα μικρότερο (<) και μεγαλύτερο (>) και την εντολή μέσα στα σύμβολα αυτά που αποτελεί την οδηγία. Οι ετικέτες «ανοίγουν» και «κλείνουν». Π.χ.: <b>this text will be displayed as bold!</b>

3 HyperText Markup Language: HTML (II) Ενα HTML αρχείο είναι ένα απλό αρχείο κειμένου (text file). Έτσι, δεν χρειάζεται ένα ειδικό επεξεργαστή κειμένου. Αρκεί ένας απλός επεξεργαστής κειμένου όπως είναι το NotePad ήτοms Word Υπάρχουν ωστόσο και ειδικά προγράμματα για τη γρήγορη και εύκολη συγγραφή HTML κώδικα (web authoring tools), όπως το MS FrontPage ήτοadobe Dreamweaver (απαιτούν άδεια!) και άλλα τα οποία διατίθενται δωρεάν Η HTML δεν αποτελεί έναν "Παίρνεις Αυτό Που Βλέπεις" (What You See Is What You Get, WYSIWYG) επεξεργαστή κειμένου όπως το MS Word. ηλαδή, ο HTML κώδικας δεν απεικονίζεται αυτούσιος όταν το HTML αρχείο ανοίγεται από έναν browser

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

5 Ιστορία της 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+".

6 Ιστορία της 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

7 Τι σημαίνουν οι εκδόσεις της HTML για τον web developer; ημιουργώντας ιστοσελίδες, πρέπει να σκέφτεστε πάντα τι πρόγραμμα θα χρησιμοποιούν οι αναγνώστες σας για να διαβάζουν τις σελίδες σας. Πιο απλά, "δημοσιεύοντας" τις ιστοσελίδες σας μέσα απο έναν Internet server δεν θα έχετε ιδέα τι browser ή ακόμη και τι υπολογιστής χρησιμοποιείται κάθε φορά από τους χρήστες. Μπορείτε να χρησιμοποιήσετε ειδικές προειδοποιήσεις στις σελίδες σας. Μπορείτε να παραμείνετε πιστοί στις προδιαγραφές που υποστηρίζουν όλοι οι browsers. Ακόμη και αν χρησιμοποιήσετε ειδικές ετικέτες, υπάρχουν συνήθως τρόποι για να αποφύγετε την δημιουργία χάους στους χρήστες διαφορετικών browsers. Το πιο σημαντικό είναι να μην εφησυχάζετε με την άψογη εμφάνιση των ιστοσελίδων σας στον δικό σας υπολογιστή. Οι αναγνώστες σας μπορεί να χρησιμοποιούν διαφορετικούς browsers, διαφορετικές γραμματοσειρές, διαφορετικά χρώματα, αναλύσεις οθόνης και γενικά όλα εκείνα που μπορεί να προκαλέσουν διαφοροποίηση στο μέγεθος και στην εμφάνιση. Αν μπορείτε δοκιμάστε τις ιστοσελίδες σας σε διαφορετικούς υπολογιστές, μεγαλώστε ή μικρύνετε το παράθυρο του browser, αλλάξτε τις γραμματοσειρές. Ευτυχώς, ο αρχικός σχεδιασμός της HTML έχει ένα ανοιχτό σετ από κανόνες που συγχωρεί, σε γενικές γραμμές, τα λάθη. Αν ο browser συναντήσει μια ετικέτα που δεν αναγνωρίζει ή δεν μπορεί να απεικονίσει, απλά αγνοεί την ετικέτα αυτή.

8 Βασική δομή ενός HTML εγγράφου Δηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Επικεφαλίδα: περιέχει πληροφορίες σχετικά με το υπερκείμενο (τίτλος, λέξειςκλειδιά,...)

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

10 H HTML δεν είναι WYSIWYG <html> <head> <title>wyswyg</title> </head> <body> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </body> </html> <html> <head> <title>wyswyg</title> </head> <body> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </body> </html> Παράδειγμα

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

12 Ετικέτες επικεφαλίδων (I) Για να δημιουργήσουμε μια επικεφαλίδα N-οστού επιπέδου γράφουμε: <hn>κείμενο Τίτλου</hN> π.χ., ο κώδικας <h1>κεφάλαιο 1ο</h1> θα δημιουργήσει μια επικεφαλίδα επιπέδου 1 με κείμενο «Κεφάλαιο 1ο» ΌσομικρότεροτοΝ, τόσο μεγαλύτερη θα εμφανίζεται η ετικέτα ΟκώδικαςτηςHTML έχει σχεδιαστεί για να παίρνουν οι επικεφαλίδες τους 6 τύπους (h1 to h6)!

13 Ετικέτες επικεφαλίδων (II) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <!-- Το head περιέχει πληροφορίες που αφορούν το αρχείο και δεν εμφανίζονται στην οθόνη. --> <TITLE>Ετικέτες...</TITLE> </HEAD> <BODY> <!-- Γραμμένο από τον..., στις... --> <h1>επικεφαλίδα επιπέδου 1</h1> <h2>επικεφαλίδα επιπέδου 2</h2> <h3>επικεφαλίδα επιπέδου 3</h3> <h4>επικεφαλίδα επιπέδου 4</h4> <h5>επικεφαλίδα επιπέδου 5</h5> <h6>επικεφαλίδα επιπέδου 6</h6> </BODY> </HTML>

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

15 Παράγραφοι / Αλλαγή γραμμής Παράγραφος (ετικέτα <p>) Αλλαγή γραμμής (ετικέτα <br>) Οριζόντια γραμμή (ετικέτα <hr>)

16 Ετικέτες στυλ <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>

17 Λίστες: μη αριθμημένες λίστες (unordered) <B>Μη Αριθμημένη Λίστα:</B> <ul> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </ul>

18 Λίστες: αριθμημένες λίστες (ordered) <B>Μη Αριθμημένη Λίστα:</B> <οl> <li> Στοιχείο 1 <li> Στοιχείο 2 <li> Στοιχείο 3 </οl>

19 Λίστες: σύνθετες λίστες Πως θα δημιουργήσω λίστες πολλαπλών ιεραρχικών επιπέδων; <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>

20 Προ-μορφοποιημένο κείμενο (preformatted) <html> <head> <title>preformatted</title> </head> <body> <pre> Αυτό το κείμενο έχει πολλά κενά μεταξύ των λέξεων όπως επίσης αλλαγές γραμμών... </pre></body> </html>

21 Blockquote <blockquote> "Αυτή είναι μια υποσημείωση από ένα πολύ διάσημο πρόσωπο. Εφόσον είναι μεγάλη και ενδιαφέρουσα, πρέπει να ξεχωρίζει από το υπόλοιπο κείμενο. Έτσι δείχνουμε οτι η σημείωση προέρχεται απο κάποιον άλλο εκτός του συγγραφέα." </blockquote>

22 Ορίσματα (attributes) Καθορίζουν τις ιδιότητες κάποιας ετικέτες, πχ η ετικέτα <hr> (horizontal line) έχει τα ορίσματα: WIDTH, που καθορίζει το μήκος της γραμμής σε σχέση με το πλάτος της σελίδας (πχ 70%) SIZE, που καθορίζει το πάχος της γραμμής σε pixels (πχ 10) ALIGN, που καθορίζει τη στοίχιση της γραμμής (δηλ. left, right, center) Παράδειγμα: <HR SIZE=6 WIDTH= 10% ALIGN= left> Όταν σε ένα browser δεν δίνουμε συγκεκριμένες οδηγίες για το πώςναεμφανίσειέναστοιχείο(ορίσματα), τότε χρησιμοποιεί τις αρχικές του (default) ρυθμίσεις Οι default ρυθμίσεις εξαρτώνται από το συγκεκριμένο browser

23 Στοίχιση <html> <body> <h1 align="center">αυτή είναι επικεφαλίδα επιπέδου 1</h1> <p>η παραπάνω επικεφαλίδα έχει στοιχηθεί στο κέντρο. </body> </html> Το κατηγόρημα (attribute) align είναιμέσαστοάνοιγματηςετικέτας h1, άρα αφορά μόνο το κείμενο που πρόκειται να μορφοποιηθεί ως επικεφαλίδα πρώτου επιπέδου. Η χρήση attributes είναι προαιρετική.

24 Μορφοποίηση κειμένου (Ι) Ορισμός μεγέθους γραμματοσειράς <font size=n>σώμα Κειμένου</font> Ορισμός σχετικού μεγέθους <font size=+1>σώμα Κειμένου</font> <font size=-2>σώμα Κειμένου</font> Αλλαγή προκαθορισμένου μεγέθους <basefont size=5>

25 Μορφοποίηση κειμένου (ΙΙ) <HTML><HEAD><TITLE>Fonts</TITLE> </HEAD> <BODY> <p><b><font size=+5>v</font><font size=+3>olcano WEB</font></b></p> <font size=7>info about volcanos...</font> </BODY></HTML>

26 Χρώμα γραμματοσειράς (Ι) <font color=red>...</font> <font color=#993459>...</font> <font color=lime>...</font> <font color=#002200>...</font> <font color=navy>...</font> <font color=#193467>...</font>

27 Χρώμα γραμματοσειράς (ΙΙ) <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=7>info about volcanos...</font> </BODY></HTML>

28 Είδη γραμματοσειράς Η σύνταξη της 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=7>info about volcanos...</font> </BODY></HTML>

29 Subscripts/Superscripts Subscript: H₂O H 2 O Superscript: km³ km 3

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