รวมโค๊ต HTML


ขอขอบคุณ http://www.oknation.net/blog/print.php?id=483116

 

เกี่ยวกับรูปแบบ

<br> : เว้นบรรทัด

&nbsp; : เว้นวรรค

<div align="left">ข้อความ</div> : ข้อความชิดซ้าย

<div align="right">ข้อความ</div> : ข้อความชิดขวา

<div align="center">ข้อความ</div> : ข้อความอยู่กลาง

<center>ข้อความ</center> : ข้อความอยู่กลาง

------------------------------------------------------------

เกี้ยวกับสีสันข้อความ

<b>ข้อความ</b> : ตัวหนา

<strong>ข้อความ</strong> : ตัวหนา

<i>ข้อความ</i> : ตัวเอียง

<em>ข้อความ</em> : ตัวเอียง

<u>ข้อความ</u> ขีดเส้นใต้

<font size="10">ข้อความ</font> : ขนาดข้อความ

<font color="#000000">ข้อความ</font> : สีข้อความ

<font color="#000000" size="10">ข้อความ</font> : ขนาดและสีข้อความ

------------------------------------------------------------

เกี่ยวกับรูปภาพ

<img src="url"> : ใส่รูป

<img src="url" width="100px" height="100px"> : ใส่รูป แบบ กำหนดขนาด

<img src="url" border="3" border-color="#000000"> : ใส่รูป แบบ กำหนกขนาดและสีเส้นขอบ

<img src="url" ait="ข้อความ"> : ใส่รูป แบบ เวลาเอาเมาไปชี้แล้วมีข้อความขึ้นมา

------------------------------------------------------------

เกี่ยวกับ Link

<a href="url">ข้อความ</a> : ลิ้งโดยใช้ข้อความ

<a href="url"  target="_blank">ข้อความ</a> : ลิ้งโดยใช้ข้อความ แบบเปิดหน้าต่างไหม่

<a href="url"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ
 
<a href="url"  target="_blank"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ แบบเปิดหน้าต่างไหม่

------------------------------------------------------------

เกี้ยวกับ marquee หรือข้อความเลื่อน

<marquee>ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="left">ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

<marquee direction="right">ข้อความ</marquee> : ข้อความเลื่อนจากซ้ายไปขวา

<marquee direction="up">ข้อความ</marquee> : ข้อความเลื่อนจากล่างขึ้นบน

<marquee direction="down">ข้อความ</marquee> : ข้อความเลื่อนจากบนลงล่าง

<marquee width="100px" height="100px">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความกว้าง



<marquee bgcolor="#00CC99">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดสีพื้นหลัง

<marquee scrollamount="1">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความเร็ว

<marquee behavior="alternate">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปกลับ

<marquee behavior="slide">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปรอบเดียว

------------------------------------------------------------

เกี้ยวกับ marquee หรือรูปเลื่อน

<marquee><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

<marquee direction="left"><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

<marquee direction="right"><img src="urlรูป"></marquee> : รูปเลื่อนจากซ้ายไปขวา

<marquee direction="up"><img src="urlรูป"></marquee> : รูปเลื่อนจากล่างขึ้นบน

<marquee direction="down"><img src="urlรูป"></marquee> : รูปเลื่อนจากบนลงล่าง

<marquee width="100px" height="100px"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความกว้าง

<marquee bgcolor="#00CC99"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดสีพื้นหลัง

<marquee scrollamount="1"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความเร็ว

<marquee behavior="alternate"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ ไปกลับ

<marquee behavior="slide"> <img src="urlรูป"> </marquee> : รูปเลื่อน แบบ ไปรอบเดียว

------------------------------------------------------------

เกี่ยวกับตาราง

<table background="urlรูป"><tr><td>ข้อความ</td></tr></table> ใส่พื้นหลังไห้ข้อความ

------------------------------------------------------------

การดัดแปลง

เช่นผมคิดจะทำ topfriend เลื่อนได้

<center>
        <table border="2" bordercolor="#สีขอบ" height="150" width="400" background="ภาพพื้นหลัง">
                <tr>
                        <td>
                                <marquee direction="left">
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                        <a href="ลิ้ง"><img border="0" src="รูป" alt="ชื่อ" height="100" width="100"></a>
                                </marquee>
                        </td>
                </tr>
        </table>
</center>

หรืออักษร welcome สวยๆ

<center>
     <b>
          <FONT COLOR="#FF0000" size="5">W</FONT>
          <FONT COLOR="#FF9900" size="5">e</FONT>
          <FONT COLOR="#FFFF00" size="5">l</FONT>
          <FONT COLOR="#99FF00" size="5">c</FONT>
          <FONT COLOR="#00FF00" size="5">o</FONT>
          <FONT COLOR="#00FF99" size="5">m</FONT>
          <FONT COLOR="#00FFFF" size="5">e</FONT>
          <FONT COLOR="#0099FF" size="5">T</FONT>
          <FONT COLOR="#0000FF" size="5">o</FONT>
          <FONT COLOR="#9900FF" size="5">H</FONT>
          <FONT COLOR="#FF00FF" size="5">i</FONT>
          <FONT COLOR="#FF0099" size="5">5</FONT>
     </b>
</center>

ขอแค่ว่าเปิดแล้วต้องปิด เท่านั้น

 

 

 

<p><span style="color: #800000;">น้ำตาล</span></p>

<p><span style="color: #ff0000;">แดง</span></p>

<p><span style="color: #ff00ff;">ชมพู</span></p>

<p><span style="color: #99cc00;">เขียวอ่อน</span></p>

<p><span style="color: #008000;">เขียวแก่</span></p>

<p><span style="color: #339966;">เขียว</span></p>

<p><span style="color: #ff6600;">ส้ม</span></p>

<p><span style="color: #cc99ff;">ม่วง</span></p>

<p><span style="color: #3366ff;">ฟ้าน้ำเงิน</span></p>

<p><span style="color: #0000ff;">น้ำเงิน</span></p>

<p><span style="color: #993366;">น้ำตาล</span></p>

<p><span style="color: #800080;">น้ำตาลแก่</span></p>

<p><span style="color: #c0c0c0;">เทาอ่อน</span></p>

<p><span style="color: #999999;">เทา</span></p>

<p><span style="color: #999999;">เทาแก่</span></p>

<p><span style="color: #33cccc;">ฟ้า</span></p>

<p><span style="color: #00ffff;">ฟ้า</span></p>

<p><span style="color: #808000;">กากี</span></p>

<p><span style="color: #ff9900;">ส้มอ่อน</span></p>

<p><span style="color: #99ccff;">ฟ้า</span></p>

<p><span style="color: #99ccff;">&nbsp;</span></p>

<p><span style="color: #ccffff;">&nbsp;</span></p>

 

คำสำคัญ (Tags): #neenaanan#รวมโค๊ต html
หมายเลขบันทึก: 301085เขียนเมื่อ 26 กันยายน 2009 20:46 น. ()แก้ไขเมื่อ 15 มิถุนายน 2012 01:13 น. ()สัญญาอนุญาต: ไม่สงวนสิทธิ์ใดๆ


ความเห็น (7)

 

HTML ย่อมาจาก Hyper Text Markup Language เป็นภาษา ที่ใช้ในการเขียนเว็บเพจอย่างนึง 
โดยใช้คำสั่ง เป็นตัวกำหนดค่าต่างๆที่เราต้องการให้แสดงผลในเว็บเพจ เช่น การควบคุมสี ตำแหน่ง รูปภาพ ซึ่งคำสั่งนั้นเราเรียกว่า Tag

 

Tag เป็นข้อความที่อยู่ในเครื่องหมาย < >  Tag มีอยู่มากมายหลายชนิด และทำหน้าที่แตกต่างกันไป บางอันใช้กำหนดตัวอักษร หรือใช้แสดงรูปภาพ เป็นต้น โดยทั่วๆไปการใช้งาน Tag จะต้องมี  Tagเปิด และ  Tagปิด
รูปแบบจะเป็นแบบนี้  <Tag คำสั่ง> ข้อความ หรือรูปภาพที่ต้องการแสดง </Tag คำสั่ง>
จะสังเกตุเห็นว่า tagปิด ก็คือ Tag ที่มีเครื่องหมาย / เพิ่มมาน่ะเอง และข้อความ หรือ รูปภาพ ที่อยู่ระหว่าง Tagเปิด และ Tagปิด ก็จะถูกควบคุมให้แสดงผลไปตามที่ Tag นั้นกำหนด

 

ทีนี้ ในแต่ละ Tag ก็จะมีตัวแปร หรือ ลักษณะที่กำหนดเข้าไปเพื่อเพิ่มรายละเอียดให้กับการแสดงผลข้อมูลของเรา โดยลักษณะนี้เราจะใส่เอาไว้ในส่วนของ Tagเปิด เช่น Tag แสดงตัวอักษร ชื่อว่า Tag  <FONT>...</FONT> (ตรง ... คือข้อมูลที่เราต้องการแสดงนะคะ) ถ้าเราต้องการให้ตัวอักษรของเราเป็นสีแดง ก็จะต้องกำหนด ค่าสีแดงลงไปใน Tag <FONT> แบบนี้  --->     <FONT color=#ff0000> ข้อความ </FONT>   ตรงคำว่า ข้อความ ก็จะมีสีแดง color ก็คือการกำหนดสีให้กับแท็ก <FONT> และ #ff0000 คือ โค้ดสีแดง

 

คิดว่าอ่านมาถึงตรงนี้แล้วคงพอจะรู้แล้วว่า Tag หรือ คำสั่ง ในภาษา Html ทำงานยังไงนะจ๊ะ ต่อไปนี้เราจะแนะนำให้เพื่อนๆรู้จักกับ Tag ที่ชื่อว่า <Table> สาเหตุที่นำแท็กนี้มาอธิบาย ก็เพราะว่า มันใช้ประโยชน์ได้ดีในการ จัดตำแหน่งข้อความ และ รูปภาพ รวมถึง ไว้ใช้ทำกรอบสวยๆ ที่เราเอามาแจกน่ะแหละ อิอิ

 

 


Table

 

แปลตรงๆตัวเลยก็คือ ตาราง น่ะเอง (ไม่ใช่โต๊ะ นะจ๊ะ - -") ในการสร้างตารางนี้ก็ไม่ยากอย่างที่หลายคนคิดเลยนะ เพราะมันจะมีรูปแบบในการสร้างที่ค่อนข้างจะแน่นอนอยู่แล้ว สำหรับแท็กที่ใช้ในการสร้างตารางก็จะมีหลายแท็กด้วยกันและมักจะต้องใช้ควบคู่กันไปด้วย  เพื่อที่จะให้ได้ตารางสักหนึ่งตาราง ^^" มาดูกันดีกว่าว่ามันใช้ Tag อะไรบ้าง

 

<TABLE>...</TABLE> แท็กเปิด จะอยู่บนสุด และแท็กปิดจะอยู่ท้ายสุดของตาราง เป็นการบอกว่า นี่คือ 1 ตารางนะจ๊ะ

<TBODY>...</TBODY> ตำแหน่งจะอยู่คร่อมแท็ก <TR>...</TR> เป็นการแบ่งกลุ่มให้กับแถว โดยที่ในกลุ่มนั้นอาจมีมากกว่า 1 แถวก็ได้  ถึงแม้เราไม่ใส่ก็จะถือว่า ข้อมูลที่อยู่ระหว่างแท็ก Table นั้นเป็นส่วนของ Tbody

<TR>...</TR> คือ 1 แถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TABLE>...</TABLE> ถ้าต้องการให้ตารางมีกี่แถว เราก็ต้องเพิ่มแท็ก <TR>...</TR> ไปเท่านั้น

<TD>...</TD> คือ 1 ช่องในแถวของตาราง ตำแหน่งที่ใช้ อยู่ระหว่าง <TR>...</TR> ถ้าต้องการให้ใน 1แถว มีกี่ช่อง เราก็ต้องเพิ่มแท็ก <TD>...</TD> ไปเท่านั้น

ตัวอย่างการสร้างตาราง ในที่นี้จะสร้างตาราง 3 แถวโดยให้แต่ละแถวมี 4 ช่อง และใส่คำสั่ง border เพื่อแสดงขอบตาราง

 

<TABLE border=1>
<TBODY>
<TR>
<TD>ช่องที่ 1 แถว 1</TD>
<TD>ช่องที่ 2 แถว 1</TD>
<TD>ช่องที่ 3 แถว 1</TD>
<TD>ช่องที่ 4 แถว 1</TD>
</TR>
<TR>
<TD>ช่องที่ 1 แถว 2</TD>
<TD>ช่องที่ 2 แถว 2</TD>
<TD>ช่องที่ 3 แถว 2</TD>
<TD>ช่องที่ 4 แถว 2</TD>
</TR>
<TR>
<TD>ช่องที่ 1 แถว 3</TD>
<TD>ช่องที่ 2 แถว 3</TD>
<TD>ช่องที่ 3 แถว 3</TD>
<TD>ช่องที่ 4 แถว 3</TD>
</TR>
</TBODY>
</TABLE>

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

 

 

ช่องที่ 1 แถว 1 ช่องที่ 2 แถว 1 ช่องที่ 3 แถว 1 ช่องที่ 4 แถว 1
ช่องที่ 1 แถว 2 ช่องที่ 2 แถว 2 ช่องที่ 3 แถว 2 ช่องที่ 4 แถว 2
ช่องที่ 1 แถว 3 ช่องที่ 2 แถว 3 ช่องที่ 3 แถว 3 ช่องที่ 4 แถว 3

 

 ส่วนการนำตารางมาใช้กับการจัดวางข้อมูล ก็สามารถทำได้ง่ายๆ
อย่างที่เห็นอยู่นี้นะคะ โดยที่ เราได้สร้างตารางขึ้นมา 1แถว 2ช่อง
และนำส่วนโค้ด ไปไว้ทางซ้าย เอาคำอธิบาย 
กับผลลัพธ์ที่ได้จากโค้ดมาไว้ทางขวา

 

การประยุกต์ใช้ตาราง

 

ตอนนี้ทุกคนคงสร้างตารางกันได้แล้วนะคะ ส่วนการนำตารางไปใช้ในแบบอื่นๆ ถ้าจะมีคนจำได้
เราเคยนำเสนอวิธีการ ใส่ Background โดยใช้ Table ไปแล้วนะคะ ไปหาอ่านได้นะ ตามที่เราทำลิ้งค์ไว้ให้
สำหรับตอนนี้เราจะมาสร้างกรอบข้อความสวยๆ โดยใช้ตารางกันนะ

สำหรับกรอบข้อความ เราต้องมาดูกันก่อนว่ามันประกอบด้วยส่วนอะไรบ้าง
ก่อนอื่นก็ต้องมีรูป ที่เราจะเอามาทำเป็นขอบทั้ง 4 ด้าน และมุม ทั้ง 4 ก่อนนะคะ
ยกตัวอย่าง กรอบที่แจกไปในบลอคล่าสุด เมื่อวันก่อน 

รูปด้านล่างนี้เป็นการแสดงภาพของ ขอบ และ มุม ทั้ง 8 ส่วน นะคะ

 

 

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

<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>


<TR>
<TD background=Url ภาพมุมซ้ายบน></TD>
<TD style="WIDTH: 240px; HEIGHT: 13px" background=Url ภาพขอบด้านบน></TD>
<TD background=Url ภาพมุมขวาบน></TD></TR>

<TR>
<TD style="WIDTH: 30px" background=Url ภาพขอบด้านซ้าย></TD>
<TD style="WIDTH: 240px; HEIGHT: 169px" align=middle>
<P><FONT color=#993300>Text Here</P>
<P>ข้อความ</P>
<P>Text Here</P></FONT>
</TD>
<TD style="WIDTH: 30px" background=Url ภาพขอบด้านขวา></TD></TR>


<TR>
<TD background=Url ภาพมุมซ้ายล่าง></TD>
<TD style="WIDTH: 240px; HEIGHT: 12px" background=Url ภาพขอบด้านล่าง></TD>
<TD background=Url ภาพมุมขวาล่าง></TD></TR>


</TBODY></TABLE>


อธิบาย

เราจะแบ่งอธิบายไปทีละแถวนะ ตามที่เว้นวรรคเอาไว้ เพื่อจะได้ดูง่ายๆ

เริ่มจากแท็ก <TABLE> เราเพิ่มคำสั่ง
cellSpacing=0 กำหนดให้ระยะห่างระหว่างแต่ละช่องในตารางเป็น 0 เพื่อให้ภาพแบคกราวที่เราสร้างมันต่อกันสนิทจะได้ดูเหมือนเป็นภาพๆเดียว  
cellPadding=0
กำหนดให้ระยะห่างระหว่าง ขอบตาราง กับข้อความเป็น 0 อันนี้จะมีผลกับส่วนที่เราเอาไว้เขียนข้อความ คือช่องตรงกลางของตาราง 
align=center จัดตารางนี้ให้อยู่ตรงกลางของ Blog และใส่  border=0 ไม่ต้องการให้เห็นขอบตารางเพื่อความสวยงาม

 

แถวที่ 1

ในแท็ก <TD> เราใส่คำสั่ง background=Url ของภาพที่ต้องการ เข้าไปเพื่อภาพให้เป็นแบบแบคกราวตามที่ต้องการ
และในแท็ก <TD> ของ ช่องที่ 2แถว 1 ใส่คำสั่ง  style="WIDTH: 240px; HEIGHT: 13px" เพื่อกำหนดความกว้างและความสูงให้กับภาพ มีขนาดเป็น พิกเซล 


แถวที่ 2

เราใส่ background ตามแบบเดียวกับในแถวที่ 1แต่เพิ่ม คำสั่ง style="WIDTH: 30px" ให้ตารางด้านซ้าย กว้างพอดีรูป และทำแบบเดียวกันกับ ด้านขวาด้วย
ส่วนตรงกลางแท็ก <TD> ช่องที่ 2 ของแถว 2  ที่เป็นพื้นที่ไว้เขียนข้อความ กำหนดขนาดให้ style="WIDTH: 240px; HEIGHT: 169px"

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

และในแท็ก <TD> ช่องที่ 2 ของแถว 2 มีคำสั่ง align=middle เป็นการกำหนดให้จัดข้อความในช่องนี้ ให้อยู่กึ่งกลางช่อง

ส่วนที่เป็น สีชมพู คือส่วนข้อความที่เราพิมลงไป มีแท็ก <FONT> กำหนดสีอักษร และมีแท็ก <P>...</P> ข้อความที่อยู่ในแท็กนี้คือ 1 ย่อหน้า ( บางคนอาจเคยสังเกตุว่า เวลาเราพิมข้อความในบลอคของเราแล้วกด Enter ถ้าดูในโหมด Html มันจะมีแท็ก <P> ต่อหัวกับท้ายข้อความแสดงว่าขึ้นย่อหน้าใหม่ แต่ถ้าเรากด Shift+Enter จะเป็นการขึ้นบรรทัดใหม่ โดยใช้แท็ก <BR> นะจ๊ะ ความแตกต่างของ 2 แท็กนี้ คือ เวลาเรากด Shift+Enter ระยะห่างของบรรทัดจะแคบกว่าเวลาเรากด Enter เฉยๆน่ะ อันนี้รู้ไว้เฉยๆ เพราะเวลาพิมก็คงพิมในโหมด พรีวิว อยู่ดี ไม่ได้พิมในโหมด Html ^^")

 

แถวที่ 3

แถวนี้จะเหมือนกับ แถวที่ 1 เลยค่ะเปลี่ยนแค่ภาพ ปิดท้ายด้วยแท็ก </TBODY></TABLE> เป็นการปิดตาราง

สำหรับตัวอย่างโค้ดที่ใส่ Url ของภาพเรียบร้อยแล้ว ไปดูได้ที่บลอคข้างล่างนี้นะ วันที่ 26 ค่ะ

 

 

ขอบคุณค่ะ น้องรัก  คิดถึงจังเลย

P

พี่สาวคะ  ขอบคุณค่ะ  คิดถึงเช่นเดียวกันค่ะ..

ยากจัง...พี่สมองตื้อไปหมดแล้ว

P

ทำใจให้สบาย ค่อยๆ ดู หัดทีละนิดๆ  แล้วทุกอย่างก็จะเข้าที่ ไม่ซับซ้อน ค่ะ  เชิงเดี่ยวทั้งนั้น.. 

สุภาษิตวันนี้  การร่วมทุกข์ร่วมสุข คือ ในความทุกข์ยังมีความสุข  และ ระหว่างเพื่อน คำเท็จไม่กล่าว    ดีชั้นขอให้ปฎิญาณ ค่ะ  อิ อิ

ขอบคุณ คุณครู ปริมปราง  ที่มาเยี่ยมค่ะ  มีความสุขมากๆ นะคะ   ()

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ขอแนะนำ ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี