CSE 190: Internet ECommerce

1
CSE 190 Internet E-Commerce

• Lecture 2

2
Lecture 2

• HTML Basics HTML, URL, Frames, Forms
• References www.utoronto.ca/webdocs/HTMLdocs/NewHT
  ML/intro.html
• www.htmlhelp.com
• Google search for HTML tutorial

3
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

4
HTML Basics

• ltH1gt This is a Heading lt/H1gt
• ltH1gt container since it contains text in between
  start and end
• Tag names are case insensitive
• Element attributes variables that take values
  defining properties
• ltH1 ALIGNcentergt This is a Headinglt/H1gt
• ltimg src filename.gifgt
• Can only appear in start tags
• HTML Nesting rules elements cannot overlap or
  contain each other

5
HTML Example 1
6
HTML Example 2

• Use of images

7
HTML Example 3

• HTML/ HTML Example 3.htm to show links
• ltAgt 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 servers home directory.
• Relative vs. absolute URLs

8
Uniform Resource Locators

• URL components
• http//www.address.edu8096/path/dir/file.html
• Protocol, resource address, resource details
• Query Strings http//www.somewhere.edu/cgi-bin/src
  h-data?architedatabase
• encodes space in the argument string
• Fragment Identifiers
• http//some.where.edu/stuff/path/plonk.htmllocati
  on
• Within the document ltA Name locationgt text
  marker lt/Agt
• SSL https

9
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

10
Style Sheets

• Example H1 font-size 24pt font-family arial
  text-aligncenter H2font-size 18pt
  font-family arial text-align left EM
  font-styleitalic
• 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

11
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?

12
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

13
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()

14
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