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.

Basic HTML


Published on

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

  • Be the first to like this

Basic HTML

  1. 1. LESSON 1<br />Module 2: HTML Basics<br />Basic HTML<br />
  2. 2. Lesson Overview<br />In this lesson, you will learn to:<br /><ul><li>Write HTML code using a text editor application such as Notepad.
  3. 3. View Web pages created with HTML code.
  4. 4. Create a comment within an HTML document.
  5. 5. Format text within a Web page.
  6. 6. Creates tags with attributes.</li></li></ul><li>Guiding Questions for Lesson 1<br /><ul><li>How do Web designers create Web pages?
  7. 7. What tools are needed to create a Web page or site?
  8. 8. How is a Web page viewed from the browser?</li></li></ul><li>Web Page Structure<br /><ul><li>HTML is an example of a publishing language for the Internet
  9. 9. H Hyper
  10. 10. T Text
  11. 11. M Markup
  12. 12. L Language</li></li></ul><li>Viewing Web Sites<br /><ul><li>Web browsers</li></ul>Internet Explorer<br />Mozilla Firefox<br />Google Chrome<br />Apple Safari<br />Opera<br /><ul><li>Web sites may appear differently when viewed in different browsers</li></li></ul><li>Plain text document<br /><html><br /><head><br /><title>Tags and Attributes</title><br /></head><br /><body> It’s time to learn how HTML tags are used to create Web pages. All HTML pages begin with the html (the html must be included inside the < > brackets) tag and end with the /html (the /html must be included inside the < > brackets). Considering the huge amount of information on the Internet, Web pages are created from a surprisingly small number of tags, and you will find that they are easy to learn and use.<br />The HEAD element (delineated by the head and /head tags) comes next and serves as a box or container that can hold a variety of other elements, including the TITLE element. The TITLE element contains the words that appear on the title bar or page tab in the browser window. In this example, “Tags and Attributes” is the title. </body><br /></html><br />As seen in Web browser<br />
  13. 13. Create an HTML file<br /><ul><li>Save the code that you just created as “tags.html”
  14. 14. The extension .html designates a file to be opened by a browser
  15. 15. Access the file and open it</li></li></ul><li>Does your work look like this:<br />
  16. 16. How will the following examples of text be displayed by a Web browser?<br /><b>How would this text look different?</b> bolded text (deprecated)<br /><strong>Does this look any different?</strong> strong or bolded text<br /><i>How would this text be displayed?</i> italicized text (deprecated)<br /><em>Same as italicized?</em> italicized text<br /><u>This tag might be useful for titles.</u> underlined text<br /><body text=red>How would this tag change things?</body> text color would be red<br />
  17. 17. Text size<br /><ul><li>Text size can be altered by the use of tags</li></ul> <h1>This tag creates large text</h1><br /> <h2>Creates a slightly smaller text</h2><br /> <h3>Is smaller yet, but still large</h3><br /> <h4>Starts getting smaller</h4><br /> <h5>Now the text is getting small</h5><br /> <h6>And finally, this is the smallest</h6><br />
  18. 18. Creating a Break<br /><ul><li>Browsers ignore the use of the “enter” key
  19. 19. To force the browser to place text on the next line use the “break” tag <br>
  20. 20. No closing tag is needed for this tag in HTML
  21. 21. Try placing a break tag in your work after the phrase “easy to learn and use.”
  22. 22. View your Web page again.
  23. 23. How did it change?</li></li></ul><li>Creating a Paragraph<br /><ul><li><br> vs. <p> … </p>
  24. 24. <br> places the text on the next line
  25. 25. <p> … </p> creates a block or paragraph of text
  26. 26. Remove the <br> tag in our work that you just added
  27. 27. Place an opening paragraph tag <p> after the <body> tag
  28. 28. Place a closing paragraph tab </p> after the phrase “easy to learn and use.”
  29. 29. Refresh your Web page and look at the difference.</li></li></ul><li>Creating a Comment<br /><ul><li>Why would a Web designer what to use a comment?
  30. 30. Comments can be created using code
  31. 31. Comments do not show in the Web page when viewed
  32. 32. <!-- This is an example of a comment --></li></li></ul><li>Lesson Review<br /><ul><li>Explain how to write the code for each of the following situations:
  33. 33. Bold
  34. 34. Underlining
  35. 35. Italics
  36. 36. What is the tag for the largest size and smallest size text?
  37. 37. What does a comment code look like?
  38. 38. Explain the difference between <br> and <p>…</p></li>