Here is an image to put in your folder:
(http://newterra.chemeketa.edu/faculty/vanslyt/tutorials/mywebpage/)
Creating your own Web page tutorial:
Introduction: Although this tutorial is designed to teach you how to make a simple Web page, in the process of learning this, you will become familiar with a number of very important concepts that will be useful in other areas.
Here are a few of the skills and concepts you will learn...in completing the tutorial students will:
|
Exercises |
|||
HTML is the computer language of the Web. Don't worry though, it is a very simple computer language. HTML is the "code" that tells your Web browser application (program) how to display (show) a Web page. HTML uses tags which are code words separated by brackets like this: <html tag>
Here are a few example tags:
<b> = bold <center> = center <hr> = horizontal rule |
text will be bold text will be centered on the page (you will create a line across the page) |
| Many HTML tags come in pairs. One tag "opens" and another "closes." For example, if you want just part of your text to be bold, you can use HTML tags to tell the browser when to start making text bold and when to stop. This is how you do it: <b> is the opening tab and </b> is the closing tag. | |
Now let's try "coding" a little HTML ourselves. Follow these steps:
1. Open Notepad: Point to the START menu, Point to PROGRAMS, Point to ACCESSORIES, Click on NotePad
2. In NotePad type the following text: (even easier, just copy and paste this text into the NotePad document!)
<html>
|
You have just written a Web page! Really, it's true ! ... can prove it.
3. Now follow these steps to save your project as an html file:
3.1. Go to the File Menu and click SAVE AS
3.2. In the Save As box, navigate to the desktop (you can click the desktop button on the left side).
3.3. Create a new folder on the desktop, you can do this by click the yellow New Folder button at the top of the Save As box. Name your folder after yourself. For example I would call my folder: "timspage" [NOTE do not use capitals or spaces. This will be important later when you put your Web page online. Many Web servers don't like spaces and capitals.] Click OPEN or double-click the new folder to open it. You want to be sure to save your file there.
3.4. Name your file index.html
3.5. Click OK to save your file and close the Save As box.
Note: As you proceed in learning to create a Web page, it's important to keep this folder in mind. Most Web sites you visit online are stored in a computer called a Web server that publishes the Web pages to the Internet. A Web server can store many Web sites. Each one is contained in a "directory" or folder. Now that you are in the process of creating your own Web page, it's important to keep all the files connected to that page in the same folder. This will not only help you keep track of your various files, it will also help ensure that the links and images in your page work properly.
Now that you've saved your file you can text to see if your page is really a Web page by following these steps:
4. Minimize your NotePad document to move it out of the way. You should now be able to see the desktop. Double click your new folder (in my case it would be called "timspage"). You should be able to see your file, index.html inside the folder. Double-click the file. If everything was done correctly, your file should open in a Web browser such as Internet Explorer. You will see a mostly blank page with the words, "Welcome to my Web page" at the top. If it didn't work, you will need to
Now you can quickly make changes in your HTML code and view them in your browser. Here's how:
5. Let's add a new tag to your HTML code. Switch back to NotePad by clicking the box on the task bar at the bottom of the screen. Add this tag, <hr> , below the "Welcome to my Web page text". (You will have to place the cursor next to the text and hit ENTER to add a new line). The <hr> tag will put a line across the page. Now your code should look like this:
<html> |
In order to test this, all you have to do is choose SAVE from the file menu then switch to your Web browser. Once in your Web browser, click the REFRESH button to see your changes.
Here are a few more tags you can add to see the effect:
<center>use these tags to center text</center>
<b>use these tags to make text bold</b>
<i>use these tags to make text italic</i>
6. The last step in this exercise is add a link. The tag you use to add a link looks like this:
<a href="http://google.com">Google</a>
In the tag above the address in quotes is a standard Web URL, you must include the entire address. The text that appears after the URL (here it is "Google") will be the blue, underlined text on the page that you can click.
Here is how the tag will appear in your code.
<html> |
Add this code (or copy and paste the entire code above) to your NotePad page, Save your changes, switch back to your browser and click the Refresh button. You should now see a link to Google on your page. You can click the link to test it.
In this exercise you learned how to create a basic Web page using HTML code and how to set up your Web page folder. In the next exercise we will learn how to add an image using html.
Exercise 2: Adding an image to your page.
1. In this exercise you will add an image (a picture) to your Web page using HTML codes, but first you need to get an image for you page. Images on your Web page are usually stored in the same folder as your Web page file (index.html).
Here is an image to put in your folder: |
|
To download an image from a Web page follow these steps:
1.1. Use your right mouse button to click on the image (this is called a right-click).
1.2. A menu will appear, from this menu choose "Save Image As."
1.3. In the Save As box, navigate to your Web page folder and save your image.
1.4. Make sure to note the exact file name of the image. This one is called eslclass.jpg
You should now have an image file saved in your folder. Now let's go back to NotePad to add the tags that will show the picture on your page.
2. Follow these steps to add the image:
You need to add the Image Source tag to display an image: <img src="filename">.
To add the image we just downloaded you would use this tag: <img src="eslclass.jpg">
The image source tag tells your Web browser where the image file is located. It points to the file. If the file is not in the same place as your Web page file, the tag becomes much more complicated. For example, if you have a second folder inside your Web page folder (for example a folder called "images") you will have to include that in your tag like this: <img src="images/eslclass.jpg">
Luckily, you saved the file, eslclass.jpg, to the same place as your file, index.html.
To add the image place the tag <img src="eslclass.jpg"> to your html code in NotePad.
Your code will look like this:
<html> |
When you test this in your Web browser (remember you need to Save the file and then switch to your browser and click Refresh) you will see that your image is on the same line as the link to Google. In your Web page if you want to add a line break you can use this tag <br> or you can start a new paragraph with a blank line above using the paragraph tag <p>. Now add new paragraph tag to your code so that the image appears below the Google link. You may also want to include some text to explain the picture.
Here is what the code should look like:
<html> |
You can continue adding pictures and links to experiment with using HTML code to develop your Web page. In the next tutorial we will learn how to use a simple (and free) Web page editing application to do the same things and much more in a much easier manner.
top of page | next exercise