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

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

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

Ἀγλαΐη Βλαβιανός
8 χρόνια πριν
Προβολές:

1 Πανεπιστήµιο Αιγαίου Σχολή Κοινωνικών Επιστηµών Τµήµα Πολιτισµικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυµέσα Ι (Β Έτος, 3ο εξ) Εργαστήριο #1ο: Εισαγωγή στην HTML Γαβαλάς αµιανός Χειµερινό εξάµηνο Στόχοι εργαστηρίου Πρακτική εµπειρία στο σχεδιασµό διαδικτυακών πολυµεσικών εφαρµογών HyperText Markup Language (HTML) Εξοικείωση µε εργαλεία συγγραφής εφαρµογών σε περιβάλλοντα παγκόσµιου ιστού (Web authoring tools, π.χ. Microsoft FrontPage, Micromedia Dreamweaver, Εστίαση στην αύξηση λειτουργικότητας, ευελιξίας και διαλογικότητας ιστοσελίδων Dynamic HTML (DHTML) Javascript

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

3 Βασική δοµή ενός HTML εγγράφου ηλώνει την ύπαρξη HTML κώδικα Τα κυρίως περιεχόµενο που περιλαµβάνει τα στοιχεία που αναλύονται και απεικονίζονται στην οθόνη <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Επικεφαλίδα: περιέχει πληροφορίες σχετικά µε το υπερκείµενο (τίτλος, λέξειςκλειδιά,...) Ένα πρώτο αρχείο HTML <html> </head> <title>page Title</title> </head> <body> These are the pages contents </body> </html> Τι αποτέλεσµα θα εµφανίσει στην οθόνη;

4 Άσκηση #1 Ανοίξτε τον επεξεργαστή κειµένου Notepad και δηµιουργήστε ένα HTML αρχείο το οποίο όταν ανοίξετε στον Internet Explorer θα εµφανίζει το ακόλουθο αποτέλεσµα: Προσπαθήστε να πετύχετε το ίδιο αποτέλεσµα χρησιµοποιώντας ένα web authoring tool, π.χ. τo Microsoft FrontPage Έκδοση HTML και προσθήκη σχολίων Συνήθως στην πρώτη γραµµή ενός HTML εγγράφου υπάρχει µια γραµµή σαν την ακόλουθη: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Αυτή ή γραµµή δεν εµφανίζεται στην οθόνη ούτε είναι τεχνικά απαραίτητη αλλά είναι ένας κώδικας που λέει στον browser για ποιά έκδοση της HTML είναι γραµµένη η συγκεκριµένη σελίδα. Προσθήκη σχολίων (επίσης δεν εµφανίζονται):  Γιατί είναι απαραίτητα τα σχόλια;

5 Άσκηση #2 Στο αρχείο της άσκησης #1 προσθέστε στην πρώτη γραµµή µία γραµµή κώδικα που να δηλώνει ότι πρόκειται για κώδικα γραµµένο σε HTML 4. Στο τµήµα <HEAD> του κώδικα προσθέστε το σχόλιο:  Στο τµήµα <BODY> του κώδικα προσθέστε το σχόλιο: <!-- Γραµµένο από το φοιτητή..., στις 5 Οκτώβρη > Ανοίξετε εκ νέου το αρχείο στον Internet Explorer (ή κάνετε refresh αν είναι ήδη ανοικτό) και κοιτάξτε κατά πόσο υπάρχουν διαφορές στην εµφάνιση της ιστοσελίδας. Σηµείωση: Αφού «φορτώσετε» ένα HTML αρχείο στον Internet Explorer, µπορείτε να δείτε τον HTML κώδικα που το δηµιουργεί επιλέγοντας στο µενού: View -> Source Τι είναι οι ετικέτες (tags) της HTML; Όταν ο web browser εµφανίζει µία σελίδα στην ουσία διαβάζει από ένα αρχείο απλoύ κειµένου και κοιτάει για ειδικούς κώδικες ή αλλιώς "ετικέτες" που περιλαµβάνονται µεταξύ των συµβόλων < και >. Η γενική µορφή µιας HTML ετικέτας είναι: <tag_name>σώµα κειµένου</tag_name> Οι ετικέτες συνιστούν οδηγίες προς τον browser σχετικά µε το πως θα µορφοποιήσει και θα εµφανίσει το σώµα κειµένου που βρίσκεται ανάµεσά τους

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

Σχετικά έγγραφα

Η γλώσσα XHTML: διαφορές με HTML, μετατροπή

Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #2 0 : Εισαγωγή στην XHTML Γαβαλάς Δαμιανός dgavalas@aegean.gr Στόχοι εργαστηρίου Η γλώσσα XHTML: διαφορές με HTML, μετατροπή HTML εγγράφων σε XTML, Έλεγχος εγκυρότητας