>> [เล่นเพลง]
>> เดวิดเจลัน: นี่คือ 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 ในการสร้างเว็บแบบไดนามิก
หน้าใช้ภาษาใหม่นี้
ดังนั้นเพิ่มเติมว่าในวันพุธที่
งั้นไว้เจอกันใหม่.
>> [เล่นเพลง]