Published on

Published in: Internet, 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


  1. 1. Hyper Text Markup Language (HTML)
  2. 2. 2 HTML Intro…  HTML, an abbreviation of Hyper Text Markup Language, was first proposed by Tim Berners-Lee of CERN in late 1991.  Hypertext is text, displayed on a computer, with references (hyperlinks) to other text.  A markup language is a set of annotations to text that describe how something is to be structured.
  3. 3. 3 Basics of HTML  HTML is not a programming language, it is a markup language.  A markup language is a set of markup tags.  It uses markup tags to describe web pages.  HTML documents are text files made up of HTML elements or tags.
  4. 4. 4 Basics of HTML continued...  An HTML file must have an .htm or .html file extension.  An HTML file can be created using a simple text editor (e.g. Notepad or vi editor).  HTML documents are also called web pages.
  5. 5. 5 HTML Tags  HTML markup tags are usually called HTML tags.  HTML tags are keywords surrounded by angle brackets like <html>.  HTML tags normally come in pairs like <b> and </b>.  The first tag in a pair is the start tag, the second tag is the end tag.
  6. 6. 6 HTML Tags continued....  Start and end tags are also called opening tags and closing tags.  Some HTML tags have no ending, e.g. <hr />, <br />, <img /> etc.  The text between the start and end tags is the element content.  HTML tags are not case sensitive, <b> means the same as <B>.
  7. 7. 7 A bit about web browsers  The purpose of a web browser (like Internet Explorer or Mozilla Firefox) is to read HTML documents and display them as web pages.  The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
  8. 8. 8 HTML Example <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Example Explained  The text between <html> and </html> describes the web page.  The text between <body> and </body> is the visible page content.  The text between <h1> and </h1> is displayed as a heading.  The text between <p> and </p> is displayed as a paragraph.
  9. 9. 9 Common HTML Tags Tag Description <html> Defines an HTML document <head> Defines the document's head <title> Defines the document's title under head section <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br/> Inserts a single line break <hr/> Defines a horizontal rule Defines a comment <!--> Inserts a single line break
  10. 10. 10 HTML Tags continued… Tag Description <a> Defines an anchor <img/> Defines an image <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <table> Defines a table <form> Defines a form <frameset> Defines a set of frames <frame/> Defines a sub-window (a frame)
  11. 11. 11 HTML Styles <html> <body style="background- color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana; color:red"> This text is in Verdana and red</p> <p style="font- family:times;color:green"> This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body> </html>
  12. 12. 12 HTML QUIZ  You can test your HTML skills with this Quiz.  The test contains 20 questions.  Let’s start the QUIZ now…
  13. 13. 13 HTML QUIZ:-Q1 1. What does HTML stand for? a> Home Tool Markup Language b> Hyper Text Markup Language c> Hyperlinks and Text Markup Language Answer (b)
  14. 14. 14 HTML QUIZ:-Q2 2. Who is making the Web standards? a> Mozilla b> Microsoft c> The World Wide Web Consortium d> The World Wide Web Corporation Answer (c)
  15. 15. 15 HTML QUIZ:-Q3 3. Choose the correct HTML tag for the largest heading a> <h6> b> <h1> c> <head> d> <heading> Answer (b)
  16. 16. 16 HTML QUIZ:-Q4 4. What is the correct HTML tag for inserting a line break? a> <br /> b> <lb /> c> <break /> Answer (a)
  17. 17. 17 HTML QUIZ:-Q5 5. What is the correct HTML for adding a background color? a> <body background="yellow"> b> <background>yellow</background> c> <body style="background-color:yellow"> Answer (c)
  18. 18. 18 HTML QUIZ:-Q6 6. Choose the correct HTML tag to make a text bold a> <bold> b> <b> Answer (b)
  19. 19. 19 HTML QUIZ:-Q7 7. Choose the correct HTML tag to make a text italic a> <italic> b> <i> Answer (b)
  20. 20. 20 HTML QUIZ:-Q8 8. What is the correct HTML for creating a hyperlink? a> <a url="http://www.aot.com">AOT.com</a> b> <a>http://www.aot.com</a> c> <a href="http://www. aot.com"> AOT </a> d> <a name="http://www. aot.com"> AOT.com </a> Answer (c)
  21. 21. 21 HTML QUIZ:-Q9 9. How can you create an e-mail link? a] <mail>xxx@yyy</mail> b] <mail href="xxx@yyy"> c] <a href="xxx@yyy"> d] <a href="mailto:xxx@yyy"> Answer (d)
  22. 22. 22 HTML QUIZ:-Q10 10. How can you open a link in a new browser window? a] <a href="url" new> b] <a href="url" target="_blank"> c] <a href="url" target="new"> Answer (b)
  23. 23. 23 HTML QUIZ:-Q11 11. Which of these tags are all <table> tags? a] <table><tr><tt> b]<thead><body><tr> c]<table><tr><td> d]<table><head><tfoot> Answer (c)
  24. 24. 24 HTML QUIZ:-Q12 12. Choose the correct HTML to left-align the content inside a tablecell a] <td align="left"> b] <tdleft> c] <td valign="left"> d] <td leftalign> Answer (a)
  25. 25. 25 HTML QUIZ:-Q13 13. How can you make a list that lists the items with numbers? a] <list> b] <ol> c] <ul> d] <dl> Answer (b)
  26. 26. 26 HTML QUIZ:-Q14 14. How can you make a list that lists the items with bullets? a] <ol> b] <ul> c] <dl> d] <list> Answer (b)
  27. 27. 27 HTML QUIZ:-Q15 15. What is the correct HTML for making a checkbox? a] <input type="check" /> b] <input type="checkbox" /> c] <check> d] <checkbox> Answer (b)
  28. 28. 28 HTML QUIZ:-Q16 16. What is the correct HTML for making a text input field? a] <input type="text" /> b] <input type="textfield" /> c] <textfield> d] <textinput type="text" /> Answer (a)
  29. 29. 29 HTML QUIZ:-Q17 17. What is the correct HTML for making a drop-down list? a] <input type="list" /> b] <select> c] <list> d] <input type="dropdown" /> Answer (b)
  30. 30. 30 HTML QUIZ:-Q18 18. What is the correct HTML for making a text area? a] <textarea> b] <input type="textarea" /> c] <input type="textbox" /> Answer (a)
  31. 31. 31 HTML QUIZ:-Q19 19. What is the correct HTML for inserting an image? a] <img>image.gif</img> b] <img src="image.gif" /> c] <image src="image.gif" /> d] <img href="image.gif /> Answer (b)
  32. 32. 32 HTML QUIZ:-Q20 20. What is the correct HTML for inserting a background image? a] <body background="background.gif"> b] <background img="background.gif"> c] <img src="background.gif" background /> Answer (a)
  33. 33. 33 End of Quiz… HOPE YOU HAVE ENJOYED THE SESSION… !!!