Η Χρησιμότητα της HTML στην PHP

Η HTML είναι πολύ σημαντική στην php, διότι χρησιμοποιείται τόσο στην «είσοδο» των δεδομένων προς αυτή, καθώς επίσης και στην «έξοδο» από αυτήν. Βρίσκεται σε κάθε περίπτωση, ένα βήμα πριν και ένα βήμα μετά από την εκτέλεση της php.

Έτσι η HTML είναι όλα αυτά που ο χρήστης μπορεί να αλληλεπιδράσει. Αυτά που βλέπει και αυτά που χρησιμοποιεί (Πχ ένα πεδίο κειμένου, ένα κουμπί, μια ετικέτα). Τα αποτελέσματα μιας εκτέλεσης php που δεν διαθέτει HTML μέσα της θα ήταν πολύ απλοποιημένα και ίσως δύσκολα στην ανάγνωση. Η HTML αναλαμβάνει να δομήσει τα προβαλλόμενα στοιχεία, έτσι ώστε κάτι να είναι πολύ πιο προσιτά και πολύ πιο ευανάγνωστα στον απλό χρήστη που θα επισκεφθεί την σελίδα μας.

Φανταστείτε την εμφάνιση στοιχείων που έχουν να κάνουν με την βαθμολόγηση φοιτητών σε ένα πανεπιστήμιο: 

<?php 
    echo "Ονοματεπώνυμο: Κωνσταντίνος Παπαδόπουλος , Αριθμός Μητρώου: 15231 , Βαθμός: 7";
    echo "Ονοματεπώνυμο: Γιάννης Λεμπέσης , Αριθμός Μητρώου: 12231 , Βαθμός: 6";
    echo "Ονοματεπώνυμο: Μαρία Κωνσταντοπούλου , Αριθμός Μητρώου: 12111 , Βαθμός: 10";
?>

Τα αποτελέσματα της εμφάνισης, αυτών που έχουμε γράψει, χάνονται μέσα στους πολλούς χαρακτήρες, χωρίς διαχωριστικά μέρη και χωρίς κάτι διακριτό για το ανθρώπινο μάτι. Είναι δύσκολο σε κάποιον να βγάλει νόημα, γι’ αυτό χρησιμοποιούμε την HTML (πολλές φορές σε συνδυασμό με την CSS). Ας δούμε το προηγούμενο παράδειγμα χρησιμοποιώντας HTML και συγκεκριμένα την δυνατότητα των πινάκων της: 

<?php 
    echo "<table border='1'>";
    echo "<tr><th>Ονοματεπώνυμο</th><th>Αριθμός Μητρώου</th><th>Βαθμός</th></tr>";
    echo "<tr><td>Κωνσταντίνος Παπαδόπουλος</td><td>15231</td><td>7</td></tr>";
    echo "<tr><td>Γιάννης Λεμπέσης</td><td>12231</td><td>6</td></tr>";
    echo "<tr><td>Μαρία Κωνσταντοπούλου</td><td>12111</td><td>10</td></tr>";
    echo "</table>";
?>

Είναι ευκολότερη η περιήγηση και η ανάγνωση με την χρήση της HTML. Στην συγκεκριμένη περίπτωση δεν θα συναντούσαμε απλά 3 στοιχεία φοιτητών αλλά θα βρίσκαμε μια τεράστια λίστα με πάνω από 100 ή 200 ονόματα. Συγκρίνετε πως θα εμφανίζονταν χωρίς, και πως με HTML. Δεν είναι σαφώς καλύτερη η δεύτερη περίπτωση ;

Με την χρήση της δεν εμφανίζουμε μόνο αποτελέσματα αλλά μπορούμε να εισάγουμε και στοιχεία μέσω αυτής. Ένα πεδίο κειμένου, ένα κουτί επιλογής, ένα checkbox, ένα κουμπί αποστολής. Όλα αυτά είναι στοιχεία της όπου μας βοηθούν να αλληλεπιδράμε με μια ιστοσελίδα.

Βασικές ετικέτες χρήσης

Μια ιστοσελίδα για να μπορέσει ένας φυλλομετρητής να την ερμηνεύσει θα πρέπει να διαθέτει και τις ανάλογες ετικέτες δήλωσης της ως ιστοσελίδα HTML, μέσα στον κώδικα της. Για να ορίσουμε ότι το έγγραφο που γράφουμε εκείνη την στιγμή είναι αρχείο το οποίο θα ερμηνευτεί ως ιστοσελίδα από τους φυλλομετρητές χρησιμοποιούμε το tag <!DOCTYPE html>, με αυτή την ετικέτα έχουμε ορίσει ότι παρακάτω ο φυλλομετρητής βρίσκοντας αντίστοιχες ετικέτες θα αρχίσει να τις ερμηνεύει.\

Η σωστή δομή μιας ιστοσελίδας βασιζόμενοι στα υπάρχοντα πρότυπα έχει ως εξής: 

<!DOCTYPE html>
<html>
 <head>
 <meta charset=’UTF-8’/>
  <title> </title>
 </head>
 <body>
 </body>
</html>

Μεταξύ του «head» εισάγουμε κομμάτια κώδικα τα οποία δεν «φαίνονται» στο φόρτωμα της σελίδας, όπως meta tags, scripts κ.α., στο μεταξύ του «<body>» και του «</body>» εισάγουμε όλες τις ετικέτες εκείνες που εμφανίζονται στο φόρτωμα της σελίδας μας, συμπεριλαμβάνοντας εκεί όλα αυτά που επεξηγούνται παρακάτω και όπου θα χρησιμοποιήσουμε κατά κόρον σε όλες τις επόμενες ενότητες μας.

Βασικές ετικέτες

Ο παρακάτω πίνακας περιγράφει μερικές από τις βασικότερες ετικέτες που χρησιμοποιούνται στην HTML.

Ετικέτα Παράδειγμα Περιγραφή
hx 
<h1>Τίτλος</h1>
 Τίτλοι κειμένων, απο 1 έως 6.
p 
<p>Παράγραφος</p>
 Περιοχή κειμένου
a 
<a href="σύνδεσμος">Τίτλος</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>

Μορφοποίηση κειμένου

Υπάρχουν επίσης κάποιες ετικέτες για την μορφοποίηση κειμένου, μερικές από αυτές περιγράφει ο παρακάτω πίνακας.

Ετικέτα Παράδειγμα Περιγραφή
b 
<b>Κώστας</b>
 Έντονο κείμενο
i 
<i>Γιάννης</i>
 Πλάγιο κείμενο
u 
<u>Ελένη</u>
 Υπογραμμισμένο κείμενο
pre 
<pre>...Κείμενο...</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 
<div><b>ένα</b></div>
 Κοντέινερ που περιέχει στοιχεία html
br 
<br />
 Κενή γραμμή
hr 
<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 Ετικέτα που δέιχνει οτι ξεκινά και τελειώνει πίνακας 
<table>
 <tr>
  <th>
   Τίτλος 1
  </th>
  <td>
   Κελί 2
  </td>
 </tr>
</table>
tr Table Row = Γραμμή Πίνακα
th Table Heading = Επικεφαλίδα Πίνακα
td Table Division = Κοντέινερ πίνακα (Κελί πίνακα) 

<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 Μικρό κείμενο 
Όνομα: <input type='text' name='name'/>
password Κωδικός 
Κωδικός: <input type='password' name='password'/>
checkbox Τικ επιλογής 
Διατήρηση σύνδεσης: <input type='checkbox' name='staylogged'/>
radio Επιλογή μόνο μίας απάντησης 
Φύλλο: 
Άνδρας <input type='radio' name='sex' value='male'/>
Γυναίκα <input type='radio' name='sex' value='female'/>
button Κουμπί 
<button value='Αποστολή'/>
submit Κουμπί υποβολής 
<input type='submit' value='Αποστολή'/>
 

<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>