ภาษา HTML คืออะไร?

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

คุณสามารถคิดว่าHTMLเป็นเฟรมสำหรับเว็บเพจ HTML เป็นภาษาคอมพิวเตอร์ที่เรียกว่าภาษามาร์กอัปและหน้าเว็บส่วนใหญ่ที่คุณเห็นบนอินเทอร์เน็ตทุกวันทำจาก HTML เหนือสิ่งอื่นใด 

องค์ประกอบ HTML คืออะไร?

เช่นเดียวกับกรอบของบ้านอาจประกอบด้วยไม้แต่ละชิ้นเอกสาร HTMLจะประกอบด้วยองค์ประกอบ HTML แต่ละ รายการ นี่คือตัวอย่างขององค์ประกอบ HTML อย่างง่าย:

<p>นี่คือองค์ประกอบ</p>

องค์ประกอบ HTML แต่ละรายการประกอบด้วยแท็กซึ่งสำหรับองค์ประกอบนี้คือ<p>และ</p>สัญลักษณ์ที่คุณเห็นในด้านใดด้านหนึ่ง คุณสามารถมองว่าสิ่งเหล่านี้เป็นคอนเทนเนอร์โดยที่<p>แท็กเป็นจุดเริ่มต้นขององค์ประกอบ</p>แท็กเป็นจุดสิ้นสุด และเนื้อหาคือข้อความที่อยู่ระหว่างนั้น

 

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

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

ลองสิ่งนี้!

พิจารณาองค์ประกอบสองสามย่อหน้าด้วยกัน ตัวอย่างเช่น:

<p>นี่คือย่อหน้า</p>
<p>จากนั้นอีกหนึ่งย่อหน้า</p>
<p>เป็นเพียงย่อหน้าหลายย่อหน้า</p>

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

 

เพิ่ม CSS ของเรา 

 

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

องค์ประกอบที่ซ้อนกัน

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

ตัวอย่างเช่น หากคุณต้องการให้คำใดคำหนึ่งในย่อหน้าเป็นตัวเอียง องค์ประกอบ HTML <i> สามารถทำได้ แต่หากต้องการเลือกเพียงคำเดียวในย่อหน้า คุณจะต้อง ใส่ ไว้ในองค์ประกอบย่อหน้า อาจมีลักษณะดังนี้:

<p>นี่คือย่อหน้าที่มี <i>หนึ่ง</i> คำเป็นตัวเอียง</p>

ในกรณีนี้องค์ประกอบย่อหน้ามีทั้งข้อความและองค์ประกอบตัวเอียง มันจะแสดงในเบราว์เซอร์ของคุณดังนี้:

ลองสิ่งนี้!

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

 

เพิ่ม CSS ของเรา 

 

คุณควรเห็นบรรทัดข้อความที่มีเพียงคำว่า "one" เท่านั้นที่เป็นตัวเอียง ลองห่อ แท็ก <i>และ</i>รอบคำอื่นด้วย หรือมากกว่าหนึ่งคำ สิ่งที่คุณใส่ในแท็กเหล่านั้นควรแสดงเป็นตัวเอียง

นั่นสร้างหน้าเว็บได้อย่างไร

เว็บเพจคือชุดขององค์ประกอบ HTMLในเอกสาร HTML HTML สำหรับหน้าเว็บที่เรียบง่ายมากอาจมีลักษณะดังนี้:

<h1>บล็อกการเขียนโค้ดของฉัน</h1>
<p><i>13 กุมภาพันธ์ 2020</i></p>
<p>ฉันได้ยินมาว่าบริษัทเว็บที่ดีที่สุดเริ่มต้นจากโรงรถ โรงรถของฉันเต็มไปด้วยขยะ ฉันควรทำอย่างไร</p>

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

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

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

ตัวอย่างเช่น ลองคลิกที่นี่เพื่อเปิดตัวอย่างเป็นหน้าเว็บจริง คุณควรเห็นสิ่งนี้ในแท็บหรือหน้าต่างใหม่:

ทำตามขั้นตอนด่วนเหล่านี้: 

1. คลิกขวาที่ใดก็ได้บนเพจที่คุณเพิ่งเปิด
2. ค้นหาและคลิกตัวเลือกที่ระบุว่าดูแหล่งที่มาของ หน้า ขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้ อาจเป็นไปได้ว่าตัวเลือกนั้นอาจไม่อยู่ที่นั่น ขอแนะนำให้ใช้Google Chrome  เพื่อให้แน่ใจว่าคุณจะได้รับประสบการณ์ที่ดีที่สุดจากแบบฝึกหัดเหล่านี้ 
   
3. แท็บหรือหน้าต่างอื่นควรเปิดขึ้น โดยแสดงHTMLของหน้าให้คุณเห็น
   

ดูคุ้นเคย?

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

Read More

วิธีการสร้างเว็บเพจในเว็บไซต์

บทเรียนนี้เป็นส่วนหนึ่งของชุด  วิชาการเขียนโปรแกรมคอมพิวเตอร์ คุณสามารถไปที่  Intro to Programming  หากคุณต้องการเริ่มต้นตั้งแต่ต้น

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

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

สร้างไฟล์

ทำตามขั้นตอนเหล่านี้เพื่อสร้างไฟล์ HTML ไฟล์แรกของคุณ

1. เปิดข้อความประเสริฐ
2. เปิด เมนู ไฟล์แล้วเลือกไฟล์ใหม่ 
   
3. คุณควรเห็น  แท็บใหม่ เปิดอยู่ใน Sublime Text ที่มีป้ายกำกับว่าuntitled
4. กลับไปที่ เมนู ไฟล์แล้วเลือกบันทึกเป็น
   
5. ค้นหา โฟลเดอร์ GCF Programming Tutorialsที่คุณสร้างเมื่อตั้งค่าพื้นที่ทำงานและดับเบิลคลิกที่โฟลเดอร์นั้น
   
6. ตั้ง ชื่อไฟล์ของคุณindex.html แล้วกด  ปุ่มบันทึก

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

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

เขียน HTML แรกของคุณ

เมื่อคุณเปิดไฟล์ index.html ว่างในโปรแกรมแก้ไขข้อความแล้ว คุณสามารถเขียน HTML แรกของคุณได้ พิมพ์หรือคัดลอกสิ่งต่อไปนี้ลงในไฟล์ index.html เปล่าของคุณ:

<html>
  <เนื้อหา>
    <p>สวัสดีชาวโลก!</p>
  </body>
</html>

มีชิ้นส่วนพื้นฐานบางส่วนให้ดูที่นี่:

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

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

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

ทำรัง

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

โปรดจำไว้ว่าคุณสามารถนึกถึงองค์ประกอบ HTML ส่วนใหญ่เป็นคอนเทนเนอร์ ตัวอย่างเช่น ในโค้ดด้านบน:

• และ   แท็ก  <html> ประกอบด้วย   องค์ประกอบ</html><body>
• และ   แท็ก  <body> ประกอบด้วย   องค์ประกอบ</body><p>
• แท็ก และ มีข้อความบาง  <p> ส่วน</p>

การเยื้อง

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

เท่าที่เบราว์เซอร์ของคุณดำเนินการ จำนวนที่คุณเยื้องแต่ละองค์ประกอบจะไม่สร้างความแตกต่าง เบราว์เซอร์ของคุณสามารถอ่านโค้ดในรูปแบบนี้ได้อย่างง่ายดาย:

<html><body><p>สวัสดีชาวโลก!</p></body></html>

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

ดูหน้าเว็บของคุณ

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

1. เปิดFile ExplorerหรือFinderของคุณ
2. ไปที่ โครงการ GCF Programming Tutorialsแล้วคลิกด้านใน
3. ดับเบิลคลิกไฟล์index.html ของคุณ

ไฟล์ควรเปิดในเว็บเบราว์เซอร์เริ่มต้นของคุณ คุณควรเห็นสิ่งนี้:

Read More

องค์ประกอบข้อความใน HTML

การเพิ่มองค์ประกอบข้อความใน HTML

