Φτιάξτε μια καφετέρια Εντοπισμός ιστότοπου: 9 βήματα

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

Σε αυτό το Instructable θα σας δείξω πώς να φτιάξετε έναν απλό ιστότοπο που εμφανίζει καφετέριες κοντά σας, χρησιμοποιώντας τους Χάρτες Google, HTML και CSS

Προμήθειες

Ενας υπολογιστής

Ένας επεξεργαστής κειμένου (χρησιμοποιώ το Atom)

Μια σύνδεση wifi

Βήμα 1: Επιλέξτε έναν επεξεργαστή κειμένου

Χρησιμοποιώ το Atom, το οποίο μπορείτε να κατεβάσετε εδώ. Μόλις ολοκληρωθεί η λήψη του, δημιουργήστε ένα νέο έργο

Βήμα 2: Δημιουργήστε το νέο σας έργο

1. Άνοιγμα Atom
2. Εύρεση αρχείου
3. Κάτω από το αρχείο κάντε κλικ στο νέο
4. κάτω αριστερά (mac) θα υπάρχει ένα κουμπί για να δημιουργήσετε έναν νέο φάκελο
5. ονομάστε το φάκελό σας '' Ιστότοπος χάρτη ''
6. Πατήστε άνοιγμα κάτω δεξιά

Βήμα 3: Δημιουργήστε το Index.html σας

1. Προσθέστε ένα νέο αρχείο στο φάκελό σας (In atom κάντε δεξί κλικ στο φάκελο και πατήστε νέο)
2. Ονομάστε αυτό το αρχείο "Index.html"
3. Προσθέστε αυτήν τη βασική δομή HTML, Αυτό χρησιμοποιείται σε κάθε έργο HTML:

Βήμα 4: Λήψη του χάρτη σας

1. Επισκεφτείτε τους χάρτες Google εδώ: Χάρτες Google
2. Αναζητήστε καφέ
3. θα πρέπει να πάρετε όλα τα καφενεία στη γενική σας περιοχή
4. κάντε κλικ στις τρεις γραμμές δίπλα στον καφέ
5. εύρεση κοινής χρήσης ή ενσωμάτωση χάρτη
6. επιλέξτε ενσωματωμένο χάρτη
7. Επιλέξτε το μέγεθος του χάρτη (χρησιμοποίησα το Large) και οριστικοποιήστε την τοποθεσία σας
8. πατήστε αντίγραφο HTML

Βήμα 5: Προσθήκη στον ιστότοπο

1. Επιστρέψτε στο αρχείο HTML.
2. ανάμεσα στις δύο ετικέτες "" εισάγετε αυτόν τον κωδικό:

'

ΚΑΦΕΝΙΚΑ ΚΑΤΑΣΤΗΜΑΤΑ ΚΟΝΤΑ ΣΑΣ

«Ο ΚΩΔΙΚΟΣ ΕΓΚΑΤΑΣΤΑΣΗΣ ΑΠΟ ΧΑΡΤΕΣ GOOGLE»

'

Βήμα 6: Προεπισκόπηση

Αυτό έγινε το πρώτο μέρος!

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

Βήμα 7: Κάντε το να φαίνεται καλύτερο

1. Μεταξύ των δύο ετικετών προσθέστε "Καφετέριες κοντά μου"
2. Προσθέστε ένα νέο αρχείο με τον ίδιο τρόπο που δημιουργήσατε το "Index.html" αλλά ονομάστε το "Style.css"
3. πίσω στο αρχείο HTML, γράψτε αυτόν τον κωδικό πάνω από τον τίτλο σας,"
4. Μεταβείτε στις εικόνες Google και κατεβάστε ένα χαριτωμένο κλιπ για ένα φλιτζάνι καφέ
5. Προσθέστε την εικόνα στο φάκελο που περιέχει τα υπόλοιπα αρχεία μας
6. στο αρχείο CSS, γράψτε τον ακόλουθο κώδικα: 'body {
7. φόντο-εικόνα: url (ΤΟ ΟΝΟΜΑ ΤΗΣ ΕΙΚΟΝΑΣ);
8. μέγεθος φόντου: εξώφυλλο.
9. }'

Βήμα 8: Κάντε το να φαίνεται καλύτερα Pt2

1. αν αποθηκεύσουμε και κάνουμε προεπισκόπηση τώρα, μπορούμε να δούμε ότι το φόντο των ιστότοπων είναι τώρα κεραμωμένο με τα φλιτζάνια του καφέ μας
2. Δυστυχώς είναι δύσκολο να διαβάσουμε τον τίτλο μας
3. Έτσι, στο CSS, κάτω από το 'σώμα {}' προσθέστε τον ακόλουθο κώδικα: h1 {
4. φόντο-χρώμα = rgb (255, 255, 255);
5. font-size = 40px;
6. }

Βήμα 9: ΑΝΑΘΕΩΡΗΣΗ

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