Transcript
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
<a href=“http://www.google.com”>This is a link</a>
Links
• Anchors are inline elements• May only contain text and other inline
elements.
<a href=“http://www.google.com”><img src=“…” /></a>
<a href=“http://www.google.com”>This is a link</a>
Links: href attribute
• href attribute provides the address of the page (its URL) to the browser
• 2 ways to specific URL
Links: href attribute
• Absolute URL – Provide the full URL for the document, including
the protocol (http://)
<a href=“http://www.google.com”>This is a link</a>
Links: href attribute
• 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
body {font-size: 14px;
}h1 {
font-size: 150%;}
Percentage tells the font how big it should be relative to another font size.
Font Sizes
body {font-size: 14px;
}h1 {
font-size: 150%;}h2 {
font-size: 1.2em;}
Similar to em. Specifies a scaling factor.
Font Sizes
Font Sizes
body {font-size: small;
}
top related