Ιστοσελίδες -- Web-site. Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας.

Παρουσίαση με θέμα: "Ιστοσελίδες -- Web-site. Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας."— Μεταγράφημα παρουσίασης:

1 Ιστοσελίδες -- Web-site

2 Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας μεταβάλλονται δυναμικά αφού αυτή έχει φορτωθεί στον browser του χρήστη.

3 Βασικά στοιχεία της HTML Τι είναι η HTML Ένα απλό HTML αρχείο Το στοιχείο HEAD & BODY Επικεφαλίδες, Παράγραφοι, μορφοποίηση κειμένου, λίστες Πίνακες & Φόρμες

4 Τι είναι η HTML Hyper Text Markup Language : Γλώσσα σήμανσης για τη δημιουργία σελίδων στο διαδίκτυο Η γλώσσα HTML προέρχεται από την SGML (Standard Generalized Markup Language) Ένα HTML αρχείο είναι ένα αρχείο κειμένου που περιέχει ετικέτες (markup tags) Οι ετικέτες (tags) λένε στον Φυλλομετριτή (Web Browser) πώς να παρουσιάσει το περιεχόμενο της σελίδας Τα HTML αρχεία έχουν html ή htm καταλήξεις Ένα HTML αρχείο μπορεί να δημιουργηθεί χρησιμοποιώντας έναν απλό text editor (π.χ. notepad)

5 Ένα απλό HTML αρχείο Διαδικτυακός τόπος ΤΕΙ. Καλώς Ήρθατε στο δικτυακό μας τόπο!

6 Το στοιχείο HEAD title : ορισμός του τίτλου της σελίδας script : καθορισμός της scripting γλώσσας style : καθορισμός style sheet base : ορισμός της βάσης αρχής για τον καθορισμό των σχετικών urls meta : καθορισμός ζεύγους πληροφοριών (όνομα/τιμή) - π.χ. εισαγωγή keywords link : ορισμός σχέσεων με άλλα κείμενα

7 Το στοιχείο BODY - παράμετροι bgcolor : το χρώμα του φόντου της σελίδας text : το χρώμα των χαρακτήρων του κειμένου link / vlink / alink : το χρώμα των links background : το URL της εικόνας που θα εμφανίζεται στο φόντο της σελίδας

8 Βασικά στοιχεία της HTML Στοιχεία ορισμού περιοχής  Επικεφαλίδες –, …,  Παράγραφοι -  Λίστες -,,  Φόρμες -  Πίνακες -  Οριζόντιες γραμμές - Στοιχεία ορισμού κειμένου  Μεμονωμένα στοιχεία διαμόρφωσης -,,  Σύνδεσμοι -  Εικόνες -  Διακοπές κειμένου -

9 Επικεφαλίδες – h1, …, h6 Υπάρχουν 6 μεγέθη από το Η1, H2, H3, H4, H5, H6 (φθίνουσα σειρά μεγεθών). Επίπεδο επικεφαλίδας 1 Επίπεδο επικεφαλίδας 2 Επίπεδο επικεφαλίδας 3 Επίπεδο επικεφαλίδας 4 Επίπεδο επικεφαλίδας 5 Επίπεδο επικεφαλίδας 6

10 Παράγραφοι – μορφοποίηση κειμένου Εμφανίζει το περιεχόμενο με έντονα γράμματα (Bold).  Το κείμενο αυτό είναι με έντονα γράμματα Εμφανίζει το περιεχόμενο σε πλάγια γράμματα (italic).  Το κείμενο αυτό είναι σε πλάγια γράμματα Εμφανίζει το περιεχόμενο υπογραμμισμένο (underline).  Το κείμενο αυτό είναι υπογραμμισμένο

11 Λίστες Μη διατεταγμένες λίστες AltaVista Yahoo Google Ask Jeeves Διατεταγμένες λίστες AltaVista Yahoo Google Ask Jeeves Λίστες ορισμού AltaVista Αρκετά καλή Yahoo Κατη γοριοποίηση από ανθρώπους Google Το καλύτερο Ask Jeeves Πολύ καλή η ιδέα των ερωτήσεων

