Web Pages. Βασικά Web Page HTML Web browser Web server.

Παρουσίαση με θέμα: "Web Pages. Βασικά Web Page HTML Web browser Web server."— Μεταγράφημα παρουσίασης:

1 Web Pages

2 Βασικά Web Page HTML Web browser Web server

3 Web Page Μια Web page είναι ένα απλό αρχείο κειμένου το οποίο περιέχει –Απλό κείμενο –Ένα σύνολο από HTML tags, τα οποία περιγράφουν πως θα μορφοποιηθεί το κείμενο όταν ένας browser θα το εμφανίσει στην οθόνη. Τα tags είναι απλές οδηγίες που λένε στον Web browser πως θα πρέπει να εμφανιστεί η σελίδα στην οθόνη. Π.χ –Καθορίζουν γραμματοσειρά, χρώμα, διάταξη της πληροφορίας σε στήλες. Ο Web browser interprets (μεταφράζει) τα tags και εμφανίζει την σελίδα μορφοποιημένη.

4 HTML Hyper Text Markup Language. Μια "markup language" είναι μια γλώσσα που περιγράφει πως θα εμφανιστεί μια σελίδα στην οθόνη. Υποστηρίζει αλλαγή χρωμάτων, γραμματοσειράς, γραφικά κ.λ.π.

5 Web browser Ένας Web browser, όπως Netscape Navigator ή Microsoft Internet Explorer, είναι ένα computer program (software application) που κάνει δυο πράγματα: –Ξέρει πώς να βρει έναν Web server στο Internet και να ζητήσει μια σελίδα. –Ξέρει πώς να μεταφράσει τα HTML tags που βρίσκονται στη σελίδα, με σκοπό να τα δείξει στην οθόνη μας έτσι όπως τα σχεδίασε ο δημιουργός τους.

6 Web server Ένας Web server είναι ένα πρόγραμμα υπολογιστή που μπορεί να ανταποκριθεί σε μια αίτηση ενός browser για μεταφορά σελίδας, και μπορεί να την παραδώσει μέσω του Internet.Web server Στον server φυλάσσονται web pages, οι οποίες μπορούν να διανεμηθούν μέσω του δικτύου. Βεβαίως πρέπει κανείς να πληρώνει ένα ποσό για την υπηρεσία αυτή. Ο server που φιλοξενεί τις σελίδες λέγεται host. Είναι εύκολο να πειραματιστούμε με web pages χωρίς να έχουμε server, στον υπολογιστή μας.

7 Βλέποντας τον «κώδικα» Η web page αποτελείται από –Κείμενο και –HTML tags, απαραίτητα για τη μορφοποίηση του κειμένου. Στον browser, πατώντας δεξί κλικ σε μια web page και επιλέγοντας «View Source», θα δούμε μια σειρά από λέξεις και χαρακτήρες σε ένα νέο παράθυρο. Αυτό που βλέπουμε είναι ο HTML programming code. Είναι πραγματικά απλός.

8 HTML Tag Το HTML tag είναι ένα στοιχείο του κώδικα που λέει στον Web browser τι να κάνει με το κείμενο. Κάθε tag εμφανίζεται σαν γράμματα ή λέξεις μέσα στα σύμβολα –Παράδειγμα :, Για να «πούμε» στον Web browser να «ολοκληρώσει" αυτό που πρέπει να κάνει, χρησιμοποιούμε ένα slash : –Example:, Πολλά tags εμφανίζονται σαν ζευγάρια «αρχής» και «τέλους». Οποιαδήποτε Web page που θα δημιουργήσετε θα περιέχει τα ακόλουθα tags στην αρχή της σελίδας : – : λέει στον Web browser ότι αυτή είναι η αρχή ενός HTML document – : λέει στον Web browser ότι αυτό είναι το header της σελίδας, – : λέει στον Web browser ότι αυτός είναι ο τίτλος της σελίδας. – : λέει στον Web browser ότι αυτή είναι η αρχή του περιεχομένου της σελίδας (ό,τι θέλετε να πείτε και να δείξετε στη σελίδα σας ακολουθούν αυτό το tag). Τα tags που χρειάζονται για να «κλείσουν» την Web page είναι: –