บทเรียนนี้เป็นส่วนหนึ่งของชุด  วิชาการเขียนโปรแกรมคอมพิวเตอร์ คุณสามารถไปที่  Intro to Programming  หากคุณต้องการเริ่มต้นตั้งแต่ต้น

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

องค์ประกอบย่อหน้า

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

<p>นี่คือย่อหน้า</p>

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

องค์ประกอบหัวเรื่อง

เช่นเดียวกับองค์ประกอบย่อหน้า องค์ประกอบส่วนหัวยังใช้เพื่อแสดงข้อความบนหน้าจอ โดยทั่วไปจะใช้เพื่อสร้างส่วนหัวของส่วน 

<h1>นี่คือองค์ประกอบส่วนหัว</h1>

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

องค์ประกอบของส่วนหัวมีหกระดับเริ่มต้นซึ่ง คุณสามารถพิจารณา <h1>ได้<h6>ว่าเป็นลำดับความสำคัญ ตัวอย่างเช่น หากคุณใส่ an <h1>บนหน้าเว็บของคุณ ก็ปลอดภัยที่จะถือว่ามันเป็นส่วนหัวของส่วนที่สำคัญที่สุดและอาจอยู่ที่ด้านบนสุดของหน้าของคุณ ในขณะที่ an <h2>จะมีความสำคัญน้อยกว่าเล็กน้อยและอื่นๆ เป็นต้น 

พวกเขายังมาพร้อมกับสไตล์เบราว์เซอร์เริ่มต้นซึ่งช่วยเสริมลำดับความสำคัญ: <h1>องค์ประกอบใหญ่ที่สุด องค์ประกอบ<h2>เล็กกว่า และอื่นๆ

<h1>นี่คืออันที่ใหญ่ที่สุด</h1>
<h2>อันนี้เล็กกว่านิดหน่อย</h2>
<h3>อันนี้เล็กกว่าอีก</h3>
<h4>พวกมันเล็กลงเรื่อยๆ</h4>
<h5>อันนี้ไม่ใหญ่ขนาดนั้น</h5>
<h6>ตอนนี้ค่อนข้างเล็กจริงๆ</h6>

องค์ประกอบการจัดรูปแบบข้อความ

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

• B เก่า : <b> องค์ประกอบทำให้เนื้อหาเป็นตัวหนา
• ตัวเอียง : <i>องค์ประกอบทำให้เนื้อหาเป็นตัวเอียง 
• ขีดเส้นใต้ : <u>องค์ประกอบขีดเส้นใต้เนื้อหา

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

<p>คำเหล่านี้ไม่ใช่ตัวหนา แต่ <b>สองคำนี้</b>คือ</p>

HTML นั้นจะแสดงดังนี้:

ลองสิ่งนี้!

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

<h1>ราตรีสวัสดิ์อันยาวนาน</h1>
<h3><u>บทที่ 1: เมืองและความเงียบ</u></h3>
<p>นักสืบฮาร์ดคาสเซิลตัวสั่นเมื่อได้ยินเสียงเคาะประตู เที่ยงคืนของวันเสาร์ และมีใครกำลังมองหารองเท้ายางอยู่หรือเปล่า? มันมีกลิ่นเหมือนปัญหา เพราะถ้าเขาได้เรียนรู้สิ่งหนึ่งในช่วงเวลาที่เขาเป็นตาส่วนตัว นั่นคือผีทั้งหมดของเมืองจะออกมาในเวลากลางคืน</p>
<p><i>ฉันหวังว่าคุณจะไม่หาเรื่องทะเลาะ</i> เขาคิดกับตัวเอง <i>เพราะถ้าคุณเจอ คุณก็เจอมัน</i></p>

ป้อนองค์ประกอบ HTML ของคุณในการป้อนข้อมูลที่นี่:

 

เพิ่ม CSS ของเรา 

 

ทำด้วยตัวคุณเอง!

เปิด   ไฟล์  index.html ของโครงการบทช่วย สอนการเขียนโปรแกรม GCF  ในโปรแกรมแก้ไขข้อความ แล้วเพิ่ม  องค์ประกอบข้อความ เพื่อความเข้าใจที่ดีที่สุด อย่าลืมพิมพ์โค้ดนี้จริงๆ แทนที่จะคัดลอกและวาง 

