Download presentation
Presentation is loading. Please wait.
1
Client Side programming: HTML, XHTML & CSS
Slide # 04 Client Side programming: HTML, XHTML & CSS E-business (constructed by Dr. Hanh Pham)
2
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)
3
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)
4
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 <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> <a href=" 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)
5
E-business (constructed by Dr. Hanh Pham)
HTML: About page E-business (constructed by Dr. Hanh Pham)
6
E-business (constructed by Dr. Hanh Pham)
HTML: Menu E-business (constructed by Dr. Hanh Pham)
7
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)
8
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)
9
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)
10
E-business (constructed by Dr. Hanh Pham)
HTML: Form E-business (constructed by Dr. Hanh Pham)
11
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 </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=" "></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 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)
12
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)
13
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)
14
E-business (constructed by Dr. Hanh Pham)
XHTML: simple page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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)
15
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)
16
E-business (constructed by Dr. Hanh Pham)
CSS E-business (constructed by Dr. Hanh Pham)
17
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)
18
E-business (constructed by Dr. Hanh Pham)
CSS Inline style <!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> E-business (constructed by Dr. Hanh Pham)
19
E-business (constructed by Dr. Hanh Pham)
CSS Internal style sheet <!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> E-business (constructed by Dr. Hanh Pham)
20
E-business (constructed by Dr. Hanh Pham)
CSS External style sheet <!– 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> /* mystyle.css */ body {background-color: yellow;} h1 {color: blue; text-shadow: 2px 2px #ff0000;} E-business (constructed by Dr. Hanh Pham)
21
E-business (constructed by Dr. Hanh Pham)
CSS: menu <!-- p6.htm --> <html> <head> <title>ABC website</title> <link rel="stylesheet" href="comstyle.css"> </head> <body> <!-- Site navigation menu --> <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> <!-- Main content --> <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 </address> </body> </html> E-business (constructed by Dr. Hanh Pham)
22
E-business (constructed by Dr. Hanh Pham)
CSS: menu /* 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.navbar li { 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 } E-business (constructed by Dr. Hanh Pham)
23
E-business (constructed by Dr. Hanh Pham)
CSS: menu E-business (constructed by Dr. Hanh Pham)
24
E-business (constructed by Dr. Hanh Pham)
CSS Learn MORE about HTML, CSS on the Internet and using slides here: E-business (constructed by Dr. Hanh Pham)
25
E-business (constructed by Dr. Hanh Pham)
References Most of materials in this slide come from: searchcio.techtarget.com tutorialspoint.com 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, Pawan Lingras, 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)
Similar presentations
