Israeli Government Tech Site

< םירתא תקוזחת
הליזומ ןפדפדל רתא תמאתה

הליזומ ןפדפדל רתא תמאתה

220Kb

הליזומ ןפדפדל רתא תמאתה :ךמסמה םש
2003 רבמטפס :הביתכ ךיראת
יתשר ודודו אריפש רואיל :ךמסמה יבתוכ

רתא תיינבב םינקתב שומיש
םינפדפד יגוס המכל םימאתומה טנרטניא יפד חותיפ
( check list ) הליזומל המאתה תוקידב תמישר
םינפדפדה ןיב םילדבההו םינקת פ"ע הביתכ ןיינעב םירושיקו ףסונ עדימ

אובמ

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

ךמסמה הנבמ

ןפדפדל רתא לש המאתהו הקידבל רושקה לכב רזע ילכ תווהל דעונ הז ךמסמ
הדפקהה תדימ אוה הליזומ ןפדפדל ררולפסקא ןפדפד ןיב ירקיעה לדבהה .הליזומ
פ"ע הביתכה לע תוחפ דיפקמ ררולפסקאה ןפדפדש םושמ .דוקב םינקת לע
ןכלו ,רתוי "ןרתו" בשחנ ררולפסקאה .חתפמה תנווכ התייה המל "שחנמ"ו םינקתה
ךרוצ אלל לאמשל ןימימ תירבעב שמתשהל תורשפאה םג ,ורובע חתפל רתוי לק
חווטל .ררולפסקאה ןפדפד רובע וחתופ ץראבש ךכל האיבה טסקטה תא ךופהל
קלח ורתפנ אל ךכבש רבתסמ ךורא רתויה חווטל ךא ,בוט ןויערכ הארנ הז רצקה
תאצוי רשאכ תוצצש תויעבו הקוזחת תויעב :ןוגכ ,דדומתהל שי ןמעש תויעבהמ רכינ
יבחרב םיחתפמ רתויו רתוי ,ולא תויעב לש הנבה ךותמ .השדח ןפדפד תסרג
.םיוסמ ןפדפדל ותוא םיאתהל םוקמב ,םינקתל רתאה תא םיאתהל םירחוב םלועה
.םיירקיע םיקלח 4 הז ךמסמל
רתא תיינבב םינקתב שומישב קסוע ןושארה קלחה •
םינפדפד יגוס המכל םימאתומה טנרטניא יפד חותיפב קסוע ינשה קלחה •
( check list ) הליזומל המאתה תוקידב תמישר ישילשה קלחה •
םילדבההו םינקת פ"ע הביתכ ןיינעב םירושיקו ףסונ עדימ ללוכ יעיברה קלחה •
.םינפדפדה ןיבש

רתא תיינבב םינקתב שומיש

:םיאבה םירמאמה לע ססובמ הז קלחב עדימה בור
http://www.mozilla.org/docs/web-developer/upgrade_2.html
http://qsdqsd.free.fr/Dev_model/Html JavaSript/CompatibleJavaScript/IE-Mozilla.html
.ףסונ טוריפו תופסונ תואמגוד םיללוכ םירמאמה

Layers and `LAYER` Elements - תובכש

םיכמות אל הליזומו פייקסטנ ינפדפד W3C לש טרדנטסהמ קלח וניא layer ש ןוויכמ
NOLAYER ,ILAYER : םימוד םיגת יבגל םג ךכ .םהמ םימלעתמ השעמלו ,םהב שומישב

Layer Elements לש ןוכדע
תומלעתהה תא לצנל ץלמומ ,ולא תויגתב םישמתשמה טנרטניא יפד ןכדעל תנמ לע
.FRAME ,IFRAME תויגתב יללכ ןפואב שמתשהל ןתינ וללה תויגתהמ
:תואמגוד

ההז םש ילעב LAYER ךותב IFRAME תפיטע י"ע ינוציח ץבוק לש הללכה

Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored

<LAYER NAME="foo" SRC=foo.html>
  <IFRAME ID="foo" SRC=foo.html>
  </IFRAME>
<LAYER/>

ההז םש ילעב IFRAME ךותב LAYER תפיטע י"ע ינוציח ץבוק לש הללכה

Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored

<IFRAME ID="foo" SRC=foo.html>
  <LAYER NAME="foo" SRC=foo.html>
  </LAYER>
</IFRAME>

ההז םש ילעב םיכומס IFRAME בו LAYER ב שומיש י"ע ינוציח ץבוק לש הללכה

Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored

<LAYER NAME="foo" SRC=foo.html>
</LAYER>
<IFRAME ID="foo" SRC=foo.html>
</IFRAME>

DIV - טנמלא
.פייקסטנו הליזומ ינפדפד י"ע ךמתנ הזככו W3C לש םינקתל ךייש ןכ DIV טנמלאה
וניא DIVה ךותב ינוציח ץבוקב שמתשהל תנמ לע לבוקמה SRCב שומישה םלוא
לבא .ףדה לש הקולח וא טסקט יעטק תריציל DIVב שמתשהל ןתינ .ןקתהמ קלח
.SRC םע IFRAMEב שמתשהל ץלמומ ינוציח ץבוק לילכהל תנמ לע
:אמגוד

<DIV>
  <UL>
    <LI><Red></LI>
    <LI><Blue></LI>
    <LI><Yellow></LI>
  <UL/>
</DIV>
<IFRAME SRC="mylist.html"/>
<DIV>
  <UL>
    <LI><Red></LI>
    <LI><Blue></LI>
    <LI><Yellow></LI>
  </UL>
</DIV>

APPLET

אמגודב עיפומש יפכ ,דוקב המאתה תשרוד APPLET תמגודכ םיטקייבוא תללכה
:האבה

<APPLET code="appletname.class"
 codebase="..." archive="..." width="..." height="...">
  <PARAM name="..." value="...">[...]
</OBJECT>

:ךכ תונפל שי פייקסטנו הליזומב

<OBJECT classid="java:appletname.class" 
 type="application/java"
 codebase="..." archive="..." width="..." height="..">
  <PARAM name="..." value="..."/>[...]
</OBJECT>

CSS תועיבקו FONT- טנופ

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

<P><FONT color="blue" face="Helvetica">
A really <FONT size="+1">big</FONT>shoe.
</FONT>

פייקסטנו הליזומל המאתהב

<P><SPAN style="color:blue; font:Helvetica">
A really <SPAN style="font:larger">big</SPAN> shoe.
</SPAN></P>

תויגתהמ קלח דחאל ןתינ

<P style="color:blue; font:Helvetica">
A really <SPAN style="font:larger"> big</SPAN> shoe.
</P>

תופסונ תויגת

W3Cל המאתהב תיגת	תיגת
CSS1: text-align:center	CENTER
CSS1: text-decoration:line-through	STRIKE
CSS1: text- decoration:underline	U

(DOM - Document Object Model) םיטקייבואל היינפ

היינפב לשמל ץבוקה ךותב םיטקייבואל היינפב םינפדפדה ןיב םילדבה םנשי
תואיגשל איבת םינקתל תמאתומ אל היינפ .םיטקייבוא לא JAVASCRIPTב
.פייקסטנו הליזומ םינפדפדב JAVASCRIPT
:W3C ןונקתב םיכמתנ םניאש םיטקייבוא

document.layers[ ] 
document.tags [ ] 
document.ids [ ] 
document.classes [ ]
document.elementName· 
document.all [ ]

:םיכמתנ םניא םה םגו ררולפסקאל םיכיישה םיטקייבוא

element.innerText· 
element.innerHTML (supported by Gecko)· 
element.outerText· 
element.outerHTML

םינפדפד יגוס המכל םימאתומה טנרטניא יפד חותיפ

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

Java script

2 תא עצבל שי java script דוק םע הליזומ לש תויעבה בור תא רותפל תנמ לע
.םיאבה םידעצה

