Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Μέγεθος: px

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

Download "Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML"

Ῥεβέκκα Χατζηιωάννου
7 χρόνια πριν
Προβολές:

1 Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές <html> Ορίζει ένα αρχείο HTML <title> Ορίζει ένα τίτλο για το αρχείο <body> Ορίζει το σώµα της background URL Φωτογραφία ως <h1> <h6> to ιστοσελίδας Ετικέτα επικεφαλίδων align left justify <p> Ετικέτα παραγράφου align left justify <br> Αλλαγή γραµµής <hr> Οριζόντια γραµµή align left justify Μορφοποίηση <b> Κείµενο bold <i> Κείµενο σε italics <sub> Δείκτης <sup> Εκθέτης <u> Υπογραµµισµένο κείµενο Φόρµες <form> Φόρµα για εισαγωγή πληροφοριών φόντο γραµµής noshade noshade Γραµµή χωρίς 3- διάστατο εφέ σκιάς size pixels Πάχος γραµµής width pixels Πλάτος γραµµής action URL Ορίζει που θα σταλούν τα δεδοµένα που θα εισαχθούν στη φόρµα method get Ορίζει την HTTP

2 <input> Στοιχείο εισαγωγής πληροφοριών post µέθοδο µε την οποία θα σταλούν τα δεδοµένα name text Ορίζει το όνοµα της φόρµας 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 Ορίζει το ύψος σε Εικόνες <img> Ετικέτα εικόνας align top bottom middle left γραµµές της περιοχής name text Ορίζει το όνοµα της περιοχής Στοίχιση της εικόνας σε σχέση µε τα στοιχεία που την περιβάλλουν (π.χ. κείµενο) alt text Εναλλακτικό κείµενο αντί της εικόνας border pixels Πάχος πλαισίου

