Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές <!DOCTYPE> Ορίζει τον τύπο του αρχείου <html> Ορίζει ένα αρχείο HTML <title> Ορίζει ένα τίτλο για το αρχείο <body> Ορίζει το σώµα της ιστοσελίδας background URL Φωτογραφία ως φόντο <h1> to <h6> Ετικέτα επικεφαλίδων align left justify <p> Ετικέτα παραγράφου align left justify <br> Αλλαγή γραµµής <hr> Οριζόντια γραµµή align left Οριζόντια στοίχιση γραµµής justify noshade noshade Γραµµή χωρίς 3-διάστατο εφέ σκιάς
size pixels Πάχος γραµµής width pixels Πλάτος γραµµής Μορφοποίηση <b> Κείµενο bold <big> Κείµενο µε µεγάλα γράµµατα <del> Διαγραµµένο κείµενο <i> Κείµενο σε italics <small> Κείµενο µε µικρά γράµµατα <strong> Έντονο κείµενο <sub> Δείκτης <sup> Εκθέτης <u> Υπογραµµισµένο κείµενο Φόρµες <form> Φόρµα για εισαγωγή πληροφοριών action URL Ορίζει που θα σταλούν τα δεδοµένα που θα εισαχθούν στη φόρµα method get post Ορίζει την HTTP µέθοδο µε την οποία θα σταλούν τα δεδοµένα name text Ορίζει το όνοµα της φόρµας <input> Στοιχείο εισαγωγής πληροφοριών checked checked Ορίζει ότι ένα στοιχείο θα είναι προεπιλεγµένο όταν ανοίγει η σελίδα (για type="checkbox" ή type="radio") maxlength number Ορίζει τον µέγιστο αριθµό χαρακτήρων που επιτρέπεται να εισαχθούν σε ένα στοιχείο name text Ορίζει το όνοµα ενός στοιχείου
size number Ορίζει το πλάτος σε χαρακτήρες ενός στοιχείου type checkbox Ορίζει τον τύπο του στοιχείου password εισαγωγής πληροφοριών radio reset submit text value text Ορίζει την τιµή ενός στοιχείου <textarea> Περιοχή κειµένου cols number Ορίζει το πλάτος της περιοχής rows number Ορίζει το ύψος σε γραµµές της περιοχής name text Ορίζει το όνοµα της περιοχής <select> Drop-down λίστα multiple multiple Πολλές επιλογές µπορούν να επιλεχθούν ταυτόχρονα size number Ορίζει το ύψος σε γραµµές της λίστας <option> Ορίζει µια επιλογή της drop-down λίστας Εικόνες <img> Ετικέτα εικόνας align top bottom middle left name text Ορίζει το όνοµα της λίστας selected selected Ορίζει ότι µια επιλογή της λίστας θα είναι προ-επιλεγµένη όταν ανοίγει η σελίδα value text Ορίζει τι τιµή θα αποσταλεί στον server Στοίχιση της εικόνας σε σχέση µε τα στοιχεία που την περιβάλλουν (π.χ. κείµενο)
alt text Εναλλακτικό κείµενο αντί της εικόνας border pixels Πάχος πλαισίου γύρω από µια εικόνα height pixels Ύψος εικόνας hspace pixels Οριζόντια απόσταση εικόνας από τα στοιχεία που την περιβάλλουν (π.χ. κείµενο) src URL Η θέση που βρίσκεται το αρχείο της εικόνας vspace pixels Κάθετη απόσταση εικόνας από τα στοιχεία που την περιβάλλουν (π.χ. κείµενο) width pixels Σύνδεσµοι <a> Ετικέτα υπερσυνδέσµου href URL mailto: file: Λίστες <ul> Μη ταξινοµηµένη λίστα type disc square circle <ol> Ταξινοµηµένη λίστα type 1 A a I Πλάτος της εικόνας Το URL στο οποίο οδηγεί ο σύνδεσµος Είδος δείκτη λίστας Είδος δείκτη λίστας
i <li> Στοιχείο µιας λίστας <dl> Λίστα ορισµού <dt> Όρος λίστας ορισµού <dd> Ορισµός λίστας ορισµού Πίνακες <table> Ετικέτα πίνακα align left Οριζόντια στοίχιση πίνακα bgcolor rgb(x,x,x) Χρώµα φόντου #xxxxxx colorname border pixels Πλαίσιο πίνακα cellpadding pixels Απόσταση κειµένου από το πλαίσιο του κελιού cellspacing pixels Απόσταση µεταξύ των κελιών του πίνακα width pixels Πλάτος πίνακα <caption> Τίτλος πίνακα <th> Κελί µε επικεφαλίδα Ίδιες µε το <td> <tr> Γραµµή πίνακα align left valign top middle bottom Κάθετη στοίχιση κειµένου
bgcolor rgb(x,x,x) Χρώµα φόντου #xxxxxx colorname height pixels Ύψος γραµµής <td> Κελί πίνακα align left colspan αριθµός Αριθµός στηλών στις οποίες αντιστοιχεί το κελί height pixels Ύψος κελιού nowrap nowrap Δεν γίνεται αναδίπλωση κειµένου rowspan αριθµός Αριθµός γραµµών στις οποίες αντιστοιχεί το κελί valign top Κάθετη στοίχιση κειµένου middle bottom width pixels Πλάτος κελιού bgcolor rgb(x,x,x) #xxxxxx colorname Στυλ <div> Ορίζει µια περιοχή στην ιστοσελίδα align left Χρώµα φόντου
<span> Ορίζει µια περιοχή στην ιστοσελίδα justify CSS CASCADING STYLE SHEETS Την εισαγωγή CSS την κάνουµε µε την ιδιότητα Style. Η ιδιότητα µπαίνει στο ανάλογο στοιχείο που επιθυµούµε να µορφοποιηθεί: π.χ. <body style= color:red; >, <p style= text-align:; > Προσοχή στον τρόπο σύνταξης!! ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ color Hexadecimal colors RGB colors Χρώµα κειµένου Predefined/Cross-browser color names background-color Hexadecimal colors RGB colors Χρώµα φόντου Predefined/Cross-browser color names text-align left justify font-family Όνοµα γραµµατοσειράς Ορισµός γραµµατοσειράς font-size px Μέγεθος γραµµατοσειράς
text-decoration underline overline line-through Διακόσµηση κειµένου (υπογράµµιση, διαγράµµιση, κλπ) ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Χαρακτήρας HTML Αποτέλεσµα Μικρότερο < < Μεγαλύτερο > > Λογικό και & & Quotes " " Κενό διάστηµα &nbsb; Cent Βρετανική λίρα γιεν ευρώ ενότητα copy registered trademark trademark
Ιστοσελίδα
ΠΛΗΡΟΦΟΡΙΕΣ Χρώµα φόντου επικεφαλίδας: navy Χρώµα κειµένου επικεφαλίδας: yellow Ύψος φόντου επικεφαλίδας: 3 γραµµές µαζί µε την γραµµή της επικεφαλίδας Η εικόνα να έχει ύψος 200pixel και πλάτος 100 Οι επικεφαλίδες «Πληροφορίες» και «Εγγραφή στο Εργαστήριο» έχουν µέγεθος h2 Ο υπερσύνδεσµος οδηγεί στο http://doeptm-teiwest.gr/ Πλάτος πίνακα: 50 Ύψος γραµµών πίνακα: 40 pixel Πάχος γραµµής 4 pixel, χωρίς σκιά Μέθοδος φόρµας: post Το στοιχείο Α.Μ. να έχει size=4 και να δέχεται µέχρι 4 χαρακτήρες.