HTML Coding #4: Attributes

IMPORTANT: If you haven’t looked at the other HTML Coding pages, do that now. Click here for the first tutorial.

In the last lesson, we learned how to add images and links to our webpage. However, a lot of the pictures you find on your search engine are much too big for your browser, and they make all the text way too small for you to read. In this lesson, we’ll learn some attributes we can add to our tags to customize them to our liking.

The attribute you need for this is the “style” attribute. If you remember, attributes are things you tack on to tags to make them different. Some attributes are required for the tag to work, like the “src” attribute in <img>, and “href” in the anchor tag <a>. But most tags are independent, and attributes like “style” customize it to your liking. And some attributes (such as “style”) need values as well. For example:

04_style_example

The attribute is “style”, and you’re giving it values such as color and font size that it can apply to the paragraph.

(Anything that the “style” attribute is applying to I will call “subject”.)

Here are some popular tags:

  • color – sets color of subject
  • font-size – sets text size
  • font-family – sets the font of any text within the subject (This is case-sensitive: you must capitalize the font names for it to work.)
  • background-color – sets the background color of the subject
  • text-align – aligns your subject to the left, to the right, or in the center.
  • text-decoration – modifies the text (underline, etc.)

Try plugging in some of these values in the style tag. (<tag attribute=”value-name:value”>) If you do it right (make sure to close all quotes and tags!), when you save and run it, your customized subjects should show up with their attributes. Cool, huh?

But we want to format our images, not our text. Well, I guess some of you wanted to format our text too. But I wanted to get those ginormous 2000 pixel images into a manageable size.

To do that, you need different attributes: The height and width attributes. (These attributes only work with tags like <img> that aren’t text tags.) The height and width work like any other attribute (<tag attribute=”value-name:value”>), and you plug in pixel values (height=”200px”) to modify the size.

04_height_example

As you can see, the pictures with the height and width attributes are different sizes.

One nifty thing is that if you only specify one dimension (height or width), the image is automatically formatted to the value you gave. In the example, the entire picture changed sizes instead of only one dimension.

If I were to specify both…

04_height_error

That’s no good.

Try it out. Modify your webpage with the style, height, and width attributes, and make your page prettier. Good luck!

Keep an eye out for HTML Coding #5!

Advertisements

One thought on “HTML Coding #4: Attributes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s