Editing an HTML Web Page

We learned a little about adding images to a web page using the <img> tag in Phase I.

Now we're going to learn how to place them in the paragraphs of our web pages.

We'll also learn how to add some new attributes to the images.

Open about.html in NotePad.

Delete the paragraphs in the right column.

You can type a couple paragraphs of new text or paste the paragraphs from the demo site:
<p>You are going to learn about the right way to add color to your website. What are the color relationships that work best for you?</p>
<p>You are going to learn how to enhance the appearance of web pages and pictures using borders.</p>
<p>You're going to learn how to set up the head section of your web page for the search engines.</p>
Save your changes

If we used the code we already know to add our new image, me.gif, it would look like this:
<img src="images/me.gif">

When placing images on web pages you should always include the dimensions of the image. The dimensions are defined in width and height. This will make it easier and faster for the browser to display them.

You can use the width and height attributes to actually resize and image on a page. This is a bad practice that most WYSIWYG editors employ. Size your image properly using a graphics optimizer and then define the image with its proper width and height settings.

The me.gif that we are adding is 99 pixels wide and 152 pixels high.
So the code would look like this:
<img src="images/me.gif" width="99" height="152">

To be W3C compliant you should also provide an Alternate Text for your image. this text will appear if the image fails to load or if someone views the page with a browser that doesn't display pictures. The alt text would be just a brief description of the picture. Some SEO experts tell you to place keywords in your alt attributes. I leave the decision on that to you.

Our Alternate Text will be A picture of me.
It is added to the code as shown below:
<img src="images/me.gif" width="99" height="152" alt="A picture of me">

When setting pictures in paragraphs, we must tell the browser how to align the image. Choices of alignment are left, right and center.

Specify left to place the image to the left of your text.

Specify right to place the image to the right of your text.

The center value is used for small images like icons or thumbnails and will cause the image to display inline with your text like it was a word in your paragraph.

Because we have the large strawberry image in the left column of our web page, our new image would probably look best if we align it to the right to balance the page.
The final code would look like this: <img src="images/me.gif" width="99" height="152" alt="A picture of me" align="right">

If you've added your new paragraphs, copy and paste the image code between the first paragraph tag and the first word of the sentence. ( about.html )

If you used the paragraphs from the demo your code will look like this:

<p><img src="images/me.gif" width="99" height="152" alt="A picture of me" align="right">You are going to learn about the right way to add color to your website. What are the color relationships that work best for you?</p>
<p>You are going to learn how to enhance the appearance of web pages and pictures using borders.</p>
<p>You're going to learn how to set up the head section of your web page for the search engines.</p>

Save the changes

Now look at about.html in your browser. Refresh if needed.

The new image is aligned to the right of the text.

If you look close you'll notice that the text is right up against the image border. it would look better if there was a little space between the picture and the text.

We can create that space by adding a margin to the picture using our stylesheet.

Since we don't want to affect the images in the left column we will specify the right column for our image margin.

Open the style sheet and paste this block of code:
#right img{
margin: 4px }
Save the change nd Refresh the web page in your browser.

Now use the procedure we used to change the about.html page and see if you can make the changes to the friends page and set another image in the first paragraph.
Here's the information you need:

New paragraph text:

<p>You are going to learn how to place your own pictures on your web pages and do it right.</p>
<p>You are going to learn about optimizing and resizing so that your pictures fit properly into the framework of your page.</p>
<p>You are going to learn how to use CSS style sheets to make your pages smaller and control the appearance of your text.</p>

Image information:
Where: images folder
Image name: friends-120.gif
Image width: 120
Image height: 66
Alternate text: My friends
Alignment: right

See if you can make the changes without looking at the code below.
Save the page and look at it in your browser.

This is what your code should look like:
<p><img src="images/friends-120.gif" width="120" height="66" alt="My friends" align="right">You are going to learn how to place your own pictures on your web pages and do it right.</p>
<p>You are going to learn about optimizing and resizing so that your pictures fit properly into the framework of your page.</p>
<p>You are going to learn how to use CSS style sheets to make your pages smaller and control the appearance of your text.</p>

Test your website and see if everything is working properly. If it is you are ready to move on to the next lesson on changing the appearance.




Start Phase II

Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset KY 42502
Last Modified: August 30, 2008

 Change Appearance

Home

HTML Tutor
Beginner
HTML Basics
Add a Heading
Add a Paragraph

Intermediate
Phase I
Getting Started
Basic HTML Page
Creating Columns
CSS
Color
Headings
Images
Paragraphs
Site Heading
Linking

Advanced
Phase II
Start Phase II
Editing Pages
Change Appearance
Summary

Helps
Tag Glossary
Finished Code
Image Download
Color Tool
Hex Code Chart
Free Web Templates
Free Heading Graphic
Free Backgrounds
Put It on the Web
Quizzes
Your Questions

HTML Editors
Overview
NoteTab Light
Webbuilder

Online Builder Tutorials
Soholaunch
SiteReptile
SiteSTUDIO

Other Helps
Flash Web Sites