Η δημιουργία ενός ιστότοπου είναι ένας πολύ καλός τρόπος για να εκφραστείτε. Παρόλο που υπάρχουν πολλά εργαλεία δημιουργίας ιστότοπων, το να γράφετε μόνοι σας είναι ένας διασκεδαστικός τρόπος για να μάθετε περισσότερα σχετικά με το πώς λειτουργούν οι ιστότοποι στα παρασκήνια. Ένα καλό έργο για αρχάριους είναι να δημιουργήσετε έναν ιστότοπο και να προσθέσετε μια εικόνα φόντου με CSS. Αυτό το έργο θα σας κάνει να ξεκινήσετε και με HTML και CSS.
Τι είναι το CSS;
Το CSS σημαίνει Cascading Style Sheet. Είναι μια γλώσσα προγραμματισμού που σας επιτρέπει να σχεδιάζετε γλώσσες σήμανσης. Μία τέτοια γλώσσα σήμανσης είναι HTML ή Hyper-Text Markup Language. Η HTML χρησιμοποιείται για τη δημιουργία ιστότοπων. Αν και μπορείτε να ελέγξετε κάποιο από το στυλ του ιστότοπου χρησιμοποιώντας HTML, το CSS προσφέρει πολύ περισσότερες επιλογές ελέγχου και σχεδίασης.
Δημιουργία βασικού ιστότοπου με HTML
Δεδομένου ότι το CSS είναι απλώς μια γλώσσα στυλ, για να το χρησιμοποιήσουμε, χρειαζόμαστε πρώτα κάτι για το στυλ. Ένας πολύ βασικός ιστότοπος θα είναι αρκετός για να ξεκινήσουμε να παίζουμε με CSS. Η σελίδα μας θα εμφανίζει το "Hello World".
Γειά σου Κόσμε
Σε περίπτωση που δεν είστε εξοικειωμένοι με το HTML, ας δούμε γρήγορα τι κάνουν όλα τα στοιχεία. Όπως αναφέρθηκε, το HTML είναι μια γλώσσα σήμανσης, που σημαίνει ότι χρησιμοποιεί ετικέτες για να επισημάνει το κείμενο. Όποτε βλέπετε μια λέξη που περιβάλλεται από <> είναι μια ετικέτα. Υπάρχουν δύο τύποι ετικετών, μια ετικέτα που σηματοδοτεί την αρχή μιας ενότητας χρησιμοποιώντας <> και μία που σηματοδοτεί το τέλος μιας ενότητας χρησιμοποιώντας
Στο παράδειγμά μας, έχουμε τέσσερις ετικέτες. ο html Η ετικέτα υποδεικνύει ποια στοιχεία αποτελούν μέρος του ιστότοπου. ο κεφάλι Η ετικέτα περιέχει τις πληροφορίες κεφαλίδας που δεν εμφανίζονται στη σελίδα αλλά απαιτούνται για τη δημιουργία της σελίδας. Όλα τα στοιχεία που εμφανίζονται βρίσκονται μεταξύ του σώμα ετικέτες. Έχουμε μόνο ένα εμφανιζόμενο στοιχείο, το Π ετικέτα. Λέει στο πρόγραμμα περιήγησης ιστού ότι το κείμενο είναι μια παράγραφος.
Σχετιζομαι με: 10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά
Θέλετε να μάθετε περισσότερα σχετικά με τη χρήση CSS; Δοκιμάστε αυτά τα βασικά παραδείγματα κώδικα CSS και, στη συνέχεια, εφαρμόστε τα στις δικές σας ιστοσελίδες.
Προσθήκη CSS σε HTML
Τώρα που έχουμε μια απλή σελίδα, μπορούμε να προσαρμόσουμε το στυλ με CSS. Η σελίδα μας είναι πολύ απλή αυτή τη στιγμή και δεν μπορούμε να κάνουμε πολλά, αλλά ας ξεκινήσουμε κάνοντας την παράγραφο μας να ξεχωρίζει, ώστε να μπορούμε να την ξεχωρίσουμε από το φόντο προσθέτοντας ένα περίγραμμα.
Γειά σου Κόσμε
Τώρα, η παράγραφος μας θα περιβάλλεται από ένα μαύρο περίγραμμα. Η προσθήκη μιας περιγραφής στυλ στο CSS στην ετικέτα παραγράφου μας είπε στον ιστότοπο πώς να στιλάρει την παράγραφο. Μπορούμε να προσθέσουμε περισσότερες περιγραφές. Ας αυξήσουμε το κενό διάστημα, ή την επένδυση, γύρω από την παράγραφο μας και στο κέντρο του κειμένου μας.
Γειά σου Κόσμε
Ο ιστότοπός μας φαίνεται καλύτερος, αλλά ο HTML μας αρχίζει να φαίνεται ακατάστατος με όλες αυτές τις περιγραφές στην ετικέτα παραγράφου. Μπορούμε να μεταφέρουμε αυτές τις πληροφορίες στην κεφαλίδα μας. Η κεφαλίδα μας είναι για πληροφορίες που πρέπει να εμφανίσουμε σωστά τον ιστότοπο.
Γειά σου Κόσμε
Τώρα το HTML μας είναι πιο ευανάγνωστο. Θα παρατηρήσετε ότι έπρεπε να αλλάξουμε κάποια πράγματα. Η ετικέτα στυλ λέει τις πληροφορίες στυλ του προγράμματος περιήγησης ιστού, αλλά και τι πρέπει να σχεδιάσετε. Στο παράδειγμά μας, έχουμε χρησιμοποιήσει δύο διαφορετικούς τρόπους για να το πούμε τι να στιλ. ο Π στην ετικέτα στυλ λέει στο πρόγραμμα περιήγησης ιστού να εφαρμόσει αυτό το στυλ σε όλες τις ετικέτες παραγράφου. ο #ourΠαράγραφος Το τμήμα το λέει σε στοιχεία στυλ μόνο με το αναγνωριστικό μαςΠαράγραφος. Σημειώσε ότι ταυτότητα πληροφορίες προστέθηκαν στην ετικέτα p στο σώμα μας.
Εισαγωγή αρχείου CSS στον ιστότοπό σας
Η προσθήκη πληροφοριών στυλ στην κεφαλίδα καθιστά τον κώδικά μας πολύ πιο ευανάγνωστο. Ωστόσο, εάν θέλουμε να σχεδιάσουμε πολλές διαφορετικές σελίδες με τον ίδιο τρόπο, πρέπει να προσθέσουμε αυτό το κείμενο στην κορυφή κάθε σελίδας. Αυτό μπορεί να μην φαίνεται σαν πολύ δουλειά, μπορείτε να το αντιγράψετε και να το περάσετε μετά από όλα, αλλά δημιουργεί πολλή δουλειά εάν θέλετε να αλλάξετε ένα στοιχείο αργότερα.
Αντ 'αυτού, θα διατηρήσουμε τις πληροφορίες CSS σε ξεχωριστό αρχείο και θα εισαγάγουμε το αρχείο για να προσθέσουμε στυλ στη σελίδα. Αντιγράψτε και επικολλήστε τις πληροφορίες μεταξύ των ετικετών στυλ σε ένα νέο αρχείο CSS ourCSSfile.css.
Π {
text-align: κέντρο
}
#ourΠαράγραφος {
στυλ περιγράμματος: συμπαγές?
επένδυση: 30px;
}Στη συνέχεια, εισαγάγετε το αρχείο στο αρχείο HTML.
Γειά σου Κόσμε
Προσθήκη εικόνας φόντου με CSS
Τώρα που έχετε μια σταθερή βάση σε HTML και CSS, η προσθήκη μιας εικόνας φόντου θα είναι ένα κομμάτι κέικ. Αρχικά, προσδιορίστε σε ποιο στοιχείο θέλετε να δώσετε μια εικόνα φόντου. Στο παράδειγμά μας, θα προσθέσουμε ένα φόντο σε ολόκληρη τη σελίδα. Αυτό σημαίνει ότι θέλουμε να αλλάξουμε το στυλ του σώμα. Θυμηθείτε, οι ετικέτες σώματος περιέχουν όλα τα ορατά στοιχεία.
σώμα{
background-image: url ("sky.jpg");
}
Π {
text-align: κέντρο
}
#ourΠαράγραφος {
στυλ περιγράμματος: συμπαγές?
επένδυση: 30px;
}Για να αλλάξετε το στυλ του αμαξώματος σε CSS, χρησιμοποιήστε πρώτα το σώμα λέξη-κλειδί. Στη συνέχεια, προσθέστε αγκύλες όπως κάναμε πριν {}. Όλες οι πληροφορίες στυλ για το σώμα πρέπει να βρίσκονται ανάμεσα στα αγκύλια. Το χαρακτηριστικό στυλ που θέλουμε να αλλάξουμε είναι εικόνα φόντου. Υπάρχουν πολλά χαρακτηριστικά στυλ. Μην περιμένετε να τα απομνημονεύσετε όλα. Σελιδοδείκτης α Cheat-sheet ιδιοτήτων CSS με χαρακτηριστικά που θέλετε να θυμάστε.
Σχετιζομαι με: 8 εντυπωσιακά εφέ HTML που ο καθένας μπορεί να προσθέσει στον ιστότοπό του
Μετά το χαρακτηριστικό, χρησιμοποιήστε μια άνω και κάτω τελεία για να υποδείξετε πώς θα αλλάξετε το χαρακτηριστικό. Για να εισαγάγετε μια εικόνα, χρησιμοποιήστε url (). δηλώνει ότι χρησιμοποιείτε έναν σύνδεσμο για να δείξετε την εικόνα. Τοποθετήστε την τοποθεσία του αρχείου στις αγκύλες μεταξύ εισαγωγικών Τέλος, τελειώστε τη γραμμή με ένα ερωτηματικό. Αν και το κενό διάστημα δεν έχει νόημα στο CSS, χρησιμοποιήστε την εσοχή για να καταστήσετε το CSS ευκολότερο στην ανάγνωση.
Το παράδειγμά μας μοιάζει με αυτό:
Εάν η εικόνα σας δεν εμφανίζεται σωστά λόγω του μεγέθους της εικόνας, μπορείτε να αλλάξετε την εικόνα απευθείας. Ωστόσο, υπάρχουν χαρακτηριστικά στυλ φόντου στο CSS που μπορείτε να χρησιμοποιήσετε για να αλλάξετε το φόντο. Οι εικόνες που είναι μικρότερες από το φόντο θα επαναληφθούν αυτόματα στο παρασκήνιο. Για να το απενεργοποιήσετε, προσθέστε επανάληψη φόντου: χωρίς επανάληψη; στο στοιχείο σας.
Υπάρχουν επίσης δύο τρόποι για να κάνετε μια εικόνα να καλύπτει ολόκληρο το φόντο. Αρχικά, μπορείτε να ορίσετε το μέγεθος φόντου στο μέγεθος της οθόνης με μέγεθος φόντου: 100% 100%;, αλλά αυτό θα τεντώσει την εικόνα και μπορεί να παραμορφώσει υπερβολικά την εικόνα. Εάν δεν θέλετε να αλλάξουν οι αναλογίες της εικόνας, μπορείτε επίσης να ορίσετε το μέγεθος του φόντου κάλυμμα. Το εξώφυλλο θα κάνει την εικόνα φόντου να καλύπτει το φόντο, αλλά όχι να παραμορφώνει την εικόνα.
Αλλαγή του χρώματος φόντου
Ας αλλάξουμε ένα τελευταίο πράγμα. Τώρα που έχουμε φόντο, η παράγραφος μας είναι δύσκολο να διαβαστεί. Ας κάνουμε το φόντο του λευκό. Η διαδικασία είναι παρόμοια. Το στοιχείο που θέλουμε να τροποποιήσουμε είναι #ourParagraph. Το # υποδεικνύει ότι το "ourParagraph" είναι ένα όνομα ταυτότητας. Στη συνέχεια, θέλουμε να ορίσουμε το χρώμα του φόντου χαρακτηριστικό στο λευκό.
σώμα{
background-image: url ("sky.jpg");
}
Π {
text-align: κέντρο
}
#ourΠαράγραφος {
χρώμα φόντου: λευκό;
στυλ περιγράμματος: συμπαγές?
επένδυση: 30px;
}Πολύ καλύτερα.
Συνέχιση του σχεδιασμού του ιστότοπού σας με CSS
Τώρα που ξέρετε πώς να αλλάξετε το στυλ διαφορετικών στοιχείων HTML, ο ουρανός είναι το όριο! Η βασική μέθοδος αλλαγής χαρακτηριστικών στυλ είναι η ίδια. Προσδιορίστε το στοιχείο που θέλετε να αλλάξετε και περιγράψτε πώς να αλλάξετε το χαρακτηριστικό. Ο καλύτερος τρόπος για να μάθετε περισσότερα είναι να παίζετε με διαφορετικά χαρακτηριστικά. Προκαλέστε τον εαυτό σας για να αλλάξετε το χρώμα του κειμένου σας στη συνέχεια.
Θέλετε να μάθετε HTML για να κωδικοποιήσετε τους δικούς σας ιστότοπους και εφαρμογές; Χρησιμοποιήστε αυτά τα παραδείγματα ιστοσελίδων και τον πηγαίο κώδικα για να μάθετε τον εαυτό σας HTML και CSS.
- Προγραμματισμός
- HTML
- Σχεδιασμός ιστοσελίδων
- CSS
Ι. Το Seaton είναι Επιστημονικός Συγγραφέας που ειδικεύεται στη διάλυση σύνθετων θεμάτων. Έχει διδακτορικό από το Πανεπιστήμιο του Σασκάτσουαν. Η έρευνά της επικεντρώθηκε στη χρήση της μάθησης με βάση το παιχνίδι για την αύξηση της αφοσίωσης των μαθητών στο διαδίκτυο. Όταν δεν εργάζεται, θα την βρείτε με την ανάγνωση, το παιχνίδι βιντεοπαιχνιδιών ή την κηπουρική.
Εγγραφείτε στο Newsletter μας
Εγγραφείτε στο ενημερωτικό δελτίο μας για τεχνικές συμβουλές, κριτικές, δωρεάν ebook και αποκλειστικές προσφορές!
Ένα ακόμη βήμα…!
Επιβεβαιώστε τη διεύθυνση email σας στο email που μόλις σας στείλαμε.
