Author Topic: but a title in the titlebar, and text in the body . The file for that tutorial is  (Read 19 times)

0 Members and 0 Guests are viewing this topic.

Offline traitor

  • Global Moderator
  • Newbie
  • *****
  • Posts: 21
  • Karma +0/-0
    • View Profile
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 .

We want to add an image to our website .  This is done with the image tag
The way this is different from the other tags we have used is that this loads the image inside of it:
<img src "http :// www . google . com" width "100" height "100" alt "photo" />
Let me dissect this code for you:

is 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 .

Now for centering things .  Simply enclose the elements you wish to center horizontally inside center tags
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!)
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
Again, I'll dissect this code .  
is the beginning of the font tag .  face is the font that you are changing it to .  
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 .

Share on Facebook Share on Twitter