Html learning fornewbies

Εκμάθηση της γλώσσας ΗΤΜL

για αρχάριους

Μάθετε εύκολα και γρήγορα

Μαθήματα HTML για αρχάριους Στη σειρά μαθημάτων για HTML θα μάθετε πως να γράφετε κώδικα HTML εύκολα και γρήγορα. Τα μαθήματα που ακολουθούν είναι απλά και δεν απαιτούν την προηγούμενη τεχνογνωσία. Στο τέλος αυτών των μαθημάτων θα είστε σε θέση να κατασκευάσετε απλές σελίδες βασισμένες αποκλειστικά σε γλώσσα σήμανσης HTML. Τι είναι η HTML; Η γλώσσα σήμανσης HTML είναι μια γλώσσα προγραμματισμού που έχει σχεδιαστεί για να περιγράφει το περιεχόμενο μιας ιστοσελίδας με κατάλληλες για αυτό το σκοπό εντολές (ετικέτες). Το όνομα της προκύπτει από τα αρχικά των λέξεων Hyper Text Markup Language. Θα πρέπει να σημειωθεί πως η HTML δεν είναι μια πραγματική γλώσσα προγραμματισμού, αλλά μια γλώσσα σήμανσης. Στο σύνολό της αποτελείτε από ετικέτες που με τη σειρά τους οι ετικέτες είναι υπεύθυνες να προβάλουν το περιεχόμενο μιας ιστοσελίδας με κατάλληλο τρόπο. Ετικέτες της HTML Οι “εντολές” της HTML αποκαλούνται HTML ετικέτες. Οι ετικέτες είναι ειδικές λέξεις που περιβάλλονται από αγκύλες όπως για παράδειγμα η ετικέτα <html>. Οι περισσότερες ετικέτες είναι σε ζευγάρια όπως για παράδειγμα η ετικέτα <div></div>. Η πρώτη ετικέτα σε ένα ζεύγος ετικετών αποκαλείτε ετικέτα έναρξης, ενώ η δεύτερη ετικέτα αποκαλείτε ετικέτα τερματισμού. Εναλλακτικές ονομασίες για την ετικέτα έναρξης και τερματισμού στη διεθνή κοινότητα είναι οι ετικέτες start tag, end tag και opening tags και closing tags. Έγγραφα HTML – Ιστοσελίδες Τα έγγραφα HTML είναι ουσιαστικά οι γνωστές σε όλους μας ιστοσελίδες. Τα έγγραφα HTML αποτελούνται από ετικέτες της HTML και καθαρό κείμενο. Ο σκοπός ενός περιηγητή διαδικτύου (όπως είναι για παράδειγμα ο Internet Explorer, ο Firefox, ο Chrome κα.) είναι να διαβάσουν (να κάνουν Render) ένα HTML έγγραφο και να το προβάλουν ως ιστοσελίδα. Ο περιηγητής διαδικτύου δεν προβάλει τις ετικέτες της HTML, αλλά χρησιμοποιεί τις ετικέτες για να προβάλει κατάλληλα το περιεχόμενο σαν σελίδα. Ας δούμε στα γρήγορα ένα παράδειγμα: <html> <body> <h1>Η επικεφαλίδα του εγγράφου μου</h1> <p>Εδώ περνάω το περιεχόμενο μιας παραγράφου.</p> </body> </html> Δείτε το παράδειγμα ζωντανά

http://cgi.di.uoa.gr/%7Egrad1137/examples_html/e1.html

Επεξήγηση του παραδείγματος Το κείμενο μεταξύ των ετικετών <html> και </html> περιέχει το σύνολο του εγγράφου της ιστοσελίδας. Είναι ουσιαστικά οι ετικέτες οριοθέτησης της αρχής και του τέλους του εγγράφου. Να σημειωθεί πως έξω από αυτές τις ετικέτες δεν πρέπει να υπάρχει άλλο περιεχόμενο εκτός από σχόλια (τα σχόλια θα τα καλύψουμε σε επόμενο μάθημα). Το κείμενο μεταξύ των ετικετών <body> και </body> είναι αυτό που εμφανίζεται στους Web Browsers (όπως Chrome, Safari, Internet Explorer, κα.). Το κείμενο μεταξύ των ετικετών <h1> και </h1> αναπαρίσταται σαν επικεφαλίδα. Τι κείμενο μεταξύ των ετικετών <p> και </p> αναπαρίσταται σαν μια απλή παράγραφος. Αρχίστε να γράφετε HTML Τι θα χρειαστείτε για να αρχίσετε; Για να αρχίσετε να γράφετε HTML δεν χρειάζεστε κανένα εργαλείο εξειδικευμένο ή κάτι που δεν έχετε μέχρι τώρα. Ποιο συγκεκριμένα για να αρχίσετε να μαθαίνετε HTML δεν χρειάζεται να έχετε κάποιο ειδικό επεξεργαστή εγγράφων HTML, κάποιο Web Server ή κάποια ιστοσελίδα. Για να πραγματοποιήσετε τα πειράματα σας το μόνο που χρειάζεστε είναι ένας υπολογιστής, ένα απλό επεξεργαστή κειμένου (όπως είναι για παράδειγμα το Σημειωματάριο των Windows) και ένα περιηγητή διαδικτύου (όπως για παράδειγμα των Internet Explorer, Chrome, Safari, Opera, κοκ.) Επεξεργασία εγγράφων HTML Η γλώσσα HTML μπορεί να γραφτεί με πολλούς διαφορετικούς επεξεργαστές όπως είναι για παράδειγμα ο phpDesigner, το Dreamweaver και το Visual Studio. Ωστόσο στα μαθήματα που ακολουθούν δεν θα χρειαστείτε κανέναν από τους παραπάνω επεξεργαστές εγγράφων HTML. Πιστεύουμε πως για να μπορέσετε να μάθετε καλά την γλώσσα σήμανσης HTML δεν είναι απαραίτητη η χρήση κάποιου εξειδικευμένου εργαλείου. Επεκτάσεις των αρχείων HTML. Όταν αποθηκεύεται τα έγγραφα HTML που δημιουργείτε μπορείτε να τα αποθηκεύσετε είτε ως .html ή .htm. Δεν υπάρχει κάποια διαφορά και έτσι μπορείτε να διαλέξετε την κατάληξη των αρχείων σας όπως σας βολεύει. Τα βασικά της HTML Στα ακόλουθα παραδείγματα μην ανησυχείτε αν βλέπετε ετικέτες που δεν έχετε

μάθει ακόμα. Θα σας μάθουμε τι είναι οι ετικέτες όλες σε μαθήματα που ακολουθούν. Επικεφαλίδες HTML Οι ετικέτες επικεφαλίδων της HTML ορίζονται με τις ετικέτες <h1> ως <h6>. Ο αριθμός στα δεξιά του h ορίζει το μέγεθος της επικεφαλίδας στην HTML, ενώ οι μηχανές αναζήτησης από τον αριθμό αυτό αντλούν πληροφορίες για το πόσο σημαντικό είναι το περιεχόμενο τους βάση του αριθμού. Παράδειγμα: <h1>Επικεφαλίδα επιπέδου 1</h1> <h2>Επικεφαλίδα επιπέδου 2</h2> <h3>Επικεφαλίδα επιπέδου 3</h3> <h4>Επικεφαλίδα επιπέδου 4</h4> <h5>Επικεφαλίδα επιπέδου 5</h5> <h6>Επικεφαλίδα επιπέδου 6</h6> Δείτε το παράδειγμα ζωντανά Παράγραφοι HTML Όταν θέλετε να δημιουργήσετε μια παράγραφο σε ένα HTML έγγραφο θα χρησιμοποιείτε την ετικέτα <p>. Η ετικέτα <p> είναι η αρμόδια για να προβάλει περιεχόμενο σε μορφή παραγράφου. Παράδειγμα: <p>Αυτή είναι μια παράγραφος γραμμένη ανάμεσα σε ετικέτες έναρξης και τέλους p</p> <p>Αυτή είναι ακόμα μια παράγραφος που ακολουθεί την πρώτη παράγραφο και το περιεχόμενο Δείτε το παράδειγμα ζωντανά Σύνδεσμοι HTML Οι σύνδεσμοι της HTML χρησιμοποιούνται για να συνδέσουν δυο διαφορετικά έγγραφα μεταξύ τους. Η ετικέτα που πρέπει να χρησιμοποιήσετε για να συνδέσετε δυο έγγραφά μεταξύ τους είναι η a. Παράδειγμα: <a href=”http://www.uoa.gr”>Αυτός είναι ένας δοκιμαστικός σύνδεσμος</a> Δείτε το παράδειγμα ζωντανά Εικόνες στην HTML




Αν θέλετε να εισάγετε εικόνες σε ένα έγγραφο HTML θα πρέπει να χρησιμοποιήσετε την ετικέτα img. Παράδειγμα: <img src=”uoa_logo.jpg” width=”180” height=”410” /> Δείτε το παράδειγμα ζωντανά Τα στοιχεία της HTML Όλα τα έγγραφα της HTML δομούνται και αποτελούνται από τα στοιχεία της γλώσσας σήμανσης HTML. Το σύνολο αυτών των στοιχείων είναι ένα μικρό σύνολο από ετικέτες που μπορείτε να χρησιμοποιήσετε για να δομήσετε ένα έγγραφο. Αυτό που ορίζει ένα HTML στοιχείο είναι οτιδήποτε από την ετικέτα έναρξης μέχρι την ετικέτα τερματισμού. Μερικά τέτοια παραδείγματα είναι παρακάτω:

Σύνταξη στοιχείων HTML Τα στοιχεία της HTML αρχίζουν με μία ετικέτα έναρξης και τελειώνει με μια ετικέτα τερματισμού. Αυτό που ορίζει το περιεχόμενο μιας ετικέτας είναι οτιδήποτε υπάρχει μεταξύ της ετικέτας έναρξης και της ετικέτας τερματισμού. Να σημειωθεί πως μερικές ετικέτες της HTML έχουν τη δυνατότητα να είναι καινές. Οι ετικέτες της HTML που μπορούν να μην έχουν περιεχόμενο κλείνουν κατευθείαν στην ετικέτα έναρξης. Ο τρόπος που οι καινές ετικέτες κλείνουν είναι απλός. Απλά πρέπει να προσθέσετε μια πλαγιοκάθετο στα αριστερά της δεξιάς αγκύλης της ετικέτας. Για παράδειγμα: <br /> <hr /> <img src=”...” /> Θα πρέπει να γνωρίζεται πως οι περισσότερες ετικέτες της HTML μπορούν να έχουν ιδιότητες για τις οποίες θα μιλήσουμε σε επόμενα μαθήματα.


Ένθετες ετικέτες HTML Το μεγαλύτερο μέρος των ετικετών της HTML μπορούν να είναι ένθετες μέσα σε άλλες ετικέτες. Για παράδειγμα δείτε το έγγραφο HTML που ακολουθεί: <html> <body> <p>Αυτό είναι ένα δοκιμαστικό κείμενο με ένα <a href=”http://www.uoa.gr”>σύνδεσμο</a></p> </body> </html> Το παραπάνω έγγραφο περιέχει τέσσερις ετικέτες HTML που είναι ένθετες η μία μέσα στην άλλη. Για παράδειγμα η ετικέτα a είναι ένθετη στην ετικέτα p που με τη σειρά της είναι ένθετη στην ετικέτα body, όπου και αυτή με τη σειρά της είναι ένθετη στην ετικέτα html. Επεξήγηση του εγγράφου Στο παραπάνω έγγραφο, η ετικέτα a δημιουργεί ένα υπέρ-σύνδεσμο προς τη σελίδα της StigmaHost. Η ετικέτα του υπέρ-συνδέσμου αποτελείτε από την ετικέτα έναρξης και την ετικέτα τερματισμού, και το περιεχόμενο της ετικέτας είναι το “σύνδεσμος”. Η ετικέτα p ορίζει μια παράγραφο μέσα στο έγγραφο της HTML μέσα στις ετικέτες έναρξης και τερματισμού p. Το περιεχόμενο της ετικέτας είναι το “Αυτό είναι ένα δοκιμαστικό κείμενο με ένα” και ένα στοιχείο υπέρ-συνδέσμου. Το στοιχεία body ορίζει τον βασικό κορμό του εγγράφου ανάμεσα στις ετικέτες έναρξης και τερματισμού body. Το περιεχόμενο της ετικέτας body είναι ένα στοιχείο p. Τέλος η ετικέτα html είναι αυτή που ορίζει την αρχή και το τέλος του εγγράφου της HTML. Το στοιχείο html αποτελείτε από την ετικέτα έναρξης και την ετικέτα τερματισμού html και το περιεχόμενο του στοιχείου html είναι ένα στοιχείο body. Μην ξεχνάτε την ετικέτα τερματισμού Σε ορισμένες περιπτώσεις το περιεχόμενο μιας ετικέτας θα προβάλετε σωστά ακόμα και αν έχετε ξεχάσει να γράψετε την ετικέτα τερματισμού. Για παράδειγμα δείτε τα ακόλουθα: <p>Μία δοκιμαστική παράγραφος <p>Ακόμα μια δοκιμαστική παράγραφος Το παραπάνω παράδειγμα λειτουργεί σωστά στους περισσότερους περιηγητές διαδικτύου, επειδή η ετικέτα τερματισμού των παραγράφων είναι προαιρετική. Το σωστό όμως είναι να γράφετε πάντα τις ετικέτες τερματισμού. Πολλές από τις ετικέτες της HTML θα παράγουν ένα αποτέλεσμα που δεν θα το περιμένετε αν δεν κλείνετε σωστά όλες τις ετικέτες σας.

Κατά τη γνώμη μου είναι καλό να μάθετε από τώρα να χρησιμοποιείτε σωστά τις ετικέτες και να μην αφήνετε τον κώδικα στην τύχη του. Με αυτό τον τρόπο θα μπορείτε να γράφετε HTML έγγραφα που δεν θα προκαλούν προβλήματα σε εσάς και τους επισκέπτες των ιστοσελίδων σας. Καινά στοιχεία HTML Οι ετικέτες που δεν έχουν ετικέτα τερματισμού είναι αυτές που αποκαλούνται καινά στοιχεία. Ένα καινό στοιχείο για παράδειγμα είναι το <br> το οποίο δεν έχει μια ετικέτα τερματισμού. Συμβουλή: Στην XHTML όλες οι ετικέτες πρέπει να κλείνουν. Για να κλείσετε μια ετικέτα που δεν έχει ετικέτα τερματισμού θα πρέπει να προσθέσετε μια πλαγιοκάθετο στα αριστερά της δεξιάς αγκύλης της ετικέτας. Για παράδειγμα η ετικέτα <br> της HTML στην XHTML κλείνει ως <br />. Αυτός είναι και ο σωστός τρόπος για να κλείνετε καινές ετικέτες στην XHTML. Συμβουλή: Πεζά γράμματα στης ετικέτες Οι ετικέτες της HTML δεν είναι ευαίσθητες στον τρόπο γραφής τους. Μπορείτε να γράψετε τις ετικέτες σας με πεζά ή κεφαλαία γράμματα ή αναμεμιγμένα μεταξύ τους. Έτσι για παράδειγμα οι ακόλουθες ετικέτες είναι όλες ισοδύναμες: <p>Παράγραφος</p> <P>Παράγραφος</P> <img src=”image_file.jpg” /> <IMG src=”image_file.jpg” /> <iMg sRC=”image_file.jpg” /> Ωστόσο εμείς σας προτείνουμε να χρησιμοποιείτε πεζά γράμματα, αφενός γιατί η κοινοπραξία του World Wide Web (W3C) το προτείνει για την HTML 4 ενώ για την XHTML το επιβάλει. Ιδιότητες HTML Με τις ιδιότητες μπορείτε να παρέχετε επιπλέον πληροφορίες για μια ετικέτα στον περιηγητή διαδικτύου και να μεταβάλετε και μερικές από τις λειτουργίες της ετικέτας. Γενικότερα πολλές από τις ετικέτες της HTML μπορούν να έχουν ιδιότητες οι οποίες παρέχουν επιπλέον πληροφορίες για την ετικέτα στον περιηγητή διαδικτύου. Οι ιδιότητες πάντα ορίζονται στην ετικέτα έναρξης και είναι σε ζευγάρια ονόματος τιμής όπως για παράδειγμα το name=”value”. Παράδειγμα ιδιοτήτων Ένα χαρακτηριστικό παράδειγμα είναι οι ετικέτες υπέρ-συνδέσμων οι οποίες

ορίζονται με την ετικέτα <a>. Η διεύθυνση στην οποία θα οδηγεί όμως η ετικέτα ορίζεται στην ιδιότητα href. Δείτε το παράδειγμα που ακολουθεί: <a href=”http://www.uoa.gr”>Ένας σύνδεμος</a> Θα πρέπει να σημειωθεί πως οι τιμές των ιδιοτήτων πρέπει να είναι μέσα σε εισαγωγικά. Το ποιο συνηθισμένο είναι να εισάγετε τις τιμές των ιδιοτήτων σε διπλά εισαγωγικά, αλλά αν θέλετε μπορείτε να χρησιμοποιήσετε και μονά εισαγωγικά. Σημείωση: Σε ορισμένες, ποιο σπάνιες περιπτώσεις που η ίδια η τιμή της ιδιότητας περιέχει μέσα κάποιο εισαγωγικό θα πρέπει να χρησιμοποιήσετε το αντίθετό του για να ορίσετε την τιμή της ετικέτας. Έτσι για παράδειγμα αν η τιμή που θέλετε να εισάγετε στην ιδιότητα είναι η ακόλουθη: Τα “παιδιά” είναι πάντα παιδιά Τότε η ιδιότητα θα πρέπει να γραφτεί έτσι: title='Τα “παιδιά” είναι πάντα παιδιά' Ενώ αν η τιμή είναι αυτή Απ' τα καλύτερα έργα Τότε θα πρέπει να την γράψετε έτσι title=”Απ' τα καλύτερα έργα” Τέλος όπως και με τις ετικέτες έτσι και με τις ιδιότητες, σας παροτρύνουμε να χρησιμοποιείτε πεζά γράμματα για τα ονόματα των ιδιοτήτων, για τους ίδιους ακριβώς λόγους που σας παροτρύνουμε να γράφετε τα ονόματα των ετικετών σας επίσης με πεζά γράμματα. Αναφορά στης ιδιότητες της HTML Εδώ θα δείτε μερικές από τις ετικέτες που είναι τυπικές για τις περισσότερες ετικέτες της HTML.

Αν θέλετε μπορείτε να βρείτε πλήρη αναφορά στις ετικέτες της HTML εδώ. Αν θέλετε μπορείτε να βρείτε μια λίστα με όλες τις τυπικές ιδιότητες των ετικετών της HTML εδώ.

Επικεφαλίδες HTML Οι ετικέτες επικεφαλίδων είναι σημαντικές γιατί προσδιορίζουν τι είναι το περιεχόμενο που ακολουθεί. Οι μηχανές αναζήτησης επίσης, δίνουν μεγαλύτερη σημασία στο περιεχόμενο των ετικετών επικεφαλίδας. Οι ετικέτες επικεφαλίδας ορίζονται με τις ετικέτες <h1> έως <h6>, όπου <h1> είναι η ετικέτα με τη μεγαλύτερη σημασία και η <h6> είναι η ετικέτα με τη μικρότερη σημασία. Να σημειωθεί πως οι περιηγητές διαδικτύου προσθέτουν αυτόματα κάποιο καινό χώρο πριν και μετά τις ετικέτες επικεφαλίδας αυτόματα που ισοδυναμεί με τρία margin. Οι επικεφαλίδες είναι σημαντικές Τι ετικέτες επικεφαλίδας να της χρησιμοποιείτε μόνο για αν ορίζετε επικεφαλίδες και για κανένα άλλο λόγο. Οι μηχανές αναζήτησης χρησιμοποιούν τις επικεφαλίδες για να ταξινομήσουν τη δομή και το περιεχόμενο της ιστοσελίδας σας. Πέρα από τις μηχανές αναζήτησης όμως, οι χρήστες της ιστοσελίδας σας διαβάζοντας τις ετικέτες επικεφαλίδας μπορούν εύκολα και γρήγορα να εντοπίσουν την πληροφορία που τους ενδιαφέρει. Η ετικέτα <h1> θα πρέπει να χρησιμοποιείτε ως η κύρια επικεφαλίδα στο έγγραφο σας, ακολουθούμενη από <h2> που είναι λιγότερο σημαντική και να καταλήγετε στην επικεφαλίδα <h6> που είναι η λιγότερο σημαντική. Γραμμές στην HTML Η ετικέτα <hr /> δημιουργεί οριζόντιες γραμμές σε μία σελίδα HTML. Μία χρήση της ετικέτας <hr /> είναι ο διαχωρισμός του περιεχομένου μιας ιστοσελίδας. Δείτε το ακόλουθο παράδειγμα: <p>Αυτή είναι μια παράγραφος κειμένου με λέξεις και γράμματα</p> <hr /> <p>Αυτή η παράγραφος είναι μετά την πρώτη ετικέτα που δημιουργεί μια οριζόντια γραμμή</p> <hr /> <p>Και αυτή η παράγραφος είναι μετά από μια γραμμή που τη δημιουργεί η ετικέτα <hr /><p> Σχόλια στον κώδικα της HTML Τα σχόλια είναι ένα στοιχείο της HTML που θα πρέπει να εισάγετε μέσα στον κώδικα σας για να βελτιώσετε την δυνατότητα ανάγνωσης του κώδικα σας και την καλύτερη κατανόηση του σε μελλοντικές επεμβάσεις που θα κάνετε εσείς στον κώδικα σας ή που θα κάνει κάποιος τρίτος. Μέσα σε ένα έγγραφο HTML μπορείτε να εισάγετε όσα σχόλια θέλετε. Όταν μια σελίδα που έχει σχόλια εμφανίζεται σε ένα περιηγητή διαδικτύου, ο περιηγητής απλά τα αγνοεί και δεν τα εμφανίζει μέσα στον κορμό της σελίδας. Τα σχόλια μέσα στον κώδικα HTML γράφονται όπως στο παράδειγμα που

ακολουθεί:  Να σημειωθεί πως μετά την αγκύλη έναρξης υπάρχει ένα θαυμαστικό που δεν υπάρχει πριν την αγκύλη τερματισμού. Συμβουλή – Πως να δείτε των κώδικα HTML μιας σελίδας Έχετε ποτέ κάποια σελίδα για την οποία απορείτε πως έχει δημιουργηθεί το περιεχόμενο της; Σε ποιες ετικέτες είναι βασισμένο; Με τι τεχνικές την έχουν δομήσει; Μπορείτε αν θέλετε να δείτε εύκολα των κώδικα που πλαισιώνει μια ιστοσελίδα απλά με δεξί κλικ στη σελίδα επιλέγοντας “Προβολή προέλευσης” για τον Internet Explorer, “Προβολή πηγαίου κώδικα” στον Firefox ή κάποια σχετική με αυτές τις επιλογές σε άλλους περιηγητές διαδικτύου. Αυτές οι επιλογές θα ανοίξουν ένα παράθυρο που θα περιέχει τον κώδικα της ιστοσελίδας. Να σημειωθεί βέβαια πως αυτή η τεχνική θα προβάλει των κώδικα που έχει γράψει αρχικά ο Web Developer. Μερικά από τα στοιχεία που βλέπεται σε μια σελίδα μπορεί να έχουν δημιουργηθεί με τη βοήθεια σεναρίων εντολών και με τεχνολογία AJAX. Παράγραφοι Σε ένα έγγραφο HTML ένα από τα σημαντικότερα στοιχεία είναι οι ετικέτες παραγράφων οι οποίες ορίζονται από την ετικέτα <p>. Με τις παραγράφους μπορείτε να χωρίσετε το κείμενο σας σε μικρότερες ενότητες, που με τη σειρά τους θα διευκολύνουν τους επισκέπτες της ιστοσελίδας σας να διαβάσουν ποιο εύκολα τα κείμενα σας. Σε ένα έγγραφο HTML μπορείτε να δημιουργήσετε παραγράφους με τον ακόλουθο τρόπο: <p>Η πρώτη μου δοκιμαστική παράγραφος</p> <p>Ακόμα μια δοκιμαστική παράγραφος</p> Σημείωση: Οι περιηγητές διαδικτύου προσθέτουν αυτόματα μια καινή γραμμή πριν και μετά τις παραγράφους. Μην ξεχνάτε να γράφετε την ετικέτα τερματισμού Οι περισσότεροι περιηγητές διαδικτύου θα προβάλουν σωστά τις παραγράφους σας αν δεν έχετε εισάγει την ετικέτα τερματισμού όπως είναι στο παράδειγμα που ακολουθεί: <p>Η πρώτη μου δοκιμαστική παράγραφος <p>Ακόμα μια δοκιμαστική παράγραφος Το παραπάνω παράδειγμα θα λειτουργήσει καλά με τους περισσότερους περιηγητές διαδικτύου αλλά αυτό δεν συμβαίνει με όλους. Αν ξεχνάτε να γράφετε την ετικέτα τερματισμού, μπορεί να δείτε τη σελίδα σας να συμπεριφέρεται διαφορετικά από περιηγητή σε περιηγητή. Αλλαγή γραμμής στην HTML

Αν στο έγγραφο σας θέλετε να αλλάξετε γραμμή χρησιμοποιήστε την ετικέτα <br /> χωρίς να δημιουργήσετε μια νέα παράγραφο. Δείτε το παράδειγμα που ακολουθεί: <p>Αυτή είναι μια παράγραφος<br /> που έχει στο σύνολο της<br/> τρεις γραμμές</p> Να σημειωθεί πως στα έγγραφα XHTML θα πρέπει να κλείνετε την ετικέτα <br> μόνη της προσθέτοντας μια πλαγιοκάθετο στα αριστερά της δεξιάς αγκύλης έτσι ώστε η ετικέτα να μοιάζει με <br />. Αν και η ετικέτα <br> εξακολουθεί να λειτουργεί κανονικά στα έγγραφα xHTML η ετικέτα <br /> συμπεριφέρεται ακόμα καλύτερα, ενώ αν περάσετε το έγγραφο σας από έλεγχο εγκυρότητας τότε η ετικέτα <br /> θα είναι αυτή που δεν θα προκαλέσει προβλήματα. Χρήσιμες συμβουλές για την έξοδο της HTML Σε καμία περίπτωση δεν μπορείτε να είστε σίγουροι για το πως θα προβληθεί η σελίδα σας. Αν θα εμφανίζεται σε μεγάλες οθόνες, ή σε παράθυρα που το μέγεθος τους μεταβάλετε. Σε κάθε περίπτωση, το έγγραφο σας θα έχει διαφορετική εμφάνιση. Στην HTML δεν μπορείτε να μεταβάλετε την έξοδο προσθέτοντας επιπλέον καινά ή επιπλέον γραμμές στον κώδικα σας. Οι περιηγητές θα αφαιρέσουν αυτόματα τα επιπλέον καινά και τις επιπλέον γραμμές που έχετε προσθέσει στον πηγαίο κώδικα σας κατά την προβολή της σελίδας σας. Όσες νέες γραμμές και να βάλετε στον πηγαίο σας κώδικα οι περιηγητές θα τις αντιμετωπίσουν ως μια νέα γραμμή, και όσους χαρακτήρες καινού και να προσθέσετε οι περιηγητές θα τους αντιμετωπίσουν σαν ένα χαρακτήρα καινού. Μορφοποίηση εγγράφων Η HTML ως γλώσσα σήμανσης δεν έχει το ρόλο της μορφοποίησης των εγγράφων HTML. Για το λόγο αυτό υπάρχουν τα CSS που αναλαμβάνουν όλη τη δουλειά της μορφοποίησης. Ωστόσο η HTML διαθέτει μερικές ετικέτες που μπορούν να μορφοποιήσουν ελαφρός ένα έγγραφο HTML όπως είναι στο παράδειγμα που ακολουθεί. <strong>Έντονα γραμμένο κείμενο</strong> <big>Κείμενο με μεγάλα γράμματα</big> <i>Πλάγια γραμμένο κείμενο</i> <code>Κείμενο με μορφή σαν έξοδο από υπολογιστή</code> Κείμενο με <sub>δείκτη</sub> και <sup>εκθέτη</sup> Ετικέτες μορφοποίησης της HTML Στην HTML μπορείτε να χρησιμοποιήσετε ετικέτες σαν τις <b> και <i> για να μορφοποιήσετε την έξοδο σε έντονα και πλάγια. Αυτές οι ετικέτες της HTML αποκαλούνται ετικέτες μορφοποίησης.

