Version 1.2 - Course Module Slide Options
Download
Report
Transcript Version 1.2 - Course Module Slide Options
L E S S O N
1
Module 2: XHTML Basics
Basic XHTML
L E S S O N
1
Module 2: XHTML Basics
Lesson Overview
In this lesson, you will learn to:
Write XHTML code using a text editor application such as Notepad.
View Web pages created with XHTML code.
Create a comment within an XHTML document.
Format text within a Web page.
Creates tags with attributes.
L E S S O N
1
Module 2: XHTML Basics
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?
L E S S O N
1
Module 2: XHTML Basics
Web Page Structure
XHTML is an example of a publishing language for the Internet
X Extensible
H Hyper
T Text
M Markup
L Language
L E S S O N
1
Module 2: XHTML Basics
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
L E S S O N
1
Module 2: XHTML Basics
Copy this code into a Notepad document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tags and Attributes</title>
</head>
<body> It’s time to learn how XHTML tags are used to create Web pages. All XHTML
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>
L E S S O N
1
Module 2: XHTML Basics
Create an XHTML 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
L E S S O N
1
Module 2: XHTML Basics
Does your work look like this:
L E S S O N
1
Module 2: XHTML Basics
How will the following examples of text be displayed
by a Web browser?
<b>How would this text look different?</b> bolded text
<strong>Does this look any different?</strong> strong or bolded text
<i>How would this text be displayed?</i> italicized text
<em>Same as italicized?</em> italicized text
<u>This tag might be useful for titles.</u> underlined text (deprecated)
<body text=red>How would this tag change things?</body> text color
would be red
L E S S O N
1
Module 2: XHTML Basics
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>
L E S S O N
1
Module 2: XHTML Basics
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 />
•
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?
L E S S O N
1
Module 2: XHTML Basics
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.
L E S S O N
1
Module 2: XHTML Basics
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 -->
L E S S O N
1
Module 2: XHTML Basics
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>
L E S S O N
1
Module 2: XHTML Basics
Practice: XHTML Basics
Create the following changes in your “Tags and Attributes” Web page:
Add the text “Tags and Attributes” at the beginning of the body.
Make the “Tags and Attributes” be displayed as h1 in size.
Make the “Tags and Attributes” be display as bolded text.
Make the “Tags and Attributes” be display as underlined.
Make the rest of the document display as h4 in size.
Italicize all the words that are all caps. (Hint: There are five words in all
caps.)
Add a comment for your name and the date.