Gilbert Guerrero provides instructions for an ARTDM 171 class on XHTML tags and group projects. Students are asked to submit any homework uploaded online by sending the instructor a link, or staying after class if not uploaded. They are instructed to create an "html" folder for Week 3 assignments and define a new Dreamweaver site using that folder. The document outlines various XHTML tags like <head>, <title>, <body>, <meta>, <p>, <br>, <a>, <img>, <ul>, <ol>, and <table>. It also discusses fonts, colors and sizes being set through CSS. Students are asked to form project groups of at least 3 people and submit initial group information by the following week. Home
2. Turn in homework
• If you uploaded your file to your
xtreemhost.com account:
‣ send me a link to your Web page
• If you did not upload the file:
‣ please stay after class and be sure
to upload it and send me the link
5. Site Management
• Define a new site using the Advanced
mode.
• Set the html folder as the local root.
• You must do this for
‣ every homework assignment
‣ every new site
‣ whenever you change computers (such
as from home to school).
10. Relative URLs
• filename.html
‣ Look for a file in the same folder
• folder/filename.html
‣ Look one level deep, within a folder for the file
• ../folder/filename.html
‣ Go up a level, then down into the folder for the file
• /filename.html or /folder/filename.html
‣ Go to top (root) of the site and look for the folders
or files
14. 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
15. Meta Tags – <meta />
• <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
16. Basic Tags
• <p></p> - Paragraph.
• <br /> - Line break. This is an empty tag. Always
end it with a space and a forward slash.
• <em></em> <strong></strong> - Emphasis, Stonger
emphasis. These are known as Idiomatic Elements.
• <i></i> <b></b> - Bold, Italic. These are
Typographic Elements. They help to add style and
texture to a page. (In this class, our preference is
toward <em> and <strong>.)
• <h1></h1> <h2></h2> <h3></h3> - Headers. Helps
with Search Engine Optimization.
17. <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>
18. <img /> - Image
• <img src="images/file.jpg"
border="0" height="10" width="10" />
• Border, Width and Height are
optional.
21. <table> — Table
• <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.
• What about the FONT tag?
‣ <font> tag is no longer used in todayʼs World Wide
Web.
• Page Elements
‣ CSS uses page elements to specify fonts. You can
set a font on any page element, body, h1, p, a,...
28. Group Project Deadlines
• Due next week:
‣ Group Name
‣ Group Members (names of people in group)
‣ Goals (significant change to design + layout)
‣ Choose one person to send an email to
gguerrero@dvc.edu
• Due by September 22
‣ Presentation of Completed Site
29. Homework, due September 7
• Read and follow along with Chapter 4
‣ Create a Web page using text from Project Gutenberg:
Copy text and use paste special, p92
Add headings, p94
Apply HTML text styles, p99
Add a preformated text, p100
Indent text, p102
Add a list, p105 and nested lists, p108
Add special characters, 109
• Email Group Project answers
Click the expand button to see local and remote &#xA0;
&#xA0;
local on the right, remote on the left.&#xA0; We&#x2019;ll be sticking to local for now.&#xA0;
click the collapse button to return to normal
&#xA0;
Create a new directory for each section of your website&#xA0;
Add a default document to each directory.&#xA0; Must be named index.html&#xA0;
Create utilities directories, images, css, scripts, files, pdf&#xA0;
Use hyphens for multiple words.&#xA0; No spaces allowed.&#xA0; No illegal characters.
&#xA0;&#xA0;
&#xA0;&#xA0;
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.)
Get started with fonts and CSS in Dreamweaver by clicking Page Properties... in the property inspector.
font-family - Font Family. Allows you to choose a font. Order them in priority. The user's Web browser will look on his or her computer for the first font and if it doesn't find it it will move on to the next. Arial and Times are pretty safe choices, though.
&#xA0;
font-size - Font Size. Set a size based on Pixels (px), Percentages (%), Picas (pc), Points (pt), Ems (em), or, just type small, medium, or large.&#xA0;
color - Font Color. Set the color of your fonts. This does not affect the color of backgrounds or borders.&#xA0;
&#xA0;All declarations end with a semi-colon (;) and are enclosed in curly brackets ({ }).
