Εισαγωγή στην κατασκευή δικτυακών τόπων. Εισαγωγή στην ενότητα.

Παρουσίαση με θέμα: "Εισαγωγή στην κατασκευή δικτυακών τόπων. Εισαγωγή στην ενότητα."— Μεταγράφημα παρουσίασης:

1 Εισαγωγή στην κατασκευή δικτυακών τόπων

2 Εισαγωγή στην ενότητα

3 Τι είναι η HTML; Κάθε κλικ σε ένα σύνδεσμο (link), μεταβιβάζει μία σελίδα στο χρήστη Πολλές ενδιάμεσες ενέργειες: http, tcp, ip, η πλέον προφανής είναι η σελίδα που βλέπετε Οι σελίδες έχουν τη συγκεκριμένη εμφάνιση λόγω HTML H HTML δεν είναι γλώσσα προγραμματισμού, όπως η C,C++, Java H HTML δεν είναι πρόγραμμα (π.χ. Επεξεργαστής κειμένου ή desktop publishing) H HTML λέει στον browser πως να εμφανίσει το κείμενο που στέλνει ο server H HTML λέγεται και γλώσσα τύπου markup διότι Σημαίνει τα διάφορα στοιχεία του κειμένου Λεει στον browser που τι είναι επικεφαλίδα, που αλλάζει η παράγραφος... Που θα μπουν και με ποιο μέγεθος οι εικόνες H HTML είναι διεθνές standard, που χρησιμοποιείται για την «έκδοση» κειμένων στο Web

4 Υπερσύνδεσμοι και γραφικά Με ΗΤΜL προσθέτουμε υπερσυνδέσμους (hyperlinks) από οποιοδήποτε σημείο ενός κειμένου σε οποιοδήποτε κείμενο, οπουδήποτε αλλού στον κόσμο. Η HTML προσφέρει δυνατότητα εισαγωγής γραφικών, video, ήχου και προσομοιώσεων σε μία σελίδα.

5 Τυποποιημένη εμφάνιση H HTML δίνει στα κείμενα μία σχεδόν τυποποιημένη εμφάνιση. Δεν έχει τις άπειρες δυνατότητες ενός επεξεργαστή κειμένου. Αυτό είναι πλεονέκτημα: σε διαφορετικές υπολογιστικές μηχανές, με διαφορετικούς browser το ίδιο HTML κείμενο μπορεί να είναι λίγο διαφορετικό (εμφανισιακά) Διαφορές, στην εμφάνιση γραμματοσειρών, χρώματα και ανάλυση γραφικών. Αλλά αν είχε πλήρεις περιγραφές τα αρχεία HTML θα ήταν πολύ μεγαλύτερα

6 HTML standard Αρχικά η HTML ήταν κάποιες προδιαγραφές... Με τη εξάπλωση του web έγινε standard, που ελέγχεται από το World Wide Web Consortium (W3C). HMTL είναι γλώσσα τύπου mark up, δηλαδή μπορεί να χρησιμοποιηθεί για να χαρακτηρίσει τη δομή του κειμένου και να κατασκευάσει υπερσυνδέσμους H πλέον πρόσφατη έκδοση είναι η HTML 4.01

7 Το πρώτο κείμενο html Γειά! To πρώτο κείμενο HTML Η πρώτη μου προσπάθεια σε html. Δεύτερη επικεφαλίδα Δεύτερη παράγραφος. Είναι ωραίο. Τρίτη παράγραφος.

8 Εμφάνιση τoυ κειμένου με html Το πρώτο κείμενο html H πρώτη μου προσπάθεια σε html. Δεύτερη επικεφαλίδα Δεύτερη παράγραφος. Είναι ωραίο. Τρίτη παράγραφος

9 Βασικά html tags α’ Οι εντολές html μπαίνουν μεταξύ, λέγονται tags tag ακολουθείται από tag. Οδηγία προς browser: ότι βρίσκεται μεταξύ τους είναι html. φέρουν επιπρόσθετες πληροφορίες σε πολύπλοκα html κείμενα. εμφανίζεται στο title bar του browser εμφανίζεται στο παράθυρο του browser, κυρίως κείμενο To πρώτο κείμενο HTML, είναι δηλωτικό επικεφαλίδας

