Daven FARNHAM: วันนี้ผมกำลังจะไป พูดคุยเล็กน้อยเกี่ยวกับ HTML, HyperText Markup Language คุณจะเห็น HTML ทุกวันนี้ ในความเป็นจริงถ้าคุณกำลังรับชมนี้ วิดีโอในเบราว์เซอร์ที่คุณกำลัง HTML เห็นได้ในขณะนี้ HTML ไม่เป็นภาษาการเขียนโปรแกรม ค่อนข้างเป็นภาษามาร์กอัปที่ใช้โดย เว็บเบราเซอร์ที่จะทำให้หน้า บนอินเทอร์เน็ต 

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

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

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

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

ถ้าคุณดูที่บรรทัดแรกที่คุณจะ เห็นเครื่องหมายอัศเจรีย์ตามด้วย DOCTYPE html ที่ นี้จริงๆเพียงแค่บอกเบราว์เซอร์ของคุณ ไฟล์ที่เป็นหน้าเว็บ เขียนใน HTML แท็กเป็นหลักกล่าวว่า ที่นี่มาบาง HTM​​L แล้วเรามีแท็กหัวด้วย แท็กชื่อภายใน แท็กหัวคุณสามารถคิดเป็น ที่ประกอบไปด้วยรหัสที่มาพร้อมกับ เป็นกลุ่มของหน้าเว็บของคุณ เนื้อหาจริง 

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

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

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

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

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

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

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

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

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

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

ชื่อของฉันคือ Daven อัม นี้เป็น CS50 

ดังนั้นสำหรับตัวอย่างเช่นที่ฉันสามารถใช้ ภาพชั้น - ไม่มีมีคุณสมบัติมากมาย ชื่อของฉันคือ Daven อัม นี้เป็น CS 650 ฉันต้องการจะบอก CSS นี้เป็น CSS