Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία"

Λυσιμάχη Αγγελίδου
7 χρόνια πριν
Προβολές:

1 Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία

2 Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι

3 Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από Ορατό τμήμα κειμένου Συνήθως υπογραμμισμένο Μη ορατό μέρος Πληροφορία για το πού θα βρεθεί η πληροφορία που αντιστοιχεί στο υπογραμμισμένο κείμενο

4 HTML HyperText Markup Language Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα για τη δημιουργία εγγράφων υπερκειμένου

5 EasyHTML Λογισμικό για δημιουργία ιστοσελίδων EHtml2_4 Download m#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 4 o παράδειγμα - Παράγραφος

16 Αλλαγή γραμμής <br> Δεν κλείνει με </br> Τοποθετείται Είτε στο τέλος μιας γραμμής Είτε σε καινούρια γραμμή Αν στον πηγαίο κώδικα αλλάξω γραμμή με Enter Το κείμενο εμφανίζεται σε μία γραμμή στον browser

17 5 o παράδειγμα Χωρίς <br>

18 5 o παράδειγμα Με <br>

19 Απλές μορφοποιήσεις Πλάγια <i> κείμενο </i> Έντονα <b> κείμενο </b> <strong> κείμενο </strong> Υπογραμμισμένα <u> κείμενο </u> Διαγραμμένα <s> κείμενο </s> Πολλές μορφοποιήσεις μαζί <b> <i> <u> κείμενο </b> </i> </u>

20 6 ο παράδειγμα Απλές μορφοποιήσεις

21 Άλλες μορφοποιήσεις (1/3) Μέγεθος χαρακτήρων Εξ ορισμού <basefont> κείμενο <basefont> Μεγάλου μεγέθους <big> κείμενο </big> Μικρού μεγέθους <small> κείμενο </small>

22 Άλλες μορφοποιήσεις (2/3) Δείκτης <sub> κείμενο </sub> Εκθέτης <sup> κείμενο </sup>

23 Άλλες μορφοποιήσεις (3/3) Γραμματοσειρά γραφομηχανής <tt> κείμενο </tt> Μία κενή γραμμή πριν και μετά το κείμενο με γραμματοσειρά Courier <pre> κείμενο </pre> Οριζόντια γραμμή και αλλαγή γραμμής <hr>

24 7 o παράδειγμα Άλλες μορφοποιήσεις

25 Κενά Περισσότερα του ενός κενού θεωρούνται ένα Εισαγωγή περισσότερων του ενός κενού Εισαγωγή 3 κενών &nbsp

26 8 o παράδειγμα Κενά

27 Στοίχιση Κείμενο στο κέντρο <center> κείμενο </center> Παράγραφος αριστερά <p align = "left"> κείμενο </p> Παράγραφος στο κέντρο <p align = "center"> κείμενο </p> Παράγραφος δεξιά <p align = "right"> κείμενο </p> Πλήρης στοίχιση παραγράφου <p align= "justify"> κείμενο </p>

28 9 o παράδειγμα - Στοίχιση

29 Περιθώρια και Κενά Τμήμα κειμένου ξεχωρίζει σαν παράγραφος Εμφανίζεται πιο μέσα από το υπόλοιπο κείμενο <blockquote> κείμενο </blockquote>

30 10 o παράδειγμα Περιθώρια και Κενά

31 Περισσότερα Περιθώρια και Κενά Πολλά blockquote Περισσότερα από 3 είναι υπερβολικά Κείμενο <blockquote> Κείμενο <blockquote> Κείμενο </blockquote>

32 11 o παράδειγμα Περιθώρια και Κενά

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 = "#κωδικός χρώματος"> Προσοχή!!!! Ορίζεται μέσα στην ετικέτα BODY

44 17 ο Παράδειγμα Χρώμα υπόβαθρου

45 Λίστα με κουκίδες Χωρίς στυλ κουκίδων <ul> <li> κείμενο </li> <li> κείμενο </li> </ul> Με στυλ κουκίδων <ul TYPE = "square"> <li> κείμενο </li> <li> κείμενο </li> </ul>

46 18 ο Παράδειγμα Λίστα με κουκίδες

47 Αριθμημένη λίστα Χωρίς στυλ αρίθμησης <ol> <li> κείμενο </li> <li> κείμενο </li> </ol> Με στυλ αρίθμησης <ol TYPE= "τύπος αρίθμησης" START = "αριθμός εκκίνησης"> <li> κείμενο </li> <li> κείμενο </li> </ol>

48 19 ο Παράδειγμα - Αριθμημένη λίστα

49 Απλή λίστα <dl> <dd> κείμενο </dd> <dd> κείμενο </dd> </dl>

50 20 ο Παράδειγμα - Απλή λίστα

51 Λίστα ορισμών <dl> <dt> κείμενο </dt> <dd> κείμενο </dd> <dt> κείμενο </dt> </dl> <dd> κείμενο </dd>

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> <tr> <td> κελί 2.1 </td> <td> κελί 2.2 </td> </tr> </table>

75 Δημιουργία πίνακα Εισαγωγή λεζάντας Κάθετη στοίχιση πίνακα Διάστημα μεταξύ κελιών και μεταξύ δεδομένων και περιθωρίων Πλάτος ύψος πίνακα Μορφή κειμένου Χρώμα κελιού Χρώμα πίνακα Χρώμα κειμένου Στοίχιση πίνακα Αριθμός στηλών - γραμμών Πλάτος ύψος κελιού Περίγραμμα πίνακα

76 32 ο Δημιουργία πίνακα

Σχετικά έγγραφα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο