[เล่นเพลง] เดวิดเจลัน: สิทธิทั้งหมดยินดีต้อนรับกลับ นี้เป็น CS50 นี่คือจุดสิ้นสุดของสัปดาห์เจ็ด และมันก็เป็นจุดสิ้นสุดของกินของเน่าที่ ล่าจากปัญหาการตั้งสี่ ที่คุณอาจจำ หลังจากที่การกู้คืนทั้งหมดของ JPEGs ของพนักงาน คุณถูกท้าทายถ้าคุณต้องการ การถ่ายภาพตัวเองด้วยเป็นจำนวนมาก ของคนเหล่านั้นเท่าที่คุณสามารถ เรามีทั้งกลุ่มของการส่ง ในช่วงไม่กี่สัปดาห์ที่ผ่านมา แน่นอนค่อนข้างขวาไม่กี่ก่อนเที่ยง วันนี้บางคนที่เป็นคนที่นี่ จับนี่ in-- ดู like-- Annenberg ฮอลล์ในเวลาทำการอย่างใดอย่างหนึ่งที่นี่ โลเวลล์เฮ้าส์กับนิค นี่คือรามอนถูกจับบนโทรศัพท์ นี่เป็นที่รับประทานอาหารกลางวัน CS50 นี่คือเจสัน Skyping กับ เพื่อนร่วมชั้นของความคิดสร้างสรรค์มากขึ้น ที่โทรมาหาเขาด้วยวิธีนี้ เราไม่ทราบว่านี้คือ 

[หัวเราะ] 

เดวิดเจลัน: แต่ ที่มีมูลค่ากิกะไบต์ นี่คือช้างที่ ตัวอักษรวิ่งลงจากเวที เพื่อหลีกเลี่ยงการถูกถ่ายภาพหนึ่ง วัน แต่ถูกจับได้ในที่สุด นี่คือนิค นี่คือนิค นี่คือนิค และนี่คืออลิสันลงมาจากทุ่งนา และ Zamyla แม้พบ ในการแข่งขันบอลรูม ดังนั้นเราจะไปถึง ภาพถ่ายเหล่านี้คิดออก ที่ส่งมากที่สุด ที่เก่าแก่ที่สุดและได้รับรางวัล หนึ่งรางวัลนิยายเป็น สัญญาไว้ในสเป็ค และเรายังจะได้ติดตามเกี่ยวกับ พื้นที่ที่มีส่วนเกี่ยวข้อง 

คู่ของ announcements-- อาหารกลางวันเพื่อ เป็นอีกครั้งวันศุกร์นี้ที่ 13:15 หากคุณต้องการที่จะเข้าร่วมกับเรา RSVP ที่ URL ที่นี่ เจสันปรากฏขึ้นอีกครั้งที่นี่จากที่หนึ่ง ส่วนสองสามปี กลับซึ่งเกิดขึ้น จะตกในวันฮาโลวีน และแน่นอนเขาแต่งตัวเป็น ฟักทองปีนั้น ๆ ถ้าคุณดูในส่วนนี้ ของจาก 2011 ส่วนของเขา แปดถ้าคุณอยากรู้, ที่ CS50.tv ผมคิดว่า นี้เป็นปีที่ ปั๊มลมของเขาเป็นคนที่ทำงาน 

แล้วถ้าคุณดู ส่วนที่คล้ายกันในปี 2012 คุณจะเห็นเจสันกิ่วมากนี้ ตั้งแต่ชุดที่ไม่ได้ทำหน้าที่ ซึ่งเป็นเพียงการบอกว่า วันศุกร์นี้, หากคุณต้องการ ชอบที่จะแกะสลักฟักทองกับ Daven และเกบและคนอื่น ๆ RSVP หัว ที่อยู่ cs50.harvard.edu มันสัญญาว่าจะสนุกมาก Daven เรากำลังบอกว่ามีการแกะสลัก ฟักทองทั้งหมดของชีวิตของเขา กาเบรียลจากบราซิลไม่เคย แกะสลักฟักทองสำหรับวันฮาโลวีน ดังนั้นจะมีกับพวกเขาในขณะที่เขาเรียนรู้ 

สัมมนา meanwhile-- ดังนั้นคุณจะได้เรียนรู้เร็ว ๆ นี้ เกี่ยวกับสิ่งที่คาดหวังของเราสำหรับ โครงการสุดท้ายซึ่งเป็นหลัก จะต้มลงไป การออกแบบและการดำเนินการ ส่วนโครงการใดที่สนใจของ คุณแม้จะต้องได้รับอนุมัติ และคำแนะนำจากเพื่อนการเรียนการสอนของคุณ ในช่วงท้ายของ ภาคการศึกษาที่เราแนะนำเป็นจำนวนมาก การสัมมนาซึ่งเป็นตัวเลือกชั้นเรียน นำโดยทุนการเรียนการสอนและฮาร์วาร์ พนักงานเพื่อนของหลักสูตรข้าม มหาวิทยาลัยในหัวข้อต่างๆที่ จะสัมผัสกับ หลักสูตรหลักสูตรพื้นฐาน แต่อย่างไรก็ตามที่สนุกและ ที่แตกต่างกันสำหรับโครงการสุดท้ายที่มีศักยภาพ 

ยกตัวอย่างเช่นก่อนถ้าคุณต้องการ ลงทะเบียนหัวไปยัง URL ที่ว่ามี และนี่คือผู้เล่นตัวจริงสำหรับ การสัมมนาในปีนี้เพียงอย่างเดียว แต่ตระหนักถึงเรามีหลายสิบ การสัมมนาจากปีที่ผ่านมาซึ่งทั้งหมดนี้ มีการเชื่อมโยงในเมนูสัมมนา ตัวเลือกของเว็บไซต์ของหลักสูตร ดังนั้นหากคุณกำลังคิดเกี่ยวกับ จะเกินเขตสบายของคุณ หรือยกขึ้นทักษะใหม่บางส่วน เช่น iPhone การเขียนโปรแกรม ปพลิเคชันที่มีสวิฟท์, ภาษาใหม่ จากแอปเปิ้ลหรือวัตถุประสงค์ -C หรือ Android ปพลิเคชันหรือการเขียนโปรแกรม [? คิว?] หลอดไฟหรือใด ๆ ของหัวข้อ ขึ้นที่นี่และอื่น ๆ , การตรวจสอบจาก ออกหน้าลงทะเบียน 

ดังนั้นเราจึงเริ่มต้นขึ้นโดยสรุปแล้ว วันจันทร์กับมองไปที่ HTTP ดังนั้น HTTP refresher-- รวดเร็ว HyperText Transfer Protocol แต่สิ่งที่ไม่ว่าจริงๆหมายถึงอะไร? อะไรที่จริงหมายถึงอะไร? คือการที่มือ? ฉันรู้ว่าคุณกำลังเกาหัวของคุณ แต่คุณต้องการที่จะนำเสนอสิ่งที่ HTTP คืออะไร? 

คอมพิวเตอร์วิธี: ผู้ชม สื่อสารกับ [ไม่ได้ยิน] เดวิดเจลัน: ฉันพลาดส่วนสุดท้าย วิธีการสื่อสารคอมพิวเตอร์ with-- 

เซิร์ฟเวอร์อินเทอร์เน็ต: ผู้ชม เดวิดเจลัน: Good-- กับอินเทอร์เน็ต เซิร์ฟเวอร์และโดยเฉพาะเว็บเซิร์ฟเวอร์ เพราะการเรียกคืนมีพวงของ บริการบนอินเทอร์เน็ตบางแห่งที่ คุณใช้อาจจะทุกวันระหว่างการสนทนา และข้อความสนทนาและเว็บและอีเมล และไม่ชอบ และ HTTP เป็นเพียง โปรโตคอลที่เว็บเบราเซอร์ พูดเมื่อสื่อสารกับ เว็บเซิร์ฟเวอร์และในทางกลับกัน และอนาล็อกใน โลกมนุษย์อาจจะมี ผมขยายมือของฉันจะจับบาง มนุษย์อื่น ๆ และเขาหรือเธอ ยอมรับโดยการขยาย ของเขาหรือมือของเธอได้เป็นอย่างดี เพื่อให้เป็นเพียงแค่โพรโทคอ ชุดของการประชุม 

และสิ่งที่แน่นอนการประชุมเหล่านั้น? ดีก็เพียงแค่เดือดลงไป การส่งข้อความกลับมา ในขณะที่เราแสดงให้เห็นที่นี่ และมีไม่กี่วิธี ซึ่งคุณสามารถส่งข้อความเหล่านี้ และบางทีอาจจะมากที่สุด ร่วมกันเป็นที่รู้จักกันได้รับ และเราจะเห็นความแตกต่าง นี้ไม่นาน 

แต่ได้รับการร้องขอจากเบราว์เซอร์ ไปยังเซิร์ฟเวอร์เพียงลักษณะเช่นนี้ มันเป็นพวงของข้อความที่มันทำให้ ภายในซองจดหมายเสมือน ที่ด้านนอกของซองจดหมายที่ ไปชิ้นสองสามรายละเอียด สิ่งที่จำเป็นที่จะไป ซองจดหมายเพื่อที่จะพูด เพื่อให้ได้รับการร้องขอเช่น นี้จากฉันไปยังเว็บเซิร์ฟเวอร์? ใช่ 

ผู้ชม: อยู่ IP ของคุณ 

เดวิดเจลัน: ที่อยู่ IP ของฉัน ในสาขาจากเพื่อที่จะพูด และแน่นอน ที่อยู่ IP ของผู้รับ แต่ในกรณีของเว็บแพ็คเก็ต, เราจำเป็นต้องมีรายละเอียดเล็ก ๆ น้อย ๆ มันไม่เพียงพอเพียงเพื่อ ส่งซองจดหมายไปยังเซิร์ฟเวอร์ เนื่องจากเซิร์ฟเวอร์ที่อาจจะมี ฟังชนิดที่แตกต่างกัน ของการจราจรทางอินเทอร์เน็ต ดังนั้นอะไรที่เราต้องทำ นอกเหนือจากไอพีของผู้รับ? ใช่? 

ผู้ชม: มัน TCP? เดวิดเจลัน: ดี TCP-- 

ผู้ชมที่อยู่ 

เดวิดเจลันที่อยู่, หรือพอร์ตเป็นมันเรียกว่า ปิด แต่หมายเลขพอร์ต TCP และมีพวงของเหล่านี้ แต่แน่นอนที่สุด คุ้นเคยควรในที่สุด เป็น 80 ซึ่งเป็นค่าเริ่มต้น หนึ่งที่ใช้สำหรับการเข้าชมเว็บ และคุ้นเคยอีก หนึ่งในเร็ว ๆ นี้จะ 443, ซึ่งจะใช้สำหรับการรักษาความปลอดภัยเว็บ การจราจร URL ที่ที่เริ่มต้นด้วย https 

ดังนั้นนี่คือสิ่งที่จะไป ภายในซองว่า และได้รับ / เพียงหมายถึงการให้ ฉันหน้าเว็บที่เริ่มต้น ให้ฉันรากของยาก ขับรถบนเว็บเซิร์ฟเวอร์ที่ และหวังว่าเว็บ เซิร์ฟเวอร์จะตอบสนองกับตกลง และหมายเลข 200 ซึ่งเป็นเพียง การประชุมบอกว่าใช่ทั้งหมด เป็นที่แน่นอนตกลง นี่หน้าเป็น ประเภทของหน้าเว็บที่เป็นไปได้ เป็นข้อความ แต่โดยเฉพาะอย่างยิ่ง, HTML, ซึ่งเรากำลังจะดำน้ำกลับเข้ามา และ dot dot dot เพียง หมายถึงที่นี่เป็น HTML และนั่นคือสิ่งที่เรา รับเรื่องในวันนี้ จริงเขียน HTML, Hypertext Markup Language ซึ่ง เป็นภาษาที่ หน้าเว็บที่มีการเขียน มันไม่ใช่การเขียนโปรแกรมภาษา มีฟังก์ชั่นไม่ได้ หรือลูปหรือเงื่อนไข เป็นภาษามาร์กอัป, ได้เป็นอย่างดีอีกครั้งเห็นในวันนี้ ที่ช่วยให้คุณระบุ วิธีการโครงสร้างและทันสมัย​​จน สกอร์หน้าเว็บ 

ดังนั้นนี้เป็นหนึ่งใน และหน้าเดียวที่เราจริงๆ มองที่ถ้าสั้น ๆ ในวันจันทร์ที่ และแจ้งให้ทราบล่วงหน้าไม่กี่ ลักษณะเด่น มีจำนวนมากที่เปิดมุมคือ วงเล็บและใกล้วงเล็บมุม ในระหว่างมุมเหล่านั้น วงเล็บเป็นคำ และเรากำลังจะเริ่มต้น เรียกผู้ที่คำพูดของแท็ก ยึดหัวเปิดเพื่อ และยึดหัวปิด เป็นแท็กเปิดและปิด หรือเริ่มต้นและสิ้นสุดแท็ก ตามลำดับขององค์ประกอบ HTML, ในขณะที่เราจะเรียกว่าเรียกว่าหัว และศัพท์แสงเดียวกันกับ ต่อร่างกายในรูปแบบ HTML และอื่น ๆ 

และสิ่งที่ดีคือ HTML-- และแน่นอนเราจะ ใช้เวลาน้อยมากกับมัน เพราะคุณจะได้ส่วนใหญ่ก็คิดออก สิ่งที่มีมันมีเมื่อคุณ จะมีปัญหาที่เป็นรูปธรรม เพื่อ solve-- คุณจะพบว่า เบราว์เซอร์เป็นใบ้สวย มันก็จะไม่ต่างจาก do-- computer-- สิ่งที่คุณบอกว่าจะทำอย่างไร และดังนั้นเมื่อคุณเปิด วงเล็บ HTML ที่ด้านบนสุด มีที่เป็นหลัก ก็หมายความว่าเดี๋ยวก่อนเบราว์เซอร์ ที่นี่มาหน้าเว็บที่เขียนในรูปแบบ HTML 

เมื่อเห็นวงเล็บเปิด หัวที่เพียงแค่หมายความว่า เดี๋ยวก่อนเบราว์เซอร์ที่นี่มาหัวหรือ ส่วนบนสุดของหน้าเว็บของฉัน เมื่อเห็นวงเล็บปิด หัวที่เพียงแค่หมายความว่าเดี๋ยวก่อน ที่มันสำหรับหัว สแตนด์บายอย่างอื่น และสิ่งอื่นที่เป็น เห็นได้ชัดว่าจะเป็นร่างกาย และเมื่อคุณไม่ได้มีแท็กเช่น คุณมีเพียงแค่สวัสดีจุลภาคโลก ที่เพิ่งจะเป็นข้อความที่ดิบ ในท้ายที่สุดจะแสดงในหน้าจอ 

ตอนนี้คุณจะสังเกตเห็นเกินไป ย่อหน้าที่นี่ คุณอาจจะสามารถสรุป วิธีการที่เรากำลัง stylizing มัน ทุกครั้งที่ฉันเปิดแท็ก จึงจะพูดฉันเยื้อง และทุกครั้งที่ผมปิด แท็กฉันยกเลิกการเยื้อง ในทำนองเดียวกันกับวงเล็บปีกกา และเกินกว่าที่ผมชนิด ของการใช้การตัดสินใจของฉัน แจ้งให้ทราบว่าผมไม่ได้รำคาญตี ใส่ที่อยู่ภายในแท็กชื่อที่ ทำไม? ดีฉันก็ตัดสินใจที่จะดู ทำความสะอาดเล็ก ๆ น้อย ๆ กับผมของมนุษย์ เพียงแค่ไม่รบกวนการทำที่ ดังนั้นอีกครั้งมีบาง การตัดสินเพียงแค่เรียกร้อง เช่นเดียวกับที่มีอยู่ใน C หรือภาษาใด ๆ 

แต่สังเกตเห็นเกินไปที่จะย่อหน้านี้ ยืมตัวเองไปแบบจิต อย่าให้เกินมันซับซ้อน แต่ต้นไม้ใช่มั้ย? ถ้าคุณคิดว่าเว็บ หน้าเขียนเห็นได้ชัด เช่นนี้ว่าเป็น อย่างเยื้องวิธีการที่ คุณเกือบจะสามารถคิดวงเล็บเปิด แท็ก HTML วงเล็บปิดเป็น demarcating รากของโหนดต้นไม้ครอบครัว โหนดสไตล์ในรูปแบบของต้นไม้ เรามองที่เมื่อวันศุกร์ 

และแน่นอนเรามีอยู่ที่นี่ สิ่งที่เราจะเรียกเอกสาร DOM, D-O-M รูปแบบวัตถุเป็นวิธีที่จินตนาการของบอกว่า ต้นไม้ที่แสดงถึงว่า HTML และสังเกตเห็นว่ามี HTML เราจะพูดว่า เหมือนต้นไม้ครอบครัวเด็กสองคน ด้านซ้ายเป็นหัว ด้านขวาเป็นร่างกาย 

และเช่นเดียวกับการออกกำลังกายความคิดเหตุผล, หัวแน่นอนมีลูกกี่ ตามโครงสร้างนี้? ดังนั้นเพียงแค่หนึ่ง title-- และนั่นคือเหตุผลที่เรามี ลูกศรไปจากหัวถึงชื่อ ดังนั้นจึงเป็นว่าคนที่อยู่ในที่ ต้นไม้ครอบครัวมีเพียงหนึ่งลูกหลาน แล้วชื่อตัวเองสามารถ ได้รับการบอกว่าจะมีเด็กเกินไป 

จำได้ว่า HTML ได้ สวัสดีจุลภาคโลกใต้มัน และฉันได้มาเพียงแค่ภายใน รูปไข่แทนรูปสี่เหลี่ยมผืนผ้าเพียง การถ่ายทอดความหมายว่าแม้ว่า มันเป็นโหนดในต้นไม้เพื่อที่จะพูด มันเรียงลำดับของการแตกต่างกันลึกซึ้ง มันไม่ได้แท็ก หรือถูกกว่าก็ไม่ได้องค์ประกอบ มันเป็นเพียงโหนดข้อความถ้าคุณจะ แต่เหล่านี้อย่างสมบูรณ์ การประชุมของมนุษย์โดยพลการ นี้เป็นเพียงแค่ตอนนี้วิธีการของฉัน ที่เป็นตัวแทนของสิ่งที่ฉันจะเป็นรวม เรียกเอกสาร 

และเป็นกันสิ่งที่ มุมซ้ายสุดด้านบน วงเล็บเปิดเอกสารเครื่องหมายอัศเจรีย์ ชนิด HTML นี้ดูเหมือนว่าแท็ก แต่มันเป็นกรณีมุมที่โง่ ที่เป็นเพียงที่นั่นคัดลอกและวาง เพื่อระบุว่าเบราว์เซอร์ นี้เป็นรุ่น HTML 5 โลกช่วยให้การเปลี่ยนแปลงสิ่งที่ บรรทัดแรกของรหัสในหน้าควรจะเป็น เพียงแค่นี้ก็หมายถึงรุ่นที่ 5 ดังนั้นมันจะไม่มาก ลักษณะเหมือนคนอื่น ๆ 

สิทธิทั้งหมดให้กับที่ กล่าวว่าตอนนี้คุณจะประทับใจ นี้ค่อนข้างโง่ สักคนได้ 

[หัวเราะ] 

เดวิดเจลัน: ทั้งหมดขวา และตอนนี้เราจะมาดำน้ำจริง เข้าไปทำอะไรกับเรื่องนี้ คุณจะได้จำได้ว่าครั้งสุดท้ายที่ ผมเปิดเครื่องใช้ CS50 และฉันไม่สิ่งที่เป็น ง่ายเหมือนการเปิดขึ้น Gedit และฉันบันทึกไฟล์แม้ใน desktop-- ของฉันไม่มีที่ไหนเลย special-- เป็น hello.html 

เพื่อให้ฉันทำอย่างนั้น เหมือนเดิม hello.html ใส่ และตอนนี้อยู่ในไฟล์นี้ผมกำลังจะไป ไปข้างหน้าและทำซ้ำสิ่งที่เราเพียง saw-- เอกสารประเภท HTML แล้วฉันจะไป ทำ HTML วงเล็บเปิดปิดวงเล็บ แล้วฉันจะ preemptively เปิดและปิดแท็ก ทำไม? เพียงเพื่อให้ฉันไม่ลืมในภายหลัง มันเป็นเพียงการปฏิบัติที่ดีเช่นเดียวกับการเปิด และปิดวงเล็บปีกกาทั้งหมดในครั้งเดียว 

และแล้วสิ่งที่มาต่อไปหรือไม่ คุณสามารถคิดของรอยสัก 

ผู้ชม: หัว 

เดวิดเจลันหัว และจากนั้นในที่นี่ผม มีชื่อที่ฉันคิดว่า และชื่อเป็นพล, สวัสดีโลกใกล้ชื่อ แล้วลงที่นี่ร่างกายของ course-- แล้วเราปิดแท็กร่างกาย แล้วก็ค่อนข้างเกินความจำเป็น, ฉันมีสิ่งที่เหมือนกันลงที่นี่ 

ดังนั้นผมจึงเรียกร้องว่านี่เป็นหน้าเว็บ นี่คือสิ่งที่ ตอนนี้สามารถมีชีวิตอยู่บนเว็บ แม้ว่าแน่นอนมันเป็นตัวอักษร ที่อาศัยอยู่บนเดสก์ทอปของฉันตอนนี้ แต่แน่นอนถ้าผมลด Gedit, ฉันจะเห็นบนเดสก์ทอปของฉันไอคอน แม้จะเป็นเครื่องใช้ไฟฟ้า, คุณสามารถทำเช่นนี้บน Mac OS โดยไม่ต้อง TextEdit หรือ Windows ด้วย Notepad ได้ 

และถ้าฉันไปข้างหน้าและดับเบิลคลิก ที่ได้และ select-- ดีขอ ไม่เลือกว่าเป็นเพราะ Chrome ไม่ได้เปิด ลองไปข้างหน้าและเปิด Chrome แล้วทำคำสั่ง O สำหรับเปิด และนำทางไปยังเดสก์ทอปของฉัน และเปิดแฟ้มที่ นั่นคือวิธีที่เบราว์เซอร์ตีความ HTML, บนลงล่างซ้ายไปขวา เฮ้นี่เป็นเบราว์เซอร์ HTML นี่หัวเป็น นี่คือชื่อเรื่อง นี่คือร่างกายเป็น และแน่นอนนี้เป็นวิธีที่ จะแสดงผลหน้าเว็บที่ 

