พฤษภาคม 2565

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
24
25
26
27
28
29
30
31
 
 
🍓 รวมสูตร HTML ที่น่าสนใจ

รวมโค๊ต HTML


ขอขอบคุณ https://www.oknation.net/blog/print.php?id=483116
เขียนใน GotoKnow  โดย   ใน test-456

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 คือ โค้ดสีแดง

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

<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 สวยๆ

รหัสสี 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;">&nbsp;</span></p>

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




Create Date : 23 พฤษภาคม 2565
Last Update : 23 พฤษภาคม 2565 11:10:42 น.
Counter : 1158 Pageviews.

4 comments

ผู้โหวตบล็อกนี้...
คุณนายแว่นขยันเที่ยว

  
//rssfeeds.13newsnow.com/~/t/0/0/wvec/local/~https%3A//insenseagarwood.com

Hi there friends, fastidious paragraph and good arguments commented here, I am actually enjoying by these https://sihiromjin.com .
โดย: Lacey IP: 51.81.85.242 วันที่: 15 มีนาคม 2567 เวลา:20:34:00 น.
  
https://insenseagarwood.com

I could not refrain from commenting. Very well written https://sihiromjin.com !
โดย: Agueda IP: 172.96.161.170 วันที่: 15 มีนาคม 2567 เวลา:22:24:13 น.
  
Группа объявления Белгород в телеграмме.
Публикация частных объявлений
бесплатно!
Рекламные и коммерческие объявления, согласно правил
группы.
#Белгород #ОбъявленияБелгород
#БесплатныеОбъявления #объявление #доскаобъявлений #барахолка #телеграм #телеграмм #telegram
Присоединяйся, чтобы не потерять...
Частные объявления Белгорода
Группы остальных можно посмотреть здесь!!
частные объявления
โดย: Maynard IP: 80.244.45.121 วันที่: 10 สิงหาคม 2567 เวลา:10:03:37 น.
  
https://xaydungtrangtrinoithat.com/xay-nha-tron-goi-tai-go-cong-tien-giang-nha-thau-xay-dung-uy-tin-va-chuyen-nghiep/
I love your blog.. very nice colors & theme.
Did you design this website yourself or did you hire someone to do
it for you? Plz respond as I'm looking to construct my own blog and would like to
find out where u got this from. appreciate it
https://xaydungtrangtrinoithat.com/xay-nha-tron-goi-tai-go-cong-tien-giang-nha-thau-xay-dung-uy-tin-va-chuyen-nghiep/
โดย: Jovita IP: 104.194.11.90 วันที่: 25 มกราคม 2568 เวลา:16:02:18 น.
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

PinkyPrettyPatty
Location :
กรุงเทพฯ  Thailand

[ดู Profile ทั้งหมด]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 6 คน [?]



◕‿-。

\(o`з´o)/



◕‿-。
== สวัสดีชาวโลกทั้ง 3 โลก แพทตี้เอง ==
ตอนนี้พยายามจะเขียนภาษาอังกฤษนะ
มีอะไรก็แนะนำก็บอกกันได้
ชอบทำกิจกรรม ท่องเที่ยว ถ่ายรูปไปเรื่อยเปื่อย
ถ้ามีที่ไหนดีๆ เจ๋ง ก็บอกได้จะตามไปดู
ถ้าเขียนอะไรผิดพลาดหรือพาดพิงสิ่งใดก็ขออภัยมา ณ ที่นี้ค่ะ
จะดีมากถ้าช่วยเขียนคอมเมนทต์เป็นกำลังใจให้ซี่เขียนต่อจะได้รู้ว่าอย่างน้อยก็ยังมีคนสนใจอ่านบล็อกของเราบ้าง อิอิ

Hello Friends,
I try to write my blog in English and also in Thai.
If I wrote something wrong can make any comment to me it would be very appreciated! to cheer me up to write it and share my experience more and more.

Have a nice day!
Cheers

Patty