Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to HTML presentation for beginners
Similar to HTML presentation for beginners (20)
Recently uploaded
Recently uploaded (20)
HTML presentation for beginners
- 1. <HTML>
- 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. Elements <element> ... </element> Start tag Content End tag
- 6. Attributes <element attribute=”value”> Name Value
- 7. Comments <!-- comment --> Start Comment End
- 8. Example
- 10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- ... --> </html>
- 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> <!-- Only code in <body> will be displayed on screen. --> </body> </html>
- 13. <!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>
- 15. <body> <h1><img src="logo.png" alt="Google"></h1> <form> <p><input name="query"></p> </form> </body>
- 16. <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>
- 17. <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>
- 19. <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>
- 20. <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>
- 21. Test
- 23. CSS Cascading Style Sheets
- 25. 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
- 26. Question