מסד-נתונים
לולאת foreach כאן (PracticU)
פקודת INSERT כאן (Giraffe Academy)
הדגמה של יצירת מסד נתונים כאן (Practicu)
פקודות SQL- התמקדות בפקודה SELECT כאן (Practicu)
שאילתת SELECT כאן (Itamar Banitt)
מבוא ל- SQL ושאילתת INSERT כאן (Itamar Banitt)
מבוא למסדי נתונים ויצירת טבלה ראשונה כאן (Itamar Banitt)
מבוא למסדי נתונים כאן (Itamar Banitt)
"שיעור 01 - מושגי יסוד" כאן (23:50)
00:12 - מהי הטכנולוגיה CSS ומהם יתרונותיה
03:10 - ** Inline Styling **
עיצוב ראשון - בעזרת CSS-inline ישפיע על תגית ב ו ד ד ת ספציפית בדף
בעזרת המאפיין (Attribute) ששמו style, וחלון ההצעות (Intelisense) עם תכונות ה- CSS.
לדוגמה: עיצוב צבע הגופן באמצעות המבנה הקבוע הבא: css-property : css-value כך:
לסיכום inline - מדובר בעיצוב ספציפי לתגית ספציפית בה נתתי את העיצוב. לא ישפיע על תגיות אחרות, אפילו אם הן מאותו הסוג.
07:15 - ** Embeded styling **
עיצוב שני - באמצעות CSS-Embeded Style t ישפיע קולקטיבית על כ ל התגיות מאותו הסוג אשר נמצאות בדף
שימוש בתגית <style> בה נגדיר את כל העיצובים שיהיו תקפים לכל התגיות באותו הדף בלבד.
שימוש ב- CSS-Rule: הכוונה להגדרות העיצוב (חוקי העיצוב) לפי שם תגית, ובאזור ה- <head> במתחם <style>:
לדוגמה, עבור תגית הפסקה נגדיר צבע-רקע:אדום; סוג-גופן:גנגסה; משקל-הגופן:מודגש; צבע-גופן: כחול.
09:50 - העדפת עיצובים - איזה עיצוב חזק יותר? למשל, אם נעצב ב- 3 המקומות האפשריים 3 צבעים שונים לפסקה, איזה צבע "ייקח"?
עיצוב מקום 1. inline style חזק יותר מעיצוב מקום 2: Embeded style.
מסקנה: ככל שהעיצוב קרוב יותר לטקסט, כך הוא יגבר על עיצובים מרוחקים יותר.
בסעיף הבא נראה שהעיצוב החלש ביותר, במקום 3. External styling, כיוון שהוא הרחוק ביותר מהאלמנט (התגית) לעיצוב.
11:50 - ** External styling **
עיצוב שלישי - באמצעות CSS-External styling ישפיע קולקטיבית לכל דפי האתר
יש לצרף קובץ CSS חיצוני מסוג Style Sheet שיישמר בתיקיית האתר כדי שהעיצוב יהיה תקף. לקובץ זה תהיה הסיומת CSS.
מדובר בהגדרה קולקטיבית, בדוגמה שלנו: לעיצוב כל הפסקאות באתר.
זהו העיצוב הנפוץ ביותר. הנוח ביותר. היעיל ביותר.
קישור בין דף באתר לבין קובץ ה- CSS באמצעות התגית היחידנית (תגית-ריקה) ששמה <link>.
15:25 - סיכום ביניים.
16:30 - היתרונות והחסרונות של כל שיטה:
inline - יתרון: העיצוב מאד חזק ועולה על עיצובים אחרים.
חיסרון: צריך לתת אותו ספציפית לכל תגית. הוא מתערבב ביחד עם הקוד של ה- HTML.
Embeded - יתרון: קיים בדף, תקף ספציפית לדף. חיסרון: לא תקף לדפים אחרים.
Extended - תקף לכל דפי האתר. עובד מהר, כיוון שהדפדפן מוריד קובץ זה פעם אחת בלבד.
כאן סיימנו את עיקר הטרמינולוגיה לגבי css.
18:50 - הוספת דף של CSS
21:50 - הוספת הערות לדף HTML
"שיעור02 - Selectors" כאן (27:50)
00:00 - מהו CSS-Selector ?
יצירת אתר חדש, קובץ CSS והפניה אליו מדף האתר.
02:00 - תזכורת: עיצוב לתגית p בדף ה- CSS.
רענון הדף כדי לראות את העיצוב הקולקטיבי של p.
התגית p היא סלקטור, עבורו הגדרנו עיצובים בדף ה- CSS.
03:00 - סלקטור סוג 1: Element name selector - נכתב על-ידי ציון שם תגית של HTML
המלה Selector נובעת מ- Select, כלומר - בחירה. במקרה זה: בחירה בתגית HTML מסוימת.
05:50 - סלקטור סוג 2: Class Selector - נכתב על-ידי נקודה
יקבל שם שאנו נמציא, ויהיה אחראי על עיצוב נוסף לאותה תגית HTML.
09:35 - סלקטור סוג 3: ID Selector - נכתב על-ידי סולמית (#)
א. מזהה ייחודי עבור תגית, שלא יכול לחזור על עצמו יותר מפעם אחת בדף.
ב. יותר חזק מ- Class Selecter מבחינת עיצובים זהים.
ג. משמש גם לזיהוי תגים על ידי Java-Script (מלמד בהמשך).
14:20 - עיצוב תיבות טקסט באמצעות ה- Element name selector ששמו input.
היתרון: עבודה קלה ומהירה.
החיסרון: יעוצבו גם תיבות שאינן תיבות טקסט וגם הכפתורים sumbit & reset באותו העיצוב.
16:20 - סלקטור סוג 4: Atribute Selector ניתן גם לשם של תגית וגם למאפיין הנמצא בתגית
לדוגמה, נרשום את הסלקטור הבא:
ניתן להשתמש בעקרונות הפסאודו-סלקטור גם באמצעות שימוש ב- Class selectors, אבל אז נצטרך לעבוד קשה יותר
"שיעור 03 - Combinations" כאן (25:30)
קומבינציות בין סלקטורים
00:00 - הכנה: יצירת טופס בסיסי עם 2 תיבות טקסט
01:50 - יצירת קובץ CSS: חיצוני בשם MyStyles ויצירת link אליו
02:45 - Grouping: עיצוב 2 התיבות (תיבת טקסט ותיבת סיסמה) באמצעות Attribute Selectors
05:10 - קומבינציות בין סלקטורים הקיימים ב- HTML
07:25 - מתן id לתגית
09:15 - תזכורת: ההבדל בין id לבין class
10:40 - שתי תגיות עם אותו id, היתכן?
12:30 - פסקאות משולבות: id + class
14:05 - עיצוב עם 2 classes
קומבינציות בין תגיות
16:00 - תגית הנמצאת איפשהו בתוך תגית אחרת, כך: p span
18:20 - תגית הנמצאת ישירות בתוך תגית אחרת, כך: p>span
20:40 - תגית הנמצאת מיידית לאחר תגית אחרת, כך: p+span
22:00 - העדפת דרך אחת על פני דרך אחרת - שימוש נכון בכלים השונים של CSS תוך
הסתכלות על האתר כמכלול אחד
SQL Full Course כאן (Giraffe Academy)
לולאת foreach כאן (PracticU)
פקודת INSERT כאן (Giraffe Academy)
הדגמה של יצירת מסד נתונים כאן (Practicu)
פקודות SQL- התמקדות בפקודה SELECT כאן (Practicu)
שאילתת SELECT כאן (Itamar Banitt)
מבוא ל- SQL ושאילתת INSERT כאן (Itamar Banitt)
מבוא למסדי נתונים ויצירת טבלה ראשונה כאן (Itamar Banitt)
מבוא למסדי נתונים כאן (Itamar Banitt)
כיצד נראית שאילתה לחיפוש נתונים ב- DB? כאן (Isaac)
מבוא לפיתוח אתרים בסביבת ASP.NET כאן (PracticU)
א. מבוא טכני ליצירת אתר.
ב. אופן שמירת האתר במחשב.
ג. עבודה עם פרויקט האתר:
1) קובץ ה- Solution
2) תיקיית האתר (הפרויקט)
3) הקובץ web.config
ד. הוספת דף לאתר.
ה. מה המשמעות של הוספת דף מסוג aspx.
ו. view source - 'הצג מקור'.
CSS
CSS
"שיעור 01 - מושגי יסוד" כאן (23:50)
00:12 - מהי הטכנולוגיה CSS ומהם יתרונותיה
03:10 - ** Inline Styling **
עיצוב ראשון - בעזרת CSS-inline ישפיע על תגית ב ו ד ד ת ספציפית בדף
בעזרת המאפיין (Attribute) ששמו style, וחלון ההצעות (Intelisense) עם תכונות ה- CSS.
לדוגמה: עיצוב צבע הגופן באמצעות המבנה הקבוע הבא: css-property : css-value כך:
<p style="color:blue;">...</p>
<p style="color:blue; font-size:large;">...</p>
הוספת תכונה של גודל-הטקסט, תוך שימוש במפריד נקודה-פסיק (;) כמפריד בין עיצובים.לסיכום inline - מדובר בעיצוב ספציפי לתגית ספציפית בה נתתי את העיצוב. לא ישפיע על תגיות אחרות, אפילו אם הן מאותו הסוג.
07:15 - ** Embeded styling **
עיצוב שני - באמצעות CSS-Embeded Style t ישפיע קולקטיבית על כ ל התגיות מאותו הסוג אשר נמצאות בדף
שימוש בתגית <style> בה נגדיר את כל העיצובים שיהיו תקפים לכל התגיות באותו הדף בלבד.
שימוש ב- CSS-Rule: הכוונה להגדרות העיצוב (חוקי העיצוב) לפי שם תגית, ובאזור ה- <head> במתחם <style>:
לדוגמה, עבור תגית הפסקה נגדיר צבע-רקע:אדום; סוג-גופן:גנגסה; משקל-הגופן:מודגש; צבע-גופן: כחול.
<head>
<style type="text/css">
p
{
backgroud-color: Red;
font-family: @Gungsuh;
font-weight: bold;
color: Blue;
}
</style>
</head>
09:50 - העדפת עיצובים - איזה עיצוב חזק יותר? למשל, אם נעצב ב- 3 המקומות האפשריים 3 צבעים שונים לפסקה, איזה צבע "ייקח"?
עיצוב מקום 1. inline style חזק יותר מעיצוב מקום 2: Embeded style.
מסקנה: ככל שהעיצוב קרוב יותר לטקסט, כך הוא יגבר על עיצובים מרוחקים יותר.
בסעיף הבא נראה שהעיצוב החלש ביותר, במקום 3. External styling, כיוון שהוא הרחוק ביותר מהאלמנט (התגית) לעיצוב.
11:50 - ** External styling **
עיצוב שלישי - באמצעות CSS-External styling ישפיע קולקטיבית לכל דפי האתר
יש לצרף קובץ CSS חיצוני מסוג Style Sheet שיישמר בתיקיית האתר כדי שהעיצוב יהיה תקף. לקובץ זה תהיה הסיומת CSS.
מדובר בהגדרה קולקטיבית, בדוגמה שלנו: לעיצוב כל הפסקאות באתר.
זהו העיצוב הנפוץ ביותר. הנוח ביותר. היעיל ביותר.
קישור בין דף באתר לבין קובץ ה- CSS באמצעות התגית היחידנית (תגית-ריקה) ששמה <link>.
15:25 - סיכום ביניים.
16:30 - היתרונות והחסרונות של כל שיטה:
inline - יתרון: העיצוב מאד חזק ועולה על עיצובים אחרים.
חיסרון: צריך לתת אותו ספציפית לכל תגית. הוא מתערבב ביחד עם הקוד של ה- HTML.
Embeded - יתרון: קיים בדף, תקף ספציפית לדף. חיסרון: לא תקף לדפים אחרים.
Extended - תקף לכל דפי האתר. עובד מהר, כיוון שהדפדפן מוריד קובץ זה פעם אחת בלבד.
כאן סיימנו את עיקר הטרמינולוגיה לגבי css.
18:50 - הוספת דף של CSS
21:50 - הוספת הערות לדף HTML
"שיעור02 - Selectors" כאן (27:50)
00:00 - מהו CSS-Selector ?
יצירת אתר חדש, קובץ CSS והפניה אליו מדף האתר.
02:00 - תזכורת: עיצוב לתגית p בדף ה- CSS.
רענון הדף כדי לראות את העיצוב הקולקטיבי של p.
התגית p היא סלקטור, עבורו הגדרנו עיצובים בדף ה- CSS.
03:00 - סלקטור סוג 1: Element name selector - נכתב על-ידי ציון שם תגית של HTML
המלה Selector נובעת מ- Select, כלומר - בחירה. במקרה זה: בחירה בתגית HTML מסוימת.
05:50 - סלקטור סוג 2: Class Selector - נכתב על-ידי נקודה
יקבל שם שאנו נמציא, ויהיה אחראי על עיצוב נוסף לאותה תגית HTML.
09:35 - סלקטור סוג 3: ID Selector - נכתב על-ידי סולמית (#)
א. מזהה ייחודי עבור תגית, שלא יכול לחזור על עצמו יותר מפעם אחת בדף.
ב. יותר חזק מ- Class Selecter מבחינת עיצובים זהים.
ג. משמש גם לזיהוי תגים על ידי Java-Script (מלמד בהמשך).
14:20 - עיצוב תיבות טקסט באמצעות ה- Element name selector ששמו input.
היתרון: עבודה קלה ומהירה.
החיסרון: יעוצבו גם תיבות שאינן תיבות טקסט וגם הכפתורים sumbit & reset באותו העיצוב.
16:20 - סלקטור סוג 4: Atribute Selector ניתן גם לשם של תגית וגם למאפיין הנמצא בתגית
לדוגמה, נרשום את הסלקטור הבא:
input[type="text"] {...}
18:05 - סלקטור סוג 5: Pseudo Selector - מתייחס לדברים ספציפיים הקיימים בתגיות
לדוגמה, עיצוב של התגית <...a href>:
תגית זו מקבלת צבעים שונים, בהתאם לאם מדובר בגלישה ראשונה של המשתמש לדף, אם מרחפים עם העכבר מעל הקישור וכו'.
תגית זו מקבלת צבעים שונים, בהתאם לאם מדובר בגלישה ראשונה של המשתמש לדף, אם מרחפים עם העכבר מעל הקישור וכו'.
לדוגמה, נרשום את הסלקטור הבא:
a:link {color:Orange;}
a:hover{color:lime;font-size:x-large;}
a:visited{color:red;}
p:first-line{font-weight:bold;}
p:first-letter{font-size:200%;color:blue;}
ניתן להשתמש בעקרונות הפסאודו-סלקטור גם באמצעות שימוש ב- Class selectors, אבל אז נצטרך לעבוד קשה יותר
"שיעור 03 - Combinations" כאן (25:30)
קומבינציות בין סלקטורים
00:00 - הכנה: יצירת טופס בסיסי עם 2 תיבות טקסט
01:50 - יצירת קובץ CSS: חיצוני בשם MyStyles ויצירת link אליו
02:45 - Grouping: עיצוב 2 התיבות (תיבת טקסט ותיבת סיסמה) באמצעות Attribute Selectors
05:10 - קומבינציות בין סלקטורים הקיימים ב- HTML
07:25 - מתן id לתגית
09:15 - תזכורת: ההבדל בין id לבין class
10:40 - שתי תגיות עם אותו id, היתכן?
12:30 - פסקאות משולבות: id + class
14:05 - עיצוב עם 2 classes
קומבינציות בין תגיות
16:00 - תגית הנמצאת איפשהו בתוך תגית אחרת, כך: p span
18:20 - תגית הנמצאת ישירות בתוך תגית אחרת, כך: p>span
20:40 - תגית הנמצאת מיידית לאחר תגית אחרת, כך: p+span
22:00 - העדפת דרך אחת על פני דרך אחרת - שימוש נכון בכלים השונים של CSS תוך
הסתכלות על האתר כמכלול אחד
אין תגובות:
הוסף רשומת תגובה