9 Δημιουργώντας μια απλή σελίδα Υπάρχουν διάφορα εργαλεία για δημιουργία Ιστοσελίδων. (π.χ fronpage) Σκοπός μας εδώ είναι να καταλάβουμε πως πραγματικά δουλεύουν οι ιστοσελίδες. Δεν θέλουμε να χρησιμοποιήσουμε εργαλεία που μας κρύβουν την όλη διαδικασία. Έτσι θα χρησιμοποιήσουμε έναν απλό επεξεργαστή κειμένου π.χ Notepad, WordPerfect ή Microsoft Word. Ανοίξτε το Notepad και πληκτρολογείστε My First Page Hello there. This is my first page! Αποθηκεύουμε το αρχείο σε ένα φάκελο (τα έγγραφά μου/webpage) με το όνομα first.html

10 Ανοίγοντας το αρχείο first.html με έναν Web browser (e.g., Microsoft Internet Explorer or Netscape Navigator) θα δούμε –Η σελίδα έχει τίτλο "My First Page." –Η σελίδα περιέχει "Hello there. This is my first page!" –Η URL που φαίνεται στο παράθυρο διευθύνσεων είναι …..\τα έγγραφά μου\first.html από τον τοπικό δίσκο και όχι το συνηθισμένο http://... που δείχνει ότι η σελίδα έρχεται από τοInternet. Δημιουργώντας μια απλή σελίδα

11 Βασικά HTML Formatting Tags The Big List of HTML Tags.The Big List of HTML Tags –Μια εκτυπώσιμη σελίδα με το 90% όλων των tags που χρησιμοποιούνται. Έχετε δυο τρόπους για να μάθετε : –Το HowStuffWorks έχει ένα πολύ καλό Try It Out! feature Try It Out! –Πειραματιζόμενοι με το "first.htm" αρχείο που φτιάξαμε πριν λίγο. Let's get started!

12 Bold, Italics and Underline Κάντε ένα τμήμα κειμένου bold προσθέτοντας το tag στην αρχή και στο τέλος. Έτσι – bold bold. – italicized Italicized – underlined.underlined

13 Breaks και Paragraphs Αλλάζει γραμμή. (Πολλά στη σειρά δημιουργούν ένα κενό διάστημα) Αλλάζει γραμμή και αφήνει και μια κενή γραμμή. Δημιουργεί μια οριζόντια γραμμή

14 Αλλάζοντας Font Color. Αλλαγή χρώματος γίνεται με... – red. – green. Δουλεύουν σχεδόν όλα τα χρώματα, καθώς και τα «lights» και «darks», όπως "lightblue" ή "darkgreen." Μπορείτε επίσης να χρησιμοποιήσετε hexadecimal color number, όπως. Υπάρχει λίστα με hexadecimal color codes. (December.com: HTML).December.com: HTML Αν θέλετε να καθορίσετε χρώμα για ολόκληρο το κείμενο, προσθέστε ένα text="color" μέσα στο tag. –Example: Ακόμα και αν καθορίσετε χρώμα για ολόκληρο το κείμενο, μπορείτε να αλλάξετε χρώμα σε ένα τμήμα του.

15 Αλλάζοντας FontType and Size Αλλαγή του font type γίνεται με το tag:... – arial. – georgia. Αλλαγή του size γίνεται με το tag:... – Το default font size είναι "3« για τους περισσότερους browsers. Μεγαλύτερο του 3 νούμερο δημιουργεί μεγαλύτερους χαρακτήρες και το αντίστροφο. Μπορείτε ακόμα να αλλάξετε font size, προσθέτοντας ή αφαιρώντας από το default font size. Π.χ., or Μπορείτε ακόμα να αλλάξετε font size χρησιμοποιώντας τα tags,,,, (Headings 1, 2, 3) Τέλος θέτουμε με το tag – –Ή χρησιμοποιώντας τα αντίστοιχα ζευγάρια π.χ,,

16 Δημιουργώντας Background Color Αλλαγή του background color γίνεται με προσθήκη του bgcolor="color" στο tag. Π.χ – Χρήση της λίστα με τα Hexadecimal Color Code.Hexadecimal Color Code

17 Δημιουργώντας λίστες unordered list Ξεκινά με Τελειώνει με Για κάθε στοιχείο Για καθορισμό του τύπου του Bullet χρήση π.χ "circle," "square" or "disc" California Oregon North Carolina California Oregon North Carolina

18 Δημιουργώντας λίστες ordered list Ξεκινά με Τελειώνει με Για κάθε στοιχείο Για καθορισμό του τύπου της οργάνωσης χρήση π.χ “a" “I" or “i" Επίσης χρήση του California Oregon North Carolina a.California b.Oregon c.North Carolina

19 Δημιουργώντας λίστες descriptive list Ξεκινά με Τελειώνει με Για αλλαγή intend χρήση και Πρώτο επίπεδο δεύτερο επίπεδο HowStuffWorks Πρώτο επίπεδο Δεύτερο επίπεδο

