Your SlideShare is downloading. ×
0
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
Understanding html
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

Understanding html

1,036

Published on

The Fundamentla

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,036
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
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

Transcript

  • 1. The Structure of HTML <ul><li>by Ray Villalobos </li></ul>
  • 2. What is HTML? <ul><li>A Markup Language </li></ul><ul><li>Hypertext </li></ul>
  • 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. HTML5
  • 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. 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. 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. 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. 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. 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. HTML5
  • 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. <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. <HTML></HTML> <ul><li>The tag to rule all tags </li></ul>
  • 15. <BODY></BODY> <ul><li>Where most visible content goes </li></ul>
  • 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. 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. 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. Unders <ul><li><p> Denotes paragraphs. </li></ul>
  • 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. SPECIAL Tags <ul><li><div id=&quot;genericblock&quot;></div> </li></ul><ul><li><span class=&quot;genericstyle&quot;></span> </li></ul>
  • 22. ADDING MEANING <ul><li>To improve SEO </li></ul><ul><li>Usability </li></ul>
  • 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. 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. Working with Text Editors <ul><li>Mac: TextWrangler, BBEdit, Aptana, Coda </li></ul><ul><li>PC: Notepad++, Aptana Studio </li></ul>
  • 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. Setting up a WorkFlow <ul><li>Work, then upload </li></ul><ul><li>Edit Directly from Server </li></ul>
  • 28. The End

×