Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Transcript

1

3 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: Εισαγωγή Μάθημα 2: Κειμενογράφοι Text Editors Μάθημα 3: Εγκατάσταση Text Editor Μάθημα 4: Ιστορική Αναδρομή HTML Μάθημα 5: Σύνολο Tags Μαθημάτων Μάθημα 6: Εύρεση & Εγκατάσταση Google Chrome Μάθημα 7: Σύνδεση Text Editor με το φυλλομετρητή Μάθημα 8: Tags Έναρξης & Λήξης Μάθημα 9: Ετικέτα DOCTYPE Μάθημα 10: Ετικέτα HTML Μάθημα 11: Ετικέτα HEAD Μάθημα 12: Ετικέτα ΜΕΤΑ Μάθημα 13: Ετικέτα TITLE Μάθημα 14: Η χρησιμότητα του utf8 Μάθημα 15: Ετικέτα BODY Μάθημα 16: Ετικέτες Η1 έως Η6 Μάθημα 17: Ετικέτα PARAGRAPH Μάθημα 18: Break Line Αλλαγή Γραμμής Μάθημα 19: HorizontalR Οριζόντια Γραμμή Μάθημα 20: Μορφοποίηση HorizontalR Μάθημα 21: Προσθήκη Σχολίου Μάθημα 22: Πλάγια Γραφή Italic Text Μάθημα 23: Έντονη Γραφή Bold Text Μάθημα 24: Typewriter Copyright SYSTEM- All rights reserved 3/200

4 Μάθημα 25: Ετικέτες Small & Big Μάθημα 26: Ετικέτα Διεύθυνσης - Address Μάθημα 27: Ετικέτα Acronym Μάθημα 28: Ετικέτα Σύντμησης - ABBR Μάθημα 29: Ετικέτα BDO Μάθημα 30: Ετικέτα BLOCKQUOTE Μάθημα 31: Ετικέτα EM Μάθημα 32: Ετικέτα STRONG Μάθημα 33: Ετικέτα DFN Μάθημα 34: Ετικέτα CODE Μάθημα 35: Ετικέτα SAMP Μάθημα 36: Ετικέτα KBD Μάθημα 37: Ετικέτες VAR & CITIES Μάθημα 38: Διακριτή Διαγραφή Μάθημα 39: Υπογράμμιση Κειμένου Μάθημα 40: Ετικέτα PRE Μάθημα 41: Προσθήκη Αγγλικών Εισαγωγικών Μάθημα 42: Δείκτης Μάθημα 43: Εκθέτης Μάθημα 44: Ετικέτα Form Μάθημα 45: Ετικέτα Input Μάθημα 46: Ετικέτα Input Text Μάθημα 47: Ετικέτα Password Μάθημα 48: Κουμπί Επιλογής - Radio Μάθημα 49: Κουμπιά Επιλογών - Checkbox Μάθημα 50: Κουμπί File Copyright SYSTEM- All rights reserved 4/200

5 Μάθημα 51: Κουμπί Επαναφοράς - Reset Μάθημα 52: Κουμπί Αποστολής - Button Μάθημα 53: Κουμπί Υποβολής - Submit Μάθημα 54: Κουμπί Εικόνας για Υποβολή Μάθημα 55: Ετικέτα Hidden Ετικέτα FIELDSET Μάθημα 65: Ετικέτα LEGEND Μάθημα 66: Εισαγωγή Εικόνας Μάθημα 67: Α_HREF Μάθημα 68: Ετικέτα UL_LI (Δημιουργία Λίστας με Κουκκίδες) Μάθημα 56: Ετικέτα TextArea Μάθημα 57: Ετικέτα TextArea Disable Μάθημα 58: Ετικέτα TextArea Readonly Μάθημα 59: Αναπτυσσόμενη Λίστα Μάθημα 60: Λίστα Πολλαπλής επιλογής Μάθημα 61: Ετικέτα Slect Size Μάθημα 62: Ετικέτα Select Option Μάθημα 63: Ετικέτα Select Option Group Μάθημα 69: Ετικέτα OL_LI (Δημιουργία Λίστας με Αριθμούς) Μάθημα 70: Ετικέτες DL_DT_DD Μάθημα 71: Ετικέτα Table (Δημιουργία Πίνακα) Μάθημα 72: Table Cellpadding Μάθημα 73: Table Frame_Box_Boarder_VOID (Πλαίσια Πίνακα) Μάθημα 74: Table Above - Below Μάθημα 75: Table Vsides-Hsides Μάθημα 64: Μάθημα 76: Copyright SYSTEM- All rights reserved 5/200

6 Table Lhsides-Rhsides Μάθημα 77: Table Rules_Rows_Cells Μάθημα 78: Table Rules_None_All_Groups Μάθημα 79: Rules Summary (Αναγνώστες Οθόνης) Μάθημα 83: Link CSS Μάθημα 84: Style Μάθημα 80: Table width height Μάθημα 81: Table CellSpacing Μάθημα 82: Table Caption (Προσθήκη Λεζάντας σε πίνακα) Μάθημα 85: Ετικέτα DIV Μάθημα 85: Ετικέτα Span Copyright SYSTEM- All rights reserved 6/200

7 ΚΕΦΑΛΑΙΟ 1 o ΕΙΣΑΓΩΓΗ Τι είναι η HTML Η HTML είναι η γλώσσα σήμανσης με την οποία κατασκευάζουμε ιστοσελίδες. Τα αρχικά HTML σημαίνουν HyperTextMarkup Language. Σκοπός των browser είναι να διαβάζουν τα έγγραφα HTML και να τα εμφανίζουν ως ιστοσελίδες. Οι browsers (όπως οι Mozilla Firefox, Google Chrome, Opera, Internet Explorer και αρκετοί άλλοι) διαβάζουν τα αρχεία αυτά και εμφανίζουν το αποτέλεσμα του κώδικα HTML στην οθόνη μας. Γλώσσα σήμανσης είναι μια περιγραφική γλώσσα. Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Κατασκευή σελίδων με κώδικα HTML ή με αυτόματα προγράμματα; H κατασκευή web σελίδων μπορεί να επιτευχθεί με δύο πολύ διαφορετικούς τρόπους: 1. Ο εύκολος: Δηλαδή, να χρησιμοποιηθεί ένα αυτόματο πρόγραμμα όπως το Frontpage για να σχεδιαστεί η σελίδα με τρόπο ανάλογο της δημιουργίας ενός εγγράφου στο word. 2. Ο δύσκολος: Δηλαδή, να δημιουργηθούν τα πάντα από το μηδέν με τη χρήση κώδικα HTML. Τα πλεονεκτήματα του εύκολου τρόπου είναι: 1. Ταχύτητα εκμάθησης - Ο χρήστης μπορεί να δημιουργήσει τις πρώτες του σελίδες μέσα σε μερικές ώρες. 2. Ταχύτητα λειτουργίας - Ένα site μπορεί να κατασκευαστεί σε πολύ μικρό χρονικό διάστημα. 3. Ταχύτητα ανανέωσης - Το πρόγραμμα φροντίζει για την αυτόματη ενημέρωση των web σελίδων του server με όλες τις αλλαγές που έχουν γίνει μετά την τελευταία ανανέωση. Τα πλεονεκτήματα του δύσκολου τρόπου είναι: 1. Σελίδες που φορτώνουν πιο γρήγορα - Τα αυτόματα προγράμματα τοποθετούν συχνά άχρηστο κώδικα που μπερδεύει τον browser και καθυστερεί την εμφάνιση της σελίδας (π.χ. table rendering) 2. Μεγαλύτερη αξιοπιστία - Όπως κάθε λογισμικό, έτσι και τα προγράμματα κατασκευής σελίδων δεν είναι 100% WYSIWYG (What you see is what you get). Το τελικό αποτέλεσμα που μας παρουσιάζουν λοιπόν δεν είναι πάντοτε ακριβώς το ίδιο με αυτό που θα δει ο επισκέπτης της σελίδας μας. 3. Εξυπνότερη σχεδίαση - Μας είναι ευκολότερο να δημιουργήσουμε σελίδες που θα προσαρμόζονται αυτόματα στις ιδιαιτερότητες της οθόνης κάθε χρήστη (π.χ. χρησιμοποιώντας ποσοστά αντί για απόλυτες τιμές στο πλάτος των tables). Copyright SYSTEM- All rights reserved 7/200

8 4. Καλύτερος έλεγχος του αποτελέσματος - Κάθε αυτόματο πρόγραμμα αποτελεί ουσιαστικά έναν μεταφραστή που μετατρέπει τη σχεδίαση και τις επιθυμίες μας σε γλώσσα HTML. Καμία μετάφραση όμως δεν είναι άψογη (ειδικά αν γίνεται από υπολογιστή) και πολλά σημαντικά στοιχεία κινδυνεύουν να απαλειφθούν από το τελικό αποτέλεσμα. 5. Υψηλότερη ευελιξία - Μπορούμε να χρησιμοποιήσουμε το σύνολο των δυνατοτήτων της γλώσσας HTML, ενώ κάθε αυτόματο πρόγραμμα υποστηρίζει μόνο ένα υποσύνολο αυτών. 6. Ευκολότερη επίλυση προβλημάτων (debugging) - Επειδή κατανοούμε απόλυτα τις ιδιομορφίες και τα χαρακτηριστικά της σελίδας που δημιουργήσαμε, μπορούμε να βρούμε ευκολότερα και να διορθώσουμε τα όποια προβλήματα εμφανιστούν σε αυτήν (π.χ. ασυμβατότητα με κάποιους browsers). 7. Επέκταση σε άλλα γνωστικά αντικείμενα - Όποιος γνωρίζει κώδικα HTML μπορεί πολύ ευκολότερα να κατανοήσει και να αξιοποιήσει άλλες τεχνολογίες όπως XML, scripting κ.λπ. Οι περισσότεροι άνθρωποι προτιμούν τα αυτόματα προγράμματα δημιουργίας σελίδων (τον εύκολο τρόπο δηλαδή) επειδή τα πλεονεκτήματά τους είναι προφανή και άμεσης απόδοσης. Το γεγονός όμως ότι όλοι οι καλοί επαγγελματίες web designers γνωρίζουν και χρησιμοποιούν τόσο κώδικα όσο και αυτόματα προγράμματα υποδεικνύει τη μεγάλη χρησιμότητα και των δύο προσεγγίσεων. Αν λοιπόν η επαφή σας με τον χώρο είναι περιστασιακή (π.χ. κατασκευή μερικών προσωπικών σελίδων) προτιμήστε την εύκολη λύση. Αν ενδιαφέρεστε επαγγελματικά για web design είναι υποχρεωτικό να τις γνωρίζετε και τις δύο. Αν είστε ή θέλετε να γίνετε προγραμματιστής και έχετε σκοπό να συνδέσετε web σελίδες με άλλες εφαρμογές (π.χ. βάσεις δεδομένων) αρκεστείτε στον κώδικα HTML. Copyright SYSTEM- All rights reserved 8/200

9 ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι είναι η HTML; Α. Γλώσσα σήμανσης. B. Γλώσσα για τη δημιουργία κινούμενων εικόνων & γραφικών. Γ. Τίποτε από τα παραπάνω. Δ. Όλα τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Γλώσσα σήμανσης. 2 ον Από ποιες λέξεις προκύπτουν τα αρχικά HTML; Α. Hyper Transfer Markup Language. Β. Hyper Text Missing Language. Γ. Hyper Text Markup Language. Δ. Hyper Transfer Missing Locket. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Hyper Text Markup Language 3 ον Τι είναι η ετικέτα; Α. Ετικέτες με λέξεις που χαρακτηρίζουν το δημιουργό. Β. Λέξεις κλειδιά που περιβάλλονται από αγκύλες. Γ. Ετικέτες με το όνομα του Site. Δ. Τίποτε από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι το Β. Λέξεις κλειδιά που περιβάλλονται από αγκύλες. 4 ον Ποιος είναι ο σκοπός του browser; Α. Να δημιουργεί ιστοσελίδες. Β. Να διαβάζει τα κείμενα των ιστοσελίδων. Γ. Να βάζει ετικέτες στις ιστοσελίδες. Δ. Να διαβάζει τα έγγραφα HTML και να τα εμφανίζει ως ιστοσελίδες. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι το Δ. Να διαβάζει τα έγγραφά HTML και να τα εμφανίζει ως ιστοσελίδες. Copyright SYSTEM- All rights reserved 9/200

