1 / 14

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.

eron
Download Presentation

CSE 190: Internet E-Commerce

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CSE 190: Internet E-Commerce Lecture 2

  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

  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 • <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

  5. HTML Example 1

  6. HTML Example 2 • Use of images

  7. 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

  8. 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: …

  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

More Related