>> 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