10 ΚΕΦΑΛΑΙΟ 2 ο ΚΕΙΜΕΝΟΓΡΑΦΟΣ - TEXT EDITORS Για να κατεβάσετε τον Sublime Text, ανοίγετε έναν browser στη συνέχεια στην γραμμή διεύθυνσης πληκτρολογείτε Τι είναι το Sublime Text, είναι ο Editor που θα χρησιμοποιήσουμε στα μαθήματά μας. Μπορούμε να επεξεργαζόμαστε τα ίδια γνωστικά στοιχεία & σε mac & σε PC ταυτόχρονα, με τον Sublime Text 14 τελευταία έκδοση. Πώς κατασκευάζεται μια απλή Web σελίδα. Μία Web Σελίδα είναι ένα text αρχείο. Για τον λόγο αυτό μπορούμε να χρησιμοποιήσουμε οποιοδήποτε πρόγραμμα μας δίνει την δυνατότητα να παράγουμε text αρχεία. Αρχικά σας προτείνουμε να χρησιμοποιήσετε το notepad (σημειωματάριο) των Windows. Αν θέλετε να χρησιμοποιήσετε το Word for Windows μην ξεχάσετε πως το αρχείο πρέπει να σωθεί σε μορφή txt και όχι doc. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ποιόν Text Editor θα χρησιμοποιήσουμε στα μαθήματά μας; Α. Notepad Β. Sublime Text Γ. JEdit Δ. Κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι B. Sublime Text. 2 ον Μπορείτε να επεξεργάζεστε τα ίδια γνωστικά στοιχεία ταυτόχρονα και σε PC και σε MAC με τον Sublime Text; Α. Ναι Β. Όχι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Ναι. 3 ον Ποια είναι η σωστή διεύθυνση για να κατεβάσετε το Sublime Text; Α. Β. Γ. Δ. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Copyright SYSTEM- All rights reserved 10/200

11 ΚΕΦΑΛΑΙΟ 3 o ΕΓΚΑΤΑΣΤΑΣΗ TEXT EDITOR SUBLIME 1 η επιλογή χρήση του Text Editor Sublime. Εγκατάσταση Text Editor Sublime. Πατήστε 2κλικ πάνω στο αρχείο Sublime Text 1.4 Set up. Exe, επιλέξτε Εκτέλεση / Αποδοχή (Accept), Next /Next/Install 2 η επιλογή χρήση του Σημειωματάριου (Notepad). Πατώντας έναρξη/όλα τα προγράμματα/βοηθήματα/σημειωματάριο. Για να δημιουργήσετε ένα νέο αρχείο πατήστε / Δημιουργία /Έγγραφο κειμένου (Notepad) αν δεν θέλετε editor του εμπορίου. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Αν δε θέλετε κάποιον editor του εμπορείου, μπορείτε να χρησιμοποιήσετε: Α. Το Access Β. Το Dreamweaver Γ. Το Word Δ. Το Notepad ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Το Notepad 2 ον Σε τι αναφέρετε ο όρος αντικείμενο; Α. Στην Ιστοσελίδα Β. Στη σελίδα του κειμενογράφου Γ. Στο πρόγραμμα του Sublime Text Δ. Σε κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Στην Ιστοσελίδα. 3 ον Ένα Web Site αποτελείτε από Α. Πολλές Σελίδες Β. Πολλές Ιστοσελίδες Γ. Πολλά κείμενα Δ. Τίποτε από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Πολλές Ιστοσελίδες. 4 ον Κάντε εγκατάσταση του προγράμματος Sublime Text. Copyright SYSTEM- All rights reserved 11/200

