Getting Started with HTML Website Design (Part 2)

Last time we went with a very simple website that displayed nothing more than a title in the title bar and text in the body. The archive for that tutorial is available on my blog (listed at the end of this post) and the tutorial is also available there. Anyway, this second tutorial will cover adding images, centering elements, and changing fonts. OK lets start!

First of all, I will tell you that the home page of any site is called the index (for example, index.html, index.htm, index.php). Web servers are programmed to display the table of contents first, so it is usually the home page. I’m going to use index.html for this tutorial. You can still use the same file you used in the last tutorial if you want. I’m going to start with that same code, just the different filename.

We want to add an image to our website. This is done with the image tag.

</p> <p> <img></img><br /> The way this is different from the other tags we’ve used is that it loads the image inside of it:
</p> <p> Let me dissect this code for you:

</p> <p> <img is an abbreviation for the word image and is the beginning of the image tag. src is shorthand for the word source and tells the image tag where to find the image by name. Between quotes is the name of the image you want to upload
<br /> (src=&#8221;image.jpg&#8221;)<br /> The width and height attributes specify the dimensions of the image in pixels. The alt value specifies the text that appears if you hover over the image for a moment. Tea
<br /> /><br /> at the end of the image tag is actually a way to close tags when there is no content between the opening and closing tags. For example, I can’t close a paragraph tag like
</p> <p /> because you need to have content between the opening and closing tags. But for images, this is fine.

This image tag can go anywhere, just like paragraphs. I’m going to place it directly below the text we added in the previous tutorial.

Now to center things. Just enclose the elements you want to center horizontally within the center tags

</p> <p> <centro></centro><br /> Anything between those labels will be centered horizontally. I’m going to center everything, starting at the first paragraph and ending after the image.

That’s all it takes to center elements horizontally! We will now address sources. To set the fonts, use the font tag (surprise!)

</p> <p> <fuente></fuente><br /> Between the font tags, you place the elements you want the font to affect. To change a font to Arial from standard Times New Roman, set
<br /> <fuente></fuente><br /> Again, I will dissect this code.
<br /> <fuente is the beginning of the source tag. face is the font you are changing it to.
<br /> </fuente><br /> is the closing tag. So if I want my paragraph to be styled in the source tag, I’ll put it between the opening and closing source tags.

And that is! You should now be able to center elements, add images, and change fonts. Check back for our next tutorials! Right now we’re covering the basics, but we’ll get into CSS, JavaScript+jQuery, and even PHP.