בניית אתר משלך למתחילים: 5 שלבים

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

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

אספקה

• מחשב מקינטוש או Windows (אם כי ניתן להשתמש גם בהפצות לינוקס, אני מדלג עליהם לעת עתה מכיוון שמדובר בהקדמה למתחילים).
• בחירת עורך הטקסט (פנקס רשימות ב- Windows, TextEdit ב- Mac) או בחירת IDE. מניסיוני, מצאתי ש- Visual Studio Code עובד הכי טוב בשביל עצמי, אז אני ממליץ גם לבדוק את זה כאן: https://code.visualstudio.com/ שלא לדבר על זה עובד בכל פלטפורמות מערכת ההפעלה.

שלב 1: תגים וקצת היסטוריה

לאחר שהחלטת על בחירת עורך הטקסט או IDE, נתחיל ביסודות.

תאמין או לא, HTML או שפת הסימון HyperText קיימת כבר כמעט 30 שנה ועם כל שנה הגיעו יותר ויותר שיפורים בשפה. כעת, אתם אולי שואלים, כיצד מפרש דפדפן מה לשים על המסך? הדבר מתבצע בכמה חלקים:

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

להלן כמה מתגי ה- HTML הבסיסיים:

• כותרת - המשמשת לספר לדפדפן מהי כותרת הדף. זה גם מה שאתה רואה כשאתה מסתכל על הכרטיסייה של דף אינטרנט.
• h1, h2, h3, h4 - המשמשים עבור גדלי כותרות שונים כאשר h1 הוא הגדול ביותר ו- h4 הוא הקטן ביותר. אעסוק בנושא נוסף בפרק הבא.
• p - פסקה, משמשת לכתיבת פסקאות טקסט. כמו פסקאות על נייר.
• br - הפסקה, המוסיפה הפסקה בהתאם לטקסט.
• א - משמש ליצירת קישורים לדפים אחרים, כמו קישור שניתן ללחיצה.
• img - משמש לקישור תמונה לדף האינטרנט.
• ul, ol, li - רשימות לא מסודרות, רשימות מסודרות ופריטים ברשימה.
• - משמש לביצוע הערות מוטבעות בקוד אשר לא ייראה למשתמש הקצה.

והנה כמה תגי CSS (חזותיים):

• color - משמש להקצאת צבע ספציפי לאלמנט ספציפי או להגדרה בדף האינטרנט.
• גודל גופן-משמש לשינוי גודל הגופן בדף.
• רקע-צבע-משמש לשינוי צבע הרקע של אלמנט מסוים או של העמוד כולו.

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

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

ומשמשים לסגירת התג כגון

. זה חשוב אחרת הדפדפן לא לא היכן לעצור. בין לבין

ו

תגים, המקום שבו אתה מזין מה שאתה רוצה!

שלב 2: הגדרת עורך

כעת, לאחר שסיקרנו קצת את המרכיבים הבסיסיים של אתר HTML, בואו לצלול ולנסות זאת בעצמנו. בשלב הבא אשתמש ב- Visual Studio Code לתכנת האתר, אך פריסת הקוד תהיה זהה אם נוח לך יותר פשוט להשתמש בפנקס רשימות או ב- TextEdit.

בתוך פנקס הרשימות:

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

בתוך קוד VS:

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

שלב 3: שרטוטים

לאחר ששמרת בהצלחה את קובץ filename.html שלך, נתחיל ביצירת המסגרת של דף האינטרנט שלנו. זכור מלמעלה אילו חלקים מרכזיים בקובץ עלינו להצהיר לפני שנוכל להתחיל ביצירת שאר דף ה- HTML. טיפ טיפ: בעת הפעלת המסגרת לאתר, תג! DOCTYPE HTML אומר לדפדפן שהקובץ שהוא קורא הוא קובץ HTML. זה יכול להיות שימושי אם יש לך סוגים שונים של קוד באותו קובץ וברצונך לעבור בין מתורגמנים. בהיקף ההנחיה הזו, לא נגע בזה יותר מדי, אבל אם לאחר ההוראה הזה אתה סקרן לבדוק עוד על פיתוח HTML, אל תהסס לנסות. אני אכניס את תג HTML! DOCTYPE בראש הקובץ לשיטות עבודה מומלצות. זכור לפתוח ולסגור עם.

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

כעת, לאחר שהגדרת המסמך הושלמה, נוכל לצאת למרוצים ולהנות!

שלב 4: קוד; קוד; קוד;

אנו יכולים להתחיל בהוספת כותרת לקובץ החדש שנוצר שלנו. הכנס מה שאתה רוצה. זכור כי זהו השם המופיע בכרטיסיית הדפדפן. נתחיל גם בהזנת כותרת לאתר שלנו. נזכיר מלפני כיצד אנו עושים זאת. האם שמעתי h1/2/3/4? זה נכון!

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

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

אתה מוזמן לנסות להוסיף תגים ולשחק עם הדברים השונים שאתה יכול לעשות עם HTML. כפי שאתה יכול לראות להלן, הוספתי כמה פסקאות, הפסקות, היפר -קישור חיצוני ל- Instructables.com, תמונה, (שניתן לקשר ממקור חיצוני או מתוך אותה ספרייה שבה מאוחסן קובץ. HTML), דוגמא לרשימה לא מסודרת, רשימה מסודרת, ולבסוף תגובה.

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

שלב 5: מחשבות אחרונות

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