Docstoc

JSP คืออะไร

Document Sample
JSP คืออะไร Powered By Docstoc
					การพัฒนาโปรแกรมประยุกต์บนเว็บ

                            HTML (HyperText Markup Language)




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


http://www.thaiall.com/html/html.htm
                 เครื่องมือที่ใช้ฝึกเขียน 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
http://www.thaiall.com/html/html.htm
            HTML แฟ้มแรกของฉัน เช่น x.htm
<html>
<head>
<title>hello</title>
</head>
<body bgcolor=yellow>
welcome to my web page
</body>
</html>

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




http://www.thaiall.com/html/html.htm
           แสดงแนวขอบฟ้า (Horizontal Line)
<body>
lampang
<hr>
bangkok
<hr width=50%>
nan
<hr color=red>
prayao
<hr size=100 color=blue>
</body>
http://www.thaiall.com/html/html.htm
                     กาหนดรูปแบบตัวอักษร
<body>
<font face=cordiaupc>tak</font>
<font color=blue>lampang
<font color=red size=6>nan</font>
romeo</font><br>
bangkok
</body>



http://www.thaiall.com/html/html.htm
                             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>




http://www.thaiall.com/html/html.htm
                            Body Properties
<body bgcolor=green
text=blue link=yellow
alink=red vlink=black>
<a href=a.htm>A page</a>
</body>



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




http://www.thaiall.com/html/html.htm
                            Red Green Blue
<body>
Red Green Blue
16 Million (256 * 256 * 256)
<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>
http://www.thaiall.com/html/html.htm
                                Image Tag
<body>
<img src=x.jpg>
<img src=x.gif>
<img src=x.png>
<img src=http://a.com/x.png>
</body>

http://www.thaiall.com/html/html.htm
                                Image Link
<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>


http://www.thaiall.com/html/html.htm
                             ตาราง 1 ช่อง
<body>
<table>
<td>abc</td>
</table>
</body>
http://www.thaiall.com/html/html.htm
                             ตาราง 2 ช่อง
<body>
<table bgcolor=#ddffdd>
<td>lampang</td>
<td>bangkok</td>
</table>
</body>

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

http://www.thaiall.com/html/html.htm
           ตาราง 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>
http://www.thaiall.com/html/html.htm
               กาหนดตาแหน่งข้อมูลในตาราง
<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>

http://www.thaiall.com/html/html.htm
                   ขยายช่องเดียวเป็น 2 ช่อง
<body>
<table border=1 width=200>
<tr><td>a</td><td>b</td></tr>
<tr><td colspan=2>c</td></tr>
</table>
</body>




http://www.thaiall.com/html/html.htm
                   ขยายช่องเดียวเป็น 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>

http://www.thaiall.com/html/html.htm
                            ชิดขวาด้วย DIV
<body>
<div align=right>
abc
</div>
</body>


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




http://www.thaiall.com/html/html.htm
                     กาหนดลาดับของ 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>
http://www.thaiall.com/html/html.htm
               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>

http://www.thaiall.com/html/html.htm
                      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>
http://www.thaiall.com/html/html.htm
            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>
http://www.thaiall.com/html/html.htm
                  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>


http://www.thaiall.com/html/html.htm

				
DOCUMENT INFO