Δημιουργία προσωπικής ιστοσελίδας στο Πανεπιστήμιο Κύπρου


Βασική δομή

<HTML>

<HEAD>

<TITLE> title </TITLE>

</HEAD>

<BODY>

 

</BODY>

</HTML>

 Παρατηρούμε τα εξής:


 Συγγραφή μιας απλής ιστοσελίδας χρησιμοποιώντας HTML

 Ανοίγετε ένα νέο αρχείο με κάποιον editor, π.χ. με το Notepad, και γράφετε τις πιο κάτω εντολές:

<HTML>

<HEAD>

<!--This is a comment. The browser ignores this text-->

<TITLE>Simple Web Page</TITLE>

</HEAD>

<BODY>

Welcome to my webpage!

</BODY>

</HTML>

    Αποθηκεύετε την σελίδα κάτω από το προσωπικό σας directory, το οποίο συνήθως βρίσκεται στο H Drive του Η/Υ, επιλέγοντας

File > save as >

      Εμφανίζεται το πιο κάτω παράθυρο

       Επιλέγετε στο Save As: κάποιο directory, όπου θα έχετε όλες τις σχετικές ιστοσελίδες σας, κάτω από το home directory σας. Σαν File name: δίνετε ένα όνομα στην σελίδα σας το οποίο θα τελειώνει σε .html αντί σε .txt, ενώ στο Save as type: επιλέγετε Αll files, ώστε να μην προσθέσει την .txt επέκταση.

      Αν αποθηκεύσετε τις ιστοσελίδες σας στο PC σε ένα subdirectory με το όνομα wwwdata κάτω από το home directory σας (συνήθως στο H Drive του Η/Υ), ακολουθόντας έτσι την ίδια δομή με την οποία ο Web Server διαβάζει τα αρχεία σας από το UNIX account σας, μπορείτε να αποφύγετε την μεταφορά αρχείων με το FTP

   Αλλιώς, εάν έχετε αποθηκευμένες τις σελίδες σας σε άλλο directory μπορείτε να μεταφέρετε τα αρχεία με FTP στο subdirectory wwwdata κάτω από το home directory σας το UNIX account σας,  για να είναι διαθέσιμα στο διαδίκτυο.

       Μπορείτε να δείτε την σελίδα που δημιουργήσατε ανοίγοντας το directory στο οποίο βρίσκεται και επιλέγοντας την σελίδα σας εμφανίζεται στον φυλλομετρητή (browser) της προτίμησης σας (π.χ. Internet Explorer, Netscape, κ.λπ.). Πιο κάτω βλέπουμε την σελίδα που μόλις δημιουργήσαμε:

        Πάνω στην μπάρα τίτλου της σελίδας αναγράφεται ο τίτλος που δώσαμε στην σελίδα μας στο μέρος HEAD του κώδικα: “Simple Web Page” και στο κύριο παράθυρο βλέπουμε το κείμενο “Welcome to my Web Page!” το οποίο ορίσαμε στο μέρος BODY του κώδικα.


Δημοσίευση προσωπικής ιστοσελίδας .html στο Πανεπιστήμιο Κύπρου

Αφού έχετε δημιουργήσει την ιστοσελίδα σας θα πρέπει να την τοποθετήσετε στον παγκόσμιο ιστό πληροφοριών (www-World Wide Web) έτσι ώστε να είναι διαθέσιμη σε οποιονδήποτε έχει πρόσβαση στο διαδύκτιο. Στο πανεπιστήμιο μπορείτε να δημοσιεύσετε την σελίδα σας στο περιβάλλον Unix.

     Αρχικά δημιουργείτε ένα directory κάτω από το home directory σας με το όνομα wwwdata. Μέσα σε αυτό το ευρετήριο θα πρέπει να μπουν όλα τα html αρχεία και οποιαδήποτε άλλα χρειάζονται για την ιστοσελίδα σας. Συγκεκριμένα την στιγμή που δημιουργείτε την ιστοσελίδα σας μπορείτε να αποθηκεύσετε ως εξής:

File > save as >

   Επιλέξτε το  home directory σας (π.χ. ce01pk1) 

       Επιλέξτε το: wwwdata

Μπορείτε επίσης να δημιουργήσετε το ευρετήριο wwwdata την στιγμή που κάνετε save as την ιστοσελίδα σας ή από το περιβάλλον Unix όπως θα εξηγήσουμε πιο κάτω, έτσι ώστε να υπάρχει αυτόματα στο home directory σας. Αλλοιώς εάν έχετε φυλαγμένες τις σελίδες σας σε άλλο αρχείο ή οπουδήποτε αλλού στον δίσκο τότε ακολουθείτε την διαδικασία ftp όπως θα εξηγήσουμε πιο κάτω.

