Sample html

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

www.facetoface.gr ΑΘΗΝΑ: ΚΑΝΙΓΓΟΣ 13 ΤΗΛ.: 2103803806 ΔΑΦΝΗ: ΑΒΕΡΩΦ 48 ΤΗΛ.: 210 9761101

ΜΑΡΟΥΣΙ: ΔΗΜΗΤΡΟΣ 3 ΤΗΛ.: 210 8026216

Copyright© 2009-2012 -SYSTEM- All rights reserved 2/200





ΠΕΡΙΕΧΟΜΕΝΑ

Μάθημα 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





Μάθημα 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





Μάθημα 51: Κουμπί Επαναφοράς - Reset

Μάθημα 52:

Κουμπί Αποστολής - Button

Μάθημα 53: Κουμπί Υποβολής - Submit

Μάθημα 54:

Κουμπί Εικόνας για Υποβολή

Μάθημα 55: Ετικέτα Hidden

Μάθημα 56:

Ετικέτα TextArea

Μάθημα 57: Ετικέτα TextArea Disable

Μάθημα 58:

Ετικέτα TextArea Readonly Μάθημα 59:

Αναπτυσσόμενη Λίστα Μάθημα 60:

Λίστα Πολλαπλής επιλογής

Μάθημα 61: Ετικέτα Slect Size

Μάθημα 62:

Ετικέτα Select Option

Μάθημα 63: Ετικέτα Select Option Group

Μάθημα 64:

Ετικέτα FIELDSET Μάθημα 65:

Ετικέτα LEGEND Μάθημα 66:

Εισαγωγή Εικόνας

Μάθημα 67: Α_HREF

Μάθημα 68:

Ετικέτα UL_LI (Δημιουργία Λίστας με Κουκκίδες)

Μάθημα 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

Μάθημα 76:





Table Lhsides-Rhsides

Μάθημα 77: Table Rules_Rows_Cells

Μάθημα 78:

Table Rules_None_All_Groups Μάθημα 79:

Rules Summary (Αναγνώστες Οθόνης)

Μάθημα 80:

Table width – height Μάθημα 81:

Table CellSpacing Μάθημα 82:

Table Caption (Προσθήκη Λεζάντας σε πίνακα)

Μάθημα 83: Link CSS

Μάθημα 84:

Style

Μάθημα 85: Ετικέτα DIV

Μάθημα 85:

Ετικέτα Span





ΚΕΦΑΛΑΙΟ 1o ΕΙΣΑΓΩΓΗ

Τι είναι η 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).





4. Καλύτερος έλεγχος του αποτελέσματος - Κάθε αυτόματο πρόγραμμα αποτελεί ουσιαστικά έναν μεταφραστή που μετατρέπει τη σχεδίαση και τις επιθυμίες μας σε γλώσσα HTML. Καμία μετάφραση όμως δεν είναι άψογη (ειδικά αν γίνεται από υπολογιστή) και πολλά σημαντικά στοιχεία κινδυνεύουν να απαλειφθούν από το τελικό αποτέλεσμα.

5. Υψηλότερη ευελιξία - Μπορούμε να χρησιμοποιήσουμε το σύνολο των δυνατοτήτων της γλώσσας HTML, ενώ κάθε αυτόματο πρόγραμμα υποστηρίζει μόνο ένα υποσύνολο αυτών.

6. Ευκολότερη επίλυση προβλημάτων (debugging) - Επειδή κατανοούμε απόλυτα τις ιδιομορφίες και τα χαρακτηριστικά της σελίδας που δημιουργήσαμε, μπορούμε να βρούμε ευκολότερα και να διορθώσουμε τα όποια προβλήματα εμφανιστούν σε αυτήν (π.χ. ασυμβατότητα με κάποιους browsers).

7. Επέκταση σε άλλα γνωστικά αντικείμενα - Όποιος γνωρίζει κώδικα HTML μπορεί πολύ ευκολότερα να κατανοήσει και να αξιοποιήσει άλλες τεχνολογίες όπως XML, scripting κ.λπ.

