basic html
DESCRIPTION
TRANSCRIPT
Basic HTML
Module 2: HTML Basics
LESSON 1
Module 2: HTML Basics
LESSON 1
Lesson OverviewIn 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.
Module 2: HTML Basics
LESSON 1
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?
Module 2: HTML Basics
LESSON 1
Web Page Structure HTML is an example of a publishing language for the Internet
H Hyper T Text M Markup L Language
Module 2: HTML Basics
LESSON 1
Viewing Web Sites Web browsers Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera
Web sites may appear differently when viewed in different browsers
Module 2: HTML Basics
LESSON 1
Create an HTML file The extension .html designates a file to be opened by a browser
Module 2: HTML Basics
LESSON 1
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
Module 2: HTML Basics
LESSON 1
Text size 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>
Module 2: HTML Basics
LESSON 1
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?
Module 2: HTML Basics
LESSON 1
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.
Module 2: HTML Basics
LESSON 1
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 -->
Module 2: HTML Basics
LESSON 1
Lesson Review Explain how to write the code for each of the following situations: Bold Underlining Italics
What is the tag for the largest size and smallest size text? What does a comment code look like? Explain the difference between <br> and <p>…</p>