html,css & javascript by p.usha associate professor, department of information technology, b.s....
TRANSCRIPT
![Page 1: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/1.jpg)
HTML,CSS & Javascriptby
P.UshaAssociate Professor ,
Department of Information Technology,B.S. Abdur Rahman University
![Page 2: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/2.jpg)
Markup Languages
A markup language embeds tags within regular text Text file → edit with notepad
SGML – Standard Generalized Markup Language Generic language conceived in the 60’s Language to separate content and structure Elements identify text objects
HTML – Hypertext Markup Language Based on SGML Most common markup language for Internet pages
XML – Extensible Markup Language Also based on SGML Very flexible Commonly used for information exchange
![Page 3: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/3.jpg)
HTML Editors
HTML Files are simply text files
Notepad and WordPad are fine text editors
Emacs and XEmacs are good, and also work in Linux
Many freeware HTML editors exist
![Page 4: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/4.jpg)
Server basics
HTML file is requested by user
Request travels over internet to proper machine
Internet server computer locates file and responds
InternetInternet InternetServer
Software
file.html
<html>...
![Page 5: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/5.jpg)
Markup Tags
Tags are used to separate structure from content Usually placed inside < >
E.g. <html> defines the start of an HTML page Closed with </ >
E.g. </html> closes an HTML page Generally: <tag> content </tag>
content is processed/displayed according to the meaning of tag
Tags may be nested <tag> content <tag2> more </tag2> more </tag> Nesting must be "balanced"
Tags with no content can optionally close themselves E.g. <br /> same as <br> </br>
![Page 6: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/6.jpg)
More On Tags
Tags are not case-sensitive <html> = <HTML> = <hTmL> Lower case is preferred
Tags often contain attributes Specify specific behavior for tag Attribute values contained in “”s E.g. <table border="0">
![Page 7: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/7.jpg)
HTML Skeleton Page
html indicates the type of markup used
head contains header information title gives page title
(window title bar)
body contains main content
<html><head>
<title> </title></head><body></body></html>
![Page 8: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/8.jpg)
Our First Page
Defines an HTML greeting page <html>
Sets Title Bar text <title>
Display Paragraph <p>
White space ignored by browser
<html><head> <title> My First Page </title></head><body> <p> Hello World! Welcome to CS301 </p></body></html>
Output: Hello World! Welcome to CS301
![Page 9: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/9.jpg)
HTML Tags
Headings: <h1>, <h2>, …, <h6> Various headings in your document
E.g. title <h1>, chapters <h2>, sections <h3>,subsections <h4>
Paragraphs: <p> Define new paragraph New line before and after
Line break: <br> New line, but not new paragraph
Horizontal rule: <hr> Draw horizontal line across page
Comment: <!-- … --> Ignored by browser
![Page 10: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/10.jpg)
Example<html><head> <title>Cinderella</title></head><body> <h1>Cinderella</h1> <!-- subtitle --> or, <b>The Little Glass Slipper</b> <h2>Chapter 1</h2> <hr /> <p> There lived once a gentleman who married for his second wife the proudest woman ever seen. She had two daughters of the same spirit, who were indeed like her in all things. … </p> <p> No sooner was the wedding over than the stepmother began to show her ill-temper; she could not bear her young step-daughter's gentle ways, … </p> <br /> <h6>credit to www.childrensbooksonline.org</h6></body></html>
Cinderella, version 1
![Page 11: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/11.jpg)
Text-formatting TagsMany formatting tags in HTML
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
![Page 12: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/12.jpg)
HTML Links
Linking to other pages is the point of the InternetAnchor: <a> Common attributes:
href – destination pagetarget – Where to open page (e.g. target="_blank" opens a new browser window)name – Anchor on this page
Examples: <a href="http://www.whitworth.edu" target="_blank">Go
to our school!</a> <a name="start"/> <a href="mypage.htm#start">Go to start</a>
![Page 13: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/13.jpg)
Example, refined…<body> <a name="top"> <h1>Cinderella</h1> </a> <a href="cinderella2.htm#para1">Paragraph #1</a><br> <a href="cinderella2.htm#para2">Paragraph #2</a><br> <a href="cinderella2.htm#credits">Credits</a><br> <a name="para1" /> <p> … </p> <p><a href="cinderella2.htm#top">Back to top</a></p> <a name="para2"/> <p> … </p> <p><a href="cinderella2.htm#top">Back to top</a></p> <a name="credits"/> <br/><h6>credit to <a href="http://www.childrensbooksonline.org" target="_blank"> Children’s Online Books </a> </h6> <p><a href="cinderella2.htm#top">Back to top</a></p></body>
Cinderella, version 2
![Page 14: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/14.jpg)
Tables
We want to display tabular data
Tags: <table> Define a table
Attributes: border – border thickness <tr> Define a table row <td> Define table data
Attributes: colspan – # of columns to cover with this data rowspan – # of rows to cover with this data
<th> Define table heading
![Page 15: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/15.jpg)
Example
<html><head> <title> Cast for Cinderella </title></head><body> <p> Cast of voices for Disney's Cinderella (1950) </p>
<table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr> <tr><td>Lady Tremaine</td><td>Eleanor Audley</td></tr> <tr><td>Drizella</td><td>Rhoda Williams</td></tr> <tr><td>Anastasia</td><td>Lucille Bliss</td></tr> </table></body></html>
Cinderella cast
![Page 16: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/16.jpg)
Lists
Display a marked list of items
Unordered List: <ul> <li>: list item
Ordered List: <ol> <li>: list item
Definition List: <dl> <dt>: Dictionary Term <dd>: Dictionary Definition
![Page 17: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/17.jpg)
Example Conferences: <ul> <li>NFC East</li> <li>NFC North</li> … </ul>
Standings: <ul> <li>NFC East <ol> <li>(*) NY Giants</li> <li>(x) Philadelphia</li> <li>Dallas</li> <li>Washington</li> </ol></li> … </ul> <dl> <dt>x</dt><dd>clinched playoff</dd> <dt>z</dt><dd>clinched division</dd> <dt>*</dt><dd>clinched homefield through playoffs</dd> </dl>
NFL Standings
![Page 18: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/18.jpg)
Images
Text is boring
Images make a web site more interesting
Tag: <img> Attributes: src, alt
src is a URL
alt is for text-only browsers, "hovering"
![Page 19: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/19.jpg)
Example Conferences: <ul>
<li><img src="NFC.gif">NFC <ul> <li>NFC East</li> <li>NFC North</li> <li>NFC South</li> <li>NFC West</li> </ul> </li> <li><img src="AFC.gif">AFC <ul> <li>AFC East</li> <li>AFC North</li> <li>AFC South</li> <li>AFC West</li> </ul></li> </ul>
Standings: <ol> <li><img src="SEA.gif">(x) Seattle</li> <li><img src="STL.gif">St. Louis</li> <li><img src="ARI.gif">Arizona</li> <li><img src="SF.gif">San Francisco</li> </ol> Enhanced NFL Standings
![Page 20: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/20.jpg)
Images as Links
We've seen how to link to other pages <a href="http://www.whitworth.edu">Go to Whitworth</a>
We've also seen how to put images on the screen <img src="WhitworthLogo.gif" />
We can put the two together <a href="http://www.whitworth.edu"> <img src="WhitworthLogo.gif" /> </a>
<a href="http://www.whitworth.edu"> <img src="WhitworthLogo.gif" /> Go! <img src="WhitworthLogo.gif" /> </a>
![Page 21: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/21.jpg)
HTML <div> tag
Defines a generic container Allows us to set up tags as a group
(e.g. menu bar, image list, …)
Attributes align (left, center, right, justify) class
![Page 22: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/22.jpg)
Example<html><head><title>Cast for Cinderella</title></head><body> <p>Cast of voices for Disney's Cinderella (1950)</p> <div align="left"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr>… </table></div>
<div align="center"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr>… </table></div>
<div align="right"> <table border="1"> <tr><th>CHARACTER</th><th>VOICE TALENT</th></tr> <tr><td>Cinderella</td><td>Ilene Woods</td></tr>… </table></div></body></html> Cast_div
![Page 23: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/23.jpg)
HTML Forms
Many Internet applications require user input E.g. Search engine pages, customer support,
Blogs
HTML uses forms to set up user input Many different form controls
Tag <form> begins a form section Attributes: name, action, method, id
![Page 24: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/24.jpg)
Form Input Objects
Forms need objects to get information from usersUsually use <input> tag Attributes: name, type, value, id
Type attribute specifies the kind of input object submit, text, textarea, checkbox, radio, …
![Page 25: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/25.jpg)
Simple form – search engine page
<html><head> <title>Search the Internet</title></head><body> <h1>CS301 -- Internet Search Page</h1> <!-- for now, don't do anything --> <form> Search for: <!-- text box for user search query --> <input type="text" name="q" /> <!-- submit button to send the query --> <input type="submit" name="submitbtn" value="Press here!" /> </form></body></html>
Initial Search Page
![Page 26: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/26.jpg)
A simple Exercise
Design a form Get the user's name and password in a
textbox (e.g. <input type="text" name="user" />)
Include a "submit" button(e.g. <input type="submit" name="submitbtn"
value="Press here" /> )
![Page 27: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/27.jpg)
Form options
Our form doesn’t (yet) do anythingWe need to direct its values to some destination site Once the user hits the submit button
action, method attributes of <form> specify this action: URL to destination site method: how to send the data (get, post)
Example:<form action="mydest.htm" method="get">
Search Page #2
![Page 28: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/28.jpg)
Example<html><head> <title>Search the Internet</title></head><body> <h1>CS301 -- Internet Search Page</h1> <table border="0"> <tr><td><big>Powered by:</big></td> <td><img src="http://www.google.com/intl/en/logos/Logo_25wht.gif"> </td> </tr> </table> <!-- give a destination URL for this form --> <form action="http://www.google.com/search" method="get"> Search for: <input type="text" name="q" /> <input type="submit" value="submit" /> </form></body></html>
![Page 29: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/29.jpg)
Form Methods
The method attribute accepts two values, get and postget Submitted URL contains name/value pairs for each
control on web page Users bookmarks contain query answers Users see URL – security issues?post Submitted URL does not contain control values User bookmarks do not keep query results Users do not see URL
![Page 30: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/30.jpg)
Form Controls
Forms must have more than text boxes and buttonsWe want check boxes, radio buttons, password fields, multi-line fields, …
HTML provides all of these with the <input> tag Using the type attribute to choose the control Use the name attribute to name it (for later)
![Page 31: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/31.jpg)
Text Boxes
Text field: <input type="text" Default (but don’t rely on it)
Password: <input type="password" Uses ‘*’ for each input character Should you use get or post?
Multi-line field: Tag <textarea> Not <input type=…> Attributes name, rows, cols
Text Box Controls
![Page 32: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/32.jpg)
Example<html><head> <title>PHP Self Description</title></head><body> <form action="thanks.htm" method="POST"> Name: <input type="textbox" name="name" /> <br />Password: <input type="password" name="password" /> <br />Description: <textarea rows="10" cols="30" name="description"> </textarea> <br /><input type="submit" value="submit" /> </form></body></html>
![Page 33: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/33.jpg)
Buttons
Submit: <input type="submit" Submit form information to action URL
Reset: <input type="reset" Clear out information on form
Radio: <input type="radio" Option buttons (choose one)
Checkbox: <input type="checkbox" Choose zero or more options
Button Controls
![Page 34: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/34.jpg)
Example
<form action="thanks.htm" method="get"> Search for: <input type="text" name="q" />
<br /> Choose a search engine: <br /><input type="radio" name="engine" value="google" checked="checked" /> Google <br /><input type="radio" name="engine" value="yahoo" /> Yahoo <br /><input type="radio" name="engine" value="A9" /> A9 <br /><input type="checkbox" name="new" checked="checked" /> Checkbox that does nothing (sorry)
<br /><input type="reset" text="clear" /> <input type="submit" value="submit" /></form>
![Page 35: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/35.jpg)
List Boxes
Drop-down list: <select> Give user list of options Attribute name defines control name
<option> to define each option Attributes: value, selected
New Search Page
![Page 36: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/36.jpg)
Example<form action="thanks.htm" method="get"> Search for: <input type="text" name="q" /> <br /> Choose a search engine: <br /> <select name="engine"> <option value="google" selected="selected"> Google </option> <option value="yahoo"> Yahoo </option> <option value="A9"> A9 </option> </select> <br /> <input type="checkbox" name="new" checked="checked" /> Checkbox that does nothing (sorry) <br /><input type="reset" text="clear" /> <input type="submit" value="submit" /></form>
![Page 37: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/37.jpg)
Page and Form Layout
Common use for HTML tables is for page layout Generally, programmers have no layout control over
their pages E.g. 2-column newspaper
We’ll see later that <div> is also very useful, especially with CSS
border="0" (why?)td supports width, bgcolor, colspan attributes
![Page 38: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/38.jpg)
Making Forms More Readable
Example: Form for a restaurant survey
Need to rate things on scale of 1-5 Service Food quality Price
Layout
![Page 39: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/39.jpg)
Example<html><head> <title>Restaurant Survey</title></head><body bgcolor="lightyellow"> <h1>Thank you!</h1> <p>Please fill out this survey</p> <form action="thanks.htm"> <table> <tr><th> </th><th colspan="2">Lowest</th> <th> </th><th colspan="2">Highest</th></tr> <tr><th> </th><th>1</th><th>2</th> <th>3</th><th>4</th><th>5</th></tr> <tr><td>Service</td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td> <td><input type="radio" name="service"/></td></tr> <input type="submit" value="submit"/> </table> </form></body></html>
![Page 40: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/40.jpg)
Now we need the DIV and SPAN tags
Recall <div> marks areas with a name<span> is similar, but works within a tag
<div class="header"> <img class="watermark" src="WUcolorMarkOnly.jpg" width="150" height="150" alt="Whitworth - Founded 1890"> <img class="logo" src="whit_main_logotype.gif" width="326" height="137" alt="Whitworth - An Education of Mind & Heart"> <p class="caption">Classroom Research conducted by Students in the Math and Computer Science Department at Whitworth University</p></div>
We will see that, by marking groups, we can easily make display changes
<span class="journaltitle"><a name="CS374_2008">Fall 2008 -- CS374: Database Management Systems</a></span><span class="editor">Edited by Peter A. Tucker</span><br>Austin Abelar, <a href="2008/CS374/Abelar.pdf">Parallel Query Processing Using Various Techniques of Multicore Technology</a><br>
![Page 41: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/41.jpg)
What is CSS
CSS – Cascading Style SheetsProblem: HTML developers have little control of how things look Modifying a page’s format through HTML can be very
messySolution: Cascading style sheets tell the browser how to display objects
Style sheets can be embedded in the HTML file or saved externally
![Page 42: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/42.jpg)
CSS Syntax
Values in a style sheet have the following syntax:selector {property: value}
Where: selector: the HTML tag to specify property: the property of tag to set value: the new value for that tag’s property Semi-colon delimited list
(tag {p1: v1; p2: v2; …})
![Page 43: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/43.jpg)
Examples
p {color: green} Make contents of <p> green typeface
p { text-align: center; color: green} Multiple property settings (<p> centered, green)
h1,h2,h3,h4,h5,h6,p { text-align: center; color: green} Grouping of multiple tags
![Page 44: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/44.jpg)
Applying CSS
Embedded in HTML page (Internal)
• Linked into HTML page (External)
<head> <title>Simple CSS Test</title> <style type="text/css"> h1,h2,h3,h4,h5,h6,p {text-align: center; color: green} </style></head>
<head> <title>Simple CSS Test</title> <link rel="stylesheet" type="text/css" href="simple.css" /></head>
h1,h2,h3,h4,h5,h6,p {text-align: center; color: green}
![Page 45: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/45.jpg)
A simple Exercise
Construct a style sheet internally to one of your existing web pages Choose tags, and some color Reload it in a browser
Construct an external style sheet Write it using any text editor
(notepad, Expression Web, VS.NET, …) Link it into another one of your existing web pages
![Page 46: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/46.jpg)
CSS Classes
We may not want a single style for all instances of a tag E.g. <p> is very common
Classes specify different kinds of styles for a tag Syntax: selector.class {prop: val}
Usage:
Both selector and class are optional Missing selector: applies to all tags with class=“c” Missing class: applies to all instances of a tag
p.right {text-align: right}p.center {text-align: center}
<p class="right"> Right-aligned </p><p class="center"> Centered </p>
![Page 47: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/47.jpg)
Example<html><head> <title>Simple CSS Test</title> <style type="text/css"> .global {color: darkred} p {color: green} p.center {text-align: center} p.right {text-align: right} p.left {text-align: left} </style></head><body> <h1 class="global">Heading for this page</h1> <p class="center">Cool Main Title in the Center</p> <p class="left">Interesting text on the left</p> <p class="right">other stuff on the right</p> <h4>is this blue?</h4></body></html>
Classes
![Page 48: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/48.jpg)
Inline Styles
We can also embed styles into a single tag We lose many advantages of style sheets Limited use
Syntax: <tag style="p1:v1; p2:v2">
Example:<p style="color: sienna; margin-left: 20px"> This is a paragraph</p>
![Page 49: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/49.jpg)
Which style to choose
Possible conflict of styles external vs. internal vs. inline
Order:1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)
![Page 50: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/50.jpg)
OK, Now We Need Specifics
We know how to use CSS
Real Power – one CSS file controls pages on entire site Easy to update entire look
What are the possibilities? What properties can be set for various tags?
![Page 51: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/51.jpg)
BackgroundProperty Description Valuesbackground-attachment Does background
image scroll?scroll
fixed
background-color Background color color-rgb
color-#
color-name
transparent
background-image URL to image url
background-position Position of background image
top right
top left
…
background-repeat Is image repeated? How?
repeat
repeat-x
…
![Page 52: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/52.jpg)
Example<html><head> <title>Simple CSS Test</title> <style type="text/css"> p.bcolor {background-color: lightgrey} p.bgimage { background-image: url('main_logo.gif'); background-position: center; background-repeat: no-repeat; } </style></head><body> <h1>CSS TEST</h1> <p class="bcolor">This is a simple test of style sheets</p> <p class="bgimage">This is <br> another <br> simple <br> test <br> of style <br> sheets</p></body></html>
Backgrounds
![Page 53: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/53.jpg)
Another Example<html><head> <title>Simple CSS Test</title> <style type="text/css"> p.lgrey {background-color: lightgrey} p.orange { text-align: center; color: orange; font-weight: bolder; } body { background-image: url('http://www.whitworth.edu/…/Logo.gif'); background-position: center; background-repeat: no-repeat; }</style></head><body> <h1>CSS TEST</h1> <p class="lgrey">This is a simple test of style sheets</p> <p class="orange">This is <br> another <br> simple <br> test <br> of style <br> sheets</p></body></html> Background2
![Page 54: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/54.jpg)
ExerciseExperiment with the background settings Use different browsers
Property Description Values
background-attachment Does background image scroll?
scroll
fixed
background-color Background color color-rgb
color-#
color-name
transparent
background-image URL to image url
background-position Position of background image
top right
top left
…
background-repeat Is image repeated? How?
repeat
repeat-x
…
![Page 55: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/55.jpg)
Text
Property Description Valuescolor Text color color-rgb
color-#
color-name
letter-spacing Spacing between letters
normal
Length
text-align Aligns text in element
left
right
center
justified
word-spacing Spacing between words
normal
length
![Page 56: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/56.jpg)
Example
<html><head> <title>Simple CSS Test</title> <style type="text/css"> p.squish {letter-spacing: -5px} p.expand {letter-spacing: 25px} p.wrdspace { word-spacing: 20px} </style></head><body> <h1>CSS TEST</h1> <p class="squish">This is a simple test</p> <p class="expand">This is a simple test</p> <p class="wrdspace">This is another simple test</p></body></html>
Texts
![Page 57: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/57.jpg)
Exercise
Experiment with the text settings
Property Description Values
color Text color color-rgb
color-#
color-name
letter-spacing Spacing between letters normal
Length
text-align Aligns text in element left
right
center
justified
word-spacing Spacing between words normal
length
![Page 58: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/58.jpg)
FontProperty Description Valuesfont-family Prioritized,
comma-separated list of font names
family-name
generic-name
font-size Size of font xx-small
…
xx-large
font-style Style of font normal
italic
oblique
font-variant Small-caps? normal
small-caps
font-weight Weight of a font normal
bold
bolder
lighter
![Page 59: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/59.jpg)
Example<html><head> <title>Simple CSS Test</title> <style type="text/css"> body {font-family:"Bookman Old Style", Arial, Helvetica, sans-serif} p.ariel {font-family: sans-serif} p.code {font-family: courier} </style></head><body> <h1>CSS TEST</h1> <p class="ariel">This is a simple test of style sheets</p> <p class="code">This is a simple test of style sheets</p> <p>This is another simple test of style sheets</p></body></html>
Fonts
![Page 60: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/60.jpg)
Exercise
Experiment with the font settingsProperty Description Values
font-family Prioritized, comma-separated list of font names
family-name
generic-name
font-size Size of font xx-small
…
xx-large
font-style Style of font normal
italic
oblique
font-variant Small-caps? normal
small-caps
font-weight Weight of a font normal bold
bolder lighter
![Page 61: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/61.jpg)
BorderProperty Description Valuesborder-color Color for border color
border-style Style for border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width Width of all four borders
thin
medium
thick
border-XXXX-YYYY Specific border settings
XXXX={left, right, top, bottom}
YYYY={color, style, width}
![Page 62: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/62.jpg)
Example<html><head> <title>Simple CSS Test</title> <style type="text/css"> th { border-width: thick; border-style: ridge; } td { border-style: dashed; border-color: darkslategray; } p { border-bottom-style: outset; background-color: lightyellow; color: darkslategray;} </style></head><body> <p>CS301 - Internet Application Development</p> <table> <tr> <th>Title</th> <th>Author</th> <th>Track</th> </tr> <tr> <td>Foundation Flash CS3 for Designers</td> <td>T. Green, D. Stiller</td> <td>Flash</th> </tr> <tr> <td>ASP.NET 3.5 Unleashed</td> <td>S. Walther</td> <td>ASP.NET</th> </tr> </table></body></html>
Borders
![Page 63: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/63.jpg)
Exercise
Experiment with borders
Property Description Values
border-color Color for border color
border-style Style for border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-width Width of all four borders
thin
medium
thick
border-XXXX-YYYY Specific border settings XXXX={left, right, top, bottom}
YYYY={color, style, width}
![Page 64: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/64.jpg)
ListsProperty Description Valueslist-style-image Image for items
in a listnone
url
list-style-position Where marker should be located
inside
outside
list-style-type Type of marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman,lower-alpha,upper-alpha,lower-greek,lower-latin,upper-latin, hebrew, armenian, georgian, cjk-ideographic,hiragana, katakana
![Page 65: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/65.jpg)
Example<html><head> <title>NFL Standings</title> <style type="text/css"> ul {list-style-type: hebrew } ul.nfc {list-style-image: url('NFC.gif')} ul.afc {list-style-image: url('AFC.gif')} </style></head><body> <h1>NFL Standings as of 21 December 2006</h1> Conferences: <ul> <li>NFC<ul class="nfc"> <li>NFC East</li> <li>NFC North</li> <li>NFC South</li> <li>NFC West</li> </ul></li> <li>AFC<ul class="afc"> <li>AFC East</li> <li>AFC North</li> <li>AFC South</li> <li>AFC West</li> </ul></li> </ul> Lists
![Page 66: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/66.jpg)
Exercise
Experiment with listsProperty Description Values
list-style-image Image for items in a list
none
url
list-style-position Where marker should be located
inside
outside
list-style-type Type of marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman,lower-alpha,upper-alpha,lower-greek,lower-latin,upper-latin, hebrew, armenian, georgian, cjk-ideographic,hiragana, katakana
![Page 67: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/67.jpg)
Dimension
Property Description Valuesheight Height of an
imageauto
length
%
width Width of an image
auto
length
%
line-height Height of lines normal
number
length
%
![Page 68: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/68.jpg)
Example<html><head> <title>Simple CSS Test</title></head><body> <h1 style="text-align: center; color: darkred">Go!</h1> <p style="text-align: center"> <img src="main_logo.gif"></img> </p> <p style="text-align: center"> <img src="main_logo.gif" style="width: 50; height: 50"> </img> <img src="main_logo.gif" style="width: 100; height: 100"> </img> <img src="main_logo.gif" style="width: 150; height: 150"> </img> <img src="main_logo.gif" style="width: 200; height: 200"> </img> </p></body></html>
Dimensions
![Page 69: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/69.jpg)
Pseudo-classes
Some selectors can have special effects
Anchor (<a>) is one such selector It supports link, visited, hover and active Note: a:hover MUST come after a:link Note: a:active MUST come after a:hover
We may want different behaviors for each case
Syntax: selector:pseudo-class {property: value} selector.class:pseudo-class {property: value}
![Page 70: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/70.jpg)
Example 1<html><head>
<style type="text/css">a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="http://www.whitworth.edu">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p>
</body></html>
anchor1
![Page 71: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/71.jpg)
Example 2<html><head><style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%}
a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66}
a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace}</style></head>
<body><p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp">changes color</a></b></p><p><b><a class="two" href="default.asp" >changes font-size</a></b></p><p><b><a class="three" href="default.asp">changes background-color</a></b></p><p><b><a class="four" href="default.asp">changes font-family</a></b></p></body></html> anchor2
![Page 72: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/72.jpg)
Final word on div tag
The <div> tag allows positioning of a group of HTML elements
.classes { position:fixed; width:170px; top:250px; font-style:oblique;}
.papers { text-align:left; position:relative; left:190px;}
<div class="classes"><p> <a href="#top">top</a> <br> <a href="#CS374_2008">CS374: Fall 2008</a> <br> <a href="#CS499_2008">CS499: Spring 2008</a> <br> <a href="#CS374_2007">CS374: Fall 2007</a> <br> <a href="#CS374_2006">CS374: Fall 2006</a> <br> <a href="#MA430_2006">MA430W: Spring 2006</a><br> <a href="#CS499_2006">CS499: Spring 2006</a> <br> <a href="#CS374_2005">CS374: Fall 2005</a> <br></p></div>
<div class="papers">…
</div>
![Page 73: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/73.jpg)
Final word on span tag
The <span> tag also allows you to apply classes within a tag No effect on style of text (<div> includes <p>)
.journaltitle {font-size:large;font-weight:bold;color:black;font-variant:small-caps;
}
.editor {font-size:small;font-style:italic;font-variant:small-caps;color:black;
}
<span class="journaltitle"> <a name="CS374_2008">Fall 2008 -- CS374: Database Management Systems </a></span><span class="editor">Edited by <a href="http://www.whitworth.edu/..."> Peter A. Tucker </a></span><br>
![Page 74: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/74.jpg)
Server basics
HTML file is requested by userRequest travels over internetInternet server locates file and responds
InternetInternet
InternetServer
Software
file.html<html><body> <p>Hello World!</p></script></body></html>
![Page 75: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/75.jpg)
JavaScript Basics
JavaScript is a simple programming language It is not Java
JavaScript is embedded in HTML
Most browsers support JavaScript Though not all!
![Page 76: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/76.jpg)
What can we do in JavaScript?
JavaScript is a programming language for HTML developers Like us
JavaScript can … dynamically put text into an HTML page react to events read and write HTML elements be used to validate data
![Page 77: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/77.jpg)
Embedding JavaScript
JavaScript is embedded anywhere in HTML using the <script> tagFor now, we will only put code in the <body> section We’ll see other options later
For example, the following outputs “Hello World!” on a web page:
<html><body><script type="text/javascript">
document.write("<p>Hello World!</p>");</script></body></html>
![Page 78: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/78.jpg)
Input Validation
OK, now for the most common use for JavaScript
A form has a number of fieldsSome are required, others are notIf we send all the data to the server, then validate, we waste time If there is invalid input, then we should try to catch it
before going to the server
JavaScript can do this for us
![Page 79: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/79.jpg)
JavaScript Input Validation
Requirements JavaScript function that:
returns true if all inputs are valid
returns false if any input is invalid
Form has a name associated with it Form uses the JavaScript function for its
onSubmit event<form name="myform" … onSubmit="return fn()">
Input control values can be accessed in JavaScript:document.myform.myinput.value
![Page 80: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/80.jpg)
Example<html><head> <title>Personal Information</title> <script language="JavaScript"> function validate_email() { if (document.email_addr.email.value == ""){ alert("Email must be filled out!") document.email_addr.email.focus() return false } else { return true } } </script></head><body> <form name="email_addr" action="thanks.htm" action="get" onsubmit="return validate_email()"> Email: <input type="text" name="email"/> <input type="submit" value="submit"/> </form></body></html>
![Page 81: HTML,CSS & Javascript by P.Usha Associate Professor, Department of Information Technology, B.S. Abdur Rahman University](https://reader033.vdocuments.us/reader033/viewer/2022051621/56649eb75503460f94bc0903/html5/thumbnails/81.jpg)
THANK YOU