Πώς να κωδικοποιήσετε έναν ιστότοπο

Πώς να κωδικοποιήσετε έναν ιστότοποΘέλετε να μάθετε πώς να δημιουργείτε έναν ιστότοπο με HTML και CSS?


Βρίσκεστε στο σωστό μέρος. Σε αυτόν τον οδηγό, σας δείχνουμε όλα τα βήματα για να μεταβείτε από μια κενή οθόνη σε έναν ιστότοπο εργασίας που είναι βελτιστοποιημένος και αρκετά όμορφος ταυτόχρονα.

Αλλά πρώτα, τι είναι HTML και CSS?

Λοιπόν, θα μπορούσατε απλώς να αναζητήσετε και τους δύο όρους στη Wikipedia, αλλά αυτοί οι ορισμοί δεν είναι πολύ φιλικοί για τον αναγνώστη. Ας απλοποιήσουμε λίγο τα πράγματα:

  • HTML (Hypertext Markup Language) καθορίζει τη δομή και το περιεχόμενο μιας ιστοσελίδας – όπου τα πράγματα πάνε, πως έχουν σχεδιαστεί, και τι είναι στη σελίδα
  • CSS (Cascading Style Sheets) ορίζει το στυλ / παρουσίαση μιας ιστοσελίδας και τα στοιχεία της

Δεν μπορείτε πραγματικά να έχετε ένα χωρίς το άλλο – οι δύο συνεργάζονται για να συνθέσουν την τελική ιστοσελίδα, τη σχεδίασή της και το περιεχόμενο που υπάρχει σε αυτήν.

Σημείωση; όταν λέμε “μια ιστοσελίδα”, αυτό που εννοούμε είναι ένα ενιαίο έγγραφο HTML – μια μεμονωμένη σελίδα που ανήκει στον ιστότοπό σας. Ενώ, «ένας ιστότοπος» είναι το πλήρες πράγμα – ολόκληρος ο ιστότοπός σας με όλες τις μεμονωμένες ιστοσελίδες του.

Πώς να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας HTML και CSS (πίνακας περιεχομένων):

  1. Μάθετε τα βασικά του HTML
  2. Κατανοήστε τη δομή εγγράφων HTML
  3. Γνωρίστε τους επιλογείς CSS
  4. Συνδυάστε ένα φύλλο στυλ CSS
  5. Αποκτήστε το Bootstrap
  6. Διαλέξτε ένα σχέδιο
  7. Προσαρμόστε τον ιστότοπό σας με HTML και CSS
  8. Προσθέστε περιεχόμενο και εικόνες
  9. Λεπτομέρειες χρωμάτων και γραμματοσειρών
  10. Δημιουργήστε επιπλέον σελίδες

Συνολικός χρόνος δημιουργίας ιστότοπου: 4-5 ώρες
Επιπεδο ΙΚΑΝΟΤΗΤΑΣ: Ενδιάμεσος

Εάν πιστεύετε ότι αυτό είναι πολύ περίπλοκο, σας προτείνουμε είτε να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας το WordPress είτε να επιλέξετε έναν από τους δημιουργούς ιστότοπων. Μπορείτε επίσης να δείτε μια λίστα με τα επιλεγμένα καλύτερα IDE για ανάπτυξη ιστού. 

Contents

Πριν ξεκινήσετε, συγκεντρώστε τους πόρους σας:

Έτσι, το πρώτο πράγμα που χρειάζεστε ακόμη και πριν δημιουργήσετε έναν ιστότοπο με HTML και CSS είναι ένας διακομιστής ιστού (φιλοξενία). Μην ανησυχείτε, ωστόσο. δεν χρειάζεται να αγοράσετε το δικό σας μηχάνημα. Πολλές εταιρείες φιλοξενίας ιστοσελίδων θα σας πουλήσουν μια απλή υπηρεσία φιλοξενίας στους υπολογιστές τους. Απλώς κάντε google στο “web hosting” και επιλέξτε κάτι που δεν είναι πολύ ακριβό.

Με το διακομιστή ταξινομημένο, το επόμενο πράγμα που χρειάζεστε είναι ένα όνομα τομέα. Το όνομα τομέα είναι αυτό που ο ιστότοπος αναγνωρίζεται στον Ιστό. Για παράδειγμα, το όνομα τομέα αυτού του ιστότοπου είναι ιστοσελίδεςetup.org.

Όταν έχετε και ένα όνομα τομέα και έναν διακομιστή, μπορείτε να συνδέσετε τα δύο μαζί.

Πλήρης αποκάλυψη: Κερδίζουμε προμήθεια εάν καταλήξετε να αγοράσετε το Bluehost μέσω των συνδέσμων παραπομπής σε αυτόν τον οδηγό. Αυτό μας βοηθά να διατηρούμε τη λειτουργία της Εγκατάστασης Ιστοσελίδας και να είναι ενημερωμένη. Ευχαριστώ για την υποστήριξη.

Για να επιλυθεί αυτό χωρίς πόνο, προτείνουμε να εγγραφείτε σε μια εταιρεία σαν Μπλε Χοστ.

Θα χειριστούν όλες τις ρυθμίσεις για εσάς. Αυτό σημαίνει ότι θα: (ένα) δημιουργήστε έναν λογαριασμό φιλοξενίας για εσάς, (σι) καταχωρήστε ένα όνομα τομέα για λογαριασμό σας, (ντο) διαμορφώστε τα πάντα ώστε να συνεργάζονται και (ρε) σας δίνουν πρόσβαση σε έναν εύχρηστο ταμπλό.

Προχωρήστε και εγγραφείτε Μπλε Χοστ, θα περιμένουμε Όταν επιστρέψετε και ο διακομιστής ιστού σας έχει διαμορφωθεί και έτοιμος να ξεκινήσει, μεταβείτε στο επόμενο βήμα.

ΥΣΤΕΡΟΓΡΑΦΟ. Εάν θέλετε απλώς να πειραματιστείτε με έναν ιστότοπο HTML στον υπολογιστή σας, και δεν σκοπεύετε να το δημοσιεύσετε, χρησιμοποιήστε ένα τοπικό λογισμικό διακομιστή ιστού. Αυτό που προτείνουμε και θέλουμε να χρησιμοποιήσουμε ονομάζεται XAMPP. Έχει εκδόσεις τόσο για Mac όσο και για υπολογιστή και είναι εύκολο στη χρήση. Εδώ είναι ένας οδηγός σχετικά με τον τρόπο εγκατάστασής του στον υπολογιστή σας.

1. Μάθετε τα βασικά του HTML

