פורום אטרף - [שיעור מס' 5] HTML ו-CSS

הקדמה

בשיעור הקודם למדנו מספר דברים:

איך להוסיף תמונה.
איך לעשות קישור.
איך לעשות קישור כתמונה.
איך לעשות קישור למייל, ולסקייפ.

הערות משיעור קודם:
בשיעור הקודם הסברתי איך להוסיף תמונות לדף אינטרנט בעזרת HTML, אם אתם משתמשים באינטרנט אקספלורר(IE)
כנראה ראיתם שיש מסגרת מסביב לתמונה.
איך מתקנים את זה אתם שואלים? פשוט מאוד!
זוכרים שלמדנו איך לעצב טקסט בעזרת המאפיין "style"?
אז זה לא רק תקף לתג span, אפשר להשתמש במאפיין הזה לכל תג!
אז בשביל לבטל את המסגרת נרשום:

קוד HTML:

<img src="bla.png" alt="My Image" style="border: inherit;" />

פשוט הוספנו את המאפיין style, ובקוד CSS, רשמנו "border" שזה אומר מה לעשות למסגרת. ורשמנו "inherit" שזה אומר להעלים אותה.

השיטה לא עובדת על IE 7 וגרסאות מוקדמות יותר (אינטרנט אקספלורר..)
על כל השאר זה יעלים את המסגרת.

בואו נתחיל

אז איך יוצרים טבלה?
זה פשוט, נרשום את התג <table> (יש תג סוגר).
זה יירשם כך:

קוד HTML:

<table>
</table>

בינתיים, אם נכתוב את הקוד, לא יצא כלום כי לא הוספנו נתונים וכ'ו.

הערה:
אם אתם רוצים שלטבלה תיהיה מסתגרת תרשמו כך:

קוד HTML:

<table border="number">
</table>

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

הוספת נתונים לטבלה
בינתיים יש לנו טבלה ריקה, בשביל זה נוסיף נתונים.

קודם כל נצטרך להוסיף שורה לטבלה בעזרת התג <tr>כ(TR = Table Row).
נשתמש בזה כך:

קוד HTML:

<table>
<tr>
</tr>
</table>

עדיין לא יקרה כלום כי לא הוספנו נתונים.

כעת נחלק את השורה לטורים בעזרת התג <td>כ(TD = Table Data).
כל שילוב <td></td> מייצג טור אחד בטבלה.
דוגמה:

קוד HTML:

<table>
<tr>
<td>
one
</td>
</tr>
</table>

כפי ששמתם לב, יש לשים את תגיות ה-tr בתוך תגיות ה-table ותגיות ה-td בתוך תגיות ה-tr.
מה ייצא:

one

אפשר להוסיף תגי עיצוב רק בתוך תגי ה-td, דוגמה:

טוב:

קוד HTML:

<table>
<tr>
<td>
<b>Bold In Table</b>
</td>
</tr>
</table>

לא טוב:

קוד HTML:

<b>
<table>
<tr>
<td>
Bold In Table
</td>
</tr>
</table>
</b>

או כל אפשרות אחרת.

דוגמה להוספת כמה נתונים:

קוד HTML:

<table border="1">
<tr>
<td>
Language Name
</td>
<td>
Language Full Name
</td>
</tr>
<tr>
<td>
HTML
</td>
<td>
Hyper Text Markup Language
</td>
</tr>
<tr>
<td>
CSS
</td>
<td>
Cascading Style Sheets
</td>
</tr>
</table>

ייצא:

Language Name	Language Full Name
HTML	Hyper Text Markup Language
CSS	Cascading Style Sheets

ברור לא?
אם הטבלה שלכם מכילה נתונים חשובים שצריך להדגישם אפשר במקום לכתוב <b> בכל תג td, יש אפשרות לעשות מ-td ל-th.
כלומר במקום לרשום:

קוד HTML:

<table>
<tr>
<td>
<b>One</b>
</td>
</tr>
</table>

אפשר לרשום:

קוד HTML:

<table>
<tr>
<th>
One
</th>
</tr>
</table>

והפלט זהה.

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

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

נתחיל
קודם כל נצטרך קובץ שמע(קבצים עם סיומת mp3, wav וכאלה נחוצים לעבודה). הם נמצאים בתיקיית שירים שלכם רוב הסיכויים

אוקיי, נגיד שיש לנו קובץ עם סיומת mp3 ועם סיומת ogg.
למה אנחנו צריכים את זה? כי עכשיו זה מה שכל דפדפן תומך ומה לא:

דפדפן	MP3	Wav	Ogg
Internet Explorer 9	V	X	X
Firefox 4.0	X	V	V
Google Chrome 6	V	V	V
Apple Safari 5	V	V	X
Opera 10.6	X	V	V

נבחר שני סוגים שמתאימים לשניהם(כמובן אפשר גם את כל האפשרויות) שהם mp3 ו-ogg.
נרשום כך:

קוד HTML:

<audio controls="controls">
  <source src="Song.ogg" type="audio/ogg" />
  <source src="Song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

מה עשינו? פשוט מאוד!

אומר שהתחלנו את הקטע אודיו.
הקטע controls, אומר שזה יראה את הבקרות(להפעיל / לעצור וכ'ו).
אפשר להוריד את זה אם לא נרשום זאת.
אם נרשום loop="loop" בתג audio, זה יעשה את הקטע אינספור פעמים.
אפשר לרשום מספר במקום וזה יעשה את מספר החזרות.
אם נרשום autoplay="autoplay" זה יתחיל איך שהמשתמש נכנס לדף.

שרשמנו:

זה אומר שפה יהיה האודיו מסוג ogg, (נשנה את המקור למה שיש לנו עם סיומת ogg).

זה אומר שפה יהיה האודיו מסוג mp3, (נשנה את המקור למה שיש לנו עם סיומת mp3).

Your browser does not support the audio element.

הודעה שתוצג אם הדפדפן לא יכול לנגן את זה(ישן מיד וכ'ו). אז זה יציג:
"Your browser does not support the audio element."

</audio>

סוגר את התג.

וידאו
התג <video> יעבוד רק בדפדפנים הבאים:

דפדפן	MP4	WebM	Ogg
Internet Explorer 9	V	X	X
Firefox 4.0	X	V	V
Google Chrome 6	V	V	V
Apple Safari 5	V	X	X
Opera 10.6	X	V	V

השימוש בו די דומה לשימוש בתג <audio>. יש אותם פרמטרים רק ש-במקום mp3, יש mp4 ובמקום wav יש WebM.

בתג source השימוש דומה גם הוא:

קוד HTML:

<source src="movie.mp4" type="video/mp4">

שימוש מלא:

קוד HTML:

<video controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

אין צורך להסביר כי זה כמו תג <audio>.

וזהו!

שיעורי בית

תתנו לי טבלה שמרכזת את כל הדרגות הניהוליות באטרף, כלומר תעשו את זה כך:

שם הדרגה	צבע
בעלים	כתום
יו"ר קהילה	ירוק

ותמשיכו לבד את הדרגות.
רשימה מלאה תמצאו פה:
http://www.iatraf.co.il/showgroups.php
שיעורי בית מהנים!

לשיעור הקודם - שיעור מס' 4 לחצו כאן.
שאלות על HTML ו-CSS בפורום שפות צד לקוח.

שם משתמש		זכור אותי	רישום לאתר
סיסמה		שכחת סיסמה?

קהילות פורומים, הורדות, יעוץ ותמיכה

[שיעור מס\' 5] HTML ו-CSS

הודעת מערכת

עוד באטרף