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

Transcript

1 Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου όπως το ΣΗΜΕΙΩΜΑΤΑΡΙΟ των Windows. Το παρακάτω παράδειγμα είναι μια σελίδα html ΑΥΤΗ ΕΙΝΑΙ Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ 1) Δημιουργήστε ένα νέο έγγραφο χρησιμοποιώντας τον αγαπημένο σας κειμενογράφο και αντιγράψτε μέσα του το παραπάνω κείμενο. 2) Στην συνέχεια αποθηκεύστε με το όνομα mytest1.html 3) Ανοίξτε την σελίδα mytest1.html με τον αγαπημένο σας browser ( όπως ο internet explorer ) και το πρώτο σας test έχει τελειώσει. Αυτό που θα δείτε στον browser είναι να εμφανίζεται με απλή γραφή η φράση: ΑΥΤΗ ΕΙΝΑΙ Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ 2 η ΑΣΚΗΣΗ ΑΥΤΗ ΕΙΝΑΙ Η ΔΕΥΤΕΡΗ ΣΕΛΙΔΑ ΜΟΥ <b>αυτο ΤΟ ΚΕΙΜΕΝΟ ΕΙΝΑΙ ΜΕ ΕΝΤΟΝΗ ΓΡΑΦΗ</b> ΑΥΤΗ ΕΙΝΑΙ Η ΔΕΥΤΕΡΗ ΣΕΛΙΔΑ ΜΟΥ ΑΥΤΟ ΤΟ ΚΕΙΜΕΝΟ ΕΙΝΑΙ ΜΕ ΕΝΤΟΝΗ ΓΡΑΦΗ Άλλο Παράδειγμα με συνδυασμό εντολών όπως βλέπουμε παρακάτω, για πλάγια και έντονη γραφή: ΑΥΤΗ ΕΙΝΑΙ Η ΣΕΛΙΔΑ ΜΟΥ <b><i> ΑΥΤΟ ΤΟ ΚΕΙΜΕΝΟ ΕΙΝΑΙ ΜΕ ΕΝΤΟΝΗ ΚΑΙ ΠΛΑΓΙΑ ΓΡΑΦΗ </i></b> Στον browser σας θα πρέπει να δείτε: ΑΥΤΗ ΕΙΝΑΙ Η ΣΕΛΙΔΑ ΜΟΥ ΑΥΤΟ ΤΟ ΚΕΙΜΕΝΟ ΕΙΝΑΙ ΜΕ ΕΝΤΟΝΗ ΚΑΙ ΠΛΑΓΙΑ ΓΡΑΦΗ 3 η ΑΣΚΗΣΗ Αφήνοντας κενά στην HTML Αν υποθέσουμε ότι θέλουμε να γράψουμε μια πρόταση και να αφήσουμε ανάμεσα σε δύο λέξεις περισσότερα από ένα κενό τότε μπορούμε να χρησιμοποιήσουμε ανάμεσα στις λέξεις το: Όσες φορές θέλουμε επαναλαμβανόμενο προκειμένου να αφήσουμε κενά. Παράδειγμα: Μπορώ να αφήσω τρία κενά Το παραπάνω θα μας δώσει το αποτέλεσμα : Μπορώ να αφήσω τρία κενά.

