CSE 190 Internet ECommerce Lecture 2 Lecture 2

CSE 190: Internet E-Commerce Lecture 2

Lecture 2 • HTML Basics: HTML, URL, Frames, Forms • References: www. utoronto. ca/webdocs/HTMLdocs/New. HTM L/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 1. 0, 2. 0, 3. 2, 4. 0 breaking older ones:

HTML Basics • <H 1> This is a Heading </H 1> • <H 1>: container since it contains text in between start and end • Tag names are case insensitive • Element attributes: variables that take values defining properties – <H 1 ALIGN=“center”> This is a Heading</H 1> – <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/cgibin/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: <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: H 1 {font-size: 24 pt; font-family: arial; text-align: center; } H 2{font-size: 18 pt; 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. w 3 schools. com/css_intro. asp http: //www. w 3 schools. com/css_syntax. asp http: //www. w 3 schools. com/css_howto. asp , example 1 and 2 http: //www. w 3 schools. com/js/js_intro. asp http: //www. w 3 schools. com/js/js_howto. asp http: //www. w 3 schools. com/js/js_whereto. asp http: //www. w 3 schools. com/js/js_variables. asp http: //www. w 3 schools. com/js/js_operators. asp http: //www. w 3 schools. com/js/js_functions. asp http: //www. w 3 schools. com/js/js_conditionals. asp http: //www. w 3 schools. com/js/js_looping. asp http: //www. w 3 schools. 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. w 3 schools. com/js/js_intro. asp http: //www. w 3 schools. com/js/js_howto. asp http: //www. w 3 schools. com/js/js_whereto. asp http: //www. w 3 schools. com/js/js_variables. asp http: //www. w 3 schools. com/js/js_operators. asp http: //www. w 3 schools. com/js/js_functions. asp http: //www. w 3 schools. com/js/js_conditionals. asp http: //www. w 3 schools. com/js/js_looping. asp http: //www. w 3 schools. com/js/js_guidelines. asp