Το κύριο στοιχείο μιας δομής HTML είναι ένα HTML ετικέτα.

Μια ετικέτα, για παράδειγμα, μοιάζει με αυτήν:

ΚΑΤΙ

Εδώ, έχουμε να κάνουμε με ένα ετικέτα. Αυτό θα το κάνει τολμηρός ένα κομμάτι κειμένου που βρίσκεται μεταξύ της αρχικής ετικέτας () και την ετικέτα κλεισίματος (). Σε αυτήν την περίπτωση, αυτό το κομμάτι κειμένου είναι ΚΑΤΙ.

Υπάρχουν όμως και άλλες ετικέτες, για να αναφέρουμε μερικές:

  • ... θα πλάσει το κείμενο μεταξύ των ετικετών ανοίγματος και κλεισίματος
  • ... θα το υπογραμμίσει
  • ...

    είναι μια παράγραφος του κειμένου


  • ...

    είναι η κύρια κεφαλίδα της σελίδας

Εκτός από αυτές τις απλές ετικέτες, υπάρχουν επίσης πιο περίπλοκες ετικέτες. Για παράδειγμα, εάν θέλετε να δημιουργήσετε μια λίστα όπως η ακόλουθη:

  • Θέμα 1
  • Θέμα 2
  • Θέμα 3

… Μπορείτε να το κάνετε με τον ακόλουθο κώδικα HTML:

  • Θέμα 1
  • Θέμα 2
  • Θέμα 3

Ή, εάν θέλετε να προσθέσετε έναν σύνδεσμο σε άλλη σελίδα, όπως αυτή:

Αυτός είναι ένας σύνδεσμος προς την αρχική μας σελίδα

… Μπορείτε να το κάνετε με αυτό το κομμάτι κώδικα:

Αυτός είναι ένας σύνδεσμος προς την αρχική μου σελίδα

Διαβάστε αυτό για να πάρετε το πλήρης λίστα ετικετών HTML. Θα γίνει χρήσιμο καθώς δημιουργείτε έναν ιστότοπο με HTML και CSS.

2. Κατανοήστε τη δομή εγγράφων HTML

Σκεφτείτε τη σελίδα HTML σας σαν να ήταν φτιαγμένη από Legos. Βάζετε διαφορετικά τούβλα το ένα πάνω στο άλλο για να καταλήξετε σε μια δεδομένη μεγαλύτερη δομή.

Αλλά αντί για τούβλα Lego, λαμβάνετε ετικέτες HTML…

Εδώ είναι η απλούστερη δομή εγγράφων HTML:





Γειά σου Κόσμε!


Γειά σου Κόσμε!

Η πρώτη μου ιστοσελίδα.

Μπορείτε να πάρετε τον παραπάνω κωδικό, να τον αντιγράψετε και να τον επικολλήσετε σε ένα νέο αρχείο, να αποθηκεύσετε το έγγραφο ως index.html, και πρόκειται να είναι μια απόλυτα έγκυρη σελίδα HTML.

Ας εξηγήσουμε τα μεμονωμένα μέρη αυτού του κώδικα:

  • – την αρχική δήλωση του εγγράφου
  • – άλλη δήλωση · λέει ότι αυτό που θα ακολουθήσει είναι ένα έγγραφο HTML γραμμένο στα Αγγλικά
  • – σηματοδοτεί την έναρξη του κεφάλι Ενότητα; ο κεφάλι Το τμήμα είναι όπου πηγαίνουν όλες οι βασικές παράμετροι της σελίδας. τα περισσότερα από αυτά δεν θα εμφανίζονται στην οθόνη. απλά ορίζουν τι συμβαίνει κάτω από την κουκούλα
  • – καθορίζει το σύνολο χαρακτήρων που χρησιμοποιείται για τη σύνταξη του εγγράφου. δεν χρειάζεται να αφιερώσετε πολύ χρόνο σε αυτό. απλώς χρησιμοποιήστε αυτήν τη δήλωση ως έχει
  • Γειά σου Κόσμε! – ο τίτλος της σελίδας · αυτό θα βλέπουν οι χρήστες στη γραμμή τίτλου των προγραμμάτων περιήγησής τους, π.χ.

τίτλος στο πρόγραμμα περιήγησης ιστού κατά τη δημιουργία ενός ιστότοπου με HTML και CSS

  • – σηματοδοτεί την έναρξη του σώμα Ενότητα; εδώ είναι που πηγαίνει όλο το περιεχόμενο της σελίδας. είναι το κύριο μέρος ενός εγγράφου HTML. ας το τονίσουμε αυτό, σε αυτήν την ενότητα θα συμπεριλάβετε όλο το περιεχόμενο που πρόκειται να εμφανιστεί στη σελίδα

  • Γειά σου Κόσμε!

    – η κύρια κεφαλίδα της σελίδας

  • Η πρώτη μου ιστοσελίδα.

    – μια απλή παράγραφος κειμένου

  • – η ετικέτα κλεισίματος ολόκληρου του εγγράφου HTML

Μια σημαντική σημείωση εδώ. Η εργασία σε ένα αρχείο HTML σε μια βασική εφαρμογή κειμένου ή σε έναν περίπλοκο επεξεργαστή κειμένου όπως το MS Word δεν είναι καλή εμπειρία. Για να κάνετε τα πράγματα εύκολα στον εαυτό σας, εγκαταστήστε ένα εργαλείο που ονομάζεται Υψηλό κείμενο. Έχει εκδόσεις για Mac και PC και είναι δωρεάν.

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

η εξαιρετική σύνταξη είναι εξαιρετική όταν δημιουργείτε έναν ιστότοπο με HTML και CSS

Εντάξει, επιστρέψτε στο θέμα. Μπορείτε να το πάρετε νέο index.html αρχείο του δικού σας, αντιγράψτε το στο σημείο όπου βρίσκεται ο κύριος κατάλογος του διακομιστή ιστού σας και, στη συνέχεια, δείτε τη σελίδα μεταβαίνοντας σε αυτήν μέσω ενός προγράμματος περιήγησης ιστού. Μην ενθουσιαστείτε όμως. αυτή η σελίδα θα είναι μάλλον άσχημη (δείτε παρακάτω).

αυτή η σελίδα είναι άσχημη

Εντάξει, οπότε η σελίδα είναι άσχημη, πώς να την κάνουμε όχι?

3. Γνωρίστε τους επιλογείς CSS

Όπως το HTML έχει τις ετικέτες του, το CSS έχει επιλογείς.

Οι επιλογείς περιγράφουν πώς ένα δεδομένο στοιχείο πρέπει να συμπεριφέρεται με εμφάνιση. Ακολουθεί ένα παράδειγμα επιλογέα CSS:

Π {
μέγεθος γραμματοσειράς: 18px;
}

Αυτός ο επιλογέας δείχνει ότι όλη η HTML

Οι ετικέτες στο έγγραφο θα έχουν μέγεθος γραμματοσειράς 18px.

Ωστόσο, ένας πιο πρακτικός τρόπος χρήσης των επιλογών CSS δεν είναι να περιορίσετε όλες τις ετικέτες ενός δεδομένου τύπου σε ένα συγκεκριμένο στυλ, αλλά να δημιουργήσετε διαφορετικά «τάξεις» και να τα αντιστοιχίσετε σε ετικέτες μία προς μία.

Για παράδειγμα, ένας επιλογέας τάξης στο CSS μοιάζει με αυτό:

.κανονικό κείμενο {
μέγεθος γραμματοσειράς: 18px;
}

Παρατηρήστε την τελεία (.) πριν από το όνομα της τάξης (κανονικό κείμενο). Με την ονομασία “κανονικό κείμενο”, μπορούμε πλέον να αντιστοιχίσουμε αυτήν την κλάση σε συγκεκριμένες ετικέτες HTML που θέλουμε να κάνουμε σε μέγεθος 18 εικονοστοιχείων.

Για παράδειγμα:

Αυτό το κείμενο θα είναι 18 εικονοστοιχεία.

Ας πάρουμε ένα ακόμη λεπτό για να εξηγήσουμε όλα τα στοιχεία αυτού του κομματιού κώδικα CSS παραπάνω:

  • .κανονικό κείμενο – ορισμός τάξης · τα πάντα μετά το όνομα της τάξης και μεταξύ των αγκυλών ανοίγματος και κλεισίματος {} καθορίζει πώς θα εμφανίζονται τα στοιχεία που έχουν εκχωρηθεί σε αυτήν την τάξη
  • μέγεθος γραμματοσειράς – ένα παράδειγμα ιδιότητας CSS
  • 18 εικονοστοιχεία – μια τιμή που έχει εκχωρηθεί στην ιδιοκτησία

Υπάρχει ένας τόνος ιδιοτήτων CSS εκτός από τα παραπάνω μέγεθος γραμματοσειράς. Εδώ είναι το πλήρης λίστα αν είσαι περίεργος.

4. Βάλτε μαζί ένα φύλλο στυλ CSS

Ένα έγγραφο HTML είναι πολύ δομικό – κάθε στοιχείο έχει τη θέση του και η σειρά των στοιχείων είναι ζωτικής σημασίας για την τελική κατασκευή και εμφάνιση της εν λόγω ιστοσελίδας. Ένα έγγραφο CSS είναι πολύ λιγότερο.

Τα έγγραφα CSS αναφέρονται συχνά ως φύλλα στυλ. Βασικά, ένα φύλλο στυλ CSS είναι μια λίστα με όλους τους ορισμούς κλάσης που χρησιμοποιούνται στο αντίστοιχο έγγραφο HTML. Η σειρά των ορισμών της τάξης δεν είναι τόσο κρίσιμη τις περισσότερες φορές (τουλάχιστον για απλά σχέδια).

Ο τρόπος με τον οποίο συνδυάζετε ένα φύλλο στυλ CSS είναι ορίζοντας κάθε τάξη ένα προς ένα και, στη συνέχεια, ελέγξτε εάν το αποτέλεσμα στη σχεδίαση της σελίδας σας είναι αυτό που θέλετε.

Αυτό ακούγεται σαν κουραστική δουλειά, και είναι.

Αλλά θα σας κάνουμε τα πράγματα πιο εύκολα και δεν θα σας αναγκάσουμε να μάθετε χειροκίνητα τη σχεδίαση HTML και CSS. Αντί να σας διδάξουμε τα πάντα από το μηδέν, θα πάρουμε έναν ζωντανό οργανισμό και θα αναλύσουμε τα στοιχεία του.

Εδώ μπαίνει ένα παιχνίδι που ονομάζεται Bootstrap.

5. Λήψη / Εγκατάσταση Bootstrap

Το Bootstrap είναι μια εργαλειοθήκη ανοιχτού κώδικα για τη δημιουργία ενός ιστότοπου με HTML και CSS.

Στα απλά αγγλικά, το Bootstrap φροντίζει τη βασική δομή ενός εγγράφου HTML και ένα φύλλο στυλ CSS για εσάς. Παρέχει ένα πλαίσιο που διασφαλίζει ότι το κύριο ικρίωμα της ιστοσελίδας σας είναι έτοιμο και βελτιστοποιημένο για περαιτέρω ανάπτυξη.

Βασικά, το Bootstrap δεν σας επιτρέπει να ξεκινήσετε από το μηδέν, και αντ ‘αυτού πηγαίνετε κατευθείαν στο διασκεδαστικό μέρος. Με αυτό, δεν χρειάζεται να εργαστείτε στα συχνά βαρετά πρώτα στάδια της δημιουργίας ενός ιστότοπου με HTML και CSS.

Υπάρχουν δύο διαδρομές που μπορείτε να ακολουθήσετε:

  • Επιλογή (ένα): μάθετε Bootstrap – μεταβείτε στην αρχική σελίδα του Bootstrap, κατεβάστε το κύριο πακέτο Bootstrap και ξεκινήστε να δημιουργείτε πάνω από αυτό.
  • Επιλογή (σι): πάρτε μια συντόμευση – αποκτήστε ένα πακέτο εκκίνησης για το Bootstrap με έναν όμορφο σχεδιασμό και μια ήδη δοκιμαστική ιστοσελίδα.

Επιλογή (ένα) μπορεί να έχει κάποια καμπύλη εκμάθησης στην αρχή, αλλά δεν είναι με κανένα τρόπο ο χειρότερος τρόπος να προσεγγίσετε τη δημιουργία ενός ιστότοπου με HTML και CSS. Μόλις κυριαρχήσετε στη βασική δομή Bootstrap, ίσως είναι πιο εύκολο για εσάς να δημιουργήσετε νέες σελίδες και να τις κάνετε να φαίνονται ακριβώς όπως τις θέλετε. ο Τεκμηρίωση Bootstrap είναι ένα εξαιρετικό μέρος για να ξεκινήσετε με αυτό το μονοπάτι.

Θα πάμε με την επιλογή (σι) για αυτόν τον οδηγό. Αυτό το κάνουμε για μερικούς λόγους, επικεφαλής τους:

