5. Working folders for this week
• Create a new folder in your ARTDM171 folder
called Week4
• Create a new folder in Week4 called html
• Set the html folder as your local root folder
• Example:
ARTDM171
Week4
html
6. Tags used for Page
Properties
• <!DOCTYPE > - Defines the document type
• <html></html> - Starts and ends the
document
• <head></head> - HTML Header. Comes after
the <html> tag and before the <body> tag
• <title></title> - HTML Title, the name of the
document
• <body></body> - Contains your visible
content
7. Anatomy of a Web Page
<html>
<head>
</head>
<body>
</body>
</html>
8. Nesting
• Be sure to properly nest your tags
• Right: href=”xyz.html”>Xyz</a></em>
<em><a
• Wrong:href=”xyz.html”>Xyz</em></a>
<em><a
9. <meta /> – Meta Tags
• <meta /> - Meta tags appear between the <head> tags.
Used for page description, keywords, and other data.
• Examples:
‣ <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
‣ <meta name="keywords" content="design, technology,
Web" />
‣ <meta name="description" content="This site is about
bread." />
‣ <meta name="robots" content="noindex, nofollow" />
• Using the robots meta tag: Google Webmaster Central
Blog
10. Basic Tags
• <p></p> Paragraph
• <br /> Line break
‣ An empty tag, always end with a
forward slash
• <em></em> Emphasis
• <strong></strong> Stronger emphasis
• <h1></h1> <h2></h2> <h3></h3>
Headers
11. Semantic Web
• <em></em> and <strong></strong> are
known as Idiomatic Elements
‣ They help to convey meaning, which can
be interpreted by a browser or device as
a visual style, motion, sound volume, etc
• <i></i> and <b></b> are Typographic
Elements
‣ Add visual style to a page, but do not
convey meaning
12. Semantic Web
• <p></p> add structure to content
which helps convey meaning and
thought progression
• <br /> could be used everywhere, but
then meaning gets lost
13. Semantic Web
Heading tags help add structure to
the page and tell search engines
whatʼs important
<h1>Name of the Site</h1>
<h2>Title of the Page</h2>
<h3>Section on the Page</h3>
<h4>Subsection</h4>
14. Semantic Web
The Semantic Web by Tim Berners-
Lee, James Hendler, and Ora Lassila
“A new form of Web content that is
meaningful to computers...”
16. <a></a> - Anchor
• Link to an external Web site:
‣ <a href="http://www.dvc.edu">DVC</a>
• Link to a Web page on your own site:
‣ <a href="bread.html">My Page About Bread</a>
‣ <a href="about/history.html">History of Bread</a>
• Hooks (invisible):
‣ <a name="croissants"></a>
• Link to the hook:
‣ <a href="index.html#croissants">Croissants</a>
17. <img /> - Image
• <img src="images/file.jpg"
border="0" height="10" width="10" />
• Border, Width and Height are
optional.
20. <table> – Table tags
<table></table> – Table. Encloses your table.
You can set the width (Pixels or Percentage
%), border, and cellpadding and cellspacing
as attributes.
<tr></tr> – Row. Encloses a row in your table.
<td></td> – Cell. Encloses what's in each cell of
the table. These also create your columns.
Make sure you have the same number of cells
in each row.
23. Fonts
• For fonts, colors, and sizes, use CSS.
• Placed between the <head></head> tags
• <style type="text/css></style> - Style
tags. Enclose your CSS code in these.
• Page Elements
‣ CSS uses page elements to specify
fonts. You can set a font on any page
element, body, h1, p, a,...
24. What about the <font> tag?
• <font> tag is dead!
• No longer the standard in todayʼs
World Wide Web
• <font> tags embed presentation in
the structure
• With CSS, our goal will be to
separate presentation from structure
26. Homework due Feb 23
• Read and follow along Chapter 7: Styling Page
Content
‣ Use last weekʼs homework and add CSS
‣ Add at least 9 rules
3 style rules for tags
2 custom classes
2 compound styles
2 divs with styles applied to the idʼs
• There will be a quiz on Chapter 7 next week!
• Next week we'll go deep into CSS
Dreamweaver automatically generates most of this when you create a new document. 10 lines of code (including a blank line between head and body.)
&#xA0;
Take a look at these tags in Dreamweaver in a basic HTML document.
(Notice the attributes.)
Class Exercise:&#x2192;&#xA0;&#xA0; Add a page heading, paragraph, bold, italics, link, and an image. Use the image saved in the ARTDM-171 folder. (Drag and drop it into the images folder on your USB drive.)