Fromthepen.com: Online Web Site Tutorials

Basic Exercises
· Introduction
· ex. 1 - Make a page
· ex. 2 - Head & Body
· ex. 3 - Attributes
· ex. 4 - Text
· ex. 5 - Colors
· ex. 6 - Hyperlinks
· ex. 7 - Anchors
· ex. 8 - Graphics

Join our mailing list to receive tips and tricks.

HTML TUTORIALS: Ex. 3 - Tag Attributes

EXERCISE 3: TAG ATTRIBUTES :

REMEMBER! Don't get all nervous because we are showing you some new stuff below. Relax, take your time, and be confident!

Ex.3 Figure 1: Body Tag With Attributes
(marginheight="0" marginwidth="0" topmargin="0" leftmargin="0")

Ex.3 Figure 2: Body Tag Without Attributes
( marginheight="0" marginwidth="0" topmargin="0" leftmargin="0")

Almost all tags have attributes or properties that you can add to your coding. Think of attributes as character traits of people.

For example, Morgan has hair that is brown and eyes that are blue. If I were to write that out inside of a hypothetical tag, it would look like this: <Morgan hair="brown" eyes="blue">.

In this instance, Morgan was the tag and hair and eyes were the attributes. All attributes use the equals sign to state their values, and their values are surrounded by quotation marks. A space is put between the tag name and its attribute. When you use more than one attribute, separate each one with a space.

I don't want to explain each and every attribute of every tag right now. All I want to do is show the proper format and effects of one tag and its attributes. Once you see it demonstrated, you will understand how to add attributes to any tag down the road.

Sure, this may not be the most exciting stuff sofar, but then again, neither is pouring concrete! Nonetheless, to a house's foundation, it's pretty important. For you, the basics of html structure, tags, and attributes are crucial, as well. You are building your HTML foundation.

What we are going to do is add some attributes to the body tag and view their effects. By default, if you have a plain body tag and place some text into your web page, when you view it in a browser, there will be some space above and to the left of the text.

Big Deal, right? But, sometimes you may want your text to start at the upmost top and left of the screen. This tutorial will show you how.

Again, don't let the attributes below intimidate you! Remember, all it is is text, nothing more! Keep a positive attitude and block out any doubt that may creep into your head. This is not tough, unless you convince yourself that it is!



<html>
<head>
<title> Bucktowndusty's Tutorial Page </title>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
This text will appear on the page.
</body>
</html>

NOTE:
Notice how the text was against the leftmost and upmost part of the screen. By default, a browser will place padding on the left and top of the window. Adding topmargin="0", leftmargin="0" and marginheight="0", marginwidth="0" attributes will get rid of the padding. (Making topmargin and leftmargin equal 0, takes the space away if you're using Microsoft's Explorer browser. Making marginheight and marginwidth equal 0, takes the space away if you're using Netscape's Navigator browser.)

ADDITIONAL ASSIGNMENT:

Change the body tag above so that it's a plain body tag. Ex. <body>. Then, hit submit and notice how there is padding above and to the left of the text. When you are done, close the new window, and read below.

I hope you are having fun with this stuff. Just think; right now you are increasing your value. A good HTML coder, working for a good company, can make up to $65,000 a year. I'd say you're worth about $500 right now!!!! Just kidding!

In the next exercise you will learn about different ways to display and manipulate text.

END OF EX. 3 - TAG ATTRIBUTES

<-- Back to Exercise 2: Web Page Head and Body Areas | Forward to Exercise 4: Text Manipulation-->

Home | HTML Tutorials | Color Charts | Practice Area