Blop tips เก็บตกเค้ามา #4 ว่าด้วยการจัดระเบียบข้อความ




tags ยอดนิยม-จัดเนื้อหาดีกว่า


tags ในการตกแต่งเนื้อความ





เรียงลำดับ tag ...
การจัดรูปแบบ มีกฏสำคัญอยู่ว่า ต้องเรียงลำดับครับ คือต้องสั่งแล้วจบทีละ tag ไป ไม่งั้นจะแปลผลผิดพลาดได้ ดังนั้น หากว่าวาง tag เปิด แล้วต้องปิดก่อนจะว่าง tag ปิดของตัวถัดไปครับ

ตัวอย่างที่ถูกต้อง : ข้อความต่อไปนี้จะ < b > < i > < u >ตัวหนา เอียง และมีเส้นใต้< /u >< /i > < /b >
ผลที่ได้ : ข้อความต่อไปนี้จะ ตัวหนา เอียง และมีเส้นใต้

สำหรับตัวอักษรตัวใหญ่ (upper case, capital letter) หรือเล็ก (lower case) ไม่สำคัญครับ






การสร้างเส้น

เส้นที่ว่า คือไอ้ที่เห็นแบ่งหัวข้อในหน้านี้ล่ะครับ การสร้างจะมีประโยชน์มาก โดยเฉพาะคนที่เลือกแบบไม่มีกรอบแบบผม

คำสั่งที่ใช้ก็คือ
หรือ Horizental Rule หรือเส้นแนวขวางครับ คำสั่งนี้ไม่ต้องใช้ tags ปิดนะครับ

ขนาดของเส้น (size) กำหนดได้เป็น pixels สี (color) ก็กำหนดได้ครับ โดยระบุ code สี หรือถ้าจำไม่ได้ สีพื้นฐานก็ระบุไปได้เลยเป็น ขาว white ดำ black ทำนองนี้ครับ สำหรับความยาว (width) กำหนดได้ทั้งเป็นตัวเลขไปเลย และเป็นเปอร์เซ็นต์ครับ สำหรับบางคนที่กำหนดเส้นหนา ๆ อาจพบว่ามันจะมีสองสีนะครับ เป็นเทาอ่อน เทาแก่ ทำนองนั้น (shade) สามารถกำหนดให้ไม่มี (noshade)ได้ด้วย กรณีที่กำหนดไม่เต็มหน้าก็ระบุไปได้อีกว่าจะให้ชิดซ้ายหรือขวาครับ (align) ครับ ค่าที่อยู่หลังเครื่องหมายเท่ากับ (=) ต้องมี " หรือ ' ด้วยนะครับ อย่าลืม

ตัวอย่าง :
<--- แบบนี้ไม่ระบุ noshade
ผลที่ได้ :
<--- เห็นว่ามีขอบเงาดำ ๆ อยู่

ตัวอย่าง :

ผลที่ได้ :






การจัดหน้า
การจัดหน้า หรือ Attributes คือการจัดให้มีข้อความชิดซ้าย ชิดขวา อยู่ตรงกลางครับ
ตามปกติเราอาจจะจัดรูปแบบหน้าได้หลายวิธี แล้วแต่ชนิดของคำสั่ง tag ที่เราใช้

กรณีที่เป็นข้อความทั่วไป เราใช้คำสั่ง
ไว้หน้าย่อหน้าหรือปัจจุบันนิยมใช้

ข้อความที่ต้องการ

แทน สำหรับถ้าต้องการให้ชิดซ้ายหรือขวา ก็ใส่ left หรือ right แทนที่ center ได้ตามลำดับ "p" ก็หมายถึง "paragraph" หรือข้อความในย่อหน้านั้น ๆ "algin" ก็คือการจัดเรียงตัวครับ นอกจากนี้ยังใช้ได้กับ top, bottom ในกรณีที่ทำตารางหรือมีกรอบได้อีกด้วยครับ

ตัวอย่าง : < p align=right > เพื่อให้ย่อหน้านี้ชิดขวา


ผลที่ได้ :

เพื่อให้ย่อหน้านี้ชิดขวา



ตัวอย่าง : < p align=center > เพื่อให้ย่อหน้านี้อยู่กลางหน้า


ผลที่ได้ :

เพื่อให้ย่อหน้านี้อยู่กลางหน้า








ขึ้นบรรทัดใหม่

สำหรับ blog ของพันทิปนั้น เมื่อเราเคาะแป้น enter ระบบจะจัดการให้ข้อความของเราขึ้นบรรทัดใหม่ทันทีครับแต่สำหรับระบบอื่น ๆ นั้นแตกต่างกัน เราจำเป็นต้องมี code ที่ระบุว่า ตอนนี้นะ ชั้นจะขึ้นบรรทัดใหม่แล้วนะ โดยคำสั่ง tag ที่เราใช้ก็คือ
ซึ่งมาจากคำว่า BReak นั่นเองครับ แปลว่าได้เวลาที่ต้องแตกหักกันซะที...

