Your SlideShare is downloading. ×
ARTDM 171 Week 4: Tags
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ARTDM 171 Week 4: Tags

319

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.)
  • Transcript

    • 1. ARTDM 171, Week 4: Tags + Group Projects Code Walkthrough
      • Gilbert Guerrero, gguerrero@dvc.edu
      • gilbertguerrero.com/blog/artdm-171/
    • 2. XHTML Tags
      •  
    • 3. XHTML Reference
      • http://xhtml.com/en/xhtml/reference/
    • 4. Create a new page in Dreamweaver
      •  
    • 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 <head> </head> <body> </body> <html> </html>
    • 8. Nesting
      • Be sure to properly nest your tags
      • Right: <em> <a href=”xyz.html”> Xyz </a> </em>
      • Wrong: <em> <a href=”xyz.html”> Xyz </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=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
        • <meta name=&quot;keywords&quot; content=&quot;design, technology, Web&quot; /> 
        • <meta name=&quot;description&quot; content=&quot;This site is about bread.&quot; />
        • <meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot; />
      • 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...”
    • 15. Firefox Web Developer Plugin
      • https://addons.mozilla.org/en-US/firefox/addon/60
    • 16. <a></a> - Anchor
      • Link to an external Web site:
        • <a href=&quot;http://www.dvc.edu&quot;>DVC</a>
      • Link to a Web page on your own site:
        • <a href=&quot;bread.html&quot;>My Page About Bread</a>
        • <a href=&quot;about/history.html&quot;>History of Bread</a>
      • Hooks (invisible):
        • <a name=&quot;croissants&quot;></a>
      • Link to the hook:
        • <a href=&quot;index.html#croissants&quot;>Croissants</a>
    • 17. Homework due Sept 15
      • 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
    • 18. Thank You

    ×