HTML Tutorial


Published on

For St.Montfort School,Bhopal, class X

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML Tutorial

  1. 1.  Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html
  2. 2.  If we have some text e.g. “This is my first day of work, I’m so excited!” If we want to display the Text as :“This is my first day of work, I’m so excited!” Then we need to mark “first day of work” as Bold.
  3. 3. “This is my first day of work, I‟m soexcited!” To be marked in Bold letters.
  4. 4. “This is <B>first day of work,</B> so my I‟m excited!” Result is :“This is my first day of work, I‟m soexcited!”
  5. 5. 1. Open Notepad2. Click on File -> Save as…3. In the File name pull-down box, type in webpage.html4. Click on Save5. Type in content for your file6. Once you finished the content, click on File - > Save
  6. 6. Select “All Files”from the “Save astype” drop down list box.
  7. 7.  There are 3 ways to view the web page generated by the HTML file.
  8. 8.  Go to Start -> Run
  9. 9.  Click on Browse button.
  10. 10. Select the location of the HTML file (Where it is stored on your PC)
  11. 11. Select “All Files” option from the “Files of Type” Drop Down Menu.
  12. 12. Select the required HTML file from the list of all files in that location.
  13. 13. Click on the Open button after selecting the file.
  14. 14. The Web Page appearsaccording to the HTMLformats provided.
  15. 15.  Open any browser e.g. IE, Mozilla Firefox, Opera , Netscape Navigator etc. Click Open -> Browse to the location of the File. Select the file and click Open.
  16. 16.  Go to My Computers. Navigate to the actual location of the HTML file. Select the HTML file. Double click to open it.
  17. 17.  We use HTML tags to mark the elements of a file for the browser, in other words, we use tags to denote the various elements in an HTML document. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.
  18. 18.  For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<b>) and an end tag (<b>) Effect Code Code Used What It Does Bold B <B>Bold</B> Bold Italic I <I>Italic</I> Italic Single tag: <hr>,<br> Tags are NOT case sensitive
  19. 19.  Each HTML tag has certain additional options for providing more information to the final output. These options are called ATTRIBUTES. E.g. :<BODY BGCOLOR=“Red”>…..</BODY> Here BODY is the Tag and BGCOLOR is the Attribute.
  20. 20. <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body></html>
  21. 21. <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> Today is my first day at my new job, I’m so excited! </BODY></HTML>
  22. 22. For aligning the text towards the center of the web page. For aligning the text towards the left of the web page. For aligning the text <center>….Text….</center> towards the right of the For applying BOLD font style web page. <left>….Text….</left> applying ITALIC font style For to the enclosed text. <right>….Text….</right>the enclosed text. to For applying Underline font <B>….Text….</B> style to the enclosed text. <I>….Text….</I> <U>….Text….</U>
  23. 23.  The heading tag is used to format the enclosed text as large bold characters for displaying the heading of the web page content.For Example 
  24. 24. This is the application of <h1>….</h1> tag on the text.
  25. 25.  There are 6 levels of the heading tag :<h1>……….Text…………</h1> <h2>……….Text…………</h2> <h3>……….Text…………</h3> <h4>……….Text…………</h4> <h5>……….Text…………</h5> <h6>……….Text…………</h6>
  26. 26.  Each level of the heading tag formats the enclosed heading text with different font sizes beginning from the largest <h1> to <h6>. We can also apply the various formatting tags on it too.
  27. 27. <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <h1>My First Day of Work!</h1> Today is my first day at my new job, I’m so excited! </BODY></HTML>
  28. 28.  Hyper Text Markup Language  Web authoring software language  Specifically created to make World Wide Web pages  Created by Tim Berners-Lee in 1993 from SGML
  29. 29.  BGCOLOR Specifies a background-color for an HTML page. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
  30. 30. Using the Color Code : „#000000‟ or „RGB(0,0,0)‟ or „black‟ givesthe black color in the background.
  31. 31. Method I -- Simple Language Codes• Using the name of the color: e.g.Red, Black, Blue, Yellow, Pink, Orange etc.
  32. 32. Orange color in the background.
  33. 33. <html> <head> <title>My First Web Page</title> </head> <body bgcolor=“Orange"> <h1>My First Day at Work!</h1> </body></html>
  34. 34. Method II -- Hexadecimal Codes• Using any arbitrary combination ofalphabets and numbers preceded by a „#‟symbol.• Like : <body bgcolor = “#abc123”>
  35. 35. A random(green) color in the background.
  36. 36. <html> <head> <title>My First Web Page</title> </head> <body bgcolor=“#abc123"> <h1>My First Day at Work!</h1> </body></html>
  37. 37. Method III -- Using RGB function• Using the RGB() function in the followingmanner : RGB(r,g,b) where : r = red color component g = green color component b = blue color component• Example : <body bgcolor = rgb(3,4,5)>
  38. 38. A random(violet) color in the background.
  39. 39. <html> <head> <title>My First Web Page</title> </head> <body bgcolor=RGB(150,44,100)> <h1>My First Day at Work!</h1> </body></html>
  40. 40.  Background Attribute in the Body tag. Specifies a background-image for a HTML page <body background="clouds.gif"> <body background="C:WindowsFeatherTexture.bmp">
  41. 41. <html> <head> <title>My First Web Page</title> </head> <body background="C:WindowsFeatherTexture.bmp"> <h1>My First Day at Work!</h1> </body></html>
  42. 42. Some simple tips :Step 1• Search for some pictures available on your PC.
  43. 43. You can provide the imagetype (*.jpg,*.gif,*.bmp,*.png)etc. to narrow your search.
  44. 44. Select any imageand browse to itslocation.
  45. 45. Copy the actual location of theimage.
  46. 46. The location copied is :“C:Documents and SettingsnewuserMy DocumentsMy Pictures”
  47. 47. Select“Properties”.
  48. 48. Select and copy the filename from the Properties Dialog Box and check its type also.The Complete path to the image is :“C:Documents and Settingsnew userMy DocumentsMyPicturesGiraffe.jpg”
  49. 49. <html><head><title>My First Web Page</title></head><body background= “C:Documents and Settingsnew userMyDocumentsMy PicturesGiraffe.jpg” ><h1>My First Day at Work!</h1></body></html>
  50. 50. Background image isapplied at the back