1. เมื่อคุณสร้างไฟล์นี้เป็นครั้งแรก คุณมีองค์ประกอบเนื้อหาจริงหนึ่งรายการในหน้านี้แล้ว ก่อนอื่นให้ค้นหาองค์ประกอบนั้น:

   <p>สวัสดีชาวโลก!</p>

2. ไปข้างหน้าและ  ลบองค์ประกอบนั้น 
3. เรามาเริ่มสร้างบางสิ่งที่เหมือนหน้าเว็บจริงที่คุณอาจเห็นในชีวิตประจำแทน: หน้าเว็บบทวิจารณ์ภาพยนตร์ เริ่มต้นด้วย  หัวข้อและตรวจสอบให้แน่ใจว่าได้ใส่ไว้ใน  <body> องค์ประกอบ โดยที่ <p>องค์ประกอบของคุณเคยอยู่มาก่อน: 

   <h1>บทวิจารณ์ภาพยนตร์คลาสสิกของ Cinema</h1>

4. ด้านล่างให้เพิ่ม  หัวข้อย่อย แม้ว่าหัวเรื่องแรกจะเป็นหัวเรื่องหลักของหน้าเว็บทั้งหมดของคุณ แต่หัวเรื่องนี้จะเป็นเพียงหัวเรื่องสำหรับบทวิจารณ์ภาพยนตร์ฟอร์มยักษ์ที่แต่งขึ้น: 

   <h2>รีวิว: Basketball Dog (2018)</h2>

5. ตอน นี้ขอเพิ่ม  ข้อความ นี่คือเนื้อแท้ของบทวิจารณ์ของคุณ ดังนั้นจึงมีคำอื่นๆ อีกมาก แต่โปรดสังเกตว่าคำเหล่านั้นยังคงถูกห่อด้วย  <p> แท็กง่ายๆ หนึ่งคำสำหรับแต่ละย่อหน้า เพิ่มสิ่งนี้ใต้  <h1> องค์ประกอบที่คุณเพิ่งเพิ่ม:

   <p>4 จาก 5 ดาว</p>
   <p>จากผู้กำกับวิคกี เฟลมมิง สู่เรื่องราวอันอบอุ่นของเด็กชายชื่อพีท (เทรนต์ ดักสัน) และโรเวอร์ สุนัขของเขา (ให้เสียงโดยบรินสัน ลัมเบิลบรันต์) คุณอาจคิดว่าเด็กผู้ชายกับสุนัขของเขาเรียนรู้คุณค่าที่แท้จริงของมิตรภาพฟังดูคุ้นเคย แต่การหักมุมครั้งใหญ่ทำให้ภาพยนตร์เรื่องนี้แตกต่างออกไป นั่นคือ Rover เล่นบาสเก็ตบอล และเขาก็เล่นเก่งไม่แพ้กัน</p>
   <p>แม้ว่าอาจไม่จำเป็นต้องรวมเกมการแข่งขันชิงแชมป์ของ Rover ทั้ง 150 นาทีแบบเรียลไทม์ แต่ Basketball Dog จะทำให้คุณสนใจตลอดรันไทม์ 4 ชั่วโมง และตอนจบจะทำให้คนรักสุนัขต้องเสียน้ำตา หากคุณรักกีฬาบาสเก็ตบอลหรือสัตว์เลี้ยง นี่คือภาพยนตร์สำหรับคุณ</p>
   <p>ค้นหารายชื่อนักพากย์ทั้งหมดได้ที่เว็บไซต์ Basketball Dog</p>
   

6. เนื่องจากเธอเป็นผู้กำกับภาพยนตร์ ดูเหมือนว่า "วิคกี เฟลมมิง" อาจเป็นชื่อที่สำคัญที่สุดในย่อหน้าเหล่านั้น ดังนั้นมาทำให้เป็น  ตัวหนา เพื่อดึงดูดความสนใจให้มากขึ้น ห่อชื่อนั้นด้วย  <b> และ  </b> แท็ก เช่น: 

   <b>วิกกี้ เฟลมมิ่ง</b>

