Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class

Learning HTML

HTML Attributes• HTML elements can have attributes• Attributes provide additional information about an element

Class – specifies a class name for an elementId – specifies a unique id for an elementStyle – specifies inline style for an element

<td style=“font-family:arial>This text is arial</td>

<td style=“color:#000000”>This text is black</td>

Formatting and Borders<b> This text is bold</b> <strong>This text is strong</strong>

<i>This text is italicized</i><em>This text is emphasized</em>

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"

Getting Started…• HTML stands for Hyper Text Markup Language• HTML tags are keywords surrounded by angle brackets like <html>• HTML tags normally come in pairs like <b> and </b>• Start and end tags are also called opening tags and closing tags

Basic HTML

<html>< body>

< h1>Title</h1>

< p>Body copy – first paragraph</p>< p>Body copy – second paragraph</p>

< /body>< /html>

Basic Table

<table> <tbody> <tr> <td>This is a basic table</td> </tr> </tbody></table>

<table>Defines a table<tbody>Groups the body content in a table<tr>Defines a table row<td> Defines a table cell

Additional Basic Tables<table> <tbody> <tr> <td>This is a table with two columns</td> <td>This is the second column</td> </tr> </tbody></table>

<table> <tbody> <tr> <td>This is a table with two rows</td> </tr> <tr> <td>This is the second row</td> </tr> </tbody></table>

Links and images

Basic link:<a href=“http://www.google.com”>Link to google</a>

…looks like Link to google

Basic image tags:Relative URL: <img src=“/image.jpg” />Absolute URL: <img src=“http://media.mcknights.com/image.jpg” />

*we will always need absolute URL’s from clients

<img src=“http://www.google.com/image.jpg" alt=“Google" width="300" height=“200" />

This image has a specified width and height. When scrolled over, it will say “Google”.

Lists

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.

<td style=“background-color: #000000>This td has a black background</td>

#000000

#FFFFFF

#FF0000

#FFFF00

Use of DIV’s• The div element is a block level element used for grouping HTML

elements.

Examples:

<div style=“background-color:#359069; width:100px”>Content</div>

<div id=“footer”>Footer text would go here</div>

HTML StylesThere 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.

<html> <body> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> <table> <tr><td>Background color is yellow, font is blue. Pulling from styles above.</td> </tr> </table> </body> </html>

<html> <body> <head> </head> <table> <tr><td style="background-color:yellow; color:#fdgj0g">Background color is

yellow, font is blue. Styles are included right here.</td> </tr> </table> </body> </html>

CSS Styling

Inline Styling

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

Documents

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class