CSE 190: Internet E-Commerce

CSE 190: Internet E-Commerce Lecture 2

Lecture 2 • HTML Basics: HTML, URL, Frames, Forms • References: www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html • www.htmlhelp.com • Google: search for HTML tutorial

HTML • Markup language: describes document format with text instructions embedded within the document • Physical (e.g., MS Word – for printing) vs. semantic markup (e.g., HTML – for electronic transmission) • E.g., 12 inches vs. heading • Linking of documents • HTML: What you get is what you meant (WYGIWYM) rather than what you see is what you get (WYSIWYG, e.g., MS Word) • Extensible: newer versions without breaking older ones: 1.0, 2.0, 3.2, 4.0

HTML Basics • <H1> This is a Heading </H1> • <H1>: container since it contains text in between start and end • Tag names are case insensitive • Element attributes: variables that take values defining properties • <H1 ALIGN=“center”> This is a Heading</H1> • <img src = “filename.gif”> • Can only appear in start tags • HTML Nesting rules: elements cannot overlap or contain each other

HTML Example 1

HTML Example 2 • Use of images

HTML Example 3 • HTML/ HTML Example 3.htm to show links • <A>: Anchor element • Target of hyperlink: URL (Uniform Resource Locator) • Http: protocol specifier, “//www.cse.ucsd.edu” Internet domain name of the server. Sometimes for example, an “:8080” port number is added (like telephone extension – server listens at this port number). Most web servers listen at port 80. Finally, “/file.html” or “/file.htm” is path and filename relative to web server’s home directory. • Relative vs. absolute URLs

Uniform Resource Locators • URL components: • http://www.address.edu:8096/path/dir/file.html • Protocol, resource address, resource details • Query Strings: http//www.somewhere.edu/cgi-bin/srch-data?archite+database • “+” encodes space in the argument string • Fragment Identifiers: • http://some.where.edu/stuff/path/plonk.html#location • Within the document: <A Name = “location”> text marker </A> • SSL: https: …

HTML Forms • Lets Server solicit input from user • Checkboxes, radio boxes, pull-down lists, text windows, menus etc. • Name Value pairs sent to server for processing • HTML/Forms Example.htm

Style Sheets • Example: H1 {font-size: 24pt; font-family: arial; text-align:center;} H2{font-size: 18pt; font-family: arial; text-align: left; } EM {font-style:italic;} • Language: Cascading Style Sheets (CSS) • Same style sheet can be used by multiple web pages • HTML/ style sheets example 1.htm, Style Sheets Example 2.htm

HTML Style Sheets • Style sheets define formatting, positioning, and sizing details and are applied to HTML document for display • Why are they called “cascading”? • Why not just use tables?

Style Sheet References • Reference: • http://www.w3schools.com/css/css_intro.asp • http://www.w3schools.com/css/css_syntax.asp • http://www.w3schools.com/css/css_howto.asp , example 1 and 2 • http://www.w3schools.com/js/js_intro.asp • http://www.w3schools.com/js/js_howto.asp • http://www.w3schools.com/js/js_whereto.asp • http://www.w3schools.com/js/js_variables.asp • http://www.w3schools.com/js/js_operators.asp • http://www.w3schools.com/js/js_functions.asp • http://www.w3schools.com/js/js_conditionals.asp • http://www.w3schools.com/js/js_looping.asp • http://www.w3schools.com/js/js_guidelines.asp

Scripting within HTML • Scripts included within HTML docs to process data: both for taking data from user, processing it and sending it to server, and for output/display • HTML SCRIPT element • Can appear in head or body. Better in head. • Included in HTML document or separate file • Java/ Javascript example 1.htm, Javascript Example 2.htm, Javascript Example 3.htm : uses javascript function date()

Javascript References • References • http://www.w3schools.com/js/js_intro.asp • http://www.w3schools.com/js/js_howto.asp • http://www.w3schools.com/js/js_whereto.asp • http://www.w3schools.com/js/js_variables.asp • http://www.w3schools.com/js/js_operators.asp • http://www.w3schools.com/js/js_functions.asp • http://www.w3schools.com/js/js_conditionals.asp • http://www.w3schools.com/js/js_looping.asp • http://www.w3schools.com/js/js_guidelines.asp

CSE 190: Internet E-Commerce