ARTDM 171, Week3:
 XHMTL Tags + Group
     Projects
          Gilbert Guerrero
         gguerrero@dvc.edu
gilbertguerrero....
Turn in homework

• If you uploaded your file to your
  xtreemhost.com account:
 ‣ send me a link to your Web page
• If you...
Create a new folder in
 Week3 called html
Open Dreamweaver
Site Management
• Define a new site using the Advanced
  mode.
• Set the html folder as the local root.
• You must do this ...
Your Local Site and Your
      Remote Site
Directory Structure

• 
The Magical index.html
        File
            
Absolute URLs
http://www.mysite.com/folder/filename.html


• Begins with http://
• Could be a file on your own site or
  som...
Relative URLs
•   filename.html
    ‣   Look for a file in the same folder
•   folder/filename.html
    ‣   Look one level de...
XHTML Tags
     
XHTML Reference
http://xhtml.com/en/xhtml/reference/
Create a new page in
   Dreamweaver
           
Tags used for Page
Properties
 • <!DOCTYPE > - Defines the document type
 • <html></html> - Starts and ends the
    documen...
Meta Tags – <meta />
•   <meta /> - Meta tags appear between the <head> tags.
    Used for page description, keywords, and...
Basic Tags
•   <p></p> - Paragraph.
•   <br /> - Line break. This is an empty tag. Always
    end it with a space and a fo...
<a></a> - Anchor
•   Link to an external Web site:
    ‣   <a href="http://www.dvc.edu">DVC</a>
•   Link to a Web page on ...
<img /> - Image

• <img src="images/file.jpg"
  border="0" height="10" width="10" /> 
• Border, Width and Height are
  opti...
<ul>, <ol> — Lists
•   Unordered Lists (Bulleted)
    <ul>
            <li>Eggs</li>
            <li>Milk</li>
           ...
&nbsp; — non breaking
        space
<table> — Table
• <table></table> - Table. Encloses your
  table. You can set the width (Pixels or
  Percentage%), border,...
Table Example
 <table width="540" border="0" cellpadding="0"
 cellspacing="0">
     <tr>
         <td valign="top" width="...
Fonts
•   For fonts, colors, and sizes, use CSS. 
•   Placed between the <head></head> tags
•   <style type="text/css></st...
Page Properties...
Dreamweaver fonts + CSS
Basic Stylesheet
 <style type="text/css">
 <!--
 body, td, th {
     font-family: Arial, Helvetica, sans-serif;
     font-...
Group Projects
      Form groups
No less than 3 to a group
Group Project Files
Get them from the materials drive
Group Project Deadlines
•   Due next week:
    ‣   Group Name
    ‣   Group Members (names of people in group)
    ‣   Goa...
Homework, due September 7
•   Read and follow along with Chapter 4
    ‣   Create a Web page using text from Project Guten...
Thursday

• You will have a sub for the next lab.
• Be nice to him!
Thank You
Upcoming SlideShare
Loading in...5
×

Artdm171 Week3 Tags Group Projects

465

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
465
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Click the expand button to see local and remote &amp;#xA0;
    &amp;#xA0;
    local on the right, remote on the left.&amp;#xA0; We&amp;#x2019;ll be sticking to local for now.&amp;#xA0;
    click the collapse button to return to normal
  • &amp;#xA0;
    Create a new directory for each section of your website&amp;#xA0;
    Add a default document to each directory.&amp;#xA0; Must be named index.html&amp;#xA0;
    Create utilities directories, images, css, scripts, files, pdf&amp;#xA0;
    Use hyphens for multiple words.&amp;#xA0; No spaces allowed.&amp;#xA0; No illegal characters.
  • &amp;#xA0;&amp;#xA0;
  • &amp;#xA0;&amp;#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.)
    &amp;#xA0;
    Take a look at these tags in Dreamweaver in a basic HTML document.
  • (Notice the attributes.)
  • Class Exercise:&amp;#x2192;&amp;#xA0;&amp;#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&apos;s Web browser will look on his or her computer for the first font and if it doesn&apos;t find it it will move on to the next. Arial and Times are pretty safe choices, though.
    &amp;#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.&amp;#xA0;
    color - Font Color. Set the color of your fonts. This does not affect the color of backgrounds or borders.&amp;#xA0;
    &amp;#xA0;All declarations end with a semi-colon (;) and are enclosed in curly brackets ({ }).
  • Artdm171 Week3 Tags Group Projects

    1. 1. ARTDM 171, Week3: XHMTL Tags + Group Projects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-171/
    2. 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
    3. 3. Create a new folder in Week3 called html
    4. 4. Open Dreamweaver
    5. 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).
    6. 6. Your Local Site and Your Remote Site
    7. 7. Directory Structure • 
    8. 8. The Magical index.html File  
    9. 9. Absolute URLs http://www.mysite.com/folder/filename.html • Begins with http:// • Could be a file on your own site or someone elses site.
    10. 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
    11. 11. XHTML Tags  
    12. 12. XHTML Reference http://xhtml.com/en/xhtml/reference/
    13. 13. Create a new page in Dreamweaver  
    14. 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. 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. 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. 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. 18. <img /> - Image • <img src="images/file.jpg" border="0" height="10" width="10" />  • Border, Width and Height are optional.
    19. 19. <ul>, <ol> — Lists • Unordered Lists (Bulleted) <ul> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ul> • Ordered Lists (Numbered) <ol> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ol>
    20. 20. &nbsp; — non breaking space
    21. 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.
    22. 22. Table Example <table width="540" border="0" cellpadding="0" cellspacing="0">     <tr>         <td valign="top" width="15%">column 1</td>         <td>column 2</td>         <td>column 3</td>     </tr>     <tr>         <td>Eggs</td>         <td>Milk</td>         <td>Potatoes</td>     </tr> </table>
    23. 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,...
    24. 24. Page Properties... Dreamweaver fonts + CSS
    25. 25. Basic Stylesheet <style type="text/css"> <!-- body, td, th {     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     color: #996600; } h1 {     font-family: Georgia, Times New Roman, Times, serif;     font-size: 16px;     color: #003366; } --> </style>
    26. 26. Group Projects Form groups No less than 3 to a group
    27. 27. Group Project Files Get them from the materials drive
    28. 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. 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
    30. 30. Thursday • You will have a sub for the next lab. • Be nice to him!
    31. 31. Thank You

    ×