עזרה:שכבות

מתוך ויקיפדיה, האנציקלופדיה החופשית
קפיצה אל: ניווט, חיפוש

קיצור דרך: וק:עש

ויקיפדיה תומכת בשכבות (תגי div). שכבות הן מעין חלוניות עצמאיות המסוגלות להכיל מידע. קל לראות בהן מעין טבלה עם תא יחיד. יתרונן על פני הטבלאות הם בניידותן וגמישותן: ניתן למקם אותן בכל מקום בעמוד ולעצב אותן בעיצובים שונים ומגוונים; ניתן ליצור שכבות מקוננות, שאחת מכילה את האחרת; ניתן ליצור שכבות בתוך טבלאות, טבלאות בתוך שכבות. בוויקיפדיה נהוג להשתמש בשכבות ליצירת רשימות ניווט, ליצירת הודעות מערכת, ליצירת תיבות מידע, ליישור מידע לשמאל וליצירת פורטלים. בעבר היה נהוג להשתמש בשכבות בעת בניית גרפים, ואולם כיום עדיף להשתמש בתגי timeline; ראו כאן מידע נוסף.

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

אין לך הודעה חדשה.

אולי מחר...

תוכן עניינים

[עריכה] תחביר

השכבה נבנית באמצעות שני תגי HTML:

  • <div> - תג הפתיחה
  • </div> - תג הסגירה

עיצוב ומיקום השכבה נעשים באצעות הגדרת מאפיינים ותכונות בתוך התג הראשון. התכונות העיקריות הן id ,class ו-style, לדוגמה:

  • <div id="toc">
  • <div class="usermessage">
  • <div style="background-color: green;">

[עריכה] מאפיינים

