java script and dhtml compsci 381 class hour: 3:45pm – 5:00pm mw
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/1.jpg)
Java script and DHTMLCOMPSCI 381
Class Hour: 3:45pm – 5:00pm MW
![Page 2: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/2.jpg)
A little bit about the instructor
• Graduated from the University of Connecticut (05 Class), Ph.D in Computer Science and Engineering
• Bachelor of Science from Hanoi University of Technology (86-91)
• Master of Computer Science from UW-Milwaukee (96-99)
Assistant professor at UWW since August 2005
![Page 3: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/3.jpg)
Contact information
[email protected](fastest way to contact me)
Office: McCutchan room 424Office Hours: 9am – 11am MW
or 1-2pm W or by appointment
262 472 5170
![Page 4: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/4.jpg)
Course Objectives
Implement and test the interface
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….
![Page 5: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/5.jpg)
Course detail - Topics
Design, implement, an interface for web
development
Understand the requirement
Apply skillfully Javascript
& DHTML techniques
DocumentationTesting
![Page 6: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/6.jpg)
Course Evaluation
GRADABLE POINTS
2 Mid term Exams 300
7 Programming assignments
400
Final Exam 200
Labs 100
Total 1000
![Page 7: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/7.jpg)
Grade
Letter Grade
PercentageLetter 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%
![Page 8: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/8.jpg)
Getting started
• Let’s overview HTML
![Page 9: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/9.jpg)
Assessment
1. The home page for a Web site is usually contained in a file named ___________ .
a. index.htmlb. homepage.htmlc. default.html d. homepage.asp.
![Page 10: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/10.jpg)
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.htmld. awle. None of the above
![Page 11: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/11.jpg)
Assessment
3. Select the attribute in the following line of HTML code <table width=”350”>.
a. widthb. width=”350”c. Tabled. None of the above
![Page 12: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/12.jpg)
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. alinkb. elinkc. vlinkd. zlinke. None of the above
![Page 13: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/13.jpg)
Assessment
5. Select the tag that starts all HTML documents.
a. <BEGIN>b. <START>c. <HTML> d. <FIRST>e. None of the above
![Page 14: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/14.jpg)
Assessment
6. A link to another page begins with <a href. Select the name that best describes this tag.
a. anchorb. pointerc. addressd. a referencee. None of the above
![Page 15: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/15.jpg)
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
![Page 16: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/16.jpg)
Assessment
8. Which part of an application formats and displays web pages?
a. The information serverb. The web browser c. The database serverd. None of the above
![Page 17: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/17.jpg)
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
![Page 18: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/18.jpg)
Assessment
10. The <H7> tag produces a heading with the largest font size.
a. FALSE b. TRUE
![Page 19: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/19.jpg)
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
![Page 20: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/20.jpg)
URLs, Anchor Tags, and Document References
http://www.w3.org/TR/REC-html40/
Protocol HostMachine
Name
![Page 21: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/21.jpg)
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/.
![Page 22: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/22.jpg)
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
![Page 23: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/23.jpg)
<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.
![Page 24: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/24.jpg)
<HEAD> and </HEAD>
• <HEAD>Used to contain information such as title, style
sheets
• </HEAD>: This is the closing <HEAD> tag.
![Page 25: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/25.jpg)
<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>
![Page 26: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/26.jpg)
<BODY> and </BODY>
• <BODY> and </BODY>We put all your text, images, and links between the opening and closing <BODY> tags.
![Page 27: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/27.jpg)
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.
![Page 28: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/28.jpg)
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
![Page 29: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/29.jpg)
Add emphasis to your text
• BoldfaceThis is a <b>boldface</b> tag. This is a boldface tag.
•ItalicsThis is an <i>italic</i> tag.
This is an italic tag.
![Page 30: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/30.jpg)
Lists
Numbered<ol>
<li> list item 1 <li> list item 2 <li> list item 3
</ol>
![Page 31: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/31.jpg)
Lists
Unumbered:<ul>
<li> list item 1 <li> list item 2 <li> list item 3
</ul>
![Page 32: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/32.jpg)
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>
![Page 33: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/33.jpg)
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.
![Page 34: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/34.jpg)
File names
• Use lowercase file names• User proper extension:
– *.html or *.htm
![Page 35: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/35.jpg)
Designing a web site
• Determine the purpose of the web site• Determine the target audience• Determine numbers of pages• Sketch the site on paper
![Page 36: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/36.jpg)
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>
![Page 37: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/37.jpg)
Result
![Page 38: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/38.jpg)
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>
![Page 39: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/39.jpg)
Result
![Page 40: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/40.jpg)
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.
![Page 41: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/41.jpg)
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.
![Page 42: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/42.jpg)
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.
![Page 43: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/43.jpg)
Result
![Page 44: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/44.jpg)
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>
![Page 45: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/45.jpg)
Result
![Page 46: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/46.jpg)
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.
![Page 47: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/47.jpg)
Look at the example again
<style type="text/css"> body { color: purple; background-color: #d8da3d } </style>
SELECTOR
property
value
![Page 48: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/48.jpg)
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}
![Page 49: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/49.jpg)
Creating a selector
• The type or name of elementsFor instance: body, paragraph
• The context in which the element is foundFor instance: paragraphs in the middle of the web page
• The class or id of an elementFor instance: the name of a paragraph in a web page.
![Page 50: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/50.jpg)
Examples
• For the type or name of elementsh2 {color:red}
h1 {color: purple}• The context in which the element is
founddiv#gaudi p {color:red}
• The class or id of an elementdiv#gaudi {color:red}
![Page 51: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/51.jpg)
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>
![Page 52: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/52.jpg)
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/flash/home/GO.htm">celebrates</a> the 150th anniversary of Gaud’'s birth in 2002.</p></div>
![Page 53: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/53.jpg)
Putting style sheet in HTML files
<style type="text/css"><!-- This is where you put Style sheet
information --></style>
![Page 54: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/54.jpg)
Example<html> <head>
<title>Antoni Gaud’ - Introduction</title><style>
h1 {color: purple}</style></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>
Style sheet in HTML file
Style affects this h1 tag
![Page 55: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/55.jpg)
Result
![Page 56: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/56.jpg)
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">
![Page 57: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/57.jpg)
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>
![Page 58: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/58.jpg)
Example of descendant.css
• h1 {color:purple}
![Page 59: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/59.jpg)
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 }
![Page 60: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/60.jpg)
Adding fonts
![Page 61: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/61.jpg)
More about fonts
Font family: font-family: Georgia, Times New Roman, Times, serif;
Font size: font-size:20px
Font type: bold, italicfont-style: italic
Font color: color:#cc00ff
![Page 62: Java script and DHTML COMPSCI 381 Class Hour: 3:45pm – 5:00pm MW](https://reader035.vdocuments.site/reader035/viewer/2022081508/56814e4e550346895dbbda03/html5/thumbnails/62.jpg)
Lab 1
• Creating a web page using HTML