1. Tutorial 1.3 Using Element Attributes

2. Using Element Attributes
Attributes – tags that control the use, behavior, and in some cases the appearance, of elements in the document
Attributes are inserted within the tag brackets
<element attribute1=“value1” attribute2=“value2” …>content</element>
New Perspectives on HTML and XHTML, 5e

3. The Style Attribute
Use the style attribute to control the appearance of an element, such as text alignment
The text-align style tells the browser how to horizontally align the contents of an element
The color style tells the browser to render the text in a certain color
New Perspectives on HTML and XHTML, 5e

4. The Style Attribute
New Perspectives on HTML and XHTML, 5e

5. The Style Attribute
New Perspectives on HTML and XHTML, 5e

6. Practice: Style Attributes
Within the opening <h1> tag:
<h1 style=“text-align: center; color: red”>Dave’s Devil Sticks </h1>
<address style=“text-align: center”>Dave’s Devil Sticks
541 West Highland Dr.
Auburn, ME 04210
(207)
</address>
New Perspectives on HTML and XHTML, Comprehensive

7. Presentational Attributes
Early versions of HTML were used mostly by scientists and researchers, and did not require flashy graphics, various fonts, or color.
This changed as the Web became more popular
Presentational attributes – attributes that specifically describe how any element should be rendered
Ex: alignment
Almost all presentational attributes are now deprecated in favor of styles
New Perspectives on HTML and XHTML, 5e

8. Working with Empty Elements
An empty element contains no content
Empty elements appear in code as one-sided tags
<element />
The one-sided tag to mark a line break is
<br />
The horizontal rule element places a horizontal line across the Web page
<hr />
New Perspectives on HTML and XHTML, 5e

9. Practice: Adding product descriptions
Within the product list:
New Perspectives on HTML and XHTML, Comprehensive

10. Practice: Adding line breaks
Within the product list:
Insert a <br /> tag directly after the closing </b> tag for each of the product names
Ex:
<li><b>Basic Stick</b><br />
New Perspectives on HTML and XHTML, Comprehensive

11. Practice: Adding horizontal rules End of day
New Perspectives on HTML and XHTML, 5e

12. Working with Empty Elements
To display a graphic, you insert an inline image into the page. An inline image displays a graphic image located in a separate file within the page
<img src="file" alt="text" />
New Perspectives on HTML and XHTML, 5e

13. Practice: Adding an inline image
Go to Google Classroom and download the file “logo.jpg”
Save/copy this file into your Internet / Web Page Design folder (must be the same folder where you have dave-yourname.htm saved)
In your h1 element delete the text Dave’s Devil Sticks. Then add the following line of code:
New Perspectives on HTML and XHTML, Comprehensive

14. Working with Empty Elements
New Perspectives on HTML and XHTML, 5e

15. Working with Character Sets and Special Characters
Character sets – collection of characters and symbols
ASCII (American Standard Code for Information Interchange) – character set representing the alphabet of English characters
Latin-1/ISO – more extended character set supports 255 characters and can be used by most languages that employ Latin alphabet
Unicode – most extended character set (65,536 symbols)
UTF-8 – most commonly used character set on Web
New Perspectives on HTML and XHTML, 5e

16. Working with Character Sets and Special Characters
To store a character set, browsers need to associate each symbol with a number in a process called character encoding – process by which a browser associates a symbol with a number and visa-versa
Another way to insert a special symbol is to use a character entity reference, in which a short memorable name is used in place of the numeric character reference
New Perspectives on HTML and XHTML, 5e

17. Working with Character Sets and Special Characters
New Perspectives on HTML and XHTML, 5e

18. Working with Character Sets and Special Characters
New Perspectives on HTML and XHTML, 5e

19. Practice: Adding character references End of day
New Perspectives on HTML and XHTML, 5e