למד כיצד נבנה אתר אינטרנט על ידי הצגת קוד המקור שלו
כשהתחלתי את הקריירה שלי כמעצב אינטרנט, למדתי כל כך הרבה על ידי סקירת עבודתם של מעצבי אתרים אחרים שהעריצו אותי. אני לא לבד בזה. בין אם אתה חדש בתעשיית האינטרנט או ותיק מנוסה, הצגת מקור ה- HTML של דפי אינטרנט שונים הוא משהו שאתה צפוי לעשות פעמים רבות במהלך הקריירה שלך.
עבור אלה שאינם חדשים לעיצוב אתרים, הצגת קוד המקור של האתר היא אחת הדרכים הקלות ביותר לראות כיצד דברים מסוימים נעשים, כך שתוכל ללמוד מהעבודה ולהתחיל להשתמש בקוד או בטכניקות מסוימות בעבודה שלך. כמו כל מעצב אינטרנט עובד היום, במיוחד אלה שהיו בו מאז ימיו הראשונים של התעשייה, וזה הימור בטוח כי הם אומרים לך הם למדו HTML פשוט על ידי הצגת המקור של דפי האינטרנט שהם ראו היו מסוקרנים על ידי. בנוסף לקריאת ספרי עיצוב אתרים או השתתפות בכנסים מקצועיים , הצפייה בקוד המקור של האתר היא דרך מצוינת למתחילים ללמוד HTML.
יותר מאשר רק HTML
דבר אחד שיש לזכור הוא כי קבצי המקור יכול להיות מסובך מאוד (וככל שהאתר שאתה מציג יותר מורכב, כך סביר יותר שקוד האתר יהיה). בנוסף למבנה ה- HTML שמרכיב את הדף שבו אתה צופה, יהיו גם CSS (גיליונות סגנונות מדורגים) המכתיבים את המראה החזותי של האתר. בנוסף, אתרי אינטרנט רבים היום יכלול קבצי Script הכלולים יחד עם HTML.
סביר להניח שיש מספר קבצי Script הכלולים, למעשה, כל אחד powering היבטים שונים של האתר. למען האמת, קוד המקור של האתר יכול להיראות מדהים, במיוחד אם אתה חדש לעשות את זה. לא מתוסכל אם אתה לא יכול להבין מה קורה עם האתר מיד. הצגת מקור ה- HTML היא רק הצעד הראשון בתהליך זה. עם קצת ניסיון, תתחיל להבין טוב יותר איך כל אלה חתיכות להתאים יחד כדי ליצור את האתר שאתה רואה בדפדפן שלך. כפי שאתה מקבל יותר מכיר את הקוד, תוכל ללמוד יותר ממנו וזה לא נראה לעשות daunting לך.
אז איך אתה מציג את קוד המקור של אתר אינטרנט? להלן הוראות שלב אחר שלב לעשות זאת באמצעות דפדפן Google Chrome.
צעד אחר צעד הוראות
- פתח את דפדפן האינטרנט של Google Chrome (אם Google Chrome אינו מותקן, זהו הורדה חינם).
- נווט אל דף האינטרנט שברצונך לבדוק .
- לחץ לחיצה ימנית על הדף והסתכל על התפריט שמופיע. מתפריט זה, לחץ על הצג מקור דף .
- קוד המקור של דף זה יופיע כעת ככרטיסייה חדשה בדפדפן.
- לחלופין, ניתן גם להשתמש במקשי הקיצור של CTRL + U במחשב כדי לפתוח חלון עם קוד המקור של האתר המוצג. ב- Mac, קיצור דרך זה הוא Command + Alt + U.
כלי מפתח
בנוסף ליכולת ' מקור הדף' של 'תצוגה מפורטת' ש- Google Chrome מציע, תוכל גם לנצל את כלי הפיתוח המדהימים שלהם כדי לחפור עמוק יותר באתר. כלים אלה יאפשרו לך לראות לא רק את ה- HTML, אלא גם את ה- CSS שמתאים להצגת אלמנטים במסמך HTML זה.
כדי להשתמש בכלים למפתחים של Chrome:
- פתח את Google Chrome .
- נווט אל דף האינטרנט שברצונך לבדוק .
- לחץ על הסמל עם שלוש שורות בפינה השמאלית העליונה של חלון הדפדפן.
- מהתפריט, העבר את העכבר מעל כלים נוספים ולאחר מכן לחץ על כלים למפתחים בתפריט שמופיע.
- פעולה זו תפתח חלון המציג את קוד המקור HTML בצד שמאל של החלונית ואת CSS בנושא בצד ימין.
- לחלופין, אם תלחץ באמצעות לחצן העכבר הימני על אלמנט בדף אינטרנט ותבחר באפשרות בדוק מהתפריט שמופיע, כלי הפיתוח של Chrome יופיעו והאלמנט המדויק שבחרת יסומן ב- HTML עם CSS המתאים המוצג מימין. זה סופר מועיל אם אתה רוצה ללמוד עוד על איך חתיכה אחת ספציפית של האתר היה בעל מבנה.
האם קוד המקור צופה משפטי?
במהלך השנים, היו לי הרבה מעצבי אתרים חדשים השאלה אם זה מקובל להציג קוד המקור של האתר ולהשתמש בו לחינוך שלהם ובסופו של דבר על העבודה שהם עושים. בעת העתקת קוד האתר הסיטונאי והעברת אותו כמו שלך באתר הוא בהחלט לא מקובל, באמצעות קוד כמו קרש קפיצה ללמוד הוא למעשה כמה התקדמות נעשים בענף זה.
כפי שהזכרתי בתחילת מאמר זה, אתה תהיה קשה למצוא עבודה באינטרנט מקצועי היום שלא למדו משהו על ידי הצגת המקור של האתר! כן, הצפייה בקוד המקור של האתר חוקית. שימוש בקוד זה כמשאב לבניית משהו דומה הוא גם בסדר. לוקח את הקוד כפי שהוא עובר את זה כמו העבודה שלך היא המקום שבו אתה מתחיל להיתקל בבעיות.
בסופו של דבר, מקצועני האינטרנט לומדים זה מזה ולעיתים קרובות לשפר את העבודה שהם רואים בהשראת, ולכן אל תהססו להציג קוד המקור של האתר ולהשתמש בו ככלי למידה.