1. CSE 190: Internet E-Commerce Lecture 2

2. HTML Basics: HTML, URL, Frames, Forms References: www.utoronto.ca/webdocs/HTMLdocs/NewHTM L/intro.html www.utoronto.ca/webdocs/HTMLdocs/NewHTM L/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 This is a Heading : container since it contains text in between start and end Tag names are case insensitive Element attributes: variables that take values defining properties – This is a Heading – –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 : 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

8. Uniform Resource Locators URL components: –http://www.address.edu:8096/path/dir/file.htmlhttp://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#l ocation –Within the document: text marker 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-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

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