Εισαγωγή στη Γλώσσα HTML

Έγγραφα HTML
        Τι είναι ένα έγγραφο HTML
        HTML Editors (Προγράμματα συγγραφής HTML)
        Εκμάθηση HTML
        Προγραμματίζοντας σε HTML
        Παράδειγμα HTML Εγγράφου
Εντολές HTML - Παραδείγματα
        Παράδειγμα 1
        Παράδειγμα 2
Τοποθέτηση σελίδων σε Server
        Unix Server
        Windows Server
 
 

Έγγραφα HTML

Τι είναι ένα έγγραφο HTML
Τα έγγραφα HTML είναι απλά αρχεία κειμένου (γνωστά σαν ASCII) που μπορούν να δημιουργηθούν με οποιονδήποτε κειμενογράφο (π.χ. Emacs ή vi σε UNIX μηχανήματα, SimpleText σε Macintosh, Notepad σε PC).

HTML Editors (Προγράμματα συγγραφής HTML)
Υπάρχουν αρκετοί WYSIWYG editors (π.χ. Claris Home Page ή Adobe PageMill, για Windows και Macintosh). Το WYSIWYG είναι ακρώνυμο του "what you see is what you get", και σημαίνει ότι το έγγραφο HTML κατά τη σχεδίασή του, φαίνεται όπως το τελικό αποτέλεσμα σε ένα browser. Ακόμα η σχεδίαση μιας σελίδας για το WWW χρησιμοποιώντας editors γίνεται με μεθόδους όπως drag and drop, popup menus και όχι γράφοντας εντολές. Όμως η γνώση των εντολών της HTML πολλές φορές είναι χρήσιμη.

Εκμάθηση HTML
Στο δίκτυο (internet) υπάρχουν πλήθος σελίδων με μαθήματα HTML.. Ενδεικτικά αναφέρουμε τις παρακάτω διευθύνσεις όπου μπορείτε να βρείτε πολλά μαθήματα HTML, πολλές διευθύνσεις για σχετικά θέματα με σχεδίαση σελίδων για το WWW. Μπορείτε να βρείτε και άλλες αν κάνετε μια αναζήτηση στο δίκτυο με λέξεις κλειδιά όπως Html, tutorial κ.α.
http://www.ncsa.uiuc.edu/General/Internet/WWW/
http://www.usd.edu/intec/html.html
http://www.plcmc.lib.nc.us/online/links/html.htm
http://commsun.its.csiro.au/wwwinfo/htmladva.htm
http://www.rwcp.or.jp/people/yk/WWW/html.html
http://www.gotoiii.com/html-tut.htm
http://www.mahidol.ac.th/~ramlt/html.html
Ένας τρόπος για να μάθετε κάτι παραπάνω είναι να χρησιμοποιήστε τη γνώση των άλλων. Μπορείτε σε κάθε σελίδα που υπάρχει στο δίκτυο να δείτε το αντίστοιχο έγγραφο HTML μέσα από κάποιο μενού του browsers σας (View Source).

Προγραμματίζοντας σε HTML
Ένα οποιοδήποτε κείμενο αποτελείται από επιμέρους στοιχεία όπως πίνακες παραγράφους, λίστες κ.α. Σε ένα HTML κείμενο πρέπει να μαρκάρεις την αρχή και το τέλος κάθε τέτοιου στοιχείου γράφοντας την κατάλληλη εντολή. Κάθε εντολή αρχίζει με το σύμβολο < και τελειώνει με το > δηλαδή μια εντολή είναι κάπως έτσι <εντολή> . Για να δηλώσουμε το τέλος της ισχύς μιας εντολής προσθέτουμε στην εντολή μια κάθετο, δηλαδή </εντολή> .

Παράδειγμα HTML Εγγράφου
Κάθε HTML έγγραφο πρέπει να περιέχει συγκεκριμένες εντολές. Κάθε έγγραφο αποτελείται από ένα κείμενο επικεφαλίδα (head) και το κυρίως μέρος (body). Η επικεφαλίδα περιέχει τον τίτλο και το κυρίως μέρος το κείμενο που θα φαίνεται στη σελίδα που μπορεί να περιέχει παραγράφους, πίνακες, λίστες κ.α. Ένα μικρό παράδειγμα εγγράφου HTML είναι το ακόλουθο.

<html>
<head>
<title>Ένα απλό παράδειγμα</title>
</head>
<body>
<h1>Η HTML μαθαίνεται εύκολα</h1>
<p> Καλωσήλθατε στον κόσμο της HTML.
Αυτή είναι η πρώτη παράγραφος. Αν και μικρή είναι
Πάντως μια παράγραφος ! </p>
<p> Και αυτή είναι η δεύτερη παράγραφος.</p>
</body>
</html>

Το αποτέλεσμα θα είναι κάπως έτσι :

Εντολές HTML - Παραδείγματα

<head>
    Όπως έχει προαναφερθεί η εντολή αυτή περιέχει τον τίτλο και άλλες σημαντικές πληροφορίες για το έγγραφο.