Οι περισσότεροι άνθρωποι προτιμούν τα αυτόματα προγράμματα δημιουργίας σελίδων (τον εύκολο τρόπο δηλαδή) επειδή τα πλεονεκτήματά τους είναι προφανή και άμεσης απόδοσης. Το γεγονός όμως ότι όλοι οι καλοί επαγγελματίες web designers γνωρίζουν και χρησιμοποιούν τόσο κώδικα όσο και αυτόματα προγράμματα υποδεικνύει τη μεγάλη χρησιμότητα και των δύο προσεγγίσεων.

Αν λοιπόν η επαφή σας με τον χώρο είναι περιστασιακή (π.χ. κατασκευή μερικών προσωπικών σελίδων) προτιμήστε την εύκολη λύση.

Αν ενδιαφέρεστε επαγγελματικά για web design είναι υποχρεωτικό να τις γνωρίζετε και τις δύο.

Αν είστε ή θέλετε να γίνετε προγραμματιστής και έχετε σκοπό να συνδέσετε web σελίδες με άλλες εφαρμογές (π.χ. βάσεις δεδομένων) αρκεστείτε στον κώδικα HTML.





ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 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 και να τα εμφανίζει ως ιστοσελίδες.





ΚΕΦΑΛΑΙΟ 2ο ΚΕΙΜΕΝΟΓΡΑΦΟΣ - TEXT EDITORS

Για να κατεβάσετε τον Sublime Text , ανοίγετε έναν browser στη συνέχεια στην γραμμή διεύθυνσης πληκτρολογείτε www.sublimetext.com/download Τι είναι το 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; Α. www.subtext.gr Β. www.sublime.com Γ. www.sublimetext.com Δ. www.texteditorsublime.com Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. www.sublimetext.com.





ΚΕΦΑΛΑΙΟ 3o ΕΓΚΑΤΑΣΤΑΣΗ 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.





ΑΠΑΝΤΗΣΗ. Διπλό κλικ στο εικονίδιο Sublime Text 1.4 Set up.exe/ πατήστε στο Εκτέλεση και κάντε Αποδοχή (Accept)/ Next/ Next/ Install και αφήστε να ολοκληρωθεί η διαδικασία εγκατάστασης.

ΚΕΦΑΛΑΙΟ 4o

ΙΣΤΟΡΙΚΗ ΑΝΑΔΡΟΜΗ 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 Α. 1996 Β. 2001 Γ. 1991 Δ. 1989 Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. 1991 2ον Ποιοι είναι οι συντάκτες της HTML; Α. Ιάν Χίξον (εταιρείας Google) Β. Ντέιβ Χάϊτ (εταιρείας Apple) Γ. Και οι δύο Δ. Κανένας από τους δύοΕπιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Και οι δύο. 3ον Τι είναι τα αρχεία Πολυμέσων; Α. Αρχεία Εικόνας, ήχου και βίντεο Β. Αρχεία Ήχου και κειμένου Γ. Αρχεία Βίντεο κειμένουΔ. Τίποτε από τα παραπάνω Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Αρχεία Εικόνας, ήχου και βίντεο. 4ον Ποια είναι η τελευταία έκδοση της HTML





Α. HTML 4.2 Β. HTML 4 Γ. HTML5 Δ. HTML6 Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. HTML 5.

ΚΕΦΑΛΑΙΟ 5o

ΣΥΝΟΛΟ TAGS (ΜΑΘΗΜΑΤΩΝ)

Μορφοποίηση Φόρμες Έντυπα Πλαίσια Εικόνες Συνδέσμους Λίστες Πίνακες





ΚΕΦΑΛΑΙΟ 6o ΕΥΡΕΣΗ ΚΑΙ ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ 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/ Λήψη/ Αποδοχή & Εγκατάσταση. Περιμένετε να ολοκληρωθεί η εγκατάσταση.