7. นอกจากนี้ อาจเป็นความคิดที่ดีที่จะกำหนดระดับดาวนอกเหนือจากข้อความที่เหลือด้วย ลองตัวเอียงที่จะแยกมัน ตัดเฉพาะคำเหล่านั้นด้วย แท็ <i>ก</i>เช่น:

   <p><i>4 จาก 5 ดาว</i></p>

เมื่อคุณทำทั้งหมดนี้แล้ว โค้ดที่สมบูรณ์ของคุณควรมีลักษณะดังนี้:

<html>
  <เนื้อหา>
    <h1>บทวิจารณ์ภาพยนตร์คลาสสิกของ Cinema</h1>
    <h2>รีวิว: Basketball Dog (2018)</h2>
    <p><i>4 จาก 5 ดาว</i></p>
    <p>จากผู้กำกับ <b>วิคกี เฟลมมิง</b> สู่เรื่องราวอันอบอุ่นของเด็กชายชื่อพีท (เทรนต์ ดักสัน) และโรเวอร์ สุนัขของเขา (ให้เสียงโดยบรินสัน ลัมเบิลบรันต์) คุณอาจคิดว่าเด็กผู้ชายกับสุนัขของเขาเรียนรู้คุณค่าที่แท้จริงของมิตรภาพฟังดูคุ้นเคย แต่การหักมุมครั้งใหญ่ทำให้ภาพยนตร์เรื่องนี้แตกต่างออกไป นั่นคือ Rover เล่นบาสเก็ตบอล และเขาก็เล่นเก่งไม่แพ้กัน</p>
    <p>แม้ว่าอาจไม่จำเป็นต้องรวมเกมการแข่งขันชิงแชมป์ของ Rover ทั้ง 150 นาทีแบบเรียลไทม์ แต่ Basketball Dog จะทำให้คุณสนใจตลอดรันไทม์ 4 ชั่วโมง และตอนจบจะทำให้คนรักสุนัขต้องเสียน้ำตา หากคุณรักกีฬาบาสเก็ตบอลหรือสัตว์เลี้ยง นี่คือภาพยนตร์สำหรับคุณ</p>
    <p>ค้นหารายชื่อนักพากย์ทั้งหมดได้ที่เว็บไซต์ Basketball Dog</p>
  </body>
</html>

ดับเบิลคลิก  ไฟล์ index.html ของคุณ  เพื่อโหลดในเบราว์เซอร์ และคุณจะเห็นสิ่งนี้ หน้าเว็บของคุณเริ่มดูเหมือนหน้าเว็บจริงมากขึ้น!

Read More

ลิงค์และรูปภาพใน HTML

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

แอตทริบิวต์ HTML 

 

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

ชื่อ = "ค่า"

ตัวอย่างเช่น นี่คือองค์ประกอบที่มีแอตทริบิวต์ HTML ซึ่งชื่อคือ "id" และค่าคือ "myParagraph":

องค์ประกอบ HTML ใดๆ สามารถมีแอตทริบิวต์ได้ และมีแอตทริบิวต์ HTML ที่หลากหลายพร้อมฟังก์ชันที่แตกต่างกัน แต่เราจะพูดถึงในภายหลัง สิ่งสำคัญที่ทำให้ลิงก์และรูปภาพแยกจากกันคือ  ต้องมีแอตทริบิวต์ HTML เพื่อทำอะไรเลย

ลิงค์ 

 

องค์ประกอบ HTML สำหรับลิงก์เรียกว่าองค์ประกอบจุดยึด องค์ประกอบสมอที่ไม่มีแอตทริบิวต์ HTML อาจมีลักษณะดังนี้:

<a>คลิกฉัน</a>

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

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

<a href="https://edu.gcfglobal.org/">คลิกฉัน</a>

เพิ่มสองชิ้นที่นี่:

• ชื่อแอตทริบิวต์ : ในกรณีนี้ ชื่อคือ  hrefและจะเหมือนกันสำหรับองค์ประกอบจุดยึดใดๆ ไม่ว่าคุณต้องการให้ไปที่ใด ย่อมาจาก Hypertext Reference แต่สิ่งที่คุณต้องจำก็คือhref เช่นเดียวกับแอตทริบิวต์ส่วนใหญ่ จะมีเครื่องหมายเท่ากับนำหน้าค่าตามหลัง
• ค่าแอตทริบิวต์ : ขึ้นอยู่กับตำแหน่งที่คุณต้องการให้ลิงก์ไป ค่าใดๆ ที่คุณป้อนในที่นี้ควรอยู่ในเครื่องหมายคำพูด และสำหรับตัวอย่างนี้คือหน้าแรกของไซต์นี้: "https://edu.gcfglobal.org/"

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

 

Read More

องค์ประกอบเชิงโต้ตอบใน HTML

การเพิ่มองค์ประกอบแบบโต้ตอบใน HTML

บทเรียนนี้เป็นส่วนหนึ่งของชุด  วิชาการเขียนโปรแกรมคอมพิวเตอร์ คุณสามารถไปที่  Intro to Programming  หากคุณต้องการเริ่มต้นตั้งแต่ต้น

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

ปุ่ม

 

องค์ประกอบ HTML สำหรับปุ่มคือสิ่งที่คุณคาดเดาได้:

<ปุ่ม>กดฉัน</ปุ่ม>

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

   

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

<ปุ่ม>
  <img src="https://media.gcflearnfree.org/global/coding/hamburger-button.png">
</ปุ่ม>

ในเบราว์เซอร์จะแสดงดังนี้:

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

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

อินพุต

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

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

<ประเภทการป้อนข้อมูล="ข้อความ">
<ประเภทอินพุต = "ช่องทำเครื่องหมาย">

ขอให้สังเกตว่าพวกเขาใช้องค์ประกอบ HTML เดียวกัน โดย มี ค่าแอตทริบิวต์ HTML<input>ต่างกัน ค่าเหล่านี้ให้ข้อมูลเพียงพอแก่เบราว์เซอร์เพื่อแสดงสองสิ่งที่แตกต่างกันโดยสิ้นเชิงเมื่อโหลด:

การป้อนข้อความ 

 

ช่องทำเครื่องหมาย 

ในทางกลับกัน การป้อนข้อมูลแบบเลื่อนลงจะทำโดยใช้องค์ประกอบที่เลือกซึ่งมีองค์ประกอบตัวเลือก จำนวน หนึ่ง HTML จะมีลักษณะดังนี้:

<เลือก>
  <option>ตัวเลือกแรก</option>
  <option>อีกอันหนึ่ง</option>
  <option>กลุ่มตัวเลือกที่นี่</option>
</เลือก>

องค์ประกอบนี้มีโครงสร้างคล้ายกับ องค์ประกอบ <ol>and <ul>ที่คุณใช้สร้างรายการ นั่นเป็นเพราะ<select>องค์ประกอบนั้นไม่แสดง แต่จะทำหน้าที่เป็นคำแนะนำเพื่อบอกเบราว์เซอร์ถึงวิธีแสดง<option>องค์ประกอบที่ซ้อนอยู่ภายใน หากคุณต้องการแสดง HTML ข้างต้นในเบราว์เซอร์ คุณจะเห็นสิ่งนี้: 

      ตัวเลือกแรก        อีกอันหนึ่ง        ตัวเลือกมากมายที่นี่

Read More

องค์ประกอบระดับบล็อก อินไลน์ และองค์กร

องค์ประกอบระดับบล็อก อินไลน์ และองค์กร

 

บทเรียนนี้เป็นส่วนหนึ่งของชุด  วิชาการเขียนโปรแกรมคอมพิวเตอร์ คุณสามารถไปที่  Intro to Programming  หากคุณต้องการเริ่มต้นตั้งแต่ต้น

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

องค์ประกอบระดับบล็อก

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

• <p>
• <h1>ผ่าน<h6>
• <ul>

ยก ตัวอย่าง<p>องค์ประกอบ แม้ว่าคุณจะใส่เพียงคำเดียวใน<p>องค์ประกอบ มันก็ใช้ความกว้างทั้งหมดที่มีอยู่ ด้านล่างเป็น<p>องค์ประกอบที่ได้รับการลงสี สังเกตว่ามันลากจากปลายด้านหนึ่งของภาพไปยังอีกด้านหนึ่ง แม้ว่าจริงๆ แล้วจะมีข้อความบางส่วนอยู่ในนั้นก็ตาม

เนื่องจากองค์ประกอบระดับบล็อกใช้ความกว้างทั้งหมดที่มีอยู่ จึงวางซ้อนกันแทนที่จะเรียงกัน:

องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์เป็นองค์ประกอบ HTML ที่ใช้ความกว้างของเนื้อหาเท่านั้น คุณเคยเห็นสิ่งเหล่านี้เช่นกัน:

• <a>
• <b>
• <i>
• <img>

เพื่อให้เห็นภาพ ลองนำกอง<p>องค์ประกอบจากส่วนสุดท้ายมาสร้าง<a>เป็นองค์ประกอบทั้งหมดแทน <a>องค์ประกอบเป็นองค์ประกอบแบบอินไลน์ แทนที่จะเป็นระดับบล็อก ซึ่งหมายความว่าแทนที่จะใช้ความกว้างทั้งหมดที่มีอยู่ กลับใช้พื้นที่เพียงพอสำหรับเนื้อหาเท่านั้น ในกรณีนี้ นั่นคือข้อความ นี่คือสีสำหรับการมองเห็น:

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

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

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

องค์ประกอบขององค์กร

รูปแบบที่บริสุทธิ์ที่สุดขององค์ประกอบระดับบล็อกและอินไลน์คือองค์ประกอบ HTML สององค์ประกอบที่ใช้เป็นหลักในการจัดระเบียบองค์ประกอบอื่นๆ: <div>และ<span>

แผนก

องค์ประกอบ<div>นี้เป็นองค์ประกอบระดับบล็อกที่ใช้เพื่อจัดกลุ่มองค์ประกอบอื่นๆโดยเฉพาะ ตัวอย่างเช่น คุณอาจจัดกลุ่มย่อหน้าสองสามย่อหน้าด้วย<div>องค์ประกอบหนึ่งๆ และจะมีลักษณะดังนี้:

<div>
  <p>นี่คือองค์ประกอบย่อหน้า ซึ่งเป็นระดับบล็อก</p>
  <p>นี่คือองค์ประกอบย่อหน้าอื่น สิ่งเดียวกัน.</p>
  <p>ลองดูสิ มันกำลังกองรวมกัน</p>
</div>

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

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

ช่วง

องค์ประกอบ<span>ทำหน้าที่คล้ายกับ<div>องค์ประกอบ แต่สำหรับองค์ประกอบแบบอินไลน์ แทนที่จะเป็นระดับบล็อก ตัวอย่างเช่น สมมติว่าคุณต้องการจัดกลุ่มคำบางคำใน<p>องค์ประกอบใดองค์ประกอบหนึ่ง แต่ไม่ใช่ทั้งหมด เนื่องจาก<div>องค์ประกอบเป็นระดับบล็อก จึงไม่เหมาะกับงานนั้น แต่<span>จะ:

<p>นี่คือย่อหน้า แต่ <span>คำเหล่านี้</span> จะถูกจัดกลุ่ม</p>

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

ทำด้วยตัวคุณเอง!

เปิด   ไฟล์  index.html ของโครงการบทช่วย สอนการเขียนโปรแกรม GCF  ในโปรแกรมแก้ไขข้อความ แล้วเพิ่มองค์ประกอบองค์กร ก่อนที่คุณจะเริ่มใช้ CSS และ JavaScript มันอาจจะดูเหมือนไม่จำเป็น แต่ต่อไป คุณจะดีใจที่ได้ใช้มัน สำหรับตอนนี้ เรามาเพิ่ม<div>องค์ประกอบหนึ่งรอบเนื้อหาบทวิจารณ์ภาพยนตร์ของคุณ