12 ΑΠΑΝΤΗΣΗ. Διπλό κλικ στο εικονίδιο Sublime Text 1.4 Set up.exe/ πατήστε στο Εκτέλεση και κάντε Αποδοχή (Accept)/ Next/ Next/ Install και αφήστε να ολοκληρωθεί η διαδικασία εγκατάστασης. ΚΕΦΑΛΑΙΟ 4 o ΙΣΤΟΡΙΚΗ ΑΝΑΔΡΟΜΗ HTML HTML (Hyper text Mark up language ). Η HTML πρωτοεμφανίστηκε το (1991), σήμερα είμαστε στην HTML 5. Ο τρόπος με τον οποίο οι browsers απεικονίζουν τα αρχεία πολυμέσων. Αρχεία πολυμέσων είναι Εικόνες, Βίντεο, Ήχος. Η HTML 5 κρατά ετικέτες της HTML 4. Συντάκτες της HTMLS: Ίαν Χίξον (Google) και Ντέιβ Χαϊατ (Apple). Η HTML Δεν απαιτεί plugin της Adope Flash Player ή Ms silver write, για να παίξει ένα video. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Πότε πρωτοεμφανίστηκε η HTML Α Β Γ Δ ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ ον Ποιοι είναι οι συντάκτες της HTML; Α. Ιάν Χίξον (εταιρείας Google) Β. Ντέιβ Χάϊτ (εταιρείας Apple) Γ. Και οι δύο Δ. Κανένας από τους δύο ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Και οι δύο. 3 ον Τι είναι τα αρχεία Πολυμέσων; Α. Αρχεία Εικόνας, ήχου και βίντεο Β. Αρχεία Ήχου και κειμένου Γ. Αρχεία Βίντεο κειμένου Δ. Τίποτε από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Αρχεία Εικόνας, ήχου και βίντεο. 4 ον Ποια είναι η τελευταία έκδοση της HTML Copyright SYSTEM- All rights reserved 12/200

13 Α. HTML 4.2 Β. HTML 4 Γ. HTML5 Δ. HTML6 ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. HTML 5. ΚΕΦΑΛΑΙΟ 5 o ΣΥΝΟΛΟ TAGS (ΜΑΘΗΜΑΤΩΝ) Μορφοποίηση Φόρμες Έντυπα Πλαίσια Εικόνες Συνδέσμους Λίστες Πίνακες Copyright SYSTEM- All rights reserved 13/200

14 ΚΕΦΑΛΑΙΟ 6 o ΕΥΡΕΣΗ ΚΑΙ ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GOOGLE CHROME Για την Λήψη Google Chrome, ανοίγετε έναν browser στη συνέχεια πληκτρολογείτε, Google Chrome, στο παράθυρο εμφανίζεται, πατήστε στο κουμπί Λήψη Google Chrome / αποδοχή και εγκατάσταση. Ο Chrome και ο Mozilla αναγνωρίζουν HTML5. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ο Google Chrome ή ο Mozilla αναγνωρίζουν την HTML 5; Α. Ο Google Chrome Β. Ο Mozilla Γ. Και οι δύο Δ. Κανένας από τους δύο ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Και οι δύο 2 ον Κάντε λήψη και εγκατάσταση του Google Chrome. ΑΠΑΝΤΗΣΗ. Μπείτε στη σελίδα της Google/ στην αναζήτηση πληκτρολογήστε Google Chrome και πατήστε Αναζήτηση/ Πατήστε στο σύνδεσμο Λήψη του Google Chrome/ Λήψη/ Αποδοχή & Εγκατάσταση. Περιμένετε να ολοκληρωθεί η εγκατάσταση. Copyright SYSTEM- All rights reserved 14/200

15 ΚΕΦΑΛΑΙΟ 7 o ΣΥΝΔΕΣΗ TEXT EDITOR ΜΕ ΤΟ ΦΥΛΛΟΜΕΤΡΗΤΗ Άνοιγμα του φυλλομετρητή Google Chrome και Άνοιγμα ενός editor. Πατώντας δεξί κλικ πάνω σε ένα αρχείο και άνοιγμα ανοίγει με Sublime-open-αρχείο ή δεξί open-google Chrome. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ανοίξτε το Sublime Text και ανοίξτε το αρχείο M_07.html που υπάρχει στο φάκελο HTML και στον υποφάκελο M_07. Στη συνέχεια, μεταφερθείτε στη γραμμή 8 δίπλα στην ετικέτα <body> και προσθέστε τη φράση Χρώματα Ίριδος. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ HTML / M_07 / επιλέξτε το αρχείο M_07.html/ Άνοιγμα. Στη συνέχεια, μεταφερθείτε στη γραμμή 8, πατήστε δίπλα από την ετικέτα <body> και πληκτρολογήστε τη φράση Χρώματα Ίριδος. 2 ον Αποθηκεύστε τις αλλαγές στο αρχείο και ανοίξτε το αρχείο _07.html που υπάρχει στο φάκελο HTML και στον υποφάκελο M_07, μέσα από τον Google Chrome. ΑΠΑΝΤΗΣΗ. Eντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ HTML / M_07 / επιλέξτε το αρχείο M_07.html/ δεξί πάτημα/ Άνοιγμα με../ Google Chrome.. Copyright SYSTEM- All rights reserved 15/200

16 3 ον Στο παράθυρο του Sublime Text, προσθέστε στη γραμμή 9 Στο χωρίο Σταυρός της Κέρκυρας υπάρχει ένας μικρός ξενώνας με το όνομα "Χρώματα Ιριδας". Βεβαιωθείτε ότι η αλλαγή είναι ορατή και στον Google Chrome. ΑΠΑΝΤΗΣΗ. Στο παράθυρο Sublime Text, μεταφερθείτε στη γραμμή 9 και συμπληρώστε Στο χωρίο Σταυρός της Κέρκυρας υπάρχει ένας μικρός ξενώνας με το όνομα "Χρώματα Ιριδας"/ πατήστε στο κουμπί Αποθήκευση. Στη συνέχεια, εντοπίστε το αρχείο από το USB, ανοίξτε το με Google Chrome δείτε τα αποτελέσματα. 4 ον Στο παράθυρο του Sublime Text, προσθέστε στη γραμμή 10, τη φράση Ο μικρός Ξενώνας αποτελείτε από 3 δωμάτια και ένα χάνι (μικρό ταβερνάκι)". Αποθηκεύστε το αρχείο Sublime text ως Μ_07 ΤΕΛΙΚΟ.html στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Στο παράθυρο Sublime Text, μεταφερθείτε στη γραμμή 10 και συμπληρώστε Ο μικρός Ξενώνας αποτελείται από 3 δωμάτια και ένα χάνι (μικρό ταβερνάκι)"/ πατήστε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. 5 ον Βεβαιωθείτε ότι η αλλαγή είναι ορατή και στον Google Chrome. ΑΠΑΝΤΗΣΗ. Εντοπίστε το αρχείο από το USB, ανοίξτε το με Google Chrome δείτε τα αποτελέσματα. Copyright SYSTEM- All rights reserved 16/200

17 ΚΕΦΑΛΑΙΟ 8 o ΤΙ ΕΙΝΑΙ ΤΑ TAGS ΕΝΑΡΞΗΣ & ΛΗΞΗΣ Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων < και >. Π.χ. η οδηγία για να γίνει ένα κείμενο bold είναι: <b> το κείμενο που θα είναι bold </b>. Αυτό ερμηνεύεται ως: <b> = (ότι βρεις από δω και πέρα θα το παρουσιάζεις σαν bold) ετικέτα αρχής </b> = (σταματάς να κάνεις bold ότι βρεις από δω και κάτω) ετικέτα τέλους Οι οδηγίες δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία (είναι case insensitive). Δηλαδή οι οδηγίες <title> και <TITLE> είναι ισοδύναμες. Tags (ετικέτες ) = ειδικοί κώδικες που περιλαμβάνουν το οπτικό αποτέλεσμα που είναι ορατό στη σελίδα σας. Περικλείονται από αγκύλες < >.Γενική Μορφή: ετικέτα έναρξης <h1> κύριο σώμα κειμένου </h1> Ετικέτα κλεισίματος έχει πάντα την / που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα. Γράφετε λατινικά μικρά είτε κεφαλαία. Αγνοεί ετικέτες που δεν αναγνωρίζει. Attributes (Ιδιότητες) των ετικετών είναι τιμές που δίνουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά. ΠΧ <html xmlns = http: // > Copyright SYSTEM- All rights reserved 17/200

