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