Ξεκινώντας με μια έτοιμη δομή εξοικονομεί πολύ πόνο στην προσπάθεια να καταλάβουμε τις βασικές ανάγκες ενός εγγράφου HTML. Αυτό σας επιτρέπει να επικεντρωθείτε στα ενδιαφέροντα πράγματα – όπως να σχεδιάσετε περιεχόμενο και να το κάνετε να φαίνεται καλό.

Εν ολίγοις, η εκμάθηση πραγμάτων με αυτόν τον τρόπο θα σας δώσει ένα πιο όμορφο αποτέλεσμα πιο γρήγορα, το οποίο υποθέτουμε ότι είναι αυτό που θέλετε.

6. Επιλέξτε ένα σχέδιο

Όταν δημιουργείτε έναν ιστότοπο με HTML και CSS, μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρότυπο Bootstrap θέλετε. Όλοι πρέπει να λειτουργούν αρκετά παρόμοια.

Ωστόσο, για αυτόν τον οδηγό, θα χρησιμοποιήσουμε ένα από τα πρότυπα έως Ξεκινήστε το Bootstrap. Έχουν μια ωραία επιλογή δωρεάν προτύπων που είναι βελτιστοποιημένα, λειτουργούν χωρίς προβλήματα και είναι επίσης πολύ καλά σχεδιασμένα.

Το θέμα που πρόκειται να χρησιμοποιήσουμε ονομάζεται Δημιουργικός. Το τελικό αποτέλεσμα που θα αναζητήσουμε θα μοιάζει με αυτό:

τελική αρχική σελίδα μετά τη δημιουργία ενός ιστότοπου με HTML και CSS

Αρχικά, το πρότυπο Creative, κάντε κλικ στο ΔΩΡΕΑΝ Λήψη κουμπί που βρίσκεται στα δεξιά (ενεργοποιημένο αυτή η σελίδα) και αποθηκεύστε το πακέτο zip στην επιφάνεια εργασίας σας.

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

Τώρα ανοίξτε αυτήν την τοποθεσία μέσω του προγράμματος περιήγησης ιστού. Θα δείτε την έκδοση μετοχών του προτύπου:

εκκίνηση προτύπου bootstrap

Είναι ήδη αρκετά όμορφο, αλλά τώρα ήρθε η ώρα να μάθετε πώς να χρησιμοποιείτε HTML και CSS για να τα κάνετε ακριβώς σε αυτό που θέλετε να είναι.

7. Προσαρμόστε τον ιστότοπό σας με HTML και CSS

Ας δουλέψουμε πρώτα στην αρχική σελίδα του σχεδιασμού. Αυτό θα μας δείξει πώς να αντικαταστήσουμε τα γραφικά, τα κείμενα και να συντονίσουμε τα πάντα γενικά.

Μιλήσαμε για λίγο πάνω από την κύρια ενότητα ενός εγγράφου HTML. Ας ρίξουμε μια πιο εμπεριστατωμένη ματιά εδώ.

Όταν ανοίγετε το index.html αρχείο του ιστότοπού σας Bootstrap σε Sublime Text, θα δείτε μια κεφαλίδα όπως αυτή (καταργήσαμε όλα τα μη κρίσιμα πράγματα από αυτόν τον κώδικα για λόγους σαφήνειας *):






Δημιουργικό - Ξεκινήστε το θέμα Bootstrap





* Εκτός από τα παραπάνω, υπήρχε επίσης κώδικας για τη φόρτωση γραμματοσειρών Google, εικονιδίων Font Awesome και μιας μονάδας lightbox για τις εικόνες που εμφανίζονται στη σελίδα.

Οι περισσότερες από τις δηλώσεις εδώ γνωρίζουμε ήδη, αλλά υπάρχουν μερικές νέες:

  • Πρώτα απ ‘όλα, τα πάντα μεταξύ του Οι αγκύλες είναι ένα σχόλιο HTML. Δεν εμφανίζεται στην τελική σελίδα.
  • – είναι μία από τις ετικέτες δήλωσης του Bootstrap. Καθορίζει το μέγεθος της θύρας προβολής του ιστότοπου.
  • – αυτή η γραμμή φορτώνει το φύλλο στυλ CSS του προτύπου Creative και φιλοξενεί επίσης το προεπιλεγμένο φύλλο στυλ του Bootstrap.

Ας τροποποιήσουμε αυτήν την τελευταία δήλωση – τη γραμμή φόρτωσης του CSS – για να διευκολύνουμε την εργασία με αργότερα.

Αλλαγή αυτής της γραμμής σε:


Αυτή είναι μια μικρή διαφορά – θα φορτώσει τη μη συντομευμένη έκδοση του ίδιου φύλλου CSS. Αυτή η έκδοση είναι πιο εύκολη στην τροποποίηση.

Τώρα μετακινηθείτε προς τα κάτω στο κάτω μέρος του index.html αρχείο. Θα δείτε τις ακόλουθες γραμμές ακριβώς πριν από το κλείσιμο σώμα ετικέτα:

        

Είναι υπεύθυνοι για τη φόρτωση αρχείων JavaScript που χειρίζονται μερικές από τις πιο οπτικές αλληλεπιδράσεις του σχεδιασμού. Για παράδειγμα, όταν κάνετε κλικ στο Σχετικά με σύνδεσμος στο επάνω μενού, θα μεταφερθείτε ομαλά στο σχετικό μπλοκ στην ίδια σελίδα – αυτό, μεταξύ άλλων, γίνεται μέσω JavaScript. Δεν χρειάζεται να δυσκολευόμαστε να κατανοήσουμε αυτόν τον κώδικα αυτήν τη στιγμή. Ας το αφήσουμε για άλλη μια φορά.

Αντ ‘αυτού, ας εργαστούμε για την προσθήκη του δικού μας περιεχομένου στη σελίδα:

8. Προσθέστε περιεχόμενο και εικόνες

Το πρώτο πράγμα που θέλετε να κάνετε είναι να αλλάξετε τον τίτλο της σελίδας.

1. Αλλάξτε τον τίτλο

Βρες το τίτλος ετικέτα στην ενότητα κεφαλίδας και αντικαταστήστε το κείμενο μεταξύ των ετικετών σε κάτι δικό σας:

Ο ιστότοπός μου HTML

2. Προσαρμόστε την ενότητα Ήρωας

Το τμήμα ήρωα είναι αυτό που αποκαλούμε μπλοκ:

τμήμα ήρωας

Θα ήταν ωραίο να έχουμε το δικό μας περιεχόμενο μέσα σε αυτό. Για να τροποποιήσετε αυτό το μπλοκ, επιστρέψτε στο index.html αρχείο και βρείτε αυτήν την ενότητα:

