เครื่องมือที่จำเป็น
ในการอธิบายแนวคิดของการจัดตำแหน่งใน HTML อย่างละเอียด เราต้องพูดถึงเครื่องมือที่จำเป็นบางอย่างที่จำเป็นในการเรียกใช้โค้ด HTML หนึ่งคือตัวแก้ไขข้อความและตัวที่สองคือเบราว์เซอร์ โปรแกรมแก้ไขข้อความอาจเป็นแผ่นจดบันทึก ประเสริฐ แผ่นจดบันทึก ++ หรืออื่นๆ ที่อาจช่วยได้ ในคู่มือนี้ เราได้ใช้แผ่นจดบันทึก แอปพลิเคชันเริ่มต้นใน Windows และ Google Chrome เป็นเบราว์เซอร์
รูปแบบ HTML
เพื่อให้เข้าใจการจัดตำแหน่ง เราต้องมีความรู้พื้นฐาน HTML ก่อน เราได้นำเสนอภาพหน้าจอของโค้ดตัวอย่าง
< html >
< ศีรษะ >...</ ศีรษะ >
< ร่างกาย >….</ ร่างกาย >
</ html >
HTML มีสองส่วนหลัก หนึ่งคือศีรษะและอีกอันหนึ่งคือร่างกาย แท็กทั้งหมดเขียนในวงเล็บเหลี่ยม ส่วนหัวเกี่ยวข้องกับการตั้งชื่อหน้า html โดยใช้แท็กของชื่อ และใช้คำสั่งสไตล์ในหัวด้วย ในทางกลับกัน เนื้อหาเกี่ยวข้องกับแท็กข้อความ รูปภาพ หรือวิดีโออื่นๆ ทั้งหมด ฯลฯ กล่าวคือ สิ่งที่คุณต้องการเพิ่มในหน้า html ของคุณจะถูกเขียนไว้ในส่วนเนื้อหาของ html
สิ่งหนึ่งที่ฉันต้องเน้นที่นี่คือการเปิดและปิดแท็ก แต่ละแท็กที่เขียนจะต้องปิด ตัวอย่างเช่น Html มีแท็กเริ่มต้นของ และแท็กปิดท้ายคือ . ดังนั้นจึงสังเกตได้ว่าแท็กปิดท้ายมีเครื่องหมายทับตามด้วยชื่อแท็ก แท็กอื่นๆ ทั้งหมดก็ใช้แนวทางเดียวกันเช่นเดียวกัน ตัวแก้ไขข้อความแต่ละตัวจะถูกบันทึกด้วยนามสกุลของ html ตัวอย่างเช่น เราใช้ไฟล์ชื่อ example.html จากนั้นคุณจะเห็นว่าไอคอนแผ่นจดบันทึกเปลี่ยนเป็นไอคอนเบราว์เซอร์
เพราะการจัดวางเป็นเนื้อหาของการจัดสไตล์ สไตล์ใน html มีสามประเภท สไตล์อินไลน์ สไตล์ภายในและภายนอก อินไลน์มีความหมายในแท็ก ภายในเขียนอยู่ภายในหัว ในขณะเดียวกัน สไตล์ภายนอกจะถูกเขียนในไฟล์ CSS แยกต่างหาก
รูปแบบอินไลน์ของข้อความ
ตัวอย่าง 1
ตอนนี้ได้เวลาอภิปรายตัวอย่างที่นี่แล้ว พิจารณาภาพที่แสดงด้านบน ในไฟล์แผ่นจดบันทึกนั้น เราได้เขียนข้อความธรรมดาๆ เมื่อเราเรียกใช้เป็นเบราว์เซอร์ จะแสดงผลลัพธ์ด้านล่างในเบราว์เซอร์
หากเราต้องการให้ข้อความนี้แสดงตรงกลาง เราจะเปลี่ยนแท็ก
แท็กนี้เป็นแท็กแบบอินไลน์ เราจะเขียนแท็กนี้เมื่อเราแนะนำแท็กย่อหน้าในเนื้อหา html หลังข้อความ ให้ปิดแท็กย่อหน้า บันทึกแล้วเปิดไฟล์ในเบราว์เซอร์
ย่อหน้าจะถูกจัดชิดตรงกลางตามที่แสดงในเบราว์เซอร์ แท็กที่ใช้ในตัวอย่างนี้ใช้สำหรับการจัดตำแหน่งใดๆ เช่น สำหรับด้านซ้าย ด้านขวา และตรงกลาง แต่ถ้าคุณต้องการจัดแนวข้อความให้อยู่ตรงกลางเท่านั้น แท็กเฉพาะจะถูกใช้เพื่อจุดประสงค์นี้
< ศูนย์กลาง > …… ..</ ศูนย์กลาง >ใช้แท็กตรงกลางก่อนและหลังข้อความ สิ่งนี้จะแสดงผลเช่นเดียวกับตัวอย่างก่อนหน้า
ตัวอย่าง 2
นี่คือตัวอย่างการจัดตำแหน่งหัวเรื่องแทนที่จะเป็นย่อหน้าในข้อความ html ไวยากรณ์สำหรับการจัดแนวส่วนหัวนี้เหมือนกัน ซึ่งสามารถทำได้ทั้งผ่านแท็กหรือโดยการจัดรูปแบบอินไลน์หรือเพิ่มแท็กจัดตำแหน่งภายในแท็กส่วนหัว
ผลลัพธ์จะแสดงในเบราว์เซอร์ แท็กส่วนหัวได้แปลงข้อความธรรมดาเป็นส่วนหัว และแท็กได้จัดตำแหน่งไว้ตรงกลาง
ตัวอย่างที่ 3
จัดข้อความให้อยู่ตรงกลาง
พิจารณาตัวอย่างที่มีย่อหน้าที่แสดงในเบราว์เซอร์ เราจำเป็นต้องจัดตำแหน่งนี้ให้อยู่ตรงกลาง
เราจะเปิดไฟล์นี้ในแผ่นจดบันทึกแล้วจัดตำแหน่งให้อยู่ในตำแหน่งกึ่งกลางโดยใช้แท็ก
< NS สไตล์ =ข้อความ-align: ศูนย์ ;>หลังจากเพิ่มแท็กนี้ในแท็กย่อหน้าแล้ว โปรดบันทึกไฟล์และเรียกใช้บนเบราว์เซอร์ คุณจะเห็นว่าขณะนี้ย่อหน้าอยู่กึ่งกลาง ดูภาพด้านล่าง
จัดข้อความชิดขวา
การเอนข้อความไปทางขวาจะคล้ายกับการวางตำแหน่งไว้ตรงกลางหน้า เพียงคำตรงกลางจะถูกแทนที่ด้วยด้านขวาในแท็กย่อหน้า
< NS สไตล์ =ข้อความ-align: ครับ ;>………..</ NS >การเปลี่ยนแปลงสามารถดูได้ผ่านภาพต่อท้ายด้านล่าง
บันทึกและรีเฟรชหน้าเว็บในเบราว์เซอร์ ข้อความถูกย้ายไปทางด้านขวาของหน้า
การจัดรูปแบบข้อความภายใน
ตัวอย่าง1
ตามที่อธิบายไว้ข้างต้น css ภายใน (cascading style sheet) หรือ internal styling เป็นประเภทของ css ที่กำหนดไว้ในส่วนหัวของ html ของหน้า มันทำงานคล้ายกับแท็กภายในทำ
พิจารณาหน้าที่แสดงด้านบน; มันมีหัวเรื่องและย่อหน้าอยู่ในนั้น เรามีข้อกำหนดในการดูข้อความที่อยู่ตรงกลาง การจัดแนวแบบอินไลน์จำเป็นต้องมีการเขียนแท็กด้วยตนเองในแต่ละย่อหน้า แต่การจัดรูปแบบภายในสามารถนำไปใช้กับแต่ละย่อหน้าของข้อความได้โดยอัตโนมัติโดยกล่าวถึง p ในคำสั่งรูปแบบ ไม่จำเป็นต้องเขียนแท็กใด ๆ ในแท็กย่อหน้า ตอนนี้สังเกตรหัสและใช้งานได้
< สไตล์ >NS{ข้อความ-align: ศูนย์กลาง}
</ สไตล์ >
แท็กนี้เขียนขึ้นภายในแท็กสไตล์ในส่วนหัว ตอนนี้ให้รันโค้ดในเบราว์เซอร์
เมื่อคุณเรียกใช้หน้าในเบราว์เซอร์ คุณจะเห็นว่าย่อหน้าทั้งหมดอยู่ตรงกลางของหน้า แท็กนี้ใช้กับทุกย่อหน้าที่มีอยู่ในข้อความ
ตัวอย่าง 2
ในตัวอย่างนี้ เช่นเดียวกับย่อหน้า เราจะจัดตำแหน่งหัวเรื่องทั้งหมดในข้อความไปทางด้านขวา เพื่อจุดประสงค์นี้ เราจะพูดถึงหัวเรื่องในคำสั่งสไตล์ในหัว
H2, h3{
ข้อความ-align: ขวา
}
หลังจากบันทึกไฟล์แล้ว ให้เรียกใช้ไฟล์แผ่นจดบันทึกในเบราว์เซอร์ คุณจะเห็นว่าส่วนหัวอยู่ทางด้านขวาของหน้า HTML
ตัวอย่างที่ 3
ในการจัดรูปแบบภายใน อาจมีสถานการณ์ที่คุณต้องจัดแนวข้อความเฉพาะบางย่อหน้าในข้อความในขณะที่บางย่อหน้ายังคงเหมือนเดิม ดังนั้นเราจึงใช้แนวคิดของคลาส เราแนะนำคลาสด้วยเมธอด dot ภายในแท็กสไตล์ จำเป็นต้องเพิ่มชื่อของคลาสภายในแท็กย่อหน้าที่คุณต้องการจัดตำแหน่ง
< สไตล์ >.ศูนย์กลาง{
ข้อความ-align: ศูนย์กลาง}
</ สไตล์ >
ระดับ =ศูนย์>……</ NS >
เราได้เพิ่มชั้นเรียนในสามย่อหน้าแรก ตอนนี้เรียกใช้รหัส คุณสามารถเห็นในผลลัพธ์ที่ย่อหน้าสามย่อหน้าแรกอยู่ตรงกลาง ในขณะที่คนอื่นไม่อยู่
บทสรุป
บทความนี้อธิบายว่าการจัดตำแหน่งสามารถทำได้หลายวิธีผ่านแท็กอินไลน์และแท็กภายใน