Σημείωση : Συχνά η ετικέτα <strong> έχει την ίδια εμφάνιση με την ετικέτα <b> και η ετικέτα <em> την ίδια εμφάνιση με την ετικέτα <i>. Ωστόσο, υπάρχει διαφορά στην έννοια αυτών των ετικετών. Οι ετικέτες <b> και <i> ορίζουν μόνο έντονο και πλάγιο κείμενο αντίστοιχα. Οι ετικέτες <strong> και <em> σημαίνουν πως θέλετε το κείμενο να εμφανίζεται με τρόπο που να καταλαβαίνει ο χρήστης πως είναι σημαντικό. Στις μέρες μας οι σύγχρονοι περιηγητές διαδικτύου αναπαριστούν τις ετικέτες strong με έντονα γράμματα και το em με πλάγια γράμματα. Οι ετικέτες μορφοποίησης της HTML

Γραμματοσειρές στην HTML Η ετικέτα <font> θα πρέπει να ΜΗΝ την χρησιμοποιείτε στα έγγραφα σας. Για να χρησιμοποιήσετε τις γραμματοσειρές στο έγγραφο σας πέρα από τις προεπιλεγμένες θα πρέπει να μορφοποιήσετε το έγγραφο σας με CSS και από εκεί με τις κατάλληλες εντολές να αλλάξετε γραμματοσειρά. Η ετικέτα <font> έχει καταργηθεί από την HTML 4 και δεν υπάρχει καθόλου στην HTML 5. Επίσης η κοινοπραξία του παγκόσμιου ιστού (World Wide Web Consortium W3C) έχει αφαιρέσει την ετικέτα <font> από τις συστάσεις της. Μορφοποίηση εγγράφων HTML με CSS

Αν θέλετε να πραγματοποιήσετε κάποια μορφοποίηση στα έγγραφα σας, τότε δεν έχετε παρά να γράψετε CSS. Η θέση του CSS σε μια ιστοσελίδα είναι να μορφοποιήσει το περιεχόμενο, προσθέτοντας χρώματα, γραμματοσειρές, μεγέθη γραμματοσειρών περιγράμματα κα. Στην HTML για να προσθέσετε CSS έχετε τρις διαφορετικούς τρόπους στη διάθεση σας και είναι οι ακόλουθοι: • Δημιουργία αρχείων CSS • Ενσωμάτωση CSS κώδικα μέσα στο ίδιο το έγγραφο σε ετικέτες <style> • Ενσωμάτωση CSS κώδικα σε ετικέτα στην ιδιότητα της style. Από τους τρις παραπάνω τρόπους εισαγωγής κώδικα μορφοποίησης CSS ο ποιο ευέλικτος είναι αυτός με τα αρχεία CSS, ενώ οι άλλοι δυο είναι λιγότερο ευέλικτοι. Ειδικά η χρήστη κώδικα CSS στην ιδιότητα style των ετικετών είναι εξαιρετικά κακή τακτική, αν αυτό αφορά το σύνολο της ιστοσελίδας σας γιατί εκτός από την επανάληψη του κώδικα CSS μέσα σε ένα web site η τακτική αυτή κάνει δύσκολη και τη συντήρηση μιας ιστοσελίδας, ο κώδικας σας είναι ποιο δύσκολος στην ανάγνωση και επόμενες αλλαγές στην HTML είναι ποιο δύσκολες. Ο ιδανικός τρόπος εισαγωγής κώδικα μορφοποίησης CSS σε ένα web site είναι με αρχεία CSS. Σε αυτή την περίπτωση, ο κώδικας μορφοποίησης είναι όλος συγκεντρωμένος σε ένα ή και περισσότερα αρχεία, δεν είναι ενσωματωμένος μέσα στην ιστοσελίδας σας οπότε έχετε ποιο καθαρό κώδικα και είναι πολύ ποιο εύκολη η συντήρηση του. Όπως και να έχεις, σε αυτό το άρθρο θα σας παρουσιάσουμε την τεχνική μορφοποίησης με την ιδιότητα style των ετικετών του εγγράφου της HTML γιατί θα είναι ποιο εύκολα κατανοητός από εσάς. Παραδείγματα μορφοποίησης <html> <body style=”background-color:yellowgreen”> <h2 style=”color: red;”>Μια επικεφαλίδα με κόκκινο χρώμα</h2> <p style=”color: magenta;”>Μια παράγραφος με χρώμα magenta</p> </body> </html> Στο παραπάνω παράδειγμα η εντολή μορφοποίησης του CSS “background-color” καταργεί την ιδιότητα της HTML “bgcolor”. Παράδειγμα μορφοποίησης εγγράφου με γραμματοσειρά, χρώμα και μέγεθος γραμματοσειράς Οι εντολές font-family, color και font-size ορίζουν τη γραμματοσειρά, το χρώμα και

το μέγεθος μια γραμματοσειράς αντίστοιχα. <html> <body> <h1 style=”font-family:Courier;”>Μια επικεφαλίδα με γραμματοσειρά Courier</h1> <p style=”font-family:arial;color: blue;font-size:20px;”>Μια παράγραφος με μπλε γράμματα, μεγέθους 20 εικονοστοιχείων και γραμματοσειρά Arial</p> </body> </html> Οι εντολές των CSS font-family, color και font-size αντικαθιστούν την ετικέτα <font> της HTML. Παράδειγμα στοίχισης κειμένου <html> <body> <h1 style=”text-align:center;”>Επικεφαλίδα στοιχισμένη στο κέντρο</h1> <p style=”text-align:right;”>Μια παράγραφος στοιχισμένη στα δεξιά<p> <body> </html> Η εντολή text-align των CSS αντικαθιστά την παλιά ετικέτα της HTML <center> Καταργημένες ετικέτες και ιδιότητες της HTML Στην HTML 4 ορισμένες ετικέτες και ιδιότητες καταργήθηκαν. Αυτό σημαίνει πως σε επόμενες εκδόσεις της HTML αυτές οι ετικέτες δεν θα υπάρχουν. Οι ακόλουθες ετικέτες και ιδιότητες θα πρέπει να μην χρησιμοποιούνται για να μορφοποιήσετε τα έγγραφα σας.

Σύνδεσμοι HTML Συνδέσμους HTML μπορείτε να βρείτε σχεδόν σε κάθε HTML έγγραφο. Οι σύνδεσμοι είναι αυτοί που σας επιτρέπουν να συνδέετε έγγραφα μεταξύ τους με αποτέλεσμα όλα τα έγγραφα μαζί να είναι σε θέση να αποτελέσουν ένα Web Site. Τα στοιχεία συνδέσμων στην HTML είναι αυτά που επιτρέπουν στον χρήστη με ένα κλικ να μετακινηθούν σε άλλο έγγραφο ή σε άλλο σημείο στο ίδιο έγγραφο. Οι υπέρ-

σύνδεσμοι ή διαφορετικά σύνδεσμοι μπορούν να είναι μια λέξη, ή μια εικόνα στην οποία μπορείτε να κάνετε κλικ και να πάτε σε μια άλλη ιστοσελίδα ή σε ένα άλλο σημείο στο ίδιο έγγραφο. Όταν το ποντίκι περνάει πάνω από ένα σύνδεσμο, το βελάκι θα μετατραπεί σε χέρι. Οι σύνδεσμοι στην HTML ορίζονται με την ετικέτα <a>, η οποία με τη σειρά της μπορεί να χρησιμοποιηθεί με δύο τρόπους. Ο πρώτος είναι να δημιουργήσετε ένα σύνδεσμο προς μια άλλη ιστοσελίδα χρησιμοποιώντας την ιδιότητα href της ετικέτας. Ο δεύτερος τρόπος είναι να δημιουργήσετε ένα “σελιδοδείκτη” μέσα σε ένα έγγραφο HTML, χρησιμοποιώντας την ιδιότητα name της ετικέτας. Η σύνταξη ενός συνδέσμου με την ετικέτα της HTML a είναι απλά και έχει την ακόλουθη μορφή: <a href=”url”>Κείμενο ή εικόνα συνδέσμου</a> Η ιδιότητα href είναι αυτή που ορίζει το σημείο στο οποίο θα γίνει η μετάβαση μετά το κλικ. Παράδειγμα <a href=”http://www.uoa.gr/”>Δείτε τη σελίδα του Πανεπιστημίου Αθηνών</a> Βάση του παραπάνω παραδείγματος, όταν κάποιος κάνει κλικ στο κείμενο “Δείτε τη σελίδα του Πανεπιστημίου Αθηνών” θα πηγαίνει στην κεντρική σελίδα του Πανεπιστημίου Αθηνών. Σημείωση: Ο σύνδεσμος μπορεί να μην είναι απαραίτητα κείμενο, αλλά να είναι κάποια εικόνα. Σύνδεσμοι HTML – η ιδιότητα target Η ετικέτα a έχει ακόμα μια ιδιότητα που ονομάζεται target και μπορείτε να τη χρησιμοποιήσετε για να αλλάξετε το χώρο στον οποίο θα ανοίξει μια σελίδα. Για παράδειγμα, ο κώδικας που ακολουθεί να ανοίξει την κεντρική σελίδα του Πανεπιστημίου Αθηνών.σε άλλο παράθυρο ή σε άλλη καρτέρα. <a href=”http://www.uoa.gr/” target=”_blank”>Δείτε τη σελίδα του Πανεπιστημίου Αθηνών.</a> Σύνδεσμοι HTML – Η ιδιότητα name Η ιδιότητα name στην ετικέτα a ορίζει το όνομα του συνδέσμου και για να δημιουργηθεί ένας σελιδοδείκτης μέσα σε ένα έγγραφο HTML. Σημείωση: Στην έκδοση HTML 5 θα πρέπει να χρησιμοποιείτε την ιδιότητα id για να ορίσετε το όνομα ενός συνδέσμου. Επίσης ο ορισμός του ονόματος του συνδέσμου με την ιδιότητα id λειτουργεί και στην HTML 4 σε όλους τους μοντέρνους περιηγητές διαδικτύου. Οι σελιδοδείκτες δεν εμφανίζονται μέσα στη σελίδα, αλλά είναι κρυφοί. Παράδειγμα Ένας επώνυμος σύνδεσμος μέσα σε ένα έγγραφο HTML.

<a name=”my_section”>Τμήμα της ιστοσελίδας μου</a> Δημιουργία συνδέσμου προς το “ Τμήμα της ιστοσελίδας μου” μέσα στο ίδιο έγγραφο: <a href=”my_section”>Μετάβαση στο τμήμα της ιστοσελίδας μου</a> Τέλος δημιουργία προς το ίδιο τμήμα της ιστοσελίδας μου από εξωτερική πηγή: <a href=”http://www.my-web-site.gr/my-page.html#my_section”> Μετάβαση στο τμήμα της ιστοσελίδας μου</a> Βασικές σημειώσεις Να προσθέτετε πάντα μια τελική πλαγιοκάθετο στα URL σας τα οποία αναφέρονται σε φάκελο και όχι σε κάποια σελίδα. Αν για παράδειγμα θέλετε να συνδεθείτε στον στον φάκελο html μέσα από το έγγραφο σας με τον κώδικα href=”http://www.my-website.gr/html” τότε ο server σας θα πραγματοποιήσει δύο αιτήσεις για να απαντήσει. Αρχικά θα προσθέσει την πλαγιοκάθετο που ξεχάσατε εσείς και στη συνέχεια κάνει ξανά το αίτημα το οποίο μοιάζει έτσι href=”http://www.my-web-site.gr/html/”. Συχνά οι επώνυμοι σύνδεσμοι (σελιδοδείκτες) χρησιμοποιούνται σε πίνακες περιεχομένων στην αρχή μεγάλων εγγράφων που χωρίζονται σε τμήματα. Σε αυτή την περίπτωση, στην αρχή κάθε κεφαλαίου στο άρθρο προστίθεται ένας επώνυμος σύνδεσμος, και στην αρχή του άρθρου στον πίνακα με τα περιεχόμενα του άρθρου δημιουργείτε συνδέσμους προς αυτά τα κεφάλαια. Εικόνες στην HTML Οι εικόνες είναι αναπόσπαστο κομμάτι των εγγράφων HTML σχεδόν σε κάθε web site που βλέπουμε στο διαδίκτυο στις μέρες μας. Για να εισάγετε μια εικόνα σε μια σελίδα HTML θα πρέπει να χρησιμοποιήσετε την ετικέτα <img /> και να ορίσετε ορισμένες από τις ιδιότητες της. Θα έχετε ήδη παρατηρήσει πως η ετικέτα <img /> δεν έχει ετικέτα τερματισμού. Για να προβάλετε μια εικόνα με την ετικέτα <img />, πρέπει να ορίσετε την ιδιότητα src. Η ιδιότητα src είναι η συντόμευση της λέξης source που στα ελληνικά σημαίνει πηγή. Η τιμή που πρέπει να ορίσετε στην τιμή src είναι η πλήρης ή η σχετική διεύθυνση της εικόνας που θέλετε να προβάλετε σε αυτό το στοιχείο. Η σύνταξη της ετικέτας <img /> είναι σαν αυτή που ακολουθεί: <img src=”image_url” alt=”εναλλακτικό κείμενο” /> Μέσα στην ιδιότητα src θα πρέπει να εισάγετε τη διεύθυνση της εικόνας που θέλετε να εμφανίσετε με την ετικέτα <img />. Για παράδειγμα, μια εικόνα με όνομα uoa_logo.png, μέσα στον φάκελο /pictures/ της ιστοσελίδας www.uoa.gr θα έχει URL http://www.uoa.gr/pictures/uoa_logo.png. Ο περιηγητής διαδικτύου, στο σημείο που υπάρχει η ετικέτα <img />. Αν στο

έγγραφό σας έχετε μια ετικέτα <img /> ανάμεσα από δυο ετικέτες <p> τότε, αυτό που θα εμφανιστεί στην περιηγητή διαδικτύου θα είναι μια παράγραφος κειμένου, μετά μια εικόνα και τέλος ακόμα μία παράγραφος κειμένου. Εικόνες στην HMTL και η ιδιότητα Alt Η απαραίτητη ιδιότητα alt παρέχει ένα εναλλακτικό κείμενο για την εικόνα, που εμφανίζεται όταν για κάποιο λόγο η εικόνα δεν μπορεί να εμφανιστεί. Η τιμή τις ιδιότητας alt είναι ένα κείμενο που ορίζει ο συγγραφέας του HTML εγγράφου όπως στο παράδειγμα που ακολουθεί: <img src=”uoa_logo.jpg” alt=”Το λογότυπο του Πανεπιστημίου Αθηνών” /> Γιατί είναι τόσο σημαντική η ιδιότητα alt; Συμβαίνει μερικές φορές, ο Web Browser σας να μην κατεβάσει μια εικόνα, και σε αυτή την περίπτωση ο χρήστης μπορεί να δει μια περιγραφή της εικόνας αυτής που δεν κατέβηκε από το Server σας. Επίσης, υπάρχουν περιπτώσεις που οι χρήστες έχουν απενεργοποιήσει εντελώς τις εικόνες τους από του περιηγητές διαδικτύου τους. Ακόμα, υπάρχουν άνθρωποι με προβλήματα όρασης, που χρησιμοποιούν αναγνώστες οθόνης. Σε αυτή την περίπτωση, οι αναγνώστες διαβάζουν την ιδιότητα alt στα άτομα που τους χρησιμοποιούν. Τέλος υπάρχουν χρήστες που δεν θέλουν εικόνες όταν εκτυπώνουν ένα έγγραφο HTML, και σε αυτή την περίπτωση θα εκτυπωθεί η τιμή τις ιδιότητας alt. Εικόνες στην HTML – Ορισμός πλάτους και ύψους Μπορείτε αν θέλετε να χρησιμοποιήσετε τις ιδιότητες width και height για να ορίσετε το πλάτος και το ύψος μιας εικόνας. Οι τιμές που πρέπει να ορίσετε σε αυτές τις ιδιότητες θα πρέπει να είναι ακέραιοι αριθμοί και ορίζουν το πλάτος της εικόνας σε κουκκίδες (pixels) όπως στο παράδειγμα που ακολουθεί: <img src=”uoa_logo.jpg” alt=”Το λογότυπο του Πανεπιστημίου Αθηνών” width=”180” height=”410” /> Συμβουλή : Είναι μια καλή τακτική να ορίζεται το πλάτος και το ύψος μιας εικόνας. Αν ορίσετε αυτές οι τιμές, ο χώρος που χρειάζεται η εικόνα δεσμεύεται κατά το φόρτωμα της σελίδας. Ωστόσο χωρίς αυτές τις τιμές, ο περιηγητής διαδικτύου δεν μπορεί να γνωρίζει εξ αρχής ποιο είναι το μέγεθος της εικόνας. Σαν αποτέλεσμα, η δομή της σελίδας θα αλλάξει όταν τελικά φορτωθούν οι εικόνες. Βασικές σημειώσεις και συμβουλές Σημείωση : Αν ένα HTML έγγραφο περιέχει για παράδειγμα 15 εικόνες, τότε για να προβληθεί η σελίδα σας στον περιηγητή διαδικτύου θα πρέπει να κατεβούν από το server σας 16 αρχεία, ένα για την ίδια τη σελίδα και οι 15 εικόνες που χρησιμοποιείτε. Αυτό μπορεί να κάνει τη σελίδα σας βαριά με αποτέλεσμα να αργεί

να εμφανιστεί στον τελικό χρήστη. Προσοχή λοιπόν και χρησιμοποιείτε τις εικόνες με φειδώ. Πίνακες στην HTML Η HTML είναι αρκετά ευέλικτη και σας δίνει τη δυνατότητα να δημιουργήσετε δομές δεδομένων δύο διαστάσεων με την ετικέτα <table> που δημιουργεί πίνακες. Για παράδειγμα ένας πίνακας μπορεί να είναι οι βαθμοί ενός μαθητή χωρισμένοι σε εξάμηνα και σε μαθήματα. Ένας πίνακας ορίζεται με την ετικέτα <table>. Ένας πίνακας είναι χωρισμένος σε γραμμές (με την ετικέτα <tr>), και κάθε γραμμή χωρίζεται σε κελιά (με την ετικέτα <td>). Το όνομα της ετικέτας td προκύπτει από το αγγλικό table data (δεδομένα πίνακα), και σε αυτή την ετικέτα εισάγουμε τα δεδομένα του πίνακα μας. Μέσα σε μία ετικέτα <td> μπορούμε να εισάγουμε όποια άλλη ετικέτα θέλουμε, όπως είναι για παράδειγμα η ετικέτα <a>, ή ετικέτα <img /> η ετικέτα <p> και άλλες. Ακολουθεί ένα παράδειγμα πίνακα για να δείτε την δομή του πίνακα και πως αυτοί ορίζονται: <table border=”1”> <tr> <td>Πρώτη Γραμμή, Πρώτο κελί</td> <td>Πρώτη Γραμμή, Δεύτερο κελί</td> </tr> <tr> <td>Δεύτερη Γραμμή, Πρώτο κελί</td> <td>Δεύτερη Γραμμή, Δεύτερο κελί</td> </tr> </table> Πίνακες στην HTML και η ιδιότητα border Αν δημιουργήσετε ένα πίνακα χωρίς να έχετε ορίσει την ιδιότητα border του πίνακα, τότε ο πίνακας θα εμφανιστεί χωρίς περίγραμμα. Μερικές φορές αυτό μας εξυπηρετεί, αλλά υπάρχουν φορές που θέλουμε να είναι το περίγραμμα του πίνακα. Θα πρέπει να σημειωθεί πως η τιμή της ιδιότητας border είναι ένας ακέραιος αριθμός που ορίζει το πλάτος του περιγράμματος του πίνακα σε κουκκίδες. Δείτε το παράδειγμα που ακολουθεί: <table border=”5”> <tr> <td>Πρώτη Γραμμή, Πρώτο κελί</td> <td>Πρώτη Γραμμή, Δεύτερο κελί</td> </tr> <tr> <td>Δεύτερη Γραμμή, Πρώτο κελί</td> <td>Δεύτερη Γραμμή, Δεύτερο κελί</td> </tr> </table>

