Slide 02 HTML Embedding Tables and Forms Web
Slide # 02 HTML Embedding, Tables and Forms Web Page Design (Dr. Hanh Pham) 1
HTML: Audios • Before HTML 5, there was no standard for playing audio files on a web page. • Before HTML 5, audio files could only be played with a plug-in (like flash). • The HTML 5 <audio> element specifies a standard way to embed audio in a web page. • EXAMPLE at: http: //www. w 3 schools. com/html 5_audio. asp Web Page Design (Dr. Hanh Pham) 2
HTML: Video Web Page Design (Dr. Hanh Pham) 3
HTML: Videos • Before HTML 5, there was no standard for showing videos on a web page. • Before HTML 5, videos could only be played with a plug-in (like flash). • The HTML 5 <video> element specifies a standard way to embed a video in a web page. • EXAMPLE at: http: //www. w 3 schools. com/html 5_video. asp Web Page Design (Dr. Hanh Pham) 4
HTML: Embed Youtube Videos • EXAMPLE at: http: //www. w 3 schools. com/html_youtube. asp Web Page Design (Dr. Hanh Pham) 5
HTML: Embed Youtube Videos • ORIGINAL LINK: https: //www. youtube. com/watch? v=r 82 fy. Ob 8 F 5 w <iframe width="840" height="630" src="http: //www. youtube. com/embed/r 82 fy. Ob 8 F 5 w? autoplay=1"> </iframe> Web Page Design (Dr. Hanh Pham) 6
HTML: tables Web Page Design (Dr. Hanh Pham) 7
HTML: tables • Tables are defined with the <table> tag. • Tables are divided into table rows with the <tr> tag. • Table rows are divided into table data with the <td> tag. • A table row can also be divided into table headings with the <th> tag. • EXAMPLE at: http: //www. w 3 schools. com/html_tables. asp Web Page Design (Dr. Hanh Pham) 8
HTML: Forms 9
HTML: Forms <HTML> <HEAD> <TITLE>Register</TITLE> </HEAD> <BODY TEXT="#000000" LINK="#0000 ff" VLINK="#800080"> <FONT SIZE=5 COLOR="#ff 0000"><STRONG><P ALIGN="CENTER">Customer Registration</P></FONT></STRONG> <P><HR></P> <FORM method = "post" enctype= "multipart/form-data" action = "p 1. pl"> <DIR> <B><FONT FACE="Arial" SIZE=2 COLOR="#ff 0000"> <P>Your Email : </B></FONT><INPUT TYPE="TEXT" NAME="User. Name"><B><FONT FACE="Arial" SIZE=2 COLOR="#ff 0000"> <P>Password : </B></FONT><INPUT TYPE="PASSWORD" NAME="Password"><B><FONT FACE="Arial" SIZE=2 COLOR="#ff 0000"> <P>Phone Number : </B></FONT><INPUT TYPE="TEXT" NAME="Email"></P><B><FONT FACE="Arial" SIZE=2 COLOR="#ff 0000"> <P>How To Call You : </B></FONT> <input type="radio" value="blue" NAME="salute">Mr. <input type="radio" value="cyan" NAME="salute">Mrs. <input type="radio" value="red" NAME="salute">Kid </DIR> <P><HR></P> <P ALIGN="CENTER"><INPUT TYPE="submit" VALUE="SIGN UP"></P> </FORM> </BODY> </HTML> 10
HTML: Form 1 <html> <body> <FORM method = "post" enctype= "multipart/form-data" action = "p 1. pl"> Enter Your Title: <input TYPE= "TEXT" NAME="title" > </FORM> </body> </html> 11
HTML: Form 2 <html> <body> <FORM method = "post" enctype= "multipart/form-data" action = "p 1. pl"> Enter Your Title: <input TYPE= "TEXT" NAME="title" > Enter Your SSN: <input TYPE= "TEXT" NAME=“number" > </FORM> </body> </html> 12
References Most of materials in this slide come from: • searchcio. techtarget. com • tutorialspoint. com • http: //jan. newmarch. name/ecommerce/session. html • http: //www. w 3 schools. com/ • http: //www. w 3. org/ • Many pictures here are downloaded from the Internet from various sites such as netbean. org, http: //people. cis. ksu. edu/~reshma, grin. com … • Wikipedia • "Developing Distributed and E-commerce Applications", Darrel Ince, 2 nd Edition, Pearson Addison Wesley • “Web Programming and Internet Technologies: An E-commerce Approach”, Porter Scobey, Pawan • • • Lingras, Jones & Bartlett Publishers, 2013 “Electronic Commerce”, 11 th Edition, Cengage Learning, Gary Schneider, 2015 Internet & World Wide Web How to Program, 5/e, Paul J. Deitel, Harvey M. Deitel, Abbey Deitel Introduction to Electronic Commerce, 3/E, Efraim Turban, David King, Judy Lang, Pearson, 2011 Web Page Design (Dr. Hanh Pham) 13
- Slides: 13
