Client Side programming: HTML, XHTML & CSS

Client Side programming: HTML, XHTML & CSS Slide # 04 E-business (constructed by Dr. Hanh Pham)

HTML • HTML or HyperText Markup Language is the standard markup language used to create Web pages. • a HTML code/program runs within a Web browser. The output of running that code is the web page which users can see. • A language for info presentation -> info storage E-business (constructed by Dr. Hanh Pham)

HTML: simple page <html> <head> <title> My First Web Page </title> </head> <body> Hello World !!! </body> </html> Put this HTML code in a file called “p1.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

HTML: About page <html> <HEAD> <TITLE>About</TITLE> </HEAD> <BODY BGCOLOR="FFF000"> <CENTER><IMG SRC=“icon.pgn" ALIGN="BOTTOM"> </CENTER> <H1>ABC Inc. is a leader in IT</H1> <HR> <H2>We have over 1,000,000 business partners</H2> Send me mail at <a href="mailto:support@abc.com"> support@abc.com</a>. <P> This is a new paragraph! <P> <B>This is a new paragraph in bold!</B> <BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B> <HR> <a href="http://www.newpaltz.edu">Link Name</a> is a link to our primary partner </BODY> </html> Put this HTML code in a file called “p2.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

HTML: About page E-business (constructed by Dr. Hanh Pham)

HTML: Menu E-business (constructed by Dr. Hanh Pham)

HTML: Menu Design p3.htm MENU FRAME p1.htm p3-leftmenu.htm p2.htm p4.htm E-business (constructed by Dr. Hanh Pham)

HTML: Menu <html> <meta name="description" content="This is the website of ABC Inc. "> <meta name="keywords" content="computers, IT, e-business, B2B, ai"> <head> <title> ABC inc. </title> </head> <frameset cols=“180,*" frameborder="0" border="0" framespacing="0"> <frame src=“p3-leftmenu.htm" border="0" name="MENU"> <frame src=“p3-mainframe.htm" border="0" name="FRAME"> </frameset> </html> Put this HTML code in a file called “p3.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

HTML: Menu <HTML> <HEAD> <TITLE>Left Menu</TITLE> </HEAD> <BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#008000"> <P> <IMG SRC="logo.png"> </P> <P> <A HREF="p2.htm" target="FRAME"><I><U><STRONG><FONT COLOR="#ffffff">About </I></U></STRONG></FONT></A></P> <P> <A HREF="p1.htm" target="FRAME"><I><U><STRONG><FONT COLOR="#ffffff">Login </I></U></STRONG></FONT></A></P> <P> <A HREF="p4.htm" target="FRAME"><I><U><STRONG><FONT COLOR="#ffffff">Registration </I></U></STRONG></FONT></A></P> </BODY> </HTML> Put this HTML code in a file called “p3-leftmenu.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

HTML: Form E-business (constructed by Dr. Hanh Pham)

HTML: Form <HTML> <HEAD> <TITLE>Register</TITLE> </HEAD> <BODY TEXT="#000000" LINK="#0000ff" VLINK="#800080"> <FONT SIZE=5 COLOR="#ff0000"><STRONG><P ALIGN="CENTER">Customer Registration</P></FONT></STRONG> <P><HR></P> <FORM method = "post" enctype= "multipart/form-data" action = "p1.pl"> <DIR> <B><FONT FACE="Arial" SIZE=2 COLOR="#ff0000"> <P>Your Email : </B></FONT><INPUT TYPE="TEXT" NAME="UserName"><B><FONT FACE="Arial" SIZE=2 COLOR="#ff0000"> <P>Password : </B></FONT><INPUT TYPE="PASSWORD" NAME="Password"><B><FONT FACE="Arial" SIZE=2 COLOR="#ff0000"> <P>Phone Number : </B></FONT><INPUT TYPE="TEXT" NAME="Email"></P><B><FONT FACE="Arial" SIZE=2 COLOR="#ff0000"> <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> Put this HTML code in a file called “p4.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

XHTML • Extensible Hypertext Markup Language (XHTML) is a family of XML markup languages that mirror or extend HTML • XHTML was developed to make HTML more extensible and increase interoperability with other data formats. • XHTML documents are well-formed and may therefore be parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser. E-business (constructed by Dr. Hanh Pham)

XHTML vs. HTML Document Structure • XHTML DOCTYPE is mandatory • The xmlns attribute in <html> is mandatory • <html>, <head>, <title>, and <body> are mandatory XHTML Elements • XHTML elements must be properly nested • XHTML elements must always be closed • XHTML elements must be in lowercase • XHTML documents must have one root element XHTML Attributes • Attribute names must be in lower case • Attribute values must be quoted • Attribute minimization is forbidden E-business (constructed by Dr. Hanh Pham)

XHTML: simple page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>First XHTML Page</title> </head> <body> HELLO from XTML !!! </body> </html> Put this HTML code in a file called “p5.htm” in your WWW/eb/w E-business (constructed by Dr. Hanh Pham)

CSS • Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language (HTML, XHTML, XML … ) . • Most use to define/change the style of web pages. • CSS is designed primarily to enable the separation of document content from document presentation such as the layout, colors, and fonts. E-business (constructed by Dr. Hanh Pham)

CSS E-business (constructed by Dr. Hanh Pham)

CSS There are 3 ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style E-business (constructed by Dr. Hanh Pham)

CSS <!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">ABC Inc.</h1> <p>Welcome to the NEW version of our website !!!.</p> </body> </html> • Inline style E-business (constructed by Dr. Hanh Pham)

CSS <!DOCTYPE html> <html> <head> <style> body { background-color: yellow; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>ABC Inc.</h1> <p>Welcome to the NEW version of our website !!!.</p> </body> </html> • Internal style sheet E-business (constructed by Dr. Hanh Pham)

CSS <!– p7.htm --> <html> <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> <body> <h1>ABC Inc.</h1> <p>Welcome to the NEW version of our website !!!.</p> </body> </html> • External style sheet /* mystyle.css */ body {background-color: yellow;} h1 {color: blue; text-shadow: 2px 2px #ff0000;} E-business (constructed by Dr. Hanh Pham)

 <html> <head> <title>ABC website</title> <link rel="stylesheet" href="comstyle.css"> </head> <body>  <ul class="navbar"> <li><a href="p1.htm">About</a> <li><a href="p2.htm">Login</a> <li><a href="p4.htm">Registration</a> </ul>  <h1>ABC Inc.</h1> <p>ABC Inc. is a leader in IT! <p>We have over 1,000,000 business partners; <address>Send me mail at <a href="mailto:support@abc.com"> support@abc.com</a>. </address> </body> </html> CSS: menu E-business (constructed by Dr. Hanh Pham)

/* comstyle.css */ body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbarli { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } CSS: menu E-business (constructed by Dr. Hanh Pham)

CSS: menu E-business (constructed by Dr. Hanh Pham)

CSS • Learn MORE about HTML, CSS on the Internet and using slides here: http://cs.newpaltz.edu/~phamh/aeb/slides E-business (constructed by Dr. Hanh Pham)

References Most of materials in this slide come from: • searchcio.techtarget.com • tutorialspoint.com • http://jan.newmarch.name/ecommerce/session.html • http://www.w3schools.com/ • http://www.w3.org/ • Wikipedia • "Developing Distributed and E-commerce Applications", Darrel Ince, 2nd Edition, Pearson Addison Wesley • “Web Programming and Internet Technologies: An E-commerce Approach”, Porter Scobey, PawanLingras, Jones & Bartlett Publishers, 2013 • “Electronic Commerce”, 11th Edition, Cengage Learning, Gary Schneider, 2015 • Internet & World Wide Web How to Program, 5/e, Paul J. Deitel, Harvey M. Deitel, Abbey Deitel E-business (constructed by Dr. Hanh Pham)

Client Side programming: HTML, XHTML & CSS