10 Βασικά html tags β’ Δεύτερη παράγραφος, ξεκινάει καινούργια παράγραφο. Σχεδιάζεται μία οριζόντια γραμμή τυπώνει με έντονα γράμματα

11 Υπερσύνδεσμοι My Second Document The Wonderful World of Hyperlinks Let's create a hyperlink to Sun Microsystems,Inc. If we move our cursor over the words "Sun Microsystems, Inc.", our cursor should turn into a hand. We can access the Sun Microsystems homepage with just a click of the mouse.

12 Σύνταξη υπερσυνέσμων Sun Microsystems,Inc. Τα tags που χρησιμοποιούνται για υπερσυνδέσμους είναι and. Το κείμενο Sun Microsystems, Inc. Είναι αυτό που φαίνεται με Το http://www.sun.com είναι ο τόπος στον οποίο πάμε.http://www.sun.com tag, σημαίνει italics

13 Παρατηρήσεις Τα tags, μπορεί να γράφονται με κεφαλαία ή μικρά γράμματα π.χ. είναι το ίδιο Υπάρχουν έξι επίπεδα επικεφαλίδων, δηλ h1, h2, h3, h4, h5, h6 Τα κενά, οι χαρακτήρες κενής γραμμής, μεταφράζονται σε ένα κενό. Αν θέλετε αλλαγή παραγράφου, το δηλώνετε ρητώς, με. Tα tags, πρέπει να είναι εμφωλιασμένα, σωστό!, λάθος!

14 Μέγεθος γραμματοσειρών Παράδειγμα Προσδιορίζει το μέγεθος των γραμμάτων, χ παίρνει τιμές -6.. 6 Παρατήρηση: H εντολή ζητάει ένα καινούργιο μέγεθος γραμματοσειράς Δίνει ένα αριθμό, που δηλώνει το μέγεθος. Αυτό καλείται attribute. Δηλαδή υπάρχει Όνομα: font size Τιμή: ένας αριθμός από -6.. 6 Attributes/με τιμές είδαμε και στους υπερσυνδέσμους

15 Ευθυγράμμιση κειμένου Για ευθυγράμμιση κειμένου: κέντρο αριστερά δεξιά Παρατήρηση Δείτε το attribute και την τιμή που παίρνει Έχουμε επέκταση της εντολής αλλαγής παραγράφου. Απαραίτητο το κλείσιμο

16 Υπερσύνδεσμοι β’ Yπερσυνδέσμος που οδηγεί στην SUN. href είναι το attribute, http…. η τιμή του. Επισκεφθείτε τη SUN Υπερσύνδεσμος που οδηγεί στο email Click Here To Write Me

17 Προσθήκη Εικόνας IMG: σημαίνει προσθήκη εικόνας στο σημείο που μπαίνει το tag SRC: είναι attribute, source, ιmage.gif είναι το όνομα της εικόνας, και τιμή του attribute gif bmp jpeg/jpg είναι μορφές αποθήκευσης εικόνας. Τα συνηθέστερα είναι gif, bmp

18 Εικόνα και υπερσύνδεσμος α’ Πως μπορούμε να βάλουμε εικόνα, και κάνοντας κλικ να πάμε σε ένα site; Διαφορά σε σχέση με προηγούμενους υπερσυνδέσμους: στη θέση που έμπαινε το κείμενο βάζω εικόνα

19 Εικόνα και υπερσύνδεσμος β’ Καθορίζει το μέγεθος του περιθωρίου, γύρω από την εικόνα. Εν προκειμένω 0

20 Τοποθέτηση εικόνας στη σελίδα Οι εικόνες τοποθετούνται από τον browser στα αριστερά. Αυτό μπορεί να αλλάξει π.χ.

21 Σχέση εικόνας με κείμενο text text text rwrwer text text text qweqwe text text text qweqweqweqwe

