The Structure of HTML <ul><li>by Ray Villalobos </li></ul>
What is HTML? <ul><li>A Markup Language </li></ul><ul><li>Hypertext </li></ul>
Different Versions <ul><li>HTML 4 </li></ul><ul><li>XHTML </li></ul><ul><li>HTML5 </li></ul><ul><li>Transitional vs Strict...
HTML5
Typical HTML5 Page <ul><li><!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></t...
Old Style HTML Page <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTM...
What is HTML5? <ul><li>A new version of the language </li></ul><ul><li>A Spec, not yet finished </li></ul><ul><li>Common s...
Simpler <ul><li>Simpler Coding </li></ul><ul><li>New Parsing rules (more flexible) </li></ul><ul><li>Common Sense Tags </l...
New Tags <ul><li>article, aside, datalist, details, embed, figure, footer, header, hgroup, nav, output, progress, section,...
New APIs for WebApps <ul><li>Offline Storage </li></ul><ul><li>Document Editing </li></ul><ul><li>Drag & Drop </li></ul><u...
HTML5
Typical HTML5 Page <ul><li><!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></t...
<HEAD></HEAD> <ul><li>Content mostly invisible to browser </li></ul><ul><li>Process  mostly before page loads </li></ul><u...
<HTML></HTML> <ul><li>The tag to rule all tags </li></ul>
<BODY></BODY> <ul><li>Where most visible content goes </li></ul>
The Markup Tags <ul><li><ELEMENT [ATTRIBUTE[=&quot;VALUE&quot;]]...>CONTENT[</ELEMENT>] </li></ul><ul><li>My name is <em>R...
Types of Tags <ul><li>Beginning & End tags (<em></em>) </li></ul><ul><li>Standalone tags (<br />) </li></ul><ul><li>Tags w...
Other Important Tags <ul><li>The Headline Tags: h1,h2,h3,h4,h5,h6 </li></ul><ul><li>Paragraph tags <p></p> </li></ul><ul><...
Unders <ul><li><p> Denotes paragraphs. </li></ul>
Classification of Tags <ul><li>Block Level  (<p>This is a paragraph</p>) </li></ul><ul><li>Inline  (To <strong>emphasize</...
SPECIAL Tags <ul><li><div id=&quot;genericblock&quot;></div> </li></ul><ul><li><span class=&quot;genericstyle&quot;></span...
ADDING MEANING <ul><li>To improve SEO </li></ul><ul><li>Usability </li></ul>
Validating <ul><li>Validator  http://validator.w3.org </li></ul><ul><li>Helps catch errors </li></ul><ul><li>Checks for co...
Creating Links <ul><li>Three Types of Links </li></ul><ul><ul><li>Absolute (http://) </li></ul></ul><ul><ul><li>Relative (...
Working with Text Editors <ul><li>Mac: TextWrangler, BBEdit, Aptana, Coda </li></ul><ul><li>PC: Notepad++, Aptana Studio <...
FTP App lications <ul><li>Cyberduck (Mac or PC) </li></ul><ul><li>Transmit (Mac) </li></ul><ul><li>FileZilla (PC) </li></ul>
Setting up a WorkFlow <ul><li>Work, then upload </li></ul><ul><li>Edit Directly from Server </li></ul>
The End
Upcoming SlideShare
Loading in …5
×

Understanding html

1,194 views
1,103 views

Published on

The Fundamentla

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

  • Be the first to like this

No Downloads
Views
Total views
1,194
On SlideShare
0
From Embeds
0
Number of Embeds
230
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Understanding html

  1. 1. The Structure of HTML <ul><li>by Ray Villalobos </li></ul>
  2. 2. What is HTML? <ul><li>A Markup Language </li></ul><ul><li>Hypertext </li></ul>
  3. 3. Different Versions <ul><li>HTML 4 </li></ul><ul><li>XHTML </li></ul><ul><li>HTML5 </li></ul><ul><li>Transitional vs Strict </li></ul>
  4. 4. HTML5
  5. 5. Typical HTML5 Page <ul><li><!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></title> </head> <body> </body> </html> </li></ul>
  6. 6. Old Style HTML Page <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot;><head> <meta http-equiv=&quot; content-type&quot; content=&quot;text/ html; charset=utf-8&quot; /> <title>Untitled</title></head><body></body></html>
  7. 7. What is HTML5? <ul><li>A new version of the language </li></ul><ul><li>A Spec, not yet finished </li></ul><ul><li>Common sense </li></ul><ul><li>New Descriptive tags </li></ul><ul><li>Built for WebApps </li></ul>
  8. 8. Simpler <ul><li>Simpler Coding </li></ul><ul><li>New Parsing rules (more flexible) </li></ul><ul><li>Common Sense Tags </li></ul><ul><li>More descriptive </li></ul>
  9. 9. New Tags <ul><li>article, aside, datalist, details, embed, figure, footer, header, hgroup, nav, output, progress, section, source, summary, time. </li></ul><ul><li>Easier audio & video </li></ul><ul><li>Canvas for graphics </li></ul>
  10. 10. New APIs for WebApps <ul><li>Offline Storage </li></ul><ul><li>Document Editing </li></ul><ul><li>Drag & Drop </li></ul><ul><li>Geolocation </li></ul><ul><li>Databases </li></ul>
  11. 11. HTML5
  12. 12. Typical HTML5 Page <ul><li><!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot; /> <title></title> </head> <body> </body> </html> </li></ul>
  13. 13. <HEAD></HEAD> <ul><li>Content mostly invisible to browser </li></ul><ul><li>Process mostly before page loads </li></ul><ul><li><TITLE>Document's Name</TITLE> </li></ul><ul><li><META> Data about data </li></ul>
  14. 14. <HTML></HTML> <ul><li>The tag to rule all tags </li></ul>
  15. 15. <BODY></BODY> <ul><li>Where most visible content goes </li></ul>
  16. 16. The Markup Tags <ul><li><ELEMENT [ATTRIBUTE[=&quot;VALUE&quot;]]...>CONTENT[</ELEMENT>] </li></ul><ul><li>My name is <em>Ray Villalobos</em> </li></ul><ul><li>My name is Ray Villalobos </li></ul>
  17. 17. Types of Tags <ul><li>Beginning & End tags (<em></em>) </li></ul><ul><li>Standalone tags (<br />) </li></ul><ul><li>Tags with Attributes (<a href=&quot;#&quot;>) </li></ul><ul><li>Invisible (head section, comments) </li></ul>
  18. 18. Other Important Tags <ul><li>The Headline Tags: h1,h2,h3,h4,h5,h6 </li></ul><ul><li>Paragraph tags <p></p> </li></ul><ul><li>Image Tags <img src=”” alt=””> </li></ul><ul><li>Emphasis, Strong </li></ul><ul><li>http://www.w3schools.com/tags </li></ul>
  19. 19. Unders <ul><li><p> Denotes paragraphs. </li></ul>
  20. 20. Classification of Tags <ul><li>Block Level (<p>This is a paragraph</p>) </li></ul><ul><li>Inline (To <strong>emphasize</strong> something) </li></ul><ul><li>Invisible Tags (<style type=”text/css”>p { color:#FCC; }</style>) </li></ul>
  21. 21. SPECIAL Tags <ul><li><div id=&quot;genericblock&quot;></div> </li></ul><ul><li><span class=&quot;genericstyle&quot;></span> </li></ul>
  22. 22. ADDING MEANING <ul><li>To improve SEO </li></ul><ul><li>Usability </li></ul>
  23. 23. Validating <ul><li>Validator http://validator.w3.org </li></ul><ul><li>Helps catch errors </li></ul><ul><li>Checks for correct usage of tags </li></ul>
  24. 24. Creating Links <ul><li>Three Types of Links </li></ul><ul><ul><li>Absolute (http://) </li></ul></ul><ul><ul><li>Relative (../) </li></ul></ul><ul><ul><li>Root Relative (/) </li></ul></ul>
  25. 25. Working with Text Editors <ul><li>Mac: TextWrangler, BBEdit, Aptana, Coda </li></ul><ul><li>PC: Notepad++, Aptana Studio </li></ul>
  26. 26. FTP App lications <ul><li>Cyberduck (Mac or PC) </li></ul><ul><li>Transmit (Mac) </li></ul><ul><li>FileZilla (PC) </li></ul>
  27. 27. Setting up a WorkFlow <ul><li>Work, then upload </li></ul><ul><li>Edit Directly from Server </li></ul>
  28. 28. The End

×