การพัฒนาโปรแกรมประยุกต์บนเว็บ

การพัฒนาโปรแกรมประยุกต์บนเว็บการพัฒนาโปรแกรมประยุกต์บนเว็บ HTML (HyperText Markup Language) มหาวิทยาลัยโยนก จังหวัดลำปาง ศูนย์กลางความรู้และภูมิปัญญาแผ่นดิน http://www.yonok.ac.th อ.บุรินทร์ รุจจนพันธุ์ . ปรับปรุง 12 กรกฎาคม 2550

เอชทีเอ็มแอล (HTML) HTML (HyperText Markup Language) คือ ภาษาคอมพิวเตอร์ที่ออกแบบมาเพื่อใช้ในการเขียนเว็บเพจ ถูกเรียกดูผ่านเว็บบราวเซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) HTML เป็นมาตรฐานที่จัดการโดย World Wide Web Consortium แต่ปัจจุบัน W3C ผลักดัน XHTML ที่ใช้ XML มาทดแทน HTML รุ่น 4.01

เครื่องมือที่ใช้ฝึกเขียน HTML 1. Notepad Save As ชื่อ "c:\x.htm" เพื่อจัดเก็บแฟ้มใน Drive C:\ 2. Internet Explorer (IE) เปิด c:\x.htmในช่อง Address กดปุ่ม Refresh หรือ F5 เมื่อต้องการดูผลการแก้ไขที่ทำใน Notepad 3. Web editor ซึ่งมี editor และ preview ในตัว เช่น DreamWeaver, FrontPage,Namo, Composer, Hotdog, Pagemill, Word

HTML แฟ้มแรกของฉัน เช่น x.htm <html> <head> <title>hello</title> </head> <body bgcolor=yellow> welcome to my web page </body> </html>

หนา เอียง เส้นใต้ และปัดบรรทัด <body> First : <b>lampang</b><br> Second : <i>bangkok</i><br> Third : <u>nan</u><br> </body>

แสดงแนวขอบฟ้า (Horizontal Line) <body> lampang <hr> bangkok <hr width=50%> nan <hr color=red> prayao <hr size=100 color=blue> </body>

กำหนดรูปแบบตัวอักษร <body> <font face=cordiaupc>tak</font> <font color=blue>lampang <font color=red size=6>nan</font> romeo</font><br> bangkok </body>

Webpage Link <body> <a href=a01.htm>My Home</a> <a href=a02.htm>My Friends</a> <a href=a03.htm>Contact</a> <a href=a04.htm>About Us</a> </body>

Body Properties <body bgcolor=green text=blue link=yellow alink=red vlink=black> <a href=a.htm>A page</a> </body>

Internet Webpage Link <body> <a href=products.htm>Products</a> <a href=http://www.lampang.go.th>Lampang</a> <a href=http://www.thaiall.com/php>PHP</a> </body>

Red Green Blue <body bgcolor=#ddffff> Red Green Blue 16 Million (256 * 256 * 256)<br> <font color=#ff0000>red</font> <font color=#00ff00>green</font> <font color=#0000ff>blue</font> <font color=#ffff00>yellow</font> <font color=#000000>black</font> <font color=#ffffff>white</font> <font color=#dddddd>gray</font> </body>

Image Tag <body> <img src=x.jpg> <img src=x.gif> <img src=x.png> <img src=http://a.com/x.png> </body>

Link of Image <body> <a href=x.htm><img src=x.gif></a> <a href=http://www.thaiall.com> <img src=y.gif> </a> <a href=z.htm> <img src=z.jpg border=0> </a> </body>

ตาราง 1 ช่อง <body> <table> <td>abc</td> </table> </body>

ตาราง 2 ช่อง <body> <table bgcolor=#ddffdd> <td>lampang</td> <td>bangkok</td> </table> </body>

ตาราง มีขอบ มีสีพื้น <body> <table border=1 width=80% bgcolor=yellow align=center> <td>lampang</td> <td>bangkok</td> <td>nan</td> </table> </body>

ตาราง 2 บรรทัด มีทั้งหมด 6 ช่อง <body> <table border=1> <tr> <td>lampang</td> <td>bangkok</td> <td>nan</td> </tr> <tr> <td>boy</td> <td>girl</td> <td>baby</td> </tr> </table> </body>

กำหนดตำแหน่งข้อมูลในตารางกำหนดตำแหน่งข้อมูลในตาราง <table border=1 width=100%><tr> <td align=left>a<br>b<br>c<br>d</td> <td valign=top width=100>e</td> <td valign=bottom align=right>f</td> </tr></table>

ขยายช่องเดียวเป็น 2 ช่อง <body> <table border=1 width=200> <tr><td>a</td><td>b</td></tr> <tr><td colspan=2>c</td></tr> </table> </body>

ขยายช่องเดียวเป็น 2 แถว <table border=1 width=200> <tr><td>a</td><td rowspan=2>b</td><td>c</td></tr> <tr><td>d</td><td>e</td></tr> </table>

ชิดขวาด้วย DIV <body> <div align=right> abc </div> </body>

กำหนดตำแหน่งของ DIV (Layer) <body> <div style="position:absolute; left:10px; top:15px;"> <font size=6 face=impact>abc</font> </div> </body>

กำหนดลำดับของ Layer <div style="position:absolute; left:10px; top:15px; z-index:3;"> <img src=x1.jpg></div> <div style="position:absolute; left:50px; top:45px; z-index:1;"> <img src=x1.jpg></div> <div style="position:absolute; left:90px; top:75px; z-index:2;"> <img src=x1.jpg></div>

Form: Radio, Checkbox, Select <form action="x.php" method=post> <input name=name> <input type=radio value=th name=country>thai <input type=radio value=cn name=country>china <input type=checkbox name=f1>rice<input type=checkbox name=f2 checked>ice<input type=checkbox name=f3 checked>coke<select name=sex size=6><option value=m selected>Male<option value=f>Female</select><input type=submit></form>

Form: Textarea, Button <form action="x.php" method=post> <textarea name=msg rows=10 cols=80> a b c </textarea> <input type=button value=close onclick="javascript:window.close()"><input type=submit></form>

CSS (Cascading Style Sheets) <html><head> <style type="text/css"> body {font-family:"ms sans serif"; color:blue;background-color:pink} td {font-size:20px;font-family:arial; color:red;background-color:yellow} </style> </head><body> Hello <table><td>abc</td></table> </body>

Redirect to New WebPage <html><head><title>hello from burin</title> <meta http-equiv=refresh content="0;url=http://www.x.com"> <meta http-equiv=content-type content="text/html; charset=windows-874"> <meta name=keywords content="new,page"> <meta name=description content="my first page"> </head> <body>please wait</body> </html>

การพัฒนาโปรแกรมประยุกต์บนเว็บ