Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML presentation for beginners

55,485 views

Published on

Presentation about HTML. It discusses the syntax, an example (recreating Google.com), and HTML 5.

Published in: Technology

HTML presentation for beginners

  1. 1. <HTML>
  2. 2. The syntax 1.The DOCTYPE 2.Elements 3.Attributes 4.Comments
  3. 3. The DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Required header • Leftover from SGML • Doesn’t really serve any purpose
  4. 4. Elements <element> ... </element> Start tag Content End tag
  5. 5. Elements <strong>Error!</strong>
  6. 6. Attributes <element attribute=”value”> Name Value
  7. 7. Comments <!-- comment --> Start Comment End
  8. 8. Example
  9. 9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- ... --> </html>
  10. 10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Google</title> </head> <body> <!-- Only code in <body> will be displayed on screen. --> </body> </html>
  11. 11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Google</title> </head> <body> <h1><img src="logo.png" alt="Google"></h1> <!-- Search form --> <!-- Navigation --> <!-- Copyright notice --> </body> </html>
  12. 12. <body> <h1><img src="logo.png" alt="Google"></h1> <form> <p><input name="query"></p> </form> </body>
  13. 13. <body> <h1><img src="logo.png" alt="Google"></h1> <form> <p><input name="query"></p> <ul> <li><a href="advanced.html">Advanced Search</a></li> <li><a href="tools.html">Language Tools</a></li> </ul> </form> </body>
  14. 14. <body> <h1><img src="logo.png" alt="Google"></h1> <form> <p><input name="query"></p> <ul> <li><a href="advanced.html">Advanced Search</a></li> <li><a href="tools.html">Language Tools</a></li> </ul> <p> <button name="zoekuhh">Google Search</button> <button name="gokkuuh">I'm Feeling Lucky</button> </p> </form> </body>
  15. 15. <body> <!-- Logo + search form --> <ul> <li><a href="ads.html">Advertising Programs</a></li> <li><a href="solutions.html">Business Solutions</a></li> <li><a href="about.html">About Google</a></li> <li><strong><a href="http://google.nl/">Go to Google Nederland</a></strong></li> </ul> </body>
  16. 16. <body> <!-- Logo + search form --> <ul> <li><a href="ads.html">Advertising Programs</a></li> <li><a href="solutions.html">Business Solutions</a></li> <li><a href="about.html">About Google</a></li> <li><strong><a href="http://google.nl/">Go to Google Nederland</a></strong></li> </ul> <p>©2009 - <a href="privacy.html">Privacy</a></p> </body>
  17. 17. Test
  18. 18. CSS Cascading Style Sheets
  19. 19. The Future: HTML 5 1.Focus on modern websites. 2.New DOCTYPE: <!doctype html> 3.Better multimedia: <audio> & <video> 4.New form input types: dates, emails, url 5.HTML parsing algorithm for
  20. 20. Question

×