וובמאסטר - תיכנות ובניית אתרים

מדריך Internet Explorer 9 למפתחים - תחקור HTML

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 6 מרץ, 2011
F+
F-

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

בואו וננסה אותו! נכנס לדף כלשהו (לצורך העניין אינטרנט ישראל) ונלחץ על HTML:

תחקור HTML

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

לחיצה על החץ

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

בחירה בחץ, לחיצה על אלמנט

מיד אנו יכולים לראות את האלמנט שבחרנו אותו עם החץ בהיררכית ה-HTML וכן תוצג מסביבו מסגרת כחולה שמציגה אותו.

אנו יכולים לבחון ולשנות את ה-CSS של האלמנט בקלות מדהימה - שימו לב לחלקו הימני של החלון (ה-Style) :

Style window

כל מה שקשור לעיצוב של האלמנט מוצג פה - כאשר ההיררכיה היא מלמטה למעלה. למטה מוצגים כל ה-classים הספציפיים יותר (ולפיכך הקובעים יותר) ולמעלה מוצגים ה-classים הכלליים יותר. אחד הדברים שתשימו לב אליהם מיד הם אותם עיצובים שמחוקים בקו חוצה. אלו הם css styles שנעשה להם override על ידי class יותר גבוה בהיררכיה. למשל:

image

אנו יכולים לראות שההגדרה של צבע קישור שהוגדרה ב-CSS לקישור, נדרסה על ידי ההגדרה היותר ספציפית (קישור שנמצא בתוך אלמנט H1 שנמצא בתוך אלמנט עם id של header-bg).

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

שינוי תכונה

אם נקליד פעמיים על התכונה עצמה, נוכל לשנות אותה! כך למשל אני יכול להקליק על תכונת הצבע ולשנות אותה לירוק:

שינוי התכונה

לחיצה על Trace Styles מציגה את הסגנונות של האלמנט שנבחר בצורה שונה במקצת (פחות נוחה לטעמי):

trace styles

לחיצה על Layout מציגה את הרוחב, האורך, השוליים וה-padding של האלמנט שנבחר באופן נוח ונעים:

Layout

ניתן ללחוץ על כל ערך ולשנות את הגודל שלו לפי רצוננו.

השימוש ב-Attributes מאפשר לנו לראות את תכונות ה-inline של האלמנט ולהוסיף תכונות משלנו. על מנת להוסיף תכונה מסוימת, עלינו ללחוץ על סימן הפלוס הירוק ולכתוב את התכונה והערך שלה:

 

שינוי תכונה

יש auto complete וקל ביותר להכניס וגם למחוק את התכונות.

לאחר שסיימנו עם השינויים השונים בדף, אנו יכולים לשמור הן את ה-HTML והן את ה-CSS באמצעות לחיצה על כפתור השמירה:

image

כאשר אנו יכולים לבחור לשמור את ה-HTML ולשמור את ה-CSS.

רן בר-זיק, אינטרנט ישראל

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

אינטרנט ישראל: www.internet-israel.com
תגיות: IE9‏  /  מדריך‏  /  פיתוח‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות