เข้าสู่ระบบ จำนวนคนออนไลน์ 1764 คน
พัชรี พรมมา
คลังเก็บข้อมูลจากการสือค้น
 
หัวข้อล่าสุด
 
 
  • ขนาดอะตอม(atomic size) (0)
    [มากกว่า 6 เดือน]
  • สมบัติของอะตอมตามตารางธาตุ (0)
    [มากกว่า 6 เดือน]
  • อะตอม โมเลกุล ไอออน (0)
    [มากกว่า 6 เดือน]
  • สูตรเคมี (1)
    [มากกว่า 6 เดือน]
  • ภาษาซี (0)
    [มากกว่า 6 เดือน]
  • โปรแกรมสูตรคูณอย่างง่าย (0)
    [มากกว่า 6 เดือน]
  • โปรแกรมสูตรคูณ (0)
    [มากกว่า 6 เดือน]
  • โครวสร้างของภาษาC (0)
    [มากกว่า 6 เดือน]
  • รวมโปรแกรมภาษาC (1)
    [มากกว่า 6 เดือน]
  • ตรีโกณแบบคลังปัญญาไทย (0)
    [มากกว่า 6 เดือน]
  • วิธีการจำฟังก์ชันตรีโกณมิติแบบต่างๆ (0)
    [มากกว่า 6 เดือน]
  • เคล็ดลับหลัก4ประการช่วยเพิ่มความจำให้สมอง (0)
    [มากกว่า 6 เดือน]
  • อาหารเพิ่มความจำ (0)
    [มากกว่า 6 เดือน]
  • ดาวเคราะห์ (0)
    [มากกว่า 6 เดือน]
  • ดาวเคราะห์ (0)
    [มากกว่า 6 เดือน]
  • ชั้นบรรยากาศของโลก (0)
    [มากกว่า 6 เดือน]
  • โลกดาราศาสตร์ (0)
    [มากกว่า 6 เดือน]
  • ประวัติความเป็นมาของHTML (0)
    [มากกว่า 6 เดือน]
  • HTML (0)
    [มากกว่า 6 เดือน]
  • มะเร็งผิวหนังมะเร็งผิวหนัง (0)
    [มากกว่า 6 เดือน]
  • โครสะเก็ดเงิน-เรื้อนกวาง (0)
    [มากกว่า 6 เดือน]
  • ดูเนื้อหาทั้งหมด

     
         
     
    ปฎิทิน
     
     

    <ตุลาคม 2557>
     
    40293012345
    416789101112
    4213141516171819
    4320212223242526
    44272829303112
    453456789
     
         
     
    สถิติบลอกนี้
     
     
    • คนเข้าบลอกนี้ทั้งหมด 30216
    • เฉพาะวันนี้ 14
    • ความคิดเห็น 2
    • จำนวนเรื่อง 23
    ให้คะแนนบลอกนี้
    แจ้งเนื้อหาบลอกไม่เหมาะสม
     
         
    ประวัติความเป็นมาของHTML
    29 พฤศจิกายน 2553 - 15:34:00

     

    โครงสร้างภาษา HTML

    คำสั่งในภาษา HTML จะเรียกว่า แท็ก (Tag) จะเขียนอยู่ในเครื่องหมาย < และ > โดยมีรูปแบบคำสั่งดังนี้

    <TAG>
    เช่น <HTML>,<B>,<U>

    แท็กจะแบ่งได้เป็นสองกลุ่ม คือ แท็กแบบเปิด และแท็กแบบปิด โดยปกติแล้วแท็กของภาษา HTML จะเปิดและปิด โดยมีรูปแบบดังนี้

    <TAG> .... </TAG>
    เช่น <HTML> .... </HTML>,<B> .... </B>

    การปิดแท็กจะใช้เครื่องหมาย /(Slash) เป็นตัวกำหนดในแท็กที่ปิด ส่วนแท็กอีกประเภทหนึ่งจะเป็นแท็กในลักษณะเปิด คือ ไม่ต้องมีแท็กเปิดท้าย เช่น <IMG>,<BR>,<WBR> เป็นต้น

    เพื่อความเข้าใจง่ายในการกำหนดโครสร้างภาษา HTML เราจึงควรกำหนดแท็กเปิดและเปิดให้เหมาะสมเพื่อสร้างความสมดุล เช่น เมื่อเราต้องการใช้กำหนดให้ตัวอักษรเป็นตัวหนาโดยใช้แท็ก <B> และให้มีการขีดเส้นใต้โดยใช้แท็ก <U> เราควรที่จะกำหนดการเปิดและปิดแท็กโดยเมื่อขึ้นต้นด้วยแท็ก <B> และตามด้วยแท็ก <U> ควรจะปิดด้วยแท็ก </U> ก่อน แล้วตามด้วยแท็ก </B> ดังนี้

    <B><U> .... </U></B>

    โครงสร้างหลัก

    รูปแบบมาตรฐานในการสร้างเวบเพจประกอบด้วยคำสั่งหลักอยู่ 4 คำสั่ง ดังนี้

    <HTML> .... </HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเวบเพจ

    <HEAD> .... </HEAD> เป็นคำสั่งในส่วนของการกำหนดส่วนหัวเรื่องของเวบเพจ โดยในคำสั่ง HEAD จะมีคำสั่ง <TITLE> .... </TITLE> อยู่ด้วย ซึ่งทำหน้าที่กำหนดข้อความที่แสดงบน Title Bar โดยสามารถกำหนดความยาวของข้อความได้ 64 ตัวอักษร

    <BODY> .... </BODY> เป็นคำสั่งในส่วนเนื้อหาของเวบเพจทั้งหมด

    รูปแบบการเขียนมีดังต่อไป

    <HTML>
    <HEAD>
    <TITLE> Title Bar </TITLE>
    </HEAD>

    <BODY>

    .
    .
    .
    .

    </BODY>
    </HTML>


    การจัดรูปแบบเอกสาร

    คำสั่งในการกำหนดหัวเรื่อง (Headding)

    การกำหนดหัวเรื่องเราจะใช้คำสั่ง Headding <H> เพื่อแสดงอัตราอักษรขนาดใหญ่กว่าปกติ เช่น ชื่อบท, ชื่อหัวข้อ เป็นต้น คำสั่ง heading มีด้วยกัน 6 ระดับ โดยที่ระดับ 1 จะมีขนาดใหญ่สุด และระดับ 6 จะมีขนาดเล็กที่สุด มีรูปแบบคำสั่งดังนี้

    <H1> .... </H>
    <H2> .... </H>
    <H3> .... </H>
    <H4> .... </H>
    <H5> .... </H>
    <H6> .... </H>

    ตัวอย่าง head.html

    <HTML>
    <HEAD><TITLE> Heading </TITLE></HEAD>
    <BODY>
    <H1> Heading Levle 1 </H>
    <H2> Heading Levle 2 </H>
    <H3> Heading Levle 3 </H>
    <H4> Heading Levle 4 </H>
    <H5> Heading Levle 5 </H>
    <H6> Heading Levle 6 </H>
    </BOYD>
    </HTML>

    คำสั่งขึ้นบรรทัดใหม่ (Line Break)

    โดยปกติในการพิมพ์เอกสารทั่ว ๆ ไป เราจะขึ้นบรรทัดใหม่โดยใช้การกด Enter แต่ในการสร้างเอกสาร HTML เวบบราวเซอร์จะถือการเว้นวรรค 1 ช่อง เป็นการตัดคำขึ้นบรรทัดใหม่ แต่ถ้าเราต้องการให้เวบบราวเซอร์ตัดข้อความ ณ ตำแหน่งที่กำหนดเราจะใช้คำสั่ง Line Break <BR> โดยมีรูปแบบดังนี้

    ข้อความ..... <BR>

    ตัวอย่าง break_rule.htm

    <HTML>
    <HEAD><TITLE> Break Rule </TITLE></HEAD>
    <BODY>
    <P>

    คอลัมน์สาระไอทีสำหรับชาวเรือ เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
    <I>(ในย่อหน้าข้างบนนี้ แม้จะมีการกด Enter ขึ้นบรรทัดใหม่ แต่ HTML จะตีความเป็นบรรทัดเดียว)</I>
    <P>

    อาทิเช่น บทเรียนเริ่มต้นสำหรับผู้ที่ต้องการเรียนรู้ หลักการ และวิธีการใช้งาน <BR>

    ศึกษาส่วนประกอบต่าง ๆ ที่มีอยู่ในระบบวินโดว์ วิธีการปรับแต่ง<BR>

    วิธีการใช้งาน และเทคนิคต่าง ๆ ทั่วไป<BR>
    <I>(ส่วนย่อหน้านี้ใช้คำสั่ง &lt;BR&gt; จึงขึ้นบรรทัดใหม่)</I>
    </BOYD>
    </HTML>

    คำสั่งยกเลิกการขึ้นบรรทัดใหม่ (No Break Rule)

    เมื่อเราต้องการยกเลิกคุณสมบัติการตัดคำของเวบบราว์เซอร์ เราสามารทำได้โดยใช้คำสั่ง <NOBR> โดยมีรูปแบบดังนี้

    <NOBR>

    .... ข้อความ ....

    </NOBR>
     

    ตัวอย่าง no_break.html

    <HTML>
    <HEAD><TITLE> Break Rule </TITLE></HEAD>
    <BODY>
    <NOBR>

     

    คอลัมน์สาระไอทีสำหรับชาวเรือ เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ <BR>
    อาทิเช่น บทเรียนเริ่มต้นสำหรับผู้ที่ต้องการเรียนรู้ หลักการ และวิธีการใช้งาน

    </NOBR>
    </BOYD>
    </HTML>

    ถ้าเราวิวตัวอย่างข้างต้นดูแล้วย่อเวบบราว์เซอร์ดูจะเห็นได้ว่าบรรทัดแรกจะไม่มีการตัดคำแม้จะเว้นวรรณไว้ จนเวบบราว์เซอร์พบคำสั่ง <BR> จึงทำการตัดคำขึ้นบรรทัดใหม่

    คำสั่งการจัดตำแหน่งของข้อความ (Paragraph Break)

    เราจะใช้คำสั่ง <P> ในการจัดย่อหน้าของข้อความในเวบเพจ ซึ่งคำสั่ง <P> นั้น จะมี Attributes เป็นคำสั่งเสริมช่วยในการจัดตำแหน่งของย่อหน้าคือ Alignment โดยมีรูปแบบดังนี้

    <P> .... ข้อความ .... </P>

    <P Align = "ตำแหน่ง" > .... ข้อความ .... </P>

    ตำแหน่งที่ใช้ในการจัดย่อหน้ามีด้วยกันสามลักษณะคือ

    Left จัดข้อความชิดซ้ายบรรทัด

    Center จัดข้อความกึ่งกลางบรรทัด

    Right จัดข้อความชิดขวาบรรทัด

    โดยปกติค่าเริ่มต้นของ Alignment จะอยู่ที่ Left คือจัดข้อความชิดซ้ายของบรรทัด

    ตัวอย่าง paragraph.html

    <HTML>
    <HEAD><TITLE> Paragraph </TITLE></HEAD>
    <BODY>
    <H4>การจัดย่อหน้าในเวบเพจ</H4><BR>
    <P ALIGN="Left">
    ข้อความชิดซ้ายบรรทัด
    </P>
    <P ALIGN="Center">
    ข้อความกึ่งกลางบรรทัด
    </P>
    <P ALIGN="Right">
    ข้อความชิดขวาบรรทัด
    </P>
    </BOYD>
    </HTML>

    คำสั่งจัดวางข้อความกึ่งกลางบรรทัด (Center)

    ในการจัดวางตำแหน่งของข้อความด้วยภาษา HTML นอกจากจะใช้คำสั่ง <P Align= "ตำแหน่ง"> แล้ว เรายังสามารถกำหนดกลุ่มข้อความหรือรูปภาพให้อยู่กึ่งกลางได้ด้วยคำสั่ง <CENTER> ที่มีรูปแบบกระชับกว่า โดยมีรูปแบบดังนี้

    <CENTER> .... ข้อความ .... </CENTER>

    ซึ่งข้อความที่ได้จะอยู่กึ่งกลางบรรทัด เหมาะกับการสร้างข้อความที่เป็นหัวเรื่อง

    ตัวอย่าง center.html

    <HTML>
    <HEAD><TITLE> Center </TITLE></HEAD>
    <BODY>
    <H1><CENTER>คอลัมน์สาระไอทีสำหรับชาวเรือ</CENTER></H1>
    <H2><CENTER>เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับ</CENTER></H2>
    <H3><CENTER>เรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ </CENTER></H3>
    </BOYD>
    </HTML>

    การตีเส้นแนวนอน (Horizontal Line)

    ภาษา HTML มีคำสั่งช่วยในการตีเส้นแนวนอน เพื่อแยกเอกสารออกเป็นส่วน ๆ ให้ง่ายต่อการดูรูปแบบเอกสารมากขึ้น โดยมีรูปแบบดังนี้

    <HR>

    สำหรับคำสั่ง <HR> นี้จะไม่มีแท็กปิด เป็นคำสั่งในลักษณะที่เรียกว่าแท็กเปิด ซึ่งถ้าเป็นคำ default จะแสดงเส้นขนาด 2 pixels เต็มจอภาพ แต่คำสั่ง <HR> ยังมี Attributes ช่วยในการกำหนดความหนา, ความยาว, การจัดตำแหน่ง และการกำหนดความทึบของเส้น โดยมีรูปแบบดังนี้

    <HR Size = "ความหนาของเส้น"
    Width = "ความยาวของเส้น"
    Align = "ตำแหน่งการจัดวาง"
    Noshade>
     

    Size เป็นการกำหนดความหนาให้กับเส้น ขนาดปกติ คือ 2 pixels

    Width เป็นการกำหนดความยาวให้กับเส้น สามารถกำหนดเป็นทั้ง pixels และ % โดยปกติถ้าไม่กำหนด เส้นจะยาวเต็มจอภาพ

    Align เป็นการกำหนดตำแหน่งการจัดวางของเส้น ประกอบด้วย

    Left คือ การจัดเส้นชิดซ้ายของบรรทัด

    Center คือ การจัดเส้นอยู่กึ่งกลางบรรทัด

    Right คือ การจัดเส้นชิดขาวของบรรทัด

    Noshade เป็นการกำหนดแสดงเส้นทึบไม่มีการแรงเงาของเส้น

    ตัวอย่าง horizontal_line.html

    <HTML>
    <HEAD><TITLE> Horizontal Line </TITLE></HEAD>
    <BODY>
    เส้นขนาดปกติ
    <HR>
    เส้นความหนา 5
    <HR Size="5">
    เส้นความหนา 20
    <HR Size="20">
    เส้นความยาว 200
    <HR Width="200">
    เส้นความยาว 50% ของจอภาพ
    <HR Width="50%">
    เส้นความหนา 20 ความยาว 20%
    <HR Szie="20" Width="20%">
    เส้นความหนา 10 ความยาว 20% และอยู่ชิดซ้ายของบรรทัด
    <HR Szie="10" Width="20%" Align="Left">
    เส้นความหนา 10 และแสดงเส้นทึบโดยไม่มีการแรงเงาของเส้น
    <HR Szie="10" Noshade>
    </BOYD>
    </HTML>


    การจัดการตัวอักษร

    คำสั่งในการกำหนดแบบตัวอักษร (Font Type)

    คำสั่งในการกำหนดตัวอักษรนั้น เราใช้แท็ก <FONT> ซึ่งแท็กนี้สามารถที่จะกำหนดได้ตั้งแต่ แบบตัวอักษร (Font Face), ขนาดของตัวอักษร (Font Size) และสีของตัวอักษร (Font Color)

    การกำหนดแบบตัวอักษร หรือที่เรียกว่า ฟอนต์ (Font) โดยปกติค่าเริ่มต้นของเวบบราวเซอร์จะกำหนดเป็นแบบ Time New Roman เพื่อความหลากหลายของรูปแบบตัวอักษรมากกว่า 1 รูปแบบบนจอภาพของบราวเซอร์ แต่เราสามารถใช้คำสั่ง <FONT> ตามด้วย Attributes "FACE" เพื่อกำหนดรูปแบบการแสดงผลภาษาไทยให้กับตัวอักษรของเวบเพจของเราได้ ซึ่งการแสดงผลภาษาไทยนั้นมีฟอนต์ให้เลือกหลายแบบตัวอย่างเช่น AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เป็นต้น แต่สำหรับฟอนต์ที่เหมาะสมกับการแสดงผลภาษาไทยในเวบบราวเซอร์ คือ MS Sans Serif โดยมีรูปแบบดังนี้

    <FONT Face = "ชื่อฟอนต์"> ... ข้อความ ... </FONT>

    ถ้าต้องการระบุมากกว่า 1 ฟอนต์ ให้กำหนดรูปแบบดังนี้

    <FONT Face = "ชื่อฟอนต์1",ชื่อฟอนต์2",...> ... ข้อความ ... </FONT>

    ข้อดีของการกำหนดฟอนต์ไว้มากกว่า 1 ฟอนต์ ก็คือ เมื่อเวบบราวเซอร์หาฟอนต์ที่ 1 ไม่เจอก็จะหาฟอนต์ที่ 2 ต่อไปตามลำดับ

    ตัวอย่าง font_face.html

    <HTML>
    <HEAD><TITLE> Font Face </TITLE></HEAD>
    <BODY>

    <FONT Face="AngsanaUPC">
    แบบตัวอักษรแบบ AngsanaUPC
    </FONT>
    <BR>

    <FONT Face="Ms Sans Serif">
    แบบตัวอักษรแบบ Ms Sans Serif
    </FONT>
    <BR>

    <FONT Face="Comic Sans MS">
    Font Style Comic Sans MS
    </FONT>
    <BR>

    <FONT Face="Bookman Old Style">
    Font Style Bookman Old Style
    </FONT>
    <BR>

    </BOYD>
    </HTML>

    เราสามารถกำหนดขนาดของตัวอักษรในคำสั่ง <FONT> โดยใช้ Attributes "Size" ในภาษา HTML กำหนดขนาดของตัวอักษรได้ 7 ขนาด โดยใช้ตัวเลข 1-7 เป็นตัวกำหนด ค่าเริ่มต้นจะมีขนาดเป็น 3

    <FONT Size = "ขนาด"> ... ข้อความ ... </FONT>

    ตัวอย่าง font_size.html

    <HTML>
    <HEAD><TITLE> Font Face </TITLE></HEAD>
    <BODY>

    <FONT Size="1">Font Size 1</FONT><BR>
    <FONT Size="2">Font Size 2</FONT><BR>
    <FONT Size="3">Font Size 3</FONT><BR>
    <FONT Size="4">Font Size 4</FONT><BR>
    <FONT Size="5">Font Size 5</FONT><BR>
    <FONT Size="6">Font Size 6</FONT><BR>
    <FONT Size="7">Font Size 7</FONT><BR>

    </BOYD>
    </HTML>

    การกำหนดสีให้กับตัวอักษรเราใช้ Attributes "Color" ในการกำหนดสีของตัวอักษรทำได้ 2 วิธี

    กำหนดจากชื่อของสีมาตรฐาน เป็นการกำหนดจากชื่อสีมาตรฐานโดยตรง เช่น Black, Red เป็นต้น

    กำหนดจากรหัสเลขฐาน 16 จะใช้การอ้างอิงเลขฐาน 16 ในระบบของหมายเลขสี RGB (Red, Green, Blue) ซึ่งมีรูปแบบของรหัสสีเป็น #RRGGBB โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0, 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลำดับ

    โดยมีรูปแบบดังนี้

    <FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ... </FONT>

    <FONT Color = "#RRGGBB"> ... ข้อความ ... </FONT>

    ตัวอย่างสีมาตราฐานในการแสดงผลบนเวบบราวเซอร์ (ในที่นี้ขอใช้ Internet Explorer เป็นหลัก) ทั้งชื่อของสี และรหัสเลขฐาน 16 มีดังนี้

    ตัวอย่าง font_color.html

    <HTML>
    <HEAD><TITLE> Font Color</TITLE></HEAD>
    <BODY>

    <FONT color="Blue">This is Blue Color</FONT><BR>
    <FONT color="Green">This is Green Color</FONT><BR>
    <FONT color="#FFA500">This is #FFA500</FONT><BR>

    </BOYD>
    </HTML>

    คำสั่งในการกำหนดลักษณะตัวอักษร (Style)

    ในภาษา HTML มีคำสั่งที่ช่วยในการกำหนดลักษณะตัวอักษรให้มีความเด่นชัด เพื่อความเหมาะสมกับงานในลักษณะต่าง ๆ โดยมีรูปแบบต่าง ๆ ดังนี้

    การกำหนดตัวอักษรตัวหนา (Bold) ใช้แท็ก <B>

    การกำหนดตัวอักษรตัวเอียง (Italic) ใช้แท็ก <I>

    การกำหนดขีดเส้นใต้ตัวอักษร (Underline) ใช้แท็ก <U>

    การกำหนดตัวอักษรตัวพิมพ์ดีด (Typewriter) ใช้แท็ก <TT>

    การกำหนดขีดเส้นพาดทับกลางตัวอักษร (Strikethrough) ใช้แท็ก <S>

    การกำหนดตัวอักษรตัวห้อย (Subscript) ใช้แท็ก <SUB>

    การกำหนดตัวอักษรตัวยก (Superscript) ใช้แท็ก <SUP>

    การกำหนดตัวอักษรตัวโต (Big) ใช้แท็ก <BIG>

    การกำหนดตัวอักษรตัวเล็ก (Small) ใช้แท็ก <SAMLL>

    <B> ... ข้อความ ... </B>
    <I> ... ข้อความ ... </I>
    <U> ... ข้อความ ... </U>
    <TT> ... ข้อความ ... </TT>
    <S> ... ข้อความ ... </S>
    <SUB> ... ข้อความ ... </SUB>
    <SUP> ... ข้อความ ... </SUP>
    <BIG> ... ข้อความ ... </BIT>
    <SAMLL> ... ข้อความ ... </SAMLL>

    ตัวอย่าง style.html

    <HTML>
    <HEAD><TITLE> Font Face </TITLE></HEAD>
    <BODY>

    แบบตัวอักษรปกติ
    แบบตัวอักษรหนา <B>Bold</B><BR>
    แบบตัวอักษรเอียง <I>Italic</I><BR>
    แบบตัวอักษรขีดเส้นใต้ <U>Underline</U><BR>
    แบบตัวอักษรตัวพิมพ์ดีด <TT>Typewriter</TT><BR>
    แบบตัวอักษรขีดเส้นพาดทับกลางตัวอักษร <S>Strikethrough</S><BR>
    แบบตัวอักษรตัวห้อย <SUB>Subscript</SUB><BR>
    แบบตัวอักษรตัวยก <SUP>Superscript</SUP><BR>
    แบบตัวอักษรตัวโต <BIG>Big</BIG><BR>
    แบบตัวอักษรตัวเล็ก <SAMLL>Small</SAMLL>

    </BOYD>
    </HTML>

    การกำหนดสีพื้นหลัง

    การกำหนดสีพื้นหลังของเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "BGColor" โดยมีรูปแบบดังนี้

    กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน

    <BODY BGColor = "สีพื้นหลัง">....

    </BODY>
    กำหนดสีพื้นหลังจากเลขฐาน 16

    <BODY BGColor = "#RRGGBB">

    ....

    </BODY>

    ตัวอย่าง bgcolor.html

    <HTML>
    <HEAD><TITLE> Heading </TITLE></HEAD>
    <!-- BODY BGColor="Yellow" -->
    <BODY BGColor="#FFFF00">

    คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>

    เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
    </BOYD>
    </HTML>

    การกำหนดสีให้กับตัวอักษรทั้งเอกสาร

    การกำหนดสีให้กับตัวอักษรทั้งเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "Text" โดยมีรูปแบบดังนี้

    กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน
    <BODY Text = "สีพื้นหลัง">
    ....
    </BODY>

    กำหนดสีพื้นหลังจากเลขฐาน 16
    <BODY Text = "#RRGGBB">
    ....
    </BODY>

    ตัวอย่าง body_text.html

    <HTML>
    <HEAD><TITLE> Heading </TITLE></HEAD>
    <!-- BODY Text="Red" -->
    <BODY Text="#FF0000">
    คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>

    เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ

    </BOYD>
    </HTML>


     การกำหนดเครื่องหมายหัวข้อและเลขลำดับ

    คำสั่งในการแสดงรายการแบบไม่มีลำดับ (Unorder List)

    Unorder List หรือ Bullet List นั้น ในภาษา HTML ได้กำหนดคำสั่งในการอำนวยความสะดวกในการสร้าง Bullet ขึ้นไว้ด้วย เพื่อแสดงเครื่องหมายหน้าหัวข้อเรื่องหรือลำดับของรายการต่าง ๆ โดยไม่มีการเรียงลำดับ โดยมีรูปแบบดังนี้

    <UL>
    <LI> ... ข้อความ ...
    <LI> ... ข้อความ ...
    <LI> ... ข้อความ ...
    ... ...........
    </UL>

    ตัวอย่าง bullet1.html

    <HTML>
    <HEAD><TITLE> List Item </TITLE></HEAD>
    <BODY>
    <UL>Viewing the Navigator Window
    <LI>Window and frames
    <LI>Colors and underlining
    <LI>Company logo
    <LI>Progress bar
    <LI>Status message area
    </UL>
    </BOYD>
    </HTML>

    เรายังสามารถระบุชนิดของเครื่องหมายได้ด้วย Attributes "Type" ในแท็ก <UL> หรือ <LI> โดยมีรูปแบบดังนี้

    <UL Type = "ชนิดของเครื่องหมาย">
    <LI Type = "ชนิดของเครื่องหมาย">

    ชนิดของเครื่องหมายมีด้วยกัน 3 แบบ ดังนี้

    ชนิดของเครื่องหมาย สัญญาลักษณ์ที่ปรากฏ

    ชนิดของเครื่องหมาย

    สัญญาลักษณ์ที่ปรากฏ

    Disc

    •  

    Circle

    •  

    Square

    •  

    ตัวอย่าง bullet2.html

    <HTML>
    <HEAD><TITLE> List Item </TITLE></HEAD>
    <BODY>

    <UL Type="Circle">คอลัมน์สาระไอทีสำหรับชาวเรือ

    <LI>บทความเกี่ยวกับการออกแบบโปรแกรม
    <UL>
    <LI Type="Disc">(IT001)
    </UL>
    <LI>บทความเกี่ยวกับวิทยาการคอมพิวเตอร์เบื้องต้น
    <UL>
    <LI Type="Disc">(IT002)
    </UL>
    <LI>บทความเกี่ยวกับโครงสร้าง Software
    <UL>
    <LI Type="Disc">(IT003)
    </UL>
    </UL>

    </BOYD>
    </HTML>

    คำสั่งในการแสดงรายการแบบเป็นลำดับ (Order List)

    เราสามารถแสดงรายการแบบเป็นลำดับ คือ Order List หรือ Numer List ได้ โดยการใช้ตัวเลขหรือตัวอักษรเป็นตัวกำหนดแสดงลำดับ โดยมีรูปแบบดังนี้

    <OL Type = "ชนิดของตัวเลข" Start = "ตัวเลขเริ่มต้น">
    <LI> ... ข้อความ ...
    <LI> ... ข้อความ ...
    <LI> ... ข้อความ ...
    ... ...........
    </OL>

    ชนิดของ Type กำหนดเลขลำดับได้ดังนี้

    ชนิดของ Type สิ่งที่ปรากฏ

    ชนิดของ Type

    สิ่งที่ปรากฏ

    A
    แสดงตัวอักษรพิมพ์ใหญ่ (Caplital letters)
    a
    แสดงตัวอักษรพิมพ์เล็ก (Small letters)
    I
    แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ (Large Roman numerals)
    i
    แสดงตัวเลขโรมันตัวพิมพ์เล็ก (Small Roman numerals)
    1
    แสดงตัวเลขอารบิก (Small Roman numerals)
    * เป็นค่า deflaut *

    ตัวอย่าง order_list.html

    <HTML>
    <HEAD><TITLE> Order List </TITLE></HEAD>
    <BODY>

    <OL Type="I">My computer in my dream
    <LI>Inter XENON Pentium 4 processor 4.0 GHz
    <LI>RDRAM 4 GB
    <LI>Harddisk 120 GB
    <LI>11X DVD-RW Drive
    <LI>Speakers (Labtec) 160 Watt
    <LI>Asus GeForce4 128 MB
    <LI>Creative Sound Baster 5
    <LI>Monitor Sony Wega 20"
    </OL>

    </BOYD>
    </HTML>


    การสร้างตาราง

    คำสั่งในการสร้างตาราง (Table)

    การสร้างเวบเพจในปัจจุบันมีการนำตารางเข้ามาเกี่ยวข้องกับหลาย ๆ ส่วน ตั้งแต่การสร้างตารางเพื่อแสดงความสัมพันธ์ในลักษณะแถว (Row) และคอมลัมน์ (Column) รวมถึงการแบ่งขอบเขตให้กับข้อความเพื่อการจำกัดและควบคุมข้อความให้อยู่ในส่วนที่เราต้องการ

    คำสั่งสำหรับสร้างตารางประกอบด้วยคำสั่งดังนี้

    Tag

    คำอธิบาย

    <TABLE> ... </TABLE>

    คำสั่งในการสร้างตาราง

    <CAPTION> ... </CAPTION>

    คำสั่งในการกำหนดข้อความกำกับตาราง

    <TR> ... </TR>

    คำสั่งในการกำหนดแถวของตาราง 1 แถว

    <TH> ... </TH>

    คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก

    <TD> ... </TD>

    คำสั่งในการกำหนดส่วนของข้อมูลในแถว

    สำหรับโครงสร้างของคำสั่งในการสร้างตารางมีดังนี้

    <TABLE>
    <CAPTION> ข้อความกำกับตาราง </CAPTION>
    <TR>
    <TH> ข้อความส่วนหัว </TH>
    ....................
    ....................
    </TR>
    <TR>
    <TD> ข้อความส่วนของข้อมูล </TD>
    ........................
    ........................
    </TR>
    <TR>
    <TD> ข้อความส่วนของข้อมูล </TD>
    ........................
    ........................
    </TR>
    ........................
    ........................
    ........................
    </TABLE>

    ตัวอย่าง table1.html

    <HTML>
    <HEAD><TITLE> Table Tag </TITLE></HEAD>
    <BODY>
    <CENTER>
    Example Data
    <H2>Report Sale 2001</H2>
    <TABLE>
    <TR>
    <TH>Month</TH>
    <TH>Sale A</TH>
    <TH>Sale B</TH>
    <TH>Sale C</TH>
    </TR>
    <TR>
    <TD>January</TD>
    <TD>500</TD>
    <TD>800</TD>
    <TD>700</TD>
    </TR>
    <TR>
    <TD>February</TD>
    <TD>1200</TD>
    <TD>1000</TD>
    <TD>300</TD>
    </TR>
    <TR>
    <TD>Mar</TD>
    <TD>900</TD>
    <TD>400</TD>
    <TD>600</TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>

    เรายังสามารถใช้ Attributes เพื่อให้เวบบราวเซอร์แสดงตารางให้ชัดเจนยิ่งขึ้น Attributes ต่าง ๆ มีดังนี้

    Attributes

    คำอธิบาย

    Align

    กำหนดการวางตำแหน่งภายในตางราง มี 3 ลักษณะ
    Left กำหนดจัดวางชิดซ้าย
    (เป็นค่า deflaut)
    Right กำหนดจัดวางชิดขวา
    Center กำหนดจัดวางกึ่งกลาง

    Border

    กำหนดแสดงความหนาของเส้นตาราง มีหน่วยเป็น Pixel

    Height

    กำหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent

    Width

    กำหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent

    CellSpacing

    กำหนดช่องว่างระหว่างตาราง

    CellPadding

    กำหนดช่องว่างระหว่างบรรทัดของตาราง

    การกำหนดค่าต่าง ๆ ของ Attributes ที่กล่าวมาแล้ว ความแตกต่างของการกำหนดค่าเป็น pixel และเป็น percent นั้นมีความแตกต่างกันดังนี้

    พิเซล (Pixel) การกำหนดค่าเป็นแบบพิเซล เมื่อการลดขนาดของเวบบราวเซอร์ตารางจะไม่ลดขนาดตามความกว้าง หรือยาวของเวบบราวเซอร์

    เปอร์เซ็นต์ (Percent หรือ %) ถ้ากำหนดค่าในลักษณะของ Percent เมื่อบราวเซอร์มีการลดขนาดลง ขนาดของตารางจะลดสัดส่วนตามขนาดของตัวเวบบราวเซอร์ด้วย

    ตัวอย่าง table2.html

    <HTML>
    <HEAD><TITLE> Table Tag </TITLE></HEAD>
    <BODY>
    <CENTER>
    Example Data
    <H2>Report Sale 2001</H2>
    <TABLE Border="3" CellSpacting="5" CellPadding="3">
    <TR>
    <TH>Month</TH>
    <TH>Sale A</TH>
    <TH>Sale B</TH>
    <TH>Sale C</TH>
    </TR>
    <TR>
    <TD>January</TD>
    <TD>500</TD>
    <TD>800</TD>
    <TD>700</TD>
    </TR>
    <TR>
    <TD>February</TD>
    <TD>1200</TD>
    <TD>1000</TD>
    <TD>300</TD>
    </TR>
    <TR>
    <TD>Mar</TD>
    <TD>900</TD>
    <TD>400</TD>
    <TD>600</TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>

    คำสั่งในการกำหนดสี และการจัดตำแหน่งของข้อมูลในตาราง

    ในการสร้างตารางในภาษา HTML มี Attributes ที่ช่วยเพิ่มสีสันและความเหมาะสมให้กับตาราง คือ

    Align ใช้กำหนดการจัดตำแหน่งของข้อมูลในตางราง ไม่ว่าจะเป็นข้อความหรือภาพ กำหนดได้ 3 ลักษณะ

    Left กำหนดการจัดวางแบบชิดขอบซ้ายของตาราง

    Right กำหนดการจัดวางแบบชิดขอบขาวของตาราง

    Center กำหนดการจัดวางแบบกึ่งกลางของตาราง

    BGColor เป็นการกำหนดพื้นสีภายในตารางที่อยู่ในแถวนั้น

    ตัวอย่าง table3.html

    <HTML>
    <HEAD><TITLE> Table Tag </TITLE></HEAD>
    <BODY>
    <CENTER>
    <H2>Report Sale 2001</H2>
    <TABLE Border="3" CellSpacting="5" CellPadding="3">
    <CAPTION Aling="Bottom">
    Summation Sale Report
    </CAPTION>
    <TR Aling="Center" BGColor="Whitegreen">
    <TH>Month</TH>
    <TH>Sale A</TH>
    <TH>Sale B</TH>
    <TH>Sale C</TH>
    </TR>
    <TR Align="Center" BGColor="Yellow">
    <TD>January</TD>
    <TD>500</TD>
    <TD>800</TD>
    <TD>700</TD>
    </TR>
    <TR Align="Center" BGColor="Skyblue">
    <TD>February</TD>
    <TD>1200</TD>
    <TD>1000</TD>
    <TD>300</TD>
    </TR>
    <TR Align="Center" BGColor="Pink">
    <TD>Mar</TD>
    <TD>900</TD>
    <TD>400</TD>
    <TD>600</TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>



    อ่านทั้งหมด: 9252, ความเห็นทั้งหมด: 0

    แสดงความเห็น
    ข้อความ
       
      
     
     
       
    แนบรูป *เฉพาะสมาชิกเท่านั้น
    จาก  
    พิมพ์คำว่า คนไทย ในช่องนี้ ->

    เรื่องราวอื่นๆจากบลอกเพื่อนบ้าน

    แพ็คเกจสิบสองปันนา 2 วัน /1 คืน
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ (ดีโพลมา2586ร่วมกับสื่อสยามข่าวมวลชน
    จับตู้ม้า-ตู้สลอตกว่า 100 ตู้ (ดีโพลมา2585ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    เปาบุ้นจิ้นศึกชิงจอหงวน-5 END (ดีโพลมา2584ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    HOT!!! เที่ยวญี่ปุ่นถูกแสนถูก ลดกระหน่ำซัมเมอร์เซลล์ มาแล้วจร้าาา
    การทำความสะอาดที่ปลอดภัย ไว้ใจได้ ขณะที่ Autobot กำลังทำงาน
    เซี่ยงไฮ้-ฮาร์บิ้น 6วัน 4คืน
    PACKAGE SINGAPORE 3D2N
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ(ดีโพลมา2583)ร่วมกับสื่อสยามข่าวมวลชน
    สอบถามการขอคืนที่ดินบริจาค (ดีโพลมา2582)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    งานแถลงข่าว “ละครซ้อนหนัง ณ โรงมหรสพหลวง" (ดีโพลมา2581)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    เทคโนโลยีสลายมะเร็งด้วยความเย็นทางเลือกใหม่ผู้ป่วยมะเร็งระยะสุดท้าย
    ดูดวง 12 ราศี เช็กโชคชะตา ตามตำราพรหมชาติ
    ดูดวงปีชง 2558 วิธีแก้ปีชง 2558 มีอะไรบ้าง
    หนังตลกจั๊กกะแหล (ดีโพลมา2580)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    11-15งานทอดกฐินวัดบ้านนำ้ดั้นจ.พิษณุโลก(ดีโพลมา251057)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    6-10งานทอดกฐินวัดบ้านนำ้ดั้นจ.พิษณุโลก(ดีโพลมา251057)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    1-5งานทอดกฐินวัดบ้านนำ้ดั้นจ.พิษณุโลก(ดีโพลมา251057)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    งานทอดกฐินวัดบ้านนำ้ดั้นจ.พิษณุโลก(ดีโพลมา251057)และสื่อสยามข่าวมวลมีทั้งหมด 15 ตอน
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ(ดีโพลมา2578)ร่วมกับสื่อสยามข่าวมวลชน
    อินไซด์ตำรวจประจำวันที่27ต.ค.2557 (ดีโพลมา2577)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    หนังตลกวัยรุ่นพังร้าน (ดีโพลมา2576)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    วิธีฉลาดสุดๆ ที่ทำให้ชีวิตคุณง่ายขึ้น
    เคล็ดลับช่วยหุ่นผอมเพรียว แถมยังทำให้สุขภาพดี
    อาหารลดน้ำหนัก 10 ชนิด กินแล้วไม่อ้วน
    ลดหุ่นด้วยถั่วเหลือง
    วุ้นในลูกตาเสื่อม อันตรายที่คนใช้คอมพิวเตอร์ต้องอ่าน
    สวยใสฟิตเป๊ะตามเทรนด์สุขภาพ ฉบับสาวออฟฟิศ
    แคปซูลปลูกต้นไม้ ไม่ต้องดูแลมากก็มีสวนสวยได้
    ทำนายดวงความรักกับวันทั้ง 7 วัน
    5 เครื่องปรุงสุดเจ๋งจากในครัว ที่ใช้ทำความสะอาดได้ด้วย
    15 ตึกสวยแจ่มสีคัลเลอร์ฟูล ที่เห็นแล้วต้องร้องว้าว !
    Fruity Yummy ผลไม้แปลงกายหม่ำอร่อย
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ(ดีโพลมา2575)ร่วมกับสื่อสยามข่าวมวลชน
    "สมยศ" สั่งพิจารณาคืนความสุขตำรวจ(ดีโพลมา2574)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    ชมละครซ้อนหนังจากหนังไทย 8 เรื่อง(ดีโพลมา2573)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    หอยทาก" นับพันตัว! บุกแฟลตตำรวจ สภ.เมืองพิษณุโลก (ชมคลิปชัดๆ) (ดีโพลมา2572)ร่วมกับสื่อสย
    หนังเรื่องคัมภีร์หยุดกระสุน (ดีโพลมา2571)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ (ดีโพลมา2570)ร่วมกับสื่อสยามข่าวมวลช
    ตำรวจแคนาดาเผยภาพนาทีระทึก มือปืนบุกเข้าไปกราดยิงในรัฐสภา (ชมคลิป) (ดีโพลมา2569)ร่วมกับส
    หนังเรื่องทะลักจุดแตก(ดีโพลมา2568)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    หนังเรื่องทะลักจุดแตก
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ (ดีโพลมา2567)ร่วมกับสื่อสยามข่าวมวลช
    กฎหมายเรื่องการวิ่งเต้นล้มคดี(ดีโพลมา2566)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    กำเนิดเจ้าแม่กวนอิม - ตอนที่ 27(ดีโพลมา2565)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    กำเนิดเจ้าแม่กวนอิม - ตอนที่ 27
    คลิปสรุปข่าวประจำวันนี้มีหลายข่าวต่อเนื่องอัตโนมัติ(ดีโพลมา2564)ร่วมกับสื่อสยามข่าวมวลชน
    ลูกครูญี่ปุ่น ถูกฆ่าหั่นศพ รุดพบตำรวจ (ดีโพลมา2563)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    กำเนิดเจ้าแม่กวนอิม - ตอนที่ 26(ดีโพลมา2562)ร่วมกับสื่อสยามข่าวมวลชน(รายงาน)
    อาการของหมอนรองกระดูกทับเส้นประสาท

    เลือกดูบลอก Search:
    ใช้เวลาประมวลผลหน้านี้ 31.2ms