Munu บทเรียนการเขียนเว็บด้วยภาษา html
ย่อหน้าและสัญลักษณ์ต่างๆ
การย่อหน้า
หากคุณต้องการย่อหน้าแบบที่ผมทำอยู่ในย่อหน้านี้ คุณสามารถทำได้โดยการเว้นที่ว่างให้มากๆ แต่หากคุณบอกว่า “ผมเว้นที่ว่างไปมากมาย แต่ทำไม Browser ถึงแสดงออกมา เป็นการเว้นที่ว่างช่องเดียว” …..ใช่ครับ Browser ของผมก็เป็นอย่างนั้น ผมเข้าใจดี ผมจึงใช้โค้ดเล็กๆที่สร้างช่องว่างได้หนึ่งช่อง นั่นคือ
หากคุณจะทำให้เกิดช่องว่างมากๆ คุณก็ต้องใช้ ติดกันหลายๆตัว เช่น จะเว้นได้สองช่อง แต่ที่ผมใช้อยู่ในหน้านี้และหลายๆหน้า ผมใช้ว่า…
ใช้ ทั้งหมด 8 ตัว แต่คุณจะเห็นว่าผมเว้นช่องไว้ระหว่างแต่ละตัว เพื่อให้เกิดช่องว่างเพิ่มขึ้นอีก 7 ช่อง รวมการสร้างช่องว่างได้ทั้งหมด 8+7 = 15
ยังมีวิธีย่อหน้าอีกแบบหนึ่งสามารถทำได้ด้วย Cascading Style Sheets(CSS) ซึ่งคุณไม่จำเป็นต้องพิมพ์ มากมายให้เปลืองขนาดของหน้า ซึ่งผมจะเอาไว้อธิบายในหัวข้อนั้นครับ
สัญลักษณ์ต่างๆ
เหตุที่ผมชอบใช้สัญลักษณ์ต่างๆ เพราะว่า…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ใช้แล้วดูดี
- ของพวกนี้ทำให้ผมมีความสุข
ข้อสุดท้ายนั่น ผมต้องขออภัยด้วยครับ ผมเพียงต้องการให้มีเพิ่มเข้ามา เพื่อให้ครบสามอัน และนี่คือวิธีที่ผมทำครับ :
<UL>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</UL>
- UL มาจากคำว่า Unordered List (Unordered หมายถึง ไม่เรียงลำดับ List หมายถึง การวางเนื้อหา) รวมแล้วหมายถึงการใช้สัญลักษณ์อย่างเดียว ไม่มีตัวเลข
- LI มาจากคำว่า List Item จะเป็นการขึ้นบรรทัดใหม่และสร้างสัญลักษณ์(จุดดำ) ไว้หน้าสุด ให้สังเกตว่าไม่ต้องใช้ </LI> ปิดคำสั่ง ใช้แต่ <LI> อย่างเดียวเท่านั้น
- /UL ใช้จบการใส่สัญลักษณ์
ข้อแนะนำ : หากคุณใช้คำสั่ง CENTER ก่อนคำสั่งนี้ จะไม่เกิดการจัดกลางของเนื้อหาใน <UL> และ </UL> ถ้าคุณอยากจัดกลาง ให้เพิ่มคำสั่ง <UL> และ </UL> เข้าไป ยิ่งเพิ่มเข้าไปมาก เนื้อหาก็จะเลื่อนเข้ากลางมากยิ่งขึ้น (ลองทำดูครับ) ยกตัวอย่างเช่น
<UL><UL><UL>
<LI>เนื้อหา
</UL></UL></UL>
ผมไม่อยากได้แบบจุดน่ะครับ อยากได้สี่เหลี่ยมมากกว่า!!
ใจเย็นๆ … คุณสามารถทำแบบสี่เหลี่ยมได้เช่นกัน เพียงแค่เพิ่มคำสั่ง TYPE=”square” ลงในคำสั่ง <UL> แบบนี้ :
<UL TYPE=”square”>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</UL>
แล้วคุณจะได้แบบที่คุณต้องการ…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ใช้แล้วดูเท่ดี
- ของพวกนี้ทำให้ผมมีความสุข
ใส่ตัวเลขลำดับ
ถ้าคุณต้องการแสดงเลขลำดับ 1 2 3… มากกว่าที่จะเป็นสัญลักษณ์ HTML สามารถทำให้คุณได้เช่นกัน แน่นอนว่า คุณก็สามารถพิมพ์ตัวเลขเองได้ แต่ว่าจะไม่สนุกสนานอะไรนัก :
<OL>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</OL>
แล้วนี่ก็คือสิ่งที่จะได้…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ใช้แล้วดูเท่ดี
- ของพวกนี้ทำให้ผมมีความสุข
สังเกตว่า ยังใช้รูปแบบเดียวกับข้างต้น เพียงแต่เปลี่ยน <OL> แทน <UL> Browser จะทำการนับไปเรื่อย ตราบเท่าที่คุณใส่ <LI> เพิ่มเข้าไป OL ย่อมาจาก Ordered List (Ordered หมายถึง ตามลำดับ)
แต่ผมอยากได้เลขโรมันครับ!!
เลขอาราบิกไม่พอเพียงสำหรับคุณ อย่างงั้นหรือ ? ได้ครับ เราเพียงเพิ่ม TYPE=”I” เข้าไปในคำสั่ง OL ให้สังเกตว่าผมใช้ไอตัวใหญ่ ไม่ใช่เลขหนึ่งนะครับ :
<OL TYPE=”I”>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</OL>
สิ่งที่ได้…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ของพวกนี้ทำให้ผมมีความสุข
เลขโรมันอ่านไม่ออกง่ะ มีแบบตัวอักษรรึเปล่า!!
<OL TYPE=”A”>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</OL>
สิ่งที่ได้…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ใช้แล้วดูเท่ดี
- ของพวกนี้ทำให้ผมมีความสุข
ตัวใหญ่ไม่ชอบ ผมอยากได้ตัวเล็ก!!
คุณสามารถเปลี่ยนเลขโรมันและตัวอักษรภาษาอังกฤษ ให้อยู่ในรูปตัวเล็กโดยการใช้คำสั่งต่อไปนี้
<OL TYPE=”i”>
และ
<OL TYPE=”a”>
สังเกตได้มั้ยครับ ว่าผมเพียงเปลี่ยนเป็นไอตัวเล็ก และเอตัวเล็ก
ไม่ได้เริ่มนับจากหนึ่ง
บางทีคุณอาจไม่ต้องการให้เริ่มนับที่เลขหนึ่ง ซึ่งมีวิธีทำง่ายๆครับ เพียงเพิ่มคำสั่ง START=”เลขเริ่มต้น” :
<OL START=”4″>
<LI>ทำให้การแสดงข้อมูลมองง่ายขึ้น
<LI>ใช้แล้วดูเท่ดี
<LI>ของพวกนี้ทำให้ผมมีความสุข
</OL>
สิ่งที่ได้…
- ทำให้การแสดงข้อมูลมองง่ายขึ้น
- ใช้แล้วดูเท่ดี
- ของพวกนี้ทำให้ผมมีความสุข
จะรวมหลายๆแบบเข้าด้วยกันได้ไหม ?
ได้ครับ แต่อย่าลืมปิดคำสั่งในแต่ละอัน ยกตัวอย่างเช่น การเรียงเนื้อหาแบบ OL และในแต่ละ LI คุณสามารถเพิ่มการเรียงเนื้อหาแบบ UL เข้าไปได้ :
<OL>
<LI>หัวข้อแรก
<UL>
<LI>เนื้อหาแรกของหัวข้อแรก
<LI>เนื้อหาสองของหัวข้อแรก
</UL>
<LI>หัวข้อที่สอง
<UL>
<LI>เนื้อหาแรกของหัวข้อที่สอง
<LI>เนื้อหาสองของหัวข้อที่สอง
</UL>
</OL>
สิ่งที่ได้…
- หัวข้อแรก
- เนื้อหาแรกของหัวข้อแรก
- เนื้อหาสองของหัวข้อแรก
- หัวข้อที่สอง
- เนื้อหาแรกของหัวข้อที่สอง
- เนื้อหาสองของหัวข้อที่สอง
การวางเนื้อหาแบบ Definition List (คล้ายๆย่อหน้าสลับกันไป)
อาหารวันนี้
เรียกน้ำย่อย
ยำปลาหมึก
อาหารหลัก
ต้มยำกุ้ง
ปลาเก๋าสามรส
ของหวาน
รวมมิตร
ทั้งหมดทำขึ้นโดย…
<H1>อาหารวันนี้</H1>
<DL>
<DT>เรียกน้ำย่อย
<DD>ยำปลาหมึก
<DT>อาหารหลัก
<DD>ต้มยำกุ้ง
<DD>ปลาเก๋าสามรส
<DT> ของหวาน
<DD>รวมมิตร
</DL>
อธิบายสิ่งต่างๆ…
- ผมใช้คำสั่ง H1 เพื่อสร้างหัวข้อ
- <DL> มาจากคำว่า Definition List ซึ่งบอก Browser ว่าจะมีอีกสองคำสั่งตามมา
- <DT> มาจากคำว่า Definition Term ใช้สำหรับการขึ้นเนื้อหาที่ไม่ย่อหน้า
- <DD> มาจากคำว่า Definition Description ใช้สำหรับการขึ้นเนื้อหาที่ย่อหน้า
กลับ การปรับพืันหลัง กำลังอ่านย่อหน้าและสัญญลักษณ์ต่างๆ ไป_การวางตัวหนังสือร่วมกับภาพ
