3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος...
Transcript of 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος...
![Page 1: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/1.jpg)
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 1
3. Ανασκόπηση διαδικτύου και του
παγκόσμιου πλέγματος πληροφοριών
Χειμερινό εξάμηνο 2013
Πέτρος Κωμοδρόμος
http://www.eng.ucy.ac.cy/petros
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής
![Page 2: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/2.jpg)
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 2
Θέματα
Παγκόσμιος πλέγμα πληροφοριών (World Wide Web-WWW)
Δημιουργία ιστοσελίδων και HTML
Εγκατάσταση ιστοσελίδων στο Πανεπιστήμιο Κύπρου
![Page 3: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/3.jpg)
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 3
Δημιουργία ιστοσελίδων και HTML
(Hyper Text Markup Language)
Βασική δομή:
<HTML>
<HEAD>
<TITLE> title </TITLE>
</HEAD>
<BODY>
…………
</BODY>
</HTML>
![Page 4: 3. Ανασκ )πηση διαδικτου και του παγκσμιου πλέγματος ... · Δημιουργία ιστοσελίδων και html Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/4.jpg)
ΠΠΜ 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 Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/5.jpg)
ΠΠΜ 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 Εγκατάσταση](https://reader034.fdocument.pub/reader034/viewer/2022050211/5f5d6c05bc8b2717c93970ce/html5/thumbnails/6.jpg)
ΠΠΜ 500: Προχωρημένη Ανάπτυξη Λογισμικού Εφαρμογών Μηχανικής 6
Εγκατάσταση ιστοσελίδων στο Πανεπιστήμιο Κύπρου
http://www.eng.ucy.ac.cy/CEE500/webPageInstructions.html
Βασική δομή ιστοσελίδας
Συγγραφή μιας απλής ιστοσελίδας χρησιμοποιώντας HTML
Δημοσίευση προσωπικής ιστοσελίδας .html στο Πανεπιστήμιο
Κύπρου
• Μεταφορά αρχείων (διαδικασία ftp)
• Παραχώρηση πρόσβασης στα αρχεία σας (διαδικασία Telnet)
Δοκιμή και επέκταση ιστοσελίδας