1. Learning HTML

2. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class name for an element Id – specifies a unique id for an element Style – specifies inline style for an element This text is arial This text is black

3. Formatting and Borders This text is bold This text is strong This text is italicized This text is emphasized A commonly used and web acceptable CSS way to code the border is: style="border: 1px solid #000000" However, the shorthand style will cause problems with several popular email clients. You can code the exact same border more reliably with the following syntax: style="border-style:solid; border-color:#000000; border-width:1px"

4. Getting Started… HTML stands for Hyper Text Markup Language HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and Start and end tags are also called opening tags and closing tags

5. Basic HTML Title Body copy – first paragraph Body copy – second paragraph

6. Basic Table This is a basic table Defines a table Groups the body content in a table Defines a table row Defines a table cell

7. Additional Basic Tables This is a table with two columns This is the second column This is a table with two rows This is the second row

8. Links and images Basic link: Link to google …looks like Link to google Basic image tags: Relative URL: Absolute URL: *we will always need absolute URL’s from clients This image has a specified width and height. When scrolled over, it will say “Google”.

9. Lists

10. HTML Colors HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. This td has a black background #000000 #FFFFFF #FF0000 #FFFF00

11. Use of DIV’s The div element is a block level element used for grouping HTML elements. Examples: Content Footer text would go here

12. HTML Styles There are three ways of inserting a style sheet: External style sheet (Ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file.) Internal style sheet (Can be used if one single document has a unique style.) Inline styles (Can be used if a unique style is to be applied to one single occurrence of an element.) *In an email message it is common for information in the head tag of the code to be stripped out completely, so an embedded style sheet will not work. Due to the nature of email, reference to an external style sheet absolutely will not work with most email clients.

13. body {background-color:yellow;} p {color:blue;} Background color is yellow, font is blue. Pulling from styles above. Background color is yellow, font is blue. Styles are included right here. CSS Styling Inline Styling

14. Email Adjustments Avoid CSS Avoid DIV or SPAN tags Do not use Flash, JavaScript or forms Host all images - do not attach images Do not use background images Specify the width and height of all images Margins are ignored for images. Float style is ignored - use align="left" or align="right" instead