Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων

1. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ
ΔΙΑΔΙΚΤΥΟΥ ΚΑΙ ΣΧΕΔΙΑΣΗΣ
ΙΣΤΟΣΕΛΙΔΩΝ

2. ΔΟΜΗ ΤΟΥ ΔΙΑΔΙΚΤΥΟΥ
 Διαδίκτυο ονομάζουμε το
παγκόσμιο δίκτυο που ενώνει όλα
τα δίκτυα υπολογιστών.
 Κάθε υπολογιστής που συνδέεται
στο Διαδίκτυο έχει μια μοναδική
διεύθυνση.
 Η επικοινωνία στο Διαδίκτυο
γίνεται με βάση κάποιους κανόνες
που ονομάζονται πρωτόκολλα.

3. ΠΡΩΤΟΚΟΛΛΑ ΕΠΙΚΟΙΝΩΝΙΑΣ
 Στο Διαδίκτυο, το βασικό
πρωτόκολλο επικοινωνίας είναι το
TCP/IP.
 Το TCP (Transmission Control
Protocol) ελέγχει την μετάδοση
δεδομένων από υπολογιστή σε
υπολογιστή.
 To IP (Internet Protocol) δίνει μια
διεύθυνση σε κάθε υπολογιστή.
 Η μορφή του IP είναι 4 αριθμοί
μεταξύ του 0 και του 255
χωρισμένοι με τελεία (π.χ.
85.73.203.217)

4. ΔΕΥΤΕΡΕΥΟΝΤΑ ΠΡΩΤΟΚΟΛΛΑ
 Κάποια πρωτόκολλα επικοινωνίας εξυπηρετούν
πιο εξειδικευμένες μεταδόσεις δεδομένων.
 Το πρωτόκολλο FTP (File Transfer Protocol)
επιτρέπει την μεταφορά αρχείων μεταξύ
υπολογιστών.
 Το πρωτόκολλο HTTP (Hyper Text Transfer
Protocol) επιτρέπει την μεταφορά
υπερκειμένου (ιστοσελίδων) μεταξύ
υπολογιστών.
 Το πρωτόκολλο HTTPS είναι η ασφαλής
(secure) έκδοση του HTTP και χρησιμοποιείται
για την κρυπτογραφημένη μετάδοση
ευαίσθητων δεδομένων (κωδικών, αριθμών
πιστωτικών καρτών κ.α.)

5. ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΥΟΥ
 Οι βασικότερες υπηρεσίες που προσφέρει το
Διαδίκτυο είναι οι ακόλουθες:
 E-mail (ηλεκτρονικό ταχυδρομείο)
 IRC (Internet Relay Chat, υπηρεσίες
συνομιλίας)
 Telnet (απομακρυσμένος έλεγχος υπολογιστή)
 FTP, P2P (μεταφορά αρχείων)
 Ομάδες συζητήσεων (Newsgroups, mailing lists)
 Αναζήτηση πληροφοριών
 WWW (World Wide Web, Παγκόσμιος Ιστός)

6. ΤΟ ΜΟΝΤΕΛΟ ΠΕΛΑΤΗΣ-ΕΞΥΠΗΡΕΤΗΤΗΣ
(CLIENT-SERVER)
 Κάθε υπηρεσία του Διαδικτύου
προσφέρεται με βάση το μοντέλο
Πελάτης-Εξυπηρετητής.
 Ο εξυπηρετητής (server) είναι ο
υπολογιστής που αποθηκεύει δεδομένα
και δέχεται αιτήσεις για την υπηρεσία
του Διαδικτύου που προσφέρει.
 Οι υπολογιστές που ζητάνε την
υπηρεσία λέγονται πελάτες (clients).
 Ο εξυπηρετητής χρειάζεται ειδικό
λογισμικό για την διαχείριση των
αιτήσεων, το οποίο επίσης ονομάζεται
server.
 Κάθε υπηρεσία του Διαδικτύου
χρειάζεται τον δικό της server. Έτσι
έχουμε FTP servers, Web servers, E-
mail servers κ.τ.λ

7. Ο WEB SERVER ΚΑΙ Ο WEB CLIENT
 Οι υπολογιστές που συνδέονται στο
WWW και χρησιμοποιούν ένα web
browser λέγονται web clients.
 Με το ίδιο όνομα ονομάζονται και όλα