12 Σύνδεσμοι Μια σύνδεση στο Web (link) αποτελείται από δύο μέρη : Aυτό που βλέπουμε στη σελίδα και λέγεται άγκυρα (anchor) Aυτό που όταν κάνουμε click θα εμφανιστεί στην οθόνη του υπολογιστή μας Ενα anchor μπορεί να είναι μια λέξη μια ομάδα λέξεων μια εικόνα Κάθε σύνδεση σημαίνει οτι ο browser θα φορτώσει το περιεχόμενο της αντίστοιχης διεύθυνσης Η διεύθυνση αυτή είναι είτε σχετική είτε απόλυτη Η γενική μορφή σύνδεσης είναι : Anchor

13 Εικόνες Η πρόσθεση μιας εικόνας γίνεται με το tag και την ιδιότητα src, που προσδιορίζει τη διεύθυνση που βρίσκεται η εικόνα Π.χ. η εντολή αυτόματα τοποθετεί την εικόνα filename.gif δεξιά του προηγούμενου αντικειμένου, με εναλλακτικό κείμενο τη λέξη image Όταν παρεμβάλλεται μια εικόνα σε κείμενο, αυτόματα το κείμενο ευθυγραμμίζεται με το κάτω μέρος της εικόνας Με τη βοήθεια της ιδιότητας align μπορούμε να διορθώσουμε την τοποθέτηση της εικόνας

14 Πίνακες Στην HTML μπορούμε να ορίσουμε και πίνακες με το tag Τα βασικά tags για την επεξεργασία πινάκων είναι:  Ορισμός πίνακα  Νέα γραμμή  Ορίζει ένα κελί  Ορίζει την επικεφαλίδα

15 Πίνακες Το στοιχείο Table  align = {left, right, center} : την οριζόντια τοποθέτηση του πίνακα  width, height = {850, 50%} : το πλάτος και το ύψος του πίνακα  border = {0,1,…} : το πλάτος του περιγράμματος  cellspacing = {0,1,…} : το κενό μεταξύ γειτονικών κελιών  cellpadding : το κενό μεταξύ κελιού και περιεχομένων  …

16 Πίνακες tr / th / td – παράμετροι  nowrap : απαγορεύει την αναδίπλωση κειμένου  rowspan = {int} : τις γραμμές που καταλαμβάνονται από το κελί  colspan : τις στήλες που καταλαμβάνονται  width / height : το πλάτος / ύψος του κελιού  align / valign : οριζόντια / κάθετη ευθυγράμμιση των περιεχομένων  bgcolor  tr – align & valign = {top, middle, bottom}

17 Φόρμες Το στοιχείο Form  name : ορίζει το όνομα της φόρμας  action : ορίζει το url που θα χρησιμοποιηθεί από τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα της φόρμας  method = {get, post}: ορίζει τη μέθοδο αποστολής των περιεχομένων της φόρμας get : στέλνει τα περιεχόμενα σαν query στο url post : τα στέλνει στο σώμα του http μηνύματος

18 Φόρμες : παίρνει διάφορες παραμέτρους  Απαγορεύεται να υπάρχει ετικέτα τέλους ( ) : για πεδία κειμένου πολλαπλών γραμμών  rows / columns  : μονής ή πολλαπλής επιλογής μενού  option - selected 

19 Φόρμες Το στοιχείο Input – παράμετροι: Type: Καθορίζει τον τύπο του πεδίου εισόδου text : κείμενο μίας γραμμής – size, maxlength password : όμοιο με τον τύπο text, αλλά απεικονίζει τον χαρακτήρα * checkbox : δημιουργεί ζεύγος ονόματος/τιμής, υποστηρίζονται πολλαπλές τιμές – checked radio : δέχεται μόνο μία τιμή, μία ομάδα επιλογών έχει το ίδιο όνομα submit : υποβολή και αποστολή δεδομένων reset : «καθαρίζει» τα περιεχόμενα