สอนทำเว็บ ด้วย HTML

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

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

คำสั่งในการแบ่งจอภาพ

ข้อสังเกต

จะเห็นได้ว่าในการกำหนดการแบ่งหน้าจอภาพนั้นจะกำหนดคำสั่ง <FRAMESET>.........</FRAMESET> แทนที่คำสั่ง <BODY>.........</BODY> เพื่อเป็นตัวกำหนดการแสดงผลในโปรแกรมเว็บเบราเซอร์

การแบ่งพื้นที่ของจอภาพตามแนวนอน

คำสั่งนี้จะเป็นการกำหนดหน้าจอภาพตามแนวนอน โดยมีคำสั่ง <FRAME SRC> เป็นตัวกำหนดให้แสดงผลไฟล์ HTML หรือรูปภาพ

การกำหนดเส้นแบ่งเฟรมและการกำหนดสีของเส้นแบ่งเฟรม

โดยปกติแล้วการแบ่งหน้าจอภาพเป็นส่วน ๆ นั้นจะมีเส้นแบ่งเฟรมเกิดขึ้น เราจึงสามารถกำหนดสีเส้น ความหนาของเส้น รวมถึงการกำหนดไม่ให้มีเส้นคั่น ซึ่งปัจจุบันนี้เว็บเพจจะนิยมไม่มีเส้นกรอบเพื่อให้เกิดความสวยงามกับเว็บเพจ

ในการกำหนดเส้นแบ่งเฟรมนั้นถ้าเรากำหนด FRAMEBORDER="yes" แล้ว จะปรากฎเส้นแบ่งเฟรม แต่ถ้าเราไม่กำหนด FRAMEBORDER="yes" การแสดงผลก็ยังสามารถแสดงเส้นแบ่งเฟรม

<FRAMESET FRAMEBORDER="NO/YES">
BORDER="ค่าตัวเลข" BORDERCOLOR="RGB หรือ ระบุชื่อสี">
</FRAMESET>

FRAMEBORDER เป็นการกำหนดเส้นแบ่งเฟรม
BORDER เป็นการกำหนดขนาดของเส้นแบ่งเฟรม
BORDERCOLOR เป็นการกำหนดสีของเส้นแบ่งเฟรม

เมื่อเรากำหนดเส้นแบ่งเฟรมเส้นเราก็สามารถกำหนดขนาดของเส้นแบ่งเฟรมได้ โดยเราใช้ BORDER="ค่าตัวเลข" เป็นตัวกำหนดขนาดของเส้นแบ่งเฟรม และกำหนดสีให้กับเส้นแบ่งเฟรม โดยเราใช้ BORDERCOLOR="#RGB หรือ ระบุชื่อสี" เป็นการกำหนดสีของเส้นแบ่งเฟรม

แต่ถ้าเรากำหนดไม่ให้มีเส้นแบ่งเฟรม โดยใช้ FRAMEBORDER="no" จะไม่มีเส้นแบ่งเฟรมเกิดขึ้น

เมื่อเรากำหนดไม่ให้เส้นแบ่งเฟรมปรากฎบนหน้าจอภาพแล้ว แต่จะสังเกตได้ว่ายังมีเส้นสีขาวยังปรากฎอยู่ ซึ่งยังทำให้การแสดงผลยังเหมือนมีเส้นแบ่งเฟรมเกิดขึ้นอยู่ เราจึงกำหนดค่าให้ BORDER="0" จะทำให้เส้นที่กล่าวมาข้างต้นหายไปและก็จะทำให้เว็บเพจของเรามีความน่าสนใจมากยิ่งขึ้น

การกำหนดการแสดงผลแถบสกอลบาร์

คำสั่งนี้จะเป็นการกำหนดแถบสกอรบาร์ โดยปกติแล้วค่ามาตรฐานของการแสดงผลแบบสกอรบาร์จะมีค่าเท่ากับ AUTO คือ ถ้าข้อมูลไฟล์ใดมีขนาดใหญ่เกิน หน้าของจอภาพแถบสกอรบาร์ก็จะเกิดขึ้นทันที เพื่อที่จะได้ศึกษาเว็บเพจได้ยอ่างครบถ้วน แต่ถ้าไฟล์มีขนาดเล็กกว่าหน้าจอภาพ แถบสกอรบาร์ก็จะไม่เกิดขึ้น

ในการกำหนดว่า SCROLLING="yes" จะมีผลต่อการแสดงผลแถบสกอรบาร์ในโปรแกรมเว็บเบราเซอร์ ถือจะแสดงทุกเฟรมที่กำหนดค่า "yes" โดยไม่สนว่าขนาดของไฟล์จะมีขนาดใหญ่หรือเล็กกว่าเฟรม แต่ถ้าเรากำหนด SCROLLING="no" จะมีผลต่อการแสดงผลแถบสกอรบาร์ในโปรแกรมเว็บเบราเซอร์คือ จะไม่แสดงแถบสกอรบาร์ไม่ว่าขนาดของไฟล์จะมีขนาดใหญ่หรือเล็กกว่าเฟรม

การกำหนดการปรับขนาดของเฟรม

เป็นคำสั่งที่กำหนดขนาดของเฟรม ซึ่งจะทำให้เราไม่สามารถทำการปรับขนาดของเฟรมได้ โดยปกติแล้วเมื่อเราทำการลากเมาส์มาที่เส้นแบ่งเฟรมจะมีเครื่องหมาย ซึ่งจะสามารถทำการปรับขนาดของเฟรมได้ แต่ถ้าเรากำหนดค่า NORESIZE เข้าไปเมื่อลากเมาส์มาที่เส้นแบ่งเฟรมจะไม่ปรากฎ เครื่องหมายซึ่งจะไม่สามารถปรับขนาด ของเฟรมได้

การแสดงเฟรมแบบ INLINE

โดยปกติแล้วกำหนดเฟรมนั้นเราจะกำหนดอยู่ในส่วนของ <HEAD>......</HEAD> แต่เราสามารถนำเฟรมมาแสดงในเว็บเพจโดยไม่ต้องทำการแบ่งพื้นที่หน้าจอ ออกเป็นส่วน ๆ ทั้งนี้เฟรมจะแสดงผลร่วมกับข้อความต่าง ๆ ในเว็บเพจ (INLINE หรือ INFLOW) เสมือนเป็นภาพการฟิกภาพหนึ่ว แต่สามารถใช้งานได้เช่นเดียว กับเว็บเพจทั่วไป

การกำหนดระบุวินโดว์หรือเฟรมที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค์

TARGET="window name"

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

ชื่อต่อไปนี้เป็นชื่อสงวนสำหรับเฟรมทำให้เกิดการทำงานพิเศษเฉพาะอย่างซึ่งจะต้องใช้งานร่วมกับ TARGET

Target="_blank" เมื่อพบกับชื่อนี้ จะมีการเปิดหน้าต่างเบราเซอร์ขึ้นมาใหม่
Target="_self" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลมาแสดงบนเฟรมซึ่งมีไฟล์ไฮเปอร์ลิงค์นี้อยู่
Target="_parent" จะทำให้เบราเซอร์ปัจจุบันนั้นถูกรีเซ็ตใหม่ และนำข้อมูลมาแสดงบนเบราเซอร์นี้
Target="_Top" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลพิมพ์ลงบนเฟรมบนสุด