Creating the web page - inserting text and images

Welcome to the 7th part of our web design tutorial where we look at creating the content.

1 - Finding a host	2 - Programs	3 - Designing page layout
4 - Designing part 2	5 - Intro to HTML	6 - Intro to HTML Part 2
7 - Creating the page

The next stage is to start placing content into the empty template, in our example the top 'section' is for our logo.

If you have an image for your logo then you can place it into this section with the following code:

If your image is in GIF format:

<IMG SRC="mylogo.gif">

or if it is in JPEG format then you would use:

<IMG SRC="mylogo.jpg">

This assumes that the image you want to use is in the SAME directory/folder as the HTML page.

If you know the exact size of the image in pixels then you can add this to the above code. For example, to include a GIF image that was 150 pixels wide by 50 pixels high you could use the following code:

<IMG SRC="mylogo.gif" WIDTH="150" HEIGHT="50">

If you don't have an image then you can simply use text, you have lots of different styles you can use with your text, including all the usual fonts.
Choosing which font you want is the first step, then you have to decide on a size.

To use the Verdana font you would place this tag before your text:

<FONT FACE="VERDANA">

and end the tag with:

</FONT>

You can specify the size of the text by using:

<FONT FACE="VERDANA" SIZE="2">

To make the text bigger simply increase the number within the tag, and likewise to decrease the size decrease the number within the tag.

Don't forget, if you want more info on using these tags, for instance, different colours then see our HTML Tags Section.

Also at your disposal you have the Heading tags. In HTML these are written as <H1> and closed as </H1>, this would give you the biggest heading, you can also specify different sizes. For instance, <H2> would provide a smaller heading and <H3> would be even smaller. All these tags have to be closed with the same parameter, for instance, if you use <H3> then you must use </H3> to close the tag.
You can use numbers between 1 and 6 with 1 being the biggest and 6 being the smallest.

An example would like this:

<H4>My Heading Text</H4>

Now we need to place either your image or text into the top section of the web page, using our example we would include it as follows:

For an image:

<HTML>
<HEAD>
<TITLE>Our new webpage title</TITLE>
</HEAD>
<BODY>

<table border="1" width="100%">
<tr>
<td width="100%"><center><IMG SRC="mylogo.gif"></center></td>
</tr>
<tr>
<td width="100%"><center>This is the second row, place links here</center></td>
</tr>
<tr>
<td width="100%"><p>This is the third row, place main content here<br>second line of content...</p></td>
</tr>
</table>

</BODY>
</HTML>

For a text heading:

<HTML>
<HEAD>
<TITLE>Our new webpage title</TITLE>
</HEAD>
<BODY>

<table border="1" width="100%">
<tr>
<td width="100%"><center><H2>My Heading Text</H2></center></td>
</tr>
<tr>
<td width="100%"><center>This is the second row, place links here</center></td>
</tr>
<tr>
<td width="100%"><p>This is the third row, place main content here<br>second line of content...</p></td>
</tr>
</table>

</BODY>
</HTML>

NOTE: The next part of this tutorial will be available shortly.