|| who | favorites | pictures | scraps | links | guestbook | contact | x ||
Lesson 2...Inserting Images
This is Lesson 2 in my series of Basic HTML Tutorials. I'm going to start out very simple here, and we'll work our way up!
Let's get started...
Open your account at Geocities that we used in Lesson 1 and log into your file manager. Click the box beside index.html and hit edit.
Let's start where we left off in Lesson 1....
<br>my webpage<br>
Welcome to my very first webpage!
Let's learn another HTML tag...
This one is easy, just put it around anything you want to center on the screen. You can use it with text, pictures, tables, etc.
Let's put it around your text...
Welcome to my very first webpage!
Before we go any farther... a word about using multiple tags.
In the example above, we used the center tag with the font tag. The order in which you close your tags is extremely important. Since our first tag was the tag, that makes it our "outside" layer and the tag is our "inside" tag.
Since we opened the center tag first, we close it last, therefore keeping it on the "outside". And our font tag was opened second, so we will close it first, keeping it on the "inside".
See what I mean???
You must close your tags in order, or you can end up with a real mess!
Moving on...now let's insert a picture...
First, you will need to choose a picture that you already have on your computer. Use either a .jpg or a .gif file. After you have chosen a picture, any picture will do just fine, in your file manager, click on "upload files".
Now, click on the first button that says "browse". Find the file on your computer, then hit upload. Depending on the size of the picture, it could take only a few seconds to several minutes. Try not to use incredibly large pictures on your website, they take too long to load and your visitor may get tired of waiting!
After you have the picture uploaded, remember the file name, go back to your file manager and let's edit your index page.
Let's put the picture right below your text...
First you'll need to learn a new tag...
That is a forced line break. You don't want your text and your picture on the same line, you want the picture below your text. So you'll need to insert a line break.
This is the code you use to insert a picture:
Substitute the name of your picture for "yourpicture" and you've just inserted a photo!
Now, your document should look something like this...
<br>my webpage<br>
Welcome to my very first webpage!
Now save your work in geocities, open another browser and view what you have done. We need to fix a few things, huh?
Let's center your picture... just put your opening tag in front of your image tag and put the closing center tag immediately after it.
There are other attributes you can add to the image tag, just like you can add to the font tag. Let's add a common one now.
Let's add the alt="description of your picture" to your image tag now...
Now save your work, reload your webpage, and hover your mouse over the image... Cool, huh?
That's only one of the many attributes you can add to an image tag, but that's the only one we will discuss right now...
Your HTML document should look something like this now...
<br>my webpage<br>
Welcome to my very first webpage!
Click here to see what your page should look like in HTML.
Now you know how to insert an image into your webpage, how to center images and text, how to insert line breaks, and you've learned the "alt" attribute of image tags.
Fabulous work! Stay tuned for Lesson 3...Backgrounds and Links.
Lesson 2...Inserting Images
This is Lesson 2 in my series of Basic HTML Tutorials. I'm going to start out very simple here, and we'll work our way up!
Let's get started...
Open your account at Geocities that we used in Lesson 1 and log into your file manager. Click the box beside index.html and hit edit.
Let's start where we left off in Lesson 1....
Welcome to my very first webpage!
Let's learn another HTML tag...
This one is easy, just put it around anything you want to center on the screen. You can use it with text, pictures, tables, etc.
Let's put it around your text...
Before we go any farther... a word about using multiple tags.
In the example above, we used the center tag with the font tag. The order in which you close your tags is extremely important. Since our first tag was the
Since we opened the center tag first, we close it last, therefore keeping it on the "outside". And our font tag was opened second, so we will close it first, keeping it on the "inside".
You must close your tags in order, or you can end up with a real mess!
Moving on...now let's insert a picture...
First, you will need to choose a picture that you already have on your computer. Use either a .jpg or a .gif file. After you have chosen a picture, any picture will do just fine, in your file manager, click on "upload files".
Now, click on the first button that says "browse". Find the file on your computer, then hit upload. Depending on the size of the picture, it could take only a few seconds to several minutes. Try not to use incredibly large pictures on your website, they take too long to load and your visitor may get tired of waiting!
After you have the picture uploaded, remember the file name, go back to your file manager and let's edit your index page.
Let's put the picture right below your text...
First you'll need to learn a new tag...
That is a forced line break. You don't want your text and your picture on the same line, you want the picture below your text. So you'll need to insert a line break.
This is the code you use to insert a picture:
Substitute the name of your picture for "yourpicture" and you've just inserted a photo!
Now, your document should look something like this...
Now save your work in geocities, open another browser and view what you have done. We need to fix a few things, huh?
Let's center your picture... just put your opening
There are other attributes you can add to the image tag, just like you can add to the font tag. Let's add a common one now.
Let's add the alt="description of your picture" to your image tag now...
Now save your work, reload your webpage, and hover your mouse over the image... Cool, huh?
That's only one of the many attributes you can add to an image tag, but that's the only one we will discuss right now...
Your HTML document should look something like this now...
Click here to see what your page should look like in HTML.
Now you know how to insert an image into your webpage, how to center images and text, how to insert line breaks, and you've learned the "alt" attribute of image tags.
Fabulous work! Stay tuned for Lesson 3...Backgrounds and Links.