ΚΕΦΑΛΑΙΟ 7o ΣΥΝΔΕΣΗ 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..





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 δείτε τα αποτελέσματα.





ΚΕΦΑΛΑΙΟ 8o ΤΙ ΕΙΝΑΙ ΤΑ TAGS ΕΝΑΡΞΗΣ & ΛΗΞΗΣ

Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων < και >. Π.χ. η οδηγία για να γίνει ένα κείμενο bold είναι: <b> το κείμενο που θα είναι bold </b>. Αυτό ερμηνεύεται ως: <b> = (ότι βρεις από δω και πέρα θα το παρουσιάζεις σαν bold) ετικέτα αρχής</b> = (σταματάς να κάνεις bold ότι βρεις από δω και κάτω) ετικέτα τέλους Οι οδηγίες δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία (είναι case insensitive). Δηλαδή οι οδηγίες <title> και <TITLE> είναι ισοδύναμες. Tags (ετικέτες ) = ειδικοί κώδικες που περιλαμβάνουν το οπτικό αποτέλεσμα που είναι ορατό στη σελίδα σας. Περικλείονται από αγκύλες < >.Γενική Μορφή: ετικέτα έναρξης <h1> κύριο σώμα κειμένου </h1> Ετικέτα κλεισίματος έχει πάντα την / που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα. Γράφετε λατινικά μικρά είτε κεφαλαία. Αγνοεί ετικέτες που δεν αναγνωρίζει. Attributes (Ιδιότητες) των ετικετών είναι τιμές που δίνουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά. ΠΧ <html xmlns = ‘’http: //www.w3.org/1999/xhtml’’>





ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Τι είναι οι ετικέτες (Tags); Α. Ετικέτες του Site Β. Κώδικες που περιλαμβάνουν τα ονόματα του Site Γ. Κώδικες που περιλαμβάνουν το οπτικό αποτέλεσμα που είναι ορατό στη σελίδα σας. Δ. Κανένα από τα παραπάνω Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Κώδικες που περιλαμβάνουν το οπτικό αποτέλεσα που είναι ορατό στη σελίδα σας. 2ον Οι ετικέτες περικλείονται από … Α. Αγκύλες Β. Παρενθέσεις Γ. Εισαγωγικά Δ. Ερωτηματικά Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Αγκύλες. 3ον Τι είναι η ετικέτα κλεισίματος; Α. Ετικέτα που ορίζει το τέλος του κειμένου Β. Κώδικας που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα Γ. Ετικέτα για να ορίσετε το όνομα του Site. Δ. Τίποτε από τα παραπάνω. Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Κώδικας που λέει στο φυλλομετρητή πότε σταματάει η ετικέτα.

4ον Έχετε τη δυνατότητα να πληκτρολογήσετε τις ετικέτες κεφαλαία και πεζά ; Α. Ναι Β. Όχι Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Ναι.





ΚΕΦΑΛΑΙΟ 9o 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;





Α. Πριν τον κύριο κώδικαΒ. Στο τέλος του κύριου κώδικα Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Πριν τον κύριο κώδικα. 5ον Ανοίξτε το αρχείο M_09.html, που υπάρχει στο φάκελο “HTML” και στον υποφάκελο “M_09”, από το πρόγραμμα Sublime Text. Στη συνέχεια, πριν τον κύριο κώδικά προσθέστε τον κώδικα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο “Φάκελοι Προγραμμάτων” της επιφάνειας/ “HTML”/ “M_09”/ επιλέξτε το αρχείο “M_09.html/ Άνοιγμα. Στη συνέχεια, μεταφερθείτε στη γραμμή με τον αριθμό 1 και πληκτρολογήστε τον κώδικα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

6ον Αποθηκεύστε το αρχείο Sublime text ως Μ_09 ΤΕΛΙΚΟ.html στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση.

Sample html

Education

Transcript of Sample html