ףרוצמה ieemu.js ץבוקה תא טקייורפל ףיסוהל שי .1
:אבה עטקה תא ףיסוהל שי ומצע דוקב .2

<script type="text/javascript" src="ieemu.js"></script>
<script type="text/javascript">
if (moz) { // set up ie environment for Moz
extendEventObject();
emulateEventHandlers(["mousedown", "mouseup", "mousemove"]);
emulateAllModel();
extendElementModel();
emulateCurrentStyle(["left", "top"]);
}
</script>

םיטקייבואל היינפ

םג תשמשמה האבה היינפב הכימת הנשי הלעמו 5 ררולפסקא ןפדפדהמ לחה
:W3C ןקתל םימיאתמה םינפדפדל

document.getElementById(id)

שמתשהל ןתינ (4) תומדוק תואסרגב םינדפדב םג ךומתל םיניינועמ םא
:האבה היצקנופב

function findObject(id)
{
	// If the standard function is available we use it
	if(document.getElementById)
		return document.getElementById(id);

	// Explorer 4?
	if(document.all)
		return document.all[id];

	// Very old browser. We do this so that object.style keeps
	// working (but without doing anything)
	return { style: {} };
}

:וז אמגודב ומכ היינפה תא ףילחהל קר ךירצ הז בלשב
: עיפומש םוקמ לכב

document.all.theMenu.style.color="black"

:ל ףילחהל שי

findObject("theMenu").style.color="black"

םילוגעו םיעבורמ םיירגוס

תונפל ןתינ ררולפסקאל .םיכרעמל היינפ םיתיעל שי JAVASCRIPT יעטק ךותב
document.forms(0) : אמגודל ,() םילוגע םיירגוסב שומישב םימייוסמ םיכרעמל
דימת שמתשהל שי ןכל .םירחא םינפדפדב לעפי אלו ררולפסקא ןפדפדב קר דובעי
.[ ] םיעבורמ םיירגוסב

documents.forms[0].field.value
document.images[0]

דוקה תביתכב םינטק םיטרפ - תופסונ תודוקנ

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

// םינסכול םוקמב \\ םיכופה םינסכול	•
"" םיישרג תריגסו תחיתפ לע הדפקה	•
(דוקב תורוש תריגסב וא) ; אלל nbsp& :אמגודל תורוגס אל תואירק	•
תוליגר/תויליחת תויתוא לע ןונגסל האירקבו CSSב הדפקה	•
ףדה תיתחתב חוור היהי אלש מ"ע tr -ל table -ה ןיב form -ה תיגת תא סינכהל :רמולכ .(footer -ל תחתמ) <body><table><form><tr><td> .. .. .. .. .. </td></tr></form></table></body> :םוקמב <body><form><table><tr><td> .. .. .. .. .. </td></tr></table></form></body>	•
marginheight="0" -ו marginwidth="0" :BODY-ה גתל ףיסוהל .ףדה לש תרגסמב חוור עונמל ידכב	•
'#2' אלו <...name='2'> רשאכ הליזומב םילעופ <a href='#2'> ןוגכ םירושיק	•

.NET יצבקב םישגד

ררולפסקאב :gridlines -ה תא datalists -הו repeaters -ה לכמ דירוהל שי .ןכ הליזומבו םתוא םיאור אל	•
קר לועפל הרומאש היצקנופ לכב ןכלו client -ב אלו תרשב קר םילעופ םירוטדילו if(Page.IsValid) :(ןיידע תמייק אל םא) הקידב ףיסוהל ךירצ היצדילו ירחא היצדילווה וב בלשה הז הליזומב םישלוג םא .וזה הקידבה ךותב דוקה תא בותכלו .השעית	•
היצדילווה תואצות תא תוארהל תורשפא שי ררולפסקאב SummaryValidator -ב ומצע ףדה לע קר תבתכנ היצדילווה הליזומב .alert -ב וא ומצע ףדה לע וא .ShowSummary=true םירידגמ הז ןפדפדב רבודמ םאש אדוול שי ןכלו (רבודמה רוטדילווה אוה generalValidator -ש החנהב) :דוקה תא ףיסוהל רמולכ	•

