บทเรียน - เขียนโปรแกรม เบื้องต้น

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

มาตรฐาน Doctype ใน HTML แบบต่างๆ


Doctype จะเป็น tag ที่ไว้บอกบราวเซอร์ ว่า เอกสารที่มันกำลังเปิดอยู่กำหนดมาตรฐานไว้แบบไหน โดยที่ Doctype จะเป็น tag ที่อยู่ก่อน tag html
สำหรับ

HTML 5 Doctype คืือ

<!DOCTYPE HTML>

TML 4.01 Transitional, Strict, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


HTML 4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

 

XHTML 1.0 Transitional, Strict, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

แท็กรูปแบบตาราง Table ใน HTML มีทั้งหมด 4 รูปแบบ

แท็กรูปแบบตาราง Table

<TABLE parameter></TABLE> เป็นคำสั่งเปิดปิดตาราง มีพารามิเตอร์ ดังนี้ ALIGN กำหนดตำแหน่งการวางตารางในเอกสาร
- BORDER =n กำหนดให้แสดงเส้นกรอบตรารางหรือไม่ ถ้าเลือกให้ใส่กรอบให้ใส่ค่าความหนาของกรอบด้วย
- HEIGHT = n กำหนดความสูงของตารางทั้งตาราง
- WIDTH = n กำหนดความกว้างของตาราง
- CELLSPACEING = n กำหนดระยะห่างระหว่างเซลล์ในตาราง กำหนดเป็นพิกเซล
- CELLSPADDING = n กำหนดระยะห่างระหว่างเส้นและเนื้อหาภายในเซล
<TH parameter></TH> ตารางตามแนวตั้ง กำหนด ข้อความโดยมีพารามิเตอร์ - VALING = ตำแหน่ง กำหนดการวางข้อมูลในเซลล์ตามแนวตั้ง กำหนดได้เป็น TOP MIDDLE BOTTOM
- HEIGHT = n กำหนดความสูงของเซลล์ในตาราง
- WIDTH = n กำหนดความกว้างของซลล์ในตาราง
- BGCOLOR = #รหัสสี กำหนดสีพื้นหลังของเซลล์
<TR parameter></TR> ตารางตามแนวนอน กำหนดแถวตามแนวนอนของตารางได้ โดยใช้ ALIGN
<TD parameter></TD> กำหนดตำแหน่งข้อมูลในตารางโดยใช้พารามิเตอร์ ALIGN และ VALIGN เป็นตัวกำหนด



ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
article, aside, nav {display:left;}
article, aside {float: left;}
article {width:600px;}
nav {width: 250px;}
</style>
</head>
<body>
<article>
<h1> สร้าง Sideder ด้วย เอเลเม็นท์ aside </h1>
<p><strong>เอเลเม็นท์ aside ใชักับกลุ่มของเนื้อหาที่เกี่ยวข้องกับเนื้อหารอบๆ แบบไม่ได้ซ้อนทับ เช่น จัดลำดับรายการของโพสต์ ,หมวดหมู่ของบล็อก,คอมเม้นล่าสุด เป็นต้น เนื้อหาประเภทนี้เกี่ยวข้องกับเนื้อหาในเพจหลัก แต่อยู่แยกออกมา
ในการพัฒนาเว็บสมัยนี้ การที่มีแถบข้างหรือที่เรียกว่า Sidebar ในเพจถือเป็นเรื่องปกติ อาจไม่จำเป็นต้องวางอยู่ด้านซ้ายเสมอไปก็ได้ แต่ส่วนใหญ่จะมีใว้ใส่ลิงค์ที่เกี่ยวข้องกันหรือราชชื่อหมู่หมวดเอาไว้ในนั้น การใช้เอเลเม้นท์ aside อย่างถูกต้องขึ้นอยู่กับว่าคุณจะวางไว้ที่ไหน ถ้าว่าใน article เนื้อหาของส่วน aside
ก็ควรจะสัมพันธ์กับเนื้อหาของ article สักนิดหน่อย เช่น อภิธานศัพท์ เป็นต้น หรือถ้า aside อยู่นอก article หรือ section ละก็ เนื้อหานั้นก็ต้องมีความสัมพันธ์กับเพจ เช่น ลิงค์ที่เกี่ยวข้อง,โฆษณาที่เกี่ยวข้อง
กับเว็บไซต์ เป็นต้น</strong>
</p></article>

<aside>
<h2> aside link </h2>
<nav>
<ul>
<li><a href="#"> หมวดหมู่ 1</a></li>
<li><a href="#">หมวดหมู่ 2</a></li>
<li><a href="#">หมวดหมู่ 3</a></li>
</ul>
</nav>
</aside>
</body>
</html>

 ที่มา : หนังสือรวมโค้ด HTML5 (แปลเเละเรียบเรียงโดย ไพบูลย์สวัสดิ์ปัญญาโชติ)

ศึกษาเพิ่มเติมได้ที่ : http://www.w3schools.com/tags/tag_aside.asp

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

ใน HTML 5 ยังมี tag table ให้เราใช้อยู่ แต่จะลด Attribute ที่เคย เช่น cellpadding, cellspacing, frame, rules, summary, width หมายความว่า HTML 5 ไม่สามารถ กำหนด ความกว้าง ของตาราง ทั้งแบบเป็น % หรือ pixels ก็ตาม HTML5 เหลือ Attribute ไว้ให้เราตัวเดียวคือ border โดยกำหนดเป็นค่าว่า หรือ 1 เพื่อให้ตารางมีเส้นขอบ เท่านั้น
ตัวอย่าง ตารางใน HTML 5 

<table border="1">
  <tr>
    <th>Website</th>
    <th>price</th>
  </tr>
  <tr>
    <td>Mindphp.com</td>
    <td>$10,000</td>
  </tr>
</table>

การใช้งานจริงเราจะไปกำหนด Attribute ต่างๆของตารางไว้ใน css แทน จะทำให้ html ของเราขนาดเล็กลง

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

HTML 5 หรือ xHTML 2 ต่างจาก html 4.1 หรือ XHTML 1.0

ความแตกต่างของ HTML 5 หรือ xHTML 2 กับ html 4.1 หรือ XHTML 1.0 ตรงไหนบ้าง
ความแตกต่างของ HTML 5 หรือ xHTML 2 กับ html 4.1 หรือ XHTML 1.0 ตรงไหนบ้าง


ก่อนเขียนบทความนี้ HTML5 ออกมาได้ซักระยะหนึ่งแล้ว (เกือบๆ สองปี ) แต่ Browser ทุก ยังไม่ได้ สนับสนุน HTML5 กัน 100%, Browser ที่เหมาะ ที่สุดที่จะทดสอบความสามารถของ HTML5 ตอนนี้ คือ Google Chrome ส่วน Webserver หรือ Host ก็ไม่จำเป็นต้องเปลี่ยนแปลงรับ HTML5 แต่อย่างใด เพราะ HTML5 ไม่ได้ทำงานทางผั่ง Server

html 5 กับ html 4.1 มีอะไรต่างกันบ้าง ?

ดูง่ายๆ แบบผิวๆ HTML 5 เปรียบได้กับ การเอาข้อดีของ HTML4+xHTML+Dom level 2
ความต่างของ tag ก่อนเปิดของ html คือ html5 จะใช้ <!doctype html> แทน <?xml version="1.0" encoding="UTF-8"?> ใน html4
โดย doctype วางไว่ก่อน tag เปิด html ลองดูโค้ดประกอบ
HTML5

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML4

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

 tag ที่เพิ่มเข้ามาใน html5

- tag เกี่ยวกับโครงสร้างหน้าเว็บ  จะมี tag section, article, aside, hgroup, header, footer, nav , figure. figcaption  ดูภาพความแตกต่างของการสร้างโครงสร้าง html4 และ html5 

นอกจาก tag เกี่ยวกับโครงสร้างเว็บที่เพิ่มขึ้นแล้ว ยังมี input type เพิ่มขึ้นด้ว ดังนี้    
    tel รับข้อมูลใน form เป็น เบอร์โทร
    search กรองข้อความสำหรับ search ข้อความที่รับจะเป็น text
    url กร่องรับข้อมูลเป็น url ที่ถูกหลักของ {--mlinkarticle=2045--}URL คืออะไร {--mlinkarticle--}
    email  กร่องรับข้อมูลเฉพาะ e-mail ที่มีรูปแบบที่ถูกต้องของ e-mail
    datetime รับข้อมูลเป็น date time
    date รับข้อมูลเป็นวันที่
    month รับข้อมูลเป็นเดือน
    week รับข้อมูลเป็นสัปดาห์
    time รับข้อมูลเป็น เวลา
    datetime-local รับข้อมูลเป็น local datetime
    number รับข้อมูเฉพาะตัวเลข
    range รับข้อมูลเป็นช่วง
   color  รับข้อมูลเป็น สี รับข้อมูลตัวเลขเป็นชุดๆ ของ RGB ตัวเลข 0-255 แต่ละชุดสี

รวมๆกันนี้เป็นความสามารถที่เรียกว่า Web form 2.0 , ใน HTML นอกจากคำว่า Web form 2.0 แล้วต่อไป เราจะได้ยินคำว่า Web Database, WebSocket, Web Storage, Web Workers, และอีกมากมาย

และยังมีอีกมากมายที่ HTML5 ทำได้ และคาดว่า {--mlinkarticle=1849--}web browser {--mlinkarticle--} จะเริ่มสนับสนุนความสามารถหลักๆของ html5 เพิ่มขึ้นเรื่อยๆ

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
Websocket ใน HTML 5 เทคโนโลยี ติดต่อเร็ว กว่า Ajax ไม่ต้องรีเฟรชหน้า
Websocket ใน HTML 5 เทคโนโลยี ติดต่อเร็ว กว่า Ajax ไม่ต้องรีเฟรชหน้า

Websocket คือ ถ้าจะอธิบายให้สั้นๆ และได้ใจความ Websocket เป็นเทคโนโลยีเพื่อใช้ การติดต่อสือสารระหว่าง {--mlinkarticle=2053--}Web server{--mlinkarticle--} กับ Client แบบ {--mlinkarticle=2307--}Real Time{--mlinkarticle--} Client ที่เป็น html5 + Javascript สามารถรับข้อมูลทางผั่ง Server มาแสดงผลได้ ผ่าน {--mlinkarticle=2044--}Protocol {--mlinkarticle--} TCP/IP โดยไม่ต้อง Refresh หน้า เช่นเดียวกับ Ajax แต่ Websocket นั้นมีข้อดีกว่า Ajax คือ Websocket ไม่ต้องส่ง Request ใหม่ เพื่อส่งคำรองขอไปยัง server และ รอรับ respond จากทางฝั่ง Server ทำให้ Websocket ประหยัดทั้งเวลา และปริมาณข้อมูลที่ส่งไปมาระหว่าง web server กับ Client โดยการทำงานของ Websocket มันจะรอรับ Message ทางฝั่ง web server อยู่ตลอดเวลา หลังจากที่ได้ส่งคำสั่ง ติดต่อ Websocket Server ไปแล้วในครั้งแรก และมันจะรอรับ Message จนกระทั้งจะสั่ง Close หรือหยุดการติดต่
ลองดูตัวอย่างโค้ด HTML + Websocket

ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน

บทที่ 1 HTML5 คืออะไร
   HTML5 คือ ภาษามาร์กอัป ที่ใช้สำหรับเขียน website  ซึ่ง HTML5 นี้เป็นภาษาที่ถูกพัฒนาต่อมาจากภาษา HTML และพัฒนาขึ้นมาโดย WHATWG (The Web Hypertext Application Technology Working Group) โดยได้มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น
ข้อดีของ HTML5
1.เว็บไซต์ที่สร้างจากภาษา HTML5 สามารถแสดงผลได้กับทุก {--mlinkarticle=1849--}web browser {--mlinkarticle--}
2.HTML5 จะช่วยลดการใช้พวกปลั๊กอินพิเศษอย่างพวก Adobe Flash, Microsoft Silverlight, Apache Pivot สนับสนุน วิดีโอ และ องค์ประกอบเสียง รวมทั้ง สื่อมัลติมีเดียต่างๆมากขึ้น โดยไม่ต้องใช้ Flash
3.มีการจัดการข้อผิดพลาดที่ดีขึ้น
4.สคริปต์ใหม่ ที่จะมาแทนที่สคริปต์เดิม (เขียนโค้ดสั้นลง)
5.HTML5 มีความเป็นอิสระสูง (คล้ายๆ XML )
6.HTML5 ทำงานควบคู่กับ CSS3 ได้ดี ช่วยให้สามารถเพิ่มลูกเล่นต่างๆบนเว็บไซต์ได้สวยงามมากยิ่งขึ้น (CSS คือส่วนแสดงผล ที่นักออกแบบสามารถกำหนดสีสัน ตำแหน่ง ลักษณะเวลานำเมาส์ไปแหย่แล้วมีกระต่ายโผล่ออกมาจากโพรง หรือจับก้อนวัตถุในหน้าเว็บฯ ให้ชิดซ้ายชิดขวา ส่วน CSS3 คือเวอร์ชั่นที่ 3 ของ CSS )
features ใหม่ๆ ของ HTML5
1.Semantic Markup : การเพิ่ม Element ที่ อ่านง่ายมากขึ้น และช่วยให้ เราทำ SEO ได้มีประสิทธิภาพมากยิ่งขึ้น
2.Form Enhancements : เพิ่มความสามารถของ Form ต่างๆ ไม่ว่าจะเป็น Input type, Attribute หรือ แม้แต่ Element
3. Audio / Video: รองรับการอ่านไฟล์เสียง และ วีดีโอ โดยไม่จำเป็นต้องใช้ Embed Code ของ Third Party
4.Canvas : ใช้ในการวาดรูป โดยจำเป็นต้องใช้ Javascriptช่วย
5.ContentEditable : สามารถแก้ไข Content ได้โดยตรงผ่านทางหน้าเว็บ
6.Drag and Drop : ลากวางObject ได้ เพื่อเพิ่มการ ตอบสนองระหว่างระบบกับผู้ใช้
7.Persistent Data Storage : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของผู้ใช้


ข้อมูลอ้างอิง
http://www.microsoft.com
http://www.thaigraph.com
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 2 HTML5 new Elements  
ส่วนประกอบใหม่ๆใน HTML5
   HTML 4.01 ถูกตั้งให้เป็น ภาษาที่ใช้กันโดยทั่วไปใน ปี ค.ศ. 1999 แต่จากตอนนั้นจนมาถึงปัจจุบัน Elements ใน HTML4 บางตัวไม่ได้ถูกใช้งานมากนักตามที่ได้เคยคาดการกันเอาไว้ จนทำให้ตอนนี้ใน HTML5 ได้มีการลบบางส่วนและเพิ่มเติมส่วนใหม่ๆเข้ามา จนในที่สุด ณ ปัจจุบันนี้ HTML5 ได้พยายามทำการเพิ่มเติม Element ในส่วนของ โครงสร้าง ในส่วนของฟอร์ม การจัดการข้อผิดพลาด การวาดรูป และ การใช้งานสือบันเทิงต่างๆให้ดีมากยิ่งขี้น

Semantic/Structural Elements ใหม่ใน HTML5

สร้างมาเพื่อทำให้โครงสร้างดียิ่งขึ้น

<article> Tag ที่อ้างถึงบทความ
<aside> Tag ที่อ้างถึงข้อความที่ถูกเขียนขึ้นและจัดวางไว้ด้านใดด้านหนึ่งของเว็บ สามารถศึกษาวิธี สร้าง Sideder ด้วย เอเลเม็นท์ aside ได้ที่นี่
<bdi> เป็นการแยกส่วนของข้อความ เพราะบางครั้งการใช้ภาษาที่ต่างกัน ทำให้คอมพิวเตอร์สับสนในการจัดลำดับ
<command> จัดการกับปุ่มคำสั่งต่างๆ
<details> ข้อมูลที่สามารถ ซ่อนหรือเรียกดูได้
<summary> ใช้ร่วมกับ <details> element เป็นส่วนหัวที่จะโชว์ข้อความเสมอ
<figure> จัดกลุ่มของข้อมูลในส่วนของ ภาพ ไดอะแกรม สื่อต่างๆ เพื่อให้สื่อเหล่านั้นและข้อความถูกจัดวางไว้ร่วมกัน
<figcaption> คำอธิบาย ของ<figure> element ที่ถูกจัดกลุ่มไว้ด้วยกัน
<footer> Tag ที่อ้างถึงส่วนท้ายหรือล่างสุดของเอกสาร
<header> Tag ที่อ้างถึงส่วนหัวหรือบนสุดของเอกสาร
<hgroup> กลุ่มที่มี <h1> ถึง <h6> ที่สามารถนำมาใช้ได้ในนี้ ถ้าหากว่า ใน heading มีการวางหัวข้อไว้หลายหัวข้อ
<mark> เป็นการไฮไลต์ข้อความ
<meter> ใช้ในการวัด และโชว์ผลลัพธ์แบบแท่ง เช่นความจุต่างๆ ผลการค้นหา แต่ไม่ความใช้ในส่วนของการทำงานประมวลผล
<nav> Tag ที่อ้างส่วนของเมนู
<progress> โชว์การประมวลผลแบบแท่ง
<ruby> ใช้เพิ่มคำอธิบายประกอบ สำหรับตัวอักษรของเอเชียฝั่งตะวันออก
<rt> เพิ่มคำอธิบาย หรือการออกเสียงสำหรับตัวอักษรของเอเชียฝั่งตะวันออก
<rp> ใช้เพื่อ โชว์ในเบราเซอร์ที่ไม่ซัพพอร์ท ruby Tag
<section> Tag ที่อ้างส่วนต่างๆของเอกสาร
<time> อ้างถึง การเขียนวันที่หรือเวลา
<wbr> เป็นการจัดการกับการตัวอักษรในส่วนของการขึ้นบรรทัดใหม่


Media Elements ใหม่ใน HTML5
สร้างมาเพื่อการใช้สื่อมัลติมีเดียต่างๆในเว็บ

<audio> เพิ่มเสียงเข้ามาในเว็บของคุณ
<video> เพิ่มวีดีโอเข้ามาในเว็บของคุณ
<source> เพิ่มสื่อได้หลายตัวเข้ามาในเว็บของคุณโดยใช้ได้กัย <video> และ <audio>
<embed> สำหรับจัดวาง สื่อที่นำมากจากภายนอก หรือ Plug-in ด้วย
<track> ใช้สำหรับการลำดับ ของ <video> และ <audio>


แท็ก <canvas>

<canvas> สำหรับ การเขียนภาพกราฟฟิค โดยใช้ สคริปเข้ามาจัดการและส่วนใหญ่จะใช้ {--mlinkarticle=2187--}JavaScript {--mlinkarticle--}


Form Elements ใหม่ใน HTML5
เพื่อเพิ่มประสิทธิภารและความสามารถในการทำงานที่หลากหลายขึ้น

<datalist> โชว์รายการที่เราได้กำหนดไว้ เวลาที่ผู้ใช้งานกรอกข้อมูลลงมา
<keygen> เป็นการสร้างความปลอดภัย โดยทำการส่าง private key เก็บไว้ และ ส่ง public key ไปที่ เซอร์เวอร์
<output> โชว์ผลการคำนวนทางคณิตศาสตร์



ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 3 HTML5 Canvas
   Canvas  คือ Tag ตัวหนึ่งใน HTML5 ซึ่งเป็นคำสั่งใช้ในการสร้างงานกราฟฟิก จะมี Tag สั้นๆ จำง่ายๆ ก็คือ <canvas></canvas>
ข้อดีของ แท็ก Canvas
    ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
   ลักษณะของ canvas แตกต่างจากภาพชนิดอื่นๆ คือ มันไม่ได้จะแสดงได้เป็นภาพนิ่งเท่านั้น แต่มันสามารถเป็นภาพเคลื่อนไหวได้ด้วย และก็ไม่ได้เกิดจากการเรียกไฟล์ภาพขึ้นมาแสดงตรงๆ แต่เป็นการสั่งโดย javascript ทุกๆเส้นหรือทุกๆจุด และทุกๆการเคลื่อนไหวที่เกิดภายใต้ <canvas> เกิดจากการสั่งงานโดย javascript ทั้งสิ้น แล้วนำเข้ามาโชว์ด้วยการเรียกผ่าน id ของ <canvas> เข้าไป

1.การสร้างกรอบสี่เหลี่ยม

<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink;"></canvas>

ตัวอย่างที่ 1 การสร้างกรอบสี่เหลี่ยม

<html>
<body>

<canvas id="ExCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

</body>
</html>

ผลลัพธ์ที่ได้คือ

   จาก HTML ด้านบน เป็นการเรียกให้ canvas id=ExCanvas มาแสดง โดยกำหนดพื้นที่ในการแสดงกว้าง 200 px และสูง 100 px มีกรอบล้อมรอบสีชมพูหนา 5 px
ในกรณีที่ browser ที่ใช้ไม่ support <canvas> จะขึ้นข้อความ Your browser does not support the canvas element

2.การสร้างรูปสี่เหลี่ยม

<script>
  ctx.rect(x, y, width, height);
</script>

จากดครงสร้างด้านบน 
   ใช้ rect() ในการสร้างรูปสี่เหลี่ยม และวางตำแหน่งรูปที่จุด x,y  โดยให้รูปขนาด กว้างและยาว เป็น width , height

ตัวอย่างที่ 2 การสร้างรูปสี่เหลี่ยม

<html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,150,75);
</script>

</body>
</html>

ผลลัพธ์ที่ได้คือ
  
    จากตัวอย่างที่ 2 จะเห็นว่าชุดคำสั่ง JavaScript ชุดนี้ได้เข้าถึง Element ที่ ID ที่ชื่อว่า myCanvas นั้นเอง สังเกตได้จากบรรทัด
var c=document.getElementById("myCanvas");  (myCanvas ในที่นี้คือตัวกรอบสีชมพูที่เราสร้างไว้ก่อนแล้ว)
   จากนั้นเมื่อหา Element ดังกล่าวเจอก็จะทำการสร้าง context object ขึ้นมา
var cxt=c.getContext("2d");  คำสั่งบรรทัดนี้ ตรง getContext(?2d?) เป็น built-in object ที่มาพร้อมกับ HTML5 ซึ่งจะประกอบไปด้วยคำสั่งต่างๆ เช่น คำสั่งวาดเส้นตรง วงกลม รูปสี่เหลี่ม ตัวหนังสือ รูปภาพ หรืออื่นๆ

    ต่อมาก็เป็นการสร้างรูปสี่เหลี่ยมพื่นภาพสีแดงขึ้นมา
fillStyle นั้นเป้นการกำหนดสีแดงลงไป ส่วน fillRect เป็นการกำหนด รูปร่าง ตำแหน่ง แล้วก็ขนาดของวัตถุ

cxt.fillStyle="red";
cxt.fillRect(0,0,150,75);
    
    ในที่นี้ cxt.fillRect(0,0,150,75); นี่หมายถึง รูปอยู่ที่จุด (x,y)=(0,0)  และมีขนาดกว้าง 150 px ,  ยาว 75 px
***(cxt. หรือ context.  เป็นชุดคั่งสั่งของ JavaScript)

3.การสร้างเส้นตรง

<script>
  ctx.beginPath();
  cntx.moveTo(x,y);
  cntx.lineTo(x,y);
  cntx.stroke();
  ctx.closePath();
</script>

ตัวอย่างที่ 3 การสร้างเส้นตรง

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.closePath();
</script>

</body>
</html>

ผลลัพธ์คือ


4.การสร้างวงกลม

<script>
  cntx.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>

ตัวอย่างที่ 4 การสร้างรูปวงกลม

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 

</body>
</html>

ผลลัพธ์ที่ได้คือ


5.การใส่ต้วอักษร

<script>
  cntx.font = 'italic 40px Calibri';
  cntx.fillText(str, x, y);
</script>

จากโครงสร้างด้านบน
   ใช้ font() ในการสร้าง ตัวอักษร  ในตัวอย่างนี้เป็นอักษรแบบ italic (สามารถเลือกเปลี่ยนเป็น bold หรือ normal ก็ได้) ขนาด 40 px
ใช้แบบอักษร เป็น  Calibri
ลักษณะเป็นแบบ fillText (สามารถเลือกเปลี่ยนเป็น strokeText คือ แบบที่มีเฉพาะเส้นขอบ ก็ได้) โดยอักษรอยู่ที่พิกัด x,y

ตัวอย่างที่ 5 การใส่ตัวอักษร

<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello Nerd",10,50);

</script>

</body>
</html>

ผลลัพธ์คือ

 ข้อมูลอ้างอิง
http://www.w3schools.com

หมวดหมู่รอง

บทเรียน MySQL Store Procedure เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ MySQL 5.x ศึกษาได้ง่ายๆ แบ่งออกเป็นเรื่องๆ

บทเรียน PostgreSQL Stored Procedures เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ PostgreSQL แนะนำ ใช้ PostgreSQL เวอร์ชั่น 9.x

บทเรียน Python Framework Flask ในการพัฒนา  Web Application

แนะนำการเขียน Website (เว็บไซต์) ตั้งแต่เริ่มต้นแนะนำทำความรู้จัก โครงสร้างต่างๆ วิธีการคเขียน ตัวอย่างการเขียน ส่วนประกอบที่สำคัญของภาษาโดยใช้ภาษา HTML (เอชทีเอ็มแอล) โดยไม่พึ่งเครื่องมือช่วย ใช้งานได้ทั้ง HTML xHTML สอนพื้นฐาน Tag html ต่างๆ ได้แก่ โครงสร้างภาษา HTML (HyperText Markup Language) วิธีการเขียนภาษา HTML โดยใช้ Notepad หรือ TextEdit ตัวอย่างการเขียนภาษา HTML ส่วนประกอบสำคัญของภาษา HTML

บทเรียน HTML5 (เอชทีเอ็มแอลห้า) ภาษามาร์กอัป ที่ใช้สำหรับเขียน website ที่พัฒนามาจาก HTML ในบทเรียนนี้ก็จะสอนในเรื่อง Tag (แท๊ก) ต่างๆ ของ HTML5 ที่เพิ่มมาจาก HTML4 หรือ xHTML (เอ็กซ์เอชทีเอ็มแอล) ทำความรู้จักตั้งแต่เบื้องต้นก่อนการเริ่มเขียน สามารถเขียนตามได้ มีโค้ดตัวอย่างให้สามารถเขียนตามได้ HTML5 new Elements อิลิเม็นท์ส่วนประกอบใหม่ๆ ใน HTML5 สามารถใช้งานได้ดียิ่งขึ้น HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิกเปลี่ยนลูกเล่นการแสดงผลจากเดิม

บทเรียน CSS (ซีเอสเอส) หรือ Cascading Style Sheets ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML สอนพื้นฐานของ CSS สอนรูปแบบการเขียน Syntax ที่เฉพาะ ใช้สำหรับตกแต่งเอกสาร HTML หรือ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลังการใส่ลูกเล่นให้หน้าเว็บด้วย CSS ความรู้เบื้องต้นเกี่ยวกับ CSS3 ใช้จัดรูปแบบการแสดงผลให้สวยงามขึ้น

บทเรียน เนื้อหา การเขียนเว็บเพจ ภาษา PHP ประวัติความเป็นมาของภาษา PHP ทำความรู้จักประวัติของ php mysql date datetime การใช้งาน math functions การใช้งาน php ส่งเมล send mail การสอดแทรกคำสั่งภาษา PHP ในเอกสาร HTML การใช้ตัวแปรในภาษา PHP การกำหนดค่าของตัวแปร คำอธิบาย Comment หมายเหตุ คอมเม้น ในภาษา PHP ตัวอย่างการใช้ echo เพื่อแสดงข้อความ การใช้ตัวแปรในภาษา PHP

ReactJS เป็น JavaScript library ตัวหนึ่ง สำหรับสร้าง UI (User interfaces) ที่มีการนำไปใช้ใน Facebook, Instagram

บทเรียน php 5 เนื้อหาสอนเขียน PHP5 แบบ OOP การเขียนโปรแกรมเชิงวัตถุใน PHP5 เรียนรู้การเขียนโปรแกรมภาษา PHP แบบ OOP (Object Oriented Programming) ที่จะช่วยให้สามารถเขียนโปรแกรมภาษา PHP ที่เป็นมาตรฐานสากลมากยิ่งขึ้น การสร้าง Methods สำหรับ Class php5  สร้างคลาส และใช้งานคลาส ใน PHP5 OOP Class Constructors in PHP5 ฟังก์ชั่นที่ถูกเรียกใช้งานโดยอัตโนมัติ

บทเรียนสอนการพัฒนา Web Application โดยการใช้ Joomla Framework การเขียนโปรแกรมตามหลัก MVC การสร้าง Component เรียนรู้ MVC แบบ Joomla การใช้ class ติดต่อฐานข้อมูล ของ Joomla สอน JHTML เพื่อสร้าง HTML แบบไม่ต้องเขียน Tag HTML เรียนรู้การสร้าง addon คอมโพเน้นท์ โมดูล ปลั๊กอิน สร้าง Controller สร้าง View ในส่วนที่ไม่ใช่ Template Joomla Model สร้างโฟลเดอร์สำหรับเก็บไฟล์ Model

สอนการเขียนเว็บ ด้วย Yii Framework ซึ่งเป็น PHP Framework ที่มีสมรรถนะสูง สำหรับการพัฒนา Web Application ตั้งแต่เริ่มจนทำเว็บด้วย Yii Framework ได้ Debug ด้วย Unit test สอนตั้งแต่พื้นฐานทำความรู้จัก Yii Framework  ความสามารถเด่นของ Yii Framework หลักการทำงานของ Yii Framework เริ่มต้นใช้ Yii Framework Testing การทดสอบ โปรแกรม Yii Framework โปรแกรมประยุกต์บนเว็บ

บทเรียน SQL สอนคำสั่ง SQL เพื่อการใช้งานที่หลากหลาย และเพื่อความเร็วในการค้นหาข้อมูลจากฐานข้อมูล ชนิดต่างๆ เช่น Mysql, Oracle, SQL SERVER, PGSQL และ SQL มาตรฐานอื่นๆ การใช้ INNER JOIN ชนิดของข้อมูล (Data type) คำสั่ง SQL การใช้ CASE การใช้สูตรทางคณิตต่างๆ ได้แก่ ABS, Power การแปลงชนิดข้อมูล การใช้ Operator การ SELECT ข้อมูล การ INSERT ข้อมูล

เนื้อหา บทเรียน SQL: http://www.mindphp.com/forums/viewforum.php?f=74

บทเรียน สอนการใช้งาน phpMyadmin สอนการช้งานโปรแกรมใช้ในการจัดการฐานข้อมูล Mysql บน browser ด้วย phpMyadmin ทำความรู้จัก phpMyAdmin การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table ในฐานข้อมูล การเพิ่มฟิลด์ Field ในตาราง ที่สร้างไว้แล้ว การป้อนข้อมูลของฟิลด์ Field ในตาราง Table การเพิ่ม user มีวิธีการใช้งานที่ง่ายๆ การลบข้อมูลในฟิลด์ Field การลบฟิลด์ Field ในตาราง การลบฐานข้อมูล Database MySQL วิธีการลบตาราง Table การแก้ไขข้อมูลในฟิลด์ Field การเปลี่ยนชื่อฐานข้อมูล นำเข้า Import ส่งออก Export ฐานข้อมูล นำเข้า Import ส่งออก Export ตาราง Table MySQL

บทเรียนสอนการใช้งาน PgAdmin มารู้จักและติดตั้ง PostgreSQL ระบบการจัดการฐานข้อมูลเชิงวัตถุ-สัมพันธ์ แบบ ORDBMS โดยสามารถใช้รูปแบบคำสั่งของภาษา SQL ได้เกือบทั้งหมด การเชื่อมต่อ SERVER รู้จักส่วนประกอบของโปรแกรม PostgreSQL การเชื่อมต่อฐานข้อมูล Connect to Database การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table การสร้างคอลัมน์ Column และคีย์หลัก Primary Key ให้กับตาราง Table การป้อนข้อมูลในคอลัมน์ Columns การลบข้อมูล Delete การแก้ไขข้อมูลในคอลัมน์ Columns 

บทเรียน Javascript เป็นการสอน เขียนโปรแกรมภาษา Javascript เบื้องต้น สำหรับ เป็นพื้นความรู้ในการพัฒนเว็บ ที่มีลูกเล่น และใช้คู่กับ CSS มีตัวอย่างโค้ดจาวาสคริปให้ ดาวน์โหลดไปทดลอง รันได้ สอนพื้นฐานการเขียนโปรแกรม ภาษา Javascript ทั้งหมด 19 บทเรียนรู้ง่าย ๆ เข้าใจได้เร็ว วิธีการใช้งาน JavaScript คำสั่งต่างๆ ในการเเสดงผลหน้าเว็บไซต์ Javascript statements คำสั่งที่ให้ทำงานตามลำดับ Comments เขียนข้อความบอกรายละเอียดในโค้ดโปรแกรม การประกาศตัวแปร

บทเรียนสอน AJAX ย่อมาจาก Asynchronous JavaScript and XML PHP AJAX เนื้อหา php Javascript XML บทเรียนการใช้งาน Ajax เทคนิคการเขียน สอนแบบเน้นลงมือปฏิบัติจริง การทำงานของ AJAX สร้าง Ajax ด้วย Jquery Example ควรมีความรู้ พวกภาษาที่ทำงาน บน server เช่น php, jsp, asp อย่างใดอย่างหนึ่งด้วย เพื่อเพิ่มประสิทธิภาพ และ ความสามารถของ AJAX ยิ่งขึ้น aj

บทเรียน Jquery สอน Jquery ตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง ซึ่ง JavaScript Library ตัวหนึ่งที่นิยมมากในปัจจุบันซึ่งถูกออกแบบมาเพื่อให้การเขียน Javascript ทำความรู้จักกับ Jquery การ Selectors ส่วนที่เลือก การ Event Funtions กำหนดเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ Effects เอฟเฟคต่างๆของ jQuery การมองส่วนต่างๆของหน้าเว็บ DOM = Document Object Model 

บทเรียนออนไลน์ android ประวัติความเป็นมาของ Android วิวัฒนาการ สอนการพัฒนา App android ตั้งแต่พื้นฐานและนำไปใช้ใน อุปกรณ์พกพา ได้จริงๆ พร้อมทั้งแนะนำ เทคนิคต่างๆ ในการพัฒนา App บน android OS การใช้งาน IDE พื้นฐานภาษา JAVA เครื่องมือในการพัฒนาสำหรับมือใหม่ที่เริ่มพัฒนา แนะนำ Android Studio เพราะไม่ต้องตั้งค่าเพิ่มเติม และง่ายต่อการใช้งาน
สำหรับท่านที่ยังไม่รู้ว่า android คืออะไรลองอ่านบทความนี้ 
พูดคุยการพัฒนาและปัญหาการใช้ Android

บทเรียน Python สอนการเขียน ภาษา Python เบื้องต้น Python สามารถพัฒนา Web Application ได้เหมือนกับ ภาษา PHP ,Perl , JSP และ ASP

บทเรียนออนไลน์ Java สอนกาเขียน  พื้นฐาน เรียนรู้ Java ตั้งแต่เบื้องต้น การเขียนโปรแกรมด้วยภาษา Java สอนตั้งแต่ Basic พื้นฐานจนการเขียนโปรแกรมสามารถนำไปใช้งานได้จริง 

เรียนภาษาอังกฤษกับโปรแกรมเมอร์ ฉบับโปรแกรมเมอร์สอน สอนภาษาอังกฤษที่เกี่ยวข้องกับคอมพิวเตอร์ ภาษาคอมพิวเตอร์เรียกว่าอะไร หมายถึงอะไรเรียนรู้ได้จากที่นี่

บทเรียน สอนการใช้ คอมพิวเตอร์พื้นฐาน สอน การใช้งานตั้งค่า Internet ความรู้ทั่วไป เกี่ยวกับคอมพิวเตอร์

หมวดหลัก วีดีโอสอน เขียนโปรแกรม ด้วยภาษาต่าง PHP, Python, Javascript, Odoo Website, Joomla, phpBB, PostgreSQL, Framework ต่างๆ

วีดีโอสอน เขียน php7 พื้นฐานสำหรับนักพัฒนาเว็บไซต์ ทำความรู้จัก php เครื่องมือที่ใช้พัฒนา โปรแกรม ภาษา PHP แนะนำ เครื่องมือ พัฒนา ทำความรู้จัก ตัวแปลใน php - PHP Variable

วีดีโอสอนเขียน Python สำหรับพื้นฐาน สามารถเขียนตามได้ง่าย การเขียน Server Script และ พัฒนาโมดูล OpenERP หรือ Odoo

บทเรียน CSS ความรู้เบื้องต้นเกี่ยวกับ CSS แนะนำ ซีเอสเอส ทำเว็บสวย ตกแต่งเว็บไซต์ให้สวยงามด้วยการใช้ CSS ทำตามได้ไม่ยาก อยากทำเว็บไซต์ให้สวยต้องดู

VDO สอนการใช้โปรแกรมจัดการฐานข้อมูล PostgreSQL สำหรับผู้ใช้งานเบื้องต้น สอนการสร้างฐานข้อมูล (Database) อธิบายเข้าใจง่าย สามารถศึกษาได้จากวีดีโอเลย

VDO สอนการใช้งาน phpBB Webboard (พีเอสพีบีบี เว็บบอร์ด) สอนการใช้งานตั้งแต่พื้นฐาน ไปจนถึงการสร้างเป็นเว็บบอร์ด อธิบายละเอียดสามารถเข้าใจได้ง่าย

VDO สอนการใช้งาน Odoo Website (โอดู เว็บไซต์) สอนการใช้งานเบื้อต้น การปรับแต่งส่วนต่างๆของ Odoo Website สามารถปรับแต่งได้อย่างไรบ้าง รับชมได้จากวีดีโอสอนการใช้งานเลย

VDO สอนการใช้งาน Joomla พื้นฐาน สามารถใช้งานส่วนอะไรได้บ้าง อยากปรับแต่ง Joomla ให้เป็นแบบที่ต้องการต้องทำอย่างไร ศึกษาได้จากวีดีโอ

บทเรียน Python GUI

บทเรียน Python Tensorflow สอนใช้งาน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เช็คของ ที่ตรวจแล้ว
โดย Kanyarat Kanthawong อ 26 พฤษภาคม 2019 3:48 pm บอร์ด SQL - Database
1
9
อ 26 พฤษภาคม 2019 4:47 pm โดย mindphp
B - Error เข้าระบบ อัตโนมัติ ด้วย facebook
โดย mindphp อ 26 พฤษภาคม 2019 5:57 pm บอร์ด phpbbthailand.com
0
2
อ 26 พฤษภาคม 2019 5:57 pm โดย mindphp
วิธีติดตั้ง Joomla 3.9.6 ตอนที่2
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:42 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 5:42 pm โดย jamepiyawat
วิธีติดตั้ง Joomla 3.9.6 บน Ubuntu ตอนที่1
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:32 pm บอร์ด Joomla user Guide Knowledge
1
26
ส 25 พฤษภาคม 2019 8:10 pm โดย mindphp
รับค่ามาแล้วแต่แปลงไฟล์ไม่ได้ครับ
โดย teenproza7 ส 25 พฤษภาคม 2019 4:36 pm บอร์ด Programming - C/C++ & java & Python
5
27
ส 25 พฤษภาคม 2019 7:33 pm โดย mindphp
คำศัพท์ที่เจอบ่อยในการทำงาน Master data management
โดย nanthiya ส 25 พฤษภาคม 2019 4:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
ส 25 พฤษภาคม 2019 4:29 pm โดย nanthiya
python รับค่าจาก form แล้วสร้างเป็นไฟล์ เพื่อนำไปใช้ต่อ
โดย teenproza7 ส 25 พฤษภาคม 2019 3:19 pm บอร์ด Programming - C/C++ & java & Python
2
20
ส 25 พฤษภาคม 2019 7:14 pm โดย teenproza7
Localhost คืออะไร
โดย jamepiyawat ส 25 พฤษภาคม 2019 3:04 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 3:04 pm โดย jamepiyawat
เจอปัญหา จุมล่าขอ Host จริงส่งเมลออกไม่ได้
โดย mindphp ส 25 พฤษภาคม 2019 1:06 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
ส 25 พฤษภาคม 2019 1:06 pm โดย mindphp
ที่มาของชื่อกลุ่มดาวคนแบกงู
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:50 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ส 25 พฤษภาคม 2019 11:50 am โดย jamepiyawat
แปลข้อความเป็นภาษาอื่น ฟีเจอร์ใหม่ใน Microsoft Office
โดย teenproza7 ส 25 พฤษภาคม 2019 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
11
ส 25 พฤษภาคม 2019 11:34 am โดย teenproza7
ราศีที่ 13
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ส 25 พฤษภาคม 2019 11:22 am โดย jamepiyawat
ทำไมเราถึงเห็นน้ำอยู่กลางถนนนะ?
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:34 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
ส 25 พฤษภาคม 2019 10:34 am โดย jamepiyawat
งานประจำวันที่ 25 พฤษภาคม 2562
โดย nanthiya ส 25 พฤษภาคม 2019 10:21 am บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
4
46
ส 25 พฤษภาคม 2019 7:51 pm โดย nanthiya
งานประจำวันที่ 25 พฤษาภาคม 2562
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
25
ส 25 พฤษภาคม 2019 8:15 pm โดย mindphp
งานประจำวันที่ 25 พฤษภาคม 2562
โดย teenproza7 ส 25 พฤษภาคม 2019 9:52 am บอร์ด M082 - ยศนันท์ ปันคำ
1
11
ส 25 พฤษภาคม 2019 7:40 pm โดย teenproza7
ทดลองสอบ TOEIC ก่อนไปลงสนามจริง
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 24 พฤษภาคม 2019 7:33 pm โดย teenproza7
แก้เมารถ ขี้เมารถ ขึ้นรถทีไรลำบากตลอด
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
ศ 24 พฤษภาคม 2019 7:10 pm โดย teenproza7
ใส่เงาให้กับตัวอักษร
โดย jamepiyawat ศ 24 พฤษภาคม 2019 6:06 pm บอร์ด CSS Knowledge
0
22
ศ 24 พฤษภาคม 2019 6:06 pm โดย jamepiyawat
ความรู้และประสบการณ์ก่อนเริ่มงาน
โดย nanthiya ศ 24 พฤษภาคม 2019 5:58 pm บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
0
8
ศ 24 พฤษภาคม 2019 5:58 pm โดย nanthiya