Pres

Building and Marketing Websites

Marketing

• Google advertising– Search

• PPC / CPC

• CPA– Cost per action– “action” can be mean different things

More HTML elements

Links , Tables

Links

<a href=“http://www.google.com”>This is a link</a>

Links

• href attribute required• Specifies destination of the link

• Content of element acts as a label for the link. • In the browser the label appears with an

underline to indicate you can click on it


Links

• Anchors are inline elements• May only contain text and other inline

elements.

<a href=“http://www.google.com”><img src=“…” /></a>


Links: href attribute

• href attribute provides the address of the page (its URL) to the browser

• 2 ways to specific URL


• Absolute URL – Provide the full URL for the document, including

the protocol (http://)



• Relative URL– Can be used when you are linking to another

document on your own site (i.e., on the same server).

<a href=“test.html”>This is a link</a>

Tables

Tables

Tables

• Rows– tr = table row

• Cells:– th = table header– td = table data

• Actual content goes into cells

Tables

• What about columns?

– The number of columns in a table is determined by the number of cells in each row

– Make sure you have the same number of cells in each row!

Back to CSS

Inheritance

• Elements pass down certain style properties to the elements they contain

Classes

Used to classify elements into a conceptual group.

<html><head>

<title>Simple Website</title> </head><body>

<h1>Welcome</h1><p class=“green”>This is a

demonstration.</p><p>Business as usual</p>

</body></html>

Font Sizes

body {font-size: 14px;

}

Font Sizes


}h1 {

font-size: 150%;}

Percentage tells the font how big it should be relative to another font size.

Font Sizes


}h1 {

font-size: 150%;}h2 {

font-size: 1.2em;}

Similar to em. Specifies a scaling factor.

Font Sizes

Font Sizes

body {font-size: small;

}

Pres

Technology