המאפיינים מוכנסים בהגדרה של מאפיין style="מאפיינים" (יש להחליף את המילה מאפיינים במאפיין הרצוי. סימני השווה והגרשיים חיוניים). כדי להגדיר מאפיין יש לציין את שמו של המאפיין (border, width וכו'), אחר כך להוסיף נקודתיים, אז את הגדרת המאפיין ולאחריו את הסימן נקודה-פסיק(;).

תיאור תכונה מאפיינים ברירת מחדל הערות
תצוגה display מוסתר - none
block- הצגה כבלוק
אין
רוחב שכבה width auto או אחוזים או יחידות מידה auto אין
גובה שכבה height auto או אחוזים או יחידות מידה auto אין
גלישה overflow אוטומטית - auto משמש ליצירה של סרגלי גלילה
גופן font סגנון, גודל, שם לפי הדפדפן לדוגמה: italic normal bolder 12pt Arial. ניתן להשתמש גם בתבנית {{עיצוב גופן}}
ישור טקסט text-align שמאל - left
ימין - right
מרכז - center
מיושר לשני הצדדים - justify
right אין
גובה שורה line-height אחוזים או יחידות מידה normal אין
מסגרת border רוחב, סגנון, צבע אין מסגרת לדוגמה: 3px solid green. ניתן להוסיף מקף וצד כלשהו (כגון left) לשם התכונה כדי להגדיר מסגרת של צד אחד בלבד.
סגנון מסגרת border-style ללא - none
מקווקו - dashed
מנוקד - dotted
קשיח - solid
שני קווים - double (לפחות 3px רוחב)
none אין
צבע מסגרת border-color צבע white אין
שוליים margin יחידות מידה או auto 0 התכונה מקבלת עד ארבעה מאפיינים: שוליים עליונים, ימניים, תחתונים ושמאליים - בסדר הזה. לדוגמה, 4px 7px 4px 7px. אם רק מאפיין אחד ניתן, הוא משמש לקביעת כל הצדדים. לדוגמה: 0.5em. ניתן להוסיף מקף וצד כלשהו (כגון left) לשם התכונה כדי להגדיר שוליים של צד אחד בלבד.
מרווח padding אחוזים או יחידות מידה 0 (ברירת המחדל של טבלה היא 1) התכונה מקבלת עד ארבעה מאפיינים: מרווח עליון, ימני, תחתון ושמאלי - בסדר הזה. לדוגמה, 4px 7px 4px 7px. אם רק מאפיין אחד ניתן, הוא משמש לקביעת כל הצדדים. לדוגמה: 0.5em. ניתן להוסיף מקף וצד כלשהו (כגון left) לשם התכונה כדי להגדיר מרווח של צד אחד בלבד.
כיוון כתיבת טקסט בשכבה dir ימין לשמאל - rtl
שמאל לימין - ltr
rtl אין
עמדה position ללא מיקום מיוחד - static
מיקום יחסי - relative
מיקום מוחלט - absolute
statis אם מיקומו יחסי, ניתן להצמיד רק לימין או לשמאל, בתוך שורת הטקסט, עם התכונה float. אם מיקומו מוחלט, ניתן למקמם את השכבה בכל מיקום שיקבע בעמוד באמצעות התכונות left ו-top, אולם השכבה תצוף מעל לטקסט.
כיוון ציפה של כל השכבה float ימין - right
שמאל - left
right למרכוז לאמצע יש להשתמש בתכונה margin ובמאפיין auto
שמאל left auto או אחוזים או יחידות מידה auto המרחק מהשול השמאלי של הדף. יש להשתמש בתכונה זו רק בעת השימוש בתכונה position
עליון top auto או אחוזים או יחידות מידה auto המרחק מהשול העליון של הדף. יש להשתמש בתכונה זו רק בעת השימוש בתכונה position
צבע טקסט color צבע שחור דוגמה: טקסט בצבע כתום. ניתן להשתמש גם בתבנית {{צבע גופן}}
צבע רקע background-color צבע white דוגמה: טקסט ברקע ורוד

[עריכה] סגנונות מובנות (id ,class)

[עריכה] סגנונות

לוויקיפדיה הגדרת סגנונות שכבה, בעמוד מערכת מיוחד, כך שלא צריך כל פעם להגדיר את כל השכבה.
דוגמה לסגנון כזה הוא סגנון toccolours שמקביל להגדרה: div style="border:1px solid #aaaaaa; background-color:#f9f9f9; padding:5px; font-size: 95% ;"


שם תוצאה כתיבה הערה
class=toccolours

טקסט טקסט טקסט טקסט טקסט

<div class="toccolours">
טקסט טקסט טקסט טקסט טקסט
</div>
class=usermessage

טקסט טקסט טקסט טקסט טקסט

<div class="usermessage"> טקסט טקסט טקסט טקסט טקסט </div> שונה קצת, משום שזהו class ולא id. אבל אין הבדל בדרך שבה צריך להשתמש. לקוח מתוך ההודעה "יש לך הודעות חדשות.."
id=footer <div id="footer"> טקסט טקסט טקסט טקסט טקסט </div> השורה בתחתית כל דף עם הקישורים "אודות ויקיפדיה", "הבהרה משפטית" וכדומה
class=pBody

טקסט טקסט טקסט טקסט טקסט טקסט

<div class="pBody"> טקסט טקסט טקסט טקסט טקסט טקסט </div> זהו class ולא id אבל אין הבדל בדרך שבה צריך להשתמש. לקוח מתוך תיבת הניווט בצד ימין.

[עריכה] דוגמאות

הסבר קוד תוצאה
יישור לשמאל

<div dir=ltr align=left>

  • Murmur - 1983
  • Reckoning - 1984
  • Fables of the Reconstruction - 1985
  • Lifes Rich Pageant - 1986
  • Dead Letter Office - 1987

</div>

  • Murmur - 1983
  • Reckoning - 1984
  • Fables of the Reconstruction - 1985
  • Lifes Rich Pageant - 1986
  • Dead Letter Office - 1987
המטרה בדוגמה זו ליצור שכבה פשוטה בעלת גבול מקווקו שתהיה צמודה לשמאל <div style="width: 121px; height: 121px; border: 1px dashed blue; float: right" > ניסיון</div>
ניסיון
זרימת טקסט מסביב לשכבה אחת שתיים שלוש אני אחשוורוש <div id="layer1" style="width:141px; height: 141px; border: 1px dashed blue; float: left" > ניסיון</div> ארבע חמש שש אני מלכת אסתר אחת שתיים שלוש אני אחשוורוש
ניסיון
ארבע חמש שש אני מלכת אסתר
המטרה בדוגמה זו ליצור שכבה בגודל של רבע תא ברקע אפור שתהיה צמודה לימין <div id="layer2" style="width:50%; height: 50%; border: 3px dashed blue; float: right; background-color: #808080" > ניסיון</div>
ניסיון
שימוש בשכבה במיקום מוחלט, באמצעות position: absolute; אפשר להגיע בשיטה כזו לכל מקום בעמוד. <div id="layer3" style="position: absolute; width: 50%; height: 60px; border: 1px dashed blue; " > ניסיון</div>
ניסיון
תמונת רקע בתוך השכבה (משום מה לא עובר קומפילציה של ויקיפדיה) <div style="position: absolute; right: 547px; top: 19px; width: 246px; height: 154px; z-index: 2; background-image: url('http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg'); background-position: left center" id="layer2">  </div>
 
הוספת סרגל גלילה באמצעות תכונת - overflow <div style="border: 1px dashed blue; height: 100px; width: 141px; overflow: auto"> http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg מי יודע מדוע ולמה לובשת הזברה פיג'מה מי יודע מדוע ולמה לובשת הזברה פיג'מה;</div>
http://upload.wikimedia.org/wikipedia/he/4/42/Inbal-workshop.jpg מי יודע מדוע ולמה לובשת הזברה פיג'מה מי יודע מדוע ולמה לובשת הזברה פיג'מה;
גרפים - שימוש בשכבות שמייצגות גרפים בתוך טבלת ויקי {| border="1" align="center"
|- valign="bottom" align="center"
| <div style="border-style:outset; height: 25px; width: 41px; right: 656px; top: 109px; background-color: #6699FF" > <p align="center"> 47</p> </div>
| <div style="height: 114px; border-style:outset; border-width:5px; width: 41px; right: 424px; top: 46px; background-color: #00CC99" > <p align="center"> 214</p> </div>
| <div style="height: 51px; border-style:outset; width: 41px; right: 540px; top: 112px; background-color: #008080; padding-left:-5px" > <p align="center"> 97</p> </div>
|-
| 2000
| 2001
| 2002
|-
|}

47

214

97

2000 2001 2002
גרף אנכי - שימוש מקונן - שלוש שכבות שתוך שכבה אחת <div>
<div style="border-style:outset; height: 25px; width: 41px; right: 656px; top: 109px; background-color: #6699FF" > <p align="center"> 47</p> </div>
<div style="height: 25px; border-style:outset; border-width:5px; width: 147px; right: 424px; top: 46px; background-color: #00CC99" > <p align="center"> 214</p> </div>
<div style="height: 25px; border-style:outset; width: 74px; right: 540px; top: 112px; background-color: #008080" > <p align="center"> 97</p> </div>
</div>

47

214

97

טבלה בתוך שכבה <div style="height: 25px; border-style:outset; width: 74px; right: 540px; top: 112px; background-color: #008080" > <p align="center">
{| border=1
| שנת 2000
| שנת 2001
| שנת 2002
|}

שנת 2000 שנת 2001 שנת 2002
גרף בתוך שכבה; יתרונו שגובה העמודים כתוב באחוזים <div style="border-width:3px; border-style:double; width: 140px; height: 185px; right: 600px; top: 68px; float:left; background-color:#C0C0C0"> <div style="height: 47%; border-style:outset; background-color: #6699FF; float:left" > <p align="center"> 47</p> </div> <div style="height: 88%; border-style:outset; background-color: #00CC99; float:left" > <p align="center"> 88</p> </div> <div style="height: 97%; border-style:outset; background-color: #008080; float:left" > <p align="center"> 97</p> </div> <div style="height: 50%; border-style:outset; background-color: #FFCC99; float:left" > <p align="center"> 50</p> </div> <div style="height: 33%; border-style:outset; background-color: #4186BE; float:left" > <p align="center"> 33</p> </div> </div>

47

88

97

50

33


[עריכה] דוגמה לגרפים בוויקיפדיה

כותרת הגרף

47

207

452

214

97

 \begin{bmatrix} 
500 \\450\\400\\350\\ 300\\250\\ 200\\ 150\\ 100\\ 50\\ 0 
\end{bmatrix}
שנת 2000 שנת 2001 שנת 2002 שנת 2003 שנת 2004 מספר

[עריכה] דוגמה לתצוגת ערך בשכבה נגללת

הערך ענת מופיע בשלמותו בחלונית ו"נשאב" באמצעות התצורה הבאה: {{:ענת}}

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

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

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

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

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

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

[עריכה] לקריאה נוספת

  • פרופסור משה דוד קאסוטו, האלה ענת
  • נגה וגיא דרשן, המיתולוגיה הכנענית (מיתוסים 15), הוצאת מפה, תל אביב תשס"ט

[עריכה] קישורים חיצוניים


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

גרסאות שפה
מרחבי שם
פעולות
ניווט
קהילה
תיבת כלים
הדפסה/יצוא