Your SlideShare is downloading. ×
0
Basic HTML Module 2: HTML Basics LESSON 1
<ul><li>Lesson Overview </li></ul><ul><li>In this lesson, you will learn to: </li></ul><ul><li>Write HTML code using a tex...
<ul><li>Guiding Questions for Lesson 1 </li></ul><ul><li>How do Web designers create Web pages? </li></ul><ul><li>What too...
<ul><li>Web Page Structure </li></ul><ul><li>HTML is an example of a publishing language for the Internet </li></ul><ul><u...
<ul><li>Viewing Web Sites </li></ul><ul><li>Web browsers </li></ul><ul><ul><li>Internet Explorer </li></ul></ul><ul><ul><l...
<ul><li>Copy this code into a Notepad document: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title...
<ul><li>Create an HTML file </li></ul><ul><li>Save the code that you just created as “tags.html” </li></ul><ul><li>The ext...
<ul><li>Does your work look like this: </li></ul>
<ul><li>How will the following examples of text be displayed by a Web browser? </li></ul><ul><li><b>How would this text lo...
<ul><li>Text size </li></ul><ul><li>Text size can be altered by the use of tags </li></ul><ul><li><h1>This tag creates lar...
<ul><li>Creating a Break </li></ul><ul><li>Browsers ignore the use of the “enter” key </li></ul><ul><li>To force the brows...
<ul><li>Creating a Paragraph </li></ul><ul><li><br> vs. <p> … </p> </li></ul><ul><li><br> places the text on the next line...
<ul><li>Creating a Comment </li></ul><ul><li>Why would a Web designer what to use a comment? </li></ul><ul><li>Comments ca...
<ul><li>Lesson Review </li></ul><ul><li>Explain how to write the code for each of the following situations: </li></ul><ul>...
<ul><li>Practice:  HTML Basics </li></ul><ul><li>Create the following changes in your “Tags and Attributes” Web page: </li...
Upcoming SlideShare
Loading in...5
×

Module 2 Lesson 1

1,050

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,050
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Lesson 1 Overview
  • 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.
  • 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.
  • 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.
  • Take this time to talk about the use of tags in the code that the students have copied. Identify the use of opening &lt;html&gt; and corresponding &lt;/html&gt; tag. Identify the &lt;title&gt; and &lt;/title&gt; as well as the &lt;body&gt; and &lt;/body&gt; tags. Also discuss the idea of nesting these tags within the code.
  • 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.
  • Discuss how the &lt;head&gt; tag creates a container to hold the text to be displayed. The &lt;title&gt; tag creates the title of the Web page which is found on the browser tab. The &lt;body&gt; tag is the main portion of the Web page. Point out the proper use of nesting of the tags. Discuss what looks different about the Web page than what might have been expected. Lead the students to identify that the Web browser ignores the extra line spacing that was entered and create the entire body as one block of text instead of the two blocks of text that was entered into the original document.
  • 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.) &lt;b&gt;How would this text look different?&lt;/b&gt; bolded text (deprecated) &lt;strong&gt;Does this look any different?&lt;/strong&gt; strong or bolded text &lt;i&gt;How would this text be displayed?&lt;/i&gt; italicized text (deprecated) &lt;em&gt;Same as italicized?&lt;/em&gt; italicized text &lt;u&gt;This tag might be useful for titles.&lt;/u&gt; underlined text &lt;body text=red&gt;How would this tag change things?&lt;/body&gt; text color would be red If 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.
  • Discuss that text can also be altered in its size. The use of a height tag will alter the size of the text.
  • 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 &lt;br&gt; 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.)
  • 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 &lt;p&gt; right after the body tag &lt;body&gt; and place a closing paragraph tag &lt;/p&gt; after the phrase “easy to learn and use.” Have students refresh their Web page to see the result.
  • 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. &lt;!--This is an example of a comment.--&gt;
  • Review concepts covered if needed with the students and discuss the practice activity.
  • This is the last slide of the presentation.
  • Transcript of "Module 2 Lesson 1"

    1. 1. Basic HTML Module 2: HTML Basics LESSON 1
    2. 2. <ul><li>Lesson Overview </li></ul><ul><li>In this lesson, you will learn to: </li></ul><ul><li>Write HTML code using a text editor application such as Notepad. </li></ul><ul><li>View Web pages created with HTML code. </li></ul><ul><li>Create a comment within an HTML document. </li></ul><ul><li>Format text within a Web page. </li></ul><ul><li>Creates tags with attributes. </li></ul>
    3. 3. <ul><li>Guiding Questions for Lesson 1 </li></ul><ul><li>How do Web designers create Web pages? </li></ul><ul><li>What tools are needed to create a Web page or site? </li></ul><ul><li>How is a Web page viewed from the browser? </li></ul>
    4. 4. <ul><li>Web Page Structure </li></ul><ul><li>HTML is an example of a publishing language for the Internet </li></ul><ul><ul><li>H Hyper </li></ul></ul><ul><ul><li>T Text </li></ul></ul><ul><ul><li>M Markup </li></ul></ul><ul><ul><li>L Language </li></ul></ul>
    5. 5. <ul><li>Viewing Web Sites </li></ul><ul><li>Web browsers </li></ul><ul><ul><li>Internet Explorer </li></ul></ul><ul><ul><li>Mozilla Firefox </li></ul></ul><ul><ul><li>Netscape Navigator </li></ul></ul><ul><ul><li>Apple Safari </li></ul></ul><ul><ul><li>And others </li></ul></ul><ul><li>Web sites may appear differently when viewed in different browsers </li></ul>
    6. 6. <ul><li>Copy this code into a Notepad document: </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Tags and Attributes</title> </li></ul><ul><li></head> </li></ul><ul><li><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. </li></ul><ul><li>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> </li></ul><ul><li></html> </li></ul>
    7. 7. <ul><li>Create an HTML file </li></ul><ul><li>Save the code that you just created as “tags.html” </li></ul><ul><li>The extension .html designates a file to be opened by a browser </li></ul><ul><li>Access the file and open it </li></ul>
    8. 8. <ul><li>Does your work look like this: </li></ul>
    9. 9. <ul><li>How will the following examples of text be displayed by a Web browser? </li></ul><ul><li><b>How would this text look different?</b> bolded text (deprecated) </li></ul><ul><li><strong>Does this look any different?</strong> strong or bolded text </li></ul><ul><li><i>How would this text be displayed?</i> italicized text (deprecated) </li></ul><ul><li><em>Same as italicized?</em> italicized text </li></ul><ul><li><u>This tag might be useful for titles.</u> underlined text </li></ul><ul><li><body text=red>How would this tag change things?</body> text color would be red </li></ul>
    10. 10. <ul><li>Text size </li></ul><ul><li>Text size can be altered by the use of tags </li></ul><ul><li><h1>This tag creates large text</h1> </li></ul><ul><li><h2>Creates a slightly smaller text</h2> </li></ul><ul><li><h3>Is smaller yet, but still large</h3> </li></ul><ul><li><h4>Starts getting smaller</h4> </li></ul><ul><li><h5>Now the text is getting small</h5> </li></ul><ul><li><h6>And finally, this is the smallest</h6> </li></ul>
    11. 11. <ul><li>Creating a Break </li></ul><ul><li>Browsers ignore the use of the “enter” key </li></ul><ul><li>To force the browser to place text on the next line use the “break” tag <br> </li></ul><ul><li>No closing tag is needed for this tag in HTML </li></ul><ul><li>Try placing a break tag in your work after the phrase “easy to learn and use.” </li></ul><ul><li>View your Web page again. </li></ul><ul><li>How did it change? </li></ul>
    12. 12. <ul><li>Creating a Paragraph </li></ul><ul><li><br> vs. <p> … </p> </li></ul><ul><li><br> places the text on the next line </li></ul><ul><li><p> … </p> creates a block or paragraph of text </li></ul><ul><li>Remove the <br> tag in our work that you just added </li></ul><ul><li>Place an opening paragraph tag <p> after the <body> tag </li></ul><ul><li>Place a closing paragraph tab </p> after the phrase “easy to learn and use.” </li></ul><ul><li>Refresh your Web page and look at the difference. </li></ul>
    13. 13. <ul><li>Creating a Comment </li></ul><ul><li>Why would a Web designer what to use a comment? </li></ul><ul><li>Comments can be created using code </li></ul><ul><li>Comments do not show in the Web page when viewed </li></ul><ul><li><!-- This is an example of a comment --> </li></ul>
    14. 14. <ul><li>Lesson Review </li></ul><ul><li>Explain how to write the code for each of the following situations: </li></ul><ul><ul><li>Bold </li></ul></ul><ul><ul><li>Underlining </li></ul></ul><ul><ul><li>Italics </li></ul></ul><ul><li>What is the tag for the largest size and smallest size text? </li></ul><ul><li>What does a comment code look like? </li></ul><ul><li>Explain the difference between <br> and <p>…</p> </li></ul>
    15. 15. <ul><li>Practice: HTML Basics </li></ul><ul><li>Create the following changes in your “Tags and Attributes” Web page: </li></ul><ul><li>Add the text “Tags and Attributes” at the beginning of the body. </li></ul><ul><li>Make the “Tags and Attributes” be displayed as h1 in size. </li></ul><ul><li>Make the “Tags and Attributes” be display as bolded text. </li></ul><ul><li>Make the “Tags and Attributes” be display as underlined. </li></ul><ul><li>Make the rest of the document display as h4 in size. </li></ul><ul><li>Italicize all the words that are all caps. (Hint: There are five words in all caps.) </li></ul><ul><li>Add a comment for your name and the date. </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×