Your SlideShare is downloading. ×
0
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
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

325

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
325
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 <ul><li>Gilbert Guerrero, gguerrero@dvc.edu </li></ul><ul><li>gilbertguerrero.com/blog/artdm-171/ </li></ul>
    • 2. XHTML Tags <ul><li>  </li></ul>
    • 3. XHTML Reference <ul><li>http://xhtml.com/en/xhtml/reference/ </li></ul>
    • 4. Create a new page in Dreamweaver <ul><li>  </li></ul>
    • 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. 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. Anatomy of a Web Page <head> </head> <body> </body> <html> </html>
    • 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. <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. 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. 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. 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. 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. 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. Firefox Web Developer Plugin <ul><li>https://addons.mozilla.org/en-US/firefox/addon/60 </li></ul>
    • 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. 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. Thank You

    ×