การจัดตำแหน่งของเนื้อหาแท็ก คุณลักษณะและส่วนหัวในทฤษฎีและการปฏิบัติ HTML - ย่อหน้าและส่วนหัวของหน้า HTML

สวัสดี! มาเรียนรู้พื้นฐานกันต่อไป ภาษา HTML- มาดูกันว่าคุณต้องเขียนอะไรเพื่อจัดแนวข้อความให้อยู่กึ่งกลาง ความกว้าง หรือขอบ

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

วิธีที่ 1 - ทำงานโดยตรงกับ HTML

จริงๆแล้วมันค่อนข้างง่าย ดูตัวอย่างด้านล่าง

จัดย่อหน้าให้อยู่ตรงกลาง

หากคุณต้องการย้ายส่วนของข้อความด้วยวิธีอื่น ให้ป้อนค่าต่อไปนี้แทนพารามิเตอร์ "center":

• justify – จัดข้อความให้พอดีกับความกว้างของหน้า;
• ขวา – บนขอบด้านขวา;
• ซ้าย - ไปทางซ้าย

ในการเปรียบเทียบ คุณสามารถย้ายเนื้อหาที่อยู่ในส่วนหัว (h1, h2) และคอนเทนเนอร์ (div)

วิธีที่ 2 และ 3 - การใช้สไตล์

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

บล็อกข้อความ

ในแบบฟอร์มนี้ รหัสจะถูกเขียนลงใน HTML โดยตรงเพื่อให้เนื้อหาข้อความอยู่ตรงกลาง

ยังมีอีกมาก ทางเลือกอื่นบรรลุผล คุณจะต้องทำสองสามขั้นตอน

ขั้นตอนที่ 1. ในโค้ดหลักเขียน

วัสดุข้อความ

ขั้นตอนที่ 2 ในไฟล์ CSS ที่รวมไว้ ให้ป้อนรหัสต่อไปนี้:

Rovno (จัดตำแหน่งข้อความ:ศูนย์;)

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

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

เพียงไม่กี่คำถาม:

• คุณกำลังทำโครงการที่ไม่แสวงหาผลกำไรด้านข้อมูลหรือไม่?
• คุณต้องการให้เว็บไซต์ของคุณทำงานได้ดีหรือไม่? เครื่องมือค้นหา?
• คุณต้องการหารายได้ออนไลน์หรือไม่?

หากคำตอบทั้งหมดเป็นบวก ให้ลองดูที่ o แนวทางบูรณาการในการพัฒนาเว็บไซต์ ข้อมูลจะมีประโยชน์อย่างยิ่งหากทำงานบน WordPress CMS

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

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

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

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

คุณสมบัติใน HTML

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

ตัวอย่างการทำงานกับแอตทริบิวต์

มาดูการทำงานกับแอตทริบิวต์โดยใช้ตัวอย่างกัน ตัวอย่างที่ง่ายที่สุดคือใช้แท็กย่อหน้า

ด้วยแอตทริบิวต์ "align" มาเขียนกัน:

ตัวอย่างการจัดตำแหน่งย่อหน้าด้านซ้าย

แอตทริบิวต์ "align" บอกให้เบราว์เซอร์จัดย่อหน้าให้ชิดขอบด้านซ้ายของหน้าจอ

คุณลักษณะต่อไปนี้ยังสามารถนำไปใช้กับแท็กย่อหน้า:

• align="center" – จัดตำแหน่งให้อยู่ตรงกลางหน้าจอ
• align="right" – การจัดตำแหน่งด้านขวา;
• align="justify" - จัดข้อความให้ตรงกับความกว้างของหน้าจอ

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

คุณสมบัติใน HTML

แอตทริบิวต์สี "bgcolor" ช่วยให้เราสามารถตั้งค่าสีพื้นหลังของหน้าได้ แอตทริบิวต์ "center" และ "justify" จะจัดแนวข้อความภายในตัวมันเอง กึ่งกลาง และชิดขอบ ตามลำดับ

ส่วนหัวใน HTML

ด้วยดัชนี มีดัชนีดังกล่าวเพียงหกดัชนี - ตั้งแต่ 1 ถึง 6 ซึ่งระบุขนาดของส่วนหัว (

เป็นพาดหัวข่าวที่ใหญ่ที่สุด

- เล็กที่สุด) ตัวอย่างเช่น เรามาสร้างเว็บเพจที่มีหลายส่วนหัวกัน รหัสสำหรับหน้านี้จะมีลักษณะดังนี้:

คุณสมบัติใน HTML

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

ส่วนหัวใน HTML

ในการสร้างชื่อเรื่องบนเพจ จะใช้แท็กพิเศษ ด้วยดัชนี มีดัชนีดังกล่าวเพียงหกดัชนี - ตั้งแต่ 1 ถึง 6 ซึ่งระบุขนาดของชื่อเรื่อง...

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

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

หากต้องการเลือกองค์ประกอบอินพุตที่ต้องการด้วยประเภท "ช่องทำเครื่องหมาย" คุณสามารถใช้ตัวเลือกได้ ':ช่องทำเครื่องหมาย'- ตัวอย่าง:

ที่ไหน ตัวจัดการ— ตัวจัดการที่ถูกเรียกเมื่อมีเหตุการณ์การเปลี่ยนแปลงเกิดขึ้น

การทำงานกับวัตถุการโทรกลับใน jQuery: การใช้รายการฟังก์ชันการโทรกลับ

ออบเจ็กต์ Callbacks ใน jQuery ช่วยให้คุณสร้างรายการเช่นรายการโทรกลับที่จะดำเนินการเมื่อมีการเรียกใช้เมธอดยูทิลิตี้ fire() นอกจากนี้ เมื่อเรียกใช้เมธอด fire() เป็นไปได้ที่จะส่งผ่านอาร์กิวเมนต์ที่จะใช้โดยแต่ละฟังก์ชันการโทรกลับ ตอนนี้เราจะดูวิธีการทำงานนี้โดยใช้ตัวอย่างต่างๆ

จับการสูญเสียโฟกัส วิธีการเบลอ () ใน jQuery

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

แทรกเนื้อหาก่อนเนื้อหาของออบเจ็กต์ที่เลือก before() วิธีการใน jQuery

before() วิธีการใน jQuery ช่วยให้คุณสามารถแทรกเนื้อหาหรือวัตถุเฉพาะก่อนเนื้อหาของแต่ละชุดของวัตถุที่ระบุ
ไวยากรณ์ของวิธีการนั้นง่าย:

รูปแบบที่สอง:

jQuery. วิธีการ attr() วิธีรับหรือเพิ่มแอตทริบิวต์ให้กับองค์ประกอบ

jQuery ช่วยให้เข้าถึงคุณลักษณะขององค์ประกอบที่ต้องการ ดึงค่าหรือในทางกลับกัน การตั้งค่าและการเปลี่ยนแปลงได้อย่างง่ายดาย สำหรับการปรับเปลี่ยนดังกล่าว จะใช้เมธอด attr()

วิธีการ .appendTo() ใน jQuery การเพิ่มเนื้อหาที่ส่วนท้ายขององค์ประกอบ

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

jQuery .animate() Method: ทำให้รูปภาพ ข้อความ และอะไรก็ได้เคลื่อนไหว

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

แปลงวิดีโอโดยใช้ Movavi

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

องค์ประกอบข้อความจำนวนมากบนหน้าเว็บจำเป็นต้องอยู่ตรงกลาง ส่วนใหญ่เป็นพาดหัวข่าว มาดูวิธีการจัดกึ่งกลางข้อความใน CSS

คุณสมบัติการจัดแนวข้อความ

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

• ซ้าย – จัดข้อความให้ชิดขอบซ้ายขององค์ประกอบที่ข้อความนั้นอยู่
• ขวา – จัดชิดขวา แต่ทิศทางของข้อความยังคงไม่เปลี่ยนแปลง
• ศูนย์กลาง – อยู่ตรงกลาง. นั่นคือสิ่งที่เราต้องการ ไม่จำเป็นต้องระบุพารามิเตอร์เพิ่มเติมใด ๆ - เบราว์เซอร์จะวางข้อความไว้ตรงกลางตามความละเอียดหน้าจอที่แตกต่างกัน
• Justify – การให้เหตุผล โดยที่คำในแต่ละบรรทัดถูกยืดออกจนเต็มความกว้างของบรรทัด

ตัวอย่างเช่น เรามีข้อความที่กำหนดเองพร้อมชื่อ:

หัวเรื่อง

หากต้องการให้ส่วนหัวของเราอยู่ตรงกลาง (h1) เราต้องเขียนสิ่งนี้:

H1(
การจัดแนวข้อความ: กึ่งกลาง
}

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

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

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

ดังนั้นในการจัดแนวเนื้อหาขององค์ประกอบ HTML คุณต้องกำหนดค่าค่าใดค่าหนึ่งต่อไปนี้ให้กับแอตทริบิวต์ style:

• การจัดตำแหน่งข้อความ: center- จัดแต่ละบรรทัดให้อยู่ตรงกลางขององค์ประกอบ เช่น ย่อหน้า
• การจัดแนวข้อความ: ซ้าย- แต่ละบรรทัดจะถูกกดอย่างแน่นหนาทางด้านซ้ายขององค์ประกอบ (ซึ่งเป็นค่าเริ่มต้น)
• การจัดแนวข้อความ: ขวา- แต่ละบรรทัดกดไปทางด้านขวา
• การจัดแนวข้อความ: จัดชิดขอบ- จัดแนวไปทางซ้ายและขวาขององค์ประกอบทันที ฉันจะอธิบาย. โดยทั่วไป องค์ประกอบ เช่น ย่อหน้า มักจะมีด้านหนึ่งของข้อความที่เป็นเส้นตรงและอีกด้านหนึ่งที่ "ขาด" เสมอ เนื่องจากความยาวของบรรทัดจะแตกต่างกันเล็กน้อย และเมื่อเราใช้ค่า text-align:justify แต่ละบรรทัดจะมีการกระจายความกว้างเท่าๆ กัน หากจำเป็น เบราว์เซอร์จะเพิ่มช่องว่างเพิ่มเติมระหว่างคำ และคำแรกและคำสุดท้ายของบรรทัดจะถูกกดลงในด้านที่สอดคล้องกันเสมอ ดังนั้นคุณจะได้บล็อกที่เท่ากันทั้งสองด้าน

ตัวอย่างการจัดตำแหน่งเนื้อหาแท็ก

มุ่งหน้าไปตรงกลาง.

ย่อหน้าตรงกลาง

ผลลัพธ์ในเบราว์เซอร์

มุ่งหน้าไปตรงกลาง.

ข้อความของย่อหน้าถูกกดไปทางขวา

ย่อหน้าตรงกลาง

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

การบ้าน.

1. ตั้งชื่อบทความ สองส่วน และหนึ่งส่วนย่อยในส่วนแรก และให้ชื่อบทความอยู่ตรงกลางหน้า
2. ตั้งค่าทั้งหน้าเป็น Arial และส่วนหัวทั้งหมดเป็น Times เป็นตัวเอียง
3. ตั้งค่าสีข้อความของชื่อบทความเป็น #FF6600 ส่วนเป็น #6600FF และไม่เปลี่ยนแปลงส่วนย่อย
4. เขียนหนึ่งย่อหน้าใต้แต่ละหัวข้อ โดยแต่ละย่อหน้ามีความยาวอย่างน้อยสามบรรทัดเมื่อดูในเบราว์เซอร์
5. จัดย่อหน้าที่สองให้อยู่ตรงกลาง ย่อหน้าที่สามทางด้านขวา และย่อหน้าที่สี่ให้ชิดทั้งสอง