Hypergurl HTML Tutorials - Adding a background image, coloring text, and adding hyperlinks.





Handy Tip: Even if you use a WYSIWYG (what you see is what you get) webpage editor, it's still a good idea to learn the basics of raw code. This way you won't be limited when the editor doesn't co-operate in doing what you need it to do.

HTML Tutorial #2

Adding a background image.
Coloring text.
Adding hyperlinks
Adding a background image

In the first tutorial, you learned to add a background color to your page.
In this, the second tutorial in the series, you will learn how to add a background image.

The:

<body background="images/plainbgrnd.jpg">

As you see, the background command is inside the body tag. You will need to point the image to reflect the folder on your server where your files are located.

(My image source resides in an image folder, then it's the image name, in this case plainbgrnd.jpg.) Homestead people need to have the source as "files/plainbgrnd.jpg" or if you place your images with everytning else you can simply put the image name.

Taking the html code from the first tutorial and substituting a background image for the plain white background, our code would now look like this:

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
<p align="center">font size="5">WELCOME TO MY WEBSITE</font></p>
<p align="left"> Type in text here, blah blah blah. We are making a website.</p>
<p align="center">
<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height="66" border="0" alt="hypergurl "></p>
</body>
</html>

Coloring Text.

Now let's start giving this page a more fancy look. You will now add some color to the title and to make it stand out more, you will make it bold text.

<p align="center"><font size="5" color="#000080"><b>WELCOME TO MY WEBSITE</b></font></p>

All we have done is included the color code within the font tag and introduced the bold tag <b>

Now your html should look like this:

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
<p align="center">font size="5" color="#000080"><b>WELCOME TO MY WEBSITE</b></font></p>

<p align="left"> Type in text here, blah blah blah. We are making a website.</p>

<p align="center">
<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height="66" border="0" alt="hypergurl webhosting" ></p>

</body>
</html>

You see how you are telling the browser exactly how to display each item with the simply use of html tags.

Let's practice changing colors a little more and at the same time introduce you to using a line break to place your words on the next line.

Here you will use the <p> tag again to signify a new paragraph.
Aligned to the left.
The font tag encloses the color.
And you make the text bold <b>
The tag for a line break is <br> This is one of the few tags that do not have to be closed with a correspoding tag.
You close the bold tag</b>
The </font> tag is closed where you want the colored text to finish.
And we have a link within the text to take you to another page, more on links below.
Then we finish by closing the paragraph.</p>

<p align="left">><font color="#660066"><b>We are going to color this text purple.<br>
If you want to see a chart of the hexidecimal colors you can find one at</b></font><br>
<a href="http://www.hypergurl.com/colorchart.html"><b>Hypergurl </b></a></p>

Adding a hyperlink.

Hyperlinks are what make the internet exiting and easy to go from one place to the next. It's kind of like travelling in a fast jet versus walking a million miles to get to where you want.

Let us put in a hyperlink so that you can go back to html tutorial #1, simply by clicking on the link. We now introduce the <a> tag that commands all hyperlinking.

<p align="center">
<a href="http://www.hypergurl.com/htmltutorial1.html">Click here to retun to html tutorial #1</a></p>

Again the <p> tag was used for the start of a new paragraph and the link was aligned with the center. The <a> tag started the hyperlink and the href signifies that a www url will be used. You can place whatever text you like and then close the </a> </p>

Now let's see what the html will look like now. And view your webpage here

<html>

<head>
<title>Tanya's HTML Tutorial</title>
</head>

<body background="images/plainbgrnd.jpg">
<p align="center">font size="5" color="#000080"><b>WELCOME TO MY WEBSITE</b></font></p>


<p align="left"> Type in text here, blah blah blah. We are making a website.</p>

<p align="left"><font color="#660066"><b>We are going to color this text purple.<br>
If you want to see a chart of the hexidecimal colors you can find one at</b></font>
<a href="http://www.hypergurl.com/colorchart.html"><b>Hypergurl color chart.</b></a></p>

<p align="center">
<img src="http://www.hypergurl.com/images/hypermouse.gif" width="100" height="66" border="0" alt="hypergurl webhosting" ></p>

<p align="center">
<a href="http://www.hypergurl.com/htmltutorial1.html">Click </a></p>
</body>
</html>

Your on your way now to becoming proficient in html coding.





 
Search Site
Custom Search





Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com