τα λογισμικά browser (Internet
Explorer, Google Chrome, Mozilla
Firefox, Opera κτλ.)
 Οι browsers αναγνωρίζουν και
εμφανίζουν τα αρχεία ιστοσελίδων που
έχουν επέκταση .htm ή .html
 Υπάρχουν διάφορα λογισμικά που
μπορούμε να χρησιμοποιήσουμε ως
Web Servers όπως ο Apache, ο IIS
(Internet Information Services) της
Microsoft κ.α.

8. ΟΝΟΜΑΤΑ ΤΟΜΕΑ ΚΑΙ Ο DNS SERVER
 To σύστημα DNS (Domain Name System)
μεταφράζει την διεύθυνση IP από αριθμούς
σε ένα εύκολο όνομα τομέα.
 Ο υπολογιστής που εκτελεί αυτή την
εργασία λέγεται DNS server.
 To όνομα τομέα αποτελείται από 3 βασικά
μέρη.
 Τον υποτομέα που δηλώνει την υπηρεσία
διαδικτύου (www).
 To βασικό όνομα που δίνει ο διαχειριστής.
 Την επέκταση που δηλώνει τον τύπο ή την
χώρα του ιστότοπου.

9. ΤΥΠΟΙ ΕΠΕΚΤΑΣΕΩΝ ΟΝΟΜΑΤΩΝ ΤΟΜΕΑ
ΕΠΕΚΤΑΣΗ ΣΗΜΑΣΙΑ
.com Εμπορική τοποθεσία
.gov Κυβερνητική τοποθεσία
.edu Εκπαιδευτική τοποθεσία
.org Οργανισμός
.mil Στρατιωτική τοποθεσία
.gr Ελλάδα
.co.uk Μεγάλη Βρετανία
.de Γερμανία
.it Ιταλία
.jp Ιαπωνία
.br Βραζιλία

10. ΥΠΕΡΚΕΙΜΕΝΟ ΚΑΙ ΥΠΕΡΣΥΝΔΕΣΜΟΙ
 Τα αρχεία ιστοσελίδων ονομάζονται
και υπερκείμενο (hypertext).
 Ένα μικρό κείμενο ή άλλο κομμάτι
της ιστοσελίδας μπορεί να μας
μεταφέρει σε μια άλλη ιστοσελίδα,
σε άλλο σημείο της ίδιας ή σε
κάποιο αρχείο.
 Σε αυτό το μέρος της ιστοσελίδας,
που ονομάζεται υπερσύνδεσμος
(hyperlink) ή απλά σύνδεσμος
(link), ο δείκτης του ποντικιού
αλλάζει.

11. ΒΑΣΙΚΑ ΜΕΡΗ ΣΧΕΔΙΑΣΗΣ ΙΣΤΟΣΕΛΙΔΩΝ
• Σε μια ιστοσελίδα πρέπει να δηλώνεται ο τύπος
κάθε μέρους του κειμένου της, έτσι ώστε να
ξεχωρίζουν και να μορφοποιούνται αντίστοιχα.
• Αυτή την εργασία κάνει η γλώσσα σήμανσης HTML,
το βασικό εργαλείο συγγραφής ιστοσελίδων.
ΠΕΡΙΕΧΟΜΕΝΟ
(HTML)
• Η μορφοποίηση και στοίχιση των μερών μιας
ιστοσελίδας γίνεται με κανόνες που ορίζονται από
τα λεγόμενα επικαλυπτόμενα φύλλα στυλ (CSS).
ΠΑΡΟΥΣΙΑΣΗ
(CSS)
• Για να προσθέσουμε διαδραστικότητα σε μια ιστοσελίδα,
έτσι ώστε να έχει μια δυναμική εμφάνιση, χρειαζόμαστε
μια γλώσσα προγραμματισμού.
• Υπάρχουνε 2 τύποι διαδραστικότητας που εκτελούνται
στον web client (JavaScript) και web server (PHP)
αντίστοιχα.
ΣΥΜΠΕΡΙΦΟΡΑ
(JavaScript)

12. Η ΓΛΩΣΣΑ ΣΗΜΑΝΣΗΣ HTML
 Οι ιστοσελίδες είναι αρχεία απλού
κειμένου γραμμένα σε γλώσσα HTML και
με επέκταση .htm.
 Η HTML (Hyper Text Markup Language)
είναι μια γλώσσα σήμανσης, δηλαδή δίνει
σημασία και πληροφορίες για ένα κείμενο.
 Η HTML δηλώνει ποιο μέρος του κειμένου
