ทีนี้ ในแต่ละ Tag ก็จะมีตัวแปร หรือ ลักษณะที่กำหนดเข้าไปเพื่อเพิ่มรายละเอียดให้กับการแสดงผลข้อมูลของเรา โดยลักษณะนี้เราจะใส่เอาไว้ในส่วนของ Tagเปิด เช่น Tag แสดงตัวอักษร ชื่อว่า Tag ... (ตรง ... คือข้อมูลที่เราต้องการแสดงนะคะ) ถ้าเราต้องการให้ตัวอักษรของเราเป็นสีแดง ก็จะต้องกำหนด ค่าสีแดงลงไปใน Tag แบบนี้ ---> ข้อความ ตรงคำว่า ข้อความ ก็จะมีสีแดง color ก็คือการกำหนดสีให้กับแท็ก และ #ff0000 คือ โค้ดสีแดง คิดว่าอ่านมาถึงตรงนี้แล้วคงพอจะรู้แล้วว่า Tag หรือ คำสั่ง ในภาษา Html ทำงานยังไงนะจ๊ะ ต่อไปนี้เราจะแนะนำให้เพื่อนๆรู้จักกับ Tag ที่ชื่อว่า สาเหตุที่นำแท็กนี้มาอธิบาย ก็เพราะว่า มันใช้ประโยชน์ได้ดีในการ จัดตำแหน่งข้อความ และ รูปภาพ รวมถึง ไว้ใช้ทำกรอบสวยๆ ที่เราเอามาแจกน่ะแหละ อิอิ แปลตรงๆตัวเลยก็คือ ตาราง น่ะเอง (ไม่ใช่โต๊ะ นะจ๊ะ - -") ในการสร้างตารางนี้ก็ไม่ยากอย่างที่หลายคนคิดเลยนะ เพราะมันจะมีรูปแบบในการสร้างที่ค่อนข้างจะแน่นอนอยู่แล้ว สำหรับแท็กที่ใช้ในการสร้างตารางก็จะมีหลายแท็กด้วยกันและมักจะต้องใช้ควบคู่กันไปด้วย เพื่อที่จะให้ได้ตารางสักหนึ่งตาราง ^^" มาดูกันดีกว่าว่ามันใช้ Tag อะไรบ้าง ...แท็กเปิด จะอยู่บนสุด และแท็กปิดจะอยู่ท้ายสุดของตาราง เป็นการบอกว่า นี่คือ 1 ตารางนะจ๊ะ... ตำแหน่งจะอยู่คร่อมแท็ก ... เป็นการแบ่งกลุ่มให้กับแถว โดยที่ในกลุ่มนั้นอาจมีมากกว่า 1 แถวก็ได้ ถึงแม้เราไม่ใส่ก็จะถือว่า ข้อมูลที่อยู่ระหว่างแท็ก Table นั้นเป็นส่วนของ Tbody ... คือ 1 แถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง ...ถ้าต้องการให้ตารางมีกี่แถว เราก็ต้องเพิ่มแท็ก ... ไปเท่านั้น ... คือ 1 ช่องในแถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง ... ถ้าต้องการให้ใน 1แถว มีกี่ช่อง เราก็ต้องเพิ่มแท็ก ... ไปเท่านั้น ตัวอย่างการสร้างตาราง ในที่นี้จะสร้างตาราง 3 แถวโดยให้แต่ละแถวมี 4 ช่อง และใส่คำสั่ง border เพื่อแสดงขอบตาราง ช่องที่ 1 แถว 1ช่องที่ 2 แถว 1ช่องที่ 3 แถว 1ช่องที่ 4 แถว 1ช่องที่ 1 แถว 2ช่องที่ 2 แถว 2ช่องที่ 3 แถว 2ช่องที่ 4 แถว 2ช่องที่ 1 แถว 3ช่องที่ 2 แถว 3ช่องที่ 3 แถว 3ช่องที่ 4 แถว 3 ผลที่ได้จากการสร้างตารางโดยใช้โค้ดคำสั่งทางซ้าย ก็จะเหมือนกับ ส่วนการนำตารางมาใช้กับการจัดวางข้อมูล ก็สามารถทำได้ง่ายๆ ตอนนี้ทุกคนคงสร้างตารางกันได้แล้วนะคะ ส่วนการนำตารางไปใช้ในแบบอื่นๆ ถ้าจะมีคนจำได้ สำหรับกรอบข้อความ เราต้องมาดูกันก่อนว่ามันประกอบด้วยส่วนอะไรบ้าง รูปด้านล่างนี้เป็นการแสดงภาพของ ขอบ และ มุม ทั้ง 8 ส่วน นะคะ ที่นี้เราต้องการนำภาพนี้ มาทำเป็นกรอบของข้อความ โดยต้องการให้กรอบนั้น ขยายได้ตามความยาวของข้อความ Text Here ข้อความ Text Here
เราจะแบ่งอธิบายไปทีละแถวนะ ตามที่เว้นวรรคเอาไว้ เพื่อจะได้ดูง่ายๆ เริ่มจากแท็ก เราเพิ่มคำสั่ง แถวที่ 1 ในแท็ก เราใส่คำสั่ง background=Url ของภาพที่ต้องการ เข้าไปเพื่อภาพให้เป็นแบบแบคกราวตามที่ต้องการและในแท็กของ ช่องที่ 2แถว 1 ใส่คำสั่ง style="WIDTH: 240px; HEIGHT: 13px" เพื่อกำหนดความกว้างและความสูงให้กับภาพ มีขนาดเป็น พิกเซล
เราใส่ background ตามแบบเดียวกับในแถวที่ 1แต่เพิ่ม คำสั่ง style="WIDTH: 30px" ให้ตารางด้านซ้าย กว้างพอดีรูป และทำแบบเดียวกันกับ ด้านขวาด้วย จากตอนแรกที่เราอธิบายไปตอนหัดสร้างตารางว่า ถึงแม้เราไม่ได้กำหนดขนาดให้กับตาราง แต่ตารางก็จะขยายขนาดให้พอดีกับข้อมูลของเราได้เอง แต่เมื่อเรากำหนดขนาดให้ช่องเขียนข้อความนี้แล้ว ทำให้ ถ้าข้อความที่เรา พิมไปมันสั้นนิดเดียว กรอบของเราก็จะไม่มีขนาดเล็กเกินกว่าที่เราได้กำหนดขนาดไว้ในตอนแรก แต่ถ้าข้อความยาวมาก กรอบนี้ก็จะขยายออกได้ตามปกติ |
คํา สั่ง html การจัดข้อความ
กระทู้ที่เกี่ยวข้อง
ลิขสิทธิ์ © 2024 th.frojeostern Inc.
