יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

תגיות div, span ומאפיינים חשובים

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. תגיות div, span ומאפיינים חשובים
תגית div, תגית span ומאפיינים מיוחדים שחשוב להכיר: id, class, style, title.

תגית div ומאפייני id ו-class

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

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

דוגמא:

<div id="main_menu">
    <div class="button">
        <div id="home">
        </div>
    </div>
    <div class="button">
        <div id="about">
        </div>
    </div>
    <div class="button">
        <div id="contact">
        </div>
    </div>
</div>

בדוגמא זו יצרנו "תפריט" עם 3 כפתורים. כל לחצן מאופיין באמצעות המחלקה (ה- class) שערכו button. כלומר יש 3 אלמנטים שהם עם class זהה. כל כפתור מאופיין בערך של id שיחודי רק לו.

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

תגית span

תגית זו מגדירה חלק מאלמנט על מנת לעצבו.

<div class="topic">
    This is example number <span class="number">seven</span> in the tutorial
</div>

כעת, ניתן להתייחס ספציפית למילה seven המאופיינת במחלקה number (למשל: נוכל ב-CSS לעצב מילה זו בכחול כהה).

מאפייני title, style

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

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

<div class="button" title="press this button to continue">
</div>

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

<div class="button" title="press this button to continue" style="color:#ff0000; background-color:#ffff00; text-align:center; font-size:18px;">
</div>

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

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: