| เบราว์เซอร์ |
|
เน็ตสเคป |
โอเปร่า |
|
มอซซิลา ไฟร์ฟอกซ์ |
|---|
| เวอร์ชัน |
5.5
|
6.0
|
7.0
|
8.0
|
8.0
|
9.0
|
7.0
|
8.0
|
9.2
|
9.5
|
1.3
|
2.0
|
3.1
|
1.5
|
2.0
|
3.0
|
|---|
| ได้รับการสนับสนุน |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
ใช่ |
|---|
| เอสเอชทีเอ็มแอล: |
3.2
|
4
|
XHTML: |
1.0
|
1.1
|
คำอธิบาย
กำหนดย่อหน้าเนื้อหา แท็ก
เป็นองค์ประกอบบล็อก ดังนั้นจึงเริ่มต้นในบรรทัดใหม่ ย่อหน้าของเนื้อหาที่อยู่ถัดจากกันจะถูกคั่นด้วยช่องว่างแนวตั้ง ขนาดของช่องว่างสามารถควบคุมได้โดยใช้สไตล์ หากไม่มีแท็กปิด จุดสิ้นสุดของย่อหน้าจะถือว่าตรงกับจุดเริ่มต้นขององค์ประกอบบล็อกถัดไป
ไวยากรณ์
เนื้อหา
เนื้อหา
ตัวเลือก
align ระบุการจัดตำแหน่งของเนื้อหา แท็กปิด
ไม่จำเป็นต้องใช้.
ตัวอย่างที่ 1: การใช้แท็ก
แท็กพี
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
คุณเพียงแค่ต้องทำเช่นนี้และทำขั้นตอนสุดท้ายให้เสร็จสิ้น
คำอธิบายของพารามิเตอร์แท็ก
จัดพารามิเตอร์
คำอธิบาย
จัดแนวบล็อกเนื้อหาไปที่ขอบ
ไวยากรณ์
ข้อโต้แย้ง
left จัดเนื้อหาชิดซ้าย ในกรณีนี้ เส้นเนื้อหาจะจัดชิดด้านซ้าย และขอบด้านขวาจะอยู่ในตำแหน่งเป็นบันได วิธีการจัดเรียงนี้เป็นวิธีที่ได้รับความนิยมมากที่สุดบนไซต์ของเรา เนื่องจากทำให้ผู้ใช้สามารถค้นหาบรรทัดใหม่ได้อย่างง่ายดายและอ่านเนื้อหาขนาดใหญ่ได้อย่างสะดวกสบาย center จัดเนื้อหาให้อยู่ตรงกลาง เนื้อหาจะถูกวางในแนวนอนในหน้าต่างเบราว์เซอร์หรือคอนเทนเนอร์ที่มีบล็อกเนื้อหาอยู่ ดูเหมือนว่าบรรทัดเนื้อหาจะพันกันบนแกนที่มองไม่เห็นซึ่งไหลผ่านกึ่งกลางของหน้าเว็บ วิธีการจัดแนวนี้ใช้กันอย่างแพร่หลายในส่วนหัวและลายเซ็นต่างๆ เช่น คำบรรยาย ช่วยให้การออกแบบเนื้อหาดูเป็นทางการและชัดเจน ในกรณีอื่นๆ ทั้งหมด การจัดกึ่งกลางไม่ค่อยได้ใช้ด้วยเหตุผลที่ทำให้ไม่สะดวกในการอ่านเนื้อหาดังกล่าวจำนวนมาก right จัดเนื้อหาให้ชิดขวา วิธีการจัดตำแหน่งนี้ทำหน้าที่เป็นศัตรูกับประเภทก่อนหน้า กล่าวคือ บรรทัดเนื้อหาจะถูกจัดชิดทางด้านขวา ในขณะที่ด้านซ้ายยังคง "ขาด" เนื่องจากขอบด้านซ้ายไม่ได้จัดแนว ซึ่งเป็นที่สำหรับอ่านบรรทัดใหม่ เนื้อหานี้จึงอ่านยากกว่าการจัดชิดซ้าย ดังนั้น การจัดชิดขวาจึงมักใช้กับหัวข้อเรื่องสั้นไม่เกิน 3 บรรทัด เราไม่พิจารณาเฉพาะไซต์ที่ต้องอ่านเนื้อหาจากขวาไปซ้าย ซึ่งบางทีวิธีการจัดตำแหน่งที่คล้ายกันอาจเป็นประโยชน์ แต่คุณเคยเห็นเว็บไซต์ดังกล่าวที่ไหนในประเทศของเรา? justify Justified ความหมายคือ จัดชิดซ้ายขวาพร้อมกัน ในการดำเนินการนี้ เบราว์เซอร์ในกรณีนี้จะเพิ่มช่องว่างระหว่างคำ ค่าเริ่มต้น
อะนาล็อกของ CSS (TSS)
ตัวอย่างที่ 2: การจัดตำแหน่งเนื้อหา
SHTML 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
แท็ก P จัดตำแหน่งพารามิเตอร์
ดูอิส เต เฟอจิฟาซิลิซี. Duis autem dolor ใน hendrerit ใน vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
สวัสดีผู้อ่านที่รักของบล็อกไซต์ วันนี้เราจะมาเริ่มพูดถึงแท็กในภาษา Html ได้แก่หัวข้อ H1, H2, H3, H4, H5, H6 เกี่ยวกับย่อหน้า P และตัวแบ่งบรรทัด Br รวมถึงแท็กเส้นแนวนอน Hr โดยใช้ตัวอย่างที่ เราจะดูที่การใช้แอตทริบิวต์และมาดูกันว่าคุณสามารถหาแอตทริบิวต์ที่เป็นไปได้ทั้งหมดสำหรับแต่ละองค์ประกอบได้จากที่ไหน และดูไวยากรณ์ของค่าสำหรับองค์ประกอบเหล่านั้น
ข้อแตกต่างที่สำคัญระหว่างแท็กอินไลน์และแท็กบล็อกคือแท็กแท็กแบบแรกสามารถติดตามกันในความกว้างได้จนกว่าแท็กจะหมด จากนั้นจึงตัดไปที่บรรทัดถัดไป
ลองบล็อกองค์ประกอบตามค่าเริ่มต้น ครอบครองพื้นที่ว่างทั้งหมดที่มีความกว้างดังนั้นองค์ประกอบบล็อกถัดไปจึงจำเป็นต้องอยู่ในบรรทัดอื่น
ตอนนี้เรามาเริ่มการศึกษาแท็กที่เป็นไปได้ทั้งหมดใน Html อย่างเป็นระบบและในเวลาเดียวกันเราจะให้ความสนใจเป็นพิเศษกับแท็กประเภทนั้นเพื่อทำความเข้าใจอย่างชัดเจนถึงความเป็นไปได้ของการใช้งานที่ถูกต้อง (ถูกต้อง) โครงสร้างแท็กแบบง่ายมีลักษณะดังนี้:
นอกจากนี้ยังมีคุณลักษณะสำหรับพวกเขา (แต่ละชุดมีชุดของตัวเอง) ซึ่งช่วยให้คุณสามารถเพิ่มคุณสมบัติบางอย่างให้กับองค์ประกอบนี้ได้ แต่เราจะพูดถึงเรื่องนี้โดยใช้ตัวอย่างเฉพาะ
เรามาเริ่มดูแนวคิดของส่วนหัวซึ่งสร้างขึ้นโดยใช้แท็กคู่ H1, H2, H3, H4, H5, H6 (ชื่อนี้มาจากตัวอักษรตัวแรกของคำว่า "ส่วนหัว" เช่น "ส่วนหัว") ได้รับการออกแบบมาเพื่อแยกส่วนต่างๆ ของข้อความออกจากกัน และทำเครื่องหมายความสำคัญโดยขึ้นอยู่กับระดับ ในภาษา HTML เวอร์ชันใหม่ แท็กและคุณลักษณะทั้งหมดที่ได้รับอนุญาตจะได้รับการระบุและอธิบายไว้ล่วงหน้า
เป็นผลให้ส่วนหัวสามารถมีได้เพียงหกระดับและองค์ประกอบเพิ่มเติม H1-H6 มีลักษณะเป็นบล็อก, เช่น. พยายามใช้พื้นที่ว่างทั้งหมดตามความกว้างของหน้า แต่มีลักษณะเฉพาะประการหนึ่ง - มีเพียงองค์ประกอบอินไลน์เท่านั้นที่สามารถมีอยู่ในแท็กส่วนหัวได้แม้ว่าตัวอย่างเช่น Div เดียวกันจะอนุญาตให้คุณรวมแท็กบล็อกอื่น ๆ ไว้ภายในได้
ที่. เบราว์เซอร์จะไม่อนุญาตให้คุณใส่ส่วนหัวของอีกระดับหนึ่งไว้ในส่วนหัวของระดับหนึ่งเพราะฉันขอย้ำอีกครั้งว่ามันเป็นองค์ประกอบบล็อก แต่ สามารถมีได้เฉพาะตัวอักษรพิมพ์เล็กเท่านั้น- โอ้วิธีการ
ส่วนหัวของระดับที่แตกต่างกัน H1-H6 จะถูกวาดในเบราว์เซอร์ที่มีแบบอักษรขนาดต่างกัน (แม้ว่าเมื่อใช้ CSS คุณสามารถตั้งค่าขนาด สี และประเภทแบบอักษรใดก็ได้สำหรับแสดงในเบราว์เซอร์ แต่ใน Html ล้วนๆ นี่เป็นกฎ) : :
หากเราพิจารณาเค้าโครงของไซต์จากมุมมองของความสะดวกในการโปรโมตเพิ่มเติม () ก็ควรค่าแก่การกล่าวถึงว่าควรมีเท่านั้น หนึ่งส่วนหัวระดับ H1 ต่อหน้า- คุณอาจใช้ H1 สองอันได้ แต่มากกว่านั้นมักจะทำให้เกิดปฏิกิริยาเชิงลบจากเครื่องมือค้นหาเมื่อพวกเขาค้นหาเอกสารของคุณ การกระทำของคุณอาจถูกมองว่าเป็นสแปมหรือเพิ่มความเกี่ยวข้อง
ไม่แนะนำให้ข้ามระดับหัวเรื่อง เช่น หลังจาก H1 คุณควรใช้ H2 เพื่อเน้นข้อความที่มีความสำคัญน้อยกว่า ฯลฯ ไม่น่าเป็นไปได้ที่สิ่งนี้จะนำมาซึ่งการลงโทษร้ายแรงจากเสิร์ชเอ็นจิ้น แต่ก็ยังดีกว่าถ้าปฏิบัติตามตรรกะในการสร้างระดับส่วนหัวในโค้ด Html
เครื่องมือค้นหาให้ความสำคัญกับคำที่อยู่ในแท็กเหล่านี้มากกว่าคำที่อยู่ในข้อความ ข้อสรุปที่ตามมาคือเมื่อเขียนบทความ คุณควรเพิ่มหัวข้อให้กับบทความที่คุณใช้ด้วย
การใช้ส่วนหัวในข้อความของบทความทำให้มองเห็นได้ชัดเจนยิ่งขึ้นและช่วยให้ผู้อ่านสำรวจชุดข้อมูลได้อย่างรวดเร็ว ฉันคิดว่าเป็นครั้งแรกที่มีข้อมูลเพียงพอและถึงเวลาที่ต้องเดินหน้าต่อไป
ย่อหน้า ตัวแบ่งบรรทัด และเส้นแนวนอน HR ในโค้ด Html
แท็ก P มาจากคำว่า "ย่อหน้า" แต่บ่อยครั้งจะเรียกว่าย่อหน้า ใช้เพื่อเน้นข้อความบางส่วนตามความหมาย ซึ่งโดยปกติจะประกอบด้วยหลายประโยค ระหว่างย่อหน้าที่สร้างโดยองค์ประกอบ P ในแนวตั้ง พื้นที่ว่างจะปรากฏขึ้นซึ่งอนุญาต แยกส่วนของข้อความเชิงตรรกะมองเห็นจากกัน
ประเด็นก็คือมันค่อนข้างยากสำหรับคน ๆ หนึ่งที่จะอ่านข้อความขนาดใหญ่หากไม่ได้แยกออกเป็นชิ้นเล็ก ๆ ตัวอย่างเช่น โดยทั่วไปฉันจะไม่เริ่มอ่านบทความที่ไม่ได้แบ่งออกเป็นย่อหน้าในโค้ด Html เพราะมันน่ารำคาญมาก
โดยการทำลายข้อความคุณเป็นอย่างมาก ลดเกณฑ์ความเหนื่อยล้าผู้เข้าชมทรัพยากรของคุณและปรับปรุงปัจจัยผู้ใช้ (เวลาที่ผู้ใช้ใช้ในเว็บไซต์ของคุณและ) ซึ่งจะส่งผลดีต่อการโปรโมต
เพื่อจุดประสงค์เดียวกัน (เพื่อรักษาความสนใจของผู้ใช้และลดความเหนื่อยล้าเมื่ออ่านบทความ) อาจมีการเพิ่มข้อความที่หลากหลายและบางครั้งบางที
อย่างไรก็ตาม แท็กย่อหน้า P ดังที่คุณอาจสังเกตเห็นแล้วนั้นเป็นคู่กัน แต่ตามข้อกำหนดของ HyperText Markup Language 4.01 องค์ประกอบการปิดท้ายของแท็กนั้นสมบูรณ์ ไม่จำเป็นต้องใช้- ในกรณีนี้เบราว์เซอร์จะต้องพิจารณาว่าจะต้องวางไว้ที่ไหน
เนื่องจาก P เป็นองค์ประกอบบล็อกและมีเฉพาะองค์ประกอบตัวพิมพ์เล็กเท่านั้นที่สามารถปรากฏภายในได้ ดังนั้นเบราว์เซอร์ที่ตรวจพบแท็กย่อหน้าเปิดจะแยกวิเคราะห์โค้ดเพิ่มเติมและทันทีที่พบองค์ประกอบบล็อกถัดไป (น่าจะเป็น P เปิดถัดไป) มันจะแทรกแท็กย่อหน้าปิดด้านหน้าทันที ในมาตรฐาน Html 5 เสรีภาพดังกล่าวมักจะไม่มีอีกต่อไปและจำเป็นในทันที คุ้นเคยกับการปิดแท็กทั้งหมดและเขียนด้วยตัวอักษรพิมพ์เล็กเท่านั้น
ย่อหน้าเป็นองค์ประกอบบล็อก ดังนั้นข้อความภายในย่อหน้าจึงมีแนวโน้มที่จะใช้พื้นที่ความกว้างที่มีอยู่ทั้งหมด นั่นคือถ้าคุณเขียน quatrain ในโค้ด Html ของเอกสารตามที่ควรจะเป็น (แต่ละบรรทัดแยกกัน) และรวม quatrain ทั้งหมดนี้ไว้ในแท็กย่อหน้า P จากนั้นในเบราว์เซอร์คุณจะเห็นว่าทั้งสี่บรรทัดของคุณรวมเข้าด้วยกัน หนึ่งและจะใช้ความกว้างทั้งหมดของพื้นที่ว่างสำหรับข้อความ
เราได้พูดคุยโดยละเอียดแล้วว่าทำไมสิ่งนี้ถึงเกิดขึ้นในบทความเกี่ยวกับ ด้วยคุณสมบัตินี้ของภาษามาร์กอัปไฮเปอร์เท็กซ์ (อักขระช่องว่างจำนวนเท่าใดก็ได้ในซอร์สโค้ดจะถูกแทนที่ด้วยช่องว่างเดียวเมื่อแสดงในเบราว์เซอร์) คุณสามารถจัดรูปแบบโค้ดของคุณในวิธีที่สะดวก โดยไม่ต้องกลัวว่าจะรบกวนการแสดงผลบน หน้าเว็บ
หากคุณต้องการเขียน quatrain ในรูปแบบที่ยอมรับโดยทั่วไปจริงๆ คุณสามารถใช้ HTML เพิ่มเติมเพื่อจุดประสงค์นี้ได้
แท็กตัวแบ่งบรรทัดที่เรียกว่า BR
(จากคำว่า "แตก"):
BR เป็นองค์ประกอบแบบอินไลน์และยังเป็น "ว่างเปล่า" เช่น เดี่ยว (ไม่มีองค์ประกอบปิด) ฟังก์ชันทั้งหมดของ BR คือทำให้เกิดการขึ้นบรรทัดใหม่เมื่อแสดงข้อความในเบราว์เซอร์ (คล้ายกับปุ่ม Enter ในโปรแกรมแก้ไขข้อความ)
การเขียนแท็ก BR (ตัวแบ่งบรรทัด) ในโค้ดไม่ได้รับการควบคุมในทางใดทางหนึ่ง คุณสามารถเขียนข้อความทั้งหมดรวมกันแล้วใส่ BR แทนการเว้นวรรคในตำแหน่งที่ถูกต้อง หรือคุณสามารถแบ่งข้อความเป็นบรรทัดในโค้ดได้ทันทีเพื่อความชัดเจน และวาง BR ที่ท้ายบรรทัดหรือที่จุดเริ่มต้น สิ่งนี้ไม่ได้เปลี่ยนสาระสำคัญ
ทรัพยากรบุคคล(คำย่อของคำว่า "กฎแนวนอน" เช่น เส้นแนวนอน) เป็นแท็ก Html ที่เรียบง่ายซึ่งวาดเส้นแนวนอน (แถบ) ทั่วทั้งความกว้างของหน้าจอและความหนา ขึ้นอยู่กับเบราว์เซอร์ที่ใช้ดู (โดยพื้นฐานแล้ว มันเป็นเครื่องหมายที่มองเห็นได้ ซึ่งโดยการเปรียบเทียบกับแท็กหัวเรื่อง ช่วยให้คุณสามารถแบ่งข้อความออกเป็นส่วนๆ เพื่อให้เข้าใจได้ง่ายขึ้น)
มัน "ว่างเปล่า" (เดี่ยว) เช่น ไม่มีคู่(แท็กปิด) นอกจาก, HR เป็นองค์ประกอบบล็อก, เช่น. โดยค่าเริ่มต้นจะใช้ความกว้างของหน้าทั้งหมดที่มีอยู่
แนวคิดเกี่ยวกับคุณลักษณะและกฎการเขียนลงในแท็ก Html
มาดูแนวคิดของแอตทริบิวต์โดยใช้องค์ประกอบง่ายๆ นี้กัน ความจริงก็คือเราสามารถเพิ่มแอตทริบิวต์ให้กับแท็กที่ถูกต้องและอธิบายไว้ในเครื่องมือตรวจสอบ WC3 ได้ ซึ่งจะทำให้เนื้อหามีคุณสมบัติที่เราต้องการ
ตัวอย่างเช่น หากคุณมีหลายย่อหน้า (ย่อหน้า) ในแถวล้อมรอบด้วยแท็ก P ที่เกี่ยวข้อง หากต้องการเปลี่ยนรูปลักษณ์ของหนึ่งในนั้น คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ที่จำเป็นให้กับองค์ประกอบ P เปิดของย่อหน้านี้ ในกรณีของแท็กเดี่ยว (ว่างเปล่า) จะไม่มีตัวเลือกสำหรับตำแหน่งที่จะเพิ่มแอตทริบิวต์ที่จำเป็น
ดังนั้นกฎข้อแรกคือ คุณลักษณะจะถูกวางไว้ในแท็กเปิดเท่านั้น(อันปิดไม่เคยมีอะไรเลย) องค์ประกอบหนึ่งสามารถมีแอตทริบิวต์ได้หลายรายการ ซึ่งแยกออกจากกันและระหว่างชื่อแท็กด้วยช่องว่าง (เงื่อนไขบังคับ) ผมขอยกตัวอย่างการใช้งานเส้นแนวนอน HR ทันที:
ก่อนอื่นเรามาดูไวยากรณ์ของแอตทริบิวต์กันก่อน พวกมันจะถูกแทรกลงในแท็กเปิด เขียนโดยคั่นด้วยช่องว่าง (รวมถึงช่องว่างหลังชื่อขององค์ประกอบ) และเป็นโครงสร้างที่มีชื่อ เครื่องหมายเท่ากับ และเขียนด้วยเครื่องหมายคำพูด (โดยปกติแล้วเป็นเรื่องปกติที่จะใส่คู่คู่) แต่มาตรฐานยังอนุญาตให้ใช้ค่าเครื่องหมายคำพูดเดี่ยวที่จับคู่) ลำดับของแอตทริบิวต์ในโค้ดแท็ก Html นั้นไม่สำคัญ
ที่นั่นฉันให้ลิงค์ไปยัง รายการแท็ก HTML ที่ถูกต้องทั้งหมด- หากในรายการนี้คุณคลิกชื่อองค์ประกอบที่คุณสนใจ (ในกรณีของเราคือฝ่ายทรัพยากรบุคคล) คุณจะเข้าสู่หน้าที่มีรายละเอียดข้อกำหนด:
คุณลักษณะทั้งหมดของแท็กใดก็ได้ แบ่งออกเป็นสามกลุ่ม:
- ทั่วไป - สามารถปรากฏในองค์ประกอบส่วนใหญ่ในภาษา HTML ในภาพด้านบน จะอยู่ด้านล่างและมีกรอบสีแดงล้อมรอบ จริงๆ แล้ว มีคุณลักษณะทั่วไปบางประการ (เพียงหกประการ) และถึงอย่างนั้น คุณก็ไม่น่าจะใช้คุณลักษณะเหล่านั้นทั้งหมดในการฝึกฝน เป็นไปได้มากว่ามีเพียงสี่ - ชื่อ และสไตล์เท่านั้น
- คุณลักษณะเหตุการณ์ - จำเป็นสำหรับทริกเกอร์การดำเนินการบางอย่างเพื่อตอบสนองต่อการกระทำของผู้ใช้หรือเหตุการณ์ของระบบ พวกมันเกี่ยวข้องกับ JavaScreet มากกว่า และในรูปด้านบนจะอยู่ที่ด้านล่างสุด (วงกลมในกรอบสีเข้ม)
- ไม่ซ้ำกัน - โดยทั่วไปแล้ว แต่ละแท็กจะมีชุดคุณลักษณะของตัวเอง ซึ่งบางแท็กอาจไม่พบเลยในองค์ประกอบอื่นๆ หากเราพิจารณาเส้นแนวนอนของ HR จะมีคุณลักษณะเฉพาะสี่ประการเท่านั้น (จัดเรียง ไม่มีเฉดสี ขนาด และความกว้าง) ส่วนอื่นๆ ทั้งหมดที่ระบุในแท็ก HR (ยกเว้นสองกลุ่มที่อธิบายไว้ด้านบน) จะถูกละเว้นโดยเบราว์เซอร์
ตัวอย่างคุณลักษณะในแท็กเส้นแนวนอน HR
ค่าของแอตทริบิวต์ต่างๆ อาจเป็นตัวเลขใดก็ได้ (ฯลฯ) หรือค่าจากชุดที่กำหนดไว้ล่วงหน้า เช่น ในกรณีจัดตำแหน่ง HR - ซ้าย|กลาง|ขวา (คุณสามารถใช้การจัดตำแหน่งแบบใดแบบหนึ่งจากสามแบบก็ได้ ตัวเลือก).
โดยทั่วไปข้อมูลเกี่ยวกับพวกเขาในตัวตรวจสอบ WC3 สามารถรับได้ไม่เพียง แต่ในรายการแท็ก Html เท่านั้น แต่ยังรวมถึงใน รายการคุณลักษณะซึ่งคุณจะพบได้ที่ลิงค์ที่ให้ไว้
รายการนี้มีตัวเลือกที่เป็นไปได้ทั้งหมดสำหรับแท็กทั้งหมดที่มีอยู่ในภาษา HTML คอลัมน์ "องค์ประกอบที่เกี่ยวข้อง" ตรงข้ามตัวเลือกที่คุณสนใจจะแสดงรายการองค์ประกอบที่แอตทริบิวต์นี้สามารถใช้ได้ คอลัมน์ "ประเภท" ระบุประเภทของข้อมูลที่สามารถใช้เป็นค่าได้
ตัวอย่างเช่น ในบรรทัดที่ขีดเส้นใต้ในรูปของแอตทริบิวต์ align สำหรับแท็ก HR อนุญาตให้ใช้ค่าคงที่เพียงสามค่าเท่านั้น ซึ่งแสดงอยู่ในรายการ (ซ้าย | กลาง | ขวา)
อีกคอลัมน์ที่สำคัญมากคือ "Depr" หากแอตทริบิวต์ที่คุณสนใจในคอลัมน์นี้มีตัวอักษร D อยู่ข้างๆ แสดงว่าแอตทริบิวต์นั้น ไม่แนะนำให้ใช้แต่คุณควรใช้สไตล์ CSS ที่เหมาะสมเพื่อแทนที่ เมื่อดูข้อกำหนดแท็ก เรายังเห็นว่าถัดจากชื่อของแอตทริบิวต์ทั้งสี่สำหรับ HR มีคำว่า "เลิกใช้งานแล้ว" (ไม่แนะนำให้ใช้)
มาดูกันว่ามีการใช้แอตทริบิวต์ใดกับองค์ประกอบที่เราได้กล่าวถึงไปแล้วในบทความนี้ (P หัวข้อ H1-H6 และ HR) สำหรับพวกเขาทั้งหมด คุณสามารถใช้ "จัดตำแหน่ง", เพราะ องค์ประกอบทั้งหมดเหล่านี้เป็นองค์ประกอบบล็อก สำหรับองค์ประกอบแบบอินไลน์ แอตทริบิวต์ "align" จะไม่มีความหมาย
ตัวอย่างเช่น หากคุณเพิ่ม "align" ให้กับแท็กชื่อ (เช่น H1) คุณสามารถตั้งค่าการจัดตำแหน่งของข้อความชื่อเรื่องได้ เหล่านั้น. องค์ประกอบบล็อกจะใช้พื้นที่ทั้งหมดที่มีความกว้าง แต่เนื้อหาของส่วนหัวนี้ (ข้อความ) สามารถจัดตำแหน่งได้ทั้งทางซ้าย (ค่าเริ่มต้น) ขวาหรือกึ่งกลางหรือในความกว้าง (ชิดขอบ - ระยะห่างระหว่างคำที่เปลี่ยนแปลง เหมือนในคอลัมน์หนังสือพิมพ์)
อย่างไรก็ตาม สิ่งเดียวกันนี้จะเป็นจริงสำหรับแท็ก Html ของย่อหน้า P และสำหรับคอนเทนเนอร์ Div หากคุณดูภาพหน้าจอที่ให้มาอย่างละเอียด
สำหรับเส้น HR แนวนอน คุณลักษณะ "align" จะระบุการจัดตำแหน่งของเส้นแนวนอนที่เกิดจากองค์ประกอบนั้น แต่แท็ก HR เป็นองค์ประกอบบล็อกและมีแนวโน้มที่จะใช้พื้นที่ว่างทั้งหมดตามความกว้าง ดังนั้นจึงเหมาะสมที่จะใช้ "align" ในนั้นก็ต่อเมื่อคุณร่วมด้วย ตั้งค่าสำหรับแอตทริบิวต์ "ความกว้าง"(ความกว้าง) น้อยกว่าความกว้างของหน้า
ค่าของ "ความกว้าง" อาจเป็นตัวเลขเพียงอย่างเดียว (ซึ่งจะกำหนดความกว้างเป็นพิกเซล) หรือคุณสามารถใช้เปอร์เซ็นต์ของความกว้างทั้งหมดที่มีสำหรับเส้น HR แนวนอน ค่าของแอตทริบิวต์ "ขนาด" สำหรับแท็กเดียวกันระบุเป็นตัวเลขซึ่งระบุความสูงของเส้นแนวนอนเป็นพิกเซล ลองดูตัวอย่างนี้:
แท็ก HR ในมาตรฐาน Html 4.01 มีอีกหนึ่งแท็ก คุณลักษณะที่เรียกว่าโสด, เพราะ ไม่สามารถใช้กับค่าใด ๆ ได้ (หมายถึงการกระทำบางอย่าง) - เป็น "noshade" ที่ป้องกันไม่ให้เส้นแนวนอนเกิดเงา:
เป็นที่ชัดเจนว่าฉันไม่สามารถพิจารณาแอตทริบิวต์ที่เป็นไปได้ทั้งหมดสำหรับแท็กที่เป็นไปได้ทั้งหมดใน Html และสิ่งนี้ไม่จำเป็นเพราะทุกสิ่งสามารถทำได้โดยการเปรียบเทียบ - สิ่งสำคัญคือการเข้าใจไวยากรณ์และแนวคิดนั้นเอง นอกจากนี้หลายคนยังไม่แนะนำให้ใช้เพราะ... ตอนนี้ ฟังก์ชั่นของพวกเขาดำเนินการโดยสไตล์ CSSซึ่งเราจะเริ่มพูดถึงรายละเอียดเร็วๆ นี้
ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก
คุณอาจจะสนใจ
ตารางใน Html - แท็ก Table, Tr และ Td รวมถึง Colspan, Cellpadding, Cellspacing และ Rowspan สำหรับการสร้าง
Iframe และ Frame - คืออะไรและอย่างไรจึงจะดีที่สุดในการใช้เฟรมใน Html
คำสั่งความคิดเห็นและ Doctype ในโค้ด Html รวมถึงแนวคิดขององค์ประกอบบล็อกและอินไลน์ (แท็ก)
ฝังและวัตถุ - แท็ก Html สำหรับแสดงเนื้อหาสื่อ (วิดีโอ แฟลช เสียง) บนหน้าเว็บ
วิธีแทรกลิงค์และรูปภาพ (ภาพถ่าย) ลงในแท็ก HTML - IMG และ A
แบบฟอร์ม Html สำหรับไซต์ - แท็กแบบฟอร์ม, อินพุตและเลือก, ตัวเลือก, พื้นที่ข้อความ, ป้ายกำกับและอื่น ๆ สำหรับการสร้างองค์ประกอบแบบฟอร์มเว็บ
แบบอักษร (ใบหน้า ขนาด และสี) Blockquote และแท็ก Pre - การจัดรูปแบบข้อความแบบเดิมใน HTML ล้วนๆ (ไม่ใช้ CSS)
อักขระช่องว่างและการจัดรูปแบบของโค้ดในรูปแบบ Html รวมถึงอักขระพิเศษที่ไม่แยกช่องว่างและตัวช่วยจำอื่น ๆ
วิธีสร้างไฮเปอร์ลิงก์ (A, Href, Target ว่าง), วิธีเปิดในหน้าต่างใหม่บนไซต์และสร้างรูปภาพเป็นลิงก์ในโค้ด Html
สวัสดีเพื่อนๆ! วันนี้เราจะมาพูดถึง แท็กย่อหน้าและแอตทริบิวต์การจัดตำแหน่ง- โดยทั่วไป เนื้อหาทั้งหมดบนหน้าควรแบ่งออกเป็นย่อหน้า เนื้อหาย่อหน้าถูกเขียนระหว่างแท็ก
ข้อความ…
- เมื่อเราแสดง 2 ย่อหน้าติดต่อกัน จะมีการสร้างช่องที่มองไม่เห็นขึ้นมาระหว่างย่อหน้าเหล่านั้น ซึ่งจะผลักออกจากกัน แท็กเป็นแท็กบล็อกดังนั้นจึงใช้ความกว้างทั้งหมดของหน้า
ตัวอย่างเช่น ลองใช้หน้าที่มีโค้ดต่อไปนี้:
หน้าพร้อมย่อหน้า
ย่อหน้าแรก: Lorem Ipsum เป็นเพียงข้อความจำลองของอุตสาหกรรมการพิมพ์และการเรียงพิมพ์ Lorem Ipsum เป็นข้อความจำลองมาตรฐานของอุตสาหกรรมนับตั้งแต่ช่วงทศวรรษปี 1500 เมื่อเครื่องพิมพ์ที่ไม่รู้จักเอาเครื่องพิมพ์ไปสับเปลี่ยนเพื่อสร้างหนังสือตัวอย่าง
ย่อหน้าที่สอง:เป็นข้อเท็จจริงที่มีมายาวนานว่าผู้อ่านจะเสียสมาธิกับเนื้อหาที่อ่านได้ของหน้าเว็บเมื่อพิจารณาจากเค้าโครงของหน้า จุดประสงค์ของการใช้ Lorem Ipsum คือมีการกระจายตัวของตัวอักษรแบบปกติไม่มากก็น้อย แทนที่จะใช้ "เนื้อหาที่นี่ เนื้อหาที่นี่" ทำให้ดูเหมือนเป็นภาษาอังกฤษที่สามารถอ่านได้
มาดูกันว่าสิ่งนี้จะเป็นอย่างไรในเบราว์เซอร์:
แน่นอนคุณสังเกตเห็นว่ามีแท็กอยู่ในโค้ดของหน้า แข็งแกร่ง,แท็กนี้ทำให้ข้อความเป็นตัวหนา
คุณสมบัติของแท็ก
สำหรับแต่ละแท็ก คุณสามารถ (และในบางกรณีอาจจำเป็นต้องระบุแอตทริบิวต์) เราบอกเบราว์เซอร์อย่างชัดเจนถึงวิธีการแสดงองค์ประกอบนี้หรือองค์ประกอบนั้นบนหน้าเว็บผ่านแอตทริบิวต์
แอ็ตทริบิวต์ระบุไว้ในวงเล็บแท็กเปิดและมีไวยากรณ์ต่อไปนี้: คุณลักษณะ_ชื่อ = "ค่า"
แอตทริบิวต์การจัดตำแหน่ง
ตัวอย่างเช่น เรามีย่อหน้าบนหน้า และเราต้องการจัดแนวเนื้อหา ในการดำเนินการนี้ เราเขียนแอตทริบิวต์ไว้ในแท็กเปิด จัดตำแหน่ง,ซึ่งมีหน้าที่จัดแนวเนื้อหาภายในย่อหน้าและกำหนดให้เป็นค่าเดียว
เนื้อหาของย่อหน้า
คุณลักษณะนี้มี 4 ค่า:
1.ซ้าย– จัดเนื้อหาชิดซ้าย ค่านี้เป็นค่าเริ่มต้น นั่นคือถ้าเราไม่ระบุแอตทริบิวต์สำหรับย่อหน้า จัดตำแหน่งจากนั้นเนื้อหาภายในย่อหน้าจะถูกจัดแนวตามค่าเริ่มต้น สามารถดูได้ในตัวอย่างก่อนหน้านี้
2.ขวา– จัดเนื้อหาให้ชิดขวา
ข้อความ…
นี่คือลักษณะที่ปรากฏในเบราว์เซอร์:
3.ศูนย์- จัดเนื้อหาให้อยู่ตรงกลางหน้า
ข้อความ…
4.จัดชิดขอบ– จัดเนื้อหาให้ตรงกับความกว้างของหน้า
ข้อความ…
สรุปบทเรียน:
วันนี้เราได้เรียนรู้ว่ามันคืออะไร ย่อหน้าใน HTML ย่อหน้าถูกใช้บ่อยมากใน html นอกจากนี้เรายังได้เรียนรู้ว่าแอตทริบิวต์ของแท็กคืออะไร และเรียนรู้คุณลักษณะการจัดตำแหน่ง จัดตำแหน่งซึ่งสามารถรับค่าใดค่าหนึ่งต่อไปนี้: ซ้าย (ค่าเริ่มต้น)ขวา,ศูนย์ปรับให้เหมาะสม
46.4K บ่อยครั้งที่ผู้ดูแลเว็บมือใหม่มักถูกทรมานด้วยคำถามที่ว่าทำไมบางเว็บไซต์ถึงมีอันดับสูงกว่าและเหนือกว่าคู่แข่งในผลการค้นหา สาเหตุนี้อาจเป็นเพราะแท็ก h1, h2...h6 วางไม่ถูกต้อง หากวางแท็กเหล่านี้ไม่ถูกต้องโดยไม่คำนึงถึงลักษณะเฉพาะของทรัพยากร จะทำให้เครื่องมือค้นหาได้รับข้อมูลที่ถูกต้องเกี่ยวกับบทความและคำหลักที่มีอยู่ในนั้นได้ยากขึ้น
แท็ก h1 - h6 ช่วยให้คุณสามารถเน้นส่วนหัวในระดับต่างๆ ได้ ทำให้ชัดเจนว่าส่วนใดของข้อความสะท้อนถึงหัวข้อของบทความได้แม่นยำกว่าและให้ข้อได้เปรียบในการจัดอันดับ
การวางแท็กอย่างเหมาะสมช่วยให้เครื่องมือค้นหาสามารถแสดงหน้าคำค้นหาในผลลัพธ์ได้แม่นยำยิ่งขึ้น ซึ่งมีประโยชน์ต่อตำแหน่งของทรัพยากร:
เหตุใดจึงต้องมีแท็ก h1-h6
แท็กประกอบด้วยชื่อไซต์ ส่วนหัว และส่วนหัวย่อยของข้อความ:
ใน HTML แท็กส่วนหัวจะแสดงด้วย h จากภาษาอังกฤษ "ส่วนหัว" ซึ่งหมายถึง " หัวเรื่อง, ส่วนหัว- นี่คือตัวอย่างของสิ่งที่ดูเหมือน: หัวเรื่อง
แท็กหัวเรื่องควรวางไว้ในแต่ละหน้าของทรัพยากร ในกรณีนี้ ความสำคัญของหัวข้อจะขึ้นอยู่กับจำนวนหัวข้อ ยิ่งน้อย หัวข้อก็จะยิ่งสำคัญมากขึ้น:
- แท็กที่สำคัญที่สุด - แท็กที่มีนัยสำคัญน้อยกว่า... - แท็กที่สำคัญที่สุดล่าสุด
อย่างไรก็ตาม ตำแหน่งของพวกเขาควรได้รับการปฏิบัติด้วยความระมัดระวัง การใช้อย่างไม่ถูกต้องอาจส่งผลให้ทรัพยากรของคุณถูกคว่ำบาตรโดยเครื่องมือค้นหา
ไวยากรณ์ของแท็ก h1-h6
ชื่อของข้อความ
คำบรรยาย 1
...
คำบรรยาย 2
คำบรรยาย 3.1
...
คำบรรยาย 3_2
คำบรรยาย 3
แท็กยอดนิยมคือ h1 h2 h3 วิธีการใช้แท็ก h1 อย่างถูกต้อง?
ด้วยการเพิกเฉยต่อแท็ก h1 ผู้ดูแลเว็บกำลังสูญเสียข้อได้เปรียบที่สำคัญเช่นการเพิ่มประสิทธิภาพเนื้อหา สำหรับเครื่องยนต์ มักจะลงทะเบียนโดยอัตโนมัติ แต่ไม่เสมอไป และควรคำนึงถึงข้อเท็จจริงนี้ด้วย
แท็ก h1 HTML เป็นแท็กที่สำคัญที่สุด ประกอบด้วยชื่อเว็บไซต์และชื่อบทความ อย่างไรก็ตาม ไม่ควรสับสนกับแท็ก
(<span>ชื่อหน้า</span>- ชื่อเรื่องจะแสดงในเบราว์เซอร์ที่ด้านบนของหน้าจอทางด้านซ้ายเมื่อเปิดหน้าทรัพยากร ชื่อเรื่องเขียนอยู่ในส่วนหัวของหน้าระหว่าง <head></head>ในขณะที่ h1 - h6 ระบุไว้ใน "เนื้อหา" ของหน้าและอยู่ในแท็ก <body></body>.</p>
<p>เพจหนึ่งๆ มีแท็ก h1 ได้เพียงแท็กเดียวเท่านั้น หากคุณระบุหลายหัวข้อด้วยแท็ก h1 เครื่องมือค้นหาอาจถือว่าสิ่งนี้เป็นสแปมมากเกินไป ซึ่งอาจส่งผลให้มีการแบน:</p>
<br>กฎสำหรับการเขียนหัวข้อหลัก h1: <ul><li>แท็กควรใช้คำหลักที่ใช้ในการโปรโมตเพจ</li>
<li>คุณไม่ควรทำให้ส่วนหัวของ h1 ยาวเกินไป แค่คำไม่กี่คำก็เพียงพอแล้ว</li>
<li>ข้อความชื่อเรื่องควรอ่านได้</li>
<li>เมตาแท็ก h1 ไม่ควรมีสิ่งใดนอกจากตัวข้อความ หากคุณต้องการเน้น ให้วางโค้ดไว้นอกแท็ก</li>
<li>ก่อนที่จะเขียน h1 ด้วยตนเอง ตรวจสอบให้แน่ใจว่าเครื่องยนต์ไม่ได้ตั้งค่าโดยอัตโนมัติ</li>
<li>เนื้อหาของ h1 ควรสอดคล้องกับหัวข้อที่ระบุในชื่อเรื่องของหน้า</li>
<li>เมื่อสร้าง h1 ต้องแน่ใจว่าใช้วลีสำคัญที่เพจกำลังได้รับการโปรโมต</li>
<li>เนื้อหาของชื่อควรมีเอกลักษณ์ กระชับ และตรงประเด็น คุณไม่ควรสร้างสำเนาแท็ก Title ที่สมบูรณ์ให้กับ h1 สิ่งสำคัญคือต้องเขียน h1 - h6 ที่ไม่ซ้ำกันในแต่ละหน้าของทรัพยากร ดังนั้นหลีกเลี่ยงการทำซ้ำ</li>
<li>คุณไม่สามารถแสดงรายการวลีสำคัญในชื่อเรื่องโดยคั่นด้วยเครื่องหมายจุลภาค เนื้อหาของ h1 ควรเข้าใจได้ไม่เพียงแต่สำหรับเครื่องมือค้นหาเท่านั้น แต่ยังรวมถึงผู้เยี่ยมชมแหล่งข้อมูลด้วย</li>
</ul><h3>วิธีการใช้แท็ก h2-h6 อย่างถูกต้อง?</h3>
<p>นอกจากแท็ก h1, h2, h3, h4, h5, h6 และอื่นๆ แล้ว ยังใช้เพื่อวางส่วนหัวที่ระบุโดยเครื่องมือค้นหา</p>
<h4>แท็ก h2</h4>
<p>โดยทั่วไปใช้สำหรับชื่อเรื่องของโพสต์ในฟีดที่อยู่ในหน้าแรกหรือสำหรับคำบรรยายในบทความ</p>
<h4>แท็ก h3, h4</h4>
<p>มักใช้เพื่อเน้นชื่อของหัวข้อย่อย หมวดหมู่ และวิดเจ็ตในแถบด้านข้าง</p>
<h4>แท็ก h5, h6</h4>
<p>ออกแบบมาสำหรับองค์ประกอบของหน้าที่มีขนาดเล็กกว่าที่ควรแยกออกจากส่วนที่เหลือของข้อความ</p>
<p>การจัดเรียงส่วนหัว h1 - h6 ในเอ็นจิ้นเวอร์ชันต่าง ๆ สามารถนำไปใช้ต่างกันได้</p>
<p>กฎสำหรับการวาง h2 -h6:</p>
<ul><li>โครงสร้างหัวเรื่อง. ต้องปฏิบัติตามลำดับชั้นของส่วนหัว</li>
<li>ขนาดตัวอักษร. ยิ่งระดับชื่อเรื่องต่ำ แบบอักษรก็จะยิ่งเล็กลง การแก้ไขแบบอักษรเสร็จสิ้นในสไตล์ แต่โดยทั่วไปแล้ว ฟอนต์จะมีขนาดที่ถูกต้องตามค่าเริ่มต้น</li>
<li>แท็กส่วนหัวไม่สามารถใช้ร่วมกับแท็กเน้นเสียงอื่นๆ ได้ ขอแนะนำให้ใช้คำหลักในส่วนหัวที่หน้านี้จะได้รับการโปรโมตในการค้นหา</li>
<li>ต่างจากแท็ก h1 ตรงที่แท็ก h2 - h6 สามารถเขียนได้หลายครั้งบนหน้าเว็บ</li>
</ul><p><body>
<h1>ฉันเป็นหัวหน้าของลำดับชั้นส่วนหัว</h1>
<h2>ลูก ๆ ของฉัน</h2>
<h3>หลานของฉัน</h3>
<h3>หลานของฉัน</h3>
<h3>หลานของฉัน</h3>
<h2>ลูก ๆ ของฉัน</h2>
<h3>หลานของฉัน</h3>
<h3>หลานของฉัน</h3>
<h3>หลานของฉัน</h3>
<h4>หลานชายของฉัน</h4>
<h4>หลานชายของฉัน</h4>
<h4>หลานชายของฉัน</h4>
</body></p>
<ul><li>ไม่ควรมีสแปม</li>
<li>องค์ประกอบของข้อความ h1 - h6 ควรทำโดยใช้คำพ้องความหมายและคำนึงถึงกฎของสัณฐานวิทยา</li>
<li>ควรวางคีย์เวิร์ดหลักไว้ใกล้กับจุดเริ่มต้นของชื่อมากกว่า</li>
<li>วลีสำคัญที่เขียนในส่วนหัวจะต้องปรากฏในข้อความของหน้า</li>
<li>แท็ก H1 - h6 ควรสั้น กระชับ และให้ข้อมูล:</li>
</ul>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</article>
<div class="single-share">
<div class="row align-middle">
<div class="columns small-12 medium-expand">
<div class="single-share__title">บอกเพื่อน</div>
</div>
</div>
<div class="single-share-links">
<div class="row">
<div class="columns small-6 medium-3">
<a href="#" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falyanstelekom-sites.ru%2Fit-management%2Fopisanie-tega-p-atributy-html-tegov-paragraf-perenos-stroki-i%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--fb">
<div class="row">
<div class="columns"><i class="fa fa-facebook-official single-share-links-item__icon"></i>
</div>
<div class="columns text-right js-fb-sharer"><span class="single-share-links-item__text"></span>
</div>
</div>
</a>
</div>
<div class="columns small-6 medium-3">
<a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2Falyanstelekom-sites.ru%2Fit-management%2Fopisanie-tega-p-atributy-html-tegov-paragraf-perenos-stroki-i%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--vk">
<div class="row">
<div class="columns"><i class="fa fa-vk single-share-links-item__icon"></i>
</div>
<div class="columns text-right js-vk-sharer"><span class="single-share-links-item__text"></span>
</div>
</div>
</a>
</div>
<div class="columns small-6 medium-3">
<a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2Falyanstelekom-sites.ru%2Fit-management%2Fopisanie-tega-p-atributy-html-tegov-paragraf-perenos-stroki-i%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--tw">
<div class="row">
<div class="columns"><i class="fa fa-twitter single-share-links-item__icon"></i>
</div>
<div id="twitter_sharer" class="columns text-right">ทวิตเตอร์ <span class="single-share-links-item__text"></span>
</div>
</div>
</a>
</div>
<div class="columns small-6 medium-3">
<a href="#" onClick="window.open('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Falyanstelekom-sites.ru%2Fit-management%2Fopisanie-tega-p-atributy-html-tegov-paragraf-perenos-stroki-i%2F/&utm_source=share2', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--ok">
<div class="row">
<div class="columns"><i class="fa fa-odnoklassniki single-share-links-item__icon"></i>
</div>
<div class="columns text-right js-ok-sharer"><span class="single-share-links-item__text"></span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="banner-place" data-place="article_under_h1" style="width: 100%;"></div>
<div class="prev-next-articles">
<div class="prev-next-articles__item prev-next-articles__item--left">
<i class="fa fa-chevron-left"></i><span>แนะนำ...</span>
<a href="https://alyanstelekom-sites.ru/th/embarcadero/prilozhenie-dlya-svyazi-samsunga-s-kompyuterom-programmy-dlya/" rel="prev">โปรแกรมสำหรับสมาร์ทโฟน Samsung Galaxy</a>
</div>
<div class="prev-next-articles__item prev-next-articles__item--right">
<i class="fa fa-chevron-right"></i><span>บทความถัดไป</span>
<a href="https://alyanstelekom-sites.ru/th/interface/enni-admin-ammyy-admin-besplatnaya-programma-udal-nnogo-dostupa-k/" rel="next">Ammyy Admin เป็นโปรแกรมฟรีสำหรับการเข้าถึงคอมพิวเตอร์ระยะไกล (ผู้ดูแลระบบ ammy ระยะไกล)</a> </div>
</div>
<div class="banner-place" data-place="article_above_similar_articles" style="width: 100%;"></div>
<div class="banner-place" data-place="article_above_similar_articles_2" style="width: 100%;"></div>
<div class="banner-place" data-place="article_under_social" style="width: 100%;"></div>
<div class="banner-place" data-place="fixed_bottom_right" style="width: 100%;"></div>
<div class="read-more">
<div class="read-more__title text-center">อ่านด้วย</div>
<div class="read-more__row">
<div class="row">
<div class="columns small-12 medium-6">
<div class="article-block-small row full noGutter">
<div class="columns shrink">
<div class="article-block-small__img">
<a href="https://alyanstelekom-sites.ru/th/data-storage/skachat-vord-dlya-sozdaniya-dokumentov-skachat-besplatno/">
<img width="130" height="85" src="/uploads/88a3c481ecddcbb26ef39f380a36b866.jpg" alt="ดาวน์โหลดโปรแกรมสร้างเอกสาร Word ฟรี" / loading=lazy loading=lazy>
</a>
</div>
</div>
<div class="columns">
<a class="article-block-small__link" href="https://alyanstelekom-sites.ru/th/data-storage/skachat-vord-dlya-sozdaniya-dokumentov-skachat-besplatno/">ดาวน์โหลดโปรแกรมสร้างเอกสาร Word ฟรี</a>
<div class="article-block-small__author">
<i class="fa fa-user"></i><span>2024-05-06 08:58:19</span>
</div>
</div>
</div>
</div>
<div class="columns small-12 medium-6">
<div class="article-block-small row full noGutter">
<div class="columns shrink">
<div class="article-block-small__img">
<a href="https://alyanstelekom-sites.ru/th/administration/kak-podklyuchit-mobilnyi-internet-bilain-kak-podklyuchit-bezlimitnyi-internet/">
<img width="130" height="85" src="/uploads/64159d8aba2935a8be7c22a1d2c0d8d1.jpg" alt="วิธีเชื่อมต่ออินเทอร์เน็ต Beeline ไม่จำกัดกับโทรศัพท์ของคุณ" / loading=lazy loading=lazy>
</a>
</div>
</div>
<div class="columns">
<a class="article-block-small__link" href="https://alyanstelekom-sites.ru/th/administration/kak-podklyuchit-mobilnyi-internet-bilain-kak-podklyuchit-bezlimitnyi-internet/">วิธีเชื่อมต่ออินเทอร์เน็ต Beeline ไม่จำกัดกับโทรศัพท์ของคุณ</a>
<div class="article-block-small__author">
<i class="fa fa-user"></i><span>2024-05-06 08:58:19</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="read-more__row">
<div class="row">
<div class="columns small-12 medium-6">
<div class="article-block-small row full noGutter">
<div class="columns shrink">
<div class="article-block-small__img">
<a href="https://alyanstelekom-sites.ru/th/office-software/zapusk-mysql-ot-obychnogo-polzovatelya-rabota-s-mysql-iz-komandnoi/">
<img width="130" height="85" src="/uploads/db11df3f326e3cd4d1e4e52a21e189e7.jpg" alt="การทำงานกับ MySQL จากบรรทัดคำสั่ง เปิด mysql จากบรรทัดคำสั่ง" / loading=lazy loading=lazy>
</a>
</div>
</div>
<div class="columns">
<a class="article-block-small__link" href="https://alyanstelekom-sites.ru/th/office-software/zapusk-mysql-ot-obychnogo-polzovatelya-rabota-s-mysql-iz-komandnoi/">การทำงานกับ MySQL จากบรรทัดคำสั่ง เปิด mysql จากบรรทัดคำสั่ง</a>
<div class="article-block-small__author">
<i class="fa fa-user"></i><span>2024-05-05 09:14:12</span>
</div>
</div>
</div>
</div>
<div class="columns small-12 medium-6">
<div class="article-block-small row full noGutter">
<div class="columns shrink">
<div class="article-block-small__img">
<a href="https://alyanstelekom-sites.ru/th/software-products/horoshie-uroki-verstki-adaptivnaya-verstka-uroki-ili-srazu-v-boi-gde-nahoditsya/">
<img width="130" height="85" src="/uploads/d4d36be8d694492ac0cfa663dc56e7c2.jpg" alt="รูปแบบที่ปรับเปลี่ยนได้: บทเรียนหรือเข้าสู่การต่อสู้โดยตรง?" / loading=lazy loading=lazy>
</a>
</div>
</div>
<div class="columns">
<a class="article-block-small__link" href="https://alyanstelekom-sites.ru/th/software-products/horoshie-uroki-verstki-adaptivnaya-verstka-uroki-ili-srazu-v-boi-gde-nahoditsya/">รูปแบบที่ปรับเปลี่ยนได้: บทเรียนหรือเข้าสู่การต่อสู้โดยตรง?</a>
<div class="article-block-small__author">
<i class="fa fa-user"></i><span>2024-05-04 09:22:48</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="read-more__row">
<div class="row">
</div>
</div>
<div class="read-more__row">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="columns small-12 medium-4 show-for-medium">
<aside class="sidebar">
<div class="experts-list">
<b><div class="experts-list__title">สิ่งพิมพ์ล่าสุด</div></b><br> <div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/42f184bc46a7db7600474a7d73a7aa25.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/software-products/chto-oznachaet-smailik-solnyshko-chto-oznachaet-smailik-otobrazhennyi/" title="อิโมติคอนหมายถึงอะไร แสดงในสัญลักษณ์ข้อความ รหัสสำหรับอีโมติคอนกราฟิก (อิโมจิ)" class="expert__name">อิโมติคอนหมายถึงอะไร แสดงในสัญลักษณ์ข้อความ รหัสสำหรับอีโมติคอนกราฟิก (อิโมจิ)</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/software-products/">ผลิตภัณฑ์ซอฟต์แวร์</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/24867f8f250886521f836e03cc6af3f1.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/interface/kak-zablokirovat-nadoedlivye-nomera-na-starom-nokia-kak-vnesti/" title="จะขึ้นบัญชีดำบุคคลใน Nokia Lumia ได้อย่างไร?" class="expert__name">จะขึ้นบัญชีดำบุคคลใน Nokia Lumia ได้อย่างไร?</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/interface/">อินเตอร์เฟซ</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/99ba2b973acd6fd2429166eb30610ed2.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/embarcadero/kak-rabotaet-klaviatura-kompyutera-klavishi-klaviatury-znaki-prepinaniya-na/" title="แป้นคีย์บอร์ด เครื่องหมายวรรคตอนบนคีย์บอร์ด" class="expert__name">แป้นคีย์บอร์ด เครื่องหมายวรรคตอนบนคีย์บอร์ด</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/embarcadero/">เอ็มบาร์คาเดโร</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/f2a5c58e3a4eae48fab8a6312de11ac1.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/software-products/internet-kak-eto-rabotaet-kak-rabotaet-internet-rukovodstvo-dlya/" title="อินเทอร์เน็ต: มันทำงานอย่างไร?" class="expert__name">อินเทอร์เน็ต: มันทำงานอย่างไร?</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/software-products/">ผลิตภัณฑ์ซอฟต์แวร์</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/a8b23acf432faf1862504f31a60ba7af.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/os-windows/samye-populyarnye-radioperedachi-v-sssr-kursovaya-rabota-sovetskoe/" title="งานหลักสูตร: วิทยุกระจายเสียงของสหภาพโซเวียตตั้งแต่มหาสงครามแห่งความรักชาติถึง "ความซบเซา"" class="expert__name">งานหลักสูตร: วิทยุกระจายเสียงของสหภาพโซเวียตตั้งแต่มหาสงครามแห่งความรักชาติถึง "ความซบเซา"</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/os-windows/">ระบบปฏิบัติการวินโดวส์</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/ee02f5a0b7304c64abe8a062c36a9260.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/computer-games/pole-obekta-ne-obnaruzheno-1s-otslezhivanie-chto-delat-esli-pole/" title="จะทำอย่างไรถ้า"поле объекта не обнаружено"" class="expert__name">จะทำอย่างไรถ้า "ตรวจไม่พบช่องวัตถุ"</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/computer-games/">เกมส์คอมพิวเตอร์</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/065b04d9778bd163ecc6e4b0e7119fc2.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/adobe/chto-znachit-posylka-pokinula-tranzitnuyu-stranu-statusy-posylki/" title="สถานะพัสดุ Aliexpress: การแปลและการถอดรหัสสถานะการตรวจสอบสถานะพัสดุ Aliexpress" class="expert__name">สถานะพัสดุ Aliexpress: การแปลและการถอดรหัสสถานะการตรวจสอบสถานะพัสดุ Aliexpress</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/adobe/">อะโดบี</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/8aeccbf2965156925278a515003b250e.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/os-windows/kak-dobavit-stranicu-v-zakladki-brauzera-i-sdelat-startovoi-vhod/" title="เข้าสู่หน้าของฉัน การลงทะเบียนเมลเมล - วิดีโอสอนเกี่ยวกับการลงทะเบียนและการตั้งค่ากล่องจดหมาย" class="expert__name">เข้าสู่หน้าของฉัน การลงทะเบียนเมลเมล - วิดีโอสอนเกี่ยวกับการลงทะเบียนและการตั้งค่ากล่องจดหมาย</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/os-windows/">ระบบปฏิบัติการวินโดวส์</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/65cedcb1eb29552a65bb8aa402f6de0f.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/corel/avtokad-ne-otkryvaet-dialogovoe-okno-pri-sohranenii-autocad/" title="Autocad หายไปกล่องโต้ตอบบันทึก" class="expert__name">Autocad หายไปกล่องโต้ตอบบันทึก</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/corel/">คอเรล</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="experts-list__item">
<div class="expert row align-middle full noGutter">
<div class="columns small-3 medium-3">
<div class="expert__img">
<img src="/uploads/9f0330b826530db7771621ec06d57542.jpg" width="65" height="65" loading=lazy loading=lazy>
</div>
</div>
<div class="columns small-9 medium-9">
<a href="https://alyanstelekom-sites.ru/th/it-management/obvodnyi-kanal-istoriya-obvodnogo-kanala-obvodnyi-kanal-gibloe-mesto/" title="คลอง Obvodny ประวัติความเป็นมาของคลอง Obvodny" class="expert__name">คลอง Obvodny ประวัติความเป็นมาของคลอง Obvodny</a>
<div class="expert__specialty">
<a class="right-cat-link" href="https://alyanstelekom-sites.ru/th/category/it-management/">การจัดการด้านไอที</a> </div>
<div class="row full noGutter">
<div class="columns shrink">
<div class="expert__rate"> </div>
</div>
<div class="columns">
<div class="expert__rate"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</aside>
</div>
</div>
</main>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-menu">
<a href="https://alyanstelekom-sites.ru/th/feedback/" title="" class="footer-menu__item">รายชื่อผู้ติดต่อ</a>
<a href="" title="" class="footer-menu__item">เกี่ยวกับโครงการ</a>
<a href="" title="" class="footer-menu__item">การโฆษณา</a>
</div>
<div class="footer-bottom">
<div class="footer-bottom__wrapper">
<div class="footer-bottom__block">
<div class="footer__logo"> </div>
<div class="footer__copyright" style="max-width:500px;">© 2024. คอมพิวเตอร์ โปรแกรม. ข่าว. เก็บข้อมูล <br> <small></small>
</div>
</div>
<div class="footer-submenu">
<div class="footer-submenu__column">
<a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://alyanstelekom-sites.ru/th/category/it-management/">การจัดการด้านไอที</a>
</div>
<div class="footer-submenu__column">
<a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://alyanstelekom-sites.ru/th/category/news/">ข่าว</a>
</div>
<div class="footer-submenu__column">
<a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://alyanstelekom-sites.ru/th/category/administration/">การบริหาร</a>
</div>
<div class="footer-submenu__column">
</div>
</div>
<div class="footer-social">
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?124"></script>
<script>
var BANNERS = {
types: {
code: 1,
consultant: 6,
modal: 9,
offer: 7 }
}
</script>
<script type="text/javascript" src="https://alyanstelekom-sites.ru/wp-content/themes/womensovet/assets/js/app-20170207142519.js"> </script>
<script type="text/javascript">
/*<![CDATA[*/
window.hashName = window.location.hash;
if (window.hashName) {
$(window).load(function () {
$('html, body').animate({ scrollTop: $(window.hashName).offset().top} , 2000);
return false;
} );
}
jQuery(function($) {
$(document).foundation();
APP.init();
getVkSharedCount();
getFaceBookShareCount();
getOKShareCount();
} );
/*]]>*/
</script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<div class="li-stat">
</div>
</body>
</html>