DOUG LLOYD: ดังนั้นเราจึงใช้เวลา about-- ถ้าคณิตศาสตร์ของฉันที่ถูกต้อง และผมคิดว่าการมอง back-- ผมคิดว่า เราใช้เวลาประมาณ 35 วิดีโอการพูดคุย เกี่ยวกับแง่มุมต่างๆของ C อาจจะ เล็ก ๆ น้อย ๆ อาจจะน้อย และเราไม่ได้ครอบคลุม ทุกอย่างใน C แต่เรา ปกคลุมก้อนใหญ่ของ ภาษาส่วนใหญ่ของมัน แน่นอนสำหรับการใช้งานร่วมกัน ตอนนี้เรากำลังจะไปพูดคุย เกี่ยวกับภาษาอื่น, HTML และเรากำลังจะครอบคลุม มันในเวลาเพียงหนึ่งวิดีโอ 

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

แต่ขอพูดคุยเกี่ยวกับภาษาใดภาษาหนึ่ง ที่จริงพื้นฐานสำหรับทุกเว็บ หน้าซึ่งเป็น HTML HTML เป็นข้อความของ Hyper Markup Language HTML เป็นภาษา แต่เป็น ไม่ใช่ภาษาการเขียนโปรแกรม 

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

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

นี่คือเพจ HTML ง่ายมากไม่ได้ โปรแกรม HTML อีกครั้งหน้า HTML และเรารู้ว่ามันเป็น เพจ HTML เพราะเราได้ ล้อมรอบทุกอย่างด้วยแท็ก ดังนั้นนี่คือสิ่งที่แท็กดูเหมือนว่า มันเป็นเรื่องระหว่างวงเล็บมุม และแจ้งให้ทราบที่ด้านบนเรามี HTML และที่ด้านล่างมาก หลังจากที่เราได้ทำในสิ่งที่เป็น เห็นได้ชัดมากของ HTM​​L อื่น ๆ เรามีวงเล็บมุมเฉือน HTML เพื่อให้การจัดเรียงของเป็นเขตแดน ระหว่างสิ่งที่เป็น HTML และสิ่งที่ไม่ และแน่นอนอัตภาพเพียง ในขณะที่คุณเขียนทั้งหมดของโปรแกรม C ของคุณ ที่มีนามสกุล C จุด ทั้งหมดของไฟล์ HTML ของคุณ จะจบลงด้วยนามสกุล HTML จุด แต่มีมากขึ้นเกิดขึ้นที่นี่ เราไม่เพียง แต่มีแท็กเหล่านี้ เห็นได้ชัดว่าเรามีนี้ สิ่งที่เรียกว่าแท็กหัว ดี, OK, สิ่งที่? 

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

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

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

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

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

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

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

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

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

ดังนั้นที่นี่ใน IDE ของฉันฉันมี ไฟล์ที่เรียกว่าจุด Biu HTML Biu จุด HTML เพียงการ ตัวหนาตัวเอียงขีดเส้นใต้ ฉันจะเปิดขึ้น 

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

ข้อความที่อยู่ในระหว่าง B แท็กเป็นจริงในขณะนี้ที่เป็นตัวหนา ข้อความที่อยู่ในระหว่างฉัน แท็กเป็นจริงในขณะนี้ตัวเอียง และข้อความในระหว่าง U แท็กแน่นอนขีดเส้นใต้ในขณะนี้ เพื่อให้เป็นที่ดีงาม ตอนนี้เรารู้วิธีที่จะทำให้ข้อความ ดูแฟนซีน้อยมาก หรือวาดเน้นไปที่บางสิ่งบางอย่าง คู่อื่นของแท็กร่วมกันที่นี่ แท็กวรรค P และแท็กส่วนหัว ซึ่งผมได้กลายเป็นที่นี่ในฐานะ HX 

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

และเรายังมีตัวเลือกเหล่านี้ สำหรับแท็ก H, แท็กส่วนหัวเหล่านี้ เรามีหกระดับที่แตกต่างกัน หัวหนึ่งสองสาม สี่ห้าหกซึ่งเป็น ความก้าวหน้าที่มีขนาดใหญ่และมีขนาดใหญ่ ส่วนหัว และพวกเขาได้รับมีขนาดเล็กและ ที่มีขนาดเล็กและมีขนาดเล็กและมีขนาดเล็ก ดังนั้นเราจึงมีส่วนหัวที่ระดับบนสุดเป็นครั้งที่สอง ส่วนหัวระดับและอื่น ๆ และอื่น ๆ 

ลองมาดูที่อาจจะบาง แท็ก P และบางแท็กส่วนหัว ในการดำเนินการบนหน้าเว็บ ดังนั้นที่นี่ใน IDE ของฉันฉันมีไฟล์ที่เรียกว่า PH จุด HTML, PH เป็นวรรค และแท็กส่วนหัว เปิดขึ้นมา มีจำนวนมากที่เกิดขึ้นที่นี่ เพราะผมได้ใส่ Lorem บาง Ipsum บางข้อความสุ่มเพียงในที่นี่ ดังนั้นฉันจะซูมออกนิด ๆ หน่อย ๆ เพราะมีมากที่เกิดขึ้น แต่สังเกตเห็นว่าฉันมีที่มาก ข้างบนนี่ฉันมี H1, ระดับหนึ่ง, แท็กส่วนหัว จากนั้นฉันมีวรรคซึ่งเป็นเพียง พวงของ Lorem text-- สุ่ม ipsum-- เพียงแค่เริ่มต้นการบรรจุมาตรฐานในข้อความ ดังนั้นผมจึงมีสองย่อหน้าภายในที่ หนึ่งระดับหัวแล้วผมลงมาด้านล่าง มีสองระดับส่วนหัวที่นี่ในบรรทัดที่ 24 ส่วนหัวระดับที่สองและอีกสอง วรรค อย่างนี้สิ่งที่ไม่ได้มีลักษณะเหมือน ถ้าผมจะดูในภาพตัวอย่างของฉันได้อย่างไร มาดูกัน. 

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

ถัดไปขึ้นแท็กบางอย่างที่เราใช้ การสร้างรายชื่อในหน้าเว็บของเรา ดังนั้นเราจึงมีไม่เรียงลำดับ lists-- ULs-- ซึ่งเป็นเพียง สัญลักษณ์แสดงหัวข้อย่อยสั่ง รายการที่มี numbered-- OLs-- และภายในของทั้งสอง หนึ่งในบรรดาเราจำเป็นต้องมี ชุดของวิธีการที่จะแสดงให้เห็นในรายการ LI และเพื่อให้เราเปิดแท็ก UL และเราใส่รายการภายในของมัน และจากนั้นเมื่อเรากำลังทำกับ ที่เราสามารถปิดแท็ก UL 

และในทำนองเดียวกันเราสามารถมี รายการสั่งซื้อหรือเลข และวางรายการที่อยู่ภายใน ดังนั้นลองมาดู ที่คู่ของรายการ และสิ่งที่พวกเขาจะ ทำให้บน CS50 IDE ดังนั้นผมจึงมีที่นี่ใน IDE ของฉัน ไฟล์รายการที่เรียกว่าดอท HTML ลองมาดู 

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

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

ทำไมถึงเรียกว่าทีดีและไม่ TC? ดีทีย่อมาจากข้อมูลตาราง โดยปกติแล้วคุณกำลังวาง ข้อมูลของคุณมี นั่นคือเหตุผลที่มันเป็น TD และไม่ TC มันเป็นความสับสนนิด ๆ หน่อย ๆ 

เพื่อให้คุณมีแท็กและตาราง ภายในของแท็กตารางของคุณ คุณมีจำนวนแถวที่ TRs และภายในแต่ละแถวที่คุณมี TDS สำหรับจำนวนของคอลัมน์ ที่คุณต้องการที่จะมี โดยเฉพาะอย่างยิ่งในแถวที่ ลองมาดูที่มาก ตารางที่ง่ายกว่าใน CS50 IDE 

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

จากนั้นฉันก็เริ่มต้นแถวอื่นและ ทำสองสี่หกแปด แถวที่เสร็จสิ้น ทำแถวอีกสามหกเก้า 12 แล้วแถวสุดท้ายสี่ แปด, 12, และแม้ว่ามันจะเป็น ตัดออกเล็กน้อยที่นี่ 16 

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

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

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

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

ดังนั้นผมจึงมีที่นี่ใน IDE ของฉัน ไฟล์ที่เรียกว่าจุด div รูปแบบ HTML ลองเปิดขึ้น ขอให้สังเกตว่าชอบพูดว่า div เป็นชนิดของพล ใช่มั้ย? มันไม่จริงหมายถึงอะไร ดังนั้นผมจึงมีพล ส่วนแรกของหน้าของฉัน และจากนั้นแทน div อื่น ต่อมาเริ่มต้นในสายแปด ฉันมีแบบฟอร์มนี้ และภายในของรูปแบบที่ผมมี จำนวนของปัจจัยการผลิตด้านของรูปแบบ ดังนั้นผมจึงมีสนามที่มีชื่อเป็น A-- ซึ่งไม่จริงหมายถึงอะไร now-- ที่เหมาะสมที่เห็นได้ชัด ใช้ข้อความอีกคนหนึ่งว่า ใช้รหัสผ่านอีกที่เป็นวิทยุ ปุ่มอื่นที่กล่องกา, และอื่น ๆ ที่เป็นปุ่ม Submit ดีสิ่งที่ไม่นี้ ทั้งหมดจริงมีลักษณะอย่างไร ดีให้มาดู เราจะเปิดขึ้นในหน้าต่างแสดงตัวอย่างของเรา ขอให้สังเกตว่าพลนี้ ครั้งแรก division-- มี ไม่มีการแยกภาพที่นี่ มันไม่ได้ทำอะไรจริงๆใช่มั้ย? 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ฉันลอยด์ดั๊ก นี่คือ CS50