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

[-Smoxer-]

הקדמה

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

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

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

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

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

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

בואו נתחיל

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

<table>
</table>

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

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

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

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

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

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

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

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

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

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

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

one

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

טוב:

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

לא טוב:

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

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

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

<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.
כלומר במקום לרשום:

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

אפשר לרשום:

<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.
נרשום כך:

<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>

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

<audio controls="controls">

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

שרשמנו:

<source src="Song.ogg" type="audio/ogg" />

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

<source src="Song.mp3" type="audio/mpeg" />

זה אומר שפה יהיה האודיו מסוג 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 השימוש דומה גם הוא:

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

שימוש מלא:

<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 בפורום שפות צד לקוח.

[LikeANoob]

שיעור מעוולה !
שתתחבר אגיש לך שיעורי בית

[זוהר]

אחלה שיעור, אני צריכה לעשות שיעורים דחוף בהסטוריה למחר (!!!) וכשאני אסיים אני אעשה את השיעורים האלו!

[-Smoxer-]

שיעור מעוולה !
שתתחבר אגיש לך שיעורי בית

אתה מוזמן לשלוח.

אחלה שיעור, אני צריכה לעשות שיעורים דחוף בהסטוריה למחר (!!!) וכשאני אסיים אני אעשה את השיעורים האלו!

תשלחי כשיהיה לה נוח, אין לי בעיה מתי.

[ExcluSive]

שיעור טוב עמרי, השיעורים בדרך

[toorbo]

לא הבנתי את הקטע של האודיו אני מנסה אבל לא מצליח להפעיל שיר נגיד האתר והתקיה של השיר נמצאת פה
C:\Users\Yonatan\blabla שם האתר נמצא ויש עוד תקיה שקוראים לה audio ובתוך יש את השיר amir.mp3 איך אני עושה עכשיו שהשיר יפעל ?

[-Smoxer-]

לא הבנתי את הקטע של האודיו אני מנסה אבל לא מצליח להפעיל שיר נגיד האתר והתקיה של השיר נמצאת פה
C:\Users\Yonatan\blabla שם האתר נמצא ויש עוד תקיה שקוראים לה audio ובתוך יש את השיר amir.mp3 איך אני עושה עכשיו שהשיר יפעל ?

עדיף שתשים את הקובץ אודיו איפה שהקובץ HTML, כנראה לא רשמת טוב את המיקום.

[toorbo]

עדיף שתשים את הקובץ אודיו איפה שהקובץ HTML, כנראה לא רשמת טוב את המיקום.

הקובץ HTML בתקיה BLABLA ובתקיה BLALA פשוט פתחתי עוד תקיה של AUDIO ושם שמתי את השיר עשיתי איך שאמרת

audio/amir.mp3 לא מצליח לי , משהו פה לא נכון ?

[-Smoxer-]

הקובץ HTML בתקיה BLABLA ובתקיה BLALA פשוט פתחתי עוד תקיה של AUDIO ושם שמתי את השיר עשיתי איך שאמרת

audio/amir.mp3 לא מצליח לי , משהו פה לא נכון ?

הפורמט(mp3), יש מצב שזה פורמט אחר?
ובאיזה דפדפן זה קורה לך?

[toorbo]

הפורמט(mp3), יש מצב שזה פורמט אחר?
ובאיזה דפדפן זה קורה לך?

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

נראה לי לא עשיתי משהו נכון לא שמתי את השם של התקיה והקובץ במקום נכון אולי ?

[-Smoxer-]

רשמת ככה?

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

תשנה רק את הפרטים ^

[toorbo]

רשמת ככה?

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

תשנה רק את הפרטים ^

אז מה לכתוב ב TYPE ו מה ב SRC לא ממש הבנתי איפה לכתוב את התקיה ואת השם של הקובץ וזה ..

[-Smoxer-]

אז מה לכתוב ב TYPE ו מה ב SRC לא ממש הבנתי איפה לכתוב את התקיה ואת השם של הקובץ וזה ..

ב-type תשאיר ככה, ב-src תרשום את המיקום.

יצא שיעור חדש!

[toorbo]

ב-type תשאיר ככה, ב-src תרשום את המיקום.

יצא שיעור חדש!

הצלחתי , תודה רבה !

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

[HRHITRNV00]

תודה