Μια ιστοσελίδα για να μπορέσει ένας φυλλομετρητής να την ερμηνεύσει θα πρέπει να διαθέτει και τις ανάλογες ετικέτες δήλωσης της ως ιστοσελίδα html, μέσα στον κώδικα της. Για να ορίσουμε ότι το αρχείο που γράφουμε εκείνη την στιγμή είναι αρχείο το οποίο θα ερμηνευτεί ως ιστοσελίδα από τους φυλλομετρητές χρησιμοποιούμε το tag <!DOCTYPE html>, με αυτή την ετικέτα έχουμε ορίσει ότι παρακάτω ο φυλλομετρητής βρίσκοντας αντίστοιχες ετικέτες θα αρχίσει να τις ερμηνεύει ως html.
Η σωστή δομή μιας ιστοσελίδας βασιζόμενοι στα υπάρχοντα πρότυπα έχει ως εξής:
<!DOCTYPE html>
<html>
<head>
<meta charset=’UTF-8’/>
<title> </title>
</head>
<body>
</body>
</html>Μεταξύ του «head» εισάγουμε κομμάτια κώδικα τα οποία δεν «φαίνονται» στο φόρτωμα της σελίδας, όπως meta tags, scripts κ.α., στο μεταξύ του «<body>» και του «</body>» εισάγουμε όλες τις ετικέτες εκείνες που εμφανίζονται στο φόρτωμα της σελίδας μας, εκεί συμπεριλαμβάνονται όλα αυτά που επεξηγούνται παρακάτω και όπου θα χρησιμοποιήσουμε κατά κόρον σε όλες τις επόμενες ενότητες μας.
Βασικές ετικέτες
Ο Πίνακας 2.1 περιγράφει μερικές από τις βασικότερες ετικέτες που χρησιμοποιούνται στην HTML.
| Ετικέτα | Παράδειγμα | Περιγραφή |
|---|---|---|
| hx | |
Τίτλοι κειμένων, απο 1 έως 6. |
| p | |
Περιοχή κειμένου |
| a | |
Χρήση συνδέσμου και τίτλου αυτού. Το url μπαίνει στο href και το εμφανιζόμενο κείμενο μέσα στο tag. |
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Δοκιμή βασικών ετικετών HTML</title>
</head>
<body>
<h1>Επικεφαλίδα 1 </h1>
<h2>Επικεφαλίδα 2 </h2>
<h3>Επικεφαλίδα 3 </h3>
<h4>Επικεφαλίδα 4 </h4>
<h5>Επικεφαλίδα 5 </h5>
<h6>Επικεδαλίδα 6 </h6>
<p>Παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου</p>
<a href='http://www.google.gr/'> Σύνδεσμος κειμένου </a>
</body>
</html>Αποτέλεσμα:
Μορφοποίηση κειμένου
Στην HTML υπάρχουν ετικέτες για την μορφοποίηση κειμένου, μερικές από αυτές περιγράφονται παρακάτω.
| Ετικέτα | Παράδειγμα | Περιγραφή |
|---|---|---|
| b | |
Έντονο κείμενο |
| i | |
Πλάγιο κείμενο |
| u | |
Υπογραμμισμένο κείμενο |
| pre | |
Παράγραφος σταθερού πλάτους |
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Δοκιμή μορφοποίησης κειμένου HTML</title>
</head>
<body>
<p>Παράγραφος κειμένου παράγραφος κειμένου <b>παράγραφος κειμένου</b> παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου παράγραφος κειμένου <i> παράγραφος κειμένου παράγραφος κειμένου</i> παράγραφος κειμένου παράγραφος κειμένου <u>παράγραφος κειμένου</u> <pre>παράγραφος κειμένου παράγραφος κειμένου</pre></p>
</body>
</html>Αποτέλεσμα:
Περιοχές αντικειμένων
Οι περιοχές αντικειμένων καθορίζουν τις περιοχές στις οποίες αντικείμενα μπορούν να εισαχθούν. Στα κειμενα καθορίζουν σε ποια σημεία αλλάζουν γραμμές ή που εισάγονται οριζόντιες γραμμές που χωρίζουν το περιεχόμενο.
| Ετικέτα | Παράδειγμα | Περιγραφή |
|---|---|---|
| div | |
Κοντέινερ που περιέχει στοιχεία html |
| br | |
Κενή γραμμή |
| hr | |
Οριζόντια γραμμή |
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Δοκιμή περιοχών αντικειμένων HTML</title>
</head>
<body>
<div>
Περιοχή html. Εδώ υπάρχει αλλαγή γραμμής-> </br> ^ η γραμμή άλλαξε. <hr/>
</div>
</body>
</html>Αποτέλεσμα:
Εικόνα
Η εικόνα χρησιμοποιείται με την ετικέτα «img» παίρνοντας αντίστοιχα κάποιες παραμέτρους:
<img src=" https://www.google.com/images/srpr/logo11w.png" alt='google'/>Στην παράμετρο «src» εισάγουμε το link όπου βρίσκεται η εικόνα, ενώ στην παράμετρο «alt» εισάγουμε εναλλακτικό κείμενο το οποίο θα εμφανίζεται αν δεν μπορεί για οποιοδήποτε λόγο να φορτωθεί η εικόνα.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Δοκιμή img</title>
</head>
<body>
<img src="https://www.google.com/images/srpr/logo11w.png" alt="google"/>
</body>
</html>Αποτέλεσμα:
Πίνακες
Οι πίνακες στην html είναι ένας τρόπο χωρικής ταξινόμησης προβαλλόμενων δεδομένων. Έτσι ότι προβάλλουμε είναι πιο εύκολα κατανοητό και ευανάγνωστο.
| Ετικέτα | Περιγραφή | Παράδειγμα |
|---|---|---|
| table | Ετικέτα που δέιχνει οτι ξεκινά και τελειώνει πίνακας | |
| tr | Table Row = Γραμμή Πίνακα | |
| th | Table Heading = Επικεφαλίδα Πίνακα | |
| td | Table Division = Κοντέινερ πίνακα (Κελί πίνακα) |
Αρχείο: table.html
<html>
<body>
<table border='1'>
<tr><th>Όνομα</th><th>Επώνυμο</th></tr>
<tr><td>Χρήστος</td><td>Νικολακόπουλος</td></tr>
<tr><td>Ιωάννα</td><td>Χριστοπούλου</td></tr>
</table>
</body>
</html>Αποτέλεσμα:
Η παράμετρος «border» καθορίζει πόσο θα είναι το μέγεθος των διαχωριστικών γραμμών που διαχωρίζουν τα κελιά μεταξύ τους και μετριέται σε pixels.
Φόρμες
Οι φόρμες είναι ένας τρόπος για την html έτσι ώστε ένας χρήστης να μπορεί να εισάγει δικά του δεδομένα και αυτά τα δεδομένα να μπορούν να χρησιμοποιηθούν κάπως μέσα στα scripts μας. Παρακάτω θα δούμε μερικές από τις πιο σημαντικές ετικέτες στις φόρμες html.
Ετικέτα: form
Η ετικέτα form χρησιμοποιείται για να δηλώσει ότι τα περιεχόμενα αντικείμενα της θα χρησιμοποιηθούν έτσι ώστε τα στοιχεία που θα εισαχθούν σε αυτά από κάποιον χρήστη, θα σταλθούν κάπου συγκεκριμένα και με συγκεκριμένο τρόπο.
Παράδειγμα:
<form method='post' action='file.php'>
…Υπόλοιπα στοιχεία φόρμας…
</form>- Το χαρακτηριστικό «action» καθορίζει που θα σταλούν τα δεδομένα μετά την υποβολή της φόρμας. Μπορεί να είναι ένα απλό όνομα αρχείου αν βρίσκεται στον ίδιο κατάλογο με την φόρμα ή μπορεί να είναι και ολόκληρο url.
- Το χαρακτηριστικό «method» καθορίζει τον τρόπο με τον οποίο μπορούν να σταλθούν τα στοιχεία και υπάρχουν δυο τρόποι για να συμβεί αυτό post και get.
- Όταν χρησιμοποιείται η μέθοδος «post» τότε τα στοιχεία μεταφέρονται από την φόρμα στο αρχείο της παραμέτρου «action» χωρίς να αποθηκεύονται στο ιστορικό του φυλλομετρητή και χωρίς να αφήνονται «ίχνη» πίσω τους. Είναι κατάλληλη έτσι για μεταφορά ευαίσθητων δεδομένων, όπως κωδικούς, προσωπικά στοιχεία κ.α.
- Όταν χρησιμοποιείται η μέθοδος «get» τότε τα στοιχεία μεταφέρονται από την φόρμα στο αρχείο της παραμέτρου «action» μέσω του url του φυλλομετρητή. Έτσι τα στοιχεία αυτά είναι εμφανή ακόμη και μετά την ολοκλήρωση της φόρμας και την αποστολή των στοιχείων, μέσω του url με την μορφή «ονομα_πεδίου=τιμή». Αυτή η μέθοδος χρησιμοποιείται για απλή μεταφορά μη ευαίσθητων δεδομένων, διότι είναι δυνατή η αποθήκευση των στοιχείων τόσο στο ιστορικό του φυλλομετρητή καθώς και ευάλωτη σε πρόσβαση από τρίτους.
Ετικέτα: input
Η ετικέτα input είναι μια ετικέτα που πρέπει να συμπεριληφθεί μέσα στα περιεχόμενα μιας ετικέτας form. Διαθέτει κάποιες παραμέτρους που καθορίζουν τον τρόπο με τον οποίο συμπεριφέρεται η συγκεκριμένη ετικέτα.
Ο τύπος της ετικέτας είναι αυτός που καθορίζει τον τρόπο με τον οποίο θα αλληλεπιδρά ένας χρήστης με αυτήν.
| Παράμετρος | Τύπος | Παράδειγμα χρήσης |
|---|---|---|
| text | Μικρό κείμενο | |
| password | Κωδικός | |
| checkbox | Τικ επιλογής | |
| radio | Επιλογή μόνο μίας απάντησης | |
| button | Κουμπί | |
| submit | Κουμπί υποβολής |
|
Αρχείο: form.html
<html>
<body>
<form method='get' action='data.php'>
Όνομα: <input type='text' name='name'/>
<br />
Κωδικός: <input type='password' name='password'/>
<br />
Διατήρηση σύνδεσης: <input type='checkbox' name='staylogged'/>
<br />
Φύλλο:
Άνδρας <input type='radio' name='sex' value='male'/>
Γυναίκα <input type='radio' name='sex' value='female'/>
<br />
<input type='submit' value='Αποστολή'/>
</form>
</body>
</html>Αποτέλεσμα:
