SlideShare a Scribd company logo
1 of 15
การจัดวางเนื้อหาบนหน้าเว็บ
 โดยปกติข้อมูลต่างๆที่เราเขียนขึ้นใน Text Editor เมื่อนาไปแสดงผลที่บราวเซอร์เราจะเห็นว่าการ
ขึ้นต้นข้อความในหน้าย่อหน้า และการตักคาขึ้นบรรทัดใหม่ จะไม่ตรงกับที่เราจัดรูปแบบไว้ใน Text Editor
เพราะว่าการจัดรูปแบบเอกสารในบราวเซอร์จะต้องใช้แท็กภาษาHTMLกาหนดเท่านั้น ซึ่งเราจะกล่าว
ถึงแท็กต่างๆกันในบทนี้
 ในหัวข้อที่ผ่านมาเราจะเห็นได้ว่าการแสดงข้อความในบราวเซอร์จะถูกตัดคาขึ้นต้นบบรทัดใหม่
เมื่อข้อความนั้นเลยขอบขวา และบางครั้งคาที่บราวเซอร์ตัดขึ้นบรรทัดใหม่นั้นอ่านดูแล้วไม่ต่อเนื่องดังนั้น
จึงมีการใช้แท็ก br มาชาวยสั่งบราวเซอร์ตัดคาขึ้นต้นบบรทัดใหม่ในตาแหน่งที่ต้องการ(หรือเรียกว่า) Line Break)
 การขึ้นย่อหน้าใหม่ด้วยแท็ก p จะแตกต่างจากการขึ้นบรรทัดใหม่ด้วยแท็ก br คือ การขึ้นต้นย่อหน้าใหม่จะมีการ
เว้นบรรทัดว่างไว้เพื่อให้ย่อหน้าใหม่ถุกแยกออกมาจากย่อหน้าที่ผ่านมาได้อย่างชัดเจน
 เราสามารถจัดเรียงข้อความในแต่ละย่อหน้าของเว็บเพจได้โดยการกาหนดตาแหน่งในแอตทรืบิวต์
align (Alignment)ของแท้กP ได้ดังนี้
 Center จัดเป็นอีกแท็กคาสั่งหนึ่งที่ใช้ในการจัดวางตาแหน่งเนื้อหาในเว็บเพจตั้งแต่ข้อความ
และรุปภาพ แต่ในตัวอย่างนี้จะแนะนาการจัดวางเฉพาะตาแหน่งข้อความ (ส่วนการจัดวางภาพ
จะกล่าวอีกครั้งในบทการทางานกับภาพ)
 เนื่องจากข้อความบนเว็บเพจมีมาก ดังนั้นการที่เราจะไปนั้งตัดคาทีละบรรทัดก็อาจจะเสียเวลา
จึงมีการคิดว่าให้เราใช้บราวเซอร์ตัดคาได้เหมือนเดิมแต่เราเปลี่ยนไปกาหนดให้ไม่มีการตัดตรงจุดที่สาคัญ
แทนเพื่อให้เนื้อหายังคงอ่านได้ต่อเนื่องซึ่งเราเรียกแท็กนี้ว่า nobr โดยจะใส่ในจุดที่เราไม่ต้องการ
ให้มีการตัดคา แล้วบราวเซอร์จะเปลี่ยนจุดตัดคาไปอยู่ภายนอกแท็กแทน
 Word Break เป็นแท็กที่ต้องใช้ร่วมกับแท็ก nobr เพราะข้อความภายใน
แท็ก nobr จะไม่มีการตัดคา ซึ่งถ้าเราต้องการให้มีจุดตัดที่ตาแหน่งไหนภายใน
แท็ก nobr เราก็จะวางแท็ก wbr ที่จุดนั้น
 ในกรณ์ที่มีข้อมูลมากการใช้แท็กbr และ p ในทุกๆจุดของข้อมูลที่ต้องการขึ้นบรรทัดใหม่
และย่อหน้าใหม่ คงไม่สะดวกนักหากเราต้องการให้เว็บเพจแสดงข้อความในย่อหน้าทั้งหมดเหมือนกับที่กาหนดใน
ไฟล์HT
 ML ต้องใช้แท็กpre (Preformatted)ดังนี้
 การใช้เส้นคั้นทางแนวนอน (Horizontal Rule) ในเว็บเพจของเรา จะ
ช่วยแบ่งเนื้อหาออกเป็นส่วนๆทาให้อ่านง่าย สาหรับรูปแบบแท็กมีดังนี้
 โดยปกติเส้นคั้นจะถูกจัดให้อยู่กึ่งกลางหน้าจอแต่เราสามารถจัดให้เส้นคั่น ชิดขวา หรือ ชิดซ้ายได้
โดยใช้แอตทริบิวต์align ดังตัวอย่าง
 เราควรเขียนหมายเหตุไว้ในส่วนต่างๆ ของโปรแกรม เพื่ออธิบายการทางานของโปรแกรมเพราะเราอาจหลงลืม
โปรแกรมที่เราเขียน หรือต้องส่งให้ผู้อื่นไปทาการปรับปรุงแก้ไขหมายเหตุจะปรากฏในโปรแกรมที่เราเขียนเท่านั้น
จะไม่ถูกนามาแสดงเมื่อเปิดดูทางบราวเซอร์ หมายตุจะมีรูปแบบดังนี้

More Related Content

Viewers also liked

หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1Ton TC Tmsb
 
البرمجيات التعليمية نوره &عزة
البرمجيات التعليمية نوره &عزةالبرمجيات التعليمية نوره &عزة
البرمجيات التعليمية نوره &عزةnourasaud22
 
หน่วยที่ 7
หน่วยที่ 7หน่วยที่ 7
หน่วยที่ 7Ton TC Tmsb
 
บทที่ 5
บทที่ 5บทที่ 5
บทที่ 5Ton TC Tmsb
 
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"Опис досвіду "Тестова перевірка знань учнів на уроках фізики"
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"natalishodinki
 
Принципи здорового харчування
Принципи здорового харчуванняПринципи здорового харчування
Принципи здорового харчуванняnatalishodinki
 
Осінній ярмарок сценарій
Осінній ярмарок сценарійОсінній ярмарок сценарій
Осінній ярмарок сценарійnatalishodinki
 
аналіз роботи методоб'єднання природничо-математичних предметів
аналіз роботи методоб'єднання природничо-математичних предметіваналіз роботи методоб'єднання природничо-математичних предметів
аналіз роботи методоб'єднання природничо-математичних предметівnatalishodinki
 

Viewers also liked (9)

หน่วยที่ 1
หน่วยที่ 1หน่วยที่ 1
หน่วยที่ 1
 
нагороди
нагородинагороди
нагороди
 
البرمجيات التعليمية نوره &عزة
البرمجيات التعليمية نوره &عزةالبرمجيات التعليمية نوره &عزة
البرمجيات التعليمية نوره &عزة
 
หน่วยที่ 7
หน่วยที่ 7หน่วยที่ 7
หน่วยที่ 7
 
บทที่ 5
บทที่ 5บทที่ 5
บทที่ 5
 
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"Опис досвіду "Тестова перевірка знань учнів на уроках фізики"
Опис досвіду "Тестова перевірка знань учнів на уроках фізики"
 
Принципи здорового харчування
Принципи здорового харчуванняПринципи здорового харчування
Принципи здорового харчування
 
Осінній ярмарок сценарій
Осінній ярмарок сценарійОсінній ярмарок сценарій
Осінній ярмарок сценарій
 
аналіз роботи методоб'єднання природничо-математичних предметів
аналіз роботи методоб'єднання природничо-математичних предметіваналіз роботи методоб'єднання природничо-математичних предметів
аналіз роботи методоб'єднання природничо-математичних предметів
 

More from Ton TC Tmsb

หน่วยที่ 10
หน่วยที่ 10หน่วยที่ 10
หน่วยที่ 10Ton TC Tmsb
 
หน่วยที่ 9
หน่วยที่ 9หน่วยที่ 9
หน่วยที่ 9Ton TC Tmsb
 
หน่วยที่ 8
หน่วยที่ 8หน่วยที่ 8
หน่วยที่ 8Ton TC Tmsb
 
หน่วยที่ 6
หน่วยที่ 6หน่วยที่ 6
หน่วยที่ 6Ton TC Tmsb
 
บทที่ 4
บทที่ 4บทที่ 4
บทที่ 4Ton TC Tmsb
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2Ton TC Tmsb
 

More from Ton TC Tmsb (6)

หน่วยที่ 10
หน่วยที่ 10หน่วยที่ 10
หน่วยที่ 10
 
หน่วยที่ 9
หน่วยที่ 9หน่วยที่ 9
หน่วยที่ 9
 
หน่วยที่ 8
หน่วยที่ 8หน่วยที่ 8
หน่วยที่ 8
 
หน่วยที่ 6
หน่วยที่ 6หน่วยที่ 6
หน่วยที่ 6
 
บทที่ 4
บทที่ 4บทที่ 4
บทที่ 4
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 

หน่วยที่ 3