3 - HTML Layouting

HTML5 UI Layout
‫שי תבור‬
shay.tavor@gmail.com
www.shaytavor.com
‫‪div‬‬
‫מסמך‪ HTML‬בדר”כ בנוי מחלקים לוגים שונים כמו כותרת‪ ,‬תוכן‪,‬‬ ‫•‬
‫תפריט ימני‪ ,‬שורת ניווט וכו'‪.‬‬
‫הרבה פעמים נרצה להחיל עיצוב שונה עבור כל חלק במסך‪.‬‬ ‫•‬
‫ניתן להשתמש בתגית ‪ div‬כדי ליצור בלוק במסך‪.‬‬ ‫•‬
‫לתגית אין היבט ויזואלי‪ ,‬אבל היא מאפשרת להגדיר איזורים במסך‪.‬‬ ‫•‬
‫‪shay.tavor@gmail.com‬‬
‫‪www.shaytavor.com‬‬
‫ כל‬.‫ מגדיר איזור לוגי מסויים‬div- ‫ה‬
<!DOCTYPE html> .‫מה שנמצא בתוכו שייך לאיזור זה‬
<html> ‫ תאפשר לזהות איזור זה‬id ‫התכונה‬
<body> .‫לצרכי עיצוב מותאם‬
<div id = “logo“>
<img src = “logo.jpg“ />
Used Books Depository LTD
</div>
<div id = “content“>
<h1>Buy and Sell Used Books</h1>
content ‫كل ده‬
<h3>The ultimate depository</h3>
In our online store you can find……
</div>
</body>
</html>
www.shaytavor.com
header
nav
main
section
www.shaytavor.com
header
nav
section
main
aside
section
footer
www.shaytavor.com
‫איך היינו בונים דף כזה?‬
‫השיטה הנהוגה היא לחלק את הדף לחלקים לוגיים‪ ,‬ואז‬ ‫•‬
‫להגדיר‪ div‬עבור כל חלק‪.‬‬
‫• יותר מאוחר נוכל לעצב כל ‪ div‬בנפרד וכך להעניק מראה יחודי‬

‫לקבוצה של נתונים בממשק המשתמש‪ ,‬בהתאם לשיוך הלוגי שלהם‪.‬‬
<html>
<body>
<div id = “header”>…</div>
<div id = “nav”>…</div>
<div id = “main”>
<div id = “section”>…</div>
<div id = “section”>…</div>
</div>
<div id = “aside”>…</div>
<div id = “footer”>…</div>
</body>
</html>
www.shaytavor.com
‫תגיות סמנטית‬
‫ב‪ html5-‬הוכנסו לשימוש מספר תגיות חדשות שנקראות תגיות‬ ‫•‬
‫סמנטיות‪.‬‬
‫• תגיות אילו לא עושות שום דבר – בניגוד לתגיות כמו ‪ p‬או ‪b‬‬
‫שמבצעות פורמט מסויים על טקסט‪ ,‬התגיות הסמנטיות רק מסמנות‬
‫חלקים במסמך ונותנות להם משמעות סמנטית‪.‬‬
‫‪ – header‬תגית שמסמנת את הכותרת של חלק מסויים‪ .‬התגית אמורה‬ ‫•‬
‫לסמן חלק במסמך שמכיל מידע מקדים‪ ,‬כותרת או כל תוכן אחר שהוא‬
‫לא חלק מהתוכן העיקרי‪.‬‬
‫‪ – footer‬תגית שמסמנת את הכותרת התחתונה של הדף‪ .‬חלק זה בדר"כ‬ ‫•‬

‫מכיל מידע על יוצר הדף‪ ,‬זכויות יוצרים‪ ,‬קישור לתנאי שימוש וכו'‪.‬‬
‫‪ – nav‬תגית שמסמנת איזור במסמך שמכיל כמות גדולה של קישורים‬ ‫•‬

‫לניווט‪.‬‬
‫‪ – aside‬תגית שמסמנת תוכן נוסף מעבר לתוכן הראשי (ציטוטים‪,‬‬ ‫•‬

‫(االقتباسات والتوسع في موضوع معين والروابط وما إلى ذلك)‪.‬‬
‫הרחבה על נושא מסויים‪ ,‬קישורים וכו')‪.‬‬
‫‪ – article‬תגיד שמסמנת תוכן עצמאי ובלתי תלוי – פוסט‪ ,‬תגובה‪,‬‬ ‫•‬
‫אייטם חדשותי וכו'‪.‬‬
‫‪ – section‬תגית שמסמנת איזור מסויים במסמך‪ .‬בדר"כ ‪article‬‬ ‫•‬

‫מורכב מכמה ‪.section‬‬
‫• ‪ – main‬תגית שמסמנת את התוכן הראשי של האתר‪ .‬בכל דף אמור‬

‫להיות רק ‪ main‬אחד‪ .‬ה‪ main-‬אמור להכיל מידע יחודי לדף‪ ,‬כלומר‪,‬‬
‫הוא לא אמור להכיל את ה‪ nav, header, footer-‬או כל מידע אחר‬
‫שחוזר על עצמו בכל הדפים‪.‬‬
‫שאר התגיות הסמנטיות‬:
• details
• figcaption
• figure
• mark
• summary
• time
www.shaytavor.com
‫כעת הדף הקודם יראה כך‬:
<html>
<body>
<header>…</header>
<nav>…</nav>
<main>
<section>…</section>
<section>…</section>
</main>
<aside>…</aside>
<footer>…</footer>
</body>
</html>
www.shaytavor.com

3 - HTML Layouting

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 - HTML Layouting

Uploaded by

Copyright:

Available Formats

HTML5 UI Layout

‫ניתן להשתמש בתגית ‪ div‬כדי ליצור בלוק במסך‪.‬‬ ‫•‬

‫• יותר מאוחר נוכל לעצב כל ‪ div‬בנפרד וכך להעניק מראה יחודי‬

‫‪ – footer‬תגית שמסמנת את הכותרת התחתונה של הדף‪ .‬חלק זה בדר"כ‬ ‫•‬

‫‪ – nav‬תגית שמסמנת איזור במסמך שמכיל כמות גדולה של קישורים‬ ‫•‬

‫‪ – aside‬תגית שמסמנת תוכן נוסף מעבר לתוכן הראשי (ציטוטים‪,‬‬ ‫•‬

‫‪ – section‬תגית שמסמנת איזור מסויים במסמך‪ .‬בדר"כ ‪article‬‬ ‫•‬

‫• ‪ – main‬תגית שמסמנת את התוכן הראשי של האתר‪ .‬בכל דף אמור‬

You might also like