Adding a Title and an Image By Vashti
In tutorial 2 of our HTML Basics Series, we're going to cover changing the font size, changing alignment, and adding an image to an HTML page. We're going to do that by turning the text from our last tutorial into a title and centering it. We will then be putting a graphic bar below the title.
First, we're going to talk about how we design a website. The basic rule is, no more than four colours throughout most of the site for things like your background image, graphics, text, menus and frames. The tutorials are going to address good colour choices and the right way to add colour later, but for the moment I'm going to show you the four colour choices I've made for this tutorial project. They are:
The top text on the colour swatch is what's called the Hexidecimal colour code. Below is the name I'm using for the colour. From this point forward, whenever we use a colour on the pages it's going to be one of these four colours.
I've created a basic graphic bar that we'll put underneath our text, using the autumn red colour. Create a folder within the folder where you are storing your html files. Name it images. Then right click on the graphic bar image and save it to that folder.
Note: It is always better to keep your images in a subfolder simply because it will unclutter your main folder.
Open up your HTML document simscontent.html, the file we were working with in the last tutorial.
There are a number of codes we can use to turn something into a title or header. When we turn something into a title we use the code h with a number beside it. We can use a code between <h1> and <h6> Each number gives you a different sized header. In this instance we're going to use the code <h2>
Note: at this point we're talking about creating a title on the main part of our page itself, not the title in the header of our browser. :-)
Right after the body code ( <body> ), type the code <h2> and the words My Sims Content. Directly after the words My Sims Content and before the closing body code ( </body> ) type the code </h2>.
Some tags don't require a second tag to close it. The <br> (break) tags are an example of these. A break tag creates a single line break in your HTML document when it is viewed in a browser.
Because these tags don't need a closing tag, you still need some way to indicate that tag is closed. How you do so is by putting the backslash after the letter and writing it as <br />.
Type <br /> after the </h2> code. Then hit enter twice in your document as shown below:
At this point I need to explain to you about the different types of links. The first type of link is an absolute link. An absolute link is the direct and full address to a file on the web. For example:
http://www.mydomainname.com/images/redbar.jpg.
Note: This isn't a real address guys! I'm giving you this as an example of an absolute link.
On the other hand a relative link finds a linked file in relationship to another file. This is the address of the file in relationship to the HTML file. For example:
images/redbar.jpg
As a general rule, stick to relative links when you are linking to your internal files. You're less likely to get confused and your links are more likely to work.
Now you're going to learn how to add an image to a document. We are going to add the red graphic bar to our document. The code we need to add an image to a document is:
<img src=the relative address to find your file>
After your break tag ( <br /> ), type <img src=images/redbar.jpg> as shown below:
Once you've added your image link, save your document again and preview it in your browser as I taught you in the last tutorial. Here is the document previewed in my browser to give you an idea of what you should be seeing:
What we previewed is a good start but it may look much nicer centered on the screen. So, the last thing we're going to do in this tutorial is center your writing and image. How we do that is by typing <center> right after your body tag ( <body> ). Then typing </center> right after the end of your image tag ( <img src=images/redbar.jpg> ), as show below:
Preview your document one more time. Now we see the text and image centered on the page.
Congratulations! You now know how to turn text into a title, add an image, and center it. In the next tutorial we will be learning how to add a table and link a zip file to an image.