Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Επιμέλεια: Δέγγλερη Σοφία

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "Επιμέλεια: Δέγγλερη Σοφία"— Μεταγράφημα παρουσίασης:

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ο – Δημιουργία πίνακα


Κατέβασμα ppt "Επιμέλεια: Δέγγλερη Σοφία"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google