HTML-CSS για αρχάριους :: Μάθημα 1ο
0 likes1,512 views
Μαθήματα HTML-CSS για αρχάριους. Μάθημα 1ο: α) Δημιουργία αρχείου HTML β) Βασικές ετικέτες
HTML-CSS για αρχάριους :: Μάθημα 1ο
- 1. WEB DESIGN HTML - CSS Ας ξεκινήσουμε! OpenEducation.GR Αν θέλουμε να ασχοληθούμε με τη σχεδίαση ιστοσελίδων, οι γλώσσες HTML και CSS είναι οι πρώτες από τις οποίες πρέπει να ξεκινήσουμε!
- 2. Τι είναι η HTML? HTML - CSS • Η HTML είναι η γλώσσα με την οποία δημιουργούμε ιστοσελίδες. • Κάθε ιστοσελίδα αποτελείται από στοιχεία όπως: επικεφαλίδες, παραγράφους, εικόνες, πίνακες, κλπ. • Κάθε ένα από τα παραπάνω στοιχεία αντιστοιχεί σε μία ετικέτα HTML. • Η HTML με τις ετικέτες της, περιγράφει τη δομή μιας ιστοσελίδας, έτσι ώστε να την αναπαράγει ο browser! OpenEducation.GR Σελ 2 από 15
- 3. Τι είναι η CSS? HTML - CSS • Η CSS είναι η γλώσσα με την οποία περιγράφουμε το στυλ των στοιχείων μιας ιστοσελίδας. • Η HTML περιγράφει ΤΙ θα εμφανιστεί σε μία ιστοσελίδα, ενώ η CSS περιγράφει ΠΩΣ θα εμφανιστεί. • Υπάρχουν 3 τρόποι για να προσθέσουμε CSS σε μια ιστοσελίδα. External, Internal, Inline. • Στα μαθήματά μας, θα μάθουμε το Inline CSS! OpenEducation.GR Σελ 3 από 15
- 4. Τι θα χρειαστούμε? HTML - CSS • Έναν browser για να προβάλουμε τις ιστοσελίδες μας, όπως το Google Chrome ή το Safari. • Έναν απλό editor όπως το Notepad (Σημειωματάριο) για να δημιουργούμε τις ιστοσελίδες μας. Σε υπολογιστές Apple, το TextEdit (πριν ξεκινήσετε, από το μενού Μορφή, επιλέξτε Μετατροπή σε απλό κείμενο). • Για τη δημιουργία των ιστοσελίδων μπορούμε να χρησιμοποιήσουμε και ένα προγραμματιστικό περιβάλλον, όπως το Visual Studio. • Κατεβάστε αν θέλετε το Visual Studio στον υπολογιστή σας: https://code.visualstudio.com/Download OpenEducation.GR Σελ 4 από 15
- 5. OpenEducation.GR Σελ 5 από 15 Πώς θα δουλεύουμε; HTML - CSS • Δουλεύουμε σε τρία βήματα: 1. Πληκτρολογούμε τον κώδικα HTML στον editor. 2. Αποθηκεύουμε. 3. Ανοίγουμε το αρχείο μας στον browser. • Διατηρούμε ανοιχτά και τα δύο παράθυρα (editor και browser). • Κάνουμε ό,τι αλλαγές χρειάζονται ή συμπληρώνουμε τον κώδικά μας στον editor, αποθηκεύουμε και ανανεώνουμε το παράθυρο στον browser. Editor Browser
- 6. OpenEducation.GR Σελ 6 από 15 1. Γράφουμε τον κώδικα HTML στον Editor - 2. Αποθηκεύουμε - 3. Ανοίγουμε το αρχείο στον Browser
- 7. Ας μάθουμε τις πρώτες μας ετικέτες HTML! HTML • Στην κορυφή κάθε ιστοσελίδας πρέπει να υπάρχει μία δήλωση του τύπου τους: <!DOCTYPE html>. • Σχεδόν όλες οι ετικέτες “ανοίγουν” και “κλείνουν”: <tag>… </tag>. Οι ετικέτες εφαρμόζονται σε αυτό που κλείνουν ανάμεσα στο άνοιγμα και στο κλείσιμό τους, όπως θα δούμε στη συνέχεια στα παραδείγματα. • Κάθε ιστοσελίδα αρχίζει με την ετικέτα <html> και τελειώνει με το κλείσιμο της ετικέτας </html>. OpenEducation.GR Σελ 7 από 15
- 8. • Το ορατό τμήμα της ιστοσελίδας βρίσκεται ανάμεσα στις ετικέτες <body> και </body>. • Η ετικέτα <h1> ορίζει τις επικεφαλίδες που έχει η ιστοσελίδα μας. Υπάρχουν 6 επίπεδα επικεφαλίδων. Οι πιο σημαντικές είναι οι <h1> και οι λιγότερο σημαντικές οι <h6>. • Η ετικέτα <p> ορίζει τις παραγράφους κειμένου που έχει η ιστοσελίδα μας. Ας μάθουμε τις πρώτες μας ετικέτες HTML! HTML OpenEducation.GR Σελ 8 από 15
- 9. Notepad File Edit Format View Help OpenEducation.GR Σελ 9 από 15 <!DOCTYPE html> <html> <body> <h1>Hello World!</h1> <p>Αυτή είναι η πρώτη μου παράγραφος</p> </body> </html> Το πρώτο μας παράδειγμα! 1. Πληκτρολογούμε στον Editor - 2. Αποθηκεύουμε - 3. Ανοίγουμε στον Browser
- 10. OpenEducation.GR Σελ 10 από 15 Ας δοκιμάσουμε τις επικεφαλίδες 1. Πληκτρολογούμε στον Editor - 2. Αποθηκεύουμε - 3. Ανανεώνουμε τον Browser
- 11. OpenEducation.GR Σελ 11 από 15 Ανακεφαλαίωση μαθήματος HTML - CSS • Για να δημιουργήσω μία ιστοσελίδα χρειάζομαι έναν editor και έναν browser. • Δουλεύω σε τρία βήματα: 1. Πληκτρολογώ 2. Αποθηκεύω 3. Ανοίγω στον Browser (ή ανανεώνω αν το είχα ήδη ανοιχτό) • Σχεδόν όλες οι ετικέτες “ανοίγουν” και “κλείνουν”: <tag>… </tag>
- 12. OpenEducation.GR Σελ 12 από 15 Ανακεφαλαίωση μαθήματος HTML - CSS Σε αυτό το μάθημα, μάθαμε τις βασικές ετικέτες: • <!DOCTYPE html> : στην κορυφή κάθε ιστοσελίδας. • <html> : ορίζει την αρχή και το τέλος της ιστοσελίδας. • <body> : ορίζει την αρχή και το τέλος του ορατού τμήματος. • <h1> : ορίζει τις επικεφαλίδες που έχει η ιστοσελίδα μας. • <p> : ορίζει τις παραγράφους κειμένου που έχει η ιστοσελίδα μας.
- 13. Άσκηση! Δημιουργήστε την παραπάνω ιστοσελίδα και δείτε τι θα εμφανίσει στον browser. Notepad File Edit Format View Help OpenEducation.GR Σελ 13 από 15 <!DOCTYPE html> <html> <body> <h1>Καλώς ήλθατε στην ιστοσελίδα μου!</h1> <h2>Ενημερωθείτε για τα προϊόντα μου!</h2> <p>Είναι τα καλύτερα προϊόντα της αγοράς</p> </body> </html>
- 14. Άσκηση! Δημιουργήστε την παραπάνω ιστοσελίδα όπως φαίνεται στον browser. Notepad File Edit Format View Help OpenEducation.GR Σελ 14 από 15
- 15. HTML - CSS OpenEducation.GR Γράψου τώρα στα μαθήματα!