Transcript JSP คืออะไร
การพัฒนาโปรแกรมประยุกต์บนเว็บ
HTML (HyperText Markup Language)
มหาวิทยาลัยโยนก จังหวัดลาปาง
ศูนย์กลางความรู ้และภูมิปัญญาแผ่นดิน
http://www.yonok.ac.th
http://www.thaiall.com/html/html.htm
อ.บุรินทร์ รุ จจนพันธุ์ .
ปรับปรุ ง 12 กรกฎาคม
2550
เอชทีเอ็มแอล (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=products.htm>Products</a>
<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 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>
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
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>
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