Last time we left with a very simple website displaying nothing but a title in the titlebar, and text in the body. The file for that tutorial is available at my blog (listed at the bottom of this post,) and the tutorial is also available there. Anyway, this second tutorial will cover adding images, centering items, and changing fonts. Ok, let us begin!

First of all, I will tell you that the homepage for any site is named index (e.g index.html, index.htm, index.php). Web servers are programmed to display index first, which is why that is typically the homepage. I am going to use index.html for this tutorial. You can still use the same file as you did from the last tutorial if you like. I am going to begin with that same code, just the different file name.

 

If you want learn about web design course.

 

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

<img></img>The way this is different from the other tags we have used is that this loads the image inside of it:<img src="picture.jpg" width="100" height="100" alt="photo" />Let me dissect this code for you:

 

 

<imgis an abbreviation for the word image, and is the beginning of the image tag. src is an abbreviation for the word source, and is telling the image tag where to find the image by name. Between the quotation marks is the name of the image you want to load(src="picture.jpg")The width and height attributes are specifying the dimensions of the image in pixels. The alt value specifies the text that appears if you hold your mouse over the image for a moment. The/>at the end of the image tag is actually a way of closing tags when there is no content between the opening and closing tags. For example, I can't close a paragraph tag like<p />because it needs to have content between the opening and closing tags. But for images, this is fine.

 

This image tag can go anywhere, the same as paragraphs can. I am going to place it directly beneath the text we added in the previous tutorial.

If you have don't any idea what is PHP and you want know about what is PHP?

Now for centering things. Simply enclose the elements you wish to center horizontally inside center tags

<center></center>Anything between those tags will be horizontally centered. I am going to center everything, beginning at the first paragraph and ending after the image.

 

That's all it takes to horizontally center items! Now we'll tackle fonts. To set fonts you use the font tag (surprise!)

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

 

And that's it! You should now be able to center items, add images, and change fonts. Come back for our next tutorials! Right now we're covering the basics, but we will get into CSS, JavaScript+jQuery, and even PHP.

 

If you want to learn about PHP, Java Script and web design so click here.