Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CS381Week1
Document related concepts
Transcript
Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW A little bit about the instructor Assistant professor at UWW since August 2005 • Graduated from the University of Connecticut (05 Class), Ph.D in Computer Science and Engineering • Master of Computer Science from UW-Milwaukee (96-99) • Bachelor of Science from Hanoi University of Technology (86-91) Contact information [email protected] (fastest way to contact me) Office: McCutchan room 424 Office Hours: 9am – 11am MW or 1-2pm W or by appointment 262 472 5170 Course Objectives Design a web interface for an web application. It needs to show samples, have links to description, price, warrant info, and shopping cart. It should allow users to pay by credit card…. Implement and test the interface Course detail - Topics Design, implement, an interface for web development Understand the requirement Apply skillfully Javascript & DHTML techniques Documentation Testing Course Evaluation GRADABLE POINTS 2 Mid term Exams 300 7 Programming assignments 400 Final Exam 200 Labs 100 Total 1000 Grade Letter Grade Letter Percentage Grade Percentage A 94 to 100% A- 90 to 93% B+ 87 to 89% B 84 to 86% B- 80 to 83% C+ 77 to 79% C 74 to 76% C- 70 to 73% D+ 67 to 69% D 64 to 66% D- 60 to 63% F Less than 60% Getting started • Let’s overview HTML Assessment 1. The home page for a Web site is usually contained in a file named ___________ . a. index.html b. homepage.html c. default.html d. homepage.asp. Assessment 2. You are given an URL = http://www.awl.com/index.html. What is the host name? a. http:// b. www.awl.com c. index.html d. awl e. None of the above Assessment 3. Select the attribute in the following line of HTML code <table width=”350”>. a. width b. width=”350” c. Table d. None of the above Assessment 4. The variable bgcolor is use to set the background color. What variable would be used to indicate that a site had been previously entered? a. alink b. elink c. vlink d. zlink e. None of the above Assessment 5. Select the tag that starts all HTML documents. a. <BEGIN> b. <START> c. <HTML> d. <FIRST> e. None of the above Assessment 6. A link to another page begins with <a href. Select the name that best describes this tag. a. anchor b. pointer c. address d. a reference e. None of the above Assessment 7. Select the HTML code for the tag of a comment. a. <!- your comment -> b.<—your comment c.< -- your comment -- > d. >!—your comment --< e. None of the above Assessment 8. Which part of an application formats and displays web pages? a. The information server b. The web browser c. The database server d. None of the above Assessment 9. The following CSS code creates a body tag with a black background and white text. BODY { background: black; text: white; } a. TRUE b. FALSE Assessment 10. The <H7> tag produces a heading with the largest font size. a. FALSE b. TRUE HTML overview • An HTML document consists of lines of text with embedded markup tags that specify Web-page formatting and links to other pages • Invented by Tim Berners-Lee at CERN 1989 – The birth of the World Wide Web URLs, Anchor Tags, and Document References http://www.w3.org/TR/REC-html40/ Protocol Host Machine Name URLs, Anchor Tags, and Document References • URL (Uniform Resource Locator) – A protocol, a mechanism used to fetch the desired object. • In this case: http (Hypertext Transfer Protocol). – The host machine, the computer that contains the requested object. • In this case, the host computer is www.w3.org. • Special host name for browser computer: localhost – The object name. • In this case, /TR/REC-html40/. Fundamentals of HTML • • • • • • • HTML, HEAD, Title, Body Headings and paragraphs Add emphasis to your text Use various kinds of lists Add links to other pages Add images Add links to other pages <HTML> and </HTML> • • <HTML> The <HTML> tag is the first tag in your document. It tells the Internet browser that it is reading an HTML document (without it, the browser would think it was viewing a text document). </HTML> This is the closing tag for the <HTML> tag. This should be the last line in your HTML document. <HEAD> and </HEAD> • <HEAD> Used to contain information such as title, style sheets • </HEAD>: This is the closing <HEAD> tag. <TITLE> and </TITLE> • <TITLE> and </TITLE> – It is used to make the title of the page. The title of the page will appear in the blue bar across the top of your active window Example: <TITLE> Basic HTML </TITLE> <BODY> and </BODY> • <BODY> and </BODY> We put all your text, images, and links between the opening and closing <BODY> tags. Headings and paragraphs • There are up to six levels of headers that can be used in your document, H1 through H6. Header 1 is the largest header and they get progressively smaller through header 6. Example • <h1>This is a header 1 tag</h1> This is a header 1 tag • <h2>This is a header 2 tag</h2> This is a header 2 tag Add emphasis to your text • Boldface This is a <b>boldface</b> tag. This is a boldface tag. • Italics This is an <i>italic</i> tag. This is an italic tag. Lists Numbered <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol> Lists Unumbered: <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul> Lists • Definition lists allow you to indent without necessarily having to use bullets. • <dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl> Center • You can center text, images, and headings with the center tag: <center>This is a centered sentence</center> • The center tag automatically inserts a line break after the closing center tag. File names • Use lowercase file names • User proper extension: – *.html or *.htm Designing a web site • • • • Determine the purpose of the web site Determine the target audience Determine numbers of pages Sketch the site on paper Example of HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first Web site</title> </head> <body> <!-- Site navigation menu --> <ul> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <h1>My first styled page</h1> <p>Welcome to my first page! </body> </html> Result Adding color <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first web page</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style> </head> …… <body> Result Style sheet • Style sheets in CSS are made up of rules. Each rule has three parts: – the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule; – the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set; – and the value ('purple' and '#d8da3d'), which gives the value for the style property. Style sheet • Style sheets in CSS are made up of rules. Each rule has three parts: – the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule; – the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set; – and the value ('purple' and '#d8da3d'), which gives the value for the style property. Style sheet • Style sheets in CSS are made up of rules. Each rule has three parts: – the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule; – the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set; – and the value ('purple' and '#d8da3d'), which gives the value for the style property. Result Adding color <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first web page</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style> </head> …… <body> Result Style sheet • Style sheets in CSS are made up of rules. Each rule has three parts: – the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule; – the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set; – and the value ('purple' and '#d8da3d'), which gives the value for the style property. Look at the example again SELECTOR <style type="text/css"> value body { color: purple; property background-color: #d8da3d } </style> Creating a Style rule • Step 1: Determine Selector (which identifies the elements you wish to format). Put { next to it Example: h1{ • Step 2: Determine property: value in which property is the name of CSS property that applies this format and value is one of valid options for that property Example: color:red • Step 3: Combine the results of step 1 and step 2 and put } at the end. If you have more than one property: value pairs, use semicolon (;) to separate them. Example: h1{color:red} Creating a selector • The type or name of elements For instance: body, paragraph • The context in which the element is found For instance: paragraphs in the middle of the web page • The class or id of an element For instance: the name of a paragraph in a web page. Examples • For the type or name of elements h2 {color:red} h1 {color: purple} • The context in which the element is found div#gaudi p {color:red} • The class or id of an element div#gaudi {color:red} DIV tag • The <div> tag: defines logical divisions in a Web page. – determines the alignment of that section of the page. – defines the style of whole sections of HTML. – names certain sections of your documents so that you can affect them with style sheets or Dynamic HTML • Syntax: <div [align=“<left><center><right><justify>”] [id =name]> <!–- this is a body of the div tag --> </div> Example for DIV tag <div id="gaudi" align="center"> <p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p> <p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/fl ash/home/GO.htm">celebrates</a> the 150th anniversary of Gaud’'s birth in 2002.</p> </div> Putting style sheet in HTML files <style type="text/css"> <!-- This is where you put Style sheet information --> </style> Example <html> <head> <title>Antoni Gaud’ - Introduction</title> <style> h1 {color: purple} </style> </head> <body> <h1>Antoni Gaud’</h1> Style sheet in HTML file Style affects this h1 tag <div id="gaudi" align="justify"> <p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p> </div> </body> </html> Result Putting the style sheet in a separate file • Step 1: Open a new text file • Step 2: Cut and paste the content inside <style> </style> tags (except the tag) • Step 3: Save in the same folder with HTML file with the extension *.css (e.g mystyle.css) • Step 4:Replace <style> and </style> tag with: <link rel="stylesheet“ ref="mystyle.css"> Example <html> <head> <title>Antoni Gaud’ - Introduction</title> <link rel="stylesheet" type="text/css" media="screen" href="descendant.css" /> </head> <body> <h1>Antoni Gaud’</h1> <div id="gaudi" align="justify"> <p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p> </div> </body> </html> Example of descendant.css • h1 {color:purple} Adding fonts body { font-family: Georgia, Times New Roman, Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } Adding fonts More about fonts Font family: font-family: Georgia, Times New Roman, Times, serif; Font size: font-size:20px Font type: bold, italic font-style: italic Font color: color:#cc00ff Lab 1 • Creating a web page using HTML
