Easyhome 2010
IsanGate.com
Basic HTML Navigation Bar

 

Basic HTML Menu
What is HTML?
Basic HTML files
Text & Background Color
Images
Table
Link
Set Thai
Stylesheet

 

 
ADS 250x250
 
ADS_250

HTML Header
 
การกำหนดสีสรรให้เว็บเพจ
 

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

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

HEX Color Program

วิธีใช้งานก็ง่าย ๆ คลายไฟล์ hexcol.zip ลงในโฟลเดอร์ C:\Hex Color สร้าง Shortcut จากไฟล์ชื่อ hexcode.exe การใช้งานก็เพียงแต่เราปรับแถบเลื่อนประจำค่าสี Red Green Blue สังเกตการผสมสีในช่อง Color เมื่อได้สีที่ต้องการก็เพียงแต่ลากดำ Copy ค่าสี Hex Number ไป วางใน Tag กำหนดค่าสีเท่านั้น เยี่ยมเลยใช่ไหมครับ

ตัวอย่าง การใช้คำสั่งแสดงสีของตัวอักษร ให้กำหนดด้วย <FONT COLOR="#00FFFF">ตัวอักษรสีฟ้า </FONT> จะได้ผลดังบรรทัดข้างล่าง

ตัวอักษรสีฟ้า
  • <BR> และ <P> เป็น Tag สั่งให้ขึ้นบรรทัดใหม่ ทั้งสองคำสั่งจะแตกต่างกันที่ คำสั่งแรกขึ้น บรรทัดใหม่โดยไม่ปัดระยะห่างบรรทัด ส่วนคำสั่งหลังจะเว้นระยะห่างไปหนึ่งบรรทัด
  • <Hx> - - - - </Hx> เป็น Tag สำหรับการกำหนดขนาดตัวอักษรหัวเรื่อง มีอยู่ 6 ระดับ จาก H1 ขนาดใหญ่ที่สุด ไปจนถึง H6 ดังตัวอย่าง Tag และตัวอย่างอักษรในตาราง
    <H1> ตัวอักษรขนาด H1 </H1>

    ขนาด H1

    ขนาด H2

    ขนาด H3

    ขนาด H4

    ขนาด H5
    ขนาด H6
  • <BASE FONT SIZE="x"> เป็นการกำหนดการกำหนดขนาดตัวอักษรทั้งหมดในไฟล์ให้มี ขนาดเท่ากันกับตัวเลขที่กำหนด ซึ่งจะมีค่าตั้งแต่ 1 - 7 โดยเรียงจากตัวอักษรเล็กสุดไปจน กระทั่งใหญ่สุด (ต่างจากหัวเรื่องที่ตัวเลขน้อย อักษรจะตัวใหญ่) จะกำหนดหรือไม่ก็ได้ ถ้าไม่กำหนด ค่ามาตรฐานของโปรแกรมเว็บเบราเซอร์ทุกตัวจะเท่ากับ "3" เสมอ
  • <FONT SIZE="x"> คำสั่ง Hx เราไม่สามารถแสดงผลขนาดของตัวอักษรในบรรทัดเดียวกัน ให้ต่างขนาดกันได้ เพราะจะมีการตัดขึ้นบรรทัดใหม่ให้โดยอัตโนมัติ ในกรณีที่เราต้องการ ให้มีตัวอักษรต่างขนาดในบรรทัดเดียวกันจะต้องใช้คำสั่ง FONT SIZE="x" แทน โดยค่า "x" จะมีขนาดตั้งแต่ -7 ถึง 7 โดยเรียงจากขนาดตัวอักษรเล็กสุดไปหาใหญ่สุด (ค่า - หรือ + ของขนาดจะอ้างอิงกับ BASE FONT SIZE เสมอ) ตัวอย่างเช่น
              สังเกตได้จากบรรทัดนี้ จะเห็นว่าระยะบรรทัดมีการขยับตามขนาดของตัวอักษร ตัวที่มีขนาดใหญ่ที่สุดด้วย (ห่างกว่าระยะปกติ ดูได้จากตัวอย่างในไซต์นี้หลาย ๆ หน้าครับ)
Advertise here. Click for detail!

  • การแสดงผลแบบรายการ (การใส่เลขหัวข้อหรือ bullet หน้าข้อความ) สามารถใช้คำสั่งได้ 2 คำสั่งดังนี้
    1. <OL> - - - - </OL> เป็นการกำหนดหัวข้อย่อย ดังเช่นในส่วนนี้ ก็อยู่ภายใต้คำสั่ง <OL> และต้องมี tag ปิดท้ายด้วย </OL> เสมอ จะให้แสดงผลด้วยตัวเลขหรือตัว อักษรก็ได้ (ค่าปกติคือตัวเลข เริ่มจาก 1, 2, 3, 4, ....)
      ถ้าต้องการให้เป็นตัวอักษร ต้องระบุให้บราวเซอร์ทราบ เช่น
      <OL TYPE="A"> หัวข้อจะเริ่มจาก A, B, C, ...
      ค่า TYPE="---" จะแสดงผลแตกต่างกันดังนี้
      "A" จะเป็นตัวอักษรพิมพ์ใหญ่
      "a" จะเป็นอักษรพิมพ์เล็ก
      "I" จะเป็นการนับเลขแบบโรมัน
      บราวเซอร์จะไม่รับรู้คำสั่งหัวข้อเป็นอักษรไทยนะครับ
    2. <UL> - - - - </UL> เป็นการกำหนดให้บราวเซอร์แสดงผลด้วย bullet ค่าปกติคือ จุดวงกลมสีดำ เราสามารถกำหนดค่า TYPE ได้ 3 แบบดังนี้คือ
      disc เป็นจุดสีดำ (ค่าปกติ)
      circle เป็นจุดวงกลมโปร่ง (O)
      square เป็นสี่เหลี่ยมทึบดำ     (ต้องเขียนด้วยอักษรตัวเล็ก Lowercase เสมอ)
    3. <LI> เป็น Tag หน้าหัวข้อย่อย (จะปิดท้ายด้วย </LI> หรือไม่ก็ได้) ตัวอย่างดังนี้
      <OL>
              <LI> หัวข้อย่อย 1
              <LI> หัวข้อย่อย 1 </LI>
      </OL>
  • คำสั่งแสดงหัวข้อย่อยเหล่านี้สามารถใช้ซ้อนคำสั่งกันได้ ซึ่งจะทำให้การแสดงผลเป็น หัวข้อย่อยลดหลั่นกันไปตามลำดับ
  • <CENTER> - - - - </CENTER> เป็น Tagคำสั่งที่ใช้กำกับเพื่อให้เกิดการแสดงผลใน ตำแหน่งกลางจอ (ภาพ หรือตัวอักษร) มาตรฐาน HTML 4.0 กำหนดให้ใช้ <DIV ALIGN="CENTER"> - - - - </DIV> แทนแล้วในปัจจุบัน
  • <B> - - - - </B> <I> - - - - </I> <U> - - - - </U> การกำหนดให้ฟอนต์แสดงผลเป็น ตัวหนา ตัวเอียง และตัวขีดเส้นใต้ ตามลำดับ (ขีดเส้นใต้กรณีนี้ ไม่สามารถเป็นจุดคลิกลิงก์ได้นะครับ)
  • <HR SIZE="x"> เป็น Tag แสดงเส้นกั้นแบ่งหน้าจอตามแนวนอนเป็นเส้นยาว ค่า x เป็นค่า ความหนาของเส้น (หน่วยเป็น pixels) สามารถกำหนดความยาวของเส้นได้ โดยเพิ่มเติม คำสั่ง width="x%" ต่อลงไป (ค่าเปอร์เซนต์คือ ความยาวเป็นกี่เปอร์เซนต์ของหน้าจอ) ถ้า ต้องการเส้นทึบ ให้สั่งต่อด้วย noshade เช่น
    <HR size="10">

    <HR size="3" width="80%" noshade>

    <HR size="3" width="80%" color="red">

    ตัวอย่างตามลำดับ





            เราสามารถเพิ่มสีสรรให้กับเส้นด้วยการใส่คำสั่งส่วนขยายเป็น Color="ค่าสี" ตามที่เราต้องการแทนคำว่า Noshade

Top

 

red line
Home | What's new? | Basic HTML | Reviews Programs | Tip&Tricks | Download | Site Map
red line

 

Home Basic HTML Review Software More Tip & Tricks Download Software Site Map