3 Σύνδεσµοι <a> Ετικέτα υπερσυνδέσµου Λίστες <ul> Μη ταξινοµηµένη λίστα γύρω από µια εικόνα height pixels Ύψος εικόνας hspace pixels Οριζόντια απόσταση εικόνας από τα στοιχεία που την περιβάλλουν (π.χ. κείµενο) src URL Η θέση που βρίσκεται το αρχείο της εικόνας vspace pixels Κάθετη απόσταση εικόνας από τα στοιχεία που την περιβάλλουν (π.χ. width href type <ol> Ταξινοµηµένη λίστα type 1 A a I i pixels URL mailto: file: disc square circle <li> Στοιχείο µιας λίστας Πίνακες <table> Ετικέτα πίνακα align left bgcolor rgb(x,x,x) #xxxxxx colorname κείµενο) Πλάτος της εικόνας Το URL στο οποίο οδηγεί ο σύνδεσµος Είδος δείκτη λίστας Είδος δείκτη λίστας πίνακα Χρώµα φόντου border pixels Πλαίσιο πίνακα cellpadding pixels Απόσταση από το πλαίσιο του κελιού cellspacing pixels Απόσταση µεταξύ των κελιών του

4 πίνακα width pixels Πλάτος πίνακα <th> Κελί µε επικεφαλίδα Ίδιες µε το <td> <tr> Γραµµή πίνακα align left valign bgcolor top middle bottom rgb(x,x,x) #xxxxxx colorname height pixels <td> Κελί πίνακα align left Κάθετη Χρώµα φόντου Ύψος γραµµής στοίχιση colspan αριθµός Αριθµός στηλών στις οποίες αντιστοιχεί το κελί height pixels Ύψος κελιού nowrap nowrap Δεν γίνεται αναδίπλωση rowspan αριθµός Αριθµός γραµµών valign width bgcolor top middle bottom pixels rgb(x,x,x) #xxxxxx colorname στις οποίες αντιστοιχεί το κελί Κάθετη στοίχιση Πλάτος κελιού Χρώµα φόντου

5 Δημιουργήστε με HTML την παρακάτω σελίδα: Οδηγίες: Χρησιμοποιείστε το αρχείο Κείμενο.txt για να διαμορφώσετε την ιστοσελίδα. 1. Επικεφαλίδα μεγέθους 1 χρώματος κόκκινου με στοίχιση στη μέση. 2. Προσθήκη εικόνας tei.gif 3. Οριζόντια γραμμή μεγέθους 2 χωρίς σκίαση. 4. Τίτλος μεγέθους Αριθμημένη λίστα, πλάγια γραφή. Διευθύνσεις συνδέσμων:

6 6. Πίνακας με στοίχιση κεντρική, περίγραμμα μεγέθους 1, πλάτος 200. Στοίχιση κελλιών κεντρική. 7. Φόρμα με μέθοδο get. Πεδίο ονόματος μεγέθους 10 και μέγιστου μήκους χαρακτήρων 10, Επώνυμο μεγέθους 12 και μέγιστου μήκους χαρακτήρων 12, περιοχή σχολίων μεγέθους 10 γραμμών και 30 στηλών. Κουμπιά Αποστολής και διαγραφής. Άσκηση Ιστοτόπου στο Pageshop Ιστορία (index.htm) Εισαγωγή εικόνας tei.gif. Η εικόνα να είναι σύνδεσμος για τη σελίδα Ιστορία (index.htm) Κλωνοποιείστε 5 φορές την ιστοσελίδα. Εισαγωγή Widget SimpleNavBar: Πλάτος 100 Χρώμα: Ίδιο με το μπλε των γραμμάτων που γράφουν ΤΕΙ Δυτικής Ελλάδας στην εικόνα Στοίχιση αριστερή 4 σύνδεσμοι: Ιστορία, Υπηρεσίες, Φωτογραφίες, Επικοινωνία Εισάγετε τα link προς τις πρώτες 4 σελίδες-κλώνους που δημιουργήσατε Αντιγράψτε το οριζόντιο μενού στις άλλες σελίδες Εισαγωγή Μπλοκ κειμένου, πλάτους 80, γραμματοσειρά Verdana. Τίτλος: Heading 2, Κείμενο: μέγεθος 16. Ιστορία

7 Tο Τεχνολογικό Εκπαιδευτικό Ίδρυμα Πατρών ιδρύθηκε το 1970 σαν Κέντρο Ανώτερης Τεχνολογικής Εκπαίδευσης (Κ.Α.Τ.Ε.). Το 1983 με την εφαρμογή του νόμου 1404/83 ιδρύθηκε το Τεχνολογικό Εκπαιδευτικό Ίδρυμα σαν ανεξάρτητο και αυτοδιοικούμενο Ν.Π.Δ.Δ. που ανήκει μαζί με τα Πανεπιστήμια στην Ελληνική Τριτοβάθμια Εκπαίδευση. Το Τ.Ε.Ι. είναι προσανατολισμένο στην εφαρμοσμένη Έρευνα και Τεχνολογία ενώ τα Πανεπιστήμια κυρίως στην θεωρητική και βασική έρευνα. Σύμφωνα με το άρθρο1 του Ν.1404/83 οι σκοποί του Τ.Ε.Ι. είναι: 1. Να παρέχει θεωρητική και πρακτική εκπαίδευση, επαρκή για την εφαρμογή, επιστημονικών, τεχνολογικών, καλλιτεχνικών ή άλλων γνώσεων και δεξιότητα στο επάγγελμα. 2. Να συμβάλλει στην δημιουργία υπεύθυνων πολιτών, ικανών να συνεισφέρουν ως στελέχη εφαρμογής στα πλαίσια του δημοκρατικού προγραμματισμού, στην οικονομική, κοινωνική και πολιτική ανάπτυξη της χώρας. 3. Να υλοποιήσει το δικαίωμα της δωρεάν παιδείας κάθε Ελληνα πολίτη, ανάλογα με τις κλίσεις του και με όσα προβλέπουν οι σχετικοί νόμοι. Εισάγετε σύνδεσμο πηγής στη διεύθυνση: Υπηρεσίες (index1.htm) α. Σίτιση Εισαγωγή πάνω αριστερά Widget Menu. Σύνδεσμοι: Σίτιση, Μετακίνηση Ρυθμίστε τους συνδέσμους: Σίτιση -> Σελίδα Υπηρεσίες, Μετακίνηση -> Σύνδεσμος στον 5ο κλώνο (index4.htm)

8 Αντιγράψτε το Menu στην 5η σελίδα κλώνο (index4.htm). Επιστρέψτε στην index1.htm. Εισαγωγή μπλοκ κειμένου. Εισάγετε τίτλο Σίτιση - Στέγαση μεγέθους 2. Εισάγετε κείμενο Κανονισμός Σπουδαστικών Εστιών με σύνδεσμο στη διεύθυνση: β. Μετακίνηση Εισαγωγή μπλοκ κειμένου. Εισάγετε τίτλο Μετακίνηση μεγέθους 2. Εισάγετε κείμενο ΚΤΕΛ ΑΧΑΙΑΣ με σύνδεσμο στη διεύθυνση: Εισάγετε κείμενο ΚΤΕΛ ΗΛΕΙΑΣ με σύνδεσμο στη διεύθυνση: Φωτογραφίες (index2.htm) Εισαγωγή Widget Carousel Δημιουργείστε 4 εναλλασσόμενες εικόνες: 1. Τίτλος Ρίο, Περιγραφή: Γέφυρα Ρίου-Αντιρίου, Εικόνα: Bridge.png 2. Τίτλος Πάτρα, Περιγραφή: Συγκρότημα Πάτρας, Εικόνα: Patras.png 3. Τίτλος Πύργος, Περιγραφή: Συγκρότημα Πύργου, Εικόνα: Pyrgos.png 4. Τίτλος: Μεσολόγγι, Περιγραφή: Συγκρότημα Μεσολογγίου, Εικόνα: Mesolongi.png

9 Επικοινωνία (index3.htm) Εισαγωγή Μπλοκ. Εισάγετε στο μπλοκ Φόρμα με μέθοδο Post. Όνομα μήκους 10, μεγιστο περιεχόμενο 10 Επώνυμο μήκους 12, μέγιστο περιεχόμενο 12 Α.Μ. μήκους 4, μέγιστο περιεχόμενο 4

10 Επιλογή Radio Button στην Ερώτηση Φοιτητής (Ναι, Όχι) Εισαγωγή Textarea μεγέθους Columns 40, Rows 5. Εισαγωγή κουμπιού τύπου Submit με τίτλο Υποβολή Εισαγωγή κουμπιού τύπου Reset με τίτλο Καθαρισμός

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

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο