[השמעת מוסיקה] אליסון BUCHHOLTZ-AU: בסדר, כולם. ברוכים השבים לסעיף. אז סדר היום שלנו להיום הולך על הרבה יותר דברים dev אינטרנט. אני לא יודע כמה מן אתה ראית psets שלך מאז שוחרר מוקדם יותר הבוקר. הייתי ככמה אנשים שקראו את המפרט, אבל כמו לראות איך היה לך כל של, כמו, שבע שעות להסתכל על זה וזה ביום שני ו כנראה שהייתה לך בכיתה, אני הולך להניח ש רובכם לא. אם יש לך, תהלה נוספת. אתה עוזר בעצם ליישם אינטרנט פשוט שרת ב- C, שהוא pset חדש, כך אתם מקבלים להיות חזירים. זה הולך להיות כיף, שבוע פרוע, אבל אני חושב שזה יהיה כיף וזה יהיה באמת ניסיון טוב דווקא. אז כדי להכין אותך ל כי, בסעיף היום, אנחנו הולכים ללכת chmod, TCP / IP, ו אז קצת HTML ו- CSS. 

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

אז, בנימה, chmod. אז בעצם כל מה שאתה צריך לדעת על chmod הוא שהוא משמש לשינוי הרשאות קובץ, נכון? כך שזה רק כמה מערכות קוראים לזה שינוי הרשאות, כפי שאומר כאן. ואם אי פעם אתה רוצה לראות מה הרשאות קובץ יש, במקום רק עושה ls, אתה יכול לעשות ls -l. l הוא הקיצור של זמן. 

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

אז בעצם, לשנות הרשאות הקובץ שלך, אתה רק רוצה להשתמש chmod. אתה יכול לחשוב על זה כמו כל האחרים UNIX קורא כמו ls או CD או מה שלא. זה פשוט סוג של שיחה נוספת כמו. 

אז אנחנו עושים chmod ואז יש שלוש ספרות בדרך כלל. ישנן כמה דרכים לעשות זה, שאחד מהם יעברו על. אבל בדרך כלל, יהיה לך שלושה ספרות הנעה 0-7 בכל פעם. 

אז דבר אחד הוא שיש שלוש הרשאות שונות שאנחנו יכולים לתת לכל קובץ. וזה קריא, שהוא מיוצג על ידי r, שיהיה הגיוני בקצת; w, שהוא לכתיבה; והפעלה שהוא, x. אני יודע שהודעת אחת, הפעלה, אולי לא הכי הגיוני, אבל אנחנו מייצג אותו עם x. 

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

אז אתה יכול לחשוב על זה ראשון מספר מתאים למשתמש בפועל או הבעלים של הקובץ, השני מספר יהיה מתאים לקבוצה, ואת האחרון מתייחס לעולם, בסדר? אז מה שקורה הוא לזכור r אחר המספרים אלה הוא 4, w הוא 2, x הוא 1, נכון? זה-- אם אתה מסכם את אלה, זה נותן לך שמספר הראשון שאנו עלולים קלט בchmod שלנו. 

אז במקרה הזה, מה ש היה מספר זה יהיה? זה יהיה 4 בתוספת 2 בתוספת 1, שבו הוא 7, נכון? ובמקרה הזה, אלה אין להם מה, אז זה ממש כאן היית לתרגם chmod 700, בסדר? ומה שעושה זה שהיא מעניקה לכל הרשאות אלה למשתמש שלך. 

אז זה אומר שמשתמשים שלנו יכול לעשות מה שהם רוצים. הם יכולים לקרוא קובץ זה. הם יכולים לבצע את קובץ. הם יכולים לכתוב בקובץ זה. אבל קבוצה והעולם, לא הרשאות שהיא, בסדר? 

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

כמה מכם ראה את דוגמא שבו היה כמו לchmod x פלוס זה? ראית את זה בהרצאה, אני חושב? אז עומד לכל. זה אומר לתת לכל משתמשיה, ששכחתי לשים כאן. 

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

אז בתוספת x פירושו chmod. אז לשנות את ההרשאות של כל האנשים אם זה הרשאות תוספת a--. וx-- שמתכוון למה שרשות אנחנו מעניקים לכולם. לקרוא, לכתוב, או לבצע? 

קהל: ביצוע. 

אליסון BUCHHOLTZ-AU: ביצוע. אז אנחנו נותנים את כל המשתמשים רשות לבצע את הקובץ, בסדר? אז מה אם אנחנו רוצים לעשות כי עם הצורה המספרית? אז לזכור עם מספרי, אנחנו רוצים שלושה מספרים. 

קהל: 4. אליסון BUCHHOLTZ-AU: מה זה היה? קהל: 4. אליסון BUCHHOLTZ-AU: לא 4. קהל: 0, 0, 4. אליסון BUCHHOLTZ-AU: ובכן, אנחנו רוצים לתת אותו לכל המשתמשים, נכון? אז אנחנו הולכים ליש לי מספר בכל חריץ. זה הולך להיות אותו מספר בכל חריץ כי אנחנו פשוט רוצים לתת לי הרשאות הפעלה לכולם. אז הפעלה היא 1, אבל על המסלול הנכון. 

שהיית אז אם אנחנו לא chmod 111 להיות שווה הערך של chmod X ועוד. האם זה הגיוני לכולם? אנחנו הולכים לעבור כמה דוגמאות. 

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

אז עם זה, נלך לדוגמה, כי אני מרגיש כמו דוגמאות תמיד לעשות את הדברים האלה קלים יותר להבין. אז rwx-- שעברנו זה-- יכול להיות גם מייצג 700. זה הדוגמא שאנו נראים בלמעלה של התמונה. אז chmod 444 על כמה קבצים היה נותן את מה שהרשאות? הייתם ממש קרוב. קהל: קריא לכל. אליסון BUCHHOLTZ-AU: קריא. אז קריא לכולם, נכון? ואז מה עוד דרך לעשות את זה? אם אנחנו רוצים לעשות chmod עם או של r או w של, בתוספת וחסרונות, מה הייתה השיחה שנראית? זה יהיה chmod מה? 

קהל: r בתוספת. 

אליסון BUCHHOLTZ-AU: r בתוספת על 5. אוקיי, אז זה אותו הדבר כמו זה, רק שני תרגומים שונים של אותו הדבר. אז עם זה, יש לנו אלה. אז אני רוצה שבחורים לנסות ולכתוב אלה סוג של בכיוון ההפוך שלהם. 

אז עם chmod 555, מה זה יהיה? האם זה יהיה בתוספת או u בתוספת או משהו כזה? עבור U בתוספת x, תן לי שלושה מספרים. ואז לספר לי על מה הרשאות אנחנו בעצם מתן ומי? 

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

כמו כן, האחרון הוא מסובך. זה שתי chmods לאחרון. למעשה, תנו לי לסגור את הדלת ש בעוד אתם עובדים על זה. סוכריות תמיד הכרחיות ביום שני אחר הצהריים. 

אוקיי, אז chmod 555. מה דרך אחרת היינו יכולים לכתוב את זה? יש לך רעיונות? כן. 

קהל: rx בתוספת. 

אליסון BUCHHOLTZ-AU: r בתוספת rx. האם אתה רוצה להסביר למה זה הייתי RX? 

קהל: מכיוון שיש לך 5, אז זה 4 פלוס 1, בתוספת, כך שקרא את הפעלה, וזה לכולם. אליסון BUCHHOLTZ-AU: נכון. אז רק כדי לחזור ולהדגיש, 5 כאן אנחנו יודעים כסכום של 4 ו- 1, כי כל מספר בשלישייה שלנו הוא סכום של ההרשאות עבור קבוצת משנה ש, נכון? כך או המשתמש, קבוצה, או העולם. אז במקרה הזה, אנחנו יודעים ש 5 יש שהוקמו על ידי 4 ו -1. 

ו 4 ו 1 מתאים ל קריא והפעלה. אנחנו נותנים את זה לכולם, כדי שנוכל לעשות chmod rx בתוספת. וכמובן שאנחנו פשוט הלכנו באמצעות השאלות שיש, אז עכשיו קובץ זה הוא הפעלה וקריא לכולם. 

אז מה לגבי השני? מה יכול המספר שלאדם יהיה? יש לך רעיונות? קדימה. 

קהל: 100 [לא ברור]. 

אליסון BUCHHOLTZ-AU: 100. בדיוק. אז אתה רוצה להסביר למה 100? קהל: כי זה ל למשתמש, כך שזה במקום הראשון. ואז x ההפעלה הוא 1. אליסון BUCHHOLTZ-AU: בדיוק. אז אנחנו מעניקים הפעלה הרשאות רק למשתמש. אז במקרה הזה, זה יהיה 100. ויש לי את כל התשובות על השקופית הבאה במקרה אתה כותב את הרבה דברים. 

אוקיי, אז הבא זה באמת עשה עם שתי chmods, אתה יכול לעשות את זה. אז האם מישהו יש כל רעיון כיצד תוכל לקבל chmod 640 שכתובים בדרך אחרת? אתה יכול לשנות את המשתמש ראשון ולאחר מכן אתה יכול לשנות את הקבוצה היא הרמז שלי. 

אז אם אנחנו פשוט היו משנים את משתמש, שהוא ראשון זה כאן, מה שאולי השיחה שלנו להיות? אז משתמש הוא u, נכון? אז chmod u בתוספת מה? "ממממ? 

קהל: RW. אליסון BUCHHOLTZ-AU: RW. ימין, לקריאה וכתיבה, כי קריאה הוא 4, w הוא 2, סכום אלה יחד כ6. אז אנחנו מקבלים chmod u בתוספת RW, ואנחנו מקבלים 6 הראשונים שלנו שם. 

אז לקבל 4, עכשיו אנחנו רוצים כדי לשנות את ההגדרות לקבוצה שלנו. אז אנחנו הולכים לעשות g chmod בתוספת מה? מה 4? 

קהל: r. אליסון BUCHHOLTZ-AU: r. בדיוק. אז אנחנו נותנים לבעל לקרוא ולכתוב הרשאות ואנחנו נותנים לקריאה הקבוצה הרשאות, שיש לנו את כל כאן. "ממממ? 

קהל: אם אתה יכול לכתוב משהו, האם זה אומר שאתה יכול לבצע אותה? 

אליסון BUCHHOLTZ-AU: אתה יכול לכתוב לsomething-- אני לא מאמין שזה אומר שאתה יכול לבצע אותה. מגניב. אז זה כל מה שאנחנו פשוט עברנו. אז בבאה זה, זה מקרים פשוט סוג של משותפים שברצונך לשמור ב אכפת ללהגדיר את הבעיה שלך. אלה הם בדרך כלל ההרשאות כי אנחנו אוהבים אותך להשתמש. 

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

עבור כל קובץ שאינו PHP, אתה הולך להשתמש 644, שיעשה מה? מה זה מרמז, או מה ש הרשאות זה נותן? אז הבעלים יכולים מה? קהל: קריאה וכתיבה. אליסון BUCHHOLTZ-AU: קריאה וכתיבה. ואז קבוצה ואחרים רק יכול לקרוא, נכון? ולאחר מכן chmod 600 לכל קבצי PHP שאתה משתמש, הבעלים שלך, שוב, יכול לקרוא ולכתוב אליו אבל כולם הוא פשוט סוג של חסום. 

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

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

אז עם TCP / IP, כל הפרוטוקולים הללו, כמו סוג של במבני נתונים שלך בשבוע שעבר, שזה הרבה יותר חשוב לקבל סוג של אינטואיציה רמה גבוהה יותר שלהם. זה לא CS143 לאן אנחנו הולכים לבקש ממך ליישם רשת, אז אתה אהיה בסדר אם אתה לא מבין גרגירי nitty של כל הפרוטוקולים. מה שחשוב הוא להבין כמו סוג של מה שהם מייצגים ומדוע הם חשובים. 

אז TCP / IP, כמובן, זה Transmission Control Protocol או פרוטוקול האינטרנט, שהוא בעצם רק סט של חוקי יסודו של דבר או תקנים המציינות נתונים איך זה צריך להיות מטופל, איך זה צריך להיות packetized, מועבר, וקיבל. אז זה בעצם, בדיוק כפי ש אומר כאן, מגדיל את הסיכוי נתונים שמקבל בי אתה רוצה את זה כדי להגיע ל. 

אני בטוח שאם אתם הלכנו ל הרצאה או צפתה בו באינטרנט, הוא has-- אני לא יודע אם הוא עשה את זה בשנה זו, אבל אני יודע בשנה שעברה, היה לו הדגמה שם הייתה לו תמונה של Rob והוא לפצל אותה ל ארבעה ולשים אותו במעטפות וניסיתי להעלות אותה על סנדרס. ואתה יכול סוג של חושב על זה ככה. זה פשוט סט של חוקים ש תגיד לי נתונים איך להגיע לאיזה מקום ומאפשר לך לדעת אם אתה חסר נתונים, באותו אופן שאם אתה לוקח מספר עמודים של הערות ואתה לתייג אותם עם דף 104, דף 204, ואתה חוזר ללימודים מאוחר יותר ואתה חסר something-- אתה לא יכול למצוא את הדף 304-- אתה יודע משהו לא בסדר, אז אתה יכול להסתכל דרך את ההערות שלך שוב או לבקש ממישהו לשלוח לך סיכומים מאותו היום. באותו אופן עם נתונים באינטרנט. אם אני מבקש משהו מחלק השרת ואת זה צריך לשלוח זה במנות מרובות, כנראה הולך מספר זה באופן כלשהו, ​​תן לי לי כמה אני צריך לקבל, ותגיד לי, אה, זה הוא אחד מתוך 10 או שזה אחד 10,000. ככה כשאני הולך להרכיב מחדש את כל החלקים יחד, אני יודע שאם משהו חסר ואני יכול לבקש את זה שוב. האם זה הגיוני? רק מערכת של כללים. בבסיסה, סט של כללים, בסדר? 

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

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

אז יש לנו כאן, 21 הוא קובץ פרוטוקול העברה, כל כך פשוט את החוקים השולטים בהעברת קבצים. 25, משהו שכולנו להשתמש הרבה יותר מדי, הוא דואר אלקטרוני. 53 הוא שם תחום מערכת, שהיא בעצם רק סוג של בדיקה ל כתובת ה- IP של שם מתחם. 

אז אני די בטוח שזה היה הזכיר בהרצאה, אם אתה ללכת למשהו כמו google.com, יש לו את כתובת ה- IP המשויך לזה. זה לא ממש google.com. וכך 53 היא היציאה שבעצם לוקח טיפול מסוג של תרגום זה שלכתובת ה- IP עבורך. ואז 80 ו- 443 נפוצים מאוד. גם לך יש דף האינטרנט שלך או יש לך דף האינטרנט המאובטח שלך, שהרבה דפי אינטרנט הם העברה לידי עכשיו. 

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

אז בסופו של הדבר לכך, שאנחנו מדבר על דפי האינטרנט ו- HTTP, שהוא למעשה הנושא הבא שלנו ל היום לפני שאנחנו הולכים ל- HTML ו- CSS ואתה באמת יכול לקודד את דף אינטרנט. זה יהיה כיף. תהיה לנו תמונות של ארנבות וזה יהיו נהדרים. 

אז HTTP, כפי שאתה יכול לראות כאן, הוא אחד מראשי התיבות היפות במשך שבוע זה, שהוא Hypertext Transfer Protocol. אז שוב, זה רק קבוצה נוספת של כללים ש מסדיר היפרטקסט להעביר, במקרה זה. אז הדרך הטובה ביותר ללמוד על זה הוא פשוט סוג של לפרק אותו ל מילות בודדות אלה כי יש הרבה מילות על המסך יש. 

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

אז במקרה הזה כאן, זה היפרטקסט. זה אומר לנו שיש לנו כמה קישור שאנחנו הולכים, שהוא cs50.net, ש עכשיו cs50.harvard.edu. שקופיות אלה הן קצת ישנות. וזה הולך לתצוגה זה כמו זה, כקישור, ולאחר מכן אתר ממש מגניב. 

אז זה הטקסט, שהוא קצת קצת דברים ממש מגניבים שם. שלך כדי שתוכלו לקשר את הדברים ויכול להוסיף תמונות ואתה יכול לעצב את הדברים. והדבר הכי המוכר ש בחורים בטח יש לי עם היפרטקסט הוא HyperText Markup Language, HTML, מה שכמובן כל האינטרנט שאנו רואים סביבנו, שהוענק עם סגנון קצת CSS נזרק. 

אבל אם מישהו היה גדול באמת עם MySpace, אני בטוח שאתה כל HTML המשומש כל הזמן כדי ליצור פרופילים מושלמים, נכון? אני מרגיש כמו שיכול להיות התייחסות מיושנת עכשיו, אבל שיהיה. רק little-- אתם הם לא כל כך הרבה יותר צעירים. כמה מכם יותר מבוגר ממני. MySpace עדיין היה דבר כשהייתי צעיר. אני לא כל כך ישן. 

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

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

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

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

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

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

זה מה שהלקוח או מה דפדפן האינטרנט שלך יהיה לשלוח לשרת שלך. אז זוהי בקשת גט, אז זה לבקש משהו מהשרת. וזה, כמובן, HTTP וזה גרסה 1.1. 

אז שאר זה כאן הוא מה שאנו מכנים הכותרת, והמידע הנוסף שלה זה נותן לנו מושג טוב יותר של מה אנחנו בעצם מבקשים, או מידע שאנחנו רוצים לתת לי השרת שעלול להיות רלוונטי. אז User-Agent נותן עוד קצת תיאור on-- למשל, כאן, תלתל / 7.24.0 הוא בעצם הולכים לספר לי השרת שבו אנו משתמשים ב- Google Chrome כדפדפן שלנו. כל כך אי פעם אם אתה שומע על אנשים שמדברים על ביצוע יישום מגיב לדפדפנים מרובים, זה משהו שהם הייתי משתמש כי אם אתה לא יודע מה דפדפן הבקשה מגיעה מ, אתה לא יכול להתאים את הנתונים של. אז במקרה הזה, משתמש הוא רק נותן סוג זה של מידע מזהה על מה דפדפן המשתמש שלך משתמש כרגע ב, בסדר? 

אז יש לנו גם מארח, שהוא שבו אנחנו בעצם רוצים ללכת ל. במקרה זה, אנחנו רוצים ללכת ל apple.com, לקנות iPads החדש מגניב או משהו, אולי חמוד אורות בחדרי המעון שלנו. ושם ערך בסוף הוא פשוט מילוי, רק דבר כללי בשבילכם כדי לראות. זה לא באמת מתאים לכל דבר כאן. 

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

אז עושה את זה הגיוני לכולם? זוהי רק דוגמה ל בקשה, כותרות, מה לא. אוקיי, אז עם זה, יש לנו איזו תגובה. 

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

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

וככל שמעמד זה קוד כאן, כמובן, 200 הוא לא היחיד יכול להיות לך, נכון? יש לנו הרבה קודי מצב. מישהו זוכר מי מ אחרים שהזכרנו בהרצאה? הרבה מהם מתחילים עם 4. 

קהל: 404. 

אליסון BUCHHOLTZ-AU: 404, שהוא? 

קהל: קובץ לא נמצא? 

אליסון BUCHHOLTZ-AU: קובץ לא נמצא. בדיוק. אז מה לגבי 403? קהל: אסור. אליסון BUCHHOLTZ-AU: אסור. אז מה אתה חושב זה אומר שעם chmods? 

קהל: זה אומר שאתה אין להם הרשאה לקרוא אותו. 

אליסון BUCHHOLTZ-AU: בדיוק. בדרך כלשהי, אין לך הרשאה לגשת אליו, נכון? אז 404, 403. יש ממש מצחיק אחד שתמיד להציג את כל שנה ש הייתי צריך לשים כאן, כמו 413, שהוא אני קומקום. אתה יכול Google זה. זה מצחיק כמו, שהוא קוד 413 וזה אני קומקום. שאני לא יודע למה שהיית אי פעם צריכים את זה באינטרנט, אבל אני סוטה מהנושא. קהל: אולי אתה סיר תה. אליסון BUCHHOLTZ-AU: אולי השרת הוא קנקן תה. מי יודע? בסדר, אז אנחנו עומדים מעבר לקידוד אמיתי. אני מרגיש כאילו אתם הולכים לצאת מכאן די מהר. 

קהל: למה עושה את זה אומר "שרת: פעמיים? 

אליסון BUCHHOLTZ-AU: Hm? שרת פעמיים? זו שאלה טובה. אני לא בטוח. אני תגלה ו אני בדוא"ל לכולכם. 

אישור, כל שאלות אחרות חוץ מזה? טוב? מגניב. 

HTML ו- CSS, ועכשיו אנחנו להגיע לכל חלקי הכיף. אז כפי שציינתי קודם, HTML הוא כנראה אחד הדברים אתם מכירים את רוב עם. אז יש לנו HyperText Markup Language. 

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

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

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

Google, מכאן והלאה את, כנראה יהיה אחד המשאבים הטובים ביותר שלך והחברים. או Bing-- אני עובד במיקרוסופט, אז אולי אני צריך לומר בינג. אבל כמעט כל דבר הוא פשוט הולך להיות תחביר, לכן הבנה מה הם התגים, understanding-- לפחות עם CSS-- כיצד לשנות תכונות מסוימות. זה יהיה סופר שימושי. 

אז למרות שאנחנו לא יש כל דברים מוכנים, יש לנו סוג של כמה שיטות עבודה מומלצות כי אנחנו רוצים אתכם לנסות ולציית by-- או לייתר דיוק, אתה צריך לציית עד להודעה חדשה. אז לסגור את כל התגים שלך. אני מקווה שכולם has-- אתה יודע מה, אם זה לא הגיוני עכשיו, אני מבטיח שזה יהיה הגיוני כשאנחנו קידוד את הדף. אבל לסגור את כל התגים שלך. אז אם אי פעם יש לך קצת כותרת זה הסוגר, H1, הסוגר, לוודא ש בכל פעם שסיימת עם זה, אתה סוגר כותרת ש. לאמת את הדף שלך עם W3 Validator. אם אתה לא סוגר את התגים שלך, אתה יכול לקבל התנהגות בלתי צפויה. זה אומר שהדף שלך הוא לא חוקי אם אתה מפעיל את זה דרך validator זה. לכן, כאשר בdoubt-- ובמיוחד בשבוע השבוע הבא של ו pset-- באותו אופן שאנו מבקשים לך להשתמש לבדוק 50 וסגנון 50, אתה יכול לחשוב על זה כאחת מהבדיקות שלך, בסדר? 

אז אם זה לא עובר Validator W3. זה משהו שאנחנו יהיו לעגן אותך על. או אני אומר לך תקין עכשיו, אני אוריד לך את על. כדי לוודא שזה מאמת. זה לא קשה. אתה פשוט להדביק בקוד שלך וזה יהיה גם לומר עבודה טובה או שאתה חסר משהו באותה הדרך הסגנון כי 50 אומר לך לאן אתה להתעסק. 

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

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

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

ואז שני דברים עיקריים לדעת הוא ש selectors-- שתיים מfactors-- הראשי הם מזהה, שהוא ייחודי. אתה רק יכול להשתמש בזה דבר אחד. אחרת, זה הולך לצעוק עליך. וכאשר אנו מגדירים אותו בקובץ CSS, זה יהיה להיות זיהוי חשיש ולאחר מכן מה תכונות שאנחנו רוצים. אני מבטיח שאנחנו הולכים לעבור דוגמא. זה יגרום לי הרבה יותר הגיוני. 

כיתה יכולה להתייחס ללוקים מרובים. אז אתה יכול לקבל שלך סעיף ראשון והשלישי יש לו הסוג של תכונות אם אתה מקשר אותם עם אותו הסוג. וכאשר אנחנו מגדירים אותם ב- CSS, שאנחנו עושים בכיתה נקודה, עם כיתה להיות כל מה ש אתה רוצה שזה יהיה שם. 

אז אני יודע שזה נכון עכשיו מאוד מופשט. זו הסיבה שאנחנו הולכים לקוד. אני יודע שאתם אוהבים ש, וכל מה שאתה הולך לעזור לי כי זה דף האינטרנט שלך. זהו דף האינטרנט של הסעיף שלנו, בחורים. אז יש שאלות לפני ש לכבות את PowerPoint, או כל דבר אתה רוצה שאני לגלול אחורה ללפני שאנחנו מתחילים קידוד? 

קהל: כשאתה אומר תגי משחק, זאת אומרת בוררים או תגים? אליסון BUCHHOLTZ-AU: אתה יכול לחשוב עליהם כעל אותו הדבר. זה מילות פשוט שונות. אני מתכוון, כמו בוררים. אבל בוררים גם מפה לתגים. כך שאתה יכול לחשוב עליהם כ ביעילות את אותו הדבר. אני מבטיח שזה הולך לעשות יותר הגיוני כאשר אנו לקודד. שום דבר מ PowerPoint או כל שאלה עכשיו לפני שאנחנו באמת ליצור דף של הסעיף שלנו? כולם מוכנים? מגניב. 

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

יש לנו כמה HTML. יש לנו כמה כותרת, שבו אנו רואה כאן כדף דוגמא אינטרנט. כותרת חלק, חלק גופן. אלה הם תגים, בסדר? לכן, כאשר אני מתכוון לסגור את התגים שלך, אנחנו רואים כאן ראש הסוגר זה הוא הפתיחה שלך תג, וסוגר זה / ראש סוגר אותו, בסדר? 

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

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

ואם אנחנו הולכים לכאן ו צריך reload-- לשמור וreload-- אנחנו שמים לב שעד כאן זה השתנה, נכון? מגניב. אז זה משנה את השם. זה מה שיש בכרטיסייה שלך. 

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

אז מה אנחנו יכולים לעשות הוא הכותרת היא פשוט שם. בואו נעשה איזשהו גוף. אז יש לנו כמה גוף כאן. אני תמיד עושה פתוח ו לסגור התגים שלי כדי להתחיל, באותו אופן שאני עושה פלטה. אה. חכה, מה? 

קהל: [לא ברור]. אליסון BUCHHOLTZ-AU: אה. אתם גרמתם לי. עבודה טובה. כוכב זהב. 

אוקיי, אז יש לנו כמה גוף כאן. ועכשיו בואו נתחיל הוספת טקסט. אז יש לך כמה שונה אפשרויות להוספת טקסט. יש לנו דברים כמו כותרות. יש לנו טקסט פשוט רגיל. אז בואו נתחיל עם כותרת. למעשה, אם אתם רוצים כדי למשוך את קוד ה- HTML של W3 בית הספר, סוג שלך יכול להסתכל סביב ואם יש משהו ש במיוחד שאתה רוצה לנסות את עם דף אינטרנט זה, אנחנו יכולים לעשות את זה. אז במקרה הזה, בואו פשוט לעשות קצת H1. אז h1 הוא כמו הכותרת הגבוהה ביותר. זה ייתן לך משהו כי הוא מאוד גדול ונועז. 

ובמקרה הזה, מה לעשות שאנחנו רוצים לטקסט הראשון בדף האינטרנט שלנו? שום דבר. אתם הולכים ליצור את זה. אני רק הולך להקליד. קהל: ברוכים הבאים. 

אליסון BUCHHOLTZ-AU: ברוכים הבאים. אוקיי, אז אם אנחנו שומרים אותו ואנו טוענים, יש לנו בברכה גדולה גדולה. אז רק כדי שתוכל לראות הבדלים, בואו נעשה משהו בH6. מה אנחנו רוצים כאן? נכון? 