2 4 η ΑΣΚΗΣΗ Βασική μορφοποίηση κειμένου στην HTML Προκειμένου το κείμενο που γράφετε μέσα σε μια html σελίδα να μπορεί να έχει μορφοποίηση όπως, bold, italic, underline αλλά και άλλες διαφοροποιήσεις σχετικά με το τι είναι τίτλος και πιο μέγεθος θέλουμε αυτόν εμφανίζουμε παρακάτω κάποιες βασικές μορφοποιήσεις. Παράδειγμα Τίτλων: <h1>τίτλος 1</h1> <h2> Τίτλος 2</h2> <h3> Τίτλος 2</h3> αυτό που θα εμφανιστεί στην σελίδα σας είναι: Τίτλος 1 Τίτλος 2 Τίτλος 3 Παραδείγματα κειμένου: Αυτό είναι δοκιμαστικό <strong>κείμενο</strong> σε html με bold Αυτό είναι δοκιμαστικό <em>κείμενο</em> σε html με italic Αυτό είναι δοκιμαστικό <em><strong>κείμενο</strong></em> σε html με bold και italic Αυτό είναι δοκιμαστικό <u>κείμενο</u> σε html με με υπογράμμιση Το αποτέλεσμα θα είναι: Αυτό είναι δοκιμαστικό κείμενο σε html με bold Αυτό είναι δοκιμαστικό κείμενοσε html με italic Αυτό είναι δοκιμαστικό κείμενο σε html με bold και italic Αυτό είναι δοκιμαστικό κείμενο σε html με με υπογράμμιση Όπως βλέπετε παραπάνω και στα παραδείγματα κάθε ένας συνδυασμός είναι εφικτός 5 η ΑΣΚΗΣΗ Αλλαγή παραγράφου ή γραμμής στην HTML Αλλαγή παραγράφου ή γραμμής στην HTML Όταν θέλουμε στο κείμενο μας μέσα σε μια html σελίδα να αλλάξουμε γραμμή δεν φτάνει μόνο να πατήσουμε ENTER όπως θα κάναμε σε οποιοδήποτε πρόγραμμα κειμένου όπως το WORD. Χρειάζεται να το δηλώσουμε και την html με κάποιο TAG (Ετικέτα). Παράδειγμα αλλαγής γραμμής: Αυτό είναι απλό παράδειγμα <br /> για να δείξουμε πώς αλλάζει μια γραμμή. Το αποτέλεσμα της σελίδας που θα πάρουμε είναι : Αυτό είναι απλό παράδειγμα για να δείξουμε πώς αλλάζει μια γραμμή. Παράδειγμα αλλαγής παραγράφου: <p>αυτό είναι ένα παράδειγμα για να δείξουμε πώς </p> <p>αλλάζει μια παράγραφος</p> το αποτέλεσμα που θα πάρουμε είναι : Αυτό είναι ένα παράδειγμα για να δείξουμε πώς αλλάζει μια παράγραφος

3 6 η ΑΣΚΗΣΗ Χρώμα κειμένου στην HTML Για να βάλετε χρώμα στο κείμενο σας στην html όπως για παράδειγμα να κάνετε μια λέξη κόκκινη χρειάζεται ο παρακάτω κώδικας. Η τελευταία λέξη να εμφανίζετε <font color="#ff0000">κόκκινη</font> Το αποτέλεσμα θα είναι: Η τελευταία λέξη να εμφανίζεται κόκκινη Ο κωδικός #FF0000 ουσιαστικά ορίζει το χρώμα που θέλουμε να έχει το κείμενο μας. Αλλάζοντας τον αλλάζει και το χρώμα του κειμένου. Διάφορες χρωματικές αποχρώσεις με τον κωδικό τους. # # # #CCCCCC #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF # #00FF00 # #FF0000 #FF9900 #FF0099 # #CC3300 #FFFF00 #FFCC99 # # η ΑΣΚΗΣΗ Εισαγωγή φωτογραφιών στην HTML Οι φωτογραφίες στην HTML σε αντίθεση με τις σελίδες κειμένου που κατασκευάζουμε σε word δεν εισάγονται μέσα στην σελίδα. Μέσα στην html σελίδα εισάγουμε μια αναφορά σχετικά με το πού βρίσκεται η εικόνα. Για παράδειγμα θέλουμε να βάλουμε το λογότυπο μια εταιρείας μέσα σε σελίδα html και το όνομα της φωτογραφίας που έχει το λογότυπου λέγετε logo.jpg. O παρακάτω κώδικας κάνει αυτό. <img src="/logo.jpg" /> Το αποτέλεσμα που θα πάρουμε είναι: * είναι βασικό να έχουμε όλες τις φωτογραφίες που θέλουμε στον ίδιο φάκελο με την html σελίδα μας. Τα αρχεία φωτογραφιών που υποστηρίζει η html είναι.gif.jpg. PNG * Τα ονόματα όλων των αρχείων σας είναι καλό να είναι με λατινικούς χαρακτήρες γραμμένα και να μην περιέχουν μέσα τους κενά ή ειδικούς χαρακτήρες. Παράδειγμα ότι έχουμε μια φωτογραφία που είναι το λογότυπο της EXTERNAL. Το όνομα της φωτογραφίας αν ήταν external logo.jpg θα ήταν λάθος. Σωστό θα ήταν αν το κάναμε logo-external.gr. Ουσιαστικά άν και υποστηρίζονται τα κενά στα ονόματα των αρχείων, δεν υποστηρίζονται από όλους τους υπολογιστές και έτσι είναι προτιμότερο να παραμένουμε στα standard της γλώσσας HTML.

4 8 η ΑΣΚΗΣΗ Δημιουργία συνδέσμων στην html Όπως είναι φυσικό ένα web site περιέχει περισσότερες από μια σελίδες html για λόγους καλλίτερης ταξινόμησης των πληροφοριών. Θα μπορούσαμε για παράδειγμα να έχουμε σελίδες για την παρουσίαση μιας επιχείρησης που θα ήταν, Αρχική σελίδα, Εταιρικό προφίλ και Στοιχεία επικοινωνίας. Αυτό που κάνουμε εξαρχής είναι να δημιουργήσουμε τις τρεις σελίδες εξαρχής έστω και ως κενές σελίδες. Έτσι δημιουργούμε τρεις σελίδες με τα ακόλουθα ονόματα. Την Αρχική σελίδα την ονομάζουμε : index.html Την σελίδα Εταιρικό προφίλ: profile.html Την σελίδα στοιχεία επικοινωνίας: contact.html Ανοίγουμε την σελίδα index.html και εισάγουμε τον παρακάτω κώδικα. Κάνε click στο <a href="/profile.html">προφίλ</a> για να το δεις Το αποτέλεσμα που θα πάρουμε είναι: Κάνε click στο προφίλ για να το δεις Επεξήγηση: Όπως βλέπουμε παρακάτω ο κώδικας που δημιουργεί το Link είναι <a href="/profile.html">...</a>. Αντικαθιστώντας την περιοχή με τις τελείες, με το κείμενο που θέλουμε να είναι το link μας. Εάν θέλουμε όλο το κείμενο μας να μπορεί να πατηθεί ώς Link τότε το βάζουμε ολόκληρο μέσα σε αυτή την περιοχή. Παράδειγμα ολοκληρωμένου μενού με links. Αντιγράψτε τον παρκάρω κώδικα και στις τρεις σελίδες. <a href="/index.html">αρχική σελίδα</a> <a href="/profile.html">εταιρικό προφίλ</a> <a href="/contact.html">στοιχεία επικοινωνίας</a> Το αποτέλεσμα που θα πάρουμε είναι : Αρχική σελίδα Εταιρικό προφίλ Στοιχεία επικοινωνίας Πατώντας πάνω σε κάθε ένα link από το παράδειγμα μας, αυτόματα θα ανοίγει και η αντίστοιχη σελίδα. 9 η ΑΣΚΗΣΗ Πίνακες στην html Για να δημιουργήσετε των παραπάνω πίνακα χρειάζεται ο παρακάτω κώδικας. <table> <tr> <td>μήλα</td> <td>22</td> </tr> <tr> <td>μπανάνες</td> <td>11</td> </tr> <tr> <td>ακτινίδια </td> <td>67</td> </tr> </table> Όπως βλέπουμε στον κώδικα ο πίνακας μας ξεκινά πάντα με <table> και τελειώνει με </table>.μετά ακολουθεί ο χαρακτηρισμός των γραμμών που ξεκινά με <tr> και τελειώνει με </tr> και τέλος μέσα στις γραμμές χαρακτηρίζουμε τις στήλες που θέλουμε κάθε μια ξεχωριστά ξεκινώντας με <td> και τελειώνοντας με </td>.

