รวมโค๊ต HTML
ขอขอบคุณ https://www.oknation.net/blog/print.php?id=483116
เขียนใน GotoKnow โดย
นีนานันท์ ใน
test-456HTML ย่อมาจาก 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 คือ โค้ดสีแดง
เกี่ยวกับรูปแบบ
<br> : เว้นบรรทัด
: เว้นวรรค
<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 สวยๆ
รหัสสี HTML
<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;"> </span></p>
<p><span style="color: #ccffff;"> </span></p>
Hi there friends, fastidious paragraph and good arguments commented here, I am actually enjoying by these https://sihiromjin.com .