• Like
Introducing HTML
Upcoming SlideShare
Loading in...5
×

Introducing HTML

  • 1,612 views
Uploaded on

Short introduction into basic HTML tags.

Short introduction into basic HTML tags.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,612
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Index2.html
  • My_Vacation_Page3.html
  • My_Vacation_Page5.html
  • My_Vacation_page7.html

Transcript

  • 1. ICT11Introducing HTML Rita Ester
  • 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. 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. 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. Structure of an HTML Document <html> <head> </head> <body> </body> </html>18/04/2012 ©WCCS, ICT11: Introducing HTML 5
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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