είναι τίτλος, παράγραφος, υποσέλιδο,
σημείωση κ.τ.λ.
 Τα αρχεία ιστοσελίδων διαβάζονται από
προγράμματα web browser όπως ο Mozilla
Firefox και ο Google Chrome.

13. ΚΑΝΟΝΕΣ ΜΟΡΦΟΠΟΙΗΣΗΣ CSS
 Τα μέρη της ιστοσελίδας που έχουν σημανθεί από την HTML
μορφοποιούνται με κανόνες των επικαλυπτόμενων φύλλων
στυλ (Cascading Style Sheets).
 Οι κανόνες έχουν την μορφή επιλογής μέρους της ιστοσελίδας,
και ρύθμισης τιμών για διάφορες ιδιότητες αυτών.
 Οι κανόνες μπορούν να βρίσκονται σε τρία διαφορετικά
σημεία:
 Σε κάθε σημείο της ιστοσελίδας ξεχωριστά.
 Συγκεντρωμένοι όλοι μαζί στο αρχείο .htm της ιστοσελίδας.
 Σε ξεχωριστό δικό τους αρχείο με επέκταση .css.

14. ΕΤΙΚΕΤΕΣ (TAGS) ΚΑΙ ΒΑΣΙΚΗ ΔΟΜΗ HTML
 Κάθε περιεχόμενο μιας ιστοσελίδας
επισημαίνεται τοποθετώντας το μέσα σε μια
«ετικέτα» (tag).
 Οι περισσότερες ετικέτες έχουν έναρξη και
τέλος (π.χ. <tag>…..</tag>)
 Μπορούμε να έχουμε ετικέτες μέσα σε ετικέτες
(εμφωλίαση).
 Κάποιες είναι αυτοτελής (<br>, <img> κτλ.)
 Δίπλα βλέπουμε τις βασικές ετικέτες για μια
ιστοσελίδα.

15. ΕΤΙΚΕΤΕΣ ΚΕΙΜΕΝΟΥ

16. ΕΙΚΟΝΕΣ ΚΑΙ ΥΠΕΡΣΥΝΔΕΣΜΟΙ
Στην ετικέτα εικόνας έχουμε την ιδιότητα src
που πρέπει να περιέχει την τοποθεσία της
εικόνας, είτε στον υπολογιστή μας με το
σχετικό μονοπάτι1 της, είτε την διεύθυνσή
της στο διαδίκτυο. Η ετικέτα είναι
αυτοτελής, δηλαδή δεν χρειάζεται </img>.
Στην ετικέτα συνδέσμου a2 βλέπουμε την
ιδιότητα href3 η οποία περιέχει την
διεύθυνση ή το αρχείο στα οποίο θέλουμε
να κατευθύνουμε τον χρήστη. Στην ετικέτα
περικλείουμε το κείμενο (ή την εικόνα) που
θα γίνεται σύνδεσμος.
1. Για το σχετικό μονοπάτι έχουμε μιλήσει στο μάθημα για τα αρχεία και τους φακέλους. Βλ. https://www.slideshare.net/pasxelfstone/ss-230650408
2. Από το αγγλικό anchor που σημαίνει άγκυρα
3. hypertext reference = αναφορά υπερκειμένου

17. ΣΤΟΙΧΕΙΑ BLOCK ΚΑΙ INLINE
ΤΥΠΙΚΑ HTML ΣΤΟΙΧΕΙΑ BLOCK ΚΑΙ INLINE
BLOCK INLINE
<p>
<div>
<form>
<header>
<nav>
<ul>
<li>
<h1>
<a>
<span>
<b>
<em>
<i>
<cite>
<mark>
<code>
Τα στοιχεία block δεσμεύουν μια σειρά δική τους,
αντίθετα τα στοιχεία inline μπορούν να υπάρχουν
πολλά μαζί στην ίδια σειρά.

18. ΤΟ ΜΟΝΤΕΛΟ ΚΟΥΤΙΟΥ ΣΤΑ CSS
• Κάθε αντικείμενο block μπορεί να πάρει τα ακόλουθα
χαρακτηριστικά στα CSS:
Χαρακτηριστικό Σημασία
padding Απόσταση του περιεχομένου
από το περίγραμμα.
border Περίγραμμα αντικειμένου.
margin Απόσταση του αντικειμένου
από τα διπλανά αντικείμενα.