Χρησιμοποιήστε CSS για να καθορίσετε την εμφάνιση της ιστοσελίδας.
Ένας κωδικοποιητής ιστοσελίδας χρησιμοποιεί τη Γλώσσα σήμανσης υπερκειμένου για να πει στο πρόγραμμα περιήγησης Ιστού τον λειτουργικό σκοπό κάθε στοιχείου σε μια σελίδα, όπως μια παράγραφο, μια επικεφαλίδα ή μια λίστα. Από την HTML 4, τα Cascading Style Sheets παρείχαν στον κωδικοποιητή έναν τρόπο να λέει στο πρόγραμμα περιήγησης πώς πρέπει να φαίνεται καθένα από αυτά τα στοιχεία, ανεξάρτητα από τον ορισμό του τι είναι. Μια σελίδα μπορεί να έχει διαφορετικά στυλ CSS για διαφορετικούς τύπους συσκευών, όπως κινητά τηλέφωνα και επιτραπέζιους υπολογιστές, επιτρέποντας την αλλαγή της εμφάνισης της σελίδας χωρίς ο κωδικοποιητής να χρειάζεται να αλλάξει το HTML. Χρησιμοποιήστε ιδιότητες CSS για να κεντράρετε μια εικόνα.
Βήμα 1
Τοποθετήστε την ετικέτα "img" στο αρχείο HTML όπου θέλετε να εμφανίζεται η εικόνα σας στην ιστοσελίδα. Πρέπει να βρίσκεται μεταξύ των ετικετών "body" και μετά των ετικετών "h1". Για παράδειγμα,
Το βίντεο της ημέρας
Αυτό είναι το κείμενό σας.
ορίζει μια εικόνα με το όνομα photo.jpg που έχει πλάτος 170 pixel και ύψος 50 pixel. Είναι το πρώτο πράγμα στη σελίδα μετά την επάνω επικεφαλίδα.
Βήμα 2
Χρησιμοποιήστε το χαρακτηριστικό CSS "margin" για να ορίσετε το χώρο γύρω από τα στοιχεία της σελίδας, όπως εικόνες. Η τιμή "auto" για το χαρακτηριστικό margin λέει στο πρόγραμμα περιήγησης Web να προσδιορίσει αυτόματα την ποσότητα του χώρου. Ετσι, ορίζει ότι ο χώρος γύρω από την εικόνα καθορίζεται από το πρόγραμμα περιήγησης.
Βήμα 3
Χρησιμοποιήστε την ιδιότητα "εμφάνιση" για να ορίσετε πώς εμφανίζεται ένα στοιχείο σελίδας. Η τιμή "block" για την ιδιότητα εμφάνισης λέει στο πρόγραμμα περιήγησης Web να εμφανίσει το στοιχείο στη δική του γραμμή, με κενό χώρο πάνω και κάτω από αυτό. Ετσι, ορίζει την ίδια εικόνα, αλλά την προσθήκη του "display: block;" τώρα το τοποθετεί στη δική του γραμμή.
Βήμα 4
Προβάλετε την ιστοσελίδα σε πολλά διαφορετικά προγράμματα περιήγησης για να επαληθεύσετε ότι η εικόνα έχει κεντραριστεί σωστά.
Υπόδειξη
Συμπεριλάβετε την περιγραφή της εικόνας σε μια ετικέτα "alt". Αυτό κάνει τη σελίδα σας πιο προσβάσιμη σε αναγνώστες με προβλήματα όρασης και διασφαλίζει ότι ο κώδικάς σας συμμορφώνεται με τα πρότυπα.
