More Related Content
Similar to HTMLPart 3.pdf
Similar to HTMLPart 3.pdf (20)
Recently uploaded
Recently uploaded (20)
HTMLPart 3.pdf
- 1. HTML Text formating in Html
- 5. TEXT STYLE: FORMATTING ELEMENTS <sup> </sup> <sub> </sub> New Lesson: subscripted superscripted text text
- 6. Q1 - Fill in the blanks:
- 8. Q2
- 9. Q2 – Correct Answer
- 10. Q3 - Fill in the blanks:
- 11. Q3 – Correct Answers
- 12. Headings It is not recommended that you use headings just to make the text big or bold, because search engines use headings to index the web page structure and content. Previous Lesson:
- 13. Q4 - Fill in the blanks:
- 14. Q4 – Correct Answer
- 15. Without End Tags <br /> <hr /> Single Line break Horizontal line Previous Lesson: New Lesson:
- 16. Without End Tags <hr /> In HTML5, the <hr> tag defines a thematic break Horizontal line New Lesson:
- 17. Q5
- 18. Q5 Answer
- 19. <!- - Your sample comment goes here - - > <! - - This is a comment - - > The browser does not display comments, but they help document the HTML and add descriptions, reminders and other notes. Commen ts There is an exclamation point (!) in the opening tag, but not in the closing tag.
- 20. Q6
- 21. Q6 Answer
- 22. Q7
- 23. Q7 Answer
- 24. Q8
- 25. Q8 Answer
- 26. <p align= “center”> The text is aligned to center </p> HTML Attributes – provides additional information about an element / a tag while also modifying them. Attributes Attributes always specified in the start tag, and they appear in name=“value” pairs.
- 27. Q9
- 28. Q9 Answer
- 29. <hr width= “50px” /> Measureme nts – modify horizontal lines Width Attributes An elements width can be defined using pixels / percentages. <hr width= “50%” />
- 30. Q10
- 31. Q10 Answer
- 32. Measureme nts – used to specify how the text is aligned Align Attributes The align attribute of <p> is not supported in HTML5
- 33. <html> <title>Align Attributes</title> <body style="background-color:powderblue;" /> <h1 align="center"><span style="color:blue">About Me</span></h1> <hr width= "50%" /> <p align="center">Hey! I'm <strong><span style="color:tomato">Ems</strong></span>. Coding has changed my world... </p> <p align="left">"Declare variables, not war"</p> <p align="right">This is a paragraph</p> <hr width="7%" align="right" /> <p align="left"> Some quote <br /> <i> - by some author</i></p> </body> </html> Measureme nts Align Attributes
- 34. Q11
- 35. Q11 Answer
- 36. Q12
- 37. Q12 Answer
- 38. <img src=“image.jpg” /> The <img> Tag <img> Tag Is used to insert an image. It contains only attributes, and does not have a closing tag. The image’s URL (address) can be defined using the src attribute The alt attribute specifies an alternate text for an image.
- 39. Q13
- 40. Q13 Answer
- 41. <html> <head> <title>image location</title </head> <body> <img src=“image.jpg” alt” “ /> </body> </html> Image Location You need to put in the image location for the src attribute that is between the quotation marks. In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. Alt attributes is required.
- 42. Q14
- 43. Q14 Answer
- 44. Image Resizing To define the image size, use the width and height attributes In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. Alt attributes is required. The value can be specified in pixels or as a percentage Loading images takes time. Using large images can slow down your page, so use them with care.
- 45. <html> <head> <title>image resizing</title> </head> <body> <img src=“net.jpg” height=”150px” width=“150px” alt” “ /> <!- - or - -> <!img src=“net.jpg” height=50% width=50% alt=“ “ /> </body> </html> Image Resizing
- 46. Q15
- 47. Q15 Answer
- 48. Image Border By default, image has no borders. By default, Internet Explorer 9, and its earlier versions, display a border around an image unless a border attribute is defined. Use the border attribute within the image tag to create a border around the image <html> <head> <title>image border</title> </head> <body> <img src=“net.jpg” height=”150px” width=150px” border=“1px” alt=”programming.net“ /> </body> </html>
- 49. Q16
- 50. Q16 Answer
- 51. Links The Tag Add links to text/images that will enable the user to click on them in order to be directed to another file or webpage. To link an image to another document, simply nest the <img> tag inside <a> tags. <a> <a href=“ “></a> Use the href attribute to define the link’s destination address
- 52. Q17
- 53. Q17 Answer
- 54. Q18
- 55. Q18 Answer
- 56. Target Attribute Specifies where to open the linked document A visited link is underlined and purple. <a href=https://www.deped.gov.ph/ target=“a_blank”>DepEd</a> Giving a_blank value to your attribute will have the link open in a new window or new tab
- 57. Q19
- 58. Q19 Answer
- 59. Unordered List Start with <ul> tag <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul>
- 60. Q20
- 61. Answer