แต่สังเกตเห็น URL ไม่มีคุณสามารถดึงขึ้นนี้โดยเฉพาะ หน้าแล็ปท็อปของคุณในขณะนี้ แม้ภายในของคุณ เครื่องใช้ไฟฟ้าผ่านทาง URL ที่, เพราะ file: // แสดงก็จริง ในระบบไฟล์ของฮาร์ดไดรฟ์ของฉัน ไม่ใช่ของคุณ ดังนั้นนี่คือไม่ได้ทั้งหมดที่มีประโยชน์ที่ 

ตอนนี้ขอให้ย้ายไปยัง โดยใช้เว็บเซิร์ฟเวอร์ที่เกิดขึ้นจริง และมันจะเปิดออก CS50 เครื่องใช้ภายในบ้าน เป็นมากกว่าเพียงแค่สภาพแวดล้อมที่ คุณสามารถเขียนรหัส C และรวบรวม และเรียกใช้เหมือนที่คุณได้ทำ นอกจากนี้ยังได้รับการกำหนดค่าโดย พนักงานที่จะเป็นตัวแทนเว็บทั่วไป เซิร์ฟเวอร์ที่อยู่บนอินเทอร์เน็ต หนึ่งที่คุณอาจจ่ายสำหรับ หรือคนที่อยู่ในที่เรียกว่าคลาวด์ 

และมันทำงาน มาตรฐานเปิดแหล่งที่มาฟรี ซอฟต์แวร์เช่นบางสิ่งบางอย่าง เรียกว่าอาปาเช่ซึ่งอาจจะเป็น ยังคงเป็นเว็บที่นิยมมากที่สุด ซอฟต์แวร์เซิร์ฟเวอร์ในโลก ที่เว็บไซต์หลายพันแห่งใช้ในปัจจุบัน และก็ยังได้มี ซอฟแวร์เช่น MySQL, ซึ่งเป็นเซิร์ฟเวอร์ฐานข้อมูล ที่ในที่สุดเราก็จะได้รับไป ซึ่งเป็นเพียงการบอกว่า ผมสามารถเริ่มต้นการรักษา เครื่องใช้ของฉันเป็นเซิร์ฟเวอร์เต็มเปี่ยม ที่ผมไม่ได้จ่ายเงินสำหรับที่อื่น ๆ มันก็อาศัยอยู่บนแล็ปท็อปของตัวเองสำหรับ การพัฒนาและการอำนวยความสะดวกเพื่อการ 

จึงขอไปข้างหน้าและ ใช้ประโยชน์จากนี้ ฉันจะไปข้างหน้าและ เปิดหน้าต่าง terminal และฉันจะไปข้างหน้าและ move-- จริงครั้งแรกของฉัน จะนำทางไปยังเดสก์ทอปของฉัน ถ้าฉันทำ LS มี hello.html และฉันจะไป ข้างหน้าและเริ่มใช้ ไดเรกทอรีใหม่เราได้ ไม่ได้ใช้ก่อนที่วันนี้ 

hello.html-- ฉันจะย้าย เพื่อ ../vhosts สำหรับ hosts-- เสมือน เพิ่มเติมว่าใน future-- แล้ว ลงในไดเรกทอรีที่เรียกว่า localhost, ซึ่งเป็นชื่อเล่นให้ไปเกือบ คอมพิวเตอร์เครื่องใดก็ได้ไม่ว่าจะเป็น Mac, PC, หรือคอมพิวเตอร์ลินุกซ์แล้ว โดยเฉพาะในไดเรกทอรีที่เรา พนักงานที่สร้างขึ้นมาแล้วสำหรับคุณเมื่อ คุณดาวน์โหลดเครื่องที่เรียกว่า สาธารณะ และเป็นชื่อของมันบ่งบอกอะไร ฉันใส่ในโฟลเดอร์นี้ในทางทฤษฎี เป็นไปได้ตอนนี้เป็น ประชาชนอย่างน้อยกับคน ที่มีโดยตรง การเชื่อมต่อกับคอมพิวเตอร์ของฉัน 

ดังนั้นตอนนี้ให้ฉันไปข้างหน้าและ ทำ cd ไปยังไดเรกทอรีเดียวกันกับที่ เพื่อให้สามารถมองเห็นสิ่งที่เป็น ที่เกิดขึ้นและประเภท LS และแน่นอนว่าเป็น สิ่งเดียวที่อยู่ในนั้น ผมเรียกร้องว่าตอนนี้เพราะผมได้ใส่นี้ ยื่น hello.html ภายในของไดเรกทอรี เรียกว่าอยู่ในที่สาธารณะของไดเรกทอรี เรียกว่า localhost ภายในของไดเรกทอรี เรียกว่า vhosts ซึ่ง ขอบคุณพนักงาน CS50 ได้รับการกำหนดค่าล่วงหน้าที่จะเป็น รากของเว็บเซิร์ฟเวอร์ของคุณ ผมหวังว่าจะสามารถทำเช่นนี้ 

ฉันจะเปิดแท็บใหม่ และฉันจะไปไม่ยื่น: // ฉันจะใช้งานจริง http / localhost ซึ่ง อีกครั้งเป็นชื่อเล่น สำหรับเซิร์ฟเวอร์ของตัวเอง แล้วฉันจะไปกับสิ่งที่ ชื่อไฟล์เพียงเพื่อจะชัดเจน? อยู่ที่ไหนเรื่องนี้อาจจะ? hello.html 

ดังนั้นในคำอื่น ๆ ที่ฉันต้องการตอนนี้ เป็นเครื่องคอมพิวเตอร์ของตัวเองเครื่องของตัวเอง ราวกับว่ามันเป็นเซิร์ฟเวอร์ที่เกิดขึ้นจริง ชื่อเล่นของมันคือ localhost แต่คิดว่า localhost เหมือน Facebook.com google.com, สิ่งที่ มันเป็นเพียงแค่ชื่อท้องถิ่นของฉัน แล้วสุดท้ายที่ฉันต้องการคือใน รากของฮาร์ดไดรฟ์เพื่อที่จะพูด หรือรากของเว็บเซิร์ฟเวอร์ เออร์โก้ ergo ทับแล้ว ชื่อไฟล์ hello.html 

ผมขอซูมออกและกด Enter และแน่นอนมีตอนนี้หน้าเว็บของฉัน ดังนั้นจึงเป็นเรื่องที่แตกต่างกันเล็กน้อย และมันก็เป็นเช่นเดียวกับ underwhelming นี้เป็นรุ่นเก่า ผมขอลดขนาดตัวอักษรกลับ นี้เป็นรุ่นเก่า นี้เป็นของใหม่ แต่สิ่งที่เกิดขึ้นพื้นฐาน ตอนนี้ HTTP ที่ถูกนำมาใช้ 

ขอให้เล็ก ๆ น้อย ๆ นี้ชัดเจนมากขึ้นหรือ ถ้าคุณจะเล็ก ๆ น้อย ๆ ที่ซับซ้อนมากขึ้น ผมขอไปที่ด้านล่างขวา มุมของเครื่องใช้ไฟฟ้าของฉัน และสังเกตเห็นว่าทั้งหมดนี้ เวลามีเป็นจำนวนมาก นั่นคือที่อยู่ไม่ซ้ำกัน ของเครื่องใช้ภายในบ้าน CS50 ของคุณ มันเป็นอยู่ส่วนตัว เป็นนัยโดย 172.16, ซึ่งก็หมายความว่าเพียงคุณเท่านั้นที่ร่างกาย สามารถเข้าถึงเว็บเซิร์ฟเวอร์นี้ ทุกอย่างจะ firewalled และ การป้องกันเป็นอย่างดีจากส่วนที่เหลือ ของโลกเพราะเรื่องนี้อยู่ 

และตอนนี้สังเกตเห็น แต่ถ้าผมไป ที่อยู่นี้ไม่ได้อยู่ในเครื่องของฉัน แต่ใน Mac OS-- ฉันจะ ที่จะกลับไปกว่าที่นี่ นี่คือ Mac ของฉันตอนนี้ และตอนนี้ผมกำลังจะเปิดขึ้น รุ่นนี้ของ Chrome ที่นี่ และฉันกำลังจะไปที่ http: //172.16.25 / และฉันลืม rest-- 133 

ดังนั้นฉันจะไปจาก Mac ของฉัน ที่อยู่ IP ที่ /hello.html ใส่ และตอนนี้ฉันเห็นจาก Mac ของฉัน เครื่องใช้ภายในบ้านที่ CS50 ของฉันที่มี ที่อยู่ IP คือ จำนวนแน่นอนพฤติกรรม เช่นเว็บเซิร์ฟเวอร์บนอินเทอร์เน็ต มันไม่จำเป็นที่ดีง่ายต่อการ จำชื่อเช่น Facebook.com, แต่มันใช้ HTTP เห็นได้ชัดแม้ว่า Chrome เป็นชนิดของการลดความซับซ้อนของโลก สำหรับเรา แต่ไม่ได้แสดงให้เรา HTTP แต่ตอนนี้เป็นที่แน่นอนว่าที่ Chrome เป็นเพียงการประหยัดบาง การกดแป้นพิมพ์วันนี้ และนั่นคือสิ่งที่เราเห็น 

ดังนั้นนั่นคือทั้งหมดที่ดีและดี แต่มันเป็นหน้า underwhelming สวย ให้ฉันไปในการทำอะไรบางอย่าง เล็ก ๆ น้อย ๆ ที่แตกต่างกันตอนนี้ เพื่อให้ฉันกลับไป 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-- เพียง ใส่ทับภายในของแท็ก ที่ท้ายสุด ตอนนี้ให้ฉันกลับไปยังเบราว์เซอร์ของฉัน ตีโหลดด่าสิ่งที่ผิดปกติ คุณอาจจะได้เห็นนี้ บางครั้งในเว็บ แม้จะไม่ได้รับความผิดของคุณ มันเป็นความผิดของเว็บเซิร์ฟเวอร์ อะไร odes นี้ชี้ให้เห็น? มันเสีย นั่นคือสิ่งที่เป็นภาพ ใช่? 

ผู้ชม: แต่มันไม่ได้ มีการเข้าถึงภาพ 

เดวิดเจลัน: มันไม่ได้ มีการเข้าถึงภาพ นั่นหรือแม้แต่เลวอาจจะ มันไม่ได้อยู่ ลองดูว่าเราจะไม่สามารถวินิจฉัยว่า จำจากครั้งที่แล้วว่าถ้า ใน Chrome ในเครื่องใช้ไฟฟ้า, หรือแม้กระทั่งใน Mac หรือ PC ของคุณ คุณไปที่เมนูพัฒนา และไปที่เครื่องมือสำหรับนักพัฒนา ตัวเลือกซึ่งอาจเป็นคุณได้ ไม่ได้ใช้มากหรือเคย และถ้าผมไปที่เครือข่าย และโหลดหน้าเว็บ ขอจริงดูได้ที่ http ขอให้มีการทำ 

ดูเหมือนว่า hello.html เป็น แน่นอนตกลงด้วยเหตุนี้ 200 แต่ cat.jpg เป็น 403 ดังนั้นจึงไม่ 404 ไฟล์อาจจะมีอยู่ 403 วิธีการต้องห้าม ดังนั้นนี่คือความสับสนเล็กน้อย ฉันจะกลับไป เพื่อหน้าต่าง terminal ของฉัน ผมขอขยายขึ้นที่นี่ และแจ้งให้เรา do ls มีไฟล์เดียวกันนั้นเป็น 

ตอนนี้ให้ฉันทำ LS-L, ซึ่งคุณอาจจะ ก่อนที่จะนำมาใช้ในการดูไฟล์ ขนาดอาจจะหรือ timestamps และเราจะเห็นทั้งกลุ่ม ข้อมูลอย่างท่วมท้น แต่สังเกตเห็นรายละเอียดบางอย่าง นี่คือ hello.html ในครั้งนี้ แถวนี่และที่นี่เป็น cat.jpg และเป็นเพียงเครื่องเป็น ใช้งานง่ายโดยไฮไลต์ของ JPEG สีม่วงเช่นนี้ แต่สิ่งที่คนอื่นมีความแตกต่างด้านข้าง ขนาดไฟล์และชื่อไฟล์? 

ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: ใช่มี สอง R มากขึ้นกว่าที่นี่ สังเกตเห็นสิ่งที่ hello.html ได้เกิดขึ้น ดังนั้นจึงปรากฎว่าชื่อของ ประชาชนในไดเรกทอรีนี้เป็นสิ่งที่สำคัญ อะไรในไดเรกทอรีนี้ มีขึ้นเพื่อเป็นที่สาธารณะ แต่มันก็ไม่เพียงพอ เพียงเพื่อวางไฟล์ในนั้น นอกจากนี้คุณยังจำเป็นต้องเปลี่ยน รูปแบบของไฟล์ เปลี่ยนสิทธิ์ของ ไฟล์ในเชิงรุกได้ จะตั้งค่าเริ่มต้น ซึ่งเป็นที่เดียวที่ฉันสามารถอ่าน และเขียนมันฉันเป็นเจ้าของ ผมอยากให้ทุกคนในโลกทั้ง จะสามารถอ่านไฟล์ของฉันจึงจะพูด อ่านเพียงแค่หมายถึงการดู 

และแน่นอนว่าคุณจะเห็นในปัญหา ตั้งเจ็ดว่าเป็นสิ่งที่มีค่าเฉลี่ย R เหล่านี้ ทั้งสองอาร์หมายถึงให้ทุกคน อื่นใดในโลกนอกจากนี้ยังอ่านมัน โดยเฉพาะอย่างยิ่งในขณะนี้ว่า มันอยู่ในไดเรกทอรีนี้ ดังนั้นวิธีที่ง่ายที่สุดในการแก้ไขปัญหานี้คือการ ไปให้ฉันและทำ chmod สำหรับการเปลี่ยนแปลง โหมดแล้วทำ + R, ทั้งหมด ทุกคนทุก R บวกสำหรับการอ่าน, แล้ว cat.jpg ใส่ ดูเหมือนจะไม่มีอะไรเกิดขึ้นซึ่ง มักจะหมายถึงสิ่งที่ดี ดังนั้น LS-L เหมือนเดิมตอนนี้ ให้ดูที่ cat.jpg และได้รับอนุญาตนี้ ดูเหมือนจะมีการเปลี่ยนแปลง เช่นกันถ้าคุณทำ ความผิดพลาดและคุณตัวอย่างเช่น เพิ่งทำ your-- ฉันไม่ know-- เรียงความ สาธารณชนสามารถเข้าถึงได้โดยอุบัติเหตุ คุณสามารถทำตรงข้าม chmod-R แม้ว่าจะตรงไปตรงมาก็ไม่ควร อยู่ในไดเรกทอรีสาธารณะ แล้วถ้าเป็นกังวล 

ดังนั้นตอนนี้ขอกลับไปที่ เบราว์เซอร์และโหลดของฉัน และฉันจะคลิก เล็ก ๆ น้อย ๆ Ghostbusters สัญลักษณ์เพื่อล้างส่วนหนึ่งของการที่ หน้าจอเพื่อให้เราสามารถเห็นการร้องขอใหม่ และแน่นอนนี่คือ แมว Grump ก่อน แต่ที่สำคัญกว่า ในทางเทคนิคมี หมายเลข 200 ซึ่ง หมายความว่าเราได้มันตกลง ขวาทั้งหมดดังนั้นนั่นคือทั้งหมดที่ดีและดี แต่เราไม่ได้ทำ ที่ดีที่สุดของเว็บไซต์ หรือเราจะพยายามอย่างหนักเกินไปที่จะ ทำให้สุดหรูของเว็บไซต์ในวันนี้ แต่ขออย่างน้อยทำอะไรบางอย่าง ซุปเปอร์คุ้นเคยก่อนที่จะมีชีวิตชีวา ปิดแท็กอื่น ๆ ไม่กี่ ดังนั้นคิดว่าฉันไม่ได้ต้องการเพียงแค่แมวที่นี่ สมมติว่าที่จริงผมอยากให้เรื่องนี้ แมวที่จะเชื่อมโยงไปยังบางสิ่งบางอย่าง 

ฉันอาจยกตัวอย่างเช่น ทำอะไรเช่นนี้ สำหรับผู้ประกาศข่าว href สำหรับ equals-- อ้างอิงมากเกินไป และขอเพียงแค่ทำอะไรบางอย่าง เช่น www.google.com ใกล้ อ้างวงเล็บปิด และตอนนี้การค้นหาสำหรับแมว ปิดสมอแท็ก ดังนั้นนี้มีเพียงหนึ่งประเภท รายละเอียดของพื้นฐานใหม่ แท็กของหลักสูตรมีความแตกต่าง มันเป็นชื่อสำหรับผู้ประกาศข่าว อ้างอิง href หรือมากเกินไป 

แต่ที่สำคัญกว่ามี คุณลักษณะการสร้างประโยคที่นี่ นี่คือสิ่งที่เราจะเริ่มต้นเรียก ไม่ได้แท็ก แต่แอตทริบิวต์ และคุณลักษณะที่เป็นสิ่งที่ ปรับเปลี่ยนพฤติกรรมของแท็ก และนี่แอตทริบิวต์ href หมายถึง ปรับเปลี่ยนพฤติกรรมของผู้ประกาศข่าวนี้ เพื่อที่ว่าเมื่อมันคลิก มันจะไปยัง URL ที่นี่ และแน่นอน URL ที่เป็นของ Google 

ในขณะเดียวกันนี่คืออะไร ข้อความที่นี่จะเป็นอย่างไร ดีที่เป็นไปได้ สิ่งที่มนุษย์จริง เห็นว่าเป็นที่ขีดเส้นใต้ การเชื่อมโยงเป็นง่ายๆเป็นว่า จึงขอลองนี้ ผมขอบันทึกไว้ ฉันยังคงอยู่ใน hello.html แต่ในเวอร์ชั่นออนไลน์ที่คุณจะเห็น ชื่อไฟล์ที่เกิดขึ้นจริงเราก่อนเตรียม ให้ฉันไปข้างหน้าและโหลด และตอนนี้ก็มาก หน้า underwhelming ยังคง แต่ถ้าผมเลื่อนไปตรงนี้ และมันเป็นเรื่องเล็ก ๆ น้อย ๆ , but-- คุณสามารถมองเห็นในด้านล่าง มุมซ้ายมือของหน้าจอของคุณ มันย่อมเป็นไป google.com และถ้าฉันคลิกที่มันจะ พาฉันวิธีการที่เกิดขึ้นจริงของ Google 

แต่สังเกตเห็นที่นี่เปิดโอกาสให้ การแสวงหาผลประโยชน์เช่นเดียวกับกัน และเราจะกลับมาที่อื่น ๆ ประเด็นของการรักษาความปลอดภัยก่อนที่จะยาว เพราะมีขั้วนี้ ระหว่างที่คุณไปและสิ่งที่คุณพูด คุณสามารถทำสิ่งที่ชอบ เจ้านี่ http://www.google.com ตกลงตอนนี้ถ้าผมโหลด หลังจากบันทึกหน้านั้น ดูเหมือนว่าฉันจะไปที่ Google แต่มีเหตุผลที่ฉัน ต้องไปที่ Google ใช่มั้ย? ที่จริงผมอาจจะไปเพื่อสิ่งที่ต้องการ badguy.com, โหลดหน้าเว็บที่นี่ และแจ้งให้ทราบก็ยังคงมีลักษณะเช่น Google หากว่าฉันคม พอที่จะเลื่อนไปที่นี่ ทำผมเห็นมันจะไป ไปยังสถานที่ที่แตกต่างกัน 

ดังนั้นถ้าคุณเคยเคย อีเมล์โดยเฉพาะอย่างยิ่ง จาก Paypal หรือ ดูเหมือนว่าจาก Paypal ขอให้คุณเข้าสู่ระบบ ในบัญชีของคุณนี้ คือเหตุผลที่คุณไม่ควร เคยคลิกลิงก์ในอีเมล, ตรงไปตรงมาเชื่อมโยงใด ๆ ในอีเมล ถ้าคุณรู้ว่าคุณมีที่เกิดขึ้นจริง เงินในธนาคารหรือ Paypal ของอเมริกาหรือความจงรักภักดีหรือ เว็บไซต์พิมพ์ด้วยตนเองใน เพราะดูวิธีที่ง่ายก็คือการ หลอกลวงคนเป็นสิ่งที่นำเสนอ ดูเหมือนว่าการเชื่อมโยง แต่มันเป็นจริงได้ ไปได้ทุกที่อย่างแน่นอน 

และมีมากขึ้น ภัยคุกคามกว่านี้ ในความเป็นจริงเป็นบิต การสัมผัสกันในขณะนี้ แต่อย่างใดอย่างหนึ่ง ของคนที่ดีที่สุดที่ฉันเคยเห็น ซึ่งได้รับการตั้งแต่ปิด คือคนที่นำผู้คน to-- ดังนั้นนี้อาจจะบอกว่า คลิกที่นี่เพื่อเข้าสู่ระบบของคุณ บัญชี, บัญชีธนาคาร และนี่ก็เป็นธนาคารของเวสต์ 

ดังนั้นคนที่ซื้อนี้ และมันเป็นเรื่องง่ายขึ้นเล็กน้อยที่จะเห็น มันอยู่ในตัวอักษรขาวดำเว้นระยะซูม ในโปรเจ็คเตอร์ 30 ฟุต แต่เมื่อมันเป็นตัวอักษรเล็ก ๆ ใน อีเมลที่คุณได้รับ, ลักษณะนี้เช่น bankofthewest.com, ไม่ bankofthevvest.com, ใครบางคนซึ่งได้จ่าย $ 10 เพื่อซื้อ และแล้วนี้นำพวกเขาไป เทียบเท่าของบางเว็บไซต์ที่ไม่ดี 

และคุณจะเห็น too-- จริงที่เราสามารถทำได้ เจ้านี่ถ้าฉันไปที่เว็บไซต์ที่เกิดขึ้นจริง bankofthewest.com อีกครั้ง การเรียกคืนจากครั้งล่าสุด ที่ว่านี้เป็นหน้าเว็บของพวกเขาและ คุณอยากรู้ว่าวิธีการทำงาน แน่นอนคุณสามารถไปที่ Chrome ของเครื่องมือสำหรับนักพัฒนา และคุณสามารถดูทั้งหมดของ รูปแบบ HTML มีอย่าง 

