Ιστοσελίδα Bare Bones: 10 Βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:37

Σήμερα θα δημιουργήσουμε μια πολύ απλή, γυμνή ιστοσελίδα από την αρχή. Θα μιλήσουμε για στοιχεία HTML, για το στυλ της ιστοσελίδας σας (χρώματα, γραμματοσειρές, ευθυγράμμιση κ.λπ.), και τέλος πώς να εισαγάγετε μια εικόνα στην ιστοσελίδα σας!

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

Βήμα 1: Χρήση του Σημειωματάριου

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

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

Βήμα 2: Προσθήκη του Βασικού δέντρου εγγράφου HTML

Όλες οι ιστοσελίδες πρέπει να ακολουθούν μια τυπική σκελετική δομή προκειμένου το πρόγραμμα περιήγησής σας (Chrome, Firefox, Edge, Internet Explorer, Safari…) να επεξεργάζεται και να εμφανίζει την ιστοσελίδα σας.

Αυτό ονομάζεται δέντρο εγγράφων html. Στο Σημειωματάριο, πληκτρολογήστε το html "στοιχεία" ή "ετικέτες" όπως εμφανίζεται στο στιγμιότυπο οθόνης. Μη διστάσετε να αντιγράψετε και επικολλήσετε επίσης:

Βήμα 3: Αποθήκευση ως σελίδας.html

Τώρα που έχουμε τη βασική μας δομή html στο Σημειωματάριο, ας την αποθηκεύσουμε έτσι ώστε να μην χάσουμε καμία εργασία και έτσι ώστε να βλέπουμε τις αλλαγές μας καθώς προχωράμε στο Instructable.

1. Επιλέξτε «Αρχείο»> «Αποθήκευση ως…» (Στιγμιότυπο οθόνης 1)
2. Αλλάξτε τον τύπο αρχείου σε "Όλα τα αρχεία" (Στιγμιότυπο οθόνης 2)
3. Δώστε στο αρχείο σας ένα όνομα της επιλογής σας. Βεβαιωθείτε ότι έχετε σημειώσει πού αποθηκεύετε το έγγραφο στον υπολογιστή σας, ώστε να μπορείτε να το ανοίξετε αργότερα. ΣΗΜΕΙΩΣΗ: Το πιο σημαντικό μέρος της αποθήκευσης αυτού του αρχείου είναι η προσθήκη ".html" στο τέλος του ονόματος αρχείου. Αυτό θα επιτρέψει στον υπολογιστή σας να το αναγνωρίσει ως ιστοσελίδα. Έτσι, εάν θέλετε να ονομάσετε το αρχείο σας "my_webpage", φροντίστε να προσθέσετε.html στο τέλος αυτού, π.χ. "my_webpage.html"

Βήμα 4: Προσθήκη τίτλου στην ιστοσελίδα σας

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

Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δώσουμε έναν τίτλο στην ιστοσελίδα μας. Οι περισσότερες ιστοσελίδες έχουν τίτλο. Αυτό εμφανίζεται στην καρτέλα στο πρόγραμμα περιήγησής σας (δείτε το στιγμιότυπο οθόνης). Θα δώσω στον ιστότοπό μου τον τίτλο "Ιστότοπος του Taylor". Για να γίνει αυτό, πρέπει να προσθέσουμε ένα στοιχείο "τίτλου".

Ιστοσελίδα του Taylor

Σε αυτό το σημείο θα παρατηρήσετε ότι κάθε ετικέτα έχει μια ετικέτα "ανοίγματος" και μια ετικέτα "κλεισίματος". Οπως

και.

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

Βήμα 5: Προσθήκη περιεχομένου στην ιστοσελίδα σας

Λοιπόν, έχουμε έναν Τίτλο για την ιστοσελίδα μας, αλλά ακόμα δεν έχουμε πραγματικό περιεχόμενο γι 'αυτόν. Ας προσθέσουμε λίγη αίσθηση!

Προσθέσαμε έναν τίτλο στην ιστοσελίδα μας χρησιμοποιώντας ένα στοιχείο "τίτλου". Ας δώσουμε στην ιστοσελίδα μας μια μεγάλη κεφαλίδα που τραβάει την προσοχή χρησιμοποιώντας ένα στοιχείο «h1» που είναι ένα στοιχείο επικεφαλίδας.

Ιστοσελίδα του Taylor

Καλώς ήρθατε στην ιστοσελίδα μου

Βήμα 6: Προβολή των αλλαγών μας μέχρι τώρα

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

1. Αποθηκεύστε το αρχείο σας στο σημειωματάριο
2. Μεταβείτε εκεί που αποθηκεύσατε το αρχείο σας και κάντε διπλό κλικ σε αυτό. Θα πρέπει να ανοίγει αυτόματα στο προεπιλεγμένο πρόγραμμα περιήγησης ιστού. Δείχνει καλά!

Βήμα 7: Προσθήκη ετικέτας παραγράφου

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

Ιστοσελίδα του Taylor

Καλώς ήρθατε στην ιστοσελίδα μου

Σήμερα θα μάθουμε πώς να δημιουργούμε αυτήν την πολύ απλή ιστοσελίδα!

Σημείωση: Μπορείτε να δείτε τις αλλαγές σας όποτε θέλετε, αποθηκεύοντας το σημειωματάριο και ανοίγοντας το αρχείο.

Βήμα 8: Δώστε λίγο χρώμα

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

Μπορούμε να χρωματίσουμε διαφορετικά στοιχεία προσθέτοντας ένα χαρακτηριστικό "στυλ" στην ετικέτα "p" όπως περιγράφεται παρακάτω παρακάτω:

Ιστοσελίδα του Taylor

Καλώς ήρθατε στην ιστοσελίδα μου

Σήμερα θα μάθουμε πώς να δημιουργούμε αυτήν την πολύ απλή ιστοσελίδα!

Βήμα 9: Προσθήκη εικόνας

Τι είναι ένας ιστότοπος χωρίς εικόνες; Ας προσθέσουμε μια εικόνα στον ιστότοπό μας!

Το πρώτο βήμα είναι να βρείτε μια εικόνα που σας αρέσει. Χρησιμοποίησα εικόνες Google για να αναζητήσω ένα χρυσό retriever. Τραβήξτε την εικόνα προς τα πάνω και βεβαιωθείτε ότι το url τελειώνει σε.jpg,.png,.gif,.jpg, κ.λπ.

Αφού επιλέξετε την εικόνα σας, πρέπει να την προσθέσουμε στη σελίδα html χρησιμοποιώντας μια ετικέτα 'img'. Η εικόνα μου είναι:

Προσθέστε το στη σελίδα σας χρησιμοποιώντας μια ετικέτα 'img' με ένα χαρακτηριστικό 'src':

Ιστοσελίδα του Taylor

Καλώς ήρθατε στην ιστοσελίδα μου

Σήμερα θα μάθουμε πώς να δημιουργούμε αυτήν την πολύ απλή ιστοσελίδα!

Βήμα 10: Προβολή του Τελικού Προϊόντος

Αποθηκεύστε το αρχείο σημειωματάριου και ανοίξτε το τελικό προϊόν. Θα πρέπει να δείτε την ιστοσελίδα σας!