12
Basic HTML Basic HTML

Basic HTML. Lesson Overview In this lesson, you will learn to: Write HTML code using a text editor application such as Notepad. View Web pages created

Embed Size (px)

DESCRIPTION

Web Page Structure  HTML is an example of a publishing language for the Internet  HHyper  TText  MMarkup  LLanguage

Citation preview

Page 1: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Basic HTMLBasic HTML

Page 2: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

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.

Page 3: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Web Page Structure HTML is an example of a publishing language for the Internet

H Hyper T Text M Markup L Language

Page 4: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Viewing Web Sites Web browsers Internet Explorer Mozilla Firefox Netscape Navigator Apple Safari And others

Web sites may appear differently when viewed in different browsers

Page 5: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

<html><head><title>Tags and Attributes</title></head><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.

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>

</html>

Page 6: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Create an HTML file Save the code that you just created as “tags.html” The extension .html designates a file to be opened by a browser Access the file and open it

Page 7: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created
Page 8: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

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

Page 9: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

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>

Page 10: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

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

Page 11: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Creating a Paragraph• <br> vs. <p> … </p>• <br> places the text on the next line• <p> … </p> creates a block or paragraph of text

Page 12: Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created

Creating a Comment• Why would a Web designer want 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 -->