HTML presentation for beginners

28,243
-1

Published on

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

Published in: Technology
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
28,243
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1,291
Comments
2
Likes
13
Embeds 0
No embeds

No notes for slide

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

×