Lesson Overview In this lesson, you will learn to:
Write HTML code using a text editor application such as Notepad.
View Web pages created with HTML code.
Create a comment within an HTML document.
Format text within a Web page.
Creates tags with attributes.
Guiding Questions for Lesson 1
How do Web designers create Web pages?
What tools are needed to create a Web page or site?
How is a Web page viewed from the browser?
Web Page Structure
HTML is an example of a publishing language for the Internet
Viewing Web Sites
Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera
Web sites may appear differently when viewed in different browsers
Create an HTML file
The extension .html designates a file to be opened by a browser
How 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
Text size can be altered by the use of tags
<h1>This tag creates large text</h1> <h2>Creates a slightly smaller text</h2> <h3>Is smaller yet, but still large</h3> <h4>Starts getting smaller</h4> <h5>Now the text is getting small</h5> <h6>And finally, this is the smallest</h6>
Creating a Break
Browsers ignore the use of the “enter” key
To force the browser to place text on the next line use the “break” tag <br>
No closing tag is needed for this tag in HTML
Try placing a break tag in your work after the phrase “easy to learn and use.”
View your Web page again.
How did it change?
Creating a Paragraph
<br> vs. <p> … </p>
<br> places the text on the next line
<p> … </p> creates a block or paragraph of text
Remove the <br> tag in our work that you just added
Place an opening paragraph tag <p> after the <body> tag
Place a closing paragraph tab </p> after the phrase “easy to learn and use.”
Refresh your Web page and look at the difference.
Creating a Comment
Why would a Web designer what to use a comment?
Comments can be created using code
Comments do not show in the Web page when viewed
<!-- This is an example of a comment -->
Explain how to write the code for each of the following situations:
What is the tag for the largest size and smallest size text?