Tutorial 1.3 Using Element Attributes

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

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

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

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

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) 555-9001 </address> New Perspectives on HTML and XHTML, Comprehensive

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

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

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

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

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

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

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

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

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 8859-1 – 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

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

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

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

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