[השמעת מוסיקה] 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

וכדי לעשות את זה, אני הולך קדימה ולפתוח את הענן 9. אז ענן 9 הוא של קורס ענן service-- מבוסס CS50 IDE-- זה יש את כל סביבות העבודה שלנו פועל איפשהו באינטרנט. וזה אומר שכל הקבצים שלנו הם נגישים לציבור כבר. אז בואו נלך קדימה ולעשות את זה. אני הולך קדימה ו ליצור קובץ חדש NCS50IDE. אני הולך לשמור אותו כלפני כhello.html ולחץ על שמירה. ועכשיו רק כדי לחסוך זמן, אני הולך ללכת קדימה ולהעתיק ולהדביק קוד זה במקום להקליד אותו מחדש. ולשמור אותו. אז עכשיו יש לי קובץ בשם hello.html. אבל איך אני בעצם לפתוח אותו כדף אינטרנט? ובכן, מתברר שנבנה לCS50 IDE הוא לא רק מהדר כמו צלצול והבאגים כמו GDB ו צרורות של תוכניות אחרות, יש בעצם כל דבר מלא שרת אינטרנט פועל בתוך CS50 IDE. 

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

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

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

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

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

ואכן, אם אני עכשיו לחץ על hello.html, אני רואה בכרטיסייה זו בדיוק קובץ ש. עכשיו שם לב, עשייה של 9 ענן משהו קצת מועיל לנו. בתוך IDE CS50, שם לב שיש פתאום שורת כתובת. זאת משום שלמרות שאנחנו באמצעות Chrome לבקר CS50IDE, בתוך CS50IDE הוא משלו גרסה של דפדפן אינטרנט עכשיו. וכך במקום לסבך את הדברים כאמורים, אני הולך קדימה ופשוט להעתיק את כתובת אתר. אני הולך קדימה ורק לפתוח חלון Chrome שלי. אז אין שום קסם כאן, לא CS50IDE. אני רק הולך להדביק פשוטו כמשמעו J הרווארד כתובת האתר ושלי על Enter. וזהו, עכשיו אני, ו בתאוריה, כולם באינטרנט, אם אני כבר מוגדר הרשאות מתאימות, תוכל לבקר בקובץ זה. אז עכשיו, אם הייתי אומר hello.html, וואלה, יש הוא דף האינטרנט המשעמם להפליא שלי. אז בואו לעשות בדיקת שפיות מהירה. בגלל כל זה הוא הקים רעיוני. ויש לנו בעצם לא ממש לימדתי אותך איך לכתוב HTML כשלעצמה. כל שאלות רחוקות ובכך על מה בדיוק קרה? כן. האם CS50 בעלות דפי האינטרנט אלה? באיזה מובן? שאלה טובה. אז CS50 של בעלות CS50.io. אכן, כבר קנינו כי שם תחום. ועל ידי הטבע שלכם כניסה לCS50IDE, כל מה שאתה מקבל מה שנקרא משנה. 

אז IDE50-מלאן, או IDE50-Rob.CS50.io, זה הכתובת הייחודית שלך ב שם תחום שלנו. אז למטרות של הקורס, יש לך כתובת ייחודית משלך. אבל אנחנו כבר פישטנו דברים על ידי קניית תחום ברמה העליונה, נקודת CS50 I / O ואז כולם הוא בתוך כך, כביכול. ואנחנו נחזור לזה בשבועות כנראה, במיוחד בפרויקט הגמר זמן, כאשר חלק מכם ייתכן שתרצה לקבל שמות דומיין משלך. זה בעצם יחסית פשוט. בסדר. אז בואו נעשה את זה עכשיו. אני הולך לחזור ל CS50IDE, שבו הקובץ שלי עכשיו, hello.html, לא כל כך מעניין. אני רוצה לעשות משהו קצת יותר נחמד מזה. אז אני הולך לעשות משהו כזה. תן לי paragraphs.html הפתוח. אז זה קובץ שכתבתי מראש. בחלק העליון שלו, כמו תמיד, יש לנו הערות. אבל ב- HTML, הערות נראה קצת שונה. על קו שלושה וקו 14, ש לראות את התחביר של להתחיל תגובה בסופו של תגובה. 

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

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

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

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

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

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

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

איך ללכת על עושה את זה? ובכן, תסתכל על list.html. וכאן, אנו רואים קצת funkiness אבל הבה נבחן מה קורה. אז על סמך מה בדיוק אתה ראית, UL עומד לרשימה לא מסודרת. רשימה לא מסודרת רק אומרת תבליטים. אין מספרים. יש גם משהו שנקרא הורה רשימה, שהוא OL בתג. אז LI, פריט ברשימה הוא כל מה שאומר. 

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

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

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

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

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

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

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

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

[השמעת מוסיקה] 

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

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

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

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

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

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

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

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

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

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

כן, כל כך גדול ונועז, ו לא גדול, אבל עדיין נועז. אז אם אני שומר את זה וללכת לכאן, בואו לראות את search.html הקובץ. בסדר, וזה אחד הוא right-- [לא ברור]. המתנה. דוד הוא מבולבל. אה, זה ממש שם. דוד אידיוט. אוקיי. אז הנה זה. אז חיפוש CS50 בקרוב. אז עכשיו, בואו לסנתז מה שעשינו בשבוע שעבר. 

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

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

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

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

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

עכשיו, כמו רגיל אדם, לשמור את התמונה כ. Logo.gif. עכשיו אני הולך להיכנס לCS50IDE ו אני הולך פשוט לתפוס את הלוגו, אני הולך לגרור אותו ל הספרייה שלי מקור שבע, קובץ כבר קיים, אני בסדר עם זה. אז אני הולך לעקוף את זה כי כבר היה לי את זה. ועכשיו איך אוכל להיפטר מזה? 

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

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

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

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

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

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

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

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

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

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

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

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

אז עכשיו, מה אני עושה כדי להביע את זה? כאן בקו 22 הוא מוטבע div או div המקונן, אם תרצה. זה גם יש תג סגנון משלו. אני לציין גודל גופן של 36. אני מציין את משקל גופן מודגש. כאן למטה, אני מציין רק 24 פיקסלים. ולבסוף, בקו 28, שאציין 12. אז רק כבדיקת שפיות מהירה וכקריאת אדם זה, אילו מילים על המסך הם הולך בעצם להיות נועז? איזה קווים נועזים בעצם? 

רק ג'ון הרווארד. נכון? כי רק כקו 22 אומר היי דפדפן, הנה החלוקה של הדף. הפוך גודל גופן זה 36 נקודה. הפוך את משקל הגופן מודגש. ברגע שאתה מגיע ל תג הסוף מקביל או תג סגור בקו 24, זה אומר, היי דפדפן, להפסיק לעשות מה שאתה עושה. והודעה שתהיה ברורה, למרות ש קו 22 יש את כל התכונות הללו כמו סגנון, כאשר אתה לסגור את התג בקו 24, אתה רק מזכיר את השם של התג. 

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

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

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

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

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

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

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

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

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

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

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

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

לא שפרנו סגנונית דף, זה רק טוב יותר עיצוב במובן מסוים. למה אתה חושב? כן. יותר גמיש איך? כן. אז אם אתה רוצה ללכת חזרה ולשנות דברים, עכשיו, יש לך מקום אחד שבו אתה יכול לשנות דברים. ואכן, למשהו כמו בעיה להגדיר שבע, שבו אנו מיישמים אתר מסחר במניות, זה הולך להיות כל חבורה של דפים. וזה יהיה ממש מעצבן אם אתה מחליט, HM, אני לא ממש אוהב את 24 פיקסלים, אני רוצה זה יהיה 28 פיקסלים או מעט יותר גדולים. ואז צריך לעשות הגלובלי למצוא ולהחליף או לפתוח את כל הקבצים של האתר שלך פשוט למעשה לשנות ערך אחד. הבא בחשבון את סגנונות אלה למקום מרכזי אחד, עכשיו אתה יכול לפתוח קובץ טקסט אחד בCS50IDE לכל תכנית, לשנות אותו, לשמור אותו, ועשה. אתה כבר מופץ אלה שינויים בכל מקום. וזה יהיה אותו הדבר בקובץ h הנקודה גם כן. אז כל שאלות ובכך הרבה על תחביר זה? בסדר, אז יש לנו עשה כל מה שזה נראה מלבד למעשה ליישם קישורים. ואז בואו נלך קדימה ולעשות את זה. תן לי ללכת קדימה ו ליצור קובץ חדש כאן. אני הולך לקרוא לזה link.html, לשים בקוד של היום. 

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

אני צריך גוף של דף האינטרנט שלי כאן. וכאן, שווים href נניח HTTP://www.disney.com והאתר האהוב עליי, שנגיד. בסדר, אז מאוד דף. תמים, ידידותי למשתמש אם אני עכשיו הולך לספרייה שלי רישום כאן ולפתוח link.html, יש לנו טקסט היפר. 

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

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

ולמעשה, ייתכן שקבלת משהו שאומר כמו לחץ כאן כדי לאפס את הסיסמה שלך PayPal. ועכשיו, שים לב, אם זה לא Disney.com אבל כמו badplace.com ו לטעון מחדש, שים לב שהטקסט כאן אפשר לומר כל דבר שהוא. ולמעשה, זה רק מילות. למה אני לא ממש להיות סופר זדוני ואומר http://www.paypal.com. 

לחץ כאן לאפס PayPal שלך סיסמא ועכשיו לטעון מחדש. זה נראה די לגיטימי, נכון? אני מתכוון, לא הייתי לחץ על דואר אלקטרוני שרק אומר את זה. אבל שים לב לדיכוטומיה כאן. זה אומר www.paypal.com, ולמעשה, חכה רגע, אנחנו יודעים שאתה רוצה ים לביטחון. אז עכשיו, ללכת לwww.paypal.com HTTPS, אבל אם אף פעם לא עשו את זה קודם, אין להיכנס להרגל של מרחף מעל קישורים קטנים כאן. וזה קשה לראות על המסך יש, וזה לא כל כך קל כאן. אבל דרך לכאן ב הפינה קטנטונת עושה הדפדפן למעשה להגיד לך שאנחנו הולכים לbadplace.com במקום Paypal.com. עכשיו, לאן אנחנו הולכים עם זה? כל דוגמאות שעשינו היום, קשים אנחנו כבר מקודדים והדפסנו באופן ידני. האינטרנט הוא מאוד לא מעניין כאשר אתה קשה קוד דפי האינטרנט שלך, כך שתוכן הוא סטטי ולא משתנה. כמובן, כולנו אתרי אינטרנט מועדפים היום, בין אם זה ב- Gmail או בטוויטר או פייסבוק או כל מספר אחר הם דינמיים. הם משתנים ב תגובה לקלט משתמש בדיוק כמו תוצאות החיפוש של Google. 

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

[השמעת מוסיקה]