สำหรับการขึ้นบรรทัดใหม่นี้อาจจะทำให้ระบบของพันทิปอ่านคำสั่งพลาดได้ ดังนั้นเอาเป็นว่าแค่รู้ก็แล้วกันนะครับ

นอกจากนี้ยังอาจจะใช้

วางในหน้าของประโยคที่ต้องการขึ้นหน้าใหม่ครับ

ตัวอย่าง :สำหรับ blog ของพันทิปนั้น
เมื่อเราเคาะแป้น enter ระบบจะจัดการให้ข้อความของเรา
ขึ้นบรรทัดใหม่ทันที
ผลที่ได้ : สำหรับ blog ของพันทิปนั้น
เมื่อเราเคาะแป้น enter ระบบจะจัดการให้ข้อความของเรา
ขึ้นบรรทัดใหม่ทันที







หัวเรื่องของเรา

หัวเรื่องก็คือ Heading จะเรียก พาดหัวข่าว งั้นก็ได้ครับ ปกติทำได้ไม่ยาก หากเราต้องการให้ข้อความที่เราต้องการเป็นหัวเรือง ก็ใส่คำสั่งนี้
.... หรือ heading ลงไป โดยเราจะกำหนดเลขหลัง h เพื่อแสดงขนาดของ font ซึ่งปกติ จะมีได้ 6 ขนาดใน font ทั่วไป ส่วนถ้าเรากำหนด font ในหน้าเป็นของตัวเองก็กำหนดขนาดได้ตามใจชอบครับ

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

ตัวอย่าง : ขนาดหัวเรื่อง

หัวเรื่องขนาด 1

หัวเรื่องขนาด 2

หัวเรื่องขนาด 3

หัวเรื่องขนาด 4

หััวเรื่องขนาด 5
หัวเรื่องขนาด 6
ผลที่ได้ : ขนาดหัวเรื่อง

หัวเรื่องขนาด 1

หัวเรื่องขนาด 2

หัวเรื่องขนาด 3

หัวเรื่องขนาด 4

หัวเรื่องขนาด 5
หัวเรื่องขนาด 6





[สมุดเยี่ยม]






Create Date : 01 มิถุนายน 2548
Last Update : 2 ธันวาคม 2549 23:13:51 น.
Counter : 754 Pageviews.

11 comments
สวัสดีปีใหม่ Rain_sk
(1 ม.ค. 2567 21:38:33 น.)
BUDDY คู่หู คู่ฮา multiple
(3 ม.ค. 2567 04:49:04 น.)
สวัสดีปีใหม่ ๒๕๖๗ มาช้ายังดีกว่าไม่มา
(2 ม.ค. 2567 07:30:30 น.)
สวัสดีปีใหม่ Rain_sk
(1 ม.ค. 2567 21:38:33 น.)
  
ทำไมเราต้องมาลงชื่อเป็นครั้งที่สองนะเนี่ย ฮ่าฮ่าฮ่า


ขอบคุณสำหรับความรู้ค่ะเพ่

=@^__^@=

เรื่องต่อไป ขอเป็นการแทรกเพลง แทรกภาพ แทรก link นะเคอะ


อิอิ
โดย: มรกตนาคสวาท IP: 203.148.136.67 วันที่: 1 มิถุนายน 2548 เวลา:0:44:22 น.
  
ขอบคุณที่นำมาฝากกันจ้า

เรื่องต่อไป..ขอเหมือนคนข้างบนนะนะ

โดย: zaesun วันที่: 1 มิถุนายน 2548 เวลา:1:47:21 น.
  
มาอ่านครับ...เป้นประโยชน์
โดย: Nutty Professor วันที่: 1 มิถุนายน 2548 เวลา:3:24:18 น.
  
อ่านแล้วต้องลงชื่อทุกครั้งเลยเรา
โดย: ป้ามด วันที่: 22 มิถุนายน 2548 เวลา:9:31:55 น.
  
เข้ามาดู ครับ เนื้อหาดีมีประโยชน์ดี
โดย: cancandance วันที่: 23 มิถุนายน 2548 เวลา:17:23:26 น.
  
มาลงชื่อรับความรู้ครับผม
โดย: เงือกลม วันที่: 11 สิงหาคม 2548 เวลา:11:16:37 น.
  
แค่กำลังเริ่มหัดครับ เลยต้องขออณญาติเข้ามาหาความรู้ ขอบคุณมากครับ
โดย: kaman วันที่: 24 กันยายน 2548 เวลา:16:39:04 น.
  
ขอนำไปใช้บ้างนะคะ
โดย: เกดจัง วันที่: 15 มกราคม 2549 เวลา:15:47:45 น.
  
ขอบคุณมากๆนะคะ
มาเก็บความรู้ค่ะ
โดย: prncess วันที่: 12 สิงหาคม 2549 เวลา:5:24:32 น.
  
-thank you
โดย: oohaiai วันที่: 3 กรกฎาคม 2550 เวลา:6:14:55 น.
  
มางงอีกคน
โดย: โอ้ยโอ้ยโอ้ย วันที่: 11 กันยายน 2552 เวลา:6:45:27 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Dontno-trips-confused.BlogGang.com

dont wanna no
Location :
  

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 2 คน [?]