Κατέβασμα παρουσίασης
Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε
1
Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία
2
Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο
Απλό κείμενο και υπερσύνδεσμοι
3
Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Ορατό τμήμα κειμένου Συνήθως υπογραμμισμένο Μη ορατό μέρος Πληροφορία για το πού θα βρεθεί η πληροφορία που αντιστοιχεί στο υπογραμμισμένο κείμενο
4
HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου
Απλή γλώσσα για τη δημιουργία εγγράφων υπερκειμένου
5
EasyHTML Λογισμικό για δημιουργία ιστοσελίδων EHtml2_4 Download
6
Δομή HTML εγγράφου Δύο βασικές ενότητες HEAD BODY
7
Τίτλος <TITLE> τίτλος ιστοσελίδας </TITLE>
Παρουσιάζεται στο επάνω μέρος του browser
8
1ο - Τίτλος
9
1ο - Τίτλος Στον browser Όλη τη διαδρομή του αρχείου
file///D:/ΣΗΜΕΙΩΣΕΙΣ/ΚΕΕ/HTML/1_Title.htm
10
Σχόλια <!-- σχόλια -->
Διευκόλυνση των προγραμματιστών για να εισάγουν σημειώσεις Τα σχόλια δεν εμφανίζονται στον browser αλλά μόνο στον πηγαίο (source) κώδικα
11
2ο παράδειγμα - Σχόλια
12
Επικεφαλίδες <h1> επικεφαλίδα </h1>
Έξι επίπεδα επικεφαλίδων Με το «1» δηλώνεται η μεγαλύτερη επικεφαλίδα Με το «6» δηλώνεται η μικρότερη επικεφαλίδα
13
3ο παράδειγμα - Επικεφαλίδες
14
Παράγραφος <p> κείμενο </p>
Μια ετικέτα παραγράφου ισοδυναμεί με δύο αλλαγές γραμμής Δεν έχει νόημα η σύνταξη <p>...<p>...</p>... σε μια γραμμή Το </P> είναι προαιρετικό αλλά συνιστάται η χρήση του
15
4o παράδειγμα - Παράγραφος
16
Αλλαγή γραμμής <br> Δεν κλείνει με </br> Τοποθετείται
Είτε στο τέλος μιας γραμμής Είτε σε καινούρια γραμμή Αν στον πηγαίο κώδικα αλλάξω γραμμή με Enter Το κείμενο εμφανίζεται σε μία γραμμή στον browser
17
5o παράδειγμα – Χωρίς <br>
18
5o παράδειγμα – Με <br>
19
Απλές μορφοποιήσεις Πλάγια Έντονα Υπογραμμισμένα Διαγραμμένα
<i> κείμενο </i> Έντονα <b> κείμενο </b> <strong> κείμενο </strong> Υπογραμμισμένα <u> κείμενο </u> Διαγραμμένα <s> κείμενο </s> Πολλές μορφοποιήσεις μαζί <b> <i> <u> κείμενο </b> </i> </u>
20
6ο παράδειγμα – Απλές μορφοποιήσεις
21
Άλλες μορφοποιήσεις (1/3)
Άλλες μορφοποιήσεις (1/3) Μέγεθος χαρακτήρων Εξ ορισμού <basefont> κείμενο <basefont> Μεγάλου μεγέθους <big> κείμενο </big> Μικρού μεγέθους <small> κείμενο </small>
22
Άλλες μορφοποιήσεις (2/3)
Άλλες μορφοποιήσεις (2/3) Δείκτης <sub> κείμενο </sub> Εκθέτης <sup> κείμενο </sup>
23
Άλλες μορφοποιήσεις (3/3)
Άλλες μορφοποιήσεις (3/3) Γραμματοσειρά γραφομηχανής <tt> κείμενο </tt> Μία κενή γραμμή πριν και μετά το κείμενο με γραμματοσειρά Courier <pre> κείμενο </pre> Οριζόντια γραμμή και αλλαγή γραμμής <hr>
24
7o παράδειγμα – Άλλες μορφοποιήσεις
25
Κενά Περισσότερα του ενός κενού θεωρούνται ένα
Εισαγωγή περισσότερων του ενός κενού Εισαγωγή 3 κενών ……  ……
26
8o παράδειγμα – Κενά
27
Στοίχιση Κείμενο στο κέντρο Παράγραφος αριστερά Παράγραφος στο κέντρο
<center> κείμενο </center> Παράγραφος αριστερά <p align = "left"> κείμενο </p> Παράγραφος στο κέντρο <p align = "center"> κείμενο </p> Παράγραφος δεξιά <p align = "right"> κείμενο </p> Πλήρης στοίχιση παραγράφου <p align= "justify"> κείμενο </p>
28
9o παράδειγμα - Στοίχιση
29
Περιθώρια και Κενά Τμήμα κειμένου ξεχωρίζει σαν παράγραφος
Εμφανίζεται πιο μέσα από το υπόλοιπο κείμενο <blockquote> κείμενο </blockquote>
30
10o παράδειγμα – Περιθώρια και Κενά
31
Περισσότερα Περιθώρια και Κενά
Πολλά blockquote Περισσότερα από 3 είναι υπερβολικά Κείμενο <blockquote> </blockquote>
32
11o παράδειγμα – Περιθώρια και Κενά
33
Ακρώνυμα Επεξήγηση του ακρώνυμου αφήνοντας τον δείκτη του ποντικιού πάνω του <acronym title = "επεξήγηση"> ακρώνυμο </a> Παράδειγμα <acronym title = "Εκπαιδευτικά Περιβάλλοντα Διαδικτύου"> Ε.Π.Δ </a>
34
12ο Παράδειγμα - Ακρώνυμα
35
Χρώμα γραμματοσειράς Συγκεκριμένο τμήμα κειμένου
<font color = "#κωδικός χρώματος"> κείμενο </font> Το κουτάκι να μην είναι τσεκαρισμένο
36
13ο Παράδειγμα – Χρώμα γραμματοσειράς
37
Προεπιλεγμένο χρώμα κειμένου
<BODY text = "#κωδικός χρώματος"> Προσοχή!!!! Ορίζεται μέσα στην ετικέτα BODY
38
14ο Παράδειγμα - Προεπιλεγμένο χρώμα κειμένου
39
Τύπος γραμματοσειράς Συγκεκριμένο τμήμα κειμένου
<font face = "όνομα γραμματοσειράς"> κείμενο </font> Το κουτάκι να μην είναι τσεκαρισμένο
40
15ο Παράδειγμα – Τύπος γραμματοσειράς
41
Μέγεθος γραμματοσειράς
Συγκεκριμένο κείμενο <font size = "αριθμός μεγέθους"> κείμενο </font> Το κουτάκι να μην είναι τσεκαρισμένο
42
16ο Παράδειγμα - Μέγεθος γραμματοσειράς
43
Χρώμα υπόβαθρου <BODY BGcolor = "#κωδικός χρώματος"> Προσοχή!!!!
44
17ο Παράδειγμα – Χρώμα υπόβαθρου
45
Λίστα με κουκίδες Χωρίς στυλ κουκίδων <ul> </ul>
<li> κείμενο </li> </ul> Με στυλ κουκίδων <ul TYPE = "square">
46
18ο Παράδειγμα – Λίστα με κουκίδες
47
Αριθμημένη λίστα Χωρίς στυλ αρίθμησης <ol> </ol>
<li> κείμενο </li> </ol> Με στυλ αρίθμησης <ol TYPE= "τύπος αρίθμησης" START = "αριθμός εκκίνησης">
48
19ο Παράδειγμα - Αριθμημένη λίστα
49
Απλή λίστα <dl> <dd> κείμενο </dd> </dl>
50
20ο Παράδειγμα - Απλή λίστα
51
Λίστα ορισμών <dl> </dl> <dt> κείμενο </dt>
<dd> κείμενο </dd> </dl>
52
21ο Παράδειγμα – Λίστα ορισμών
53
Υπερσύνδεσμος σε άλλη ιστοσελίδα
<a href = "διεύθυνση ιστοσελίδας"> λέξη σύνδεσμος </a> Url διεύθυνση Λέξη,-εις που θα γίνει σύνδεσμος Προσοχή κατά την εισαγωγή της url Αν είναι επιλεγμένο το θα εισαχθεί δύο φορές
54
Παράδειγμα 22ο – Υπερσύνδεσμος σε άλλη ιστοσελίδα
55
Υπερσύνδεσμος μέσα στην ιστοσελίδα
Στη λέξη σύνδεσμος <a href = "#λέξη στην οποία θα οδηγήσει ο σύνδεσμος"> λέξη σύνδεσμος </a> Στη λέξη που θα οδηγήσει ο σύνδεσμος <a href = "#" name = "λέξη στην οποία θα οδηγήσει ο σύνδεσμος"></a> Λέξη σύνδεσμος Λέξη στην οποία θα οδηγήσει ο σύνδεσμος
56
23ο Παράδειγμα – Υπερσύνδεσμος μέσα στην ιστοσελίδα
Η λέξη «Περικλής» είναι σύνδεσμος που οδηγεί στη λέξη «Ετυμολογία»
57
Υπερσύνδεσμος σε αρχείο
<a href = "διαδρομή αρχείου"> λέξη σύνδεσμος </a>
58
24ο Παράδειγμα - Υπερσύνδεσμος σε αρχείο
59
Χρώμα υπερσυνδέσμου Πριν την επίσκεψη Τη στιγμή της επίσκεψης
<BODY link = "#κωδικός χρώματος"> Τη στιγμή της επίσκεψης <BODY alink= "#κωδικός χρώματος"> Μετά την επίσκεψη <BODY vlink= "#κωδικός χρώματος"> Προσοχή!!!! Ορίζεται μέσα στην ετικέτα BODY
60
25ο Παράδειγμα – Χρώμα υπερσυνδέσμου
61
Εισαγωγή εικόνας στο φόντο
<BODY background = "διαδρομή αρχείου"> Ορίζεται μέσα στο body
62
Απλή εισαγωγή εικόνας Απλή εισαγωγή
<IMG src="file:///..." alt="…" align="…" border="…" hspace="…" vspace="…" width="…" height="…" src: Διαδρομή αρχείου alt: Περιγραφή align: Στοίχιση (left, right, center) border: Πάχος περιγράμματος hspace: Οριζόντιο περιθώριο vspace: Κάθετο περιθώριο width: Πλάτος height: Ύψος
63
26ο Παράδειγμα – Εισαγωγή εικόνας
64
Επίπλευση εικόνας Τοποθετώ την εικόνα πάνω από το κείμενο
Στοιχίζω την εικόνα δεξιά ή αριστερά align = "right" align = "left" Στη συνέχεια εισάγω το κείμενο
65
27ο Παράδειγμα – Επίπλευση εικόνας
66
Κείμενο κάτω από εικόνα
Τοποθετώ την εικόνα πάνω από το κείμενο Στοιχίζω την εικόνα στο κέντρο align = "center" Στη συνέχεια εισάγω το κείμενο
67
28ο – Κείμενο κάτω από εικόνα
68
Αποστολή <a href = mailto: "διεύθυνση ηλεκτρονικού ταχυδρομείου"> λέξη σύνδεσμος </a>
69
29ο – Αποστολή
70
Ήχος στο background <bgsound src = "μονοπάτι αρχείου" loop = "αριθμός επανάληψης"> Αριθμός επαναλήψεων Συνεχής αναπαραγωγή
71
30ο - Ήχος στο background
72
Ενσωμάτωση video <img dynsrc = "διαδρομή αρχείου" loop = "αριθμός επαναλήψεων">
73
31ο – Ενσωμάτωση video
74
Δημιουργία πίνακα <table>
<caption> λεζάντα </caption> <tr> <td> κελί 1.1 </td> <td> κελί 1.2 </td> </tr> <td> κελί 2.1 </td> <td> κελί 2.2 </td> </table>
75
Δημιουργία πίνακα Εισαγωγή λεζάντας Χρώμα κελιού Χρώμα πίνακα
Κάθετη στοίχιση πίνακα Χρώμα κειμένου Διάστημα μεταξύ κελιών και μεταξύ δεδομένων και περιθωρίων Στοίχιση πίνακα Αριθμός στηλών - γραμμών Πλάτος – ύψος πίνακα Μορφή κειμένου Πλάτος – ύψος κελιού Περίγραμμα πίνακα
76
32ο – Δημιουργία πίνακα
Παρόμοιες παρουσιάσεις