แต่ขึ้นไปยังจุดที่ คุณ cam-- ให้ปิด เจ้านี่คุณสามารถไปดู พัฒนามาดู ไม่ฉันเพียงแค่คัดลอกทำไม ทั้งหมดที่แล้วฉัน สามารถไปลงในหน้าต่าง Gedit ของฉันเล็ก ๆ น้อย ๆ ที่นี่และทำให้หน้าเว็บของตัวเอง บันทึกใน hello.html และอาจจะเป็นไปที่จะทำลาย เพราะมันไม่ง่ายนี้มักจะ แต่ตอนนี้ถ้าผมโหลดหน้าเว็บของตัวเองใน ของตัวเอง CS50 เครื่องใช้ไฟฟ้าและโหลดตี ตกลงสิ่งบางอย่างยากจน แต่ฉันสวยใกล้เคียงกับการมี เว็บไซต์ของธนาคารของตัวเองใช่มั้ย? ทั้งหมดนี้ HTML-- 

[หัวเราะ] 

เดวิดเจลัน: --I ที่จริงไม่ได้และคุณ รู้ว่ามีใครบางคนออกมีที่ จริงจะคลิกลิงก์เหล่านี้เกินไป ดังนั้นอย่างชัดเจนสิ่งบางอย่างยากจน แต่ที่จะนำไปสู่ เราเข้าสู่การอภิปราย โดยไม่จำเป็นในขณะนี้เป็นสิ่งที่ CSS แผ่น cascading สไตล์, มี และวิธีที่คุณจริง ดาวน์โหลดไฟล์อื่น ๆ HTML และไฟล์ JPEG GIF ไฟล์ที่ เว็บไซต์อาจจะมีการใช้ แต่ทั้งหมดที่เป็น accomplishable แต่จริงๆมันเดือดลงไป วิเคราะห์พฤติกรรมเหล่านี้ง่ายมาก 

ดังนั้นตอนนี้ขอเพียงแค่อ่านผ่าน สองสามตัวอย่างอื่น ๆ ของภาษา HTML เพียงเพื่อให้คุณมีความรู้สึก ของสิ่งที่คุณสามารถทำได้ ตัวอย่างเช่นนี้เป็น list.html สมมติว่าผมต้องการที่จะทำให้หน้าเว็บ ที่มีรายชื่อของบ้านในรูปสี่เหลี่ยม ฉันอาจจะใช้แท็กยูสำหรับสั่ง รายชื่อแล้วเด็กรายการ แล้วย้ำ over-- หรือรายการ rather-- บ้านในคำถาม 

และถ้าฉันเปิดนี้ขึ้นให้ทำเช่นนี้ ให้เป็นไปไม่ได้ที่จะ hello.html, แต่เพื่อ list.html ประณามมัน ฉันจะแก้ไขปัญหานี้ได้อย่างไร มันเป็นปัญหาเหมือนก่อนใช่มั้ย? ดังนั้นให้ฉันทำ oops-- chmod-- chmod + R ของ list.html และตอนนี้ถ้าผมกลับไปยังเบราว์เซอร์ของฉัน และคลิกโหลดมีมันเป็น ดังนั้นถ้าคุณเคยต้องการที่จะทำให้ รายการที่มีสัญลักษณ์คุณสามารถทำเช่นนั้นได้ ถ้าคุณต้องการที่จะเป็นซุปเปอร์แฟนซีและทำให้ รายการสั่งซื้อที่ไม่ได้มีรายชื่อเรียงลำดับ การเปลี่ยนแปลงเหล่านั้นเพื่อเบียร์, โหลดหน้าเว็บและ ตอนนี้เบราว์เซอร์จะมีจำนวนมันสำหรับคุณ 

อะไรที่เราสามารถทำได้? ดีคู่ของ others-- ถ้า คุณได้มีย่อหน้ายาวของ text-- ตัวอย่างเช่นบาง ข้อความภาษาละตินเหมือนเจ้านี่ และคุณต้องการไว้ในย่อหน้าที่แยกต่างหาก เปิด P, หน้าปิดแท็กวรรค และทำมันอีกครั้งและอีกครั้ง และถ้าตอนนี้ผมเปิดแฟ้มนี้ paragraphs.html ดีนี้ จะได้รับที่น่ารำคาญ ดังนั้นตอนนี้ขอเพียงแค่กลับไปของฉัน พร้อมรับคำ chmod + R R ดาว .html-- ดีป่าการ์ดเล็ก ๆ น้อย ๆ เพื่อที่จะพูด มันควรจะแก้ไขทั้งหมดของ ปัญหาเหล​​่านี้สำหรับผม ลองโหลด มีสามย่อหน้าเป็น 

และตอนนี้ขอไปข้างหน้า และเปิดขึ้นอีกคนหนึ่ง วิธีการเกี่ยวกับตาราง? คุณจะสังเกตเห็นลักษณะของตาราง ที่ซับซ้อนมากขึ้นเล็ก ๆ น้อย ๆ แต่มันเป็น idea-- เดียวกัน เปิดแท็กเปิดแท็ก เปิดเปิดเปิดแท็กปิดเปิดแท็ก และสิ่งเหล่านี้เกิดขึ้นที่จะยืน ตารางที่มีชายแดนเป็นที่เห็นได้ชัด จะเป็นความหนาของสิ่งที่ 1-- ที่แถวของตาราง means-- ตาราง ข้อมูลซึ่งหมายความว่าเซลล์ และถ้าผมกลับไปยังเบราว์เซอร์ของฉัน ที่นี่และไป table.html, คุณสามารถมองเห็นบางสิ่งบางอย่าง เช่นนี้น่าเกลียด แต่เราจะได้รับไปยังจุดที่ ที่เราสามารถทำได้จริง ทำในสิ่งที่สวยกว่าที่ 

เพื่อให้ฉันกำหนดสำหรับตอนนี้ มีอัดแน่นของแท็กมากขึ้น และ HTML เป็นที่ยอดเยี่ยมที่จะรับ เพราะตรงไปตรงมาสิ่งที่คุณต้องทำ จะมองไปที่หน้าเว็บที่มีอยู่ ที่คุณคุ้นเคย และคุณต้องการ, โอ้ว่าเป็นวิธี พวกเขาทำอย่างนี้สกอร์ 

หรือคุณสามารถดูออนไลน์ใด ๆ ทรัพยากรที่เป็นวิธีการทำงานของ HTM​​L, และคุณจะเห็นว่ามี คำศัพท์ทั้งแท็กอื่น ๆ แต่ด้วยรูปแบบจิตง่าย คนเดียวที่เกือบจะแท็กใด ๆ ที่คุณเปิด จะต้องมีการปิดจริงๆมัน ไม่พอเพียงที่จะสอนตัวเอง HTML หลังจากที่เข้าใจ ความคิดพื้นฐานเหล่านี้ของแท็ก และคุณลักษณะที่ดีและรูปแบบไว้- ที่เราได้พูดคุยเกี่ยวกับ ปิดอะไรที่เราอาจจะเปิด เพื่อที่เราจะไม่สับสนเบราว์เซอร์ จึงขอตอนนี้ใช้เวลานี้เพื่อ ระดับที่น่าสนใจมากขึ้น โดยไปที่เกิดขึ้นจริง และขอไปกับ Mac ของฉัน ที่นี่เพื่อ google.com และตอนนี้ notice-- ให้ทำเช่นนี้ ฉันฆ้องไป การตั้งค่าตั้งค่าการค้นหา ฉันต้องการที่จะปิดทันทีที่น่ารำคาญนี้ สิ่งที่ผลที่ได้ทันที เริ่มตอบสนองต่อการพิมพ์ของคุณ ลองทำเช่นนี้เพื่อให้โรงเรียนเก่า เราเห็นจริงสิ่งที่เกิดขึ้น 

ดังนั้นฉันจะบันทึกของฉัน การตั้งค่า Google ที่นี่ และตอนนี้ notice-- ฉันจะ ค้นหาสิ่งที่ชอบแมว และจะยังคงทำอัตโนมัติ สมบูรณ์ที่นี่ แต่ขึ้นอยู่กับสิ่งที่ คนที่ได้พิมพ์ในอดีตที่ผ่านมา แต่สังเกตเห็นสิ่งที่จะเกิดขึ้น 

ใน URL ในขณะนี้ นี้เป็นเพียง google.com และในทางเทคนิคก็เฉือน Google เป็นเพียงการบันทึกตัวอักษร และไม่แสดงให้เราเห็นว่า พวกเขาจะแสดงให้เรา https เพียง ที่จะเป็นซุปเปอร์มั่นใจว่าเรา ที่หน้าการรักษาความปลอดภัยหรือการเข้ารหัส 

เพื่อให้ฉันไปข้างหน้าและการค้นหาสำหรับแมว ตอนนี้จริงๆ ครอบงำได้อย่างรวดเร็ว มองไปที่ความยาวของ URL นี้ แต่มันกลับกลายเป็นว่าส่วนใหญ่ของสิ่งนี้ ใน URL ที่เป็นจริงสวยไร้ประโยชน์ ฉันจะเริ่มต้นการลบ สิ่งที่ฉันไม่เข้าใจ ฉันเห็นแมว ผมเข้าใจแมว ผมไม่ทราบว่าทำไมแมวเป็นที่นั่นอีกครั้ง ผมไม่ทราบ สิ่งที่เป็นเรื่องไร้สาระนี้ ดังนั้นฉันแค่จะเก็บ ไฮไลท์และการลบสิ่งที่ ที่ฉันไม่เข้าใจ กลั่น URL ลงเพียงแค่นี้ 

ตอนนี้ให้ฉันได้รับการป้อนอีกครั้ง ดูเหมือนว่า Google ยังคงทำงาน ดังนั้นด้วยเหตุผลบางอย่างที่พวกเขากำลังเพิ่ม จำนวนมากของสิ่งที่ไปยัง URL ของพวกเขาโดยค่าเริ่มต้น แต่มันไม่จำเป็นต้องใช้อย่างเคร่งครัด ดังนั้นสิ่งที่เป็นสิ่งที่ดีเกี่ยวกับเรื่องนี้? ดีให้ฉันไปข้างหน้าและ เปิด Chrome ได้ตรวจสอบ มีทางลัดเมาส์เล็ก ๆ น้อย ๆ มัน 

ไปที่แท็บเครือข่าย และตอนนี้ให้ฉันโหลด หน้านี้อีกครั้ง และฉันถือกะ เช่นกันเบราว์เซอร์ มีแนวโน้มที่จะเก็บหรือบันทึก ข้อมูลเพียงเพื่อประโยชน์อย่างมีประสิทธิภาพของ แต่มักจะถือกดปุ่ม Shift และ โหลดจะบังคับให้ทุกอย่าง ที่จะเริ่มต้นจากจุดเริ่มต้น และนั่นคือสิ่งที่ฉันต้องการจะทำที่นี่ 

และสังเกตเห็นสิ่งเหล่านี้ แถวที่ปรากฏเพียง ปรากฎว่าในเว็บใดก็ตาม หน้าอาจจะมีเพียงหนึ่งไฟล์ involved-- hello.html-- หรือมี อาจจะ 52 เช่นในกรณีนี้ เมื่อผมไปที่ google.com, เห็นได้ชัดว่าเบราว์เซอร์ของฉัน kicks off 52 ร้องขอ HTTP แยกต่างหาก ทำไมเป็นเช่นนั้น? 

ดีมองไปที่สิ่งที่อยู่ภายใน ด้านบนของหน้าเว็บขึ้น มีไม่เฉพาะข้อความ แต่มีภาพที่เกิดขึ้นจริง ของแมวกว่าไปทางขวา มีโลโก้ที่มีสีสันขึ้นที่นี่ที่ด้านซ้าย มีทั้งหมดของไอคอนเหล่านี้ สำหรับไมโครโฟนและอื่น ๆ มีจำนวนมากของชิ้นส่วนที่เป็นอาคาร บล็อกชิ้นเริ่มต้นถ้าคุณจะ ไปยังหน้าเว็บนี้ และสิ่งที่เบราว์เซอร์จะทำตาม รับไฟล์แรกมากซึ่ง เป็นแถวนี้ที่นี่ก็เป็นหลัก วนไปด้านบน HTML ลงล่างซ้ายไปขวามองหา สิ่งที่ต้องการแท็กรูปภาพหรือแท็กอื่น ๆ ที่ได้รับการกล่าวขวัญและไฟล์อื่น ๆ เมื่อเห็นพวกเขาไปและเรียกพวกเขา ผ่านทาง HTTP ทั้งทำงานได้ อุปมาซองจดหมาย และแสดงพวกเขาใน ตำแหน่งที่เหมาะสมในหน้าเว็บ 

แต่สังเกตเห็นที่นี่ถ้าฉันมุ่งเน้นไปที่ แมวโยนค้นหาครั้งแรก, สังเกตเห็นว่าที่จริงมันใช้ HTTP 1.1 และขออภัย Google Chrome ตอนนี้ในรุ่น 39 เป็นชนิดของสิ่งที่ dumbing ลงและ ไม่ได้แสดงให้เราเห็นส่วนหัวที่เกิดขึ้นจริง แต่สิ่งที่ถูกส่งไปแน่นอนคือการขอ ไม่เฉือน แต่ / search? q = แมว 

ตอนนี้ทำไมที่มีความสำคัญ? ดีฉันจะสรุป จากนี้ว่าถ้าคุณ Google รองรับคำสั่งในรูปแบบนี้ทำไม ฉันจึงไม่ดำเนินการค้นหาของตัวเอง เครื่องยนต์สำหรับ CS50 แต่เพียงด้านหน้า สิ้นสุดเพียงแค่อินเตอร์เฟซผู้ใช้แบบกราฟิก และเราจะจ้างปลายด้านหลัง, ผลการค้นหาที่เกิดขึ้นจริงไปยัง Google 

ดังนั้นฉันจะทำเช่นนี้? ดีให้ฉันเข้าไป Gedit กว่าที่นี่ และแจ้งให้เราไปข้างหน้าและเปิด ขึ้นสมมุติว่าไฟล์ใหม่ และฉันจะบันทึกนี้ ชั่วคราวการค้นหา-0.html และแล้วในที่สุดเราจะได้อย่างรวดเร็ว ส่งต่อไปยังคนที่ฉันก่อนเตรียม 

และฉันกำลังจะไป ชักขึ้นอย่างรวดเร็วชนิดเอกสาร HTML HTML วงเล็บเปิด HTML วงเล็บปิด แล้วฉันจะทำหัว หัวปิดเปิดชื่อ CS50 ค้นหาแทนการค้นหาของ Google ลงที่นี่ฉันจะมี ร่างกายร่างกายลงที่นี่อย่างใกล้ชิด และตอนนี้ฉันต้องค้นหา CS50 และที่จริงให้ สร้างนี้เพิ่มขึ้น ฉันจะไปข้างหน้าและปิดนี้และ จริงใส่ไว้ในไดเรกทอรีสาธารณะของฉัน ดังนั้นให้ฉันเพียงแค่ช่วงเวลาหนึ่ง ค้นหา 0.html-- ฉันจะ ชั่วคราวเรียกว่า search.html ฉันจะ chmod มัน search.html + R และตอนนี้ฉันกำลังจะไปเปิด สิทธิทั้งหมดเพื่อให้เป็นไปอย่างรวดเร็ว แต่เป้าหมายก็คือ ที่จะได้รับเราไปยังจุดที่ ของการมีข้อความนี้ แฟ้มที่เรียกว่า search.html ดังนั้นไม่มากที่จะมองไปที่ยัง อันที่จริงถ้าผมไปที่เบราว์เซอร์ของฉันและ ไป search.html, นั่นคือทั้งหมดที่มันเป็น แต่คุณรู้อะไรไหม? ฉันจะเป็นเพียงเล็กน้อยนักเล่น ผมอ่านในหนังสือที่มี แท็กส่วนหัวเรียกว่า h1 และฉันจะไปข้างหน้าและ ใช้ h1 เปิดที่และ h1 ใกล้ โหลดหน้า และตอนนี้ก็มีขนาดใหญ่และโดดเด่นยิ่งขึ้น ไม่ใช่สิ่งที่น่าสนใจ แต่อย่างน้อยก็มีโครงสร้าง น่าสนใจมากขึ้น แต่ตอนนี้ให้ฉันแนะนำแท็กอีก มันจะเปิดออกมีแท็กรูปแบบ และแจ้งให้เราปิดแท็กที่ และปรากฎว่ามีของ แท็กเข้าที่ มีคุณลักษณะที่เรียกว่าชนิดที่ เป็นชนิดข้อมูลของเขตข้อมูล ถ้าคุณจะ และเป็นไปได้ของการพิมพ์ข้อความ และค่าที่เป็นไปได้ จะเป็น CS50 ค้นหา ปิดแท็ก และมีจะเป็นความคิดของไม่มี เปิดและปิดด้วยแท็กที่แยกต่างหาก 

ผมขอย้อนกลับไปกว่าที่นี่และ ดูสิ่งที่เกิดขึ้นโหลด การเดินทางที่น่าสนใจ ดูเหมือนว่าจะเป็นช่องข้อความ และอันที่จริงฉันไม่ต้องการ การใส่ค่ายังมี ผมขอกลับไปที่นี่และได้รับจริง กำจัดของค่านี้เพื่อให้มันง่าย แทนค่าสิ่งที่ฉันต้องการ เพื่อให้สิ่งนี้เป็นชื่อ และผมไม่ทราบว่ามันคืออะไร ดังนั้นฉันจะกลับมาที่ 

แต่ต่ำกว่าที่ฉันต้องการ ที่จะทำ input type = ส่ง และค่านี้จะค้นหา CS50 และเราจะเห็นว่าทำไมฉัน ย้ายค่านี้ เมื่อผมโหลดฉันดูเหมือนจะตอนนี้มี จุดเริ่มต้นของการค้นหาของตัวเอง เครื่องยนต์สุดน่าเกลียด แต่ตรงไปตรงมาก็ ไม่โยนไกลจากสิ่งที่ หน้าเริ่มต้นของ Google ดูเหมือนว่า 

ถ้าผมไปที่นี่ตอนนี้ผมสามารถพิมพ์ใน แมวและหวังว่าคลิกค้นหา แต่ฉันไม่ได้ทำมาก ๆ เพราะผมยังไม่ได้ดำเนินการ เห็นได้ชัดว่าฐานข้อมูล ฉันยังไม่ได้รวบรวมข้อมูล เว็บสำหรับผลการค้นหา ดังนั้นฉันต้องการที่จะ outsource ไปยัง Google ดังนั้นฉันจะทำเช่นนี้? 

ดีแรกของทั้งหมดที่ฉัน ต้องเพิ่มและการกระทำ แอตทริบิวต์แท็กรูปแบบของฉันว่า เป็น http://www.google.com/search และฉันรู้ว่ามีเพียงจากการมี สรุปโดยการมองอย่างใกล้ชิด ที่ URL ของพวกเขา และตอนนี้ใช้เวลาเดา สิ่งที่ฟิลด์ข้อความนี้อาจจะ จะเรียกได้ว่าขึ้นอยู่กับการที่เรามา จากการมาก่อนหรือไม่ 

ผู้ชม:? Q 

เดวิดเจลัน:? Q และเราไม่จำเป็นต้องมีคำถาม ทำเครื่องหมายมันจะเปิดออก แต่ Q เป็นจริงมัน Q สำหรับการค้นหาอาจจะโดย เริ่มต้นเพียงเพราะนั่นคือ สิ่งที่แลร์รี่และเซอร์เกย์ ขึ้นมาพร้อมกับปีที่ผ่านมา ดังนั้นตอนนี้ให้ฉันโหลดหน้านี้ มันไม่ได้มีลักษณะที่แตกต่างกัน แต่ตอนนี้ดูสิ่งที่เกิดขึ้น 

ถ้าผมพิมพ์ในแมวและคลิก CS50 ค้นหาและปล่อยให้ไป สังเกตเห็นฉันจะได้รับพา ไปที่เกิดขึ้นจริงของ Google ตอนนี้ Google จะเป็นเล็ก ๆ น้อย ๆ ที่น่ารำคาญในการที่พวกเขากำลัง ท้ายพารามิเตอร์เพิ่มเติม ถ้าคุณจะไปยัง URL นั่นคือสิ่งที่เกิดขึ้นทั้งหมด โดยอัตโนมัติใน Google ด้าน 

ส่วนหนึ่งที่สำคัญก็คือว่าฉันดูเหมือน ที่จะมีการสร้างคำขอนี้ที่นี่ และแน่นอนว่าเป็นสิ่งที่เกิดขึ้น เมื่อคุณมี HTML ที่ ลักษณะเช่นนี้นี้ เป็นประเภทของสัญกรณ์นักพัฒนาเว็บ พูดไปข้างหน้าและสร้างฟอร์ม ที่เมื่อมีการส่ง มันจะไปที่ URL นี้ และเมื่อ URL ที่ได้จัดให้มี ค่าสำหรับสิ่งที่ต้องการ Q, ไม่ได้ไปเพียงเพื่อให้ URL นี้ อันที่จริงให้ไปที่คำถาม เครื่องหมายและจากนั้น q = แมว ผนวกพารามิเตอร์ พารามิเตอร์ HTTP เช่นนั้น 

และเพียงเพื่อเป็นซุปเปอร์แม่นยำ สิ่งที่ถูกเหมาเอาตรงนี้ แต่ฉันจะเป็น explicit-- มากขึ้นคือ ว่าวิธีการที่ฉันต้องการใช้ คือการได้รับแทนที่จะเป็นสิ่งที่ชอบ โพสต์ซึ่งในที่สุดเราก็จะเห็น ดังนั้นในระยะสั้นเพียงโดยการทำความเข้าใจ HTML และใช้บางส่วนแท็กค่อนข้างง่าย ตอนนี้เราสามารถเริ่มต้นในการสร้าง ผู้ใช้ของเราเองหน้า อินเตอร์เฟซที่มีการค้นหา เครื่องยนต์ที่อยู่เบื้องหลังมัน 

แต่นี้แน่นอนคือน่าเกลียดสวย เพื่อให้ฉันจริงเปิดขึ้น รุ่นที่ดีกว่าเล็กน้อย นี่คือหนึ่งผมจัดทำขึ้น ล่วงหน้าที่มีความคิดเห็นบางส่วน แต่คุณจะเห็นว่าเราคือ สวยมากสร้างมัน ดังนั้นนี่คือพร้อมใช้งานออนไลน์แล้ว และฉันไม่เกิดขึ้นกับ preemptively ไปที่ https เพียงเพื่อให้มันง่าย 

และตอนนี้ขอเปิดขึ้น ย้ำต่อไปนี้ เป็นรุ่นที่ 1 แทน 0 สิ่งที่กระโดดออกที่คุณเป็นเล็กน้อย ที่แตกต่างกันในตัวอย่างนี้? 

ผู้ชม: [ไม่ได้ยิน] 

ใช่มีนี้ศูนย์จัดข้อความ นี้เป็นเพียงเล็กน้อยแปลกขึ้นที่นี่ แต่นี้เป็นจริงใหม่ และอาจจะคาดเดาสิ่งที่จะเกิดขึ้น ถ้าผมไปที่เบราว์เซอร์ของฉันตอนนี้ และเยี่ยมชมการค้นหา 1.html, มันเกือบจะเป็นสิ่งเดียวกัน แต่มันเป็นขั้นตอนที่ใกล้ชิดกับ มากขึ้นเป็นเล็ก ๆ น้อย ๆ สวย ก็ยังคงน่าเกลียด แต่สวยในการที่ อย่างน้อยทุกอย่างตอนนี้ศูนย์กลาง 

ดังนั้นมันจะเปิดออกว่าสิ่งที่ฉันใช้ เป็นภาษาอื่นที่เรียกว่าโดยสิ้นเชิง CSS แผ่น cascading สไตล์ และ CSS ตรงไปตรงมาเป็นชนิด ของในความเห็นส่วนตัวของฉัน ภาษาที่ได้รับการออกแบบอย่างทารุณ เป็นที่น่ารำคาญมากที่จะจำ ทุกรายละเอียดต่างๆ แต่มันเป็นสิ่งที่ stylizes เว็บทั่วโลกทั้งหมดในวันนี้ ฉันโกรธใครสักคน สิทธิ์ทั้งหมด จึงขอกลับไปที่นี่และดู วิธีการที่เรากำลังใช้จริงนี้ และมันจะเปิดออกอย่างน้อยก็เป็น จริงภาษาที่ง่ายสวย มันเป็นคู่ค่าที่สำคัญเพียงคุณสมบัติ และค่านิยมที่คุณสมบัติและค่า อันที่จริงนี่เป็นหนึ่ง สถานที่ให้บริการดังกล่าวและค่า 

ง่ายๆโดยการใช้รูปแบบ แอตทริบิวต์ในแท็กร่างกายของฉัน และให้ค่าเป็น ลำไส้ใหญ่คำพูดและคำอื่น หรือสถานที่ให้บริการและค่า ฉันสามารถส่งผลกระทบต่อความสวยงาม ของหน้าเว็บไม่ จำเป็นต้องโครงสร้างยัง, แต่ความสวยงามของมัน และเพียงแค่ Googling รอบฉันรู้ ที่แผ่น CSS, Cascading Style, สนับสนุนสถานที่ให้บริการที่เรียกว่า ข้อความชิดมีค่าสามารถ จะซ้ายขวาหรือศูนย์ตัวอย่างเช่น 

ดังนั้นตอนนี้เมื่อผมโหลด หน้านี้สิ่งที่ฉันไม่ได้รับ เป็นศูนย์กลางหน้า, แต่ยังคงน่าเกลียดสวย ลองไปข้างหน้าและเปิด ขึ้นรุ่นที่ 2 ของการค้นหา และตอนนี้สังเกตเห็นฉันได้ทำมากขึ้นเล็ก ๆ น้อย ๆ ขอให้สังเกตว่าที่นี่ภายในหัว แท็กสามารถมีได้มากกว่าชื่อ ในความเป็นจริงมีแท็กสไตล์ และนี่คือที่มันเพิ่งได้รับ เล็ก ๆ น้อย ๆ CSS เห็นยุ่งบางครั้ง 

ขอให้สังเกตว่าฉันดูเหมือนจะมีบางสิ่งบางอย่าง โครงสร้างที่มีลักษณะแตกต่างกันมาก แต่ที่นี่เป็นชื่อของ แท็กผมอยากจะเก๋ นี่คือเพื่อนเก่าของเราจะหยิก วงเล็บและวงเล็บปีกกาปิด แล้วที่นี่ก็คือ ทรัพย์สินและค่าของมัน 

ถ้าผมโหลดไฟล์นี้ search2.html, ผลลัพธ์ที่ได้คือเหมือนกัน แต่มันเป็นขั้นตอนที่มีต่อการออกแบบที่ดีกว่า โดยแฟออก CSS นี้ผมได้ ไม่ผสมปนเปกับ HTML ของฉัน และแน่นอนที่เราจะเห็นฉันสามารถ นำมาใช้ใหม่คุณสมบัติและค่านิยมเหล่านี้ ถ้าผมอยากจะให้อัดแน่นของ ชิ้นส่วนของหน้าเว็บของฉันเป็นศูนย์กลาง ผมไม่ต้องพิมพ์ style = ข้อความชิด ศูนย์ทั่วสถานที่ ฉันสามารถวางไว้ในสถานที่แห่งหนึ่ง บางทีชอบขึ้นที่ด้านบน 

แต่แม้น​​ี้ไม่ได้ออกแบบที่ดีที่สุด ในความเป็นจริงหนึ่งในสิ่งที่คุณจะได้เรียนรู้ ในขณะที่คุณใช้เวลามากขึ้นและมากขึ้นด้วย การเขียนโปรแกรมเว็บเป็นว่ายิ่งคุณสามารถ modularize สิ่งต่าง ๆ และสิ่งที่ปัจจัยออก เช่น h ไฟล์ให้เราสิ่งที่ปัจจัยออก ชอบ helpers.c ให้เราสิ่งที่ปัจจัยออก psets ไม่กี่สัปดาห์ที่ผ่านมา ในทำนองเดียวกันเราอาจจะ ต้องการที่จะบรรลุเป้าหมายนี้ 

เพื่อแจ้งให้ทราบในรุ่น สาม search.html ฉัน ทำความสะอาดหัว หน้าและเพียงแค่ใส่ ในเรื่องนี้แท็กการเชื่อมโยงซึ่ง ตรงกันข้ามกับชื่อ ไม่ให้เชื่อมโยงหลายมิติ มันเชื่อมโยงไปยังแฟ้มอื่นโดยวิธีการ href ที่มีค่าในกรณีนี้ คือการค้นหา-3.css ดังนั้นผมจึงรู้ว่าเรากำลังจะได้อย่างรวดเร็ว แต่ทั้งหมดที่ฉันทำคือประเภท ในการเคลื่อนย้ายสิ่งต่าง ๆ รอบ ผมขอเปิดการค้นหา 3.css มีมันคืออะไรจริงๆมัน ฉันเพียงแค่คัดลอกและวางมันลงไปใหม่ ไฟล์เหมือนเราเอาเรื่องสิ่งที่ออกมา เป็นไฟล์อื่น ๆ ก่อน และ result-- underwhelming-- สมบูรณ์ เป็นไปได้เหมือนกัน แต่เรากำลังย้าย toward-- ไม่มีก็ไม่ได้ โอ้ฉันรู้ว่าทำไม 

ดังนั้นจึงน่าจะเป็นข้อผิดพลาด และมันอยู่ในความรู้สึกบางอย่าง แต่ให้ฉันเปิดแท็บเครือข่ายของฉัน ผมขอโหลดหน้าเว็บ Ah ทำไม CSS ไม่ได้ถูกนำมาใช้? ดีไฟล์ CSS เหมือนกันมี จะเป็นโลกที่อ่านได้จึงจะพูด และมันก็เป็นที่ต้องห้ามในปัจจุบัน ดังนั้นให้ฉันทำ chmod + R ดาวจุด CSS-- whoops-- เราจุด CSS เป็นเพียง นามสกุลของไฟล์สำหรับไฟล์ CSS ตอนนี้ให้ฉันกลับไป เบราว์เซอร์และโหลดของฉัน ตกลงเล็ก ๆ น้อย ๆ ที่ดีกว่า 

ตอนนี้ให้ฉันทำสิ่งสุดท้ายที่หนึ่ง ในการค้นหา-4.html ผมมีรุ่นที่ผมคิดว่า เป็นวิธีที่เย็นแม้ว่าทางขึ้น ซับซ้อน ลองดูที่ผลครั้งแรก ปิดเพื่อให้เรามีห้องพักมากขึ้น การเปลี่ยนแปลงนี้ในการค้นหา-4, ใส่ 

และตอนนี้พวงของสิ่งที่จะแตก ฉันจะกลับไป ลงในไดเรกทอรีของฉันที่นี่ และตอนนี้ฉันแค่จะทำ chmod ของ + R บน file-- เพราะผมรู้ว่ามัน exists-- เรียกว่า logo.gif ซึ่งเป็นภาพ และโหลดตอนนี้ และ wow-- ดังนั้นตอนนี้ฉัน สวยใกล้ตรงไปตรงมา ที่จะชอบรุ่น 1999 ของ Google และ ตรงไปตรงมาในเวอร์ชั่น 2014 ของกูเกิล ใช่มั้ย? 

ดังนั้นตอนนี้ไปที่เว็บไซต์ของพวกเขา ท้ายที่สุดถ้าฉันค้นหาสำหรับแมว และแน่นอนมันเป็น แต่ผมทำอะไรที่แตกต่างกัน ในรุ่นนี้ 4? ดังนั้นเราจะไม่อาศัยอยู่มากเกินไปในที่นี่ คุณจะเห็นในปัญหา ตั้งเจ็ดในที่สุด แต่สังเกตเห็นผมทำบางสิ่ง 

ผมแนะนำ div แท็กซึ่งเป็นส่วน ในทำนองเดียวกันกับแท็กวรรค แต่ส่วนหนึ่งก็เหมือนกับที่นี่ ภูมิภาคท​​ี่มองไม่เห็นเป็นรูปสี่เหลี่ยมผืนผ้า ของหน้าจอ ขอให้มันไม่ซ้ำกัน ระบุท้ายเพียง เพื่อให้เราสามารถพูดคุยเกี่ยวกับ มันใน HTML ของเราที่อื่น ๆ นี่คือภาพรวมของหน้าเว็บอื่น รหัสที่มีความเป็นไปได้เนื้อหา มันเป็นเนื้อหาของหน้า และนี่คือส่วนหัวของหน้า 

ในคำอื่น ๆ ที่ฉันได้ เป็นหลักใน HTML am จิตใจ ดูหน้าเว็บนี้เป็น สามองค์ประกอบส่วนหัว ที่นี่มีรูปสี่เหลี่ยมผืนผ้าที่มองไม่เห็นนี้ เนื้อหาอยู่ตรงกลางแล้ว ส่วนท้ายลงมาด้านล่างได้ แม้ว่าเราจะไม่เห็นสิ่งเหล่านั้น เพราะผมต้องการที่จะอยู่ในหัวของฉัน หน้านี่หรือในแฟ้ม .css, ฉันสามารถใช้รูปแบบนี้ 

ส่วนหัวไม่ได้แท็ก มันเป็นรหัสเพื่อให้มันกลายเป็น ว่าด้วยการทำ #header, ตอนนี้ผมสามารถใช้อย่างใดอย่างหนึ่งหรือมากกว่า คุณสมบัติที่ส่วนหัว ฉันจะทำเนื้อหาเดียวกัน เหมือนกันสำหรับเนื้อหาที่นี่ 

