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

Transcript

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 Απόρςαρη ςξσ αμςικειμέμξσ από ςα διπλαμά αμςικείμεμα.