Πίνακες στην HTML και επικεφαλίδες Αν θέλετε να ορίσετε επικεφαλίδες για τις στήλες ενός πίνακα τότε μπορείτε αντί για την ετικέτα <td> να χρησιμοποιήσετε την ετικέτα <th>. Οι περισσότεροι σύγχρονοι περιηγητές διαδικτύου εμφανίζουν το περιεχόμενο της ετικέτας <th> με έντονα γράμματα (bold) και στοιχισμένα στο κέντρο. Το παράδειγμα που ακολουθεί δείχνει τον τρόπο χρήσης της ετικέτας <th> μέσα σε ένα πίνακα της HTML. <table border=”1”> <tr> <th>Πρώτη επικεφαλίδα</th> <th>Δεύτερη επικεφαλίδα</th> </tr> <tr> <td>Πρώτη Γραμμή, Πρώτο κελί</td> <td>Πρώτη Γραμμή, Δεύτερο κελί</td> </tr> <tr> <td>Δεύτερη Γραμμή, Πρώτο κελί</td> <td>Δεύτερη Γραμμή, Δεύτερο κελί</td> </tr> </table> Λίστες στην HTML Ένα από τα ποιο κοινά στοιχεία της HTML είναι οι ταξινομημένες και οι αταξινόμητες λίστες. Μία αταξινόμητη λίστα δημιουργείτε με την ετικέτα ul ενώ μία ταξινομημένη λίστα αρχίζει με την ετικέτα <ol> και κάθε μία τους ως στοιχείο περιέχει μέσα το HTML στοιχείο <li>. Στο παράδειγμα που ακολουθεί έχουμε δημιουργήσει μια αταξινόμητη και μια ταξινομημένη λίστα: <ul> <li>Πρώτο στοιχείο</li> <li>Δεύτερο στοιχείο</li> <li>Τρίτο στοιχείο</li> <li>Τέταρτο στοιχείο</li> </ul> <ol> <li>Πρώτο στοιχείο</li> <li>Δεύτερο στοιχείο</li> <li>Τρίτο στοιχείο</li> <li>Τέταρτο στοιχείο</li> </ol> Λίστες ορισμών στην HTML Ακόμα ένας άλλος τύπος λίστας στην HTML είναι η λίστα ορισμών. Μία λίστα ορισμών δημιουργείτε με την ετικέτα <dl> και μπορεί να περιέχει ετικέτες <dt> και <dd>. Στο παράδειγμα που ακολουθεί έχουμε δημιουργήσει μια λίστα ορισμών με τις

αρμοδιότητες κάποιον επαγγελματιών: <dl> <dt>Προγραμματιστής</dt> <dd>Συγγραφή προγραμμάτων</dd> <dd>Ανάλυση κώδικα</dd> <dt>Γραφίστας</dt> <dd>Σχεδίαση εταιρικής ταυτότητας</dd> <dd>Σχεδιασμός ιστοσελίδας</dd> <dd>Δημιουργία λογοτύπου</dd> <dl> Να σημειωθεί πως μέσα στα στοιχεία κάθε λίστας έχετε τη δυνατότητα να εισάγετε εικόνες, συνδέσμους, παραγράφους και άλλα στοιχεία της HTML. Φόρμες στην HTML Σε ένα έγγραφο HTML μπορείτε αν θέλετε να δημιουργήσετε φόρμες που είναι χρήσιμες για την εισαγωγή δεδομένων από τον τελικό χρήστη και την αποστολή αυτών των δεδομένων στον Server σας για επεξεργασία. Μια φόρμα μπορεί να περιέχει στοιχεία εισόδου, όπως είναι τα πεδία κειμένου, στοιχεία επιλογής (checkbox και radio buttons), κουμπιά (υποβολής, επαναφοράς της φόρμας κα) και άλλα. Μεταξύ αυτών των στοιχείων μια φόρμα μπορεί να περιέχει επίσης λίστες επιλογής, περιοχές κειμένου, ετικέτες κα. Ένα παράδειγμα φόρμας είναι το ακόλουθό: <form> … Στοιχεία της φόρμας … </form> Φόρμες στην HTML και στοιχεία εισόδου Το ποιο σημαντικό στις φόρμες είναι τα πεδία εισαγωγής δεδομένων. Τα στοιχεία εισαγωγής δεδομένων χρησιμοποιούνται από τον τελικό χρήστη για να εισάγει τις απαραίτητες για τη φόρμα πληροφορίες. Τα στοιχεία εισαγωγής δεδομένων μπορούν να διαφέρουν σε αρκετά χαρακτηριστικά μεταξύ τους ανάλογα με τον τύπο τους και τις ιδιότητες τους. Πεδία κειμένου Τα πεδία κειμένου ορίζονται με την ετικέτα <input type=”text” />. Τα πεδία αυτά επιτρέπουν στον χρήστη να εισάγει κείμενο σε μία μόνο γραμμή. Δείτε ένα παράδειγμα με πεδία κειμένου: <form> Όνομα : <input type=”text” name=”first_name” /<br /> Επώνυμο : <input type=”text” name=”last_name” /> </form> Σημείωση : Η ετικέτα φόρμας δεν έχει κάποια οπτική αναπαράσταση, οπότε μην

περιμένετε να δείτε τη φόρμα να εμφανίζεται στον περιηγητή σας. Το μόνο που μπορείτε να δείτε σε μία φόρμα είναι τα στοιχεία τα οποία περιβάλει. Πεδίο κωδικού πρόσβασης Υπάρχουν φόρμες στις οποίες πρέπει ο χρήστης να εισάγει ευαίσθητα δεδομένα, όπως είναι για παράδειγμα ένας κωδικός πρόσβασης. Για να δημιουργήσετε ένα πεδίο κωδικού πρόσβασης θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”password” /> όπως συμβαίνει με το παράδειγμα που ακολουθεί: <form> Κωδικός πρόσβασης : <input type=”password” name=”pswd” /> </form> Κουμπιά radio Τα κουμπιά radio επιτρέπουν στον χρήστη να επιλέξει μόνο μια τιμή ανάμεσα από μια ομάδα τιμών . Για να δημιουργήσετε ένα radio button θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”radio” /> όπως στο παράδειγμα που ακολουθεί: <form> <input type=”radio” name=”sex” value=”boy” /> Αγόρι<br /> <input type=”radio” name=”sex” value=”female” /> Κορίτσι </form> Checkboxes Τα chackboxes επιτρέπουν στον χρήστη να επιλέξει περισσότερες από μια επιλογές μέσα από μια ομάδα επιλογών. Για να δημιουργήσετε μια ομάδα στοιχείων checkbox θα πρέπει να χρησιμοποιήσετε την ετικέτα <input type=”checkbox” /> όπως στο παράδειγμα που ακολουθεί: <form> <input type=”checkbox” name=”services” value=”web_hosting” />Web Hosting<br /> <input type=”checkbox” name=”services” value=”domain_name” />Domain name<br /> <input type=”checkbox” name=”services” value=”dedicated_server” />Dedicated Server<br /> <input type=”checkbox” name=”services” value=”vps” />Virtual Private Server<br /> </form> Κουμπιά υποβολής Τα κουμπιά υποβολής είναι ειδικά κουμπιά μέσα σε μια φόρμα, που όταν ο χρήστης σταλούν στη διεύθυνση που υποδεικνύει η ιδιότητα action της ετικέτας form. Επίσης τα δεδομένα θα σταλούν στον Server με χρήση της μεθόδου που έχετε ορίσει στην ιδιότητα method της ετικέτας <form>. Στο παράδειγμα που ακολουθεί έχουμε δημιουργήσει μια φόρμα με ορισμένες τις ιδιότητες action και method, και στο εσωτερικό της έχουμε βάλει ένα πεδίο κειμένου και ένα κουμπί υποβολής.

<form action=”http://www.uoa.gr/” method=”get”> Αναζήτηση στο site του Πανεπιστημίου Αθηνών <input type=”text” name=”s” /> <input type=”submit” value=”Αναζήτηση” /> </form> Αν χρησιμοποιήσετε την παραπάνω φόρμα, τότε τα στοιχεία που θα εισάγετε στο πεδίο θα υποβληθούν στην σελίδα του Πανεπιστημίου Αθηνών για αναζήτηση στο ιστολόγιο της. Λίστα ετικετών για την HTML 4.01 / XHTML 1.0

Html learning fornewbies

Documents

Transcript of Html learning fornewbies