ARTDM 171 Week 4: Tags

478 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
478
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  •   
  • Dreamweaver automatically generates most of this when you create a new document. 10 lines of code (including a blank line between head and body.)   Take a look at these tags in Dreamweaver in a basic HTML document.
  • (Notice the attributes.)
  • ARTDM 171 Week 4: Tags

    1. 1. ARTDM 171, Week 4: Tags + Group Projects Code Walkthrough <ul><li>Gilbert Guerrero, gguerrero@dvc.edu </li></ul><ul><li>gilbertguerrero.com/blog/artdm-171/ </li></ul>
    2. 2. XHTML Tags <ul><li>  </li></ul>
    3. 3. XHTML Reference <ul><li>http://xhtml.com/en/xhtml/reference/ </li></ul>
    4. 4. Create a new page in Dreamweaver <ul><li>  </li></ul>
    5. 5. Working folders for this week <ul><li>Create a new folder in your ARTDM171 folder called Week4 </li></ul><ul><li>Create a new folder in Week4 called html </li></ul><ul><li>Set the html folder as your local root folder </li></ul><ul><li>Example: </li></ul><ul><li>         ARTDM171 </li></ul><ul><li>        Week4 </li></ul><ul><li>            html </li></ul>
    6. 6. Tags used for Page Properties <ul><li><!DOCTYPE > - Defines the document type </li></ul><ul><li><html></html> - Starts and ends the document </li></ul><ul><li><head></head> - HTML Header. Comes after the <html> tag and before the <body> tag </li></ul><ul><li><title></title> - HTML Title, the name of the document </li></ul><ul><li><body></body> - Contains your visible content </li></ul>
    7. 7. Anatomy of a Web Page <head> </head> <body> </body> <html> </html>
    8. 8. Nesting <ul><li>Be sure to properly nest your tags </li></ul><ul><li>Right: <em> <a href=”xyz.html”> Xyz </a> </em> </li></ul><ul><li>Wrong: <em> <a href=”xyz.html”> Xyz </em> </a> </li></ul>
    9. 9. <meta /> – Meta Tags <ul><li><meta /> - Meta tags appear between the <head> tags. Used for page description, keywords, and other data. </li></ul><ul><li>Examples: </li></ul><ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /> </li></ul></ul><ul><ul><li><meta name=&quot;keywords&quot; content=&quot;design, technology, Web&quot; />  </li></ul></ul><ul><ul><li><meta name=&quot;description&quot; content=&quot;This site is about bread.&quot; /> </li></ul></ul><ul><ul><li><meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot; /> </li></ul></ul><ul><li>Using the robots meta tag: Google Webmaster Central Blog </li></ul>
    10. 10. Basic Tags <ul><li><p></p> Paragraph </li></ul><ul><li><br /> Line break </li></ul><ul><ul><li>An empty tag, always end with a forward slash </li></ul></ul><ul><li><em></em> Emphasis </li></ul><ul><li><strong></strong> Stronger emphasis </li></ul><ul><li><h1></h1> <h2></h2> <h3></h3> Headers </li></ul>
    11. 11. Semantic Web <ul><li><em></em> and <strong></strong> are known as Idiomatic Elements </li></ul><ul><ul><li>They help to convey meaning, which can be interpreted by a browser or device as a visual style, motion, sound volume, etc </li></ul></ul><ul><li>  <i></i> and <b></b> are Typographic Elements </li></ul><ul><ul><li>Add visual style to a page, but do not convey meaning </li></ul></ul>
    12. 12. Semantic Web <ul><li><p></p> add structure to content which helps convey meaning and thought progression </li></ul><ul><li><br /> could be used everywhere, but then meaning gets lost </li></ul>
    13. 13. Semantic Web <ul><li>Heading tags help add structure to the page and tell search engines what’s important </li></ul><ul><li><h1>Name of the Site</h1> </li></ul><ul><ul><li><h2>Title of the Page</h2> </li></ul></ul><ul><ul><ul><li><h3>Section on the Page</h3> </li></ul></ul></ul><ul><ul><ul><ul><li><h4>Subsection</h4> </li></ul></ul></ul></ul>
    14. 14. Semantic Web <ul><li>The Semantic Web by Tim Berners-Lee, James Hendler, and Ora Lassila </li></ul><ul><li>“ A new form of Web content that is meaningful to computers...” </li></ul>
    15. 15. Firefox Web Developer Plugin <ul><li>https://addons.mozilla.org/en-US/firefox/addon/60 </li></ul>
    16. 16. <a></a> - Anchor <ul><li>Link to an external Web site: </li></ul><ul><ul><li><a href=&quot;http://www.dvc.edu&quot;>DVC</a> </li></ul></ul><ul><li>Link to a Web page on your own site: </li></ul><ul><ul><li><a href=&quot;bread.html&quot;>My Page About Bread</a> </li></ul></ul><ul><ul><li><a href=&quot;about/history.html&quot;>History of Bread</a> </li></ul></ul><ul><li>Hooks (invisible): </li></ul><ul><ul><li><a name=&quot;croissants&quot;></a> </li></ul></ul><ul><li>Link to the hook: </li></ul><ul><ul><li><a href=&quot;index.html#croissants&quot;>Croissants</a> </li></ul></ul>
    17. 17. Homework due Sept 15 <ul><li>Read and follow along Chapter 7: Styling Page Content </li></ul><ul><ul><li>Use last week’s homework and add CSS </li></ul></ul><ul><ul><li>Add at least 9 rules </li></ul></ul><ul><ul><ul><li>3 style rules for tags </li></ul></ul></ul><ul><ul><ul><li>2 custom classes </li></ul></ul></ul><ul><ul><ul><li>2 compound styles </li></ul></ul></ul><ul><ul><ul><li>2 divs with styles applied to the id’s </li></ul></ul></ul><ul><li>There will be a quiz on Chapter 7 next week! </li></ul><ul><li>Next week we'll go deep into CSS </li></ul>
    18. 18. Thank You

    ×