...


...

Μάθετε περισσότερα

Όλο αυτό το μπλοκ κώδικα ελέγχει τι υπάρχει στην ενότητα ήρωας.

Υπάρχουν μερικές νέες ετικέτες εδώ:


  • – αυτή είναι μια ετικέτα που ορίζει ότι ολόκληρη η ενότητα είναι η κεφαλίδα της σελίδας. αυτή η ετικέτα έχει μερικά αδέλφια με τη μορφή του
    ετικέτα και
    ετικέτα
  • – είναι μια γενική ετικέτα CSS που δείχνει ότι αυτό που ακολουθεί είναι μια ξεχωριστή ενότητα (γνωστός και ως διαίρεση) στο έγγραφο HTML. Η χρήση του καθιστά ευκολότερη την οπτική διάκριση μεμονωμένων ενοτήτων στη σελίδα

Θα παρατηρήσετε επίσης ότι ορισμένες από τις άλλες ετικέτες (τις οποίες ήδη γνωρίζουμε) φαίνεται να είναι λίγο πιο περίπλοκες, με πολλές κατηγορίες CSS που τους έχουν ανατεθεί. Για παράδειγμα:

...

Τα μαθήματα που έχουν ανατεθεί στο

ετικέτα εδώ είναι κείμενο-κεφαλαίο κείμενο-λευκό γραμματοσειρά-βάρος-έντονη.

Αυτά τα μαθήματα έχουν δημιουργηθεί από το Bootstrap και από τον προγραμματιστή του θέματος Creative. Τα καλά νέα είναι ότι μπορείτε επίσης να τα χρησιμοποιήσετε ελεύθερα όταν δημιουργείτε έναν ιστότοπο με HTML και CSS.

Ειλικρινά, μπορείτε να προσαρμόσετε οποιαδήποτε ετικέτα προσθέτετε στη δομή της σελίδας σας, αναθέτοντας οποιονδήποτε αριθμό τάξεων σε αυτήν.

Εάν θέλετε να δείτε την πλήρη λίστα των διαθέσιμων τάξεων, μπορείτε να ανοίξετε την κύρια creative.css αρχείο που βρίσκεται στο css υποκατάλογος του θέματος Creative.

Η κατανόηση όλων αυτών των τάξεων μπορεί να φαίνεται εκφοβιστική στην αρχή, αλλά στην πραγματικότητα είναι πολύ πιο εύκολο από ό, τι φαίνεται.

Για παράδειγμα, μία από τις τάξεις που έχουν ανατεθεί σε ορισμένες από τις παραγράφους στο δικό μας index.html το αρχείο είναι γραμματοσειρά-ελαφρύ. Όταν πηδάτε στο creative.css αρχείο και ctrl + f ψάχνοντας για αυτό το όνομα τάξης, θα δείτε ότι ορίζει απλώς το βάρος γραμματοσειράς παράμετρος όπως έτσι:

.γραμματοσειρά-ελαφρύ {
βάρος γραμματοσειράς: 300;
}

Τροποποίηση των προεπιλεγμένων κειμένων στο index.html το αρχείο είναι πολύ απλό. Απλώς βρείτε την ετικέτα που θέλετε να επεξεργαστείτε και αλλάξτε τι υπάρχει ανάμεσα στις ετικέτες ανοίγματος και κλεισίματος.

Για παράδειγμα, για να αλλάξετε τον κύριο τίτλο, απλώς αλλάξτε αυτό:

Το αγαπημένο σου ...

Σε κάτι σαν το εξής:

Θαυμάστε τον ιστότοπό μου HTML!

Μπορείτε να κάνετε το ίδιο με όλες τις παραγράφους και άλλες ετικέτες στη σελίδα.

Αυτό που είναι σημαντικό είναι ότι μπορείτε επίσης να προσθέσετε νέες παραγράφους ελεύθερα. Για παράδειγμα, μπορούμε να πάρουμε την παράγραφο που υπάρχει ήδη στη σελίδα, να δημιουργήσουμε ένα αντίγραφο και να την επικολλήσουμε ακριβώς κάτω από την αρχική παράγραφο. έτσι:

Ξεκινήστε το Bootstrap μπορεί ...

Παράγραφος 2

Τώρα, με τη φροντίδα των κειμένων, ας αντικαταστήσουμε την εικόνα που βρίσκεται στο παρασκήνιο.

Αυτό είναι λίγο πιο περίπλοκο να κάνουμε αφού απαιτεί από εμάς να πάμε στο αρχείο φύλλου στυλ CSS και να κάνουμε την τροποποίηση εκεί. Όπως μπορείτε να δείτε στον κώδικα HTML του Κορυφή ιστού ενότητα, καμία ετικέτα δεν θα έδειχνε να συμπεριλαμβάνεται μια εικόνα στη σελίδα με οποιονδήποτε τρόπο. Όλα αυτά γίνονται μέσω CSS.

Όταν ρίξετε μια άλλη ματιά σε ολόκληρο το μπλοκ του κώδικα που χειρίζεται το Κορυφή ιστού ενότητα, θα δείτε ότι έχει ανατεθεί σε μια τάξη που ονομάζεται κορυφή ιστού. Αυτή η γραμμή κώδικα χειρίζεται την εκχώρηση τάξης:

ο κορυφή ιστού class είναι αυτή που βάζει μια εικόνα στο παρασκήνιο ολόκληρου του μπλοκ.

Ας ανοίξουμε το creative.css αρχείο ξανά και αναζητήστε την τάξη “masthead”:

header.masthead {
επένδυση: 10rem;
επένδυση-κάτω: calc (10rem - 72px);
φόντο: γραμμική-κλίση (προς τα κάτω, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" )
φόντο-θέση: κέντρο;
επανάληψη φόντου: όχι-επανάληψη;
παρασκήνιο-συνημμένο: κύλιση;
μέγεθος φόντου: κάλυμμα;
}

Αυτός ο κώδικας κάνει όλα τα φανταχτερά πράγματα στην εικόνα μας (όπως προσθήκη επικάλυψης, σκίαση κ.λπ.), αλλά το σημαντικό μέρος είναι αυτό: url ("../ img / bg-masthead.jpg"). Αυτή είναι η γραμμή που δείχνει πού θα βρείτε την εικόνα φόντου. Θα είναι στο π.χ. υποκατάλογος.

Για να αλλάξετε αυτήν την εικόνα φόντου, τραβήξτε οποιαδήποτε δική σας εικόνα, αντιγράψτε την στο π.χ. υποκατάλογο και, στη συνέχεια, αντιγράψτε και επικολλήστε το όνομά του στη θέση του πρωτοτύπου bg-masthead.jpg αρχείο. Εν ολίγοις, αλλάξτε αυτό: url ("../ img / bg-masthead.jpg") σ ‘αυτό: url ("../ img / YOURFILE.jpg").

3. Προσαρμόστε τα άλλα μπλοκ στη σελίδα

Καθώς περνάτε από το index.html αρχείο, θα παρατηρήσετε ότι υπάρχουν ήδη πολλές διαφορετικές ενότητες στη σελίδα. Έχουμε ένα τμήμα για το πλοήγηση, και σχετικά με ένα μπλοκ, μερικά Υπηρεσίες, ένα χαρτοφυλάκιο, ένα πρόσκληση σε δράση, ένα Επικοινωνία μπλοκ, και a υποσέλιδο.

Ενώ υπάρχει διαφορετικό περιεχόμενο σε όλες αυτές τις ενότητες, οι ίδιες οι ενότητες έχουν παρόμοια δομή. Όλοι τους έχουν περίπου το ίδιο σύνολο ετικετών HTML – μόνο διαφορετικές κατηγορίες CSS που τους έχουν ανατεθεί.

Ο καλύτερος τρόπος για να τροποποιήσετε τη σελίδα για να ταιριάζει στις ανάγκες σας είναι να περάσετε τα μπλοκ ένα προς ένα και να πειραματιστείτε αλλάζοντας τα πράγματα.

Εκτός από την τροποποίηση των κειμένων, μπορείτε επίσης να μετακινήσετε ολόκληρες ενότητες (τα μέρη μεταξύ του

ετικέτες). Βεβαίως, πρέπει να το κάνετε αυτό με το χέρι (κόβοντας και στη συνέχεια επικολλώντας στοιχεία στη θέση του), είναι ακόμα εύκολο να το κάνετε.

Με αυτά τα λόγια, υπάρχουν δύο αρκετά βασικές τροποποιήσεις για τις οποίες δεν έχουμε συζητήσει ακόμη. Ας καλύψουμε τα εξής:

9. Λεπτά χρώματα και γραμματοσειρές

Η αλλαγή χρωμάτων ή γραμματοσειρών είναι πολύ εύκολο να γίνει σε HTML και CSS. Το απλούστερο πράγμα που μπορείτε να κάνετε είναι να αντιστοιχίσετε κάποιο ενσωματωμένο στυλ σε μια ετικέτα HTML. Για παράδειγμα:

Κόκκινο κείμενο

Σε HTML, τα χρώματα αντιπροσωπεύονται από τις δεκαεξαδικές τιμές τους. Το “# FF0000” είναι κόκκινο. Εδώ είναι ένας πίνακας όλων των άλλων τυπικά χρώματα.

Ένας καλύτερος τρόπος για να ορίσετε χρώματα είναι να το κάνετε μέσω του φύλλου στυλ CSS. Για παράδειγμα, για να έχουμε το ίδιο εφέ με τον παραπάνω κώδικα, θα μπορούσαμε να το βάλουμε στο φύλλο στυλ CSS:

σελ. {
χρώμα: # FF0000;
}

Στη συνέχεια, χρησιμοποιήστε το ακόλουθο κομμάτι κώδικα HTML στο κύριο έγγραφο:

Κόκκινο κείμενο

Αυτή η δεύτερη μέθοδος είναι βασικά πώς γίνονται τα πράγματα στο Bootstrap.

Για να αλλάξετε το χρώμα οποιουδήποτε κειμένου στη σελίδα, βρείτε πρώτα την ετικέτα που είναι υπεύθυνη για το στυλ αυτού του κειμένου και, στη συνέχεια, μεταβείτε στο φύλλο στυλ και τροποποιήστε την αντίστοιχη κλάση ή δημιουργήστε μια νέα τάξη.

Εδώ είναι ένα παράδειγμα. ας πούμε ότι θέλετε να αλλάξετε το χρώμα της κεφαλίδας λέγοντας “Στην υπηρεσία σας”. Προς το παρόν, είναι μαύρο και αυτός είναι ο κωδικός που το χειρίζεται:

Στη διάθεσή σας

Για να αλλάξετε το χρώμα του, ο καλύτερος τρόπος είναι να δημιουργήσετε μια νέα τάξη που ονομάζεται, ας πούμε, .κείμενο-πορτοκαλί και ορίστε την τιμή χρώματος εκεί, όπως:

.κείμενο-πορτοκαλί {
χρώμα: # f4623a! σημαντικό;
}

* Ο !σπουδαίος θα βεβαιωθείτε ότι αυτή η ρύθμιση χρώματος θα αντικαταστήσει οποιαδήποτε άλλη ρύθμιση χρώματος που προηγήθηκε.

Τώρα, μπορούμε να επιστρέψουμε στην κεφαλίδα μας και να αλλάξουμε τον κωδικό του σε:

Στη διάθεσή σας

Με αυτές τις αλλαγές, η κεφαλίδα θα είναι τώρα πορτοκαλί:

πορτοκαλί h2

Για να αλλάξετε τη γραμματοσειρά και το μέγεθός της, μπορείτε να κάνετε κάτι παρόμοιο. Αλλά πρώτα, ένα παράδειγμα του πώς φαίνεται ένα μπλοκ ορισμού γραμματοσειράς στο CSS:

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
μέγεθος γραμματοσειράς: 18px;
}
  • φόρτωση γραμματοσειρών Merriweather, Ρομπότο, και προεπιλογή συστήματος Σανς σέριφ γραμματοσειρά (διαβάστε αυτό για να μάθετε για γραμματοσειρές που είναι ασφαλείς στον ιστό)
  • ορίστε το μέγεθος της γραμματοσειράς σε 18px

Αυτό το είδος ορισμού μπορεί να τοποθετηθεί σε οποιαδήποτε κατηγορία CSS, όπως και ο ορισμός χρώματος. Στην πραγματικότητα, οι ορισμοί γραμματοσειράς και χρώματος βρίσκονται συχνά στις ίδιες δηλώσεις τάξης.

Επιστρέφοντας στο προηγούμενο παράδειγμά μας, για να αλλάξουμε το μέγεθος της γραμματοσειράς για αυτήν την κεφαλίδα που λέει “Στην υπηρεσία σας”, θα μπορούσαμε πρώτα να δημιουργήσουμε μια τάξη όπως αυτή:

.κείμενο-xxl {
μέγεθος γραμματοσειράς: 50px;
}

Και, στη συνέχεια, εκχωρήστε αυτήν την τάξη στην κεφαλίδα:

Στη διάθεσή σας