22 Ροή κειμένου, εικόνα Μπορεί να παρατηρήσατε ότι top, middle, bottom attributes, επιτρέπει μόνο μία γραμμή κειμένου και το υπόλοιπο πάει κάτω από την εικόνα Λύση: μην χρησιμοποιείτε top, middle, bottom attributes. Χρησιμοποιείστε ALIGN="left" and ALIGN="right".

23 Ρύθμιση μεγέθους εικόνας Μπορεί να ρυθμιστεί το ύψος και το πλάτος της εικόνας σε pixels

24 Οριζόντια διαχωριστική γραμμή Έχουμε αναφέρει το που αφήνει οριζόντια διαχωριστική γραμμή. Κατασκευάζει γραμμή 40% της μέγιστης

25 Χρώματα υποβάθρου Αποτελεί επέκταση του tag. Το χρώμα προσδιορίζεται από τον εξαψήφιο κωδικό. Η από το όνομα του χρώματος Παραδείγματα κωδικών

26 Wallpapers Μπορείτε να χρησιμοποιήσετε και μία εικόνα ως background. Αυτή θα επαναληφθεί πολλές φορές, ώστε να γεμίσει την οθόνη του browser Η εικόνα μπορεί να είναι τύπου gif/jpeg

27 Αλλαγή χρώματος κειμένου α’ Εντολές που αλλάζουν το χρώμα όλου του κειμένου text="######"-- To χρώμα του κειμένου. link="######" -- Το χρώμα των συνδέσμων. alink="######" -- Το χρώμα των συνδέσμων ότι γίνει click. vlink="######" -- Το χρώμα των συνδέσμων μετά την επίσκεψη τους. Τρόπος χρήσης ή κτλ.

28 Αλλαγή χρώματος κειμένου β’ Οι προηγούμενες εντολές αλλάζουν όλο χρώμα όλου του κειμένου. Αν θέλετε να αλλάξετε μέρος του κειμένου: Κόκκινο κείμενο Αλλάζει μόνο το συγκεκριμένο κομμάτι κειμένου

29 Πίνακες html Mε τους πίνακες βάζουμε σε τάξη δεδομένα. Πως κατασκευάζουμε τον πίνακα;

30 Κώδικας για δημιουργία πίνακα The Directors Alfred Hitchcock David Lynch αρχή τέλος πίνακα. επικεφαλίδα πίνακα. τα δεδομένα του πίνακα. table row, γραμμή πίνακα

31 Πίνακες μορφοποίηση The Directors Alfred Hitchcock David Lynch Border=size, το μέγεθος του εξωτερικού πλαισίου του πίνακα Cellspacing=απόσταση μεταξύ των κελιών Cellpadding=απόσταση από τα άκρα των κελιών

32 Πίνακες για ομαδοποίηση υπερσυνδέσμων Sun Microsystems,Inc. Πανεπιστήμιο Κύπρου Formula 1 CNN Σε τι διαφέρει ο κώδικας, από αυτό της προηγούμενης διαφάνειας;

33 Εικόνες σε πίνακες Μπορείτε να τοποθετήσετε εικόνες στις γραμμές και τις στήλες ενός πίνακα Η μόνη προσθήκη/αλλαγή στον κώδικα Όπου image.gif είναι η εικόνα που θέλετε

34 Λίστες α’ Oι λίστες κατηγοριοποιούν. Οι λίστες είναι ωραίες. Οι λίστες είναι εύκολες. Oι λίστες κατηγοριοποιούν. Οι λίστες είναι ωραίες. Οι λίστες είναι εύκολες. UL: unordered list, δηλαδή δεν χρησιμοποιούνται αριθμοί LI: list item

35 Λίστες β’ κατηγοριοπ οιούν. είναι ωραίες. εύκολες. Χρήση τετραγώνου, αντί τελείας

36 Λίστες γ’ στοιχείο 1 στοιχείο 2 στοιχείο 3 ol=ordered list, Δηλαδή αριθμοί

37 Εμφωλιασμένες λίστες στοιχείο α περίπτωση 1 περίπτωση 2 στοιχείο β ol=ordered list, Δηλαδή αριθμοί

38 Λίστες ορισμού (Definition lists) NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana- Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. dl=definition list dt=definition term dd=definition description