This document provides information about building and marketing websites, including key HTML elements like links and tables. It discusses landing pages for marketing websites and different types of links like absolute and relative URLs. It also covers the basic structure of HTML tables using rows, table headers, and table data. The document then reviews CSS and introduces new topics like font sizes, classes, and color specification using RGB values or hex codes. It concludes with an overview of the box model and how it describes the content, padding, border, and margin areas of elements.

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