20 Linking to Other Sites Δημιουργία links σε άλλες σελίδες με χρήση του anchor tags, Πληκτρολογείστε τον τίτλο της άλλης σελίδας και κλείστε το anchor με Aν χρησιμοποιήσουμε το target="_blank” η καινούρια σελίδα θα ανοίξει σε νέο παράθυρο Παράδειγμα: – ΥΠΕΠΘ

21 Link Color Το Blue είναι το standard default color για links. Αυτό μπορεί να αλλάξει χρησιμοποιώντας μέσα στο tag τα –link="color" –vlink="color" Vlink σημαίμει "visited link." (αυτά που έχουμε ήδη επισκεφτεί) Παράδειγμα :

22 Linking to Receive E-mail Αν θέλετε να παραλάβετε e-mail από ανθρώπους που διαβάζουν τη σελίδα σας, χρησιμοποιείστε το anchor tag: Έπειτα πληκτρολογήστε την e-mail address (ή ό,τι άλλο θέλετε) και κλείστε με Παράδειγμα : Στείλτε mail Θα φαίνεται : Στείλτε mail

23 Δημιουργώντας Links στην δικιά σας σελίδα Αnchor tags χρησιμοποιούνται όχι μόνο για να συνδεθούμε με άλλες σελίδες στο Internet, αλλά και για να εντοπίσουμε πληροφορίες στην δικιά μας σελίδα. Μπορούμε να παραλείψουμε το "http://www" και απλά να συμπεριλάβουμε το html document file name. Παράδειγμα : – Company Information Για να το κάνουμε αυτό θα πρέπει να ονομάσουμε ένα τμήμα της σελίδας μας και ύστερα να ανφερθούμε σε αυτή. Να πως : Πριν το τμήμα εισάγουμε π.χ. Στο anchor tag, εισάγουμε – Company Information Αν το link αναφέρεται σε άλλο html document, περιλαμβάνουμε και το όνομα του αρχείου επίσης δηλ. – Company Information

24 Προσθέτοντας εικόνες και γραφικά Χρήση του tag: Οι εικόνες είναι συνήθως GIF files ή JPG files. (extensions) Οι εικόνες πρέπει να είναι αποθηκευμένες στον ίδιο φάκελο που είναι και η σελίδα μας. Τα ονόματα των αρχείων είναι case sensitive γι αυτό χρειάζεται ιδαίτερη προσοχή στην πληκτρολόγηση του ονόματος τους.

25 Justification By default, η στοίχιση είναι αριστερή. Μπορείτε να την αλλάξετε με χρήση των …… Μπορείτε να χρησιμοποιήσετε "divisions” με χρήση των ………. Βοηθήματα –Big List of HTML Tags A printable, one-page reference guide that contains all of the common HTML tags on one easy sheetBig List of HTML Tags – The Try It! page - Type in (or cut-and-paste) any piece of HTML code and see how it will look immediatelyTry It! –This article's detailed Table of Contents - Helps you find things fastTable of Contents

26 Δημιουργώντας πίνακες Αρχή του πίνακα … Αρχή κάθε γραμμής … Αρχή των data μέσα σε μια γραμμή είναι το border tag που συντάσεται με το tag. Δείχνει πόσο παχύ θα είναι το περίγραμμα του πίνακα. Αν δεν θέλουμε καθόλου περίγραμμα δίνουμε τιμή 0. Δίνει χρώμα σε όλο τον πίνακα. Μπορεί να χρησιμοποιηθεί και με το, για να δώσει χρώμα σε γραμμή ή κελί. Καθορίζει το ύψος και πλάτος των κελιών. Μπορεί να χρησιμοποιηθεί με τα, Καθορίζει την απόσταση των data από τα άκρα του κελιού Καθορίζει την απόσταση ανάμεσα στα κελιά Column 1 Χρησιμοποιείται αντί του για να ορίσουμε επικεφαλίδες και Καθορίζει το horizontal ή vertical alignment όλου του πίνακα ή κελιού και Συντάσσεται με το και δείχνει ότι μια col ή row σπάει σε value cols ή rows.

27 Παράδειγμα πίνακα A1 A2 B1 B2 C1 C2 Α1Α2 Β1Β2 C1C2

28 Δημιουργώντας frames Ta frames τα χρησιμοποιούμε –Για καλαισθησία –Εύκολη πλοήγηση, κρατώντας σταθερά κάποια τμήματα της σελίδας μας ενώ κάποια άλλα αλλάζουν όταν πατήσουμε ένα link. Παράδειγμα – (ποσοστό της οθόνης) – (pixels) –