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
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
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
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.
and click on “Try It” to see the results.
Remember, the opening and closing tags must always match?make sure you change both!
Text: Align Your Text
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 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
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 Type the following into the Try It Box:
Hanauma Bay
Waikiki
Maui
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
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:
- 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.
- 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 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 Type the following into the Try It Box:
Here are some fun places to go to in Hawaii:
- Hanauma Bay for snorkeling
- Waikiki for eating and shopping
- Maui for swimming
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
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.”