[השמעת מוסיקה] DAVID J מלאן: בסדר, ברוך שובכם. זה CS50. זהו סופו של שבוע שבע. וזה הסוף של נבלות ש ציד מהבעיה להגדיר ארבעה שאולי אתה זוכר. אחרי שהתאוששתי כל אלה תמונות JPEG של צוות, הותקפתם, אם תרצה, לצלם את עצמך עם כמה שיותר של אנשים אלה שאתה יכול. יש לנו חבורה של הגשות כל בשבועות האחרונים, אכן, לא מעט ממש לפני שעת הצהריים היום, שחלקם הם אלה כאן, תפס כאן in-- נראה like-- אננברג אולם בשעתי עבודה, אחד כאן בואל בית עם ניק. הנה רמון שנתפס בטלפון. זה היה בצהריים CS50. זה היה ג'ייסון Skyping עם כיתה יותר יצירתי, שהתקשרתי אליו בדרך זו. אנחנו לא יודעים מה זה היה. 

[שחוק] 

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

כמה announcements-- כך ארוחת צהריים הוא, שוב, ביום שישי הקרוב בשעה 1:15 בערב. אם ברצונך להצטרף אלינו, הוסף ליומן בכתובת URL שכאן. ג'ייסון מופיע שוב כאן מאחד מהסעיפים כמה שנים בחזרה, שקרה ליפול על ליל כל הקדושים. ואכן, הוא התלבש כ דלעת אותה שנה הספציפית. אם אתם צופים בסעיף זה של משנת 2011 סעיפו שמונה, אם אתם סקרנים, בCS50.tv, אני חושב ש זה היה השנה שבה משאבת האוויר שלו עבדה. 

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

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

לדוגמא, ראשון, אם תרצה כדי להירשם, ראש לאותה כתובת יש. וזה ההרכב ל הסמינרים של שנה זו בלבד. אבל מבינים שיש לנו עשרות סמינרים משנים האחרונות, שכולן מקושרים בתפריט הסמינרים אפשרות של אתר האינטרנט של הקורס. אז אם אתה חושב על הולך מעבר לאזור הנוחות שלך או להרים כמה מיומנויות חדשות, למשל, תכנות iPhone אפליקציות עם סוויפט, שפה חדשה מבית Apple או Objective-C או לאנדרואיד או [תכנות? רמיזה?] נורות, או כל אחד מהנושאים עד כאן ולבדוק יותר, בשל את דף ההרשמה. 

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

מחשבים איך: קהל לתקשר עם [לא ברור]. DAVID J מלאן: החמצתי את החלק האחרון. איך מחשבים לתקשר with-- 

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

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

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

קהל: כתובת ה- IP שלך. 

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

קהל: האם זה TCP? DAVID J מלאן: טוב. TCP-- 

קהל: כתובת. 

DAVID J מלאן: כתובת, או יציאה, כפי שהוא נקרא. , אבל מספר יציאת TCP קרוב. ויש חבורה של אלה. אבל אין ספק שרוב מוכר צריך סופו של דבר להיות 80, שהוא ברירת המחדל אחד המשמש לתעבורת אינטרנט. ועוד מוכר בקרוב יהיו 443, המשמש לאינטרנט מאובטח תנועה, כתובות אתרים המתחילים ב- https. 

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

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

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

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

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

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

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

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

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

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

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

[שחוק] 

DAVID J מלאן: בסדר, ועכשיו בואו למעשה צלילה לעושה משהו עם זה. אתה זוכר שפעם האחרונה פתחתי את מכשיר CS50 ועשיתי משהו כ פשוט כמו gedit פתיחה. ואני שמרתי את הקובץ גם ב desktop-- שלי לשום מקום special-- כhello.html. 

אז תן לי לעשות את זה again-- hello.html הזן. ועכשיו בקובץ זה, אני הולך קדימה, לשכפל את מה שאנחנו פשוט html סוג doc saw-- אז אני הולך ל לעשות הסוגר סגור html הסוגר הפתוח. ואז אני הולך למנע לפתוח ולסגור את התגית. למה? רק כדי שאני לא אשכח מאוחר יותר. זה רק אימון טוב, כמו פתיחה וסגירת סוגריים מסולסלים בבת אחת. 

ואז מה קרה בהמשך? אתה יכול לחשוב על הקעקוע. 

קהל: הראש. 

DAVID J מלאן: הראש. ואז כאן, אני הייתה הכותרת, אני חושב. והכותרת הייתה באופן שרירותי, שלום, כותרת קרובה העולם. ואז כאן, הגוף, של course-- אז אנחנו סוגרים את תג הגוף. וredundantly אז פשוט מעט, היה לי את אותו הדבר כאן. 

אז אני טוען שמדובר בדף אינטרנט. זה משהו ש עכשיו תוכל לחיות באינטרנט, אף על פי שכמובן, זה פשוטו כמשמעו חי על שולחן העבודה שלי עכשיו. אבל אכן, אם אני למזער gedit, אני אראה על שולחן העבודה שלי על הסמל שלו. למרות שמדובר במכשיר, אתה יכול לעשות את זה ב- Mac OS ללא TextEdit או Windows עם פנקס רשימות אפילו. 

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

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

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

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

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

hello.html-- אני הולך לעבור ל../vhosts לhosts-- הווירטואלי עוד על כך בfuture-- ולאחר מכן לספרייה בשם localhost, אשר הוא הכינוי שניתן לכמעט כל מחשב, בין אם זה מק, PC, או לינוקס במחשב, ולאחר מכן במיוחד לספרייה שאנחנו, צוות כבר יצר בשבילך כש הוריד את המכשיר שנקרא ציבור. וכפי שהשם מרמז, כל דבר שמתי בתיקייה זו, בתורה, הולך להיות עכשיו , לפחות לציבור אנשים שיש להם ישיר חיבור למחשב שלי. 

אז עכשיו תן לי ללכת קדימה ו לעשות cd לאותה ספרייה כך שאני יכול לראות מה יש קורה וls הסוג. ואכן, זה דבר היחיד שם. אני טוען עכשיו כי יש לי לשים את זה להגיש hello.html בתוך ספרייה נקרא בתוך הציבור של ספרייה localhost נקרא בתוך ספרייה vhosts נקרא, ש הודות לצוות CS50 כבר מוגדר מראש להיות השורש של שרת האינטרנט שלך, עכשיו אני יכול בתקווה לעשות את זה. 

אני הולך לפתוח את הכרטיסייה חדשה. ואני מתכוון ללכת לא לקובץ: //. אני הולך להשתמש בפועל http / localhost, ש שוב, הוא הכינוי לשרת שלי. ואז אני הולך למה ש שם קובץ, רק שיהיה ברור? איפה הוא כנראה הסיפור הזה הולך? hello.html. 

אז במילים אחרות, אני רוצה את זה עכשיו הוא המחשב שלי, המכשיר שלי, כאילו זה שרת בפועל. הכינוי שלה הוא localhost. אבל לחשוב על localhost כמו כמו Facebook.com google.com, לא משנה מה. זה רק השם המקומי שלי. ואז הסופיים שאני רוצה זה ב שורש של הכונן הקשיח, אם אפשר לומר כך, או השורש של שרת האינטרנט, ergo הקו הנטוי ולאחר מכן שם קובץ hello.html. 

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

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

ועכשיו שמתי לב למרות שאם אני הולך ל כתובת זו, לא במכשיר שלי, אבל ב- Mac OS-- אני הולך לחזור לכאן. זה Mac שלי עכשיו. ועכשיו אני הולך לפתוח גרסה זו של Chrome כאן. ואני הולך ללכת http: //172.16.25 / ואני שוכח 133 rest--. 

אז אני הולך לבקר מ- Mac שלי שכתובת ה- IP /hello.html הזן. ועכשיו אני רואה מMac שלי שAppliance CS50 שלי, שזה כתובת ה- IP היא ש מספר, אכן מתנהג כמו שרת אינטרנט באינטרנט. זה לא חייב נחמד קל זוכר את השם כמו Facebook.com, אבל זה באמצעות HTTP ככל הנראה, למרות שChrome הוא סוג של פישוט העולם בשבילנו, אבל לא מראה לנו HTTP. אבל זה אכן בדיוק את זה. Chrome הוא רק חוסך כמה הקשות בימים אלה. וזה מה שאנחנו רואים עכשיו. 

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

עכשיו, אם אני מקליד ls, נראה בכל הקבצים הללו כי אני כבר מופץ על ידי אתר כמובן מראש של היום, אחד מהם הוא עדיין hello.html. אז יש שאחד. וזוכר הטיפשי הזה מcat.jpg time-- האחרון. אז תן לי לנסות להטביע cat.jpg בתוך דף האינטרנט שלי. 

אני הולך קדימה ולעשות cat.jpg, לחסוך. תן לי לחזור ל- Chrome. ותן לי להתקרב גופן ועכשיו לטעון מחדש. אופס, איפה שמתי את זה? Standby-- עדיין יש לי את הישן גרסה מהפתוחה שולחן העבודה שלי. אז תן לי להיכנס לvhost שלי, שלי localhost, הציבור שלי, וhello.html. אז עכשיו תן לי ללכת קדימה ו אומר cat.jpg הפנימי של הגוף שבו אני רוצה שזה יהיה מוצג וטען מחדש. כמובן, זה לא נכון. 

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

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

קהל: אבל זה לא יש להם גישה לתמונה. 

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

זה נראה כמו hello.html הוא אכן על אישור, ומכאן 200. אבל cat.jpg הוא 403. אז זה לא 404. קובץ קיים כנראה. 403 פירושו אסורים. אז זה קצת מבלבל. אני הולך לחזור לחלון המסוף שלי. תן לי להתקרב לכאן. ותן לי לעשות ls. יש את אותם קבצים. 

עכשיו תן לי לעשות ls-l, שיש לך כנראה השתמש בעבר כדי להסתכל קובץ גדלים אולי או חותמות זמן. ואנחנו רואים חבורה של כל מידע מכריע. אבל שים לב כמה פרטים. הנה hello.html בזה שורה כאן והנה cat.jpg. וזה פשוט להיות המכשיר ידידותי למשתמש על ידי הדגשת JPEG של בסגול כמו זה. אבל מה עוד שונה ליד גודל קובץ ואת שם הקובץ? 

קהל: [לא ברור]. DAVID J מלאן: כן, יש עוד שני של כאן R. שים לב מה hello.html יש קורה. אז מתברר ששמו של הציבור בספרייה זו הוא חשוב. שום דבר במדריך זה אמור להיות ציבורי. אבל זה לא מספיק רק כדי לשחרר קבצים לשם. אתה גם צריך לשנות המצב של הקבצים, לשנות את ההרשאות של הקובץ באופן יזום לא להיות הגדרת ברירת המחדל, וזה שרק אני יכול לקרוא ולכתוב את זה, לי להיות הבעלים. אני רוצה את כל כולם לעולם להיות מסוגל לקרוא את התיק שלי, אם אפשר לומר כך. קראו רק אומר לצפות בו. 

ואכן, כפי שתראה בבעיה להגדיר שבע, זה מה שאומר של R אלה. הממוצע של שני R אלה לאפשר לכולם בעולם גם אחר לקרוא אותו, במיוחד עכשיו ש זה בספרייה זו. אז הדרך הפשוטה לתקן את זה היא ללכת להפקודה ולעשות chmod לשינוי מצב ולאחר מכן לעשות r +, לגמרי, כולם, כל, בתוספת r לקריאה, ולאחר מכן cat.jpg הזן. לא קורים כלום, ש בדרך כלל פירוש דבר טוב. אז ls-l again-- עכשיו בואו נסתכל על cat.jpg. והרשאה זו נראה שהשתנה. במאמר מוסגר, אם אתה עושה טעות ואתה, למשל, פשוט עשה your-- אני לא יודע-- מאמר בפומבי נגיש על ידי תאונה, אתה יכול לעשות את ההפך, chmod-R. למרות שלמען אמת, לא צריך את זה להיות בספרייה הציבורית בכל מקרה אם זה הדאגה. 

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

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

אבל יותר חשוב, יש תכונה תחבירית זה כאן. זה מה שנתחיל לקרוא לא תג, אבל תכונה. ומאפיין הוא משהו ש משנה את ההתנהגות של תג. ותכונה, href, אמצעי זה לשנות את ההתנהגות של עוגן זה כך שכאשר הוא לחץ, זה הולך לכתובת אתר זו כאן. וכמובן, ה- URL שהוא גוגל. 

בינתיים, מה זה טקסט כאן הולך להיות? ובכן, זה הולך להיות מה האדם באמת רואה כמסומן בקו התחתון קישור, פשוט כמו ש. אז בואו ננסה את זה. תן לי לשמור אותו. אני עדיין בhello.html. אבל בגרסאות מקוונות, אתה תראה שמות קבצים בפועל אנחנו מוכנים מראש. תן לי ללכת קדימה וטען מחדש. ועכשיו זה מאוד דף משעמם עדיין. אבל אם אני מרחף מעל there-- וזה קצת קטן, but-- אתה יכול לראות בתחתית פינה השמאלית של המסך שלך, זה אכן הולך ל- google.com. ואם אני לוחץ על זה, זה יהיה להקציף אותי בדרך לGoogle בפועל. 

אבל שים לב כאן הזדמנות ל ניצול, בדיוק כמו בצד. ואנחנו נחזור לאחרים נושאי ביטחון לפני זמן רב. כי יש דיכוטומיה זו בין לאן אתה הולך ומה אתה אומר, אתה יכול לעשות משהו כזה זה-- http://www.google.com. אישור, ועכשיו אם אני לטעון מחדש אחרי שהציל אותו דף, זה נראה כאילו אני הולך לגוגל. אבל אין שום סיבה שאני צריך ללכת לגוגל, נכון? אני ממש יכול ללכת למשהו כמו badguy.com, לטעון מחדש את הדף לכאן. ושימו לב, זה עדיין נראה כמו גוגל. ורק אם אני חד מספיק לרחף מעל כאן אני רואה את זה גם הולך ללכת למקום אחר. 

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

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

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

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

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

[שחוק] 

DAVID J מלאן: --I לא actually-- ואתה יודע שיש מישהו שם בחוץ ש היה למעשה לחץ על קישורים אלה גם. אז ברור, שברו כמה דברים. אבל זה הולך להוביל אותנו לדיון, שלא לצורך עכשיו, על מה CSS, גיליונות סגנון מדורג, הם, ואיך אתה בעצם להוריד את קבצי HTML האחרים ו- JPEG קבצי קבצי GIF ש האתר עשוי להיות שימוש. אבל כל זה הוא מטרות משנה. אבל זה באמת מסתכם ל היוריסטיקה מאוד פשוטה אלה. 

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

ואם אני פותח את זה, בואו נעשיתי את זה. בואו נלך שלא hello.html, אבל לlist.html. לעזאזל. כיצד אוכל לתקן את זה? זה אותו הנושא כמו קודם, נכון? אז תן לי לעשות oops-- chmod-- chmod + R של list.html. ועכשיו אם אני חוזר לדפדפן שלי ולחץ על רענן, זה מה שיש. אז אם אי פעם רציתי לעשות רשימה עם תבליטים, אתה יכול לעשות את זה. אם אתה רוצה להיות סופר מפואר ולעשות רשימה מסודרת, לא רשימה לא מסודרת, לשנות אותם לol, לטעון מחדש את הדף, ו עכשיו הדפדפן ימנה את זה בשבילך. 

מה עוד אנחנו יכולים לעשות? ובכן, כמה others-- אם יש לך סעיפים של text-- ארוכים לדוגמא, ייתכן ש טקסט לטיני כמו זה-- ואתה רוצה את זה בסעיפים נפרדים, p פתוח, עמ 'הקרוב לתג פסקה. ולעשות את זה שוב ושוב. ואם אני עכשיו פותח את הקובץ הזה, paragraphs.html, גם, זה הוא מתחיל להיות מעצבן. אז עכשיו בואו פשוט נחזור לשלי הפקודה, chmod כוכב r R + .html-- כרטיס פראי קטן ונחמד כביכול. זה צריך לתקן את כל הבעיות האלה בשבילי. בואו לטעון מחדש. יש שלושה סעיפים. 

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

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

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

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

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

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

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

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

ושים לב כל אלה שורות שפשוט הופיעו. מתברר כי בכל אינטרנט נתון דף, שאולי יש רק קובץ אחד involved-- hello.html-- או ש יכול להיות 52, כמו במקרה זה. כשאני מבקר google.com, ככל הנראה, הדפדפן שלי בעיטות מחוץ 52 בקשות HTTP נפרדות. מדוע זה כך? 

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

אבל שים לב כאן אם אני מתמקד ב החתולים לזרוק, החיפוש הראשון, שם לב שאכן זה באמצעות HTTP 1.1. ולרוע מזל, גוגל Chrome עכשיו בגרסה 39 הוא סוג של דברים רידוד ו לא מראה לנו את הכותרות בפועל. אבל מה נשלח אכן הוא בקשה ללא לקצץ, אבל / חיפוש? q = חתולים. 

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

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

ואני הולך להלהיב במהירות סוג doc html הסוגר פתוח html html הסוגר קרוב. אז אני הולך לעשות את הראש CS50 כותרת פתוחה קרוב הראש חפש במקום החיפוש של Google. כאן אני הולך יש לי הגוף, במורד קרוב כאן גוף. ועכשיו אני צריך CS50 חיפוש. ובעצם, בואו לבנות באופן הדרגתי זה. אני הולך קדימה, לסגור את זה ו למעשה לשים אותו בספרייה הציבורית שלי. אז תן לי רק רגע אחד. חיפוש 0.html-- אני הולך באופן זמני קוראים לזה search.html. אני הולך chmod זה search.html r +. ועכשיו אני הולך לפתוח אותו. טוב, אז זה היה מהיר. אבל המטרה הייתה פשוט כדי לקבל אותנו לנקודה שיש טקסט זה להגיש search.html נקרא. אז לא הרבה להסתכל עדיין. ואכן, אם אני הולך לדפדפן שלי, ו ללכת לsearch.html, שכל מה שזה. אבל אתה יודע מה? אני יכול להיות קצת יותר מסובך. קראתי בספר שיש תג כותרת בשם H1. ואני הולך קדימה ו משתמש שh1 לפתוח ולסגור H1. טען מחדש את הדף. ועכשיו זה גדול יותר ונועז יותר, לא כל כך מעניין, אבל לפחות זה מבחינה מבנית יותר מעניין. אבל עכשיו הרשה לי להציג תג אחר. מתברר שיש תג טופס. ותנו לי לסגור את התג ש. ומתברר של שם תג קלט ש יש לו תכונה שנקראת סוג, ש הוא סוג הנתונים של השדה, אם תרצה. והוא הולך להיות מהסוג text. וערך שלה הולך להיות CS50 חיפוש. תג לסגור. ויש הולך להיות שום רעיון פתיחה וסגירה עם תגים נפרדים. 

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

אבל מתחת לזה, אני רוצה לעשות input type = submit. וערך זה יהיה CS50 חיפוש. ואנחנו תראו למה אני עבר את הערך הזה. כשטענתי מחדש, אני נראה עכשיו יש לי ראשיתו של החיפוש שלי מנוע, סופר מחריד, למרות שלמען אמת, זה לא לזרוק רחוק ממה ש דף ברירת המחדל של גוגל נראה כמו. 

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

ובכן, קודם כל אני צריך להוסיף ופעולה מייחס לתג הטופס שלי ש הוא http://www.google.com/search. ואני יודע שרק מצורך להסיק מלהסתכל מקרוב בכתובת האתר שלהם. ועכשיו תיקח את ניחוש. מה צריך כנראה שדה טקסט זה ייקרא, המבוסס על מאיפה באנו מקודם? 

קהל:? Q. 

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

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

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

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

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

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

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

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

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

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

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

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

אם אני לטעון קובץ זה, search2.html, התוצאה הסופית היא זהה. אבל זה צעד בדרך לעיצוב טוב יותר. הבא בחשבון את CSS זה, יש לי לא ערבב את זה עם HTML שלי. ואכן, כפי שנראה, שיכולתי שימוש חוזר בתכונות וערכים אלה. אם אני רוצה להפוך את הצרורות חלקים של דף האינטרנט שלי במרכז, אני לא צריך להקליד style = text-align מרכז בכל המקום. אני יכול לשים במקום אחד אולי, כמו בחלק העליון. 

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

אז שם לב בגרסה שלוש search.html לי ניקה את ראש הדף ופשוט לשים בזה, תג קישור, ש בניגוד לשם, לא נותן לך קישור. הוא מקשר לקובץ אחר בדרך של href שערכו במקרה זה, הוא חיפוש 3.css אז אני מבין שאנחנו הולכים במהירות. אבל כל מה שאני עושה הוא סוג של העברת דברים מסביב. תן לי חיפוש 3.css הפתוח. זה מה שיש, שום דבר לא באמת לזה. אני פשוט להעתיק ולהדביק אותו לתוך חדש להגיש, ממש כמו שאנחנו בחשבון דברים החוצה לקבצים אחרים לפני. וresult-- underwhelming-- לחלוטין הולך להיות בדיוק אותו הדבר. אבל אנחנו עוברים toward-- לא, זה לא. אה, אני יודע למה. 

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

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

ועכשיו חבורה של דברים שבורות. אני הולך לחזור לספרייה שלי כאן. ועכשיו אני רק הולך לעשות chmod של r + על file-- כי אני יודע שזה exists-- נקרא logo.gif, שהוא תמונה. ועכשיו לטעון מחדש. וwow-- אז עכשיו אני די קרוב, בכנות, לאהוב 1999 הגרסה של Google, ו בכנות, את הגרסה 2014 של Google, נכון? 

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

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

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

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

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

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

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

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

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

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

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

אז PHP היא בפועל שפת תכנות. זו שפת scripting במובן שזה אמור להיות משקל קל יותר מ משהו כמו ג וזה לשון פירשה, מה שאומר שזה לא הידור. אז בקיצור, מה זה אומר כאשר השתמשנו בשפה כמו C והיינו צריכים לעבד אותו? מה זה אומר ל לקמפל קוד מקור C? קהל: [לא ברור]. DAVID J מלאן: תגיד את זה שוב? קהל: [לא ברור]. DAVID J מלאן: מושלם. זה הופך אותו לינארי. זה הופך אותו לאפסים ואחדים מקוד המקור כמו-אנגלית בפועל. ואז אנחנו יכולים למעשה לרוץ אלה אפסים ואחדים ידי העביר אותם דרך מעבד על ידי לחיצה כפולה על סמל או מפעיל הפקודה. 

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

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

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

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

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

אבל אחרי זה, זה הוא מצב ב- PHP. מה שונה לעומת C? טריק question-- שום דבר, וזה ממש ממש נחמד. ביטויים בוליאני בPHP-- את אותו הדבר. ביטויים בוליאני עם ומול או, מתגים, לולאות, לולאות, loops-- אישור, זה שונה. 

אז מתברר שיש כמה תכונות אחרות ב- PHP. אחד מהם הוא למעשה זה, וזה נפלא נוח. אם מספרי $ הוא מערך שיש לך הצהיר בעבר בתכנית, יש לך דמיון זה עבור כל מבנה שבמקום לעשות את כל זה אני מעצבן שווה 0, אני הוא פחות מזה, [? I ++?], עבור כל מספרים כמספר, שבו כל ערכי דולר סימן אלה הוא רק משתנה, וזה האחרון אתה יכול לחשוב על כמוני אפשר לקרוא לזה מה שאתה רוצה. אני קראתי לזה מספר. זה הולך לחזר על המערך נקרא מספרים. ועל כל איטרציה, זה הולך לעדכן באופן אוטומטי בשבילך מספר סימן דולר משתנה, כך שאתה כל הזמן יש להם גישה למשתנה שאתה רוצה מבלי לעשות כל הסוגר מרובע סימון או אינדקס למערך. 

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

אבל אפילו בעצמה חזקה יותר, PHP יש מערכים אסוציאטיביים, אשר היא דרך מפוארת לומר שולחנות חשיש. למעשה, אם אתה רוצה להצהיר על חשיש שולחן ב- PHP, שלא כמו בC-- כמה שורות קוד זה לקח ל למעשה ליישם טבלת חשיש בC? או כמה שורות של קוד זה לוקח ליישם טבלת חשיש בC? אז זה כנראה הרבה, נכון? זה כמה עשרות, אולי 100 או 200. זה לא טריוויאלי. או שזה עומד להיות, כ בקרוב תוכל לראות, לא טריוויאלי ליישם טבלת חשיש [לא ברור] וגם לנסות. אבל בPHP-- ולמען אמת, אני כנראה שלא צריך להגיד לך את זה עד Monday-- ב- PHP, אם אתה רוצה שולחן, נעשה. זה חשיש table-- כך עם שורה אחת של קוד. ו 

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

וכך בסופו, מה ש אנחנו הולכים להשתמש PHP ל בפוטנציאל בכתיבת תוכניות של שורת הפקודה שנקרא. אנחנו יכולים לשחזר כל תכנית שכתבנו בסמסטר הזה עד כה, למעט אולי בריחה אשר משתמשת SPL, שהוא ספציפי ל- C באותו הרגע. אבל כל בעיה אחרת שנקבעה, בהחלט מריו וקיסר וVigenere ו [? לפצח?] ואילך, אנחנו יכול מחדש ליישם ב- PHP, ו כנראה קצת יותר בקלות. 

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

1 SPEAKER: ועכשיו, עמוק מחשבות על ידי בדייבן פארנהאם. שולחנות חשיש. 

[שחוק]