ดังนั้นสำหรับตัวอย่างเช่นในส่วนท้าย, แจ้งให้ทราบล่วงหน้า ทั้งหมดของคุณสมบัติเหล่านี้ผมเพิ่ม และฉันรู้ว่าพวกเขาอยู่เพียงแค่การอ่าน ขึ้นบนเอกสารสำหรับ CSS ขนาดตัวอักษรเป็นไปได้ smaller-- ดังนั้นขนาดตัวอักษรบางอย่างที่สัมพันธ์กัน น้ำหนักเป็นไปได้ที่เป็นตัวหนา Margin-- พิกเซลหลายวิธี พูดไปรอบคือ 20 พิกเซล และมันจะเป็นศูนย์กลาง 

แต่ตอนนี้หน้าลักษณะเช่นนี้ ถ้าผมไม่พอใจกับ สำเนาของฉันมีสิทธิ ฉันจะทำสิ่งที่ชอบสีแดง และจากนั้นผมสามารถบันทึกนี้โหลด และตอนนี้ฉันได้เก๋ท้าย ดังนั้นนี่เป็นเพียงการกระทบถึงอำนาจ ของสิ่งที่คุณสามารถทำได้ในหน้าเว็บ ที่จะเปลี่ยนแปลงสิ่งต่างๆ 

และแม้กระทั่งเย็นกว่านี้ถ้าคุณต้องการ เพื่อกระตุ้นรอบกับเว็บไซต์ที่เกิดขึ้นจริง คุณไม่สามารถเปลี่ยนพวกเขาอย่างถาวร แต่ถ้าผมเปิดขึ้น Chrome ได้ตรวจสอบอีกครั้ง และผมก็ไม่ไปทางด้านซ้ายมือ ที่นี่ซึ่งแสดงให้เห็น HTML ของ Facebook, แต่แสดงให้เห็นทางด้านขวา ด้านซ้ายมือของ CSS ของมัน คุณทั้งสองสามารถและ เปลี่ยนแปลงสิ่งต่างๆได้ทันที เพื่อให้ฉันไปข้างหน้าและทำเช่นนี้ 

ให้ฉันไปข้างหน้าและการควบคุม คลิกที่คำสุ่มนี้ที่นี่ เข้าสู่ระบบและคลิกที่ตรวจสอบธาตุ โครเมี่ยมอย่างสะดวกกระโดดไป แท็ก h1 ว่า Facebook จะใช้ และสังเกตเห็นที่นี่ Facebook มีชนิดของขี้เกียจ ยากขนาดตัวอักษรกำหนดเป็นสถานที่ให้บริการที่นี่ 

ดังนั้นสิ่งที่เย็นว่าเป็น ว่าถ้าผมจะไปที่นี่ และพูดว่าโอ้, Facebook, ฉันไม่ชอบที่ 64 พิกเซล, ตอนนี้เราสามารถเปลี่ยน Facebook แน่นอนเรากำลังเพียงการเปลี่ยนแปลง สำหรับฉันบุคคลในขณะนี้ แต่นี่เป็นเพียงอีก เครื่องมือในชุดเครื่องมือของเรา ที่จะช่วยให้เราสามารถปรับแต่ง และคิดออกและวินิจฉัย ปัญหาในหน้าเว็บของเราเอง และเราจะไปกันมากกว่า ที่นี่ซึ่งเป็นสิ่งเดียวกัน ถ้าคุณอยากที่จะได้รับแฟนซีฉัน หมายความว่าตอนนี้จริงๆคุณสามารถกลายพันธุ์หน้า และทำสิ่งที่บ้า 

ดังนั้นทำไมนี้เป็นประโยชน์หรือไม่ ดีที่สุดเราไม่ จะต้องการที่จะเป็น ความสามารถในการสร้างหน้าเว็บที่ จะขับเคลื่อนด้วยปลายกลับของเราเอง ไม่ได้โดยเพียงแค่ Google และ จ้างปลายด้านหลังมี เราต้องการจริง ค่าตัวอย่างเช่น ของการดำเนินการของเครื่องมือค้นหาของเรา แอตทริบิวต์ที่จะไปไม่ได้ที่คนอื่น แต่สิ่งที่ต้องการ search.php, ที่ search.php อยู่บนเซิร์ฟเวอร์ของเราเอง ไม่ได้อยู่ในคนอื่น 

และเพื่อที่จะได้มีเราจริง ต้องแนะนำภาษาใหม่ เพื่อให้เราได้ดูแล้วที่ใหม่ ภาษาที่นี่หรือสองจริงๆ HTML และ CSS แต่พวกเขาจริงๆเป็นเพียง ภาษาโครงสร้างและความงาม พวกเขาไม่ได้เขียนโปรแกรม ภาษาต่อ และที่เกี่ยวกับเท่าที่เป็นทางการ เวลาที่เราจะใช้จ่ายกับพวกเขา เพราะเราจะเริ่มตอนนี้ เปลี่ยนไป PHP 

ดังนั้น PHP เป็นจริง การเขียนโปรแกรมภาษา มันเป็นภาษาสคริปต์ ในแง่ที่ว่ามันเป็น หมายถึงการเป็นน้ำหนักเบา กว่าสิ่งที่ต้องการ C. และมันก็เป็นภาษาที่ตีความ ซึ่งหมายความว่ามันไม่ได้รวบรวม ดังนั้นสั้นเป็นสิ่งที่ไม่ได้หมายถึง เมื่อเราใช้ภาษาเช่น C และเรามีการรวบรวมมันได้หรือไม่ มันหมายความว่าอะไรที่จะ รวบรวมซอร์สโค้ด C? ผู้ชม: [ไม่ได้ยิน] เดวิดเจลัน: พูดอีกครั้งหรือไม่ ผู้ชม: [ไม่ได้ยิน] เดวิดเจลันเพอร์เฟ มันเปลี่ยนมันเป็นเลขฐานสอง มันเปลี่ยนมันเป็นเลขศูนย์และคน จากแหล่งที่มาที่แท้จริงของภาษาอังกฤษอย่าง และจากนั้นเราสามารถทำได้จริง ใช้เลขที่และคน โดยผ่านพวกเขาผ่าน CPU โดยการดับเบิลคลิกที่ไอคอน หรือใช้คำสั่ง 

PHP และ Python และ Ruby และ Perl และ JavaScript และอัดแน่นของอื่น ๆ ภาษาที่จะตีความ ภาษาซึ่งเป็นที่จะบอกว่า คุณไม่ได้รวบรวมไว้ แต่คุณให้อาหารพวกเขาเป็น input เพื่อ โปรแกรมที่เรียกว่าล่าม และล่ามว่า ซึ่งคนอื่นเขียน อ่านบนรหัสต้นฉบับของคุณลงล่าง จากซ้ายไปขวาและเพียงแค่ตำ เส้นเหล่านั้นและทำในสิ่งที่คุณพูด 

ดังนั้นถ้าคุณพบ บรรทัดที่กล่าวว่าการพิมพ์ มันไม่จำเป็นต้องแปลงพิมพ์ ไปที่ศูนย์สอดคล้องและคน มันก็มีล่ามเช่นนี้ สภาพใหญ่ถ้าบอกว่า ถ้าการเรียนการสอนของโปรแกรมเป็น พิมพ์แล้วทำต่อไป ดังนั้นจึงตีความมันเพียง โดยชนิดของเหตุผล ผ่านสิ่งที่คุณบอกให้ทำ 

และ PHP เป็นหนึ่งในภาษาเหล่านี้ และ PHP ปีที่ผ่านมาได้รับการออกแบบ ได้อย่างแม่นยำสำหรับการเขียนโปรแกรมเว็บ และมันก็เป็นครั้งแรก ภาษายุ่งเลอะเทอะมาก และแน่นอนมีขนาดใหญ่ ปริมาณของโค้ด PHP ที่ไม่ดีออกมี แต่ภาษาตัวเอง ได้ครบกำหนดปีที่ผ่านมา มากเสียจนตอนนี้ก็ จริงขั้นตอนต่อไปที่ยอดเยี่ยม pedagogically จาก C เพราะมันเป็น เพื่อให้เคราะห์ร้ายที่คุ้นเคยกับทุกอย่าง คุณได้เห็นเพียงแค่ในไม่กี่สัปดาห์ที่ผ่านมา 

หนึ่งความแตกต่างเริ่มต้นเราจะเห็น คือไม่มีหน้าที่หลักอีกต่อไป เมื่อคุณเริ่มต้นการเขียนโค้ดก็เพียง จะได้รับการดำเนินการไม่ว่าอะไร ในขณะที่เราจะเห็นในช่วงเวลา ในขณะเดียวกันนี่คือสิ่งที่ ตัวแปรที่มีลักษณะเช่นใน PHP มันเป็นเรื่องที่แตกต่างกันเพียงเล็กน้อย แต่แทบจะไม่ 

ใน PHP มีไม่พิมพ์ strong มีการพิมพ์เป็นสัปดาห์, ซึ่งก็หมายความว่า เป็นชนิดข้อมูลเช่นสตริง และหมายเลขและสิ่งอื่น ๆ แต่คุณจะไม่รำคาญระบุ สิ่งที่พวกเขาอีกต่อไป PHP ตัวเลขออกสำหรับคุณ เครื่องหมายดอลลาร์เป็นเพียงการตัดสินใจ ว่าคนที่ทำ PHP ปี ที่ผ่านมาดังกล่าวว่าตัวแปรใด ๆ ใน PHP เพียงแค่เริ่มต้นด้วยเครื่องหมายดอลลาร์ มันเป็นความจริงชนิดที่มีประโยชน์ในการที่ มันกระโดดออกที่คุณน้อยมาก 

แต่หลังจากนั้นนี้ เป็นเงื่อนไขใน PHP มีอะไรที่แตกต่างกันเมื่อเทียบกับ C? เคล็ดลับคำถามที่ไม่มีอะไร ซึ่งเป็นจริงดีจริงๆ สำนวนที่บูลีนใน 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, มุมมองรูปแบบการควบคุม ซึ่งถ้าคุณได้ทำโปรแกรม ก่อนที่ในหลามหรือ ทับทิมหรืออื่น ๆ คุณ จะได้รู้ของทีมนี้ด้วย ทางรถไฟและ Django และไม่ชอบ แต่ถ้าคุณไม่คุ้นเคยกับ นี้ด้วยคุณจะเห็น ว่านี้เป็นจริงเป็นธรรมชาติมาก เป็นส่วนหนึ่งของการแยกตัวประกอบ และการจัดเรียงของการออกแบบ ของรหัสที่เราได้ ได้ทำใน C. เรากำลังจะไปตอนนี้ ใช้บางส่วนของบทเรียนเหล่านั้นไปยัง PHP เพื่อที่ว่าในท้ายที่สุดเราเป็น ดำเนินการเว็บไซต์ของเราเอง และถ้าคุณจัดเรียงของ สะกดจิตหรือประหลาดใจ ที่เรากำลังจะทำ ทุกอย่างรวดเร็ว ตระหนักดีว่าเกือบทุก ภาคการศึกษาเกือบ 90% ของ CS50 นักเรียนรวมถึงผู้ที่ ที่ไม่เคยตั้งโปรแกรมก่อน สิ้นสุดการทำโครงการสุดท้ายที่ จะขึ้นอยู่กับการเขียนโปรแกรมเว็บ และเพื่อให้คุณจะเห็นว่าผลตอบแทน อยู่ในระดับสูงในสัปดาห์ที่ผ่านมา ดังนั้นเราจะเห็นคุณในวันจันทร์ที่แล้ว 

ลำโพง 1: และตอนนี้ลึก ความคิดโดย Daven อัม ตารางแฮช 

[หัวเราะ]