string browser = Request.Browser.Browser;
if(browser.Equals("IE")) 
{
	generalValidator.ShowSummary=false;
}
else 
{
	generalValidator.ShowSummary=true;
}

(check list) הליזומל המאתה תוקידב תמישר

הטושפ תוקידב תמישר הווהמ המישרה .המאתה תקידבל הריהמ תוקידב תמישר
.ךמסמה ףוגב ןורתפל הינפה וא ןורתפל תועצהו

ןורתפ	רוקמ רואית הלקתה	הלקתה
לש החיתפו הריגס לע דוקב דיפקהל שי .תואלבטל םירושקה םיגתה לכ	םיטנמלא םוקימ תרזעב ךסמב תואלבט	םיטנמלא םוקימב היעב ןפדפדב ,ךסמב םינוש .יוצרה םוקמב םניא הליזומ ףדה לש הריבש
הינפ לש הנוכנ הביתכ לע דיפקהל שי \ - תוצופנ תואיגש .םייפארג םיצבקל תויתואב קיודמ אל שומיש ,םיחוור ,םיכופה .תולודגו תונטק	היוגש הביתכ האירקה לש יפרגה ץבוקל	וא תועיפומ אל תונומת ןיגוריסל תועיפומ
תא םירתופה ךמסמו עטק הז ךמסמב שי םיטרפל .אשונב תויעבה בור	דוק תביתכ javascript םאות וניאש ןפדפדל	- javascript תולקת ,םילעופ אל םירבד האיגש תעדוה תלבקתמ
`FRAME` : תויפולח תויגתב שמתשהל שי םיטרפל `IFRAME`,	-ב שומיש אל LAYER ןפדפדב לעופ הליזומ	LAYER לש העפוה יא
IFRAME תיגתב שמתשהל ןתינ םיטרפל	שמתשהל ןיא SRC תורשפאב DIV ךותב	ץבוקמ עדימ לש העפוה יא DIV ךותב ינוציח
תונפל שי פייקסטנו הליזומ םינפדפדב םיטרפל .תרחא	הינפב היעב	לש הגצהב היעב APPLET
לש תקיודמ אל הביתכב תויעבה כ"דב םיטרפל .דוקה	CSS ב תויעב	- םיטסקט תגצהב היעב 'וכו םיעבצ ,םילדג ,םיטנופ

םירושיק - ףסונ עדימ

יללכ

Using Web Standards in Your Web Pages

http://www.mozilla.org/docs/web-developer/upgrade_2.html

Making your web page compatible with Mozilla

http://qsdqsd.free.fr/Dev_model/Html%20JavaSript/Compatible%20JavaScript%20IE-Mozilla.html

(דועת) םינקתה תעיבק

- לש תובית ישאר) W3C -ה ארקנש ףוג ידי לע םיעבקנ םינקתה

.(World Wide Web Consortium
ןוידל הצופת תומישר םע דחי) םישדח םינקתל תועצה ,םימייקה םינקתה תא
תבותכב ,דוגיאה רתאב אוצמל רשפא ףסונ עדימו (םהילע
http://www.w3c.org

:אוה םינקתה יפל היינב לע תושדחו יללכ עדימל בוט רתא

http://www.webstanda/rds.org

םינקתל המאתה תקידב

םירחא םינפדפדלו הליזומ ןפדפדל המאתה תקפסמ םינקתל המאתהה
,7 פייקסטנ ,6 פייקסטנ תמגודכ Gecko הגוצתה עונמ לע םיססובמש
.(הרמיכ רבעשל) ונימקו ןואלג ,7 ברסויפמוק ,OS X קמל AOL

יאדכ ,הלאה אבה רודה ינפדפד םע יוארכ דובעי םכרתאש חיטבהל ידכ
(JavaScript כ העודיה) ECMAScript יבגל ECMA לש תוצלמהה לע ודיפקתש
DOM הו HTML ,CSS יבגל W3C ה ןוגרא לש תוצלמהה לעו
םירחא םינפדפדל תומיאת םג חיטבי רבדה .(Document Object Model)
.6 ררולפסקא טנרטניא תמגודכ םיחותפ םינקתב םיכמותה

םירושיקו םירבסה

תוינכט תוצלמה
םינקת ,טנרטניאה תשרל םיירוביצה םינקתה תא רידגמ W3C ןוגרא

mozilla.org י"עו הליזומ י"ע םימשוימש
http://www.w3.org/TR

mozilla.org ב םירתא ינובל דועית
,םירחא Gecko יססובמ םינפדפדבו הליזומב הכימת אשונב יפיצפס עדימל

mozilla.org לש םירתא ינובל רתאב ורקב
http://www.mozilla.org/docs/web-developer

טנרטניאה ידומעב טנרטניאה ינקתב שומיש
תפסוהלו DHTML תפסוהל םירתא ינוב ברקב תולבוקמש םיכרדו םיטנמלא רפסמ

תורדגהבו W3C ה לש HTML 4.0 ןקתב וללכנ אל םינוש םינפדפדל הכימת
בשחהל םייושע ולא םיטנמלאש תורמל תאז ,Document Object Model ה
."םיינקת"כ

:ןאכ אוצמל ןתינ ,םיכמתנה םינקתה לע םיטרפ

http://www.mozilla.org/docs/web-developer/upgrade_2.html

הליזומב Document Object Model
דומילל םיליעומ םירושיק אוצמל ןתינ http://www.mozilla.org/docs/dom דומעב

םירחא םינפדפדבו הליזומב (Document Object Model) DOM ב שומישו
.Gecko לע םיססובמש
http://www.mozilla.org/docs/dom/domref Gecko DOM אשונב דועיתה
ללוכו הליזומב W3C DOM ה לש םושייל ךירדמ םיליחתמ םירתא ינובל קפסמ
.תובר תואמגוד

פייקסטנ לש םירתא ינובל רתאה
הביתכל םירושקש םירחא םיאשונו plugins, CSS יאשונב םיפסונ םירמאמל

פייקסטנ לש DevEdge רתאב ורקב ,Gecko ינפדפדל תומיאתלו םינקת תססובמ
http://devedge.netscape.com

DHTML יפד ןוכדע
תובחרהו ,layer ה תיגת ,document.all אשונב תעדל םיכירצ םתאש לכ

.םינפדפד הבורמ םלועב ןתיא דובעל דציכו ,תורחא תויניינק
http://devedge.netscape.com/viewsource/2001/updating-dhtml-web-pages

םינוש םינפדפדב הכימתו ןפדפדה יוהיז

ןפדפדה יוהיז
שפחל רתוי לק ,פייקסטנ לש Gecko ה עונמב שומיש השועש ןפדפד תוהזל ידכ

תזורחמו הרבח לש םייוסמ םש רחא קורסל רשאמ ,"Gecko" תזורחמה תא
:אבה רמאמב םיפסונ םיטרפ אוצמל ןתינ .ןפדפדה לש האלמה יוהיזה
http://devedge.netscape.com/viewsource/2002/browser-detection

םינקתב הדימע תקידב
םינקתב הדימע תקידב עצבמה רתא

http://validator.w3.org

םינפדפד לש הכימת תלבט
םינוש םיטנמלאב םתכימת תמרו םינושה םינפדפדה לש הלבטב זוכיר

http://hotwired.lycos.com/webmonkey/reference/browser_chart

םינפדפדה ןיב טסקטה לדוג תגצהב םילדבה
תונוש תויצולוזרב טסטה לדוג תגצהב םינפדפדה ןיב םילדבהה לש הלבטב זוכיר

http://members.ij.net/mrmazda/auth/absolute-sizes-MvE.html