יצירת האתר הראשון שלך: 10 שלבים

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

במדריך זה תלמדו לבנות דף אינטרנט בסיסי הכולל דף סגנונות מקושר וקובץ JavaScript אינטראקטיבי.

שלב 1: יצירת התיקייה שלך

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

שלב 2: יצירת הקובץ הראשון שלך

פתח את עורך הטקסט האהוב עליך. במקרה שלי אני פשוט אשתמש בפנקס המובנה של Windows 10. לאחר שיהיה לך קובץ חדש הקלד את הדברים הבאים:

זהו דף האינטרנט הראשון שלי, שהובא לך על ידי מדריך

זהו מה שמכונה תג HTML. הוא מייצג כותרת 1. הטקסט שאנו מכניסים לתג זה יופיע ככותרת בדף. הוא נפתח ונסגר כך. הטקסט בין שני התגים הוא מה שיוצג בדפדפן האינטרנט שלך. החלק שאומר נותן לתג זה תכונה שאליה נתייחס בשלב x. ברגע שזה נעשה המשך ושמור את הקובץ בתיקייה שיצרנו בשלב 1 בתור index.html.

שלב 3: פתח את הקובץ

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

שלב 4: עיצוב הדף שלך

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

h1 {צבע: כחול; יישור טקסט: מרכז;}

מה שאנו מספרים לדפדפן כאן הוא למצוא כל אלמנט בתג h1 (שלמדנו עליו בשלב 2) ולתת לו צבע כחול וליישר אותו במרכז הדף. שמור קובץ זה בתיקייה שיצרנו בשלב 1 כ- style.css.

שלב 5: קשר את Style.css ל- Index.html שלך

בשלב זה יש לנו שני קבצים נפרדים שאינם יודעים זה על זה. עלינו לספר לקובץ index.html שיש לנו קובץ style.css שאנו רוצים שהוא יתייחס אליו ויתפוס ממנו עיצוב. לשם כך אנו הולכים לפתוח את קובץ index.html שלנו בעורך הטקסט שלנו, ומעל תג h1 שלנו אנו הולכים להוסיף מה שמכונה תג קישור. תג הקישור עושה בדיוק כשמו כן הוא, הוא מקשר למשהו. במקרה שלנו גיליון סגנונות. קדימה והקלד. תג הקישור הוא תג לסגירה עצמית ולכן אין צורך בתג סיום. ה- rel מייצג יחס ו- href מספר לקובץ האינדקס שבו נמצא הקובץ החיצוני שלנו שאליו אנו מתייחסים. כעת שמור את קובץ index.html זה.

שלב 6: צפה בדף החדש שלך

חזור על שלב 3 וטען מחדש את דף האינטרנט שלך והסתכל כיצד השינויים משתקפים.

שלב 7: יצירת כפתור

פתח מחדש את קובץ index.html שלך בעורך הטקסט והקלד את הדברים הבאים:

לחץ עלי!

ושמור את הקובץ. פעולה זו יוצרת רכיב כפתורים בדף. לאחר השמירה, פתח מחדש את הקובץ כפי שמוצג בשלב 3 וודא שהלחצן נמצא בצד שמאל למטה של הדף שלך.

שלב 8: צור את קובץ ה- Javascript שלך

לבסוף אנו הולכים ליצור את קובץ ה- javascript שלנו. זה מה שיהפוך את האתר שלנו לאינטראקטיבי. פתח עורך טקסט והקלד את הדברים הבאים:

document.querySelector ("כפתור#). addEventListener (" קליק ", פונקציה () {

document.querySelector ("#כותרת"). innerText = "שינוי הכותרת תוך כדי תנועה"

})

מה שאנו עושים הוא לבקש מהמסמך למצוא לנו אלמנט עם מזהה הלחצן, והכפתור יגיב לאירוע קליק על ידי שינוי טקסט של רכיבים עם מזהה הכותרת ל"שינוי הכותרת במהירות " ". שמור את הקובץ כ- button.js בתיקייה שיצרנו בשלב 1.

שלב 9: קשר את קבצי ה- Javascript והאינדקס שלך

כפי שעשינו בקובץ style.css, עלינו לספר לקובץ index.html על קובץ ה- javascript שלנו. בתחתית מתחת לכל מה שעשינו עד כה הקלד את הדברים הבאים:

תג הסקריפט מאפשר לנו להוסיף שפת סקריפטים (במקרה שלנו, javascript) כדי לספק פונקציונליות לדף שלנו. אנו אומרים לו לחפש קובץ בשם button.js ולהוסיף את כל הקוד הכלול בתוכו לקובץ האינדקס שלנו. לאחר שהקלדת את זה, שמור את הקובץ ופתח את הקובץ שוב כפי שמוצג בשלב 3.

שלב 10: בדוק את הכפתור החדש שנוצר

עכשיו קדימה, לחץ על הכפתור וצפה בכותרת משתנה!

מזל טוב!! יצרת כעת את דף האינטרנט האינטראקטיבי הראשון שלך! מעניין כמה רחוק אתה יכול לקחת את זה בידיעה מה שאתה יודע עכשיו ??