HTML Advanced: Practice

n the following pages you can try HTML code and see the results of your work.

When you see a text box you can click on the “Try It” button to see how the html looks in a new window.
You can edit the HTML in the text box trying different things and seeing what happens.
You can’t break anything, so feel free to try the lessons and play around with different values to see what happens.

Text: Make Paragraphs
The break
and paragraph

tags let you visually separate text.

P class=”copy”>Click the “See It” button to see how this will look in a browser. The results appear in a new window.

Ooops! Not what you expected! The lines run all together. With HTML, all the text runs together in one long string until you mark it up with HTML tags to tell the browser how to display the text.

Edit the text. Add the
tag, like this:

Click the “See It” button again. Look at how the lines break.

Let’s try one more thing. Edit your text again. Remove the
tag, and add the

and

tags, like this:

Click the “See It” button again. The lines break differently this time. You have used the paragraph tag to create two separate paragraphs.

Text: Make Headings
The headline tag tells the browser to display the enclosed text as a heading. There are 6 sizes ofheadlines, from 1 (the largest) to 6 (the smallest).

Type the following sentences into the Try It Box. Make sure you include both the beginning and closing heading tags:

Click “Try It” to see how this will look in a browser.

Did you notice that a blank line was automatically created between the headers? The tags will automatically add an extra blank line for you.

Try changing the headline sizes and click on “See It” to see what the changes look like. Try using an

,

or
and click on “Try It” to see the results.

4>Aloha!4>

Remember, the opening and closing tags must always match?make sure you change both!

Text: Align Your Text
You can align paragraphs and headings by adding the align attribute to the tag.

Type the following into the Try It Box:

Click the “Try It” button. The heading is centered.

Edit the text. Make the pargarph centered, too:

Click the “Try It” button. Both the heading and the paragraph are centered.

Make the headline and paragraph flush right, like this:

Click the “TryIt” button. Both the heading and the paragraph are flush right.

Text: Use Bold and Italic
The bold anditalic tags format text to be bold or italic in display style.

Type the following into the Try It Box:

Now click on the “TryIt” button. The first line should be in bold.

A common mistake is to forget to close a tag. If too many words are diplaying in bold check to be sure you ended your bold section with .

Edit the text so that the first sentence is italic instead of bold. Change the b’s to i’s. Click on Try It to see the results.

Edit the text so that the first sentence is bold AND italic. Add the bold tag, like this:

Click on Try It to see the changes.

Text: Change Face and Color
The font tag changes the display face, color, and size of the text. In the future, the font tag will be phased on in favor of style sheets.

Type the following into the Try It Box:

Click on “Try It”. This is the default text display for a paragraph.

Now add a second line for comparision. Edit the text in the Try It Box so that it reads as the follows:

Click on “Try It”. The second line now displays in either arial or geneva. These are the standard san serif faces on Windows (arial) and Macintosh (geneva) computers.

Edit the text again, adding a size change:

Click on “Try It.” The second line now displays in either arial or geneva and is two default sizes larger than the first line.

Edit the text again, adding a color attribute:

Click on “See It.” The second line now larger and green.

Try changing the values of color — try “purple” or “red” or “goldenrod.”

Try a different size?try -1 or +3.

Each time you click on “See It” you can see how the values change the way the text is displayed by the browser.

Sizes can be + or – a value. Fixed sizes can be from 1-9. Color can be expressed as a name or hexidecimal value.

Text: Add a Rule
The horizontal rule inserts a rule.

Type the following into the Try It Box:

Now click on the “Try It” button.

Edit the text to add attributes to the rule tag. Make the first rule be 25% of the width of the window. Make the second rule be 10 units deep, like this:

Click on “See It” to see the changes.

Now, edit the text to make the rules solid. Add noshade attribute, like this

Click on “Try It” to see the changes.

Links: Link to Another Page
The Anchor tag creates a link.

Type the following into the Try It Box:

Now click on the “Try It” button. The words “page about Hawaii” have become a link to another Web page. Go ahead and click on the link and see what happens.

Make the word “Visit” be the link instead, like this:

Click on the “Try It” button to see how your work changes.

When you make links be sure:

  1. You have enclosed the href value in quotes. If you forget one of the quote marks, part of your page will seem to have disappeared.
  2. You remember to close the link with the tag. If you forget to close the link, the rest of your page will show up looking like a link.

Links: Make an “Email Me” Link
The anchor tag also lets you create an email link.

Type the following sentences into the Try It Box:

Click “Try It” to see how this will look in a browser.

When you click on this link (go ahead, try it!) your email program will start and you’ll see a blank message addressed to [email protected].

Lists: Make Lists
Use the list tags to make ordered (numbered) and unordered (bulleted) lists.

Type the following into the Try It Box:

Now click the “Try It” button. The items appear in a bulleted list.

A common mistake is to forget to close the list. Make sure your list ends with an

tag.

Edit the text so that you display an ordered list. Change the ul’s to ol’s, then click on Show It to see the results.

Now click the “Try It” button. The items appear in an ordered (numbered) list.

Images: Add an Image
You can add photos or graphics to your page with the Image tag.

We put several images on the server for you to use with these lessons. If you use the image name in the lessons, you’ll see images show up.

Type the following into the Try It Box:

Now, click on “Try It.”

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: