Download to read offline
More Related Content
![Introduction to basic HTML [Librarian edition]](https://cdn.slidesharecdn.com/ss_thumbnails/introductiontohtmllibrarianedition-130605110026-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Basic HTML
- 1. LESSON 1Module 2:HTML BasicsBasic HTML
- 2. Lesson OverviewIn thislesson, you will learn to:Write HTML code using a text editor application such as Notepad.
- 3. View Web pagescreated with HTML code.
- 4. Create a commentwithin an HTML document.
- 5. Format text withina Web page.
- 6. Creates tags withattributes.Guiding Questions for Lesson 1How do Web designers create Web pages?
- 7. What tools areneeded to create a Web page or site?
- 8. How is aWeb page viewed from the browser?Web Page StructureHTML is an example of a publishing language for the Internet
- 9.
- 10.
- 11.
- 12. L LanguageViewing Web SitesWebbrowsersInternet ExplorerMozilla FirefoxGoogle ChromeApple SafariOperaWeb sites may appear differently when viewed in different browsersCreate an HTML fileThe extension .html designates a file to be opened by a browserHow will the following examples of text be displayed by a Web browser?<b>How would this text look different?</b> bolded text (deprecated)<strong>Does this look any different?</strong> strong or bolded text<i>How would this text be displayed?</i> italicized text (deprecated)<em>Same as italicized?</em> italicized text<u>This tag might be useful for titles.</u> underlined text<body text=red>How would this tag change things?</body> text color would be red
Editor's Notes
- #3 Lesson 1 Overview
- #4 Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.
- #5 Review the definition of HTML with students from the text and describe that the tools needed to create a Web page or site can be as simple as a text editor application to a more complex Web design application. Explain to the students that we will be using a very simplistic word processing application called “Notepad” to create our first Web pages with HTML.
- #6 Web pages are viewed using a Web browser. The current most popular Web browsers include Internet Explorer, Mozilla Firefox, Netscape Navigator, and Apple Safari. Discuss the fact that an individual Web page may appear differently when viewed in each of these Web browsers due to the way that each browser renders the page.
- #7 Once students have copied the code into their word processing document, have them save the document as “tags.html.” The extension .html will identify this file as one to be opened by a Web site browser. Once the students have the file saved, ask them to go to the file on their computer (or other location where the file is saved) and open it.
- #8 Discuss that tags tell the browser how to display text and ask students to identify how they think the following examples of text would be displayed by a browser. (Note: For purposes of practicing the concepts of tags and for creating a few beginner Web pages, this text includes a few elements that were commonly used in earlier versions of HTML, but no longer meet the most recent HTML standards. Elements no longer supported by the most current version of HTML are referred to as “deprecated.” We will note these deprecations where they appear.)<b>How would this text look different?</b> bolded text (deprecated)<strong>Does this look any different?</strong> strong or bolded text<i>How would this text be displayed?</i> italicized text (deprecated)<em>Same as italicized?</em> italicized text<u>This tag might be useful for titles.</u> underlined text<body text=red>How would this tag change things?</body> text color would be redIf students are struggling with identifying the effect of each tag, have them add the code to their document so that they can visually see the differences.
- #9 Discuss that text can also be altered in its size. The use of a height tag will alter the size of the text.
- #10 Discuss that a browser ignores the use of the “enter” key. The extra space in our example did not show in the Web browser. Explain that the use of a break tag <br> will place text on the next line. Explain that no ending tag is needed. How students place a break tag after the phrase “easy to learn and use.” Now ask student to view their html document again. (Note: This would be a good time to explain the use of the refresh button for viewing a Web page.)
- #11 Discuss the difference between a “break” tag and a “paragraph” tag. A break tag places the following text on the next line. A paragraph tag places the text in a block, thus creating a paragraph. Ask students to remove the break tag they just created and place a beginning paragraph tag <p> right after the body tag <body> and place a closing paragraph tag </p> after the phrase “easy to learn and use.” Have students refresh their Web page to see the result.
- #12 Discuss the process of creating a comment. Ask students why someone creating a Web page would want to use a comment. Explain that comments are created using the following coding and are not displayed when viewing a Web page. <!--This is an example of a comment.-->
- #13 Review concepts covered if needed with the students and discuss the practice activity.