אוקיי, אז רק כדי שתוכל לראות את ההבדל. כן, נשגב. אז אם אתה שם לב, h1, מאוד, מאוד גדול. H6, כמו נועז, אבל קטן בהרבה, ויש לך את כל מה שביניהם. כך שאתה יכול H2, H3, H4. ואלה הם רק כותרות, כך שאם אתה מנסה כדי ליצור דף אינטרנט ש יש חלקים שונים, אולי אתה רוצה להשתמש ב כותרות שם איפשהו. 

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

אני לא יודע אם יש לכם כל העדפות שבו אחד שאנחנו רוצים. האם יש לך העדפות? זה כאן? Down. אישור. אחד שזה. בחירות טובות. 

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

אז אנחנו פשוט הולכים כדי להעתיק את כתובת האתר של התמונה. ומה שאנחנו רוצים לעשות הוא, בואו פשוט אומר שיש לנו כמה p לסעיף. אנחנו הולכים לומר "תראו מסתכל על הארנב חמוד. d'awwww. " אני אוהב את ארנבות שלי. יש לי ארנב בבית. אני מתגעגע לארנב שלי. אז מה אנחנו הולכים do-- אני לא יודע אם אתם רוצים to google זה-- אבל עם HTML, איך אתה יכול לכלול תמונה? פשוטו כמשמעו, אם אתה google "כולל תמונה ב- HTML," למה אתם לא אומרים לי מה תג זה צריך להיות? 

קהל: img source-- 

אליסון BUCHHOLTZ-AU: img source-- קהל: --equals-- אליסון BUCHHOLTZ-AU: --equals-- קהל: --quote-- כן. אליסון BUCHHOLTZ-AU: מושלם. יפה. ראה, דור MySpace, נכון? קהל: Neopets. אליסון BUCHHOLTZ-AU: Neopets. אה, בסדר. וואו. זה היה מטורף. אישור. 

אז לוודא שאני מקבל את זה. מגניב. כך זה צריך להיות כאן. ולאחר מכן, אם אנו טוענים, שיש לנו שלנו באני על הדף האם זה לא מקסים? 

זה כל כך חמוד. בחרת תמונה גדולה, גדולה. אני חופר אותו. 

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

זה עדיין יהיה במרכאות. זה יהיה בדיוק כמו אם היינו לנו בשם זה-- אם תמונה זו ניצלה בתיקייה עם קובץ HTML זה שאני עורך ו נקרא bunny.jpg. אנחנו יכולים גם לעשות את זה וזה היה מגיע. עם זאת, אין לי את זה נשמר ב את הקובץ ואני רוצה לשמור את השפן, כך אנחנו הולכים לשמור את הקישור. 

קהל: מהו rabbit.org? 

אליסון BUCHHOLTZ-AU: rabbit.org. זה appropriate-- תראה, אתה יכול לאמץ אותה. אימוץ. bunny.jpg. אני רוצה לאמץ הארנב הזה. הו, אלוהים, זה כל כך חמוד. 

אוקיי, אז אנחנו הוספנו כותרות. הוספנו תמונה. כמובן, הוספנו טקסט כאן, נכון? אם אנחנו רוצים להוסיף אחרים טקסטים, היינו הולכים ככה. אז זה סעיף אחר. 

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

אז יש לנו עוד סעיף כאן, נכון? אז אולי אתה רוצה לעשות משהו קצת יותר מעניין מסתם כל הטקסט שלך, כמו מיושר לימין. אולי אתה רוצה למרכז את הטקסט שלך, בסדר? 

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

קהל: ליישר p. 

אליסון BUCHHOLTZ-AU: אז ליישר p שווה "מרכז". הוא הורג אותו, בחורים. כולכם צריכים להגביר את. ויש לנו "זה במרכז". ועכשיו יש לנו משהו במרכז. 

באותו אופן, אם אתה רוצה את זה ייושר לשמאל, אתה יכול לעשות את שווים ליישר שמאל, ליישר שווה תקין. לגמרי תלוי בך. אם אני עשיתי כאן, אז זה should-- עכשיו זה מיושר לימין. 

קהל: אליסון? לפי מקור תמונה, למה לא יש קרוב של מקור img? אליסון BUCHHOLTZ-AU: מצטער. אחד זה צריך להיות יש עכשיו שאתה טוב. עכשיו שאנחנו טובים. קהל: אין לך כדי לסגור אותו שם, או לא? אליסון BUCHHOLTZ-AU: טוב, אז img מקור, זה אחד פשוט- עם תמונה, זה פשוט נראה כאלמנט אחד, ואילו אם אתה שם לב לשאר אלה, יש לנו כמה תג אז מידע ש הוא נוגע וללאחר מכן תג סוגר. אבל עם תמונה, הכל רק סוג של עצמאי. מגניב. אז אתם יודעים איך ליצור כותרת, אתה יודע איך טקסט קלט, אתה יודע איך לשים תמונה עכשיו, אתה יכול ליישר דברים. 

עוד דבר שאתה אולי כדאי לך להיות מסוגל לעשות הוא ליצור רשימה בCS-- אנחנו סוג של ללכת לpset בשבוע הבא. הדברים שאנחנו בדרך כלל מלמד את זה בשבוע ש הולך ממש טוב עם pset בשבוע הבא, כך שאנחנו סוג של ערבוב, חופף כאן דברים. אבל זה יהיה שימושי לשבוע הבא. 

אז אם אנחנו רוצים ליצור כמה רשימה, איך אנחנו יכולים לעשות את זה? אתה לא יכול לענות על זה זמן. מישהו אחר צריך. זה לא קשה, בחורים, מבטיחים. Google "HTML רשימה לא מסודרת." מה זה היה? 

קהל: [לא ברור]. אליסון BUCHHOLTZ-AU: נכון. אז האם אנחנו רוצים הורה או לא מסודרת? בואו נעשה לא מסודרת. אז יש לנו כמה ul, ש עומד ללא ממוינת רשימה. ומה יש לנו לכל רכיב? האם זה צריך תג משלו? האם אנחנו יכולים פשוט להתחיל לכתוב דברים? 

קהל: li. 

אליסון BUCHHOLTZ-AU: li. אז מה היא הרשימה שלנו הולכת להיות? מה אנחנו רוצים כאן? אנחנו פשוט עושים שמות. פשוט תעשה את יעקב. 

מזונות ארנב: קהל. 

אליסון BUCHHOLTZ-AU: מזון ארנב. אישור אהבתי את זה. מזונות ארנב. 

אוקיי, אז יש לנו גזר. אני אוהב את נושא הארנב הזה. אני חופר את זה הרבה. קהל: למען האמת, חשבתי שיעקב יהיה חוקי. אליסון BUCHHOLTZ-AU: יעקב? יעקב הוא מזון ארנב. אם היית רואה את יעקב תמונה משעתי עבודה, אפשר היה לחשוב שהוא קיבל הותקף על ידי ארנב רוצח. 

קהל: יש לי ארנב עכשיו. יש לי ארנב רוצח עכשיו. 

אליסון BUCHHOLTZ-AU: אתה צוחק עליי? 

קהל: אני אביא אותו הסעיף הבא. יש לי. 

אליסון BUCHHOLTZ-AU: זה מגוחך. בכל אופן. 

קהל: [לא ברור] 

קהל: כן, המשגיח שלי יש ארנב, כמו גם. 

אליסון BUCHHOLTZ-AU: אני רוצה ארנב. אישור, מי שמביא ארנב אמיתי ל בסעיף הבא, הכוללת נקודות זכות. קהל: [לא ברור] קהל: אה, זה לא אמיתי. זה ארנב מפוחלץ. 

אליסון BUCHHOLTZ-AU: אה כן, אנחנו יכולים לסגור את אלה. נראה rad. קהל: האם זה באמת משנה? אליסון BUCHHOLTZ-AU: זה לא. עם רוב הדברים הללו, אתה לא לסגור את התג, 99% מהזמן חסר משמעות רעה קורה לקרות, אבל זה סגנון טוב, גם. אז יעקב. ויש לנו חסה. קהל: לקבלת קישורים, זה באמת חשוב. אליסון BUCHHOLTZ-AU: Hm? קהל: לקישורים. אליסון BUCHHOLTZ-AU: לקישורים. כן, קישורים צריכים את זה. אוקיי, אז בואו לראות כאן. ויש לנו הקרוב של הרשימה שלנו. ואנחנו מסתכלים על זה. יש לנו all-- יעקב, ממש שם. מזון ארנב. מזכיר לי את Bunnicula. 

קהל: [לא ברור] אליסון BUCHHOLTZ-AU: אני מביא בחזרה כל היום אזכור בית הספר הישן, לא? רק כל אזכור בית הספר הישן. צריך להביא כמו Gogurts או משהו לחטיפים. 

קהל: או Gushers. אליסון BUCHHOLTZ-AU: אה. אישור. אני אראה אם ​​אני יכול לעקוב אחר מטה Gushers לשבוע הבא. אני חושב שאני יכול לעשות את זה. אני חושב שיש לנו כמה במשרד. 

אוקיי, אז אנחנו כבר כיסינו הרבה שונים דברים שאפשר לעשות עם HTML, נכון? וכמו שאתה בטח יכול לראות, זה nothing-- תקווה, לא יותר מדי intim-- אם זה הוא, אני לא מתכוון ל לזלזל אף אחד. אם אתה נתקלת בבעיה, בבקשה לבוא לדבר איתי. 

אבל רוב זה רק מסתכל על התחביר, נכון? אם אתה רוצה רשימה לא מסודרת, אם אתה רוצה סוג מסוים של רשימה, אם אתה רוצה ליישר משהו או פורמט משהו, זה הכול עניין של רק סוג של מבט למעלה תחביר ל- HTML, נכון? ועוד דבר אחד זה די מגניב למעשה הוא אם אתה הולך to-- בואו נראה, מה אתר נחמד שאנחנו אוהבים? לכל אחד יש את אתרי אינטרנט מועדפים שאישור כדי להעלות את האינטרנט? אתה יודע מה, בוא פשוט לעשות CS50. זה נחמד ובטוח, נכון? 

אוקיי, אז CS50 כאן. אוי, תראה, יש סעיף עכשיו. אם אתה אוהב את הדרך שזה נראה. 

קהל: [לא ברור]. אליסון BUCHHOLTZ-AU: אנחנו לא הולך לעשות meta סעיף, בחורים. זה לא קורה. זה יהיה מגניב, אבל אנחנו לא הולכים לעשות את זה. 

אז מה לעשות שאתה יכול לעשות אם אתה אוהב את הדרך זה עובד הוא שאתה תמיד יכול תקין לחץ על כל דף אינטרנט שאתה אוהב ואתה יכול לעשות צפה במקור דף. זה יביא את כל ה- HTML. וזה בעצם ממש טוב דרך לסגנון דף האינטרנט שלך. עבור אל דף אינטרנט שאתה באמת אוהב ומסתכלים על HTML ולהבין איך הם עשו את זה. 

ופשוטו כמשמעו, כל עוד כפי שאתה מצטט דברים, כל עוד אתה לא סתם גניבה מאנשים, שזה בסדר. במיוחד עבור CS50 [? לממן?], אנחנו סוג של מצפה לך לקבל השראה מהאתר אחר. אז תרגיש חופשי. חפש באתרים ש אתה חושב שהם ממש יפים ולהבין כיצד הם משתמשים HTML ו- CSS כדי לעשות את הדברים האלה. 

אז כפי שאתם רואים כאן, ברור שיש כמו קישורים ויש לנו בכיתה כאן. יש לנו קישור כאן. יש לנו רשימה. כנראה יש לנו כמה תמונות בכאן איפשהו. 

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

קהל: מהו div? 

אליסון BUCHHOLTZ-AU: div רק a-- מה div? קהל: חטיבה. אליסון BUCHHOLTZ-AU: חטיבה. כן, זה בדיוק כמו הפרדת מרכיבים שונים. אוקיי, אז הנה מה שאנחנו הולך להיכנס הבא. אז זה לא יכול להיות הטוב ביותר סגנון כי, אם אתה שם לב יש לנו HTML וסגנון באותו העמוד, ואנחנו באמת רוצים להפריד אותם, בסדר? ובעצם, תן לי תיפתח בדיוק אחד שלי כי זה אמור להיות PDF, כך שיש לנו style.css. 

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

קהל: וזה כל מה CSS ו- HTML? 

אליסון BUCHHOLTZ-AU: כל CSS ו- HTML. כן. אז אתה יכול לעשות הרבה מאוד דברים מגניבים עם CSS ו- HTML. אז עם מדהים שלנו דף אינטרנט ארנב כאן, אנחנו הולכים לעשות קצת קצת סגנון CSS עם זה. 

אז אם אי פעם יש לי סגנון גיליון, שאנחנו צריכים כאן, רק אתה יכול להתקשר style.css. אתה יכול לקרוא לזה איך שאתה רוצה. מה שחשוב הוא שאנחנו הולכים להפניה בweb.html שלנו כאן. 

אז מה אנחנו הולכים לעשות הוא we-- אז אני לא מתעסק זה up-- אנחנו הולכים לקשר שני קבצים אלה יחד. אז באותה way-- אני הולך לצייר אנלוגיה לC כאן. באותו אופן שאם יש לך כמה library-- ויש לנו cs50.h-- המהדר שלנו מקשר אותו. זוהי רק מפורשת קישור בחלקנו. אז, באותו אופן שאנחנו עושים חשיש כולל כמה קבצים, מה ש אני עומד לכתוב רק שווה HTML / CSS של ש. 

אנחנו רק אומרים, בסדר, דף אינטרנט זה הוא הולך להשתמש בגיליון סגנון, בסדר? אז יש לנו הקישור rel שווה לגיליון סגנון. ולאחר מכן יש לנו סוג, CSS. ולאחר מכן href שווה. 

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

מה חשוב לדעת הוא שהדף האינטרנט שאני עובד תקין now-- web.html וstyle.css-- נמצא באותה התיקייה. משום בתיקיות שונות, אתה צריך לתת את השורש בפועל לזה או שהדרך אליה. אבל במקרה הזה, אנחנו שומרים אותו סופר פשוט וזה הולך להיות כאן. אז אם אנחנו עושים את זה, יש לי כמה דברים כבר ממתינים בתור לכאן. 

אז יש לנו כמה גוף, שהוא הולך יש צבע הרקע שלנו, ש עכשיו הוא בצבע תכלת. אנחנו יכולים לשנות את זה אם אנחנו רוצים, אבל אם אני זוכר את זה בצורה נכונה, זה פשוט צריך לשנות אותו לצבע תכלת. ועכשיו יש לנו רקע כחול בהיר. והיינו לנו here-- יכול מישהו זוכר איזה מהם הוא חשיש זיהוי או בכיתה? 

קהל: מזהה. 

אליסון BUCHHOLTZ-AU: מזהה. מגניב. אז מה אנחנו רוצים לעשות הוא שגופנים אלה או which-- אנחנו רוצים "תראו הארנב חמוד "להיות סגול? אני חושב שאנחנו רוצים שזה יהיה סגול. אני די למטה עם שלהיות סגול. 

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

אז בואו נעשיתי את זה כאן. אז אנו יכולים לומר ברמה שווה פחות או גופן. ואם נסתכל עכשיו, יש לנו גופן זה די מגניב כאן. אז אולי אני רוצה לעשות את שניהם. בסדר, אני ממש לא יודע אם זה הוא הולך לעבודה, אבל אני רוצה לנסות את זה. וזה איך אתה לומד CSS ו- HTML. אתה כמו, אתה יודע מה, אני רוצה לנסות את זה. אני לא בטוח אם זה הולך לעבוד. בואו אראה אם ​​זה עובד. 

ולהסתכל על זה. עכשיו זה בסגול ו זה גופן יפה. אוקיי, אז יש לך את כל אלה דברים שונים שאתה יכול לעשות. האם יש לך שאלה? 

קהל: כן. ובכן, פשוט אוהבים את הצבעים אתה משתמש במילים. האם יש דרך לעשות את הצבעים עם הקסדצימלי RGB? אליסון BUCHHOLTZ-AU: אתה יכול גם לעשות את זה עם ההקסדצימאלי, אני מאמין. כן. אבל זה די נחמד אם אתה לא רוצה לחפש אותם. רק אתה יכול להיות כמו, סגול או כחול. קהל: בואו אקווה שהם יודע מה זה אומר. אליסון BUCHHOLTZ-AU: נכון. אז בואו להפוך את הקריאה או ירקרק זה. למה אתה אף פעם לבחור ירקרק? זה צבע מעניין. 

אוקיי, אז ברור שאנחנו יכולים לראות אותנו יכול לשנות דברים אבל אנחנו רוצים. אם אתה רוצה create-- נניח רצינו ליצור סוג אחר. מה יכול אתם רוצים לשנות? אם אתה מושך את W3Schools ' תיעוד CSS, אני משאיר את הבמה לכם. אנחנו יכולים לנסות ולעשות משהו מגניב עם זה בכמה דקות האחרונות. כי אני כבר סוג של נתתי לך קורס מזורז בהרבה דברים מגניבים שאתה יכול לעשות. אבל בסופו של הדבר, כמו שאמרתי, אם אתה רק ניסוי, תוכל ללמוד הרבה. 

קהל: האם אתה מסתכל למעלה גופן זה? 

אליסון BUCHHOLTZ-AU: כן, הסתכלתי למעלה גופן ש. אז כמו פשוטו כמשמעו, אני הלכתי to-- מה עשיתי? אני עשיתי את רשימת גופני CSS, ו אז עשיתי ערימת גופן, ולאחר מכן הייתי כמו, להסתכל, כאן כל הגופנים מגניבים שאתה יכול לעשות. ולא היה זה אחד, ולכן העתקתי את זה ללוח שלי. ואז אני היה כמו, אישור, מגניב, יש לנו ללכת. הכל נעשה. 

קהל: אז אתה צריך לוודא ש CSS שיודע מה הוא הגופן ש. 

אליסון BUCHHOLTZ-AU: כן. 

קהל: מה זה אומר בסופו של הדבר? רהוט? 

אליסון BUCHHOLTZ-AU: רהוט. כן. 

קהל: תמונת רקע. 

אליסון BUCHHOLTZ-AU: תמונת רקע. אישור. אז אתה רוצה להגיד לי איך לעשות את זה. אני משאיר לך את זה. אני רק הקלדה כאן עכשיו. ההגה הוא בידיים שלך. 

קהל: אישור 

אליסון BUCHHOLTZ-AU: אישור. מה אני עושה? 

קהל: Doing-- אני יודע מה מגיע לאחר הסד המתולתל. אליסון BUCHHOLTZ-AU: אישור. אז כנראה בגוף, אני היה להניח, כי אנחנו עושה עם תמונת הרקע. 

קהל: כן, בואו נעשה את זה. 

אליסון BUCHHOLTZ-AU: אישור. קהל: אוקיי, אז רקע מעי גס, ולאחר מכן אנו צריך כתובת ה- URL של תמונה ש. אולי פסאודו-קוד כי לעת עתה, אולי. 

אליסון BUCHHOLTZ-AU: מה אתה רוצה שאני to-- קהל: אני חושב כמו GIF. אליסון BUCHHOLTZ-AU: GIF? זה הולך להיות מעניין. אישור, מה אני googling כאן? 

קהל: לא, זו הבחירה שלך. 

אליסון BUCHHOLTZ-AU: מדוע לא we-- אם זה ארנב, אני מרגיש שאנחנו צריכים דשא נחמד דשא או משהו. 

קהל: אחו. אחו. 

אליסון BUCHHOLTZ-AU: אחו? אישור. קהל: או רחל Maddow. אליסון BUCHHOLTZ-AU: זה נראה יפה. אה, זה זעיר, אם כי. אנחנו צריכים תמונה בגודל טובה. בואו נראה. אה, תראה. זה אחו יפה. אתה יודע מה, אני אוהב את זה. בואו להעתיק את זה. 

קהל: בסדר, אז אני חושב שזה כתובת האתר, סוגריים פתוחים. 

אליסון BUCHHOLTZ-AU: אישור, כתובת אתר. 

קהל: אז את הכתובת. 

אליסון BUCHHOLTZ-AU: אישור. זה כל מה שאנחנו צריכים? 

קהל: פסיק סוגריים לסגור, ולאחר מכן חלל, מקף רקע מעי גס קובץ מצורף קבוע, וסד מתולתל. 

אליסון BUCHHOLTZ-AU: אישור. בואו לראות אם זה עובד. זה הולך להיות די מגניב אם זה יקר. אני ממש התרגשתי ממש כאן. זה לא עבד. אני תוהה מדוע. קהל: אולי את כתובת האתר צריך להיות בציטוטים. אליסון BUCHHOLTZ-AU: אולי. וכך אנו למדים, בחורים. 

קהל: האם יש לנו רקע צבע ותמונת רקע? 

קהל: מס ' אחד מחליף את השני. 

אליסון BUCHHOLTZ-AU: אני לא יודע. בואו נראה. בואו לבדוק את זה ולראות. 

קהל: אה, אולי, כן. [חציצת קולות] 

אליסון BUCHHOLTZ-AU: אוקיי, זה obviously-- אני [לא ברור] כאן. אז בסדר. קהל: קובץ מצורף רקע. אליסון BUCHHOLTZ-AU: אה. 

קהל: בסדר, אני לא יודע. אליסון BUCHHOLTZ-AU: זה נראה כמו שזה אמור לעבוד. האם אתה בטוח שזה מעי גס לאחר את כתובת האתר? 

קהל: לא, זה פסיק. אליסון BUCHHOLTZ-AU: זה פסיק. קהל: האם אמרתי מעי גס? אליסון BUCHHOLTZ-AU: אמר מעי גס. קהל: הו לא. אליסון BUCHHOLTZ-AU: הנה לך. קהל: אה, רגע, עכשיו אנחנו לא יכולים לקרוא את הטקסט. אליסון BUCHHOLTZ-AU: עכשיו אתה לא יכול לקרוא את הטקסט, אבל יש לנו את תמונת הרקע. "ממממ? 

קהל: האם HTML לתמוך בתוכן דינמי? כמו, אתה יכול לשנות את גודל התמונה ש בהתאם לגודל החלון, או שזה CSS-- 

אליסון BUCHHOLTZ-AU: אז CSS יש לעשות את זה. אז אם אתם מעוניינים במידת CSS המתקדם, אני תשתף הוראה סמינר על CSS על 7. ואני מבטיח שזה יהיה להיות הרבה יותר לעומק ולעשות הרבה יותר מגניב דברים בסעיף זה. ושיתוף המורה שלי הוא כמו אדון dev האינטרנט כולל מול סוף. כך זה יהיה די מגניב אם אתה רוצה כדי ללמוד על כל דברים מגניבים CSS שיכול לעשות. 

אבל מה יש לנו כאן עם קובץ מצורף הרקע שלו fixed-- כך שזה קצת size-- קבוע אבל למעשה אתה יכול dynamically-- אם אי פעם תראה את דפי אינטרנט, כ רוב דפי אינטרנט טובים יעשו, בעת ההתאמה גודל של הדפדפן שלך, זה מתאים את הרקע או כמה הוא מראה או מאתחל מחדש דברים, נכון? אז זה מה שאנחנו קוראים מיקום יחסי. 

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

אז זה משהו שאתה יכול לעשות. ו- CSS בעצם יכול do-- CSS ו- JavaScript, אשר נגיע לבא week-- יכול לאפשר לך לשנות באופן דינמי דפים ללא צורך טען מחדש אותם כל הזמן. ואתה מקבל לעשות קצת דברים די מגניבים. 

אז האם יש עוד דבר כי אתם אולי רוצים לעשות או כל דבר שאתה רוצה לחקור? יש לנו 10 דקות לסיום. אנחנו יכולים גם לצאת מוקדם, אבל אם אתה רוצה לעשות כמה דברים באינטרנט יותר, אנחנו יכולים, אבל אני לא הולך להכריח אותך. אבל אנחנו יכולים גם פשוט לאכול ממתקים. קהל: סמן את הטקסט לבן, כך שתוכל לקרוא אותו. אליסון BUCHHOLTZ-AU: אישור. אז במקרה הזה, אנחנו רוצים כמה p. קהל: אנחנו צריכים לעשות את זה ב גוף, כך שהוא חל על כל הדף? אליסון BUCHHOLTZ-AU: כן, אנחנו יכולים למעשה. שזה רעיון טוב. אז אנחנו have-- לעשות לך יודע מה אנחנו צריכים להיות? אני לא יודע אם אנחנו יכולים לעשות את צבע טקסט. אני הולך לנסות ו ליצור סוג אחר כאן. 

קהל: איך אתה משיג כל כך כי יש לו ההצעות? אליסון BUCHHOLTZ-AU: אז אם אתם מעוניינים, זה טקסט אחר עורך נקרא נשגב. אתה אמור להיות מסוגל להתקין אותו על המכשיר שלך. לפעמים זה נעשה קצת מסובך. אם אתה רוצה לעזור עם זה, אני סופר אשמח לעזור לך עם זה, כי gedit הוא גדול ו זה מדהים, כי אתה יכול לקמפל אותו בתחתית, אבל אני באמת כמו נשגב, כי זה די והוא עושה דברים כמו השלמה אוטומטית. 

אז אתה בהחלט יכול להרגיש חופשי תודיע לי אם אתה רוצה לעשות את זה. אם אתה פשוט google "Sublime טקסט, "זה בדרך כלל יש הוראות כיצד להתקין במערכות הפעלה שונות. זה ממש מגניב, אני חושב, לדעתי. אז p. אני חושב שאני פשוט יכול לעשות text-- או אנחנו רק יכולים לעשות את הצבע "לבן". יש. 

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

אז אם שמת לב, זה גרם לי לבן ולבן הזה. זה לא עשה הרשימה שלנו לבנה כי זה לא קשור עם זה. אתה יכול לעבור ואתה יכול say-- 

קהל: האם צבע רקע. 

אליסון BUCHHOLTZ-AU: צבע רקע? 

קהל: רקע לצינור ב צבע שבו אתה שם את תג p. 

אליסון BUCHHOLTZ-AU: אישור. אתה רוצה את זה לבן? קהל: "ממממ. אליסון BUCHHOLTZ-AU: אישור. הנה לך. קהל: זה מוזר. אליסון BUCHHOLTZ-AU: די מגניב, נכון? אז אם אתה רק להתעסק, אתה הולך ללמוד הרבה. וזה יכול להיות די מגניב. אני חושב שזה בהחלט יותר סיפוק מאשר לפעמים כי אתה לא צריך לחכות עבור התכנית שלך כדי לקמפל. אתה יכול פשוט פגע רענן ואתם כמו, אה, תראו, זה עבד, או הו, אני כנראה חסר משהו. וזה משהו שהוא באמת מגניב על החלק הבא של הכיתה, זה בהחלט, אני חושב, קל יותר לבדוק כמו שאתה הולך בדרך לעומת צורך בכתיבת תוכניות הארוכות אלה ומבקש ומתפלל כי זה עובד בסופו של הדבר. 

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

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

אבל אם לא, אני אראה אותך ביום חמישי. ניתן גם להשתמש בתאריך מאוחר, ש מרחיב אותה עד יום שבת בצהריים. אבל אני don't-- הא? 

קהל: ליל כל הקדושים. 

אליסון BUCHHOLTZ-AU: זה ליל כל הקדושים,, ו- B, אני לא חושב שיהיה להיות שעות עבודה בימי שישי. אז באמת לנסות ולקבל את זה נעשה על ידי יום שישי כדי שכולנו נוכל לחגוג בסוף השבוע כל קדושים. בסדר, אני אראה לכם בשבוע הבא.