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.

Introducing HTML

1,951 views

Published on

Short introduction into basic HTML tags.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introducing HTML

  1. 1. ICT11Introducing HTML Rita Ester
  2. 2. What is HTML? Hypertext Markup Language Specifies the structure of a web page: Contents How the page is displayed Platform independent Can be interpreted by any computer regardless of the hardware or operating system.18/04/2012 ©WCCS, ICT11: Introducing HTML 2
  3. 3. How to find HTML?  Open IE  Open a web page e.g. http://www.biblegateway. com/  Use the command View  Source  Notepad opens with the HTML code of the web page18/04/2012 ©WCCS, ICT11: Introducing HTML 3
  4. 4. Tags Example: Words/ characters in angled brackets <p> Opening Tag This is a paragraph. <p> </p> Closing Tag </p> Enclose what has to be formatted18/04/2012 ©WCCS, ICT11: Introducing HTML 4
  5. 5. Structure of an HTML Document <html> <head> </head> <body> </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 5
  6. 6. Document Tags <html> <head> <title> Document Title </title> </head> <body> Content of the page </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 6
  7. 7. Demo 1: Your First Web Page <html> <head> <title>My First Home Page</title> </head> <body> <!--Here is the text for display --> Hi folks, my name is Chris Brown. </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 7
  8. 8. Tags and Attributes  Attributes are added to tags  Example <body bgcolor = “red” text = “#0000FF”> This shows blue text on red background </body>18/04/2012 ©WCCS, ICT11: Introducing HTML 8
  9. 9. Demo 2: Change Page Colours <html> <head> <title>My First Home Page</title> </head> <body bgcolor = “yellow” text = “#000033 “> <!--text dark blue on yellow background --> Hi folks, my name is Chris Brown. </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 9
  10. 10. Tags for Header Formatting <h1> Heading 1 </h1> ... Smaller font <h6> Heading 6 </h6>  Define the font size  Define space above and below  Example: <h1> My Vacation to Mexico </h1> Browser display: My Vacation to Mexico18/04/2012 ©WCCS, ICT11: Introducing HTML 10
  11. 11. Demo 3: Use Heading Tags <html> <head> <title>My Vacation Page</title> </head> <body> <h1> My Vacation to Mexico </h1> </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 11
  12. 12. Tags for Paragraph Formatting  Paragraph Tag <p>  <p> This is a paragraph </p>  Text of the paragraph wraps  After the paragraph: blank line  Break Tag <br>  Line Break, like ENTER key  No closing tag18/04/2012 ©WCCS, ICT11: Introducing HTML 12
  13. 13. Paragraph Alignment  Default: left aligned  Attribute added to the paragraph tag <p align="center"> This is a centered paragraph </p> <p align="right"> This is a right aligned paragraph </p>18/04/2012 ©WCCS, ICT11: Introducing HTML 13
  14. 14. Demo 4: Paragraph Tags <html> <head> <title>My Vacation Page</title> </head> <body> <h1> My Vacation to Mexico </h1> <p> Last summer I travelled to Mexico. </p> <br> </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 14
  15. 15. Change Fonts: An Example <p> <font face="arial, helvetica, tahoma" size = "4" color="red"> This paragraph is shown in Arial, size 4, color red </font> </p>18/04/2012 ©WCCS, ICT11: Introducing HTML 15
  16. 16. Tag for Font Setting <font face="face1[,face2][,face3]" size="n | +n | -n" color="color value"> text to be displayed </font> Default Font: Times New Roman, size 3 (point 12) Sizes from 1..718/04/2012 ©WCCS, ICT11: Introducing HTML 16
  17. 17. More Tags for Text Formatting Physical Logical Style Meaning Style <b> ... </b> <strong>...</strong> bold <i> ... </i> <em> ...</em> italic Examples <strong> These words are bold </strong> <i> These words are italic </i> Use logical styles rather than physical18/04/2012 ©WCCS, ICT11: Introducing HTML 17
  18. 18. Demo 5: Text Formatting <body> <h1> My Vacation to Mexico </h1> <p> <font face = “Verdana”> Last summer I travelled to <strong>Mexico</strong>. </font> </p> <br> </body>18/04/2012 ©WCCS, ICT11: Introducing HTML 18
  19. 19. Unordered Lists with HTML  Example ∙ Photos ∙ Videos  In HTML <ul> <li>Photos</li> <li>Videos</li> ... </ul>18/04/2012 ©WCCS, ICT11: Introducing HTML 19
  20. 20. Ordered Lists with HTML Example 1. Cut out the shapes 2. Assemble the shapes In HTML <ol> <li>Cut out the shapes</li> <li>Assemble the shapes</li> ... </ol>18/04/2012 ©WCCS, ICT11: Introducing HTML 20
  21. 21. Tables in HTML: Example <table> <tr> <td> Sugar </td> <td> Salt </td>Sugar Salt Peppper <td> Pepper </td> </tr>Sucre Sel Poivre <tr> <td> Sucre </td> <td> Sel </td> <td> Poivre </td> </tr> </table> 18/04/2012 ©WCCS, ICT11: Introducing HTML 21
  22. 22. Table Tags <table>...</table> for the entire table <tr>...</tr> for a row <td>...</td> for the cells, or columns, in each row table data tags18/04/2012 ©WCCS, ICT11: Introducing HTML 22
  23. 23. Tables for Page Layout To design the layout structure of a web page Table without the borders showing Text stays inside it„s column borders Example18/04/2012 ©WCCS, ICT11: Introducing HTML 23
  24. 24. HTML Code of the Example <table border="1" cellpadding="0" cellspacing="0" width="100%" height="550"> <tr> <td valign="top" colspan="2" height="75"> <!--Here goes the page title-> <h1> Title </h1> </td> </tr> <tr> <td valign="top" width="10%"> <!--This is the navigation pane, the buttons--> <b> Buttons </b> </td> <td valign="top" width="90%"> <!--This is content--> <b> Here goes the content</b> </td> </tr> </table>18/04/2012 ©WCCS, ICT11: Introducing HTML 24
  25. 25. Hyperlinks Example: GOOGLE to any other Web page Locally - in the web site, the page belongs to Globally - on the entire Web to text on the same page to other documents to e-mail18/04/2012 ©WCCS, ICT11: Introducing HTML 25
  26. 26. Links to Global Web Pages Example <a href=“http://www.google.com”> GOOGLE GOOGLE </a> In general <a href="URL"> name of the link </a>18/04/2012 ©WCCS, ICT11: Introducing HTML 26
  27. 27. Links to Local Web Pages Pages in the same folder Link to the homepage <a href="index.html"> index.html Home lastpage.html </a> Link to the last page <a href="lastpage.html"> Go to last page </a>18/04/2012 ©WCCS, ICT11: Introducing HTML 27
  28. 28. Links to Email Example <a href=“mailto:rita.ict11@gmail.ca"> Email to your teacher </a> In general <a href="mailto:email@address"> link name </a>18/04/2012 ©WCCS, ICT11: Introducing HTML 28
  29. 29. Link to an Anchor Point: Example For more information<a href=“#tips”> jump to the Useful Tips Section </a> …………………………………… …………………………………… …………………………………… …………………………………… …………………………<a name=“tips”> Useful Tips </a> Always use closing tags.18/04/2012 ©WCCS, ICT11: Introducing HTML 29
  30. 30. Links to Text on the Same Page  Create the anchor point (target, bookmark) on the same page <a name=“target_name"> target text </a>  Link to the anchor point <a href="#target_name"> name of the link </a>18/04/2012 ©WCCS, ICT11: Introducing HTML 30
  31. 31. Demo 6: Hyperlinks <p> <font face = “Helvetica”> Last summer I travelled to <a href = "http://mexico-travel.com/"> Mexico </a>. </font> </p> <a href = "mailto:rita.ict11@gmail.com"> Email to Webmaster </a>18/04/2012 ©WCCS, ICT11: Introducing HTML 31
  32. 32. Tags for Graphics Horizontal Rule <hr align= "left| center| right" size="n" width= "n | n%" color="color value" > Img Tag18/04/2012 ©WCCS, ICT11: Introducing HTML 32
  33. 33. Adding Images: Examples Example 1 <img src="homer.gif"> Example 2 <img src= "images/switzerland.jpg”> alt= "switzerland" border="2" align= "right">18/04/2012 ©WCCS, ICT11: Introducing HTML 33
  34. 34. The img Tag<img src = "file_path/file_name" alt = "alternative text" border = "n" align = "left|right| top| bottom| center|middle" height = "n" width = "n" >18/04/2012 ©WCCS, ICT11: Introducing HTML 34
  35. 35. Demo 7: Graphics <p> <font face = “Helvetica”> Last summer I travelled to <a href = "http://mexico-travel.com/"> Mexico </a>. <img src="images/mexicomap.gif" alt=“Mexico Map" align="top"> <hr> </font> </p>18/04/2012 ©WCCS, ICT11: Introducing HTML 35
  36. 36. Graphics and Copyrights  Copyright  No copyright  Graphics on Web  Online freeware pages  Clips from MS  Postcards and other  Your own digital prints photos  Logos18/04/2012 ©WCCS, ICT11: Introducing HTML 36
  37. 37. Sources  Chapter 3 in:  Boulton, J. HTML Tutorial. Presley, Bruce, Beth Feb. 10, 2005 Brown, and Elaine Malfas: A Guide to Web Authoring <http://peacock.mjsd1.ca/~j using Microsoft Frontpage boulton/webdesign/tutorials 2000. Pennington: /HTML/default.htm> Lawrenceville Press, 2001.  W3Schools Online Web  Reference HTML Tutorials. Mar. 14, 2006 Cheatsheet. Webmonkey. <http://www.w3schools.com Feb. 08, 2005 /html/default.asp > <http://webmonkey.wired.c om/webmonkey/reference/h tml_cheatsheet/>18/04/2012 ©WCCS, ICT11: Introducing HTML 37

×