�� Όταν αλλάζετε τα χρώματα ή τις γραμματοσειρές στο πρότυπο που έχετε δημιουργήσει το Bootstrap, ρίξτε πρώτα μια ματιά στο φύλλο στυλ CSS για τάξεις που ενδέχεται να σας παρέχουν ήδη εναλλακτικά μεγέθη ή χρώματα. Χρησιμοποιήστε αυτά όπου είναι διαθέσιμα.

10. Δημιουργήστε πρόσθετες σελίδες

Τώρα που έχετε προσαρμόσει την αρχική σελίδα, ήρθε η ώρα να αρχίσετε να εργάζεστε σε μερικές επιπλέον σελίδες και στη συνέχεια να τις συνδέσετε στην αρχική σελίδα.

Κατά τη δημιουργία ενός ιστότοπου με HTML και CSS, μπορείτε να δημιουργήσετε οποιονδήποτε αριθμό υποσελίδων και στη συνέχεια να τις συνδέσετε όλες μαζί.

Ακολουθούν μερικές από τις κοινές σελίδες που χρειάζονται οι περισσότεροι ιστότοποι:

  • σχετικά με τη σελίδα
  • Επικοινωνία
  • χαρτοφυλάκιο
  • Προιόντα και Υπηρεσίες
  • ομάδα
  • πολιτικές (πολιτική απορρήτου, όροι κ.λπ.)

1. Ξεκινήστε με τη διάταξη

Κατά τη δημιουργία μιας νέας ιστοσελίδας, η πρώτη απόφαση που πρέπει να λάβετε είναι αυτό που θέλετε να είναι η διάταξη.

Όταν δημιουργείτε έναν ιστότοπο με HTML και CSS, τίποτα δεν σας εμποδίζει να δημιουργήσετε ό, τι να ‘ναι διάταξη που θέλετε. Η μόνη δυσκολία είναι να το βάλουμε μαζί.

Το HTML και το CSS μπορεί να είναι δύσκολο να αντιμετωπιστούν όταν ξεκινούν από μια κενή οθόνη, οπότε θα χρησιμοποιήσουμε και το Bootstrap εδώ. Πρώτον, θα σας δείξουμε μερικές αρχές δημιουργίας μιας διάταξης και, στη συνέχεια, θα δείξουμε πώς να το κάνετε με το Bootstrap.

Ο τρόπος με τον οποίο μπορείτε να σκεφτείτε τη διάταξη της ιστοσελίδας σας είναι να το θεωρήσετε μια ακολουθία μεμονωμένων μπλοκ – το ένα πάνω από το άλλο. Κάτι σαν αυτό (παρατηρήστε τα τέσσερα ξεχωριστά μπλοκ):

τη διάταξη κατά τη δημιουργία ενός ιστότοπου με HTML και CSS

Το μεγάλο πράγμα για το Bootstrap είναι ότι χειρίζεται τις βασικές αρχές διάταξης και τις λεπτομέρειες εμφάνισης για εσάς, ώστε να μπορείτε να εστιάσετε στην τοποθέτηση αυτών των μπλοκ στα σωστά μέρη.

Σε αυτήν την ενότητα του οδηγού, θα δημιουργήσουμε μια νέα σελίδα “σχετικά”.

Αρχικά, θα δημιουργήσουμε ένα πολύ βασικό έργο της διάταξης. Κάτι σαν το παραπάνω.

  • υπάρχει ένα μενού πλοήγησης στην κορυφή,
  • ένα μπλοκ τίτλου πλήρους πλάτους κάτω από το μενού,
  • η κύρια ενότητα περιεχομένου στη μέση, κουτί στο κέντρο της οθόνης (όχι πλήρους πλάτους),
  • και ένα υποσέλιδο.

Τώρα ας δημιουργήσουμε αυτήν τη διάταξη σε HTML.

2. Δημιουργήστε μια νέα σελίδα

Ο ευκολότερος τρόπος για να ξεκινήσετε να εργάζεστε σε μια νέα σελίδα είναι να αντιγράψετε μια υπάρχουσα σελίδα και να την χρησιμοποιήσετε ως πρότυπο. Αυτό θα κάνουμε.

Δημιουργήστε ένα αντίγραφο του index.html αρχείο και μετονομάστε το about.html.

Για να διευκολύνετε τη διάκριση των σελίδων σε αυτό το πρώιμο στάδιο, επεξεργαστείτε τις νέες about.html αρχειοθετήστε και αλλάξτε τι υπάρχει στο </code> ετικέτα. Για παράδειγμα, <code><title>Σχετικά με μένα.

Τώρα ας ρίξουμε μια ματιά σε κάθε γραμμή του αρχείου και να αποφασίσουμε τι θα αφήσουμε και τι θα αφαιρέσουμε:

  • ο πλοήγηση μενού (παρακάτω ). Ίσως θέλετε να διατηρήσετε αυτήν την ενότητα ανέπαφη, απλώς για να κάνετε την εμπειρία πλοήγησης ομοιόμορφη σε όλες τις σελίδες.
  • ο κύριος ήρωας ενότητα (παρακάτω ). Αυτό δεν θα χρειαζόμαστε σύμφωνα με το έργο διάταξής μας. Μπορείτε να προχωρήσετε και να διαγράψετε ολόκληρη την ενότητα.
  • ο σχετικά με ενότητα (παρακάτω ). Θα χρησιμοποιήσουμε ξανά αυτήν την ενότητα ως το κύριο μπλοκ επικεφαλίδων.
  • ο Υπηρεσίες Ενότητα, χαρτοφυλάκιο Ενότητα, πρόσκληση σε δράση ενότητα, και Επικοινωνία ενότητα (τα πάντα μεταξύ και ). Δεν χρειαζόμαστε καθόλου αυτές τις ενότητες. Μπορείτε να προχωρήσετε και να τα διαγράψετε.
  • ο υποσέλιδο ενότητα και όλα κάτω από αυτό (παρακάτω ). Αυτό θα πρέπει να διατηρήσουμε.

Αυτό καθιστά τον τρέχοντα κώδικα αρκετά απλό. Βασικά είναι ακριβώς αυτό:



























Αυτό που μας λείπει είναι το κυρίως περιεχόμενο Ενότητα. Για να το φτιάξουμε, θα χρησιμοποιήσουμε ξανά την ενότητα σχετικά.

Προχωρήστε και δημιουργήστε ένα αντίγραφο της ενότητας περίπου. Αυτό:

...


...

Τώρα αλλάξτε τις δύο πρώτες γραμμές σε αυτό:

Δεδομένου ότι δεν χρειαζόμαστε το

κεφαλίδα εκεί και το

στοιχείο, ας τα καταργήσουμε. Το μόνο που μένει μέσα σε ολόκληρο το μπλοκ θα είναι μια παράγραφος κειμένου. Όπως:

Μια παράγραφος κειμένου.

Όταν αποθηκεύετε το αρχείο και πλοηγηθείτε σε αυτό μέσω του προγράμματος περιήγησής σας, θα δείτε ότι βασικά έχετε δύο πολύ παρόμοια μπλοκ το ένα κάτω από το άλλο, με το ίδιο χρώμα φόντου:

σχετικά με την κεφαλίδα της σελίδας

Θα ήταν καλύτερα να έχετε ένα λευκό φόντο στην κύρια ενότητα περιεχομένου. Για να το αλλάξουμε, το μόνο που πρέπει να κάνουμε είναι να αφαιρέσουμε το bg-πρωτογενές τάξη από την κύρια

ετικέτα. Με άλλα λόγια, κάντε την ετικέτα σε αυτό:

Αυτό είναι καλύτερο:

σχετικά με την κεφαλίδα της σελίδας 2

Ας προσθέσουμε μερικές πλαστές παραγράφους στη σελίδα για να την συμπληρώσουμε περισσότερο, καθώς και ίσως μια υπο-κεφαλή:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Υπότιτλος

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Δείτε πώς φαίνεται στη σελίδα:

περίπου ver 1

Εάν δεν θέλετε το κείμενο να είναι στο κέντρο, απλώς αφαιρέστε το κέντρο κειμένου τάξη από ένα από τα

ετικέτες.

περίπου ver 2

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

και

ετικέτες:

Lorem ipsum dolor καθίσει amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Υπότιτλος

Και εδώ είναι το αποτέλεσμα:

περίπου ver 3

Ένα ακόμη πράγμα που πρόκειται να κάνουμε εδώ είναι να προσθέσουμε μια εικόνα κάπου στη σελίδα.

Δείτε πώς φαίνεται ένα παράδειγμα ετικέτας εικόνας σε HTML:


Αρκετά απλό, σωστά; Η μόνη παράμετρος είναι η διαδρομή προς το αρχείο εικόνας. Για να διατηρήσετε τα πράγματα καλά οργανωμένα, μπορείτε να βάλετε την εικόνα σας στο π.χ. ξανά τον κατάλογο (όπως κάνατε με αυτό το φόντο πριν από λίγο). Σε μια τέτοια περίπτωση, η ετικέτα εικόνας θα είναι:


Τούτου λεχθέντος, η ετικέτα εικόνας σε αυτήν τη συγκεκριμένη διαμόρφωση είναι αρκετά περιορισμένη. Για να το κάνουμε λίγο πιο εκλεπτυσμένο, ας του αναθέσουμε μερικές τάξεις Bootstrap. Ιδιαίτερα:


Αυτές οι δύο κατηγορίες θα δώσουν στην εικόνα σας στρογγυλεμένες γωνίες και θα διασφαλίσουν επίσης ότι το μέγεθος της εικόνας δεν θα υπερβαίνει το μέγεθος του μπλοκ όπου κάθεται.

Τώρα μπορείτε να προσθέσετε μια τέτοια ετικέτα κάπου στην κύρια ενότητα περιεχομένου της σελίδας σας σχετικά. Για παράδειγμα, εδώ:

Lorem ipsum dolor καθίσει amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Υπότιτλος

Και εδώ είναι το τελικό αποτέλεσμα στη σελίδα:

περίπου ver 4

Αυτή είναι η σελίδα μας σχετικά με τη δόξα της:

η σελίδα ολοκληρώθηκε

3. Σύνδεσμος προς τη νέα σελίδα

Με τη νέα σελίδα ολοκληρωμένη, ας συνδέσουμε τώρα από την αρχική σελίδα (το index.html αρχείο). Φυσικά, το καλύτερο μέρος για να προσθέσετε αυτόν τον σύνδεσμο είναι στο μενού πλοήγησης (παρακάτω ).

Συγκεκριμένα, αναζητήστε αυτήν τη γραμμή:

Σχετικά με

Θα το αλλάξουμε σε αυτό:

Σχετικά με

Αυτό είναι κάτι για το οποίο δεν έχουμε μιλήσει ακόμη, αλλά το Η ετικέτα είναι μια ετικέτα συνδέσμου σε HTML. Χρησιμοποιώντας το, μπορείτε να συνδέσετε σε οποιαδήποτε ιστοσελίδα παρέχοντας τη διεύθυνση αυτής της σελίδας στο href παράμετρος. Το κείμενο του συνδέσμου – το τμήμα του συνδέσμου με δυνατότητα κλικ – θα είναι το κείμενο μεταξύ του ανοίγματος και του κλεισίματος ετικέτες.

Όταν ανανεώνετε την αρχική σελίδα τώρα, θα δείτε τον νέο σας σύνδεσμο να δείχνει προς τη σελίδα σχετικά.

Περαιτέρω ανάγνωση:

Σε αυτό το στάδιο, δημιουργήσατε βασικά έναν απλό ιστότοπο που αποτελείται από δύο σελίδες – α αρχική σελίδα και ένα σχετικά με σελίδα.

Αυτό που πρέπει να κάνετε τώρα είναι να ξεπλύνετε και να επαναλάβετε δημιουργώντας νέες σελίδες, προσαρμόζοντάς τις, προσθέτοντας περιεχόμενο σε αυτές και, στη συνέχεια, συνδέοντας τα πάντα από το μενού πλοήγησης.

Άλλα πράγματα που αξίζει να κάνετε καθώς ακολουθείτε αυτά τα βήματα είναι η περαιτέρω εκμάθηση των αρχών HTML και CSS, μέσω της λίστας ελέγχου, καθώς και εκμάθηση του Bootstrap και των δομών και των τάξεων του. Ορισμένοι πόροι για αυτό:

  • Φύλλο εξαπάτησης HTML5
  • Φύλλο εξαπάτησης CSS
  • Φύλλο εξαπάτησης Javascript
  • Σεμινάριο HTML
  • Εκμάθηση εκκίνησης
  • Φύλλο εξαπάτησης Bootstrap

Το Mastering Bootstrap, πιθανότατα η καλύτερη διαδρομή που είναι διαθέσιμη σήμερα για τη δημιουργία βελτιστοποιημένων και όμορφων ιστότοπων με HTML και CSS.

Εάν έχετε απορίες σχετικά με τη δημιουργία ιστότοπου με HTML και CSS, μην διστάσετε να τα υποβάλετε στα σχόλια.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map