18 ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι είναι οι ετικέτες (Tags); Α. Ετικέτες του Site Β. Κώδικες που περιλαμβάνουν τα ονόματα του Site Γ. Κώδικες που περιλαμβάνουν το οπτικό αποτέλεσμα που είναι ορατό στη σελίδα σας. Δ. Κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Κώδικες που περιλαμβάνουν το οπτικό αποτέλεσα που είναι ορατό στη σελίδα σας. 2 ον Οι ετικέτες περικλείονται από Α. Αγκύλες Β. Παρενθέσεις Γ. Εισαγωγικά Δ. Ερωτηματικά ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Αγκύλες. 3 ον Τι είναι η ετικέτα κλεισίματος; Α. Ετικέτα που ορίζει το τέλος του κειμένου Β. Κώδικας που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα Γ. Ετικέτα για να ορίσετε το όνομα του Site. Δ. Τίποτε από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Κώδικας που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα. 4 ον Έχετε τη δυνατότητα να πληκτρολογήσετε τις ετικέτες κεφαλαία και πεζά; Α. Ναι Β. Όχι ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Ναι. Copyright SYSTEM- All rights reserved 18/200

19 ΚΕΦΑΛΑΙΟ 9 o DOCTYPE (<! DOCTYPE) Η DOCTYPE δεν είναι απαραίτητη διότι απλά ενημερώνει τους φυλλομετρητές σε ποια έκδοση είναι γραμμένη η στοίβα εντολών. DOCTYPE = αναφέρεται στα αρχεία (DTD) document type definition καθορίζεται πριν το κύριο κώδικα. Η DOCTYPE δεν έχει ετικέτα τέλους. Πληκτρολογείτε την δήλωση: <! DOCTYPE<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML4.01 Transitional// EN http: //www. W3. Org (TR/ html4/strict.dtd > ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι είναι η ετικέτα DOCTYPE; Α. Κώδικας που λέει στον Browser ποιος έχει δημιουργήσει το Site. Β. Κώδικας που λέει στον Browser πότε σταματάει η ετικέτα. Γ. Κώδικας που λέει στον Browser για ποια έκδοση είναι γραμμένη η στοίβα εντολής. Δ. Τίποτε από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι το Γ. Κώδικας που λέει στον Browser για ποια έκδοση είναι γραμμένη η στοίβα εντολής. 2 ον Η DOCTYPE σε ποια αρχικά αναφέρεται; Α. DTP Β. PDB Γ. DPD Δ. DTD ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. DTD. 3 ον Τι σημαίνουν τα αρχικά DTD; Α. Department Type Definition Β. Definition Type Document Γ. Document Type Definition Δ. Department To Document ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Document Type Definition. 4 ον Σε ποιο σημείο καθορίζεται η ετικέτα DOCTYPE; Copyright SYSTEM- All rights reserved 19/200

20 Α. Πριν τον κύριο κώδικα Β. Στο τέλος του κύριου κώδικα ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Πριν τον κύριο κώδικα. 5 ον Ανοίξτε το αρχείο M_09.html, που υπάρχει στο φάκελο HTML και στον υποφάκελο M_09, από το πρόγραμμα Sublime Text. Στη συνέχεια, πριν τον κύριο κώδικά προσθέστε τον κώδικα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ HTML / M_09 / επιλέξτε το αρχείο M_09.html/ Άνοιγμα. Στη συνέχεια, μεταφερθείτε στη γραμμή με τον αριθμό 1 και πληκτρολογήστε τον κώδικα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 6 ον Αποθηκεύστε το αρχείο Sublime text ως Μ_09 ΤΕΛΙΚΟ.html στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. Copyright SYSTEM- All rights reserved 20/200