210 likes | 360 Views
HTML. รูปแบบของไฟล์ HTML * มีส่วนขยายเป็น htm หรือ html เช่น sample1.html * เป็น Text Files * คำสั่งมีอยู่ 2 ประเภท + คำสั่งเดี่ยว ทำงานได้ทันทีเมื่อพบคำสั่งนี้ เช่น <Img Src=“”> + คำสั่งที่ต้องมี Open Tag และ Close Tag เช่น <Body> ………………………. </Body>. โครงสร้างของ HTML.
E N D
รูปแบบของไฟล์ HTML * มีส่วนขยายเป็น htm หรือ html เช่น sample1.html *เป็น Text Files *คำสั่งมีอยู่ 2 ประเภท + คำสั่งเดี่ยว ทำงานได้ทันทีเมื่อพบคำสั่งนี้ เช่น <Img Src=“”> + คำสั่งที่ต้องมี Open Tag และ Close Tag เช่น <Body> ………………………. </Body>
โครงสร้างของ HTML <HTML> <HEAD><TITLE> ………………</TITLE> </HEAD> <BODY> <!------ COMMENT ------ -> </BODY> </HTML>
SAMPLE1.HTML 1. RUN TEXT EDITOR PROGRAM 2.เขียนคำสั่ง <HTML> <HEAD><TITLE>SAMPLE 1 </TITLE> <!--- MY FIRST HTML FILE -></HEAD> <BODY> ยินดีต้อนรับทุกท่าน ขอขอบคุณที่เข้าร่วมสัมมนา<BR> สถาบันราชภัฏมหาสารคาม<BR> </BODY></HTML> 3.บันทึกไว้ในแฟ้มชื่อ sample1.html เรียกใช้ด้วย Netscape
การใช้ <FRAMESET>…….</FRAMESET> การใช้ <Frameset> จะต้องไม่ใช้ <BODY> <HTML><HEAD><TITLE>FRAMESET</TITLE></HEAD> <FRAMESET ROWS=“15%, 75%, 15%> <FRAME SRC=“SAMPLE1.HTML” NAME = F1> <FRAME SRC=“SAMPLE2.HTML” NAME= F2> <FRAME SRC=“SAMPLE3.HTML” NAME = F3> <!--- FOR OLD BROWSER -> <NOFRAME> To display This web page, You need to<br> <A HREF=“Http://home.netscape.com”>Down Load </A> Navigator V 4.0 </NOFRAME></FRAMESET>
การใช้ <FORM>……….</FROM> -Tag FORM จะต้องใช้ใน <BODY>………..</BODY> <HTML> <HEAD><TITLE>FORM </TITLE></HEAD> <BODY BGCOLOR=“WHITE”> <FORM NAME=“FORM1” ACTION=“REQUEST.HTML”> <INPUT TYPE=”submit" VALUE= ”HELLO WORLD!"> <BLINK>ยินดีต้อนรับทุกท่าน ขอขอบคุณ</BLINK><BR> สถาบันราชภัฏมหาสารคาม<BR> </FORM></BODY></HTML>
FORM II <HTML> <HEAD><TITLE>FORM II</TITLE></HEAD> <BODY BGCOLOR="WHITE"> <FORM NAME="FORM"> <INPUT TYPE=”Button" value="HELLO WORLD!” onClick=“history.back()”><br> <BLINK>Welcome to MAHA SARAKHAM</BLINK><BR> RIMHK<BR> </FORM></BODY></HTML>
FORM III <HTML> <HEAD><TITLE>FORM III</TITLE></HEAD> <BODY BGCOLOR="WHITE"> <FORM NAME="FORM3” ACTION=“CGI files” METHOD = GET> <SELECT NAME=“Display_type”> <OPTION VALUE=“Pickup” SELECTED> Pickup Cars <OPTION VALUE=“Jet” SELECTED> Jet Cars <OPTION VALUE=“Sun” SELECTED> Sun Cars </SELECT>
<INPUT TYPE=”Submit" value=”Are you sure!”> <INPUT TYPE=“Reset” value=“Reset Form?> </FORM> </BODY> </HTML>
Element ของ FORM tag • Action : เป็นการเจาะจงว่า ข้อมูลของ form • จะถูกส่งไปดำเนินการที่ใด • ปกติจะเป็น URL ของ CGI เช่น • Action=Http://www.rimhk.ac.th/cgi-bin/pwvalidate.exe • อาจใช้เป็น E-mail ก็ได้ เช่น • Action=mailto:pss99@chaiyomail.com
Method : เจาะจงวิธีรับข้อมูล ใช้กัน 2 วิธี ดังนี้ • GET ส่งข้อมูลไป server แบบต่อเนื่องเป็น string เดียวกัน และ • แสดงให้เห็นบน Location ของ Browser • Post ส่งข้อมูลไป server แบบแยกส่วน ตามตัวแปรของ FORM และไม่แสดงข้อมูลให้เห็น บน Location ของ Browser
ใบงานที่ 1. จงสร้าง Web page ที่มีลักษณะดังภาพ
DHTML [ภาษา HTML แบบเคลื่อนที่] เทคโนโลยีที่ใช้ประกอบด้วย 3 ส่วน ดังนี้ 1. HTML 2. Scripting [ JavScript, VBScript ] 3. Style sheets [ Cascading Style Sheets ] IE 4.0 สนับสนุน DHTML มากกว่า Netscape แต่ Netscape สนับสนุน JavaScript 1.2 และLayer ส่วน IE 4.0 นอกจากสนับสนุน JavaScript แล้ว ยังสนับสนุน VBScript ด้วย
<HTML><HEAD><TITLE>My First DHTML.....</TITLE> <Style> .RedOn { font-size: 72; font-weight: bold; font-style: italic; color: red; text-decoration: none; } .RedOff { font-size: 36; font-weight: regular; color: blue; text-decoration: none; } </Style></HEAD>
<BODY><Center> <A href = "http://www.geocities.com/area51/rampart/9491" CLASS="RedOff" onMouseOver="this.className='RedOn';" onMouseOut="this.className='RedOff';"> I am blue <br></A> <A href = "http://www.geocities.com/flint-kku5" CLASS="RedOff" onMouseOver="this.className='RedOff';" onMouseOut="this.className='RedOn';"> I am red <br></A> </BODY></HTML>
ใบงานที่ 2. จงสร้าง Web page ที่มีลักษณะดังภาพ
Tag Layer • Netscape จะสนับสนุน Layer ทำให้แสดงภาพหรือข้อความได้หลายชั้น • มี Properties : name, left, top, visibility, clip, siblingAbove,siblingBelow, parentLayer, layers, offset(x,y), moveTo(x,y), resize(width,height), moveAbove(layer), moveBelow(layer) (จะกล่าวละเอียดทีหลัง)
ใบงานที่ 4. จงสร้าง Web page ที่มีการกำหนด layer การแสดงผลอย่างน้อย 3 ชั้น <html><head><title>Layer Shows</title></head> <Script language="JavaScript1.2")> function MT(){ x=150; y=50; for ( i=1; i <= 250;i++) { document.layers["L2"].moveTo(x+i,y+i); document.layers["L1"].moveTo(400-i,300-i); for (k=1; k <=100; k++){} } } </Script>
<body> <layer name="L1" top=300 left=400 bgcolor=blue width=300> <B>Layer 1******************************<br> <B>Layer 1******************************<br> </layer> <layer name=L2 top=50 left=150 width=300 bgcolor=red> <B>Layer 2++++++++++++++++++++<br> <B>Layer 2++++++++++++++++++++<br> </layer> <a href="javascript:MT()">move layer2 click here</a> </body> </html>