Το πρόγραμμα WS_FTP (LE) μπορείτε να το κατεβάσετε δωρεάν από το: http://www.wsftple.com/download.aspx

Επιλέγετε το εικονίδιο WS_FTP στην επιφάνεια εργασίας (desktop) ή start > programs > WS_FTP και εμφανίζεται το πιο κάτω παράθυρο:

 

 Συμπληρώνετε το User ID και Password και επιλέγετε ok. Τότε εμφανίζεται η πιο κάτω οθόνη.

 

         Στο αριστερό παράθυρο φαίνονται τα αρχεία  στον υπολογιστή του χρήστη και στο δεξιό παράθυρο τα αρχεία του χρήστη στον server Nicosia και συγκεκριμένα κάτω από το home directory. Εάν δεν έχετε δημιουργήσει προηγουμένως το directory wwwdata μέσα στο home directory σας τότε βεβαιωθείτε ότι στο δεξί παράθυρο βρίσκεστε στο home directory σας. Στην συνέχεια επιλέγετε το κουμπί MkDir και δίνετε το όνομα wwwdata στο νέο directory. Μετά επιλέγετε από το αριστερό παράθυρο το directory στο οποίο βρίσκεται η ιστοσελίδα σας και επιλέγετε όλα τα σχετικά αρχεία. Επίσης επιλέγετε στο δεξιό παράθυρο το directory wwwdata. Στην συνέχεια επιλέγετε το κουμπί που βρίσκεται ανάμεσα στα δύο παράθυρα με το σύμβολο   έτσι ώστε να μεταφέρετε τα αρχεία σας στο directory wwwdata. Επίσης με το κουμπί  μπορείτε από τον server να κατεβάσετε αρχεία στον υπολογιστή σας. Όταν έχετε μεταφέρει όλα τα αρχεία επιλέγετε exit.

 Αφού έχετε μεταφέρει τα αρχεία σας μέσα στο directory wwwdata τότε θα πρέπει να δώσετε τα κατάλληλα δικαιώματα στις σελίδες σας έτσι ώστε να μπορεί να τις διαβάσει οποιοσδήποτε.

    Για να συνδεθείτε με τον Unix account σας μπορείτε να εκτελέσετε την εντολή telnet:

Start > programs > telnet

 Εμφανίζεται το πιο κάτω παράθυρο

 

         Στο πιο πάνω παράθυρο επιλέγετε με double click το Nicosia-Student Server, ώστε να ενωθείτε με τον Server Nicosia, και συμπληρώνετε το username και password σας όπου είσαστε αυτόματα μπαίνετε στο home directory σας.

       Αν δεν υπάρχει συγκεκριμένο πρόγραμμα για το Telnet, όπως το πιο πάνω, μπορείτε να εκτελέσετε την εντολή telnet είτε σε κάποιο command window (Start → Run → cmd) είτε κατευθείαν (Start → Run → telnet 194.42.6.97), οπότε και θα εμφανιστεί το πιο κάτω παράθυρο, στο οποίο θα πρέπει να δώσετε το Username σας  στο Login και το password στη συνέχεια:

     Έτσι μπαίνετε στο Root directory σας στο Unix, όπου πρέπει να αλλάξετε κατάλληλα την πρόσβαση στα αρχεία τα οποία θα πρέπει να μπορεί κάποιος ελεύθερα να διαβάσει μέσω του διαδικτύου.

     Προσέξτε ότι στο περιβάλλον Unix δεν μπορείτε να χρησιμοποιείτε το backspace σε περίπτωση που θέλετε να σβήσετε κάτι στην γραμμή εντολών (παρουσίαση μηνύματος λάθους μη αναγνώρισης της εντολής που γράφετε) αλλά χρησιμοποιείτε Control-C επαναλάβετε ξανά γράφοντας ορθά την εντολή.

 - Με την εντολή ls -lαrt παρουσιάζονται τα περιεχόμενα του τρέχοντος ευρετηρίου με κάποιες περαιτέρω πληροφορίες

$ ls -lα


total 128
drwx--s--x 6 petrosk cee 512 05 Nov 2004 .
drwxr-sr-x 18 root sys 512 12 May 07:56 ..
-rw------- 1 petrosk cee 11 04 Sep 2003 .mh_profile
-rw------- 1 petrosk cee 9761 05 Sep 2003 .pine-debug1
-rw------- 1 petrosk cee 14471 05 Sep 2003 .pinerc
-rwxr----- 1 petrosk cee 554 04 Sep 2003 .profile
-rw------- 1 petrosk cee 2358 24 Jun 16:39 .sh_history
drwx--x--x 3 petrosk cee 512 05 Sep 2003 Mail
drwx------ 2 petrosk cee 512 05 Sep 2003 mail
lrwxrwxrwx 1 root cee 22 05 Nov 2004 NAS -> /NAS/staff/cee/petrosk
drwxr-s--- 3 apache www 512 03 Feb 23:36 petrosk@ucy.ac.cy
drwxr-sr-x 7 petrosk cee 2048 21 May 2004 wwwdata

  - H εντολή man ακολουθούμενη από το όνομα κάποια άλλης εντολής μας δίνει πληροφορίες για τη χρήση της δεύτερης εντολής. π.χ. η εντολή man ls δίνει πληροφορίες για τη χρήση και τις δυνατότητες της εντολής ls

$ man ls

ls Command

Purpose

Displays the contents of a directory.

Syntax

To Display Contents of Directory or Name of File

ls [ -1 ] [ -A ] [ -C ] [ -F ] [ -L ] [ -N ] [ -R ] [ -a ] [ -b ] [ -c ] [ -d ]
[ -e ] [ -f ] [ -g ] [ -i ] [ -l ] [-m ] [ -n ] [ -o ] [ -p ] [ -q ] [ -r ] [ -s
] [ -t ] [ -u ] [ -x ] [ File ... ]
 

 - Με την εντολή εμφανίζεται το όνομα του τρέχοντος directory επιβεβαιώνοντας ότι είσαστε στο home directory .

$ pwd

/u/staff/cee/petrosk

 

Με την εντολή cd <directory Name >μετακινείστε στο directory <directoryName>

$ pwd
/u/staff/cee/petrosk
$ cd wwwdata
$ pwd

/u/staff/cee/petrosk/wwwdata

 Με την εντολή cd ..

$ pwd
/u/staff/cee/petrosk

 επιστρέφετε στο προηγούμενο επίπεδο directory.

Επιπλέον με την εντολή cd ή cd ~ επιστρέφουμε στο αρχικό home directory

$ cd wwwdata
$ pwd

/u/staff/cee/petrosk/wwwdata
$ cd
$ pwd

/u/staff/cee/petrosk

 Εάν δεν έχετε δημιουργήσει το αρχείο wwwdata στο home directory σας τότε με την εντολή mkdir <directortyName> δημιουργείτε ένα subdirectory κάτω από το directory που βρίσκεστε όταν εκτελέσετε αυτή την εντολή.

$ mkdir wwwdata

 Με την πιο πάνω εντολή δημιουργείτε το directory wwwdata.

      Στο συγκεκριμένο directory θα πρέπει να υπάρχουν όλες οι HTML σελίδες. Εάν δεν υπάρχουν τότε τις μεταφέρετε με την διαδικασία ftp όπως αναφέραμε πιο πάνω.

     Ακολούθως δίνουμε τα κατάλληλα δικαιώματα  με την εντολή chmod στο directory wwwdata έτσι ώστε όλοι να έχουν δικαίωμα να διαβάσουν την ιστοσελίδα.

$ chmod 755 wwwdata

     Ο apache server (εξυπηρετητής http) είναι ρυθμισμένος έτσι ώστε να θεωρεί ότι το πρώτο αρχείο της ιστοσελίδας ονομάζεται index.html και βρίσκεται κάτω από την αντίστοιχη περιοχή του χρήστη στο ευρετήριο wwwdata.

 Επιπλέον με την εντολή

$ chmodR 755 wwwdata

      Δίνετε τα κατάλληλα δικαιώματα σε όλα τα αρχεία που βρίσκονται μέσα στο wwwdata έτσι ώστε να μπορούν χρήστες να τα διαβάζουν.

   Επίσης, ίσως να πρέπει σε κάποιες περιπτώσεις (ανάλογα με τα settings του λογαριασμού σας, να δώσετε δικαιώματα ανάγνωσης (read access) στον κυρίως φάκελο (root directory) σας, όπως πιο κάτω:

$  cd

$ cd ..

$ chmod 755 <username>

π.χ.:

$  cd

$ cd ..

$ chmod 755 cep5lp1

        Πιο κάτω δίνεται η εντολή αλλαγής του ονόματος της πρώτης σελίδας firstpage.html.

$ cd wwwdata

$ mv <firstpage.html> index.html

 Τέλος μπορείτε να δίνετε τα κατάλληλα δικαιώματα στις σελίδες με την εντολή

$ chmod 755 index.html 

 Εντολή έξοδου από τον server Nicosia

$ exit

 Για να δείτε την ιστοσελίδα σας χρησιμοποιείτε την πιο κάτω ηλεκτρονική διεύθυνση:

 http://nicosia.ccs.ucy.ac.cy/~<username>/   (π.χ. http://nicosia.ccs.ucy.ac.cy/~cep5lp1)

 

 


Επέκταση  Iστοσελίδας

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

Για να προσθέσετε κενή γραμμή μεταξύ των παραγράφων σας χρησιμοποιείτε το tag <P>, όπου δεν είναι απαραίτητο να τερματίζει με </Ρ>

<BODY>Blank Line

<P> Welcome to my Web Page!

<P> Blank Line!

</BODY>

 Επίσης μπορείτε να δημιουργήσετε επικεφαλίδες (Headings) με την εντολή <Hn> και να συνδυάσετε μέγεθος γραμμάτων και bold κείμενο. Ανάλογα με τον αριθμό του n έχουμε 1 (μεγαλύτερο) και 6 (μικρότερο). Επικεφαλίδα: <Hn>

<BODY>Blank Line

<P><H1> Welcome to my Web Page!-Big Heading (H1) </H1>

<P>Blank Line!

<P><H3><center><I> Medium Heading (H3) </I> </center></H3> 

<P><H6> Small Heading (H6) </H6>

</BODY>

          Επιπλέον μπορείτε να τοποθετήσετε κείμενο στο κέντρο της σελίδας με την εντολή <CENTER></CENTER>. Στο πιο πάνω παράδειγμα το Medium Heading θα εμφανίζεται στο κέντρο με Bold και Italic και Underlined. Mε την εντολή <Β> και <Ι> μπορείτε να μετατρέψετε το κείμενο σε Bold και Italic αντίστοιχα όπως επίσης με το <U> υπογραμμισμένο κείμενο. Η διαμόρφωση βάσει αυτών των εντολών τερματίζεται με τις αντίστοιχες εντολές </Β>, </Ι> και </U>, αντίστοιχα.

           Επιπλέον μπορείτε να δημιουργήσετε μια γραμμή χρησιμοποιώντας το tag <HR>. Επίσης μπορείτε να καθορίσετε το πάχος της γραμμής με το χαρακτηριστικό SIZE.

<HR>Create a line<HR size="10"> 

 Ο πιο πάνω κώδικας δημιουργεί δύο γραμμές μια κανονική και μια με πάχος 10.

Πιο κάτω βλέπουμε την σελίδα που παράγεται από τον πιο πάνω κώδικα αφού έχουμε φυλάξει τις αλλαγές και ανοίγουμε την σελίδα μέσα από το directory που την έχουμε αποθηκεύσει.

 

 Σε μια ιστοσελίδα είναι πολύ σημαντικό να προσθέτουμε συνδέσμους (links) σε άλλες σελίδες. Με την εντολή <Α></Α> δημιουργούμε ένα σύνδεσμο με την πιο κάτω σύνταξη:

 <Α HREF="linkname" >clickable text </A>

Όπου

Για παράδειγμα, click here for www.ucy.ac.cy

Το πιο πάνω κείμενο έχει τον πιο κάτω κώδικα

<A HREF="http://www.ucy.ac.cy/">click here for www.ucy.ac.cy</A>

 

 Μπορούμε να δημιουργήσουμε λίστες με bullets με το tag <LI></LI>

Έτσι προσθέτοντας τον κώδικα δημιουργούμε μια λίστα με τρία στοιχεία.

<LI>List 1</LI>

<LI>List 2</LI>

<LI>List 3</LI>

 

 Χρησιμοποιούμε το tag <IMG> και το επιπλέον χαρακτηριστικό SRC για καθορισμό της τοποθεσίας της εικόνας. Με την πιο κάτω εντολή προσθέτουμε μια εικόνα πάνω στην ιστοσελίδα μας.

      <IMG SRC="image.gif" height="100" width="100">

 

 Στην HTML μπορούμε να δημιουργήσουμε δεδομένα μέσα σε πίνακες από γραμμές και στήλες. Πιο κάτω δίνουμε πώς ορίζουμε  ένα table.

Tag

Description

<table>

Define a table

<tr>

Define a row within a table

<th>

Define table header cells

<td>

Define table data cells

<caption>

Define a table caption

A simple table

 

Πιο κάτω δίνουμε τον κώδικα για δημιουργία του πιο πάνω πίνακα.

<table border="2"align="center">

<tr>

 <th>Tag</th><th>Description</th>

</tr>

<tr>

 <td>&lt;table&gt;</td><td>Define a table</td>

</tr>

<tr>    

 <td>&lt;tr&gt;</td><td>Define a row within a table</td>

</tr>

<tr>

 <td>&lt;th&gt;</td><td>Define table header cells</td>

</tr>

<tr>

 <td>&lt;td&gt;</td><td>Define a table data cells</td>

</tr>

<tr>

 <td>&lt;caption&gt;</td><td>Define a table caption</td>

</tr>

<caption align="bottom"><B>A simple table</B></caption>

</table>

 Επίσης στο πιο πάνω table μπορούμε να ορίσουμε κάποια χαρακτηριστικά όπως align, border, cellpadding, cellspacing, height, width.

 

 Μπορούμε να αλλάξουμε τα χρώματα σε διάφορα μέρη μέσα στο αρχείο μας. Πιο κάτω δίνουμε ένα πίνακα με τα διάφορα στοιχεία που μπορούμε να αλλάξουμε και την αντίστοιχη εντολή.

 

Element

Associated Tag and Attribute

Document background color

<body bgcolor=" color">

Document background image

<body background=" image">

All document text

<body text=" color">

Active hyperlinks

<body alink="color">

Visited hyperlinks

<body vlink="color">

Regular Hyperlinks

<body link="color">

Small Portion of Text

<font color="color">

Table cells

<table bgcolor="color">

Μερικές τιμές που μπορούμε να δώσουμε στο colour είναι:

Color Name

Color Name

Aqua

Olive

Blue

White

Grey

Black

Lime

Red

Navy

Fuchsia

Purple

Green

Silver

Teal

Yellow

Maroon

 Επομένως προσθέτουμε τον πιο  κάτω κώδικα για αλλαγή χρωμάτων στο αρχείο μας.

<BODY bgcolor="aqua" text="purple" alink="blue" vlink="red" >

<table border="2"align="center" bgcolor="white">

 

Τέλος δίνουμε ένα παράδειγμα αλλαγής του μεγέθους και χρώματος των γραμμάτων. Ο κώδικας είναι:

<font color="red" size="7"> This</FONT>

<font color="blue" size="+2"> is</FONT>

<font color="purple" size="+1"> a</FONT>

<font color="teal"> small</FONT>

<font color="yellow" size="-1">example</FONT>

Το τελικό αρχείο όταν γράψουμε τα πιο πάνω κομμάτια κώδικα είναι:

<HTML>

      <!--HEAD-->

<HEAD>

<!--This is a comment. The browser ignores this text-->

<TITLE>Simple Web Page</TITLE>

</HEAD>

 

<!—BODY -->

<BODY bgcolor="aqua" text="purple" alink="blue" vlink="red" >Blank Line

      <!—Headings -->

<P><H1> Welcome to my Web Page!-Big Heading (H1) </H1>

<P>Blank Line!

<P><H3><center><I><U>Medium Heading (H3) </U></I> </center></H3> 

<P><H6> Small Heading (H6) </H6>

 

      <!--Create a line -->

<HR>Create a line<HR size="10"> 

 

      <!--Create URL-->

<A HREF="http://www.ucy.ac.cy/">click here for www.ucy.ac.cy</A>

 

      <!--Create a List-->

<P><LI>List 1</LI>

<LI>List 2</LI>

<LI>List 3</LI>

 

      <!--Create Image-->

<!--<IMG SRC="image.gif" height="100" width="100">-->

 

<!--CREATE A TABLE -->

<table border="2"align="center" bgcolor="white>

 

<tr>

 <th>Tag</th><th>Description</th>

</tr>

<tr>

 <td>&lt;table&gt;</td><td>Define a table</td>

</tr>

<tr>    

 <td>&lt;tr&gt;</td><td>Define a row within a table</td>

</tr>

<tr>

 <td>&lt;th&gt;</td><td>Define table header cells</td>

</tr>

<tr>

 <td>&lt;td&gt;</td><td>Define a table data cells</td>

</tr>

<tr>

 <td>&lt;caption&gt;</td><td>Define a table caption</td>

</tr>

<caption align="bottom"><B>A simple table</B></caption>

</table>

      <!--Change font color and size-->

<font color="red" size="7"> This</FONT>

<font color="blue" size="+2"> is</FONT>

<font color="purple" size="+1"> a</FONT>

<font color="teal"> small</FONT>

<font color="yellow" size="-1">example</FONT>

 

</BODY>

 

</HTML>

 

Τελική σελίδα που παράγεται από τον πιο πάνω κώδικα είναι:

 

 

Πέτρος Κωμοδρόμος, © 2005