5 Άλλες δυνατότητα που έχουμε στον πίνακα είναι όπως το να ορίσουμε το μέγεθος του σε πλάτος, το χρώμα του, το αν θέλουμε το περίγραμμα του να εμφανίζετε καθώς και άλλα. Για να περάσουμε παραμέτρους στον πίνακα μας θα χρειαζόταν να αντικαταστήσουμε μόνο την πρώτη γραμμή <table> εισάγοντας μέσα τις την παράμετρο και θα γινόταν κάπως έτσι. <table border="5"> Το border που προσθέσαμε είναι το πάχος γραμμής που θέλουμε να έχει ο πίνακας μας.. Εάν θέλαμε να μήν έχει καθόλου περίγραμμα θα βάζαμε <table border="0"> Για να ορίσουμε το πλάτος του πίνακα, έχουμε: <table width="600"> Επίσης είναι εφικτός και ο συνδυασμός των παραμέτρων με ένα απλό κενό ενδιάμεσα τους. <table width="350" border="4"> Άλλες παράμετροι που μπαίνουν μέσα στο <table > cellpadding="5" Ορίζει το κείμενο μέσα σε ένα πίνακα τι περιθώριο θα έχει απο τον πίνακα. Οθσιαστικά με το παρπάνω παράδειγμα το κείμενο θα έχει περιθόριο τουλάχιστον 5 στιγμές απο τα αριστερά και απο όλες τις άλες πλευρές. cellspacing="2" Ορίζει την απόσταση που θα έχουν μεταξύ τους τα κελιά του πίνακα. bgcolor="#990000" Ορίζει το χρώμα φόντου ( background color ) bordercolor="#ffff00" Ορίζει το χρώμα που θέλουμε να έχει το περίγραμμα height="700" Ορίζει το ύψος του πίνακα Σχετικά με το φόντο του πίνακα εκτός από την δυνατότητα να έχουμε ένα ενιαίο χρώμα σε όλο τον πίνακα θα μπορούσαμε να έχουμε και μια εικόνα που να εμφανίζετε ως φόντο. Επίσης αν αυτή η εικόνα είναι πιο μικρή από το συνολικό μέγεθος του πίνακα τότε αυτή προβάλετε με επανάληψη και έτσι μας δίνει την αίσθηση μιας ενιαίας μακέτας. Έχουμε την εικόνα: 1gear.jpg Με τον κώδικα: background="1gear.jpg" Βλέπουμε το παρακάτω αποτέλεσμα

6 10 η ΑΣΚΗΣΗ Λίστες στην HTML Πρώτη γραμμή κειμένου Δεύτερη γραμμή κειμένου Τρίτη γραμμή κειμένου Η παραπάνω λίστα δημιουργείται με το παρακάτω κώδικα <ul> <li>πρώτη γραμμή κειμένου</li> <li>δεύτερη γραμμή κειμένου </li> <li> Τρίτη γραμμή κειμένου</li> </ul> Οι λίστες πάντα ξεκινάνε με <ul> και τελειώνουν με </ul>. Κάθε μια γραμμή της λίστας ξεκινάει με <li> και τελειώνει με </li> Εάν θέλουμε η λίστα μας να είναι αριθμημένη τότε έχουμε τον παρακάτω κώδικα και αντί για <ul> χρησιμοποιούμε <ol> που μας δίνει αυτόματα αρίθμηση στην λίστα μας: <ol> <li> Πρώτη γραμμή κειμένου</li> <li> Δεύτερη γραμμή κειμένου </li> <li> Τρίτη γραμμή κειμένου </li> </ol> Αποτέλεσμα: 1. Πρώτη γραμμή κειμένου 2. Δεύτερη γραμμή κειμένου 3. Τρίτη γραμμή κειμένου