เข้าสู่ระบบ จำนวนคนออนไลน์ 9810 คน
พัชรี พรมมา
คลังเก็บข้อมูลจากการสือค้น
 
หัวข้อล่าสุด
 
 
  • ขนาดอะตอม(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>
     
    1431123456
    1578910111213
    1614151617181920
    1721222324252627
    182829301234
    19567891011
     
         
     
    สถิติบลอกนี้
     
     
    • คนเข้าบลอกนี้ทั้งหมด 26630
    • เฉพาะวันนี้ 7
    • ความคิดเห็น 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>



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

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

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

    สมัครทำบัตรเครดิตธนาคารซิตี้แบงก์ พบกับบริการดีๆแก่คุณตลอด 24 ชั่วโมงทุกวัน–ซิตี้แบงก์ปร
    NTP Server ในไทย
    สุเทพ 30 เม.ย.แถลงใหญ่นัดวันเผด็จศึก(ดีโพลมา1989)
    ร้อยข่าวบลูสกาย 23 04 57 เบรค1(ดีโพลมา1988)
    เปิดตัวองค์กรเก็บขยะแผ่นดิน ล่าคนหมิ่น (ดีโพลมา1987)
    Sv พระศิวะ แผ่นที่ ๓๖(ดีโพลมา1986)
    ศึกโค่นบัลลังก์วังทอง(ดีโพลมา1985)
    สุเทพ เวทีสวนลุมพินี 22 04 57(ดีโพลมา1984)
    ขั้นตอนการสั่งฃื้อครับ 10 แถม 1 แผ่น
    ร้อยข่าวบลูสกาย 22 04 57 เบรค1(ดีโพลมา1983)
    ร้อยข่าวบลูสกาย 22 04 57 เบรค2(ดีโพลมา1982)
    Sv พระศิวะ แผ่นที่ ๓๕(ดีโพลมา1981)
    Tasek Lama Recreational Park
    คำสั่ง find linux command
    สำหรับผู้ใช้เน็ตทุกวัน มาทำงานคีย์ข้อมูลผ่านเน็ต สร้างรายได้จากที่บ้าน
    Bangkok Meeting Hotel, Bangkok Convention Hotel, Bangkok Hotel Rooms – The Twin Towers H
    งานออนไลน์ ใช้เน็ตพื้นฐานทำงาน วันละ 2-3 ชั่วโมง
    ร้อยข่าวบลูสกาย 21 04 57 (ดีโพลมา1980)
    สุเทพ" นำรณรงค์(ดีโพลมา1978)
    ชิดลมนิวส์ยังฮา(ดีโพลมา1977)
    เวทีสวนลุมพินี 20 04 57(ดีโพลมา1976)
    Sv พระศิวะ แผ่นที่ ๓๔(ดีโพลมา1975)
    มาดูกันสิว่าถ่าน Alkaline ยี่ห้อไหนจะเจ๋งกว่ากัน
    เวทีสวนลุมพินี 19 04 57 (ดีโพลมา1974)
    สมชาย' ชี้ 'ยิ่งลักษณ์' ถ่วงเปิดประชุมวุฒิ (ดีโพลมา1973)
    ดูหนัง ไซอิ๋ว2013 HD(ดีโพลมา1972)
    พิมพ์งานออนไลน์ ใช้เน็ตพื้นฐานทำงาน วันละ 2-3 ชั่วโมง
    งานพาร์ทไทม์ รับงานกลับมาทำที่บ้าน ใช้ word ทำงาน ที่นี่เลย
    5 อันดับเครื่องมือตัดต่อวิดีโอ
    สุเทพ เวทีสวนลุมพินี 18 04 57(ดีโพลมา1971)
    สุเทพ เวทีสวนลุมพินี 18 04 57
    Sv พระศิวะ แผ่นที่ ๓๓(ดีโพลมา1970)
    ปชป.เตรียมทีมกฏหมายฟ้อง ศอ.รส.(ดีโพลมา1969)
    ศาล รธน.พิจารณาคำขอนายกฯ(ดีโพลมา1968)
    งานนอกเวลา ทำหลังเลิกงาน จ่ายรายวัน สนใจงานคลิกที่นี่ด่วน
    สุเทพ เวทีสวนลุมพินี 17 04 57(ดีโพลมา1967)
    Sv พระศิวะ แผ่นที่ ๓๒(ดีโพลมา1966)
    เวทีสวนลุมพินี 16 04 57(ดีโพลมา1965)
    Sv พระศิวะ แผ่นที่ ๓๐(ดีโพลมา1964)
    เปิ้ล ไอริณ" ไม่ยอม "แมน-ใบเตย"(ดีโพลมา1963)
    งานรายได้เสริม ทำเป็นงานอดิเรก ยามว่าง สนใจคลิก
    รีวิวพิเศษ ทงคัตสึ ไมเซน Tonkatsu MAiSEN พาไป Root Trip ถึงไมเซน ประเทศญี่ปุ่น
    ดีโพลมา1960)ไปเที่ยวpattaya dolphin worldและซีมูนรีสอร์ท
    สุเทพ เวทีสวนลุมพินี 15 04 57(ดีโพลมา1962)
    Sv พระศิวะ แผ่นที่ ๒๙ (ดีโพลมา1961)
    https://www.youtube.com/watch?v=oifxuZZ9F7A
    รับนักเรียนนักศึกษาหางานพิเศษช่วงปิดเทอม รับจำนวนมาก คลิกเลยที่นี่ค่ะ
    ร้อยข่าวสุดสัปดาห์ 13 04 57(ดีโพลมา1959)
    รับคนคีย์ข้อมูลผ่านเน็ต จำนวนมาก สามารถทำที่บ้านได้
    Sv พระศิวะ แผ่นที่ ๒๘(ดีโพลมา1958)

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