3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος...

6
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 1 3. Ανασκόπηση διαδικτύου και του παγκόσμιου πλέγματος πληροφοριών Χειμερινό εξάμηνο 2013 Πέτρος Κωμοδρόμος [email protected] http://www.eng.ucy.ac.cy/petros ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής

Transcript of 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος...

Page 1: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 1

3. Ανασκόπηση διαδικτύου και του

παγκόσμιου πλέγματος πληροφοριών

Χειμερινό εξάμηνο 2013

Πέτρος Κωμοδρόμος

[email protected]

http://www.eng.ucy.ac.cy/petros

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής

Page 2: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 2

Θέματα

Παγκόσμιος πλέγμα πληροφοριών (World Wide Web-WWW)

Δημιουργία ιστοσελίδων και HTML

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

Page 3: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 3

Δημιουργία ιστοσελίδων και HTML

(Hyper Text Markup Language)

Βασική δομή:

<HTML>

<HEAD>

<TITLE> title </TITLE>

</HEAD>

<BODY>

…………

</BODY>

</HTML>

Page 4: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 4

Βασικά χαρακτηριστικά της HTML

• HTML εντολές ή tag έχουν μια σταθερή δομή <tagname>

• Τα περισσότερα HTML tags τα συναντούμε ως ζεύγη τα οποία

ενεργούν στα περιεχόμενα μεταξύ των δύο tags του ζεύγους.

• To tag για κλείσιμο έχει ένα slash (“/”) πριν το όνομα, για παράδειγμα,

</tagName>

• Ένα τυπικό αρχείο HTML αρχίζει με <HTML> και τερματίζει με

</HTML>, ενώ έχει δύο μέρη: ένα HEAD και ένα BODY που

εμπεριέχονται στα αντίστοιχα ζεύγη (<HEAD>.... </HEAD>) και

(<BODY>.... </BODY>).

• Ένα στοιχείο του HEAD είναι το TITLE, το οποίο εμφανίζεται πάνω στη

μπάρα τίτλου του φυλλομετρητή (browser)

• Το BODY του αρχείου εμφανίζεται στο κύριο παράθυρο του

φυλλομετρητή

• Τα σχόλια, τα οποία αρχίζουν με <!-- και τελειώνουν με -->, αγνοούνται

από το φυλλομετρητή

Page 5: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 5

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

Χρησιμοποιώντας κάποιον editor (π.χ. Notepad, Emacs, κλ.π.):

<HTML>

<HEAD>

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

<TITLE>Simple Web Page</TITLE>

</HEAD>

<BODY>

Welcome to my first CEE 500 webpage!

</BODY>

</HTML>

Page 6: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση

ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 6

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

http://www.eng.ucy.ac.cy/CEE500/webPageInstructions.html

Βασική δομή ιστοσελίδας

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

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

Κύπρου

• Μεταφορά αρχείων (διαδικασία ftp)

• Παραχώρηση πρόσβασης στα αρχεία σας (διαδικασία Telnet)

Δοκιμή και επέκταση ιστοσελίδας