[เล่นเพลง] เดวิดเจลัน: นี่คือ CS50 และ นี้คือจุดเริ่มต้นของสัปดาห์ที่ 7 ดังนั้นต้อนรับการกลับมา และคุณอาจจะจำได้ว่า ปัญหาตั้งสี่ มีบิตของเกมล่าสมบัติที่ สำหรับบางรางวัลนิยายโดย หลังจากที่คุณกู้ภาพของ พนักงานทั้งที่นี่และใน New Haven, คุณกำลังถูกท้าทายที่จะหาเป็นจำนวนมากของ บรรดานักวิทยาศาสตร์คอมพิวเตอร์ที่คุณสามารถ และเราได้มีทั้ง พวงของการส่ง คิดว่าฉันต้องการแบ่งปันไม่กี่ กับคุณที่นี่ในวันนี้ และเราจะโพสต์สิ่งเหล่านี้ออนไลน์ แต่โดยเฉพาะอย่างยิ่งผมต้องการที่จะ ดึงดูดความสนใจของคุณ to-- ดีหนึ่ง แซมอยู่ในค่อนข้างน้อยของพวกเขา โดยทั่วไปวางตัวเช่นนี้ แต่ปรากฏว่าเป็นของ เช้านี้ผู้ชนะ เป็นคนหนึ่งชื่อเคนกับ 24 ของพนักงานที่ถูกจับในกล้อง หรือไม่กี่มากขึ้นเมื่อคุณใช้เวลาในการ พนักงานหลายบัญชีในภาพ ภาพที่นี่คือเคนต่อไป แมรี่ในนิวเฮเวน ตอนนี้เคนแม้ว่าจะเปลี่ยน ออกเป็นบิตของกรณีมุม ที่ไม่ได้เกิดขึ้นยังก่อน แต่กลับกลายเป็นว่ามันไม่ได้เกิดขึ้น กับผมที่จะใส่พิมพ์ดีในปัญหา ตั้งสี่ที่บอกว่าพนักงาน ไม่เหมาะสมสำหรับรางวัลนิยาย เพราะเคนเป็นของหลักสูตรซึ่งเป็นหนึ่งใน ช่างภาพที่เกี่ยวกับเจ้าหน้าที่ของเรา ตอนนี้กับที่กล่าวว่าเขา แต่เดิมเขียนผมที่จะพูด กรุณาอย่าโพสต์ภาพถ่ายออนไลน์เหล่านี้ ผมคิดว่าส่วนใหญ่ เพราะส่วนใหญ่ของภาพถ่าย ช่างภาพที่มีลักษณะนี้เอา สิ่งเล็กน้อยเช่นนี้ และไม่ชอบ แต่เคนต้องการให้ฉันเพื่อสร้างความมั่นใจให้คุณ ว่าเขาเป็นช่างภาพที่ดีมาก เขาเป็นมืออาชีพที่เขาใช้เวลา ภาพที่ไม่เบลอ ที่ดีในการมุ่งเน้นและเขา เอาค่อนข้างน้อยของพนักงานของเราเอง แต่แทนที่จะเพียงรับทราบ เคนสิ่งที่เราคิดว่าเราจะทำอย่างไร คือไปผ่านรายการ นักเรียนที่เกิดขึ้นจริงที่ส่ง และปรากฎว่ามีการแลนซ์ 15 รูป ณ เช้าวันนี้ เป็นผู้ชนะของเรา และภาพที่นี่คือแลนซ์กับโคลทัน กับ Skaz กับตัวเองและกับแซม แต่แล้วก็จะเปิดออกว่าเป็นของ 11:46 ดังนั้นเพียงแค่นิด ๆ หน่อย ๆ ที่ผ่านมา ฉันเดินกลับไปที่อีเมลของฉันและพบว่า ที่เรายังไม่เคยเป็นหนึ่งในการส่งมากขึ้น โดยนักศึกษาที่ชื่อบอน มีอีเมลกล่าวว่าเพียงแค่นี้ จะไม่โกหกผม การทำเช่นนี้ในชั้นเรียน และแล้วดำเนินการต่อไปเพียงแนบ 14 ภาพถ่าย, ขี้อายคนหนึ่งของแลนซ์ 15 แต่ในภาพของบอนนี่ก็จะเปิด ออกเป็นหลายพนักงานแซม ในหมู่พวกเขาดังนั้นสิ่งที่เราคิดว่าเรา จะทำคือการรับทราบทั้งสองคนนี้ ดังนั้นในนอกจากจะได้รับ Dropbox พื้นที่ที่ทุกคนที่เข้าร่วม ได้รับทั้งสองส่วนจะยัง ได้รับอาหารกลางวันที่รองรับที่ดีสำหรับพวกเขา และส่วนของพวกเขา เพื่อนมาในสัปดาห์นี้ และเพื่อให้คุณจะได้ยินจากเรา แลนซ์และบอนนี่เกี่ยวกับเรื่องนั้น ดังนั้นขอแสดงความยินดีกับพวกเขาใหญ่ ตอนนี้บรรดาผู้ที่จะ เช่นอาหารกลางวันมากขึ้นโดยทั่วไป รู้ว่าอาหารกลางวัน CS50 ในเคมบริดจ์ และนิวเฮเวนเป็นวันศุกร์นี้ ไปที่เว็บไซต์ RSVP เฉือน CS50 ของ และตอนนี้คำในการสัมมนา เพิ่มเติม curricularly ดังนั้นเราจึงกำลังใกล้จะ จุดของภาคการศึกษา ที่คุณควรจะเริ่มต้น คิดเกี่ยวกับโครงการสุดท้าย และในความเป็นจริงในเพียงเล็กน้อยจะ ที่เรียกว่าข้อเสนอก่อนจะเป็นเพราะ ข้อเสนอก่อนดังนั้นจะหมายถึง จะมีผลกระทบต่ำสวยและจริงๆ เพียงแค่โอกาสสำหรับ คุณสามารถเขียนบันทึกสั้น เพื่อนการเรียนการสอนของคุณเพื่อบอก เขาหรือเธอสิ่งที่คุณคิดว่าคุณ อาจต้องการที่จะทำโครงการสุดท้ายของคุณ ตอนนี้นักเรียนหลายคนจบลง ทำเว็บตามโครงการสุดท้าย และแน่นอนเราเพียง ตอนนี้เมื่อสัปดาห์ที่แล้วในเรื่องนี้ และนอกเหนือจากการดำน้ำในการเขียนโปรแกรมเว็บ ดังนั้นไม่ต้องกังวลถ้าคุณ อย่างมีความคิดว่า คุณจะสร้างความคิดที่ว่า คุณอาจมีในใจของคุณ นี้เป็นจริงเพียงฟังก์ชั่นการบังคับ เพื่อให้ได้ความคิดและพูดคุย ลุยกับคุณเกี่ยวกับเรื่อง แต่การที่จะช่วยให้คุณกับที่และ กับโครงการสุดท้ายในที่สุด รู้ว่า CS50 มีประเพณี ของการเสนอการสัมมนา และสิ่งเหล่านี้เป็นตัวเลือกมือบน หรือบรรยายขึ้นอยู่กับโอกาส เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับหัวข้อที่มี เสริมเล็ก ๆ น้อย ๆ ในการเรียนการสอนของ หลักสูตร แต่อย่างไรก็ตามยอดเยี่ยม วัสดุในการผลักดันโครงการสุดท้าย และเพื่อให้เป็นรายการที่ พนักงาน CS50 นี่ในนิวเฮเวน ได้มาด้วยสำหรับ ในปีนี้เกี่ยวกับ iOS การเขียนโปรแกรม, Android การเขียนโปรแกรมพัฒนาเกม และอัดแน่นของเครื่องมือเพิ่มเติม และภาษาและเทคนิค เพื่อให้ตาบนเว็บไซต์ของ CS50 และในขณะเดียวกันถ้าคุณต้องการที่จะ ลงทะเบียนความสนใจในใด ๆ เหล่านี้ ไป CS50 ทะเบียนเฉือน และเราก็จะติดตามเกี่ยวกับการ วันและเวลาเที่ยวบินและสถานที่ และทุกอย่างส่วนใหญ่จะ everything-- เป็นสตรีมและยังมีความต้องการ หลังจากที่ถ้าคุณไม่สามารถทำให้มันเป็นจริง โดยไม่ต้องกังวลใจต่อเรา ซ้ายปิดครั้งสุดท้ายกับ GET และนี่เป็นเหมือนข้อความที่เป็น ภายในซองเสมือนจำ ที่เราส่งผ่านจากเราเตอร์เราเตอร์ ระหว่างเราเตอร์และเว็บเบราเซอร์เว็บ เซิร์ฟเวอร์ และข้อความที่มอง บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้ นี่เป็นข้อความที่เป็นความลับมากขึ้นว่า เป็นจริงภายในของซองจดหมาย เขียนบนแผ่นกระดาษที่มี บรรทัดแรกกล่าวว่าแท้จริงได้รับการเฉือน และเช่นเดียวกับการตรวจสอบสุขภาพจิตที่ สิ่งที่เฉือนแสดง? เฉือนหมายความว่าเมื่อ ขอเว็บไซต์ได้หรือไม่ คุณขอมันตลอดเวลา ส่วนใหญ่เวลาที่คุณเยี่ยมชมเว็บไซต์ของคุณ ไม่ต้องพิมพ์จริงในชื่อไฟล์ คุณอาจจะเพียงแค่ไปที่ Facebook.com, ป้อน gmail.com หรือชอบ และสิ่งที่เป็นตัวแทนเฉือน? ไฟล์อะไร? หรือสิ่งที่หน้าโดยเฉพาะ? ดัชนีใช่ ดังนั้นหน้าเริ่มต้น ดังนั้นถ้าคุณไม่ได้ระบุไฟล์ ชื่อที่เราจะเริ่มต้นที่จะเห็น คุณจริงเพียงแค่ขอ ให้ฉันหน้าเริ่มต้นของ Facebook หรือให้ฉันกล่องจดหมายของฉันหรือให้ ผมหน้าเริ่มต้นของข่าว บนเว็บไซต์ของซีเอ็นเอ็นหรือชอบ และเซิร์ฟเวอร์จากนั้นตอบสนองต่อการ ข้อความที่กับสิ่งที่ เช่นนี้ว่าใช่ฉัน พูดรุ่น HTTP 1.1 200 ซึ่งเป็นสถานะ รหัสที่เราไม่ค่อยมนุษย์ ไม่เคยเห็นเพราะมันเป็นสิ่งที่ดี เพราะมันหมายถึงการตกลงการร้องขอ และได้รับการจัดการอย่างถูกต้อง และประเภทของเนื้อหา เห็นได้ชัดในการตอบสนอง ค่อนข้างบ่อย แต่ไม่เคยข้อความ และโดยเฉพาะ, HTML และที่จริง ที่เรามองไปที่วันนี้ ดังนั้นในความเป็นจริงฉันจะไป ไปข้างหน้าและเปิดเบราว์เซอร์ ฉันจะใช้ Chrome คุณสามารถใช้ เบราว์เซอร์ส่วนใหญ่ในสัปดาห์ที่ผ่านมา โดยทั่วไปเราแนะนำให้โครเมี่ยม เพราะมันเป็นโดยเฉพาะอย่างยิ่ง ที่ดีสำหรับนักพัฒนาซอฟต์แวร์ ก็มีจำนวนมากที่สร้างขึ้นใน เครื่องมือที่ทำให้มันง่ายขึ้น ในการพัฒนาไม่เพียง แต่ HTML และ CSS, สิ่งที่เราจะเริ่มต้นพูดคุยเกี่ยวกับวันนี้ แต่ยังมีภาษาอื่น ๆ ได้เป็นอย่างดี และฉันจะไปข้างหน้าและไป to-- ฉันจะไปควบคุมการคลิกหรือขวา คลิกที่ใดก็ได้บนหน้าเว็บ และฉันจะไปตรวจสอบธาตุ และฉันจะปรับแต่งของฉัน หน้าจอเพียงเล็กน้อยที่นี่ ผมขอย้ายนี้ไปที่ด้านล่าง ดังนั้นนี่คือสิ่งที่เรียกว่า ตรวจสอบของ Chrome ดังนั้นนี้เป็นเหมือนการแก้จุดบกพร่อง เครื่องมือที่สร้างขึ้นในโครเมี่ยม ทั้งหมดที่คุณมีอยู่แล้วนี้ ถ้าคุณได้รับการใช้โครเมี่ยม และมันช่วยให้คุณเห็นสิ่งที่เกิดขึ้น ในใต้ฝากระโปรงของหน้าเว็บบาง ดังนั้นลองใช้จริง ดูที่นี้ดังต่อไปนี้ มันมีคุณสมบัติทาง และเราดูแลเกี่ยวกับวันนี้ แต่มีแท็บเหล่านี้มากกว่าที่นี่ องค์ประกอบเครือข่ายแหล่งที่มา ระยะเวลาและบางสิ่งอื่น ๆ ฉันจะไปคลิกที่ เครือข่ายสักครู่ และมันก็เป็นเพียงเล็กน้อยที่ครอบงำ ได้อย่างรวดเร็วก่อนที่นี่ แต่สิ่งที่ผมจะทำคือการให้ ฉันลดความซับซ้อนของมันนิด ๆ หน่อย ๆ ฉันจะเปิด บันทึกแสงเพื่อที่จะเป็นสีแดง และฉันจะบอกว่ารักษาเข้าสู่ระบบ และนี่เป็นเพียงเล็ก ๆ น้อย ๆ สิ่งที่ฉันคิดออก ในช่วงเวลาที่จะบันทึก ทุกอย่างที่เกิดขึ้นในเบราว์เซอร์ และตอนนี้ฉันจะไป เพื่อ http://facebook.com ที่จริงขอทำ www การวัดที่ดีเฉือน เข้าสู่ ดังนั้น URL ที่หลาย คุณอาจจะได้เข้าเยี่ยมชม และตอนนี้เว็บของ Facebook หน้าขึ้นมาที่ด้านบน และแล้วทั้งกลุ่ม สิ่งที่บินโดยที่ด้านล่าง และในความเป็นจริงก็ปรากฎว่า เมื่อคุณเยี่ยมชม Facebook.com, คุณไม่ได้เพียงแค่การทำร้องขอ HTTP หนึ่ง ปรากฎว่าไป Facebook.com ส่ง 41 ซองจดหมายเหล่านั้น แต่ละที่มีการร้องขอรับของตัวเอง ตามที่ระบุไว้แม้ว่าหลังจอ ที่นี่ที่ด้านล่างของหน้าจอ มันแสดงให้เห็นว่าแท้จริงของฉัน เบราว์เซอร์ที่ทำ 41 การร้องขอ และในจำนวนนั้นก็โอน 861 กิโลไบต์และจะเอาเหตุผลบางอย่าง มากที่สุดเท่าที่แปดวินาที ดาวน์โหลดทั้งหมดที่ เพื่อให้เป็นจริงแปลก ๆ ว่าเว็บไซต์ของ Facebook จะใช้เวลาที่ นาน แต่ดังนั้นไม่ว่าจะในกรณีนี้ ตอนนี้ทั้งหมดนี้ผมไม่สนใจจริงๆ เกี่ยวกับการยกเว้นการร้องขอสูงสุด ถ้าอย่างนั้นเราไปที่หนึ่งนี้ได้ที่นี่ และแจ้งให้เราซูมออกเพื่อรอสักครู่ และแจ้งให้เราซูมเข้าเกี่ยวกับเรื่องนี้ ดังนั้นสิ่งที่ผมเคยทำที่เหลือแม้ว่า มีจำนวนมากที่เกิดขึ้นมากกว่าที่นี่ คือผมได้เน้น Facebook.com แล้ว แจ้งให้ทราบว่าผมเลื่อนลง เลื่อนลงเลื่อนลง เพื่อขอส่วนหัว และคุณจะเห็นว่ามีการแสดงโครเมี่ยม ฉันเป็นหลักเนื้อหาภายใน ขอผมทำ มันไม่ได้เป็นรูปแบบค่อนข้างเดียวกัน ทาง แต่แจ้งให้ทราบว่ามีการกล่าวถึงการได้รับ สังเกตเห็นมีการกล่าวถึงโฮสต์ Facebook.com เส้นทางหรือเฉือน ซึ่งเป็นไฟล์ที่ผมร้องขอ และแล้วถ้าผมเลื่อน สำรองเราจะจริง เห็นว่าสิ่งที่ Facebook กลับ ให้ฉันเป็นส่วนหัวทั้งหมดของเหล่านี้ ดังนั้นภายในของซองจดหมายเสมือนที่ แน่นอนจำนวนมากของคู่ค่าที่สำคัญ คำลำไส้ใหญ่แล้วค่า คำลำไส้ใหญ่และค่า เหล่านี้เรียกว่าส่วนหัว และมีรายละเอียดเพิ่มเติมได้ที่นี่ทางกว่า เราจริงเกี่ยวกับการดูแลในขณะนี้ แต่นี้เป็นครั้งที่สองเพื่อ สุดท้ายลงที่นั่น สังเกตเห็นว่าเซิร์ฟเวอร์ Facebook.com ของ พูดจริงๆนี่มา HTML ข้อความบางส่วน ดังนั้นทั้งหมดนี้คือการพูด ที่ว่าเมื่อคุณขอเว็บ หน้าจากเบราว์เซอร์ได้ เซิร์ฟเวอร์เซิร์ฟเวอร์ที่ตอบสนอง พร้อมซองจดหมายของตัวเอง ภายในซึ่งเป็นข้อความ ในคำอื่น ๆ , HTML Hypertext Markup Language ซึ่งเป็นภาษาอื่น ที่เราแนะนำในวันนี้ ว่ามนุษย์หรือคอมพิวเตอร์สร้าง เพื่อที่จะใช้หน้าเว็บ โดยเฉพาะให้ดูที่นี้ ฉันจะกลับไปในขณะนี้ ไปยังเว็บไซต์ของ Facebook และฉันจะไปเพียง คลิกควบคุมหรือคลิกขวา และคลิกที่หน้าดูแหล่งที่มา และแม้ว่าคุณจะไม่ได้ใช้โครเมี่ยม IE สามารถทำเช่นนี้, Firefox สามารถทำเช่นนี้ ซาฟารีสามารถทำเช่นนี้แม้ว่าเมนู ตัวเลือกอาจมีลักษณะที่แตกต่างกันเล็ก ๆ น้อย ๆ และนี่คือ HTML ที่มาร์คและ ของ บริษัท ที่ Facebook ได้เขียน และร่วมกันภาษาที่นี่ ดำเนินการสีฟ้าและสีขาวหน้า ที่เราเห็นช่วงเวลาที่ผ่านมา ตอนนี้เป็นบิตครอบงำ แต่ถ้าเรามองขึ้นไปด้านบนซ้ายเรา จะเริ่มต้นที่จะเห็นรูปแบบบาง ดูเหมือนว่ามีจำนวนมาก ของวงเล็บมุมเปิดเหล่านี้ แล้วมี HTML คำหลักนี้ ที่นี่เปิดอีก วงเล็บมุมและศีรษะ นี่คือถ้าเราเลื่อนลง และลงและลงฉัน จะไปข้างหน้าและลอง เพื่อค้นหาบางสิ่งบางอย่าง ไม่มีทางที่มากกว่าด้านขวา ที่นี่เป็นที่ร่างกายวงเล็บเปิด และจำได้จากที่ผ่านมา เวลาที่เรานำเสนอ ว่าหน้าเว็บที่ง่ายที่สุด ที่มนุษย์อาจเขียน อาจมีลักษณะบางสิ่งบางอย่างเล็ก ๆ น้อย ๆ เช่นนี้ แท็กเปิดหัวเปิด แท็กแท็กชื่อเปิด ชื่อแล้วปิดหัวปิดเปิด แท็กร่างกายข้อความบางส่วนปิดร่างกาย ปิด HTML แต่หยุดที่นี่เพื่อรอสักครู่ รหัสนี้แม้ว่าคุณได้ ไม่เคยเขียนมาก่อน แต่ก็ยังไม่เข้าใจ สิ่งที่เกิดขึ้นมีลักษณะที่ดีงาม ขวาก็สะอาดมาก มันเป็นอย่างดีมีสไตล์ จำนวนมากของการเยื้องและพื้นที่สีขาว Facebook ไม่ได้ ดังนั้นทำไม Facebook เป็นอย่างมาก ที่เลวร้ายยิ่งกว่าที่ฉันในการเขียน HTML ได้ไหม? เห็นได้ชัดว่า ขวานี้เป็นอย่างหนึ่ง จากห้าสำหรับรูปแบบ มีเหตุผลที่น่าสนใจคือ สำหรับพวกเขาที่จะตัดมุมเหล่านี้ สิทธิทั้งหมดเพื่อให้พวกเขาไม่ต้องการที่จะ ทำให้มันง่ายขึ้นสำหรับคุณที่จะอ่านมัน ดังนั้นในความรู้สึกบางอย่างที่พวกเขากำลัง obfuscating มันหนีการจัดเรียงของมัน อย่างน้อยเพื่อความสุนทรีย์ ว่ามันยากสำหรับ MySpace ที่จะไปและตัดออกของพวกเขา หน้าแรกและ HTML สำหรับมัน ปรากฎว่ามีโปรแกรม แต่รวมถึงโครเมี่ยม เราสามารถทำความสะอาดนี้ขึ้นซุปเปอร์ได้อย่างง่ายดาย ดังนั้นจึงไม่มากที่เป็นเหตุผล อะไรที่อาจจะเป็นสาเหตุ ใช่ ใช่ค่าใช้จ่ายข้อมูลพื้นที่สีขาว คุณหมายถึงอะไร? ใช่ว่า ถ้าคุณกดปุ่ม Tab จำนวนมากหรือ แถบพื้นที่พิจารณาผลกระทบ ดังนั้นทุกคีย์บนแป้นพิมพ์ของคุณเป็น [ไม่ได้ยิน] แสดงเป็นหนึ่งไบต์ ดังนั้นคิดว่ามาร์คหรือใด ๆ ของ devs วันนี้ฮิตสเปซบาร์เพียงครั้งเดียว ในเพจ HTML ที่ แสดงให้เห็นถึงหน้าแรกของ Facebook และ Facebook มีจำนวนมาก ของผู้ใช้วันนี้ ดังนั้นคิดว่าหน้าแรกของ Facebook เข้าชมโดยพันล้านคนในวันนี้ และคนที่มี Facebook กดแถบพื้นที่เพียงครั้งเดียว ดังนั้นหนึ่งไบต์เพิ่มเติม พันล้านร้องขอ วิธีการที่ข้อมูลมากขึ้น Facebook โอนผ่านทางอินเทอร์เน็ต เพราะมีคนตี สเปซบาร์บนแป้นพิมพ์ของเขาหรือเธอ? พันล้านไบต์หรือหนึ่งกิกะไบต์ ข้อมูลจะถูกส่งจากเซิร์ฟเวอร์ของ Facebook เพื่อให้คนทั่ว โลกไม่มีเหตุผลที่ดี ตอนนี้ที่เป็นเพียงหนึ่งในพื้นที่ ลองคิดดูหากเราจริงทำความสะอาดนี้ สิ่งขึ้นและเยื้องมันและเพิ่ม จำนวนมากที่มีพื้นที่สีขาวและ อักขระแท็บและช่องว่าง คุณท้ายกิกะไบต์ใช้จ่าย หากไม่ได้ดินไบต์ของพื้นที่ และเพื่อให้ซุปเปอร์ทั่วไปใน โลกที่เกิดขึ้นจริงในการพัฒนาเว็บ คือการ minify รหัสของคุณ และในที่สุดเราก็จะเห็น วิธีที่คุณอาจทำเช่นนี้ แต่วันนี้เราจะเริ่มต้นการเขียนโค้ด ที่จริงสามารถอ่านได้โดยมนุษย์เรา มันจะเปิดออก แต่ถ้าคุณกลับไป ที่จะใช้เครื่องมือนี้ใน Chrome ตรวจสอบองค์ประกอบ ก่อนหน้านี้เราอยู่บนแท็บเครือข่าย แต่กลับกลายเป็นว่าถ้าคุณไปที่ แท็บองค์ประกอบสิ่งที่คุณเห็นจริง เป็นของ Chrome พิมพ์สวย รุ่นของ HTM​​L เดียวกันกับที่ ดังนั้นเราจึงได้ 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 ทุกท่านที่เป็นที่จะพูดว่า มีเซิร์ฟเวอร์เว็บของคุณเอง และเว็บเซิร์ฟเวอร์เป็นเพียงชิ้นส่วน ซอฟแวร์ที่มีจุดมุ่งหมายในชีวิต คือการให้บริการขึ้นหน้าเว็บ ฟังสำหรับการร้องขอจากเบราว์เซอร์และ ตอบสนองกับซองจดหมายเสมือนเล็ก ๆ น้อย ๆ ภายในซึ่งเป็น เนื้อหาที่ผมเคยเขียน ดังนั้นเว็บเซิร์ฟเวอร์นี้ จริงฟรีและเปิดแหล่งที่มา ที่ไหนเปิดแหล่งที่มาก็หมายความว่า ซอฟต์แวร์ที่คนอื่นมี เขียนไว้ว่าเราทุกคนสามารถ เห็นจริงและดาวน์โหลดและแม้กระทั่ง เปลี่ยนรหัสแหล่งที่มา และก็เรียกว่าอาปาเช่ และเราได้ทำให้มันง่ายขึ้นเล็กน้อย ใช้ในการ CS50IDE โดยเรียกมันว่าอาปาเช่ 50 เพื่อที่จะสามารถจริง เข้าใจดังต่อไปนี้ ฉันจะบอกว่าอาปาเช่เริ่มต้นที่ 50 และแล้วฉันแค่จะบอกว่าจุด และเราเห็นบางส่วนบ้าง ข้อความลับบอกว่า การตั้งค่า [เอกสารของ Apache? กลุ่ม?] บ้านอูบุนตู, สิ่งที่เป็น พื้นที่ทำงานเฉือน เริ่มต้นเว็บเซิร์ฟเวอร์ Apache 2 ประสบความสำเร็จ ดังนั้นเรื่องยาวสั้นผม มีเพียงแค่ผลักปุ่ม และหันบนเว็บเซิร์ฟเวอร์ที่เป็นตอนนี้ ฟังบนอินเทอร์เน็ตบนพอร์ต TCP 80 ที่อยู่ที่เฉพาะเจาะจง และกล่าวว่านี่และ นี้จะเปลี่ยนตาม ชื่อผู้ใช้และปัจจัยอื่น ๆ ของคุณ แต่แจ้งให้ทราบตอนนี้ถ้าฉันคลิกนี้ IDE50 จุด jharvard และอื่น ๆ และ เพื่อแจ้งให้ทราบว่าที่ทุกเวลานี้ สำหรับที่ผ่านมาหลาย ๆ สัปดาห์ที่ผ่านมาคุณอาจมี สังเกตเห็นว่าชื่อผู้ใช้ของคุณเอง ถูกฝังอยู่ในมือข้างขวาด้านบน มุมของ CS50IDE และที่จริงได้รับทั้งหมดนี้ เวลาที่อยู่ที่คุณสามารถ เยี่ยมชมไฟล์ทั้งหมดของคุณผ่านทางเว็บ จนถึงขณะนี้ก็ยังไม่สำคัญ, เพราะใน C คุณโดยทั่วไป ต้องการสิ่งที่ทำงานใน ขั้วไม่ได้บนเว็บ แต่วันนี้เราจะเริ่มต้น เขียนรหัสตามเว็บ ที่เราไม่ต้องการ เข้าถึงได้ URL ที่สาธารณะ ดังนั้นสิ่งที่ฉันกำลังจะไป ทำคือการคลิก URL นี้ และแจ้งให้ทราบว่าผมเห็นอย่างเป็นธรรม ดัชนีน่าเกลียดราย​​การไดเรกทอรี, แต่สิ่งที่ไฟล์กระโดดออกที่คุณอาจจะ? Hello.html นั่นเป็นเพราะฉันบันทึก แฟ้มในพื้นที่ทำงานของฉัน และสิ่งที่ผมเคยบอก Apache เว็บเซิร์ฟเวอร์ คือมองในไดเรกทอรีพื้นที่ทำงานของเดวิด และให้ใครใน โลกเห็นไฟล์เหล่านั้น และแน่นอนถ้าผมตอนนี้ คลิกที่ hello.html, ผมเห็นภายในแท็บนี้ว่าแฟ้มที่ สังเกตเห็นตอนนี้ทำเมฆ 9 บางสิ่งบางอย่างเล็ก ๆ น้อย ๆ ที่เป็นประโยชน์สำหรับเรา ภายใน IDE CS50 แจ้งให้ทราบมี ทันใดนั้นแถบที่อยู่ นั่นเป็นเพราะแม้ว่าเราจะ ใช้ Chrome เพื่อเยี่ยมชม CS50IDE, ภายในของ CS50IDE เป็นของตัวเอง รุ่นของเว็บเบราเซอร์ในขณะนี้ และอื่น ๆ มากกว่า สิ่งที่ซับซ้อนเช่นนี้ ฉันจะไปข้างหน้า และเพียงแค่คัดลอก URL นี้ ฉันจะไปข้างหน้าและเพียง เปิดหน้าต่างโครเมี่ยมของตัวเอง ดังนั้นจึงมีความมหัศจรรย์ที่นี่ไม่มีไม่มี CS50IDE ฉันแค่ไปวางที่แท้จริง URL ของฉันเจฮาร์วาร์และกด Enter และ voila ตอนนี้ฉันและ ในทางทฤษฎีทุกคน บนอินเทอร์เน็ตถ้าฉันได้รับการกำหนดค่า สิทธิ์ที่เหมาะสม สามารถเยี่ยมชมไฟล์นี้ ดังนั้นตอนนี้ถ้าผมบอกว่า hello.html, voila มี หน้าเว็บ underwhelming อย่างไม่น่าเชื่อของฉัน ถ้าอย่างนั้นเราจะตรวจสอบสติอย่างรวดเร็ว เพราะทุกที่ เป็นชุดความคิดขึ้น และเราได้จริงไม่ได้จริงๆ สอนวิธีการเขียน HTML ต่อ คำถามใด ๆ ป่านนี้ เกี่ยวกับสิ่งที่เพิ่งเกิดขึ้น? ใช่ ไม่ CS50 เจ้าของหน้าเว็บเหล่านี้หรือไม่ ในสิ่งที่รู้สึก? คำถามที่ดี. ดังนั้น CS50 ของเจ้าของ CS50.io. เราได้ซื้อแน่นอนว่าชื่อโดเมน และโดยธรรมชาติของพวกคุณ เข้าสู่ CS50IDE, คุณทุกคนได้รับสิ่งที่เรียกว่าโดเมนย่อย ดังนั้น IDE50-ลันหรือ IDE50-Rob.CS50.io, ที่อยู่เฉพาะของคุณภายใน ชื่อโดเมนของเรา ดังนั้นสำหรับวัตถุประสงค์ของหลักสูตร คุณมีที่อยู่ที่ไม่ซ้ำกันของคุณเอง แต่เราได้ง่ายโดยสิ่งที่ ซื้อโดเมนระดับบนสุด CS50 จุด I / O และแล้วทุกคนอื่นเป็น ภายในนั้นเพื่อที่จะพูด และเราจะกลับมาที่ ในสองสามสัปดาห์ที่ผ่านมาอาจจะเป็น โดยเฉพาะอย่างยิ่งโครงการสุดท้าย เวลาเมื่อบางส่วนของคุณ อาจต้องการที่จะได้รับชื่อโดเมนของคุณเอง เป็นจริงค่อนข้าง ตรงไปตรงมา ทั้งหมดขวา ดังนั้นตอนนี้ขอทำเช่นนี้ ฉันจะกลับไปสู่ CS50IDE ที่ไฟล์ของฉันตอนนี้ hello.html, ไม่ได้ทั้งหมดที่น่าสนใจที่ ฉันต้องการที่จะทำอะไรบางอย่าง เล็ก ๆ น้อย ๆ ดีกว่าไปกว่านั้น ดังนั้นฉันจะทำอะไรเช่นนี้ ผมขอเปิด paragraphs.html ดังนั้นนี่คือไฟล์ที่ผมเขียนล่วงหน้า ที่ด้านบนของมันเช่น เคยเรามีความคิดเห็น แต่ในรูปแบบ HTML, ความเห็น มีลักษณะที่แตกต่างกันเล็ก ๆ น้อย ๆ On line ที่สามและสาย 14 คุณ ดูไวยากรณ์สำหรับการเริ่มต้นการแสดงความคิดเห็น และสิ้นสุดการแสดงความคิดเห็น แต่ไม่มีสิ่งใน ระหว่างเรื่องการทำงาน มันเป็นเพียงบันทึกไปที่ มนุษย์สิ่งที่เกิดขึ้นที่นี่ และเช่นเดียวกับสติอย่างรวดเร็ว ตรวจสอบถ้าผมเลื่อนลง สิ่งที่ใหม่ที่เห็นได้ชัด แท็กที่เราได้แนะนำให้รู้จัก? แท็กป่านนี้เราเคยเห็นมีการเปิด วงเล็บ HTML, หัวชื่อและร่างกาย แต่สิ่งที่เห็นได้ชัดใหม่ตอนนี้หรือไม่ ใช่ดังนั้นพี แท็กพีหรือแท็กวรรค และจากนั้นผมเริ่มต้นเพียงแค่ยืมบาง ข้อความภาษาละตินจะเป็นวรรคของฉัน เพราะสิ่งที่ผมอยากจะ แสดงให้เห็นเป็นวิธีที่คุณอาจจะ เป็นตัวแทนของย่อหน้าของข้อความในรูปแบบ HTML และเพื่อให้สิ่งที่เริ่มต้นที่จะเกิดขึ้น ที่นี่เป็นที่มีอยู่แล้ว รูปแบบการพัฒนา และแจ้งให้เราไปข้างหน้าและทำเช่นนี้ ครั้งแรกที่ผมขอปิด Apache และฉันจะบอกได้ว่ามันจะเริ่มต้นที่ตัวเอง อีกครั้งภายในของแหล่งที่มาของวันนี้เจ็ด ไดเรกทอรีเมตร เพื่อที่ฉันมีการเข้าถึงทุกอย่าง และตอนนี้ถ้าผมกลับไป รายการไดเรกทอรีนี้ สังเกตเห็นฉันเห็นแฟ้มจากทุกวัน และคุณจะเห็นใน ชุดปัญหาต่อไปเราจะ ให้คำแนะนำ สำหรับการทำตรงนี้ ถ้าผมเปิด paragraphs.html นี้อาจ รวมทั้งมีลักษณะเหมือนภาษาการเขียนโปรแกรม กับคุณหากคุณไม่ได้พูดหรืออ่านภาษาละติน แต่นี้เป็นเพียงสามย่อหน้า ของข้อความที่มีการทำเครื่องหมายขึ้นในรูปแบบ HTML และแจ้งให้ทราบวรรค แบ่งระหว่างพวกเขา เพราะมันจะเปิดออก และแม้ว่าคุณ อาจจะมีแนวโน้มที่จะทำเช่นนี้ ในขณะที่ในโลกแห่งความจริง ถ้าคุณต้องการที่จะนำเส้น แบ่งระหว่างสิ่งที่ คุณอาจจะค่อนข้างง่าย ทำเช่นนี้และกดบันทึก และตอนนี้ถ้าผมโหลดที่นี่แจ้งให้ทราบล่วงหน้า ทุกอย่างที่เพียงพร่าเลือนด้วยกัน ในเวลาเพียงหนึ่งหยดของข้อความ เพราะ HTML เป็นชนิดของภาษาใบ้ มันมีความหมายที่จะใช้ในการดังกล่าว วิธีการที่เบราว์เซอร์จะมีเพียง ไม่ชัดเจนสิ่งที่คุณบอกว่าจะทำอย่างไร ดังนั้นถ้าคุณไม่ได้บอกว่า ให้ฉันย่อหน้าใหม่ คุณไม่ได้ไปดูย่อหน้าใหม่ และในความเป็นจริงว่า เบราว์เซอร์จะทำ คือแม้ว่าคุณจะตีใส่ ขอพูดอีกครั้งและอีกครั้ง และอีกครั้งที่เคลื่อนไหวทางข้อความนี้ ลงบนหน้าจอแล้วบันทึก แล้วโหลดเบราว์เซอร์ที่เป็นไป ที่จะยุบทั้งหมดที่พื้นที่สีขาว เข้าเพียงหนึ่งเดียวที่มองเห็นช่องว่าง ทั้งหมดขวา เพื่อให้เป็นแท็กวรรค และเพื่อให้สิ่งที่รูปแบบ การพัฒนาที่นี่? ดีก็น่าจะเป็นกรณีที่ HTML คือทั้งหมดที่เกี่ยวกับการเริ่มแท็ก และสิ้นสุดแท็ก และสิ่งที่เป็นแท็กหรือไม่? ดีก็เป็นเพียงก้อนของไวยากรณ์ วงเล็บเปิดคำหลัก วงเล็บปิดเป็นแท็ก หรือแท็กเริ่มต้น และจากนั้นเมื่อคุณอยู่ ทำแสดงด้วยตัวคุณเอง ในขณะที่คุณทำกับวรรค คุณจะทำอย่างไรเพื่อที่จะพูดตรงข้าม แต่ตรงข้ามเป็นไม่มากไปข้างหลัง คุณเพียงแค่คำนำหน้าแท็กเดียวกัน ชื่อที่มีการทับเช่นนี้ ทั้งหมดขวา ดังนั้นไม่ได้ทั้งหมดที่น่าตื่นเต้น และในความเป็นจริงเราไม่ได้ทำ เว็บที่น่าสนใจมากขึ้น เกิดอะไรขึ้นถ้าผมอยากจะทำ สิ่งที่ใหญ่กว่าและเป็นตัวหนา? ดังนั้นจึงปรากฎว่าที่นี่คือตัวอย่าง ใน headings.html ที่อยู่ในร่างกายของฉัน ฉันมีแท็ก H1, H2, H3, สี่ห้าหรือหกซึ่งทั้งหมดนี้ ดูเหมือนความลับสวย แต่ถ้าผมไปเปิดนี้ ตัวอย่างเช่นลองดู Headings.html ดังนั้นเบราว์เซอร์โดยเริ่มต้นสามารถให้คุณข้อความ ที่ใหญ่และหนาขนาดที่แตกต่างกัน H1 มีขนาดใหญ่ H6 มีขนาดเล็กแล้ว ทุกอย่างอื่นในระหว่าง เพื่อให้เป็นที่น่าสนใจ แต่ยังคง ไม่ได้จริงๆเว็บฉันรู้ว่า เกิดอะไรขึ้นถ้าเราต้องการที่จะฉันมี บางสิ่งบางอย่างเช่นรายการ . ดังนั้นนี่คือรายการที่มีสัญลักษณ์ของ สามของบ้านของฮาร์วาร์ วิธีที่คุณไม่ไปเกี่ยวกับการทำเช่นนี้? ดีดูที่ list.html และที่นี่เราเห็น นิด ๆ หน่อย ๆ ของ funkiness แต่ขอพิจารณาสิ่งที่เกิดขึ้น ดังนั้นขึ้นอยู่กับสิ่งที่คุณได้เห็นเพียงแค่ UL ย่อมาจากรายการเรียงลำดับ รายการเรียงลำดับเพียงหมายถึงสัญลักษณ์ มีจำนวนไม่ได้ นอกจากนี้ยังมีบางสิ่งบางอย่างที่เรียกว่า รายการสั่งซื้อซึ่งเป็น OL ที่ป้าย จากนั้น LI, รายการเป็นสิ่งที่มันหมายถึง และเพื่อให้โดยอัตโนมัติ ตัวเลขทุกอย่างให้คุณ แต่อีกครั้งทั้งหมดของการเยื้องของฉัน และพื้นที่สีขาวเป็นเพียงเพื่อประโยชน์ของฉัน เบราว์เซอร์ไม่ จริงที่เกิดขึ้นในการดูแล ดังนั้นแม้ว่าคุณจะไม่สามารถ ทำเช่นนี้เพียงเพื่อให้มีความชัดเจน คุณไม่ควรแม้ว่า เบราว์เซอร์จะยังคง สามารถที่จะเข้าใจมันได้ดี ฉันกดปุ่มโหลดในของฉัน เบราว์เซอร์ผมคลิกโหลด และไม่มีการเปลี่ยนแปลงที่เกิดขึ้น เพราะยังคงเป็นเบราว์เซอร์ ทำสิ่งที่ผมบอกว่าจะทำอย่างไร ทั้งหมดขวา ดังนั้นนี่คือข้อความทั้งหมดเพียง ตอนนี้ขอทำสิ่งที่น่าสนใจมากขึ้น ฉันจะไปข้างหน้าและ ยืมบางส่วนของ HTM​​L นี้ ฉันจะไปข้างหน้าและ สร้างไฟล์ใหม่ที่นี่ และเราจะเรียก rick.html นี้ เรามีสัดส่วน บางสิ่งบางอย่างที่ใช้ เรียกว่าม้วนกองหญ้าแห้งในครั้งนี้ ระดับปีนี้ผมไม่ทราบว่า มันก็เกิดขึ้นอินทรีย์ และตอนนี้ก็มีออกจากการควบคุม ดังนั้นฉันแค่จะไปกับมัน และถ้าผมไปที่ Google ภาพและ Rick Astley หากคุณไม่ได้รู้ว่าทำไมเราทำ นี้เพียงแค่อ่านข้อมูลเกี่ยวกับวิกิพีเดีย ทุกครั้งที่คุณคลิกที่ลิงค์ คนที่ได้รับการหัวเราะที่ใดที่หนึ่ง และให้ฉันไป ahead-- มี ที่เราจะไปขอดูภาพนี้ ดังนั้นที่นี่เรามี ภาพใน Google รูปภาพ และสมมติว่านี่คือ สมควรได้ทุกที่บนอินเทอร์เน็ต ดังนั้นฉันจะสมมติก็ OK สำหรับฉัน ที่จริงใส่ลงในหน้าเว็บของฉัน ฉันจะไปข้างหน้า และคัดลอก URL รูปภาพ และตอนนี้ถ้าผมกลับไปที่คลาวด์ 9 ขอดูสิ่งที่ฉันสามารถทำที่นี่ ดังนั้นนี่คือเพียงหน้าเว็บ นี่คือ Rick Astley, ฮ่า ๆ , ฉันจะกลับไปในขณะนี้ เบราว์เซอร์ของฉันโหลดและน่าสนใจ ที่ไหนริกคืออะไร? ดังนั้นให้ฉันดูสิ่งที่เกิดขึ้น ที่จริงผมกำลังจะไป หลอกเหมือนที่ผมไม่ได้ทำ [ไม่ได้ยิน] ทำให้เขาอยู่ในที่นี่ เราจะกลับมาที่ว่าในช่วงเวลาที่ ดังนั้นนี่คือ rick.html ดังนั้นที่ไม่ Rick Astley ดังนั้นมันจะเปิดออกที่เราสามารถทำได้ เพิ่มจริงเขาที่นี่ นี่คือ Rick Astley ฉันจะบอกให้ฉันภาพที่มี แหล่งที่มาคือ URL ที่ผมคัดลอกมาซึ่ง เห็นได้ชัดว่าเป็นความสุข บางสิ่งบางอย่างวันเกิดหรืออื่น ๆ และตอนนี้ผมกำลังจะไป ปิดแท็กเช่นนี้ ดังนั้นนี่คือการตัดยาวสุด แต่สังเกตเห็นว่าทั้งหมดที่ฉันได้ ทำคือภาพวงเล็บเปิด แหล่งที่มาที่มีคุณลักษณะของการนี​​้ และมันก็เป็น URL ที่นานจริงๆ และในตอนท้ายมากแจ้งให้ทราบนี้ ฉันทำทำไมเฉือนวงเล็บมุม แทนเช่นทุกแท็กอื่น ๆ มีวงเล็บเปิด IMG ปิดวงเล็บ? เพียงแค่ใช้เวลาเดาแม้ว่าคุณ มีความคุ้นเคย แต่อย่างใด กับ HTML ก่อน ดังนั้นจึงเป็นวิธีการที่จะปิด คำสั่ง แต่ทำไม มันไม่ได้จริงๆทำให้ใช้งานง่าย ความรู้สึกที่จะทำบางสิ่งบางอย่างเล็ก ๆ น้อย ๆ verbose เช่นภาพปิด? ใช่ ใช่ ความหมายเพียงแค่มีความรู้สึกของความไม่ การเริ่มต้นและสิ้นสุดของภาพภาพ มันมีอย่างใดอย่างหนึ่งหรือไม่ ดังนั้นจึงไม่ได้ทำให้ความรู้สึกที่จะออกจากช่องว่าง สำหรับสิ่งอื่นที่อยู่ภายในของภาพ คุณก็ไม่สามารถทำเช่นนั้น และเพื่อไวยากรณ์ โดยทั่วไปจะเป็นเพียง ที่จะทำทับภายใน ของแท็กเปิดหรือแท็กเริ่มต้น และกดบันทึกแล้ว ดังนั้นถ้าตอนนี้ผมโหลดไฟล์นี้ตอนนี้ ฉันมีหน้าเว็บที่ดีการปรุงอาหารที่นี่ และเราจะทำได้อย่างแน่นอน จริงๆรบกวนคน โดยการฝังแทน เช่นการเชื่อมโยง YouTube และในความเป็นจริงตลอดเวลา คุณได้ไปที่เคยไปยัง YouTube, และแจ้งให้เราตั้งใจจริง rick ม้วนตัวเองที่นี่ ดังนั้นริกม้วน ดังนั้น rick roll-- ฉันจะไปที่นี่ [เล่นเพลง] ตกลงคนคนหนึ่งที่ชอบที่ ดังนั้นสังเกตเห็นตลอดเวลานี้ถ้าคุณ คลิกที่ลิงค์แบ่งปันคุณแน่นอน ได้รับ URL ที่คุณสามารถจริง ฝังในอีเมลหรือภาพทางนิติวิทยาศาสตร์ หรือปัญหาในการตั้งค่าหรือภาพนิ่ง และตอนนี้ถ้าผมแทนคลิกที่ฝัง สังเกตเห็นว่าเวลานี้สิ่งนี้ ได้รับมี ฉันจะไปข้างหน้าและคัดลอกนี้ และเพียงเพื่อให้เราสามารถดูได้ที่ดีกว่าฉัน ไปวางลงในโปรแกรมแก้ไขข้อความของฉัน ขอให้สังเกตว่าสิ่งที่ YouTube ได้รับการบอกคุณ เวลาที่คุณเข้าเยี่ยมชมทุกคน วิดีโอ YouTube ถ้าคุณ ต้องการฝังวิดีโอของคุณ หน้าเว็บเพียงแค่คว้านี้ ดังนั้นนี่เป็นอีกหนึ่ง แท็กที่เรียกว่า iframe หรือกรอบเส้น ดังนั้นมันก็ดูเล็ก ๆ น้อย ๆ ซับซ้อนกว่าคนอื่น ๆ ทั้งหมด ดังนั้นจึงปรากฎว่าภาพที่ และเห็นได้ชัดแท็กแท็ก iframe ใช้สิ่งที่เรียกว่าคุณลักษณะ และนี่ก็เป็นอีกหนึ่ง ชิ้นส่วนของไวยากรณ์ในรูปแบบ HTML นอกจากนี้แท็กของ ชื่อวงเล็บเปิดชื่อแท็ก คุณสามารถควบคุมการทำงานของแท็ก โดยมีทั้งกลุ่มของแอตทริบิวต์ เท่ากับค่า แอตทริบิวต์เท่ากับค่า และอื่น ๆ เช่น YouTube จะบอกเรา ถ้าคุณต้องการความกว้างของวิดีโอนี้ ที่จะเป็น 420 พิกเซลและความสูง ที่จะเป็น 315 พิกเซลที่ วิธีการที่คุณแสดงมันออกมาในรูปแบบ HTML แหล่งที่มาของวิดีโอเป็นไป เป็นไปได้ว่า URL ของ YouTube ยาว แล้วบางสิ่งอื่น ๆ เช่นชายแดนกรอบเป็นศูนย์ เพื่อที่ว่าอาจจะหมายความว่ามี ไม่มีเส้นขอบรอบ ๆ สิ่ง อนุญาตให้เต็มหน้าจออาจ แสดงว่าผู้ใช้ สามารถคลิกที่ปุ่มและ จริงแบบเต็มหน้าจอวิดีโอ ดังนั้นถ้าผมต้องการที่จะเป็น ที่น่าประทับใจที่นี่ในจุดริก HTML, แทนที่จะใช้แท็กภาพให้ ฉันลบที่แทนวางนี้ และตอนนี้โหลด และตอนนี้ที่นี่เราไปอีกครั้ง สิทธิทั้งหมดที่เพียงพอ ทั้งหมดขวาดังนั้นผมจะพยายาม ยากที่จะไม่ทำอย่างนั้นอีกครั้ง ดังนั้นสิ่งที่บางส่วนของประเด็นที่นี่? ดังนั้น HTML, เป็นที่น่าเกลียดเป็นหน้าเว็บเหล่านี้ มีความเป็นจริงง่ายๆสวย มันไม่ใช่ภาษาการเขียนโปรแกรม แต่ไม่ได้มีฟังก์ชั่น แต่ไม่ได้มีลูป แต่ไม่ได้มีเงื่อนไข ทั้งหมดก็คือมีหลายสิบ แท็กที่แตกต่างกันแต่ละที่ มีศูนย์หรือมากกว่าคุณลักษณะ และในความเป็นจริงสิ่งที่เกี่ยวกับความสนุกสนาน HTML ที่คุณเริ่มต้นที่จะดำน้ำใน คือว่ามันสอนตัวเองมาก ทั้งหมดก็จะเป็นความเข้าใจ ของกรอบทั่วไปของ HTM​​L อะไรคือสิ่งที่แท็กคืออะไรแอตทริบิวต์ วิธีการทำคุณจริงกำหนดค่าหน้าเว็บ ดังต่อไปนี้ และทุกสิ่งทุกอย่างที่เป็นจริงผลที่ได้ การมองในการอ้างอิงออนไลน์ หรือ googling วิธีการที่จะทำบางอย่าง เทคนิคหรือที่เราเคยเห็น มองไปที่แหล่งที่มาของ Facebook รหัสกำลังมองหาที่เว็บไซต์ ที่คุณชอบที่มันเป็นรหัสแหล่งที่มาและ ทำความเข้าใจวิธีการพัฒนามี สิ่งที่วางจริงออก ดังนั้นเราจึงสามารถทำภาพได้เป็นอย่างดี และในความเป็นจริงเราไม่ได้ช่วงเวลาที่ผ่านมา ให้ฉันไปข้างหน้าและเพียงแค่แสดงให้คุณเห็น นี่คือบางตัวอย่างรหัส ถ้าคุณเคยต้องการที่จะเห็นแมวไม่พอใจ ดังนั้นสังเกตเห็นว่าฉันสามารถ มีแท็กรูปภาพที่นี่ และฉันมีความคิดเห็นดังกล่าวข้างต้นนั้น ฉันมีทางเลือก ข้อความสำหรับการเข้าถึง ดังนั้นคนที่ใช้หน้าจอ ผู้อ่านสำหรับเหตุผลของการมองเห็น สามารถจริงแล้วมีของพวกเขา อ่านหน้าจอบอกว่าแมวไม่พอใจ เพราะถ้าพวกเขาไม่สามารถ เห็นภาพที่พวกเขา อย่างน้อยสามารถมีเครื่องคอมพิวเตอร์ของพวกเขา บอกพวกเขาด้วยวาจาว่ามันคืออะไร และแหล่งที่มาของไฟล์ที่เป็น cat.jpeg ดังนั้นในความเป็นจริงถ้าผมอยากจะ ฉลาดได้รับสิ่งที่ฉันจะมี done-- ผมสัญญาว่าจะไม่ไป Rick Astley ดังนั้น ฉันจะ google แมวแทน และถ้าผมไปที่ Google รูปภาพ ที่นี่และเราจะถือว่า ว่านี่คือภาพของแมวของฉัน สมมติว่าฉันมีการควบคุมการคลิก หรือคลิกขวาที่เกี่ยวกับเรื่องนี้โดยบังเอิญ น่าขนลุก และ cat.jpeg ฉันจะ เพื่อประหยัดบนเดสก์ทอปของฉัน ตอนนี้ผมขอกลับไปเมฆ 9 ขอให้สังเกตว่าที่นี่ผมสามารถ ไปที่อัปโหลดไฟล์ท้องถิ่น และถ้าผมคว้านี้ ไฟล์ cat.jpeg แจ้งให้ทราบล่วงหน้า ที่ฉันสามารถลากและ วางลงในระบบคลาวด์ 9 และมันจะตะโกนใส่ฉันที่นี่ เพราะเราได้อยู่แล้ว คุณได้รับไฟล์ cat.jpeg ที่ แต่มันเป็นเรื่องง่ายสุดที่จะ คว้าภาพที่คุณได้ ที่นำมาจาก Facebook หรือ Flickr หรือชอบ และที่จริงลากและวางไว้ เป็นเมฆที่ 9 แล้วทำให้มัน ส่วนหนึ่งของส่วนตัวของคุณเอง เว็บไซต์หรือปัญหาที่เกิดขึ้น ตั้งเจ็ดหรือแปดที่เราจะเห็นทันที และจากนั้นเมื่อคุณ ในที่สุดแมวเยี่ยมชมที่ สมมติว่าผมดาวน์โหลดว่าแมวเดียวกัน แจ้งให้ทราบล่วงหน้า that-- ที่น่ารัก สิ่งที่คุณจะเห็นก็คือ บางสิ่งบางอย่างเช่นใบหน้าที่นี่ ดังนั้นแฟ้มที่คุณ การอ้างอิงที่อยู่ในหน้าเว็บ สามารถเป็นได้ทั้งในท้องถิ่นของคุณเอง บัญชีหรือระยะไกลบนเซิร์ฟเวอร์อื่น เช่นในกรณีของริค ภาพ Astley นิด ๆ หน่อย ๆ ที่ผ่านมา ดังนั้นสิ่งที่ else-- อื่นที่เราสามารถทำอะไรที่นี่? ดังนั้นลองมาดูที่ต่อไปที่ คุณจะรู้ว่าสิ่งที่ชนิดของเย็น? เราได้ป่านนี้รับการทำ หน้าเว็บแบบคงที่มาก ฉันต้องการสิ่งเครื่องเทศขึ้นดังต่อไปนี้ ฉันต้องการที่จะให้เครื่องมือค้นหาของตัวเอง ดังนั้นเพื่อให้เครื่องมือค้นหาที่ขอ ไปข้างหน้าและเริ่มต้นการทำเช่นนี้ ฉันจะไปข้างหน้าและสร้าง ไฟล์ใหม่ที่เรียกว่า search.html และเราได้ prefabed รุ่นออนไลน์ ขออภัย อย่าวางลงในหน้าต่าง terminal ของคุณ รุ่นสำเร็จรูปออนไลน์ และฉันจะเริ่มต้นดังต่อไปนี้ ดังนั้นนี่คือจุดเริ่มต้นของ ไฟล์ที่เรียกว่า search.html ฉันจะบันทึกไว้ใน ไดเรกทอรีแหล่งที่มาของวันนี้ ฉันจะเรียกการค้นหานี้ ที่จริงแล้วเราจะทำให้ดีขึ้น CS50 ค้นหาและแบรนด์ก็จริง และตอนนี้ผมกำลังจะบอกว่า สิ่งที่ต้องการค้นหา H1 CS50 และจากนั้นก็ลงที่นี่ H2 เร็ว ๆ นี้ และเพียงเพื่อปะยางรถ, H1 และ H2 หมายถึงสิ่งที่ตามลำดับ? ใช่ดังนั้นใหญ่และหนาและ ไม่เป็นใหญ่ แต่ยังคงเป็นตัวหนา ดังนั้นถ้าฉันบันทึกนี้และไปกว่าที่นี่ เรามาดู search.html ไฟล์ สิทธิทั้งหมดและหนึ่งนี้ เป็น right-- [ไม่ได้ยิน] รอ. เดวิดสับสน โอ้ก็มีสิทธิ เดวิดเป็นคนงี่เง่า ตกลง. ดังนั้นจึงเป็น ดังนั้นการค้นหา CS50 เร็ว ๆ นี้ ดังนั้นตอนนี้เรามาสังเคราะห์ สิ่งที่เราทำเมื่อสัปดาห์ที่แล้ว ที่เราพูดคุยเกี่ยวกับ กลศาสตร์ที่ต่ำกว่าระดับของ HTTP และความคิดใหม่ ๆ เหล่านี้ ของ HTM​​L ซึ่งเป็นเพียง ภาษามาร์กอัปที่คุณนี้ เบราว์เซอร์บอกว่าจะทำอย่างไร และใช้เครื่องมือค้นหาของเราเอง ดังนั้นแทนที่จะเพียง กล่าวว่าในเร็ว ๆ นี้ผม จะแนะนำ สิ่งที่เรียกว่าแท็กรูปแบบ และในรูปแบบนี้ผมกำลังจะไป มีบางอย่างเช่นเขตการป้อนข้อมูล และชื่อของท่านนี้ สนามผมจะเรียกมันว่าคิว และชนิดของช่องใส่นี้ ฉันจะบอกว่าเป็นเพียง "ข้อความ" และช่องข้อความที่เราจะ เห็นเป็นเพียงกล่องข้อความ และดังนั้นจึงไม่รู้สึกที่นี่จะมี อะไรภายในของมันที่จุดนี้ และดังนั้นฉันเพียงแค่ไป เพื่อปิดแท็กกับว่า ไปข้างหน้าเฉือนที่เหมาะสมในแท็กของตัวเอง แล้วฉันกำลังจะไป มีการป้อนข้อมูลอีกทางหนึ่ง ประเภทอินพุตเท่ากับส่ง แล้วฉันกำลังจะไป ปิดอันนี้เกินไป และตอนนี้ฉันจะไปกลับมาที่นี่ และแล้วเราเห็น แม้จะน่าเกลียดสวยฉัน มีจุดเริ่มต้นของ หน้าการค้นหาของตัวเองที่นี่ ในความเป็นจริงให้ฉันพยายามที่จะ ทำความสะอาดนี้ขึ้นเล็กน้อย ปรากฎว่าใน การป้อนข้อมูลที่นี่ฉันจะมี แอตทริบิวต์อื่นที่เรียกว่าตัวยึด และผมอาจจะเห็นบางสิ่งบางอย่างเช่นคำหลัก หรือมากขึ้นโดยเฉพาะแบบสอบถามสำหรับ q และแจ้งให้ทราบตอนนี้ฉันมี ชนิดของข้อความสีเทานี้ ที่หายไป ทันทีที่ฉันเริ่มพิมพ์ แต่ก็อาจเป็นสิ่ง คุณเคยเห็นในหน้าเว็บอื่น ๆ ฉันไม่ชอบปุ่มส่ง ดังนั้นฉันจริงที่เกิดขึ้นเพื่อให้ ปุ่มส่งค่าของการค้นหา และตอนนี้ถ้าผมโหลดแจ้งให้ทราบว่า ปุ่มของฉันกลายเป็นชื่อการค้นหา คุณจะรู้ว่าฉันทำไม่ได้จริงๆ เช่นโลโก้ที่นี่ ดังนั้นกำเนิดของ Google ตัวอักษร ฉันต้องการที่จะเติมชีวิตชีวานี้ขึ้นอีก ดังนั้นการค้นหา CS50 ผมขอสร้างโลโก้ของตัวเอง ที่มีลักษณะดี ดังนั้นตอนนี้ให้ฉันบันทึกนี้ as-- มา มันอยู่ที่ไหนจะไปไหม ที่นั่น ตกลง. ที่ไม่ได้รับมัน บันทึกเป็น. เบราว์เซอร์โง่ ยืนอยู่ข้างเรากำลังจะไป แก้ไขปัญหานี้และทุกครั้ง เราจะไปที่นั่น. ทั้งหมดขวา ขอโทษ วันหยุด. ตอนนี้ขี้ขลาด ออกจากแบบเต็มหน้าจอ ทั้งหมดขวา ตอนนี้เหมือนปกติ คนบันทึกภาพเป็น logo.gif ตอนนี้ฉันจะไปลงใน CS50IDE และ ฉันจะคว้าเพียงแค่โลโก้ ฉันจะลากไปไว้ใน แหล่งที่มาของฉันเจ็ดไดเรกทอรี ไฟล์ที่มีอยู่แล้วผมตกลงกับที่ ดังนั้นฉันจะแทนที่ เพราะผมมีมันอยู่แล้ว และตอนนี้ฉันจะได้รับการกำจัดของนี้หรือไม่? ลองไปข้างหน้าและทำที่นี่ แหล่งที่มาของภาพเท่ากับ logo.gif ปิด บันทึก และตอนนี้ถ้าผมกลับไปที่การค้นหาของฉัน หน้าตอนนี้ก็กำลังมองหาที่ดีงาม สิทธิทั้งหมดดังนั้นจึงมีไม่ได้ ทำสิ่งที่มีประโยชน์มากทีเดียว ในความเป็นจริงให้ฉันลองค้นหา สำหรับแมวและดูสิ่งที่เกิดขึ้น แมว ประณามมัน มันไม่เพียง แต่ทำงานเห็นได้ชัด ดังนั้นสิ่งที่เป็นชิ้นส่วนที่สำคัญ ที่หายไปที่นี่? ขวาแม้ว่าคุณจะไม่ทราบว่า HTML ใด ๆ ผมได้เริ่มต้นการทำเครื่องหมายแบบฟอร์มโทรศัพท์ และฉันได้บอกว่ามันว่าจะได้รับปัจจัยการผลิต ให้ฉันกล่องข้อความและปุ่มส่ง สิ่งที่เห็นได้ชัดว่าเป็นชิ้นส่วนที่ขาดหายไป? สมมติว่าเราต้องการที่จะได้รับจริง สิ่งนี้ทำงานอย่างถูกต้อง เราต้องทำอย่างไร? เรามีความจำเป็นที่จะใช้ปลายกลับ ฐานข้อมูลหรือเครื่องมือค้นหาตัวเอง และที่จะใช้เวลา มากทั้งเวลาตรงไปตรงมา ดังนั้นอย่าลืมสิ่งที่เราทำครั้งสุดท้าย ดังนั้นหากคุณค้นหาบางสิ่งบางอย่างใน Google และคุณได้ล่วงหน้าปิด การเรียกคืนการค้นหาทันที เพื่อให้ฉันปิดว่า เพื่อที่ว่านี้จริง พฤติกรรมเช่นเบราว์เซอร์ที่โรงเรียนเก่า ถ้าตอนนี้ผมค้นหาสิ่งที่ชอบแมว จำสิ่งที่ URL ที่ดูเหมือนว่า มันเป็นความลับสวย แต่ฝังตัวอยู่ในที่นั่น การเรียกคืนคือการค้นหาเฉือน เครื่องหมายคำถามคิวเท่ากับแมว และนั่นก็ดูเหมือนจะให้ฉัน ทั้งกลุ่มของผลการค้นหา เพื่อให้คุณรู้ว่าสิ่งที่ฉันจะทำอย่างไร ฉันจะยืม Google สำหรับแค่นาที ฉันจะไปมากกว่า ที่นี่และผมกำลังจะบอกว่า ที่รูปแบบการดำเนินการนี​​้หรือ ปลายทางเพื่อที่จะพูด แท้จริงควรจะเป็นของ Google และวิธีการที่ฉันต้องการ ที่จะใช้เป็นไปได้ที่จะได้รับ ดังนั้นสิ่งที่กระทำ? การดำเนินการเป็นชื่อวิจิตรพิสดาร, แต่นั่นก็หมายความว่า ผู้ที่จะจัดการกับ การดำเนินการในรูปแบบนี้หรือไม่? เมื่อฉันคลิกค้นหาที่ ผลที่ควรจะไป? และถ้าตอนนี้ผมกลับไปที่รูปแบบของฉัน ที่นี่และโหลดหน้าเว็บของฉัน และตอนนี้ค้นหาบางสิ่งบางอย่าง เหมือนสุนัขแจ้งให้ทราบในขณะนี้ ผมได้ดำเนินการอีกครั้งของ Google ใช่มั้ย? ถ้าผมต้องการค้นหาบางสิ่งบางอย่าง อื่นก็ทำงานไม่ได้เป็นเพียงสำหรับสุนัข ก็ยังทำงานสำหรับแมว นอกจากนี้ยังทำงานสำหรับ CS50 และตกลงนี้เป็นเพียง ภายใต้ส่วนประกอบหลักคือไม่ได้หรือไม่ สิ่งที่ถูกต้อง แต่มันใช้งานได้จริง ดังนั้นสิ่งที่ได้รับจริงที่เกิดขึ้น? ดังนั้นผมจึงได้สอนเบราว์เซอร์ที่ใช้ HTML จะใช้ข้อมูลจากผู้ใช้ และที่จริงการป้อนข้อมูลที่ส่ง กับเซิร์ฟเวอร์ระยะไกลโดยใช้ HTTP และเนื่องจากเบราว์เซอร์ เข้าใจ HTTP ก็จริง สร้าง URL เพื่อให้สิ่งที่ ผมจบลงมากกว่าในเบราว์เซอร์ของฉัน สังเกตเห็นสิ่งที่เกิดขึ้น เมื่อผมค้นหาสุนัข ถ้าฉันคลิกค้นหาแจ้งให้ทราบว่า URL ที่มีการเปลี่ยนแปลงตามที่ผมตั้งใจ เพื่อ google.com/search~~V แบบสอบถามเท่ากับสุนัข และนั่นเป็นเพราะรูปแบบ รู้เพราะวิธีการที่จะได้รับ เพียงแค่ผนวกไปยัง URL ที่ว่ามี ตอนนี้หน้าเว็บเหล่านี้ยังคงน่าเกลียด ดังนั้นขอแนะนำคนอื่น ๆ ชิ้นส่วนของไวยากรณ์ถ้าเราสามารถวันนี้ และนี่คือสิ่งที่เป็นที่รู้จักกัน เป็น cascading แผ่นสไตล์ เพื่อให้ฉันดูที่ ตัวอย่างนี้ที่นี่และดู ถ้าเราสามารถสรุปสิ่งที่เกิดขึ้น นี่คือ CSS0.html และนี่คือสิ่งที่ ได้รับน้อยน่าเกลียด เพราะโชคไม่ดี ในโลกของเว็บ HTML เพียงอย่างเดียวไม่สามารถทำทุกอย่าง ดังนั้นถ้าคุณต้องการ ดูทันสมัย​​หน้าเว็บของคุณ คุณจริงต้องมุ่งเน้นไปที่ ความงามในทางที่แตกต่างกัน ดังนั้นที่นี่ฉันมีร่างกายของเว็บของฉัน หน้าภายในซึ่งเป็น div ใหญ่ และ div ก็หมายความว่าส่วน ดังนั้นจึงเป็นเหมือนวรรค แต่มัน ไม่ได้มีความหมายเดียวกัน ของวรรคของข้อความ เพียงแค่นี้ก็หมายความว่าไป เบราว์เซอร์ที่นี่มา ภูมิภาคสี่เหลี่ยมใหญ่ของเว็บของฉัน หน้าผมต้องการที่จะจัดการกับมันเป็นพิเศษ ตอนนี้สาย 21 คือที่ว่า div เริ่มต้น และใช้เวลาเพียงแค่คาดเดา ผลกระทบของสายคืออะไร 21 บน ส่วนที่เหลือของเนื้อหาของหน้า? มันอยู่ตรงกลาง นั่นคือทั้งหมดที่ ดังนั้นเราจึงไม่ได้เห็นวิธีการ จริงตรงกลางข้อความ ในความเป็นจริงเครื่องมือค้นหาของฉัน ซึ่งแตกต่างจาก Google ที่เกิดขึ้นจริง ได้รับการพิสูจน์ทั้งหมดไปทางซ้าย และตอนนี้อยู่ในสายที่ 21 ผมว่าเดี๋ยวก่อน เบราว์เซอร์ในการสร้างส่วนของหน้า เพียงแค่ให้ฉันขนาดใหญ่รูปสี่เหลี่ยมผืนผ้าที่มองไม่เห็น นั่นเป็นวิธีที่ฉันต้องการ คิดเกี่ยวกับหน้าเว็บ และจากนั้นดูทันสมัย​​ดังต่อไปนี้ ภายในของคำพูดเหล่านั้น ตอนนี้เป็นภาษาที่สอง ที่เราแนะนำในวันนี้ เรียกซ้อนแผ่นสไตล์ โชคดีที่มันมากเกินไปไม่ได้ ภาษาการเขียนโปรแกรม จึง จำกัด มากในไวยากรณ์ แต่ นอกจากนี้ยังมี จำกัด มากในการทำงานของ ในขณะที่ HTML เป็นข้อมูลเกี่ยวกับ ทำเครื่องหมายข้อมูลของหน้าเว็บ และโครงสร้างของหน้าเว็บ CSS โดยทั่วไปเกี่ยวกับ ไมล์สุดท้าย, ความงาม, ได้รับขนาดและสีและ ตำแหน่งตรงขวาในหน้าเว็บ และแน่นอนมันจะเกิดขึ้น กับคู่ค่าที่สำคัญ สถานที่ให้บริการเช่นนี้ข้อความ สอดคล้องตามลำไส้ใหญ่ ตามด้วยคุณค่าของว่า ทรัพย์สินซึ่งในกรณีนี้คือศูนย์ และตอนนี้สังเกตเห็นคุณ สามารถรังสิ่งเหล่านี้ ถ้าผมต้องการทุกอย่างในการที่ ผมได้เน้นที่จะเป็นศูนย์กลาง ที่ว่าทำไมฉันมีสาย 21 บรรทัดที่สอดคล้องกัน 31 แต่สมมติว่าตอนนี้อยากจะบอกว่าจอห์น ฮาร์วาร์ยินดีหน้าแรกของฉัน สัญลักษณ์จอห์นฮาร์วาร์ลิขสิทธิ์ และคิดว่าฉันต้องการเป็นครั้งแรกของ เส้นที่จะเป็นใหญ่สวย 36 พิกเซล เพื่อให้เป็นขนาดที่เหมาะสม และฉันต้องการที่น้ำหนักของมันจะเป็นตัวหนา แต่แล้วด้านล่างว่า ฉันต้องการให้ข้อความที่มีขนาดเล็ก และด้านล่างที่ผมต้องการ ข้อความที่แม้มีขนาดเล็ก ขอโทษ วันนี้รู้สึกเหมือนวันหยุด ดังนั้นตอนนี้สิ่งที่ฉันทำในการแสดงนี้หรือไม่? ที่นี่ในบรรทัดที่ 22 เป็นที่ฝังตัว div div หรือซ้อนกันถ้าคุณจะ มันก็มีแท็กสไตล์ของตัวเอง ฉันระบุขนาดตัวอักษรของ 36 ฉันระบุน้ำหนักของตัวอักษรตัวหนา ลงที่นี่ผมเพียงระบุ 24 พิกเซล และสุดท้ายในสาย 28, 12 ฉันระบุ ดังนั้นเพียงแค่เป็นกาสติอย่างรวดเร็ว และในขณะที่การอ่านของมนุษย์นี้ ซึ่งคำบนหน้าจอ จริงที่เกิดขึ้นจะเป็นตัวหนา? ซึ่งจะเป็นตัวหนาเส้นจริง? จอห์นฮาร์วาร์เพียง ใช่มั้ย? เพราะเช่นเดียวกับสาย 22 กล่าวว่าเดี๋ยวก่อน เบราว์เซอร์ที่นี่เป็นส่วนหนึ่งของหน้าเว็บ ทำให้ขนาดตัวอักษร 36 จุด ทำให้น้ำหนักตัวอักษรตัวหนา ทันทีที่คุณเข้าถึง แท็กสิ้นสุดที่สอดคล้องกัน หรือแท็กปิดในบรรทัดที่ 24 ที่หมายถึงเฮ้เบราว์เซอร์ หยุดทำสิ่งที่เป็นคุณกำลังทำ และแจ้งให้ทราบล่วงหน้าเพื่อจะชัดเจนแม้ว่า สาย 22 มีทั้งหมดของคุณสมบัติเหล่านี้ ชอบสไตล์เมื่อคุณ ปิดแท็กในสายที่ 24 คุณจะพูดถึงชื่อของแท็ก คุณไม่ซ้ำรูปแบบคำหรือ สิ่งที่อยู่ภายในของคำพูดเหล่านั้น และดังนั้นหากฉันมองไปที่นี้ในขณะนี้ ในเบราว์เซอร์ของฉันลอง ดูที่ผลลัพธ์ที่ได้ ปล่อยฉันไป ก่อนที่ภาพนี้ซึ่งเป็น CSS 0 และมันก็ยังคงสวยธรรมดา แต่ได้รับที่น่าสนใจสวย แต่มันกลับกลายเป็นของที่นั่น สิ่งอื่น ๆ ที่ฉันสามารถทำที่นี่ และที่มีความเสี่ยงในการทำ นี้น่าเกลียดอย่างสมบูรณ์ แจ้งให้ทราบว่าในที่นี่ของฉัน ร่างกายของหน้าเว็บของฉัน ที่ฉันสามารถทำสิ่งที่ตลก เหมือนที่ bg หรือสีพื้นหลัง และรวดเร็วในสิ่งที่เป็นสีโปรดของคุณ? สีเขียวที่ผมได้ยิน ทั้งหมดขวา ดังนั้นตอนนี้ถ้าผมตีโหลดตอนนี้ เรามีหน้าเว็บสีเขียว สิทธิทั้งหมดเพื่อให้ไม่ได้เลวร้าย และตอนนี้ถ้าผมต้องการที่จะทำให้เรื่องนี้จริงๆ เย็นฉันจะทำให้สีของข้อความของฉัน แม้กระทั่งสีแดง ดังนั้นเรามาดูสิ่งที่มีลักษณะเช่นนี้ ตอนนี้ก็ดูดีสวย และลงที่นี่ถ้าคุณจริงๆ ต้องการยุ่งกับใครสักคน หรือถ้าคุณต้องการที่จะเป็น หนึ่งในคนเหล่านั้นที่ พยายามที่จะหลอกให้คุณเข้ามาเยี่ยมชมเว็บ หน้าเพราะพวกเขาได้หลอก Google ในความคิดมีทั้งกลุ่ม คำสำคัญ like-- ขอดูโหลด ในกรณีที่มันไม่ไป? และมีมันเรา ทั้งหมดขวา ดังนั้นผมจึงพูดแบบนี้เป็นกันเราจะ พูดคุยเกี่ยวกับเรื่องนี้ในอีกไม่กี่สัปดาห์ที่ผ่านมา เมื่อเราพูดคุยเกี่ยวกับ การรักษาความปลอดภัยถ้าคุณจริง ฝังที่อัดแน่นทั้ง คำหลักในหน้าเว็บ แม้ว่าพวกเขาจะไม่สามารถมองเห็นไปยัง มนุษย์บางคนเช่น Google แน่นอน ยังคงสามารถจริงพบนี้ สิทธิทั้งหมดเพื่อให้สวย น่าเกลียดสวยได้อย่างรวดเร็ว และในความเป็นจริงมันไม่ได้ทั้งหมด มากว่าแตกต่างจากเว็บของตัวเอง หน้าเป็นระดับปริญญาตรีที่ ผมเริ่ม googling รอบ ๆ เพื่อหา รุ่นที่ผ่านมาของเว็บไซต์เก่าของฉัน มันก็ไม่ดีงาม ในความเป็นจริงฉันไม่พบ เพียงหนึ่งก่อนที่ชั้น แต่มีที่เลวร้ายออกมี นี่คือฉันเห็นได้ชัด หน้ากลับบ้านในปี 1996 เห็นได้ชัดว่าผมคิดว่ามันเป็น เหมาะสมที่จะถามคนที่ชื่อของพวกเขา ก่อนที่พวกเขาจะทำได้ จริงดูที่หน้าเว็บของฉัน แล้วฉันก็พบว่าพวกเขา สิ่งที่โง่อาจจะ ฉันจะขุดขึ้นมามากขึ้นสำหรับครั้งต่อไป แต่สำหรับตอนนี้ขอ พิจารณาบิตของการออกแบบ เราได้พูดคุยเกี่ยวกับรูปแบบ และหน้านี้ป่านนี้และ ทุกอย่างที่สุดที่ผมเคยเขียน สวยสะอาด stylistically แต่สิ่งที่เกี่ยวกับการออกแบบ? ดีมีจำนวนมากซ้ำซ้อน ในสิ่งที่ฉันได้ทำอะไรที่นี่ ฉันได้กล่าวคำว่า สีในสองสถานที่ ฉันได้กล่าวขนาดตัวอักษรในคู่ของ สถานที่และตัวหนาในคู่ของสถ​​านที่ และโดยพื้นฐานผมร่วม มั่วสุมสองภาษา ฉันมี HTML ที่มีแท็กและของฉัน คุณลักษณะและแล้วทั้งหมดในทันที ระหว่างคำพูดที่ผมมี ภาษาที่สองในวันนี้ เรียกว่า CSS อีกครั้งซึ่งเป็นเพียงเหล่านี้ คู่ค่าคีย์หรือคุณสมบัติเหล่านี้ คั่นด้วยเครื่องหมายทวิภาค มันจะเปิดออกที่มาก เช่นใน C ที่เรา สามารถเริ่มต้นที่จะเป็นปัจจัยออก รหัสบางอย่างลงไปในแฟ้มส่วนหัว เพื่อให้เราสามารถทำเช่นเดียวกันในรูปแบบ HTML และขั้นตอนต่อว่าจะเป็นดังนี้ ขอให้สังเกตว่ารุ่นนี้เป็น CSS1.html โครงสร้างหน้าเว็บเดียวกันแน่นอน ดังนั้นผมจึงได้มีทั้งกลุ่ม ของ divs แต่เวลานี้ผมได้ อากาศกำจัดเสื้อคลุม div เป็นคุณจะเห็น และผมได้รับทั้งสาม divs ด้านบนกลางและล่างรหัสที่ไม่ซ้ำกัน นี้เป็นสิ่งที่ดีเพราะ ให้หน่วยงานเหล่านั้น ของหน้าตัวระบุที่ไม่ซ้ำกัน ฉันสามารถอ้างอิงพวกเขาที่อื่น ที่ไหน? ดีให้ฉันเลื่อนขึ้น และป่านนี้ทุกที่ทุกเวลาที่เราได้ดู ที่หัวของหน้าเว็บอะไร แท็กเดียวที่เราเคยมีใน หัวของหน้าเว็บหรือไม่ ดังน้อย เพียงแค่ชื่อเพื่อให้ห่างไกล แต่มันกลับกลายเป็นของที่นั่น สิ่งอื่น ๆ บาง คุณสามารถใส่ในนั้นหนึ่ง ซึ่งก็เรียกว่าแท็กรูปแบบ ดังนั้นช่วงเวลาที่ผ่านมาเรามอง ที่แอตทริบิวต์สไตล์ เปิดออกมีแท็กสไตล์ มันเป็นของที่อยู่ภายใน หัวของหน้าเว็บ และตอนนี้สังเกตเห็นสิ่งที่ฉันทำ ฉันมีอยู่ภายในนี้ แท็กรูปแบบดังต่อไปนี้ ฉันแท้จริงกล่าวขวัญในบรรทัดที่ 20 ชื่อของแท็กที่ฉันต้องการเพื่อ Stylize แล้วฉันมีวงเล็บปีกกาเปิด และปิดวงเล็บปีกกา ดังนั้นในทำนองเดียวกันกับ C แต่ อีกครั้งนี้ไม่ได้เป็นฟังก์ชั่น นี้เป็นเพียงรายละเอียดที่นี่ประโยค และแล้วแน่นอนผมบอก เบราว์เซอร์เฮ้เบราว์เซอร์ ทำให้ร่างกายทั้งหมดของหน้า มีการจัดตำแหน่งข้อความศูนย์ และแล้วนี้ไม่ว่าจะเป็นดังต่อไปนี้ เบราว์เซอร์เฮ้ถ้าคุณเห็น HTML มี องค์ประกอบหรือแท็กในหน้าเว็บที่ มีตัวระบุที่ไม่ซ้ำกันของด้านบน ดังนั้นสัญลักษณ์กัญชาที่นี่ก็หมายความว่า ความคิดที่ไม่ซ้ำกันของด้านบนไปข้างหน้า และทำให้ขนาดตัวอักษรของ 36 และน้ำหนักของตัวอักษรตัวหนา เฮ้เบราว์เซอร์ที่มีองค์ประกอบ ID เป็นกลางทำให้มัน 24 พิกเซล เบราว์เซอร์และ hey ถ้าคุณเห็น ความคิดของด้านล่างทำให้มัน 12 พิกเซล ผลในท้ายที่สุด ตรง sam ถ้าผมไปลงใน CSS 1, หน้ามีลักษณะเดียวกัน แต่เราขั้นตอนต่อ การออกแบบที่ดีกว่าเล็กน้อย ตอนนี้ผมขอกลับไปที่นี่เพื่อ CSS2 และดูว่าอะไรที่ผมเคยทำ ตอนนี้หน้าเป็นจริงๆสะอาด ในความเป็นจริงฉันสามารถใส่ทั้งหมดของ เนื้อหาบนหน้าเว็บที่นี่ แต่สิ่งที่แท็กใหม่มีฉัน แนะนำอย่างเห็นได้ชัด? การเชื่อมโยง และก็ไม่ได้ชื่อที่ดีที่สุดสำหรับการแท็ก เพราะมันไม่ได้เชื่อมโยงในความรู้สึกที่ ที่เรารู้ว่ามัน แต่ที่นี้หมายถึง การเชื่อมโยงในบางไฟล์อื่น ๆ นี้เป็นชนิดเช่นคมชัดรวมถึงใน C. นี่คือวิธีการในการ html ที่จะบอกว่าเดี๋ยวก่อนเบราว์เซอร์ ไปรับเนื้อหาของ ไฟล์ที่เรียกว่า css2.css ความสัมพันธ์กับผม คือว่ามันเป็นสไตล์ชีท และแน่นอนว่าเป็นสิ่งหนึ่งใน S ในวิธี cascading แผ่นสไตล์ นี่คือสไตล์ชีท มันเป็นเพียงแฟ้มข้อความที่มี ทั้งกลุ่มของสถ​​านที่ให้บริการ มันเป็นทั้งกลุ่มของรูปแบบ ที่คุณต้องการที่จะนำไปใช้กับหน้า และเพื่อให้เห็นได้ชัดว่าเป็นนี้ หมายถึงไฟล์ที่สอง และถ้าฉันเปิดที่ CSS2.css, แจ้งให้ทราบว่าทั้งหมดที่ฉันได้ทำ คือคัดลอกและวางทั้งหมด นี้ลงในแฟ้มนี้ และตอนนี้แม้ว่าคุณจะไม่เคย เขียนสิ่งนี้มาก่อน เพียงแค่พิจารณาด้วย หมวกวิศวกรรมสุภาษิต ในเหตุผลที่เป็นเช่นนี้ ออกแบบที่ดีกว่าอาจจะ? แฟออก CSS คุณสมบัติเหล่านั้น วางไว้ในไฟล์ของตัวเอง แม้ว่าเราจะแก้ปัญหานี้ ปัญหาเช่นห้านาทีที่ผ่านมา ในรุ่นแรก เราไม่ได้ดีขึ้น หน้า stylistically, นี้เป็นเพียงที่ดีขึ้น การออกแบบในความรู้สึกบาง ทำไมคุณคิดว่า? ใช่ ความยืดหยุ่นมากขึ้นได้อย่างไร ใช่ ดังนั้นหากคุณต้องการที่จะไป กลับมาและสิ่งที่เปลี่ยนแปลง ตอนนี้คุณมีสถานที่แห่งหนึ่ง ซึ่งคุณสามารถเปลี่ยนสิ่งที่ และในความเป็นจริงสำหรับบางสิ่งบางอย่าง เช่นปัญหาการตั้งเจ็ด ที่เราจะใช้ หุ้นเว็บไซต์ซื้อขาย ที่จะมี ทั้งกลุ่มของหน้าเว็บ และมันจะเป็นจริง ที่น่ารำคาญถ้าคุณตัดสินใจ hm, ฉันไม่ชอบ 24 พิกเซล, ฉันต้องการ ว่ามันจะเป็น 28 พิกเซลหรือใหญ่กว่าเล็กน้อย แล้วต้องทำ ทั่วโลกค้นหาและแทนที่ หรือเปิดไฟล์ทั้งหมดของเว็บไซต์ของคุณ ก็จริงเปลี่ยนค่าหนึ่ง โดยแฟออกรูปแบบเหล่านี้ เข้าไปในสถานที่กลางหนึ่ง ตอนนี้คุณสามารถเปิดไฟล์ข้อความหนึ่ง ใน CS50IDE ลงในโปรแกรมใด ๆ เปลี่ยนบันทึกและทำ คุณได้ขยายพันธุ์เหล่านั้น การเปลี่ยนแปลงทุกที่ และที่จะไม่เหมือนเดิม ในแฟ้มชั่วโมงจุดเช่นกัน ดังนั้นคำถามใด ๆ จึง ห่างไกลในรูปแบบนี้? สิทธิทั้งหมดเพื่อให้เราได้ ทำทุกอย่างที่ดูเหมือนว่า ยกเว้นการดำเนินการเชื่อมโยงหลายมิติจริง และเพื่อให้เป็นไปข้างหน้าและทำเช่นนี้ ให้ฉันไปข้างหน้าและ สร้างไฟล์ใหม่ที่นี่ ฉันจะเรียกมันว่า link.html ใส่ในรหัสของวันนี้ และฉันจะทำแบบเปิด ยึดเอกสาร html ที่ประเภท เช่นกันสิ่งนี้ที่ ด้านบน doc ประกาศประเภทนี้ มันเป็นเพียงคนเดียวที่แปลก ที่มีเครื่องหมายอัศเจรีย์ คุณเพียงแค่ต้องทำมันมีและมัน หมายความว่าเรากำลังใช้รุ่น HTML 5 รุ่นเก่า ภาษามีมากอีกต่อไป สตริงที่คุณจำเป็นต้องใส่มี ดังนั้นนี่คือตัวอย่างที่เรียกว่าการเชื่อมโยง ฉันจำเป็นต้องใช้ร่างกายของหน้าเว็บของฉันที่นี่ และในที่นี่เป็นเท่ากับ href สมมติว่า HTTP://www.disney.com และเว็บไซต์ที่ชื่นชอบเราจะพูดว่า สิทธิทั้งหมดดังนั้นมาก ไม่มีอันตรายผู้ใช้หน้าเป็นมิตร ถ้าตอนนี้ผมไปลงในไดเรกทอรีของฉัน รายการที่นี่และเปิด link.html, เรามีข้อความมากเกินไป และแน่นอนนี่คือที่ ความ H ใน HTTP มาจาก โปรโตคอลการถ่ายโอน Hypertext เป็นเรื่องเกี่ยวกับการถ่ายโอนข้อความ ที่มีการเชื่อมโยงไปยังแหล่งข้อมูลอื่น ๆ และแน่นอนที่นี่เป็นที่คุ้นเคย ถ้าย้อนยุค, การเชื่อมโยงสีฟ้าว่าถ้าคลิก จริงจะนำฉันไป Disney.com ตอนนี้โอ้ที่ออกมาเร็ว ๆ นี้ สิทธิทั้งหมดดังนั้นตอนนี้สิ่งที่บางส่วน ของผลกระทบของการนี​​้หรือไม่? และตรงไปตรงมาโลกเริ่มต้น เพื่อให้ได้เล็ก ๆ น้อย ๆ ที่คุ้นเคยมากขึ้น และยังน่ากลัวเล็ก ๆ น้อย ๆ แต่ยังน้อยมาก ป้องกันตัวเองเมื่อคุณเริ่มต้น ที่จะเข้าใจสิ่งเหล่านี้ เพราะราคาที่บางส่วนของคุณถ้าคุณไป ผ่านโฟลเดอร์อีเมลขยะ Gmail ของคุณหรือแม้กระทั่ง กล่องจดหมายของคุณที่คุณได้อาจจะ อากาศชนิดของอีเมล์บาง ที่ขอให้คุณเปลี่ยนของคุณ รหัสผ่านอาจจะหรืออาจจะตรวจสอบ ข้อมูลประจำตัวของ PayPal ของคุณหรือ whatnot และในความเป็นจริงคุณอาจจะได้รับ บางสิ่งบางอย่างที่บอกว่าเหมือนคลิกที่นี่ เพื่อรีเซ็ตรหัสผ่าน PayPal ของคุณ และตอนนี้สังเกตเห็นถ้า นี้ไม่ได้เป็น Disney.com แต่ชอบ badplace.com และ โหลดทราบว่าข้อความที่นี่ จะพูดอะไร แต่อย่างใด และในความเป็นจริงนี้เป็นเพียงคำพูด ทำไมฉันจึงไม่จริงเป็นอันตรายสุด และพูด http://www.paypal.com คลิกที่นี่รีเซ็ต PayPal ของคุณ รหัสผ่านและโหลดในขณะนี้ นี้มีลักษณะถูกต้องตามกฎหมายสวยใช่มั้ย? ฉันหมายความว่าฉันจะไม่คลิก อีเมลที่เพียงแค่บอกว่านี่ แต่สังเกตเห็นขั้วที่นี่ มัน www.paypal.com กล่าวว่า และในความเป็นจริงรอสักครู่ เรารู้ว่าคุณต้องการ ดัชนี S เพื่อความปลอดภัย ดังนั้นตอนนี้ให้ไปที่ www.paypal.com HTTPS, แต่ถ้าคุณไม่เคยทำเช่นนี้มาก่อน ไม่ได้รับเป็นนิสัยของ โฉบเหนือการเชื่อมโยงน้อยที่นี่ และมันยากที่จะเห็น บนหน้าจอที่นั่น และมันก็ไม่ใช่สิ่งที่ง่ายขึ้นที่นี่ แต่ทางลงที่นี่ใน มุมเล็ก ๆ เบราว์เซอร์ที่ไม่จริง บอกว่าเรากำลังจะ เพื่อ badplace.com แทน Paypal.com ขณะนี้เรากำลังที่จะมีนี้? ตัวอย่างทั้งหมดที่เราทำในวันนี้ เราได้เขียนยากและพิมพ์ออกมาด้วยตนเอง เว็บอย่างไม่น่าเชื่อ น่าทึ่งเมื่อคุณยาก รหัสหน้าเว็บของคุณเพื่อให้เนื้อหาที่ เป็นแบบคงที่และไม่เคยเปลี่ยน แน่นอนว่าทั้งหมดของเรา เว็บไซต์ที่ชื่นชอบในวันนี้ ไม่ว่าจะเป็น Gmail หรือ Twitter หรือ Facebook หรือจำนวนของคนอื่น ๆ เป็นแบบไดนามิก พวกเขากำลังเปลี่ยนแปลง การตอบสนองต่อผู้ใช้ป้อน เช่นเดียวกับผลการค้นหาของ Google ดังนั้นในวันพุธที่สิ่งที่เราทำคือ เราออกจาก HTML CSS และการแนะนำ หลังเราและเราจะ สำหรับการรับว่าตอนนี้เรา รู้ว่ามันและเราแนะนำ ภาษาการเขียนโปรแกรมใหม่ เรียกว่า PHP ซึ่งชอบ ซีเป็นไปเพื่อให้เรา อำนาจในการสร้างโปรแกรมจริง ที่ตัวเองสร้างเอาท์พุท ในกรณีนี้เราจะใช้ PHP ในการสร้างเว็บแบบไดนามิก หน้าใช้ภาษาใหม่นี้ ดังนั้นเพิ่มเติมว่าในวันพุธที่ งั้นไว้เจอกันใหม่. [เล่นเพลง]