รวมโค๊ต HTML

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

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

 : เว้นบรรทัด

  : เว้นวรรค

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

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

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

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

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

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

ข้อความ : ตัวหนา

ข้อความ : ตัวหนา

ข้อความ : ตัวเอียง

ข้อความ : ตัวเอียง

ข้อความ ขีดเส้นใต้

ข้อความ : ขนาดข้อความ

ข้อความ : สีข้อความ

ข้อความ : ขนาดและสีข้อความ

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

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

<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>

W
e
l
c
o
m
e
T
o
H
i
5

</center>

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

น้ำตาล

แดง

ชมพู

เขียวอ่อน

เขียวแก่

เขียว

ส้ม

ม่วง

ฟ้าน้ำเงิน

น้ำเงิน

น้ำตาล

น้ำตาลแก่

เทาอ่อน

เทา

เทาแก่

ฟ้า

ฟ้า

กากี

ส้มอ่อน

ฟ้า

เขียนใน GotoKnow โดย นีนานันท์
ใน test-456

คำสำคัญ (Tags): #neenaanan#รวมโค๊ต html

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

ความเห็น (10)

นีนานันท์

เขียนเมื่อ 26 กันยายน 2009 21:45 น. ()

ขอขอบคุณ

http://iammew.spaces.live.com/Blog/cns!1p_8MbRe_GJ7KndwTUiWW-xA!666.entry

นีนานันท์

เขียนเมื่อ 26 กันยายน 2009 21:57 น. ()

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

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

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

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

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

<TR>
<TD style="WIDTH: 30px" background=Url ภาพขอบด้านซ้าย></TD>
<TD style="WIDTH: 240px; HEIGHT: 169px" align=middle>
Text Here
ข้อความ
Text Here</TD>
<TD style="WIDTH: 30px" 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 เป็นการกำหนดให้จัดข้อความในช่องนี้ ให้อยู่กึ่งกลางช่อง

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

แถวที่ 3

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

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

นีนานันท์

เขียนเมื่อ 18 ธันวาคม 2009 23:08 น. ()

ขอขอบคุณ

How To: PhotoScape โปรแกรมแต่งรูปสุดเจ๋ง http://webboard.yenta4.com/topic/225757

http://www.photoscape.org/ps/main/download.php

http://www.photoscape.org/ps/main/index.php

ครูอ้อย แซ่เฮ

เขียนเมื่อ 12 มกราคม 2010 04:07 น. ()

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

นีนานันท์

เขียนเมื่อ 12 มกราคม 2010 04:28 น. ()

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

ปริมปราง

เขียนเมื่อ 23 มีนาคม 2010 17:19 น. ()

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

นีนานันท์

เขียนเมื่อ 23 มีนาคม 2010 17:26 น. ()

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

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

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

พิมพ์

เขียนเมื่อ 29 เมษายน 2022 22:19 น. ()

หส

เต้เต้น่ะจ่ะ

เขียนเมื่อ 7 กันยายน 2023 11:40 น. ()

ใส่รูปแล้วไม่ขึ้นเกิดจากสาเหตุอะไรครับ :(

ใครไม่รู้

เขียนเมื่อ 3 พฤศจิกายน 2023 07:38 น. ()

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