יצירת אתר לאיתור בית קפה: 9 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-02-01 14:40

במדריך זה אראה לך כיצד ליצור אתר פשוט המציג בתי קפה בקרבתך, באמצעות מפות Google, HTML ו- CSS

אספקה

מחשב

עורך טקסט (אני משתמש באטום)

חיבור wifi

שלב 1: בחר עורך טקסט

אני משתמש ב- Atom, אותו ניתן להוריד כאן. לאחר שהורדתו נפתחה הוא יוצר פרויקט חדש

שלב 2: צור את הפרויקט החדש שלך

1. פתח את אטום
2. מצא קובץ
3. מתחת לקובץ לחץ על חדש
4. בפינה השמאלית התחתונה (mac) יהיה כפתור ליצירת תיקיה חדשה
5. תן שם לתיקייה שלך 'אתר מפה'
6. הקש פתוח בצד ימין למטה

שלב 3: צור את Index.html שלך

1. הוסף קובץ חדש לתיקייה שלך (באטום לחץ לחיצה ימנית על התיקייה ולחץ על חדש)
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. גודל הגופן = 40 פיקסלים;
6. }

שלב 9: Revision

זהו זה! אתה סיימת. למדת את היסודות של HTML, CSS וקוד מוטמע, כל הכבוד. אתה יכול לערוך את הקוד כך שיתאים לטעמך ולגרום לו להציג מפה של כל מה שאתה רוצה. מכאן תוכל להמשיך את מסע בניית האתרים שלך ולשפר לנצח.