Περιεχόμενα Διδακτζασ Ύλθσ για τθν Εκμάκθςθ του HTML 86 εκπαιδευτικζσ ενότθτεσ για το HTML, μόνο ςτθ FACEtoFACE 1 θ Εκπαιδευτικι Συνάντθςθ: Στόχοσ τθσ 1θσ εκπαιδευτικισ ςυνάντθςθσ είναι να ειςαχκείσ ςτον κφκλο των μακθμάτων πάνω ςτθν HTML και να παρακολουκιςεισ τθν παρουςίαςθ των διαφόρων κειμενογράφων. Μακαίνοντασ να εγκακιςτάσ Text Editors και μακαίνοντασ για τθ γλϊςςα αυτι μζςω μιασ ιςτορικισ αναδρομισ, κα περάςεισ ςτο ςφνολο των ετικετών, αλλά και ςτθν εφρεςθ και εγκατάςταςθ του γνωςτοφ φυλλομετρθτι Google Chrome. Η ςφνδεςθ του κειμενογράφου με το φυλλομετρθτι κρίνεται ωσ μια ιδιαιτζρωσ ςθμαντικι διαδικαςία και κα πρζπει να δϊςεισ τθ δζουςα προςοχι. Ειςαγωγι Κειμενογράφοι Text Editors Εγκατάςταςθ Text Editor Ιςτορικι Αναδρομι HTM 2 θ Εκπαιδευτικι Συνάντθςθ: Σφνολο Tags Μακθμάτων Εφρεςθ & Εγκατάςταςθ Google Chrome Σφνδεςθ Text Editor με το φυλλομετρθτι Στθ 2θ εκπαιδευτικι ςυνάντθςθ κα μάκεισ να χρθςιμοποιείσ τισ ετικζτεσ ζναρξθσ και λιξθσ, κακϊσ και πολλζσ άλλεσ ετικζτεσ χριςιμεσ ςτθν προγραμματιςτικι διαδικαςία. Αποκτϊντασ εξοικείωςθ με τθ κζςθ και τθ χρθςιμότθτα των ετικετϊν DOCTYPE, HTML, HEAD, META και TITLE, κα μπορείσ να αντιλαμβάνεςαι τθ ροι του προγραμματιςμοφ και κα αποκτιςεισ τθν κατάλλθλθ εξοικείωςθ με τθν όλθ διαδικαςία. Μακαίνοντασ δε να προςαρμόηεισ το κείμενο ςτθν κωδικοποίθςθ UTF8, κα είςαι ςε κζςθ να αποφεφγεισ ανεπικφμθτα αποτελζςματα κατά τθν παρουςίαςθ του κϊδικά ςου. Η ετικζτα του κυρίου ςϊματοσ BODY κα ςε απαςχολιςει ςτα μακιματα που ζπονται των ετικετϊν. Tags Ζναρξθσ & Λιξθσ Ετικζτα DOCTYPE Ετικζτα HTML Ετικζτα HEAD 3 θ Εκπαιδευτικι Συνάντθςθ: Ετικζτα ΜΕΤΑ Ετικζτα TITLE Χρθςιμότθτα του utf8 Ετικζτα BODY Η 3θ εκπαιδευτικι ςυνάντθςθ αποςκοπεί ςτθ χριςθ των ετικετϊν H1 ζωσ H6 και ςτθ χριςθ τθσ ετικζτασ παραγράφου για τισ ανάγκεσ ςωςτισ οργάνωςθσ του κϊδικά ςου. Μακαίνοντασ να χωρίηεισ γραμμζσ με Break Line και να χρθςιμοποιείσ και να μορφοποιείσ τθν οριηόντια γραμμι, κα περάςεισ ςε κζματα προςκικθσ ςχολίου και επεξεργαςίασ κειμζνου με πλάγια ι ζντονθ γραφι. 1
Ετικζτεσ Η1 ζωσ Η6 Ετικζτα PARAGRAPH Break Line Αλλαγι Γραμμισ HorizontalR Οριηόντια Γραμμι 4 θ Εκπαιδευτικι Συνάντθςθ: Μορφοποίθςθ HorizontalR Προςκικθ Σχολίου Πλάγια Γραφι Italic Text Ζντονθ Γραφι Bold Text Στόχοσ τθσ 4θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να χρθςιμοποιείσ τον κειμενογράφο και να αξιοποιείσ ετικζτεσ όπωσ οι small & big, διεφκυνςθσ και ακρωνυμίου, περνϊντασ ςε λειτουργίεσ ςφντμθςθσ του κειμζνου και χριςθσ πλαιςίου ςυντομεφςεων. Αρκετζσ αςκιςεισ ςυνοδεφουν τα κεφάλαια τθσ φλθσ, ζτςι ϊςτε να αφομοιϊςεισ τισ απλζσ αυτζσ λειτουργίεσ, προτοφ περάςεισ ςε πιο ςφνκετα και ενδιαφζροντα εργαλεία. Typewriter Ετικζτεσ Small & Big Ετικζτα Διεφκυνςθσ Address Ετικζτα Acronym 5 θ Εκπαιδευτικι Συνάντθςθ: Ετικζτα Σφντμθςθσ ABBR Ετικζτα BDO Ετικζτα BLOCKQUOTE Ετικζτα EM Στόχοσ τθσ 5θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ τθ λειτουργία των ετικετών STRONG, DFN, CODE, SAMP, KBD, VAR και CITIES για τισ ανάγκεσ του ζργου ςου. Η χριςθ τθσ διακριτισ διαγραφισ μπορεί να φανεί χριςιμθ ςε οριςμζνεσ περιπτϊςεισ όπου απαιτείται αυτό το εφζ. Ετικζτα STRONG Ετικζτα DFN Ετικζτα CODE Ετικζτα SAMP 6 θ Εκπαιδευτικι Συνάντθςθ: Ετικζτα KBD Ετικζτεσ VAR & CITIES Διακριτι Διαγραφι Στόχοσ τθσ 6θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να υπογραμμίηεισ κείμενο και να προςκζτεισ αγγλικά ειςαγωγικά ςτο κείμενό ςου. Η χριςθ δείκτθ και τα εφζ τθσ πλάγιασ και τθσ ζντονθσ γραφισ κα ςου φανοφν εξαιρετικά χριςιμα. Υπογράμμιςθ Κειμζνου Ετικζτα PRE Προςκικθ Αγγλικϊν Ειςαγωγικϊν Δείκτθσ Πλάγια Γραφι Italic Text Ζντονθ Γραφι Bold Text 2
7 θ Εκπαιδευτικι Συνάντθςθ: Στα πλαίςια τθσ 7θσ εκπαιδευτικισ ςυνάντθςθσ κα μάκεισ να χρθςιμοποιείσ τον κειμενογράφο, τισ ετικζτεσ Small και Big και τα ακρωνφμια, παράλλθλα με τθν ετικζτα τθσ ςφντμθςθσ του κειμζνου ςου. Η χριςθ τθσ ετικζτασ για ριςεισ ενδείκνυεται για περιπτϊςεισ όπου κζλεισ να τονίςεισ το πλαίςιο προβολισ του κειμζνου. Αρκετζσ αςκιςεισ ςυμπλθρϊνουν το κεωρθτικό υπόβακρο όπου βαςίηεται θ εκπαίδευςι ςου. Typewriter Ετικζτεσ Small & Big Ετικζτα Διεφκυνςθσ Address Ετικζτα Acronym 8 θ Εκπαιδευτικι Συνάντθςθ: Ετικζτα Σφντμθςθσ ABBR Ετικζτα BDO Ετικζτα BLOCKQUOTE Ετικζτα EM Στόχοσ τθσ 8θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να χρθςιμοποιείσ τισ ετικζτεσ STRONG, DFN, CODE, SAMP, KBD και VAR & CITIES, για να περάςεισ, ςτθ ςυνζχεια, ςτθ χριςθ τθσ διακριτισ διαγραφισ. Ετικζτα STRONG Ετικζτα DFN Ετικζτα CODE Ετικζτα SAMP Ετικζτα KBD Ετικζτεσ VAR & CITIES Διακριτι Διαγραφι 9 θ Εκπαιδευτικι Συνάντθςθ: Στόχοσ τθσ 9θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ πϊσ γίνεται θ υπογράμμιςθ του κειμζνου, πϊσ προςκζτεισ αγγλικά ειςαγωγικά και πϊσ βάηεισ δείκτθ ςτο κείμενό ςου. Κατανοϊντασ τθ χριςθ ετικζτασ υπομνιματοσ και τουσ τρόπουσ ειςαγωγισ εικόνασ ςτθ ςελίδα ςου, κα μάκεισ να χρθςιμοποιείσ τθν αναφορά A_HREF και τισ ετικζτεσ για τθ δθμιουργία λίςτα με κουκκίδεσ ι αρικμοφσ. Υπογράμμιςθ Κειμζνου Ετικζτα PRE Προςκικθ Αγγλικϊν Ειςαγωγικϊν Δείκτθσ Ετικζτα LEGEND 10 θ Εκπαιδευτικι Συνάντθςθ: Ειςαγωγι Εικόνασ Α_HREF Ετικζτα UL_LI (Δθμιουργία Λίςτασ με Κουκκίδεσ) Ετικζτα OL_LI (Δθμιουργία Λίςτασ με Αρικμοφσ) Στόχοσ τθσ 10θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να εφαρμόηεισ ετικζτεσ DL_DT_DD και πίνακα, αλλά και πϊσ να προςαρμόηεισ τισ αποςτάςεισ μεταξφ των κελιϊν, τα πλαίςια και γενικότερα τθ διαμόρφωςθ αυτϊν για ζνα βζλτιςτο οπτικό αποτζλεςμα. Στα πλαίςια τθσ ςυνάντθςθσ, κα αφιερϊςεισ 3
χρόνο ςτο χειριςμό των γραμμϊν, των ςτθλϊν και των κελιϊν με πολλοφσ και διαφορετικοφσ τρόπουσ, προτοφ περάςεισ ςτθν επόμενθ ενότθτα. Ετικζτεσ DL_DT_DD Ετικζτα Table (Δθμιουργία Πίνακα) Table Cellpadding Table Frame_Box_Boarder_VOID (Πλαίςια Πίνακα) 11 θ Εκπαιδευτικι Συνάντθςθ: Table Above Below Table Vsides-Hsides Table Lhsides-Rhsides Table Rules_Rows_Cells Στόχοσ τθσ 11θσ εκπαιδευτικισ ςυνάντθςθσ είναι να μάκεισ να χρθςιμοποιείσ κανόνεσ ςτουσ πίνακεσ, αναγνϊςτεσ οκόνθσ και να προςαρμόηεισ τισ διαςτάςεισ πλάτουσ και φψουσ, προτοφ καταπιαςτείσ με τθ χριςθ τθσ λεηάντασ. Μακαίνοντασ να ςυνδζεισ αρχείο Link CSS με HTML και ςτυλ, κα περάςεισ ςε πρακτικζσ διαίρεςθσ μιασ ςελίδασ ςε ενότθτεσ DIV για να πραγματοποιιςεισ τισ αιςκθτικζσ παρεμβάςεισ τθσ επιλογισ ςου. Table Rules_None_All_Groups Rules Summary (Αναγνϊςτεσ Οκόνθσ Table Widht Height Table Cellispacine Table Caption 12 θ Εκπαιδευτικι Συνάντθςθ: Σφνδεςθ Αρχείο Link Css με Html Style Διαίρεςθ μιασ ςελίδασ ςε ενότθτεσ DIV Span Στόχοσ τθσ 12θσ εκπαιδευτικισ ςυνάντθςθσ είναι να ζχεισ μια πρακτικι εφαρμογι όςων ζμακεσ με επαναλθπτικζσ αςκιςεισ. Πρακτικι Εφαρμογι με Επαναλθπτικι 1θ 13 θ Εκπαιδευτικι Συνάντθςθ: Πρακτικι Εφαρμογι με Επαναλθπτικι 2θ Στθ 13θ εκπαιδευτικι ςυνάντθςθ κα αςχολθκείσ με επαναλθπτικζσ αςκιςεισ για πρακτικι εφαρμογι. Πρακτικι Εφαρμογι με Επαναλθπτικι 3θ 14 θ Εκπαιδευτικι Συνάντθςθ: Πρακτικι Εφαρμογι με Επαναλθπτικι 4θ Στθ 14θ εκπαιδευτικι ςυνάντθςθ κα κάνεισ επανάλθψθ τθσ φλθσ που διδάχτθκεσ ςτισ προθγοφμενεσ ςυναντιςεισ μζςα από επαναλθπτικισ αςκιςεισ. 4
Πρακτικι Εφαρμογι με Επαναλθπτικι 5θ Πρακτικι Εφαρμογι με Επαναλθπτικι 6 θ 15 θ Εκπαιδευτικι Συνάντθςθ: Πρακτικι Εφαρμογι με Επαναλθπτικι 7θ Στόχοσ τθσ 15θσ εκπαιδευτικισ ςυνάντθςθσ είναι να ολοκλθρϊςεισ εργαςία, το κζμα τθσ οποίασ μπορείσ να προτείνεισ εςφ. Εργαςία, με προτεινόμενθ κεματολογία από τον Εκπαιδευόμενο 16 θ Εκπαιδευτικι Συνάντθςθ: Στόχοσ τθσ 16θσ εκπαιδευτικισ ςυνάντθςθσ είναι να υλοποιιςεισ εργαςία με κεματολογία τθσ επιλογισ ςου. Εργαςία, με προτεινόμενθ κεματολογία από τον Εκπαιδευόμενο 17 θ Εκπαιδευτικι Συνάντθςθ: Στόχοσ τθσ 17θσ εκπαιδευτικισ ςυνάντθςθσ είναι να κάνει μια γενικι επανάλθψθ, προχωρϊντασ ςτθν ολοκλιρωςθ τθσ τελικισ ςου εργαςίασ. Γενικι Επανάλθψθ Τελικι Εργαςία που οδθγεί ςτθν Παγκόςμια Πιςτοποίθςθ Σημείωςη: Η ανωτζρω φλη ζχει ενςωματωθεί ςε εκπαιδευτική ςυνάντηςη 4 ωρών 5