Thursday, June 4, 2009

Lean HTML Fast!

This screen cast introduces Hyper Text Markup Language (HTML). Being that HTML is simply text, it can be written using any text editor, and viewed in any web browser. In this screen cast I perform the following steps...Fast! Feel free to pause / replay as necessary.
  1. Open notepad to create the most basic Hello web page.
  2. Save it as 'hello.html' and double click to open in a browser.
  3. Add a 'center' tag to illustrate the 'markup' effect.
  4. Add the 'head' and 'body' tags to make the document more standardized.
  5. Give the document a title.
  6. Add a line break after the word hello and a 'hyperlink' to an About page.
  7. Save document and refresh the browser.
  8. Click the hyperlink (notice the browser re-directs to the about.html page).
  9. Create the about page, save as 'about.html', refresh the browser.
  10. Click the About and Home links to illustrate the hyper linked documents.
  11. Re-open the 'hello.html' page to add more complex tags.
  12. Add an 'img' (image) tag and set the 'src' (source) to the url of the Google logo.
  13. Add a 'br' (line break), 'form' and input (text and button) tags to replicate the Google website.
  14. Save the document, and refresh the browser.
  15. Vwalla, you just built the UI for Google in under 5 mins!


Recommended online followup tutorial is Learn HTML from W3Schools.com

No comments: