דף אינטרנט של עצמות חשופות: 10 שלבים

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

היום אנו הולכים ליצור דף אינטרנט פשוט וחשוף מאפס. נדבר על רכיבי 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 הבסיסי הדרוש לדפדפני האינטרנט לפרש ולהציג את דף האינטרנט שלנו, אך אין לנו שום תוכן. בואו נשנה את זה!

הדבר הראשון שעלינו לעשות הוא לתת כותרת לדף האינטרנט שלנו. כמעט לכל דפי האינטרנט יש כותרת. זה מה שמוצג בכרטיסייה בדפדפן האינטרנט שלך (ראה צילום מסך). אני הולך לתת לדף האינטרנט שלי את הכותרת "אתר טיילור". לשם כך עלינו להוסיף רכיב 'כותרת'.

האתר של טיילור

בשלב זה תבחין כי לכל תג יש תג "פתיחה" ותג "סגירה". כמו

ו.

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

שלב 5: הוספת תוכן לדף האינטרנט שלך

ובכן, יש לנו כותרת לדף האינטרנט שלנו, אך עדיין אין לנו תוכן ממשי עבורו. נוסיף קצת כישרון!

הוספנו כותרת לדף האינטרנט שלנו באמצעות רכיב 'כותרת'. בואו לתת לדף האינטרנט שלנו כותרת גדולה ותופסת תשומת לב באמצעות רכיב 'h1' שהוא רכיב כותרת.

האתר של טיילור

ברוכים הבאים לדף האינטרנט שלי

שלב 6: צפייה בשינויים שלנו עד כה

יש לנו כותרת, יש לנו קצת תוכן, בואו לבדוק את דף האינטרנט שלנו כיצד הוא מגיע עד כה.

1. שמור את הקובץ שלך בפנקס הרשימות
2. עבור למקום שבו שמרת את הקובץ ולחץ עליו פעמיים. הוא אמור להיפתח אוטומטית בדפדפן ברירת המחדל שלך. נראה טוב!

שלב 7: הוספת תג פסקה

יש לנו כותרת, כותרת, עכשיו נוסיף פסקה עם עוד טקסט. שם האלמנט לפסקה הוא 'p'. אתה יכול לראות את השימוש בו למטה:

האתר של טיילור

ברוכים הבאים לדף האינטרנט שלי

היום נלמד כיצד ליצור דף אינטרנט פשוט מאוד זה!

הערה: תוכל לצפות בשינויים שלך בכל עת שתרצה על ידי שמירת פנקס רשימות ופתיחת הקובץ.

שלב 8: תן לזה קצת צבע

דף האינטרנט שלנו מתגלגל מיד, אבל זה די פשוט. בואו לתת לתג הפסקה שלנו קצת צבע!

אנו יכולים לצבוע אלמנטים שונים על ידי הוספת תכונת 'סגנון' לתג 'p' כמפורט להלן:

האתר של טיילור

ברוכים הבאים לדף האינטרנט שלי

היום נלמד כיצד ליצור דף אינטרנט פשוט מאוד זה!

שלב 9: הוספת תמונה

מהו אתר ללא תמונות? הוסיפו תמונה לאתר שלנו!

השלב הראשון הוא למצוא תמונה שאתה אוהב. השתמשתי בתמונות גוגל כדי לחפש גולדן רטריבר. משוך את התמונה למעלה וודא כי כתובת האתר מסתיימת ב-.jpg,.png,.gif,-j.webp

לאחר שבחרת את התמונה שלך, עלינו להוסיף אותה לדף ה- html באמצעות תג 'img'. התמונה שלי היא:

הוסף אותו לדף שלך באמצעות תג 'img' עם תכונת 'src':

האתר של טיילור

ברוכים הבאים לדף האינטרנט שלי

היום נלמד כיצד ליצור דף אינטרנט פשוט מאוד זה!

שלב 10: צפייה במוצר הסופי

שמור את קובץ פנקס הרשימות ופתח את המוצר הסופי. אתה אמור לראות את דף האינטרנט שלך!