1. Building and Marketing Websites

2. Marketing
• Landing page
– Page people go to after they click on ad
Landing PageFacebook Ad

3. HTML Elements
Links
Tables

4. 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>

5. 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>

6. 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>

7. Tables
• Rows
– tr = table row
• Cells:
– th = table header
– td = table data
• Actual content goes into cells

9. CSS Review
<style type=“text/css”>
</style>

10. Font Sizes

11. Font Sizes
body {
font-size: small;
}

12. Classes
Used to classify elements into a
conceptual group.

13. New Topics

14. Color
• Computers create the colors you see on a
monitor by combining three colors: red,
green, and blue
• You can create a recipe for a color by telling
the computer how much of the three to mix in

15. White
Color

16. Color
• Amount of color is described on a scale from
0 (none) to 255 (full-blast)
• Can also be provided as a percent
– 100% = 255

18. Any color you see on your monitor can be
described by a series of three numbers: a red
value, a green value, and a blue value.

19. Ways to specify color
• By name

20. Ways to specify color
• By red, green, blue values

21. =
80% of 255 is 204,
40% of 255 is 102, and
0% of 255 is 0.

22. Ways to specify color
• By “hex code”

24. Color Summary

25. Box Model

26. Every element in a document, both
block-level and inline, generates a
rectangular element box

28. Content Area
• Holds “content” of the element (e.g. text or
images)

29. Inner edges
• Edges of the content area
• Get sized when you apply width and height

30. Padding
• Area held between the content area and an
optional border.
• Optional.

31. Border
• Line that surrounds the element and its
padding.
• Optional.

32. Margin
• Space added on the outside of the border
• Optional.

33. Outer edge
• Total area the element takes up on the page