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.

Html2 Intro


Published on

  • Be the first to comment

  • Be the first to like this

Html2 Intro

  1. 1. HTML How to make a simple web page 02/02/11
  2. 2. The Basics <ul><li>What is HTML </li></ul>02/02/11
  3. 3. <ul><li>HTML files are usually typed in Notepad </li></ul><ul><li>Files are saved using the extension name: .html or .htm </li></ul>02/02/11
  4. 4. <ul><li>HTML format for a web page </li></ul><ul><ul><li>should always follow the structure: </li></ul></ul>02/02/11
  5. 5. Cont… <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> </li></ul><ul><li></title> </li></ul><ul><li></head </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>02/02/11
  6. 6. <ul><li>Where: </li></ul><ul><ul><li><html> - opening tag </li></ul></ul><ul><ul><li><head> - heading </li></ul></ul><ul><ul><li><title> - title of the page </li></ul></ul><ul><ul><li><body> - start of the actual page </li></ul></ul>02/02/11
  7. 7. Cont... <ul><li>All tags have opening and closing tags </li></ul><ul><li>Closing tags are identified with the / symbol </li></ul><ul><ul><li>ex. </li></ul></ul><ul><ul><li><font face=“Comic Sans” This is Comic Sans </font> </li></ul></ul>02/02/11
  8. 8. Cont... <ul><li>Will appear as: </li></ul>02/02/11 This is Comic Sans .
  9. 9. Other basic tags <ul><li>Font </li></ul><ul><li>Marquee </li></ul><ul><li>OL </li></ul><ul><li>UL </li></ul><ul><li>Img src </li></ul><ul><li>A href </li></ul><ul><li>Table </li></ul>02/02/11
  10. 10. <ul><li>Some tags have their own attributes </li></ul><ul><li>- attributes i.e. properties </li></ul><ul><li>Example: </li></ul><ul><li><font face=arial color=blue size=+3> </li></ul>02/02/11
  11. 11. <ul><li>Where face, size and color are the attributes of the Font tag </li></ul>02/02/11
  12. 12. Experiment! <ul><li>Try creating a simple web page </li></ul><ul><li>Do this by opening Notepad </li></ul>02/02/11
  13. 13. <ul><li><html> </li></ul><ul><li><head> Sample page </head> </li></ul><ul><li><title> Your name Page </title> </li></ul><ul><li><body> <p> </li></ul><ul><li>This is a sample page </li></ul><ul><li></body> </html> </li></ul>02/02/11
  14. 14. Some tips <ul><li>Plan your webpage </li></ul><ul><ul><li>make an outline </li></ul></ul><ul><li>Gather all needed materials </li></ul><ul><ul><li>Ready all the documents, pics, sound files and other objects </li></ul></ul><ul><li>Make sure that the pages will be reader-friendly </li></ul>02/02/11
  15. 15. … tips <ul><ul><li>Background vs. foreground colors </li></ul></ul><ul><ul><li>Font size and style </li></ul></ul><ul><li>Consider your target audience </li></ul>02/02/11
  16. 16. Cont... <ul><li>So now it is actually just a matter of putting your html tags together with the text contents of your planned web page…! </li></ul>02/02/11
  17. 17. HTML Sample Try this… 02/02/11
  18. 18. <ul><li>Try to combine the following tags: </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> Welcome to this trial page </li></ul></ul><ul><ul><li><title> Trial Page _lastname</title></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li><hr> </li></ul></ul><ul><ul><li><font face=Arial color=blue size=+3> </li></ul></ul><ul><ul><li>This is just a trial.  </font> </li></ul></ul><ul><ul><li></font> </li></ul></ul><ul><ul><li></body> </html> </li></ul></ul>02/02/11
  19. 19. <ul><li>After typing the tags, save the file as: </li></ul><ul><li>Trial1_lastname.html </li></ul><ul><li>View the saved file by opening it thru the Internet Explorer </li></ul>02/02/11