0 การสร้างเว็บไซต์ 0
1 การสร้างเว็บไซต์ 1 บทที่ 4 เรื่อง การจัดการข้อความในเว็บเพจ การจัตรูปแบบข้อความในเว็บเพงเพื่อแสตงบนไปรแกรมเว็บเบราว์เซอร์จะไม่เหมือนกับการจัดเอกสาร ในโปรแกรมประเภท Word Processing หัวไป ตังเช่นการกตปุ่ม Enter เพื่อขึ้นบรรหัตใหม่ แต่การแสตงผล ในโปรแกรมเรีบเบราวัซตร์ขักความนั้นจะถูกเรียงต่อกันไปเรื่อย ๆ ไม่ขึ้นบรรทัตใหม่ให้เนื่องจากภาษา HTML ไปสามารถรับรู้ใด้ว่าจยมีการขึ้นบรรหัตใหม่ จึงตัองมีคำชังสำหรับสีงให้ขึ้นบระหัตใหปที่ให้ผลเสมือนการกต Enter ของเอกสารประเภท Word Processเng หัวไปเช่นเตียวกับการจัตย่อหน้าและการเว้นวรรคต้องมีคำสั่ง สำหรับการงัครูปแบบเอกสาร HTML ด้วย ดังนั้นเพื่อให้ได้รูปแบบเอกสาร HTML เป็นระเบียบและสวยงาม ตามตัดงการจึงจะต้องเรียนรู้การใช้คำสั่งสำหรับการจัตรูปแบบหน้าเอกสารดังต่อไปนี้ 4.1 การจัดรูปแบบการแสดงข้อความ การแสดงข้อความของเอกสาร HTMLในโปรแกรมเว็บเบราว์เซอร์ทั่วไป ถ้าไมใช้แท็กคำสั่งจัดรูปแบบ การแสดงข้อความ ข้อความจะปรากฏต่อเนื่องกันไป จะทำให้มีปัญหาในการอ่านข้อความนั้น ๆ และทำให้ หน้าเว็บเพจดูแน่นเกินไปไม่สวยงาม 4.1.1 การขึ้นบรรทัดใหม่ <br> โดยปกติแล้วภาษา HTML จะไม่สามารถรับรู้ได้ว่าจะมีการขึ้นบรรหัดใหม่ ถ้าเราต้องการ ขึ้นบรรทัตใหมในเว็บเพจจะต้องใช้แท็ก <br> เพื่อระบุให้มีการขึ้นบรรทัดใหม่ แท็ก <br> เป็นคำสั่งที่กำหนดจุดสิ้นสุดของบรรทัด (Break Rule) แล้วขึ้นบรรทัดใหม่เพื่อแสดง ข้อความส่วนที่เหลือในบรรทัดถัดไป
2 การสร้างเว็บไซต์ 2 ตัวอย่างที่ 4.1 <IDOCTYPE html> <html> <head> <title> การขึ้นบรรทัดใหม่ </title> <meta charset="UTF-8"> </head> <body>บรรทัดที่ 1 ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World wide Web Consortium (W3C) <br>บรรทัดที่ 2 ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง body> <html> ผลลัพธ์ บรรทัดที่ 1 ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ the world wide web consortium (W3C) บรรทัดที่ 2 ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง แท็ก <br> ส่วนใหญ่มักงะว่างไว้ในตำแหงสุดท้ายของประโยคเพื่อให้แสดงผลประโยคใหม่ ในบรรทัดต่อมา แท็ก <br> เป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag) 4.1.2 การขึ้นย่อหน้าใหม่ <p> การขึ้นย่อหนำาใหม่ (Paragraph)เป็นการจัดบ่อหน้าในเอกสาร HTML โดยใช้แท็ก <p มีลักษณะการขึ้นบรรหัดใหม่เช่นเดียวกับการใช้คำสั่ง <b2 แต่จะแตกต่างที่ช่องว่างระหว่างบรรทัดมีมากกว่า คำสั่ง <๖> และสามารถกำหนดการเยื้องของข้อความในบรรหัดโดยใช้คำสั่ง <dd> วางหน้าข้อความ ที่ต้องการให้เยื้องหน้า มีรูปแบบคำสั่งดังนี้ <p>…ข้อความ...</p>
3 การสร้างเว็บไซต์ 3 คำสั่ง <P> นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ดังแสดง ในตัวอย่างต่อไปนี้ ตัวอย่างที่ 4.2 <IDOCTYPE html> <html> <head> <title> การขึ้นย่อหน้าใหม่ </title> <meta charset="UTF-8"> </head> <body>ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World Wide Web Consortium (W3C) ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง <br> ย่อหน้าที่ 2 HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่งที่มีโครงสร้าง การเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผล <br> <p>ย่อหน้าที่ 3 Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลง รหัสคำสั่ง HTML ภายในเครื่องหมาย Less-than Bracket (<) และ Greater-than Bracket (>) </p> </body> </html> ผลลัพธ์ ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World Wide Web Consortium (W3C) ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง ย่อหน้าที่ 2 HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่งที่มีโครงสร้างการเขียน โดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผล ย่อหน้าที่ 3 Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย Less-than Bracket (<) และ Greater-than Bracket (>)
4 การสร้างเว็บไซต์ 4 จัดวางตำแหน่งข้อความในย่อหน้าสามารถกำหนดค่าการจัดตำแหน่งการแสดงผลดังมีรูปแบบคำสั่งดังนี้ <p align="left /right /center">……………..</p> จากรูปแบบคำสั่งเป็นการจัดตำแหน่งของการแสดงผลทางจอภาพที่จะแสดงในตำแหน่งต่าง ๆ ซึ่งจะต้องอยู่ระหว่างคำสั่ง <p align="left/right/center">และปิดด้วย</p> โดยมีรายละเอียดดังนี้ align ="left" การกำหนดการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย align ="right" การกำหนดการจัดตำแหน่งการแสดงผลอยู่ทางขวา align ="center' การกำหนดการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง ตัวอย่างที่ 4.3 <!DOCTYPE html> <html> <head> <title> การขึ้นย่อหน้าใหม่ </title> <meta charset="UTF-8"> </head> <body> <p align=”left” >ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World Wide Web Consortium (W3C) ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง </p> <p align=”center” >ย่อหน้าที่ 2 HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์ รูปแบบหนึ่งที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผล </p> <p align=”right” >ย่อหน้าที่ 3 Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบ คำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket(>) </p> </body> </html>
5 การสร้างเว็บไซต์ 5 ผลลัพธ์ ย่อหน้าที่ 1 ภาษา HTML เป็นภาษาที่ใช้สร้างเอกสารเว็บเพจตามมาตรฐานของ The World Web Consortium(W3C) ที่สามารถส่งข้อมูลประเภทข้อความ รูปภาพ เสียง ย่อหน้าที่ 2 HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่งที่มีโครงสร้างการเขียน โดยอาศัยตัวกำกับ(Tag) ควบคุมการแสดงผล ย่อหน้าที่ 3 Tag เป็นลักษณะเฉพาะของ HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายใน เครื่องหมาย less-than bracket (<) และ greater-than bracket (>) ถ้ากำหนดตำแหน่งแสดงผลด้วยแอททริบิวห์ align จะแสดงผลในตำแหน่งชิดซ้ายนอกจากนั้นเรายังสามารถ จัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพด้วยแท็ก <center> ได้เช่นกัน 4.1.3 การไม่ตัดคำขึ้นบรรทัดใหม่ <nobr> ในการแสดงผลข้อความบนโปรแกรมเว็บเบราว์เซอร์ และผู้ใช้ปรับเปลี่ยนขนาดหน้าต่างแสดงผลทำให้ ข้อความที่มีความยาวเกินไปจะถูกโปรแกรมเว็บเบราร์เอร์ตัดคำขึ้นบรรทัดใหม่โดยอัเป็นข้อความที่สำคัญและไม ต้องการให้มีการตัดคำขึ้นบรรทัดใหม่เราสามารถใช้แท็ก <nobr> กำกับข้อความนั้นได้ มีรูปแบบคำสั่ง ดังนี้ <nobr> ...ข้อความ... </nobr>
6 การสร้างเว็บไซต์ 6 ตัวอย่างที่ 4.4 <IDOCTYPE html> <html> <head> <title> การไม่ตัดคำขึ้นบรรทัดใหม่ </title> <meta charset="UTF-8"> </head> <body> <nobr> การจัดการข้อความในเว็บเพจเป็นการกำหนดคุณลักษณะตัวอักษรเพื่อให้สามารถแสดงผลใน โปรแกรมเว็บเบราว์เชอร์ใด ๆ ได้ตามต้องการโดยเนื้อหาในหน่วยนี้จะกล่าวถึงการจัดรูปแบบการแสดง ข้อความที่เกี่ยวกับการจัดการย่อหน้า ขึ้นบรรทัดใหม่ </nobr> </body> <html รูปที่ 4.4 การไม่ตัดคำขึ้นบรรทัดใหม่ <กobr> 4.1.4 การกำหนดจุดให้เว็บเบราว์เซอร์ตัดคำ <พbr> การกำหนดจุดให้โปรแกรมเว็บเบราว์เซอร์ตัดคำ <wbr> หรือ Word Break เป็นแท็กที่ต้องใช้ ร่วมกับแท็ก <nob> ... </nobr> เพื่อใช้กำหนดตำแหน่งที่ต้องการให้ตัดคำภายในแท็ก <nobr> มีรูปแบบ คำสั่งดังนี้ <Wbr> ...ข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่...