<title>
    Μέσα σε αυτήν την εντολή περικλείεται ο τίτλος του εγγράφου. Ο τίτλος εμφανίζεται στην μπάρα του browser (Netscape, Explorer κ.α)

<p>
    Η εντολή αυτή ορίζει μία νέα παράγραφο.

<h1>
    Η εντολή αυτή καθορίζει το μέγεθος των γραμμάτων. Ο αριθμός μπορεί να ανέλθει ως το 6 (δηλαδή <h2> , <h3> ?). Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.

<br>
    Η εντολή <br> αναγκάζει το κείμενο (και όλο το υπόλοιπο υλικό που περιέχει η σελίδα) να συνεχίσει στη επόμενη σειρά. (Το </br> δεν έχει νόημα).

<center>
    Από τη στιγμή που εμφανίζεται το <center> σ' ένα έγγραφο μέχρι να κλείσει με </center> όλα όσα περιέχονται εμφανίζονται κεντραρισμένα

<b>
    Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </b>) αναγκάζει το κείμενο να φαίνεται με έντονη γραφή (bold).

<i>
    Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </i>) αναγκάζει το κείμενο να φαίνεται με πλάγια γραφή (italic).

<u>
    Η εντολή αυτή από την εμφάνισή της και μέχρι την λήξη της (δηλ. </u>) αναγκάζει το κείμενο να φαίνεται υπογραμμισμένο (underline).
 

Παράδειγμα 1

Το παρακάτω παράδειγμα κάνει χρήση όλων των προαναφερθέντων εντολών

<html>
<head>
<title>Παράδειγμα 1.</title>
</head>
<body>
<h1>Αυτό είναι το πρώτο παράδειγμα.</h1>
<h2>Εφαρμογή των μέχρι τώρα προαναφερθέντων εντολών.</h2>
<br>
<h4><b>Αυτό το κείμενο είναι έντονο.</b>
<p>
<center>Και όλες οι παρακάτω σειρές
είναι <i>κεντραρισμένες</i>.
Τέλος του <u>πρώτου</u> παραδείγματος.
</body>
</html>

Και θα φαίνεται κάπως έτσι :

Λίστες

Στην HTML υπάρχουν λίστες αριθμημένες ή μη. Η εντολή για αριθμημένη λίστα είναι η <ol> ενώ για μη αριθμημένη είναι <ul>. Για κάθε στοιχείο της λίστας υπάρχει η εντολή <li>. Στο παράδειγμα 2 υπάρχει μια αριθμημένη και μια μη αριθμημένη λίστα.

Παράδειγμα 2

<html>
<head>
<title>Παράδειγμα 2.</title>
</head>
<body>
Αυτό είναι το δεύτερο παράδειγμα.
<br>
<b>Αριθμημένη Λίστα</b>
<ol>
<li>Πρώτο στοιχείο λίστας</li>
<li>Δεύτερο στοιχείο λίστας</li>
<li>Τρίτο στοιχείο λίστας</li>
</ol>
<p>
<b>Μη Αριθμημένη Λίστα</b>
<ul>
<li>Πρώτο στοιχείο λίστας</li>
<li>Δεύτερο στοιχείο λίστας</li>
<li>Τρίτο στοιχείο λίστας</li>
</ul>
</body>
</html>

 

 

Εικόνες

Η εντολή για την εισαγωγή εικόνας σε HTML έγγραφο είναι <img>. Όμως δεν γράφεται έτσι απλά, αλλά συνοδεύεται και από μερικές παραμέτρους. Η ποιο σημαντική παράμετρος που δεν μπορεί να παραλειφθεί είναι η src="onomaeikonas". Η παράμετρος src καθορίζει το όνομα του αρχείου εικόνας που θα χρησιμοποιηθεί και σε ποιο μέρος (directory). Όλες οι εικόνες για να εμφανιστούν στο Internet πρέπει να είναι GIF ή JPG. Παραδείγματα χρήσης της εντολής είναι τα ακόλουθα :

<img src="left.gif>

<img src="nik/face.jpg">

Μια άλλη σημαντική παράμετρος είναι η alt="Κείμενο ?". Το κείμενο που αντιστοιχεί σε αυτήν την παράμετρο εμφανίζεται σε browsers που δεν έχουν τη δυνατότητα να δείχνουν εικόνες ή η δυνατότητα αυτή είναι απενεργοποιημένη. Ακόμα το κείμενο αυτό φαίνεται αντί για την εικόνα κατά τη διάρκεια που η εικόνα κατεβαίνει. Παράδειγμα χρήσης της alt :

<img src="nik/face.jpg" alt="Εικόνα με το πρόσωπό μου">

Πίνακες

Στην HTML για να ορίσουμε ένα πίνακα αρκεί η εντολή <table>. Έπειτα ορίζουμε τις σειρές και τις στήλες , προσθέτοντας ένα- ένα κελί. Για να ορίσουμε μία σειρά (row) γράφουμε την <tr> ,ενώ για στήλη το <td>. Αν θέλαμε να δημιουργήσουμε ένα πίνακα με 2 σειρές και 3 στήλες θα γράφαμε :

<table border=2>
<tr>
<td>κείμενο1</td> 
<td>κείμενο2</td>
<td>κείμενο3</td>
</tr>
<tr>
<td>κείμενο4</td>
<td>κείμενο5</td>
<td>κείμενο6</td>
</tr>
</table>

Η παράμετρος border καθορίζει το πάχος της γραμμής του πίνακα.
 

Σύνδεσμοι (links)

Ως σύνδεσμο (link) στην HTML ορίζουμε ότι μπορεί να επιλεγεί (κάνοντας click) και σαν αποτέλεσμα να εμφανιστεί μια άλλη σελίδα. Ένας σύνδεσμος δηλαδή είναι ένας δείκτης προς ένα άλλο έγγραφο HTML. Για να ορίσουμε κάτι ως σύνδεσμο (κείμενο, εικόνα) πρέπει να εισάγουμε την εντολή <a>. Από την εμφάνιση της <a> και ως τη λήξη ισχύος της (με το </a>) ότι περιέχεται γίνεται αυτόματα σύνδεσμος και εμφανίζεται διαφορετικά από τον browser (συνήθως υπογραμμισμένο και με μπλε γράμματα). Σημαντική παράμετρος είναι η href="OnomaNeouEggrafou" όπου καθορίζει σε ποιο έγγραφο είναι δείκτης ο σύνδεσμος. Παραδείγματα χρήσης είναι τα ακόλουθα :

<a href="katalogos.html">κατάλογος</a>
<a href="photos/photogr.html">φωτογραφία</a>
<a href="http://www.physics.uch.gr/entupo.html">έντυπο</a>

Ακόμα σύνδεσμος μπορεί να είναι και μια εικόνα :
<a href="kat.html"><img src="katal.gif"></a>   Τοποθέτηση σελίδων σε Server

Unix Server

Η Διαδικασία

Για να τοποθετήσουμε κάποιες σελίδες σε έναν Unix Server απαιτούνται τα παρακάτω βήματα :

Μεταφορά των αρχείων

Καταρχήν πρέπει να μεταφερθούν τα αρχεία στο κατάλληλο directory. Συνήθως σε ένα Unix Server πρέπει τα αρχεία να τοποθετηθούν σ' ένα directory που λέγεται public_html . Κάλο θα είναι το πρώτο αρχείο που θα φαίνεται από τον browser όταν καλείται η διεύθυνση να λέγεται index.html. Και αυτό γιατί οι browser έχουν "μάθει" να ψάχνουν πρώτα αν υπάρχει αρχείο με το όνομα index.html και δεν χρειάζεται να το γράφουμε στην διεύθυνση του site. Δηλαδή αν έχουμε μια περιοχή με το όνομα perioxi σε ένα Unix μηχάνημα και βάλω το αρχείο index.html στο directory public_html τότε η διεύθυνση μου θα είναι : www.physics.uch.gr/~perioxi.

Ο πιο διαδεδομένος (και καλύτερος) τρόπος για να μεταφερθούν τα αρχεία από τον υπολογιστή που δημιουργήθηκαν στο Server είναι το FTP. Το FTP (File Transfer Protocol) είναι μια υπηρεσία του Internet και σκοπός της είναι (τι άλλο;) να μεταφέρει αρχεία από ένα υπολογιστή σε ένα άλλο. Για το FTP υπάρχουν πολλά shareware προγράμματα στο δίκτυο που απλοποιούν τη διαδικασία, χωρίς δηλαδή να χρειάζονται γνώσεις των εντολών του FTP.

Έλεγχος (αλλαγή) των δικαιωμάτων

Μετά τη μεταφορά των αρχείων στο Unix Server πρέπει όλοι οι χρήστες να έχουν δικαίωμα να τα προσπελάσουν. Αυτό γίνεται μέσω της εντολής chmod (πρώτα έχουμε συνδεθεί με την περιοχή που βρίσκονται τα αρχεία μέσω telnet). Πρέπει τα αρχεία να έχουν τις εξής ιδιότητες : -rw-r--r--

Υποθέτουμε ότι το αρχείο index.html δεν έχει αυτές τις ιδιότητες. Τότε γράφουμε την εντολή : chmod 644 index.html.

 

Windows Server

Για να τοποθετήσουμε κάποιες σελίδες σε έναν Windows Server απαιτείται η μεταφορά των αρχείων στο κατάλληλο directory. Κάθε Windows Server ορίζει ένα κεντρικό directory (root directory). Αυτό είναι το σημείο αναφοράς για το Server και μέσα σε αυτό πρέπει να τοποθετούνται οι αρχεία. Όπως και σε ένα Unix Server, μπορούμε να ονομάσουμε index.html, το πρώτο έγγραφο HTML που θέλουμε να εμφανίζεται όταν καλείται ο server. Περισσότερες λεπτομέρειες μπορείτε να βρείτε στο εγχειρίδιο χρήσης του κάθε server ή μπορείτε να απευθυνθείτε στον υπεύθυνο του server (WebMaster). Τέλος η μεταφορά των αρχείων μπορεί να γίνει με FTP όπως περιγράφεται και στην περίπτωση του Unix Server.