1. ขั้นแรก ค้นหา<h2>ส่วนหัวขององค์ประกอบของคุณ:

   <h2>รีวิว: Basketball Dog (2018)</h2>

2. เพิ่ม<div>แท็กเปิดของคุณก่อนองค์ประกอบนั้น:

   <div>

3. จากนั้น ค้นหาย่อหน้าสุดท้ายของคุณด้วยลิงก์: 

   เรียนรู้เพิ่มเติมที่ <a href="https://edu.gcfglobal.org/">GCFLearnFree.org</a>

4. เพิ่ม</div>แท็กปิดของคุณหลังองค์ประกอบนั้น: 

   </div>

5. ตอนนี้ องค์ประกอบทั้งหมดระหว่าง แท็ก <div>และ</div> อยู่ในองค์ประกอบนั้น ดังนั้นคุณควรเยื้องทุกอย่างระหว่างแท็ก เพื่อให้ HTML ของคุณสามารถอ่านได้

เมื่อคุณทำทั้งหมดนี้แล้ว โค้ดแบบเต็มของคุณควรมีลักษณะดังนี้:

<html>
  <เนื้อหา>
    <h1>บทวิจารณ์ภาพยนตร์คลาสสิกของ Cinema</h1>
    <div>
      <h2>รีวิว: Basketball Dog (2018)</h2>
      <img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">
      <p><i>4 จาก 5 ดาว</i>
      <p>จากผู้กำกับ <b>วิคกี เฟลมมิง</b> สู่เรื่องราวอันอบอุ่นของเด็กชายชื่อพีท (เทรนต์ ดักสัน) และโรเวอร์ สุนัขของเขา (ให้เสียงโดยบรินสัน ลัมเบิลบรันต์) คุณอาจคิดว่าเด็กผู้ชายกับสุนัขของเขาเรียนรู้คุณค่าที่แท้จริงของมิตรภาพฟังดูคุ้นเคย แต่การหักมุมครั้งใหญ่ทำให้ภาพยนตร์เรื่องนี้แตกต่างออกไป นั่นคือ Rover เล่นบาสเก็ตบอล และเขาก็เล่นเก่งไม่แพ้กัน</p>
      <p>ภาพยนตร์เรื่องนี้มีทุกสิ่งที่คุณต้องการ:</p>
      <ul>
        <li>บาสเก็ตบอล</li>
        <li>สุนัข</li>
        <li>ใจจดใจจ่อกัดเล็บ</li>
      </ul>
      <p>แม้ว่าอาจไม่จำเป็นต้องรวมเกมการแข่งขันชิงแชมป์ของ Rover ทั้ง 150 นาทีแบบเรียลไทม์ แต่ Basketball Dog จะทำให้คุณสนใจตลอดรันไทม์ 4 ชั่วโมง และตอนจบจะทำให้คนรักสุนัขต้องเสียน้ำตา หากคุณรักกีฬาบาสเก็ตบอลหรือสัตว์เลี้ยง นี่คือภาพยนตร์สำหรับคุณ</p>
      <p>ค้นหารายชื่อนักแสดงทั้งหมดได้ที่เว็บไซต์ <a href="https://edu.gcfglobal.org">Basketball Dog</a></p>
      <ปุ่ม>แสดงรีวิวถัดไป</ปุ่ม>
    </div>
  </body>
</html>

เปิดFile ExplorerหรือFinderและไปที่ โครงการ GCF Programming Tutorialsจากนั้นดับเบิลคลิกที่ไฟล์ index.html หน้าเว็บของคุณควรเปิดขึ้นในเบราว์เซอร์เริ่มต้น แต่โปรดจำไว้ว่า<div>องค์ประกอบนั้นควรมองไม่เห็น คุณเพียงแค่วางไว้ที่นั่นเพื่อเตรียมพร้อมสำหรับขั้นตอนต่อไป ในเบราว์เซอร์ของคุณ คุณควรเห็นสิ่งนี้

ขอแสดงความยินดี คุณได้สร้างสิ่งแรกของคุณแล้ว<div>!

 

Read More