HTML file
- An HTML file describe how a single web psge will be displayed
- An HTML file is a text file with an extension of .html
- An HTML file contains HTML elements
- An HTML file can be edited using a notepad or viewed as a webpage using a web browser (i.e. Internet Explorer, Opera, Mozilla Firefox)
To create an HTML file, simply follow the steps in the example below:
- Open a notepad and copy the codes below and paste it in your notepad.
<html>
<body>
<p>HTML tags are enclosed with “<” and “>”</p>
<p>Examples of HTML tags used in this web page are html, body and p.</p>
<p>HTML tags do not appear in your web page.</p> <p>HTML tags only tell your web browser how to display your web page.</p>
<p>The “p” tag is used to create paragraph</p>
<p>The “html” tag indicates the start of your web page</p>
<p>The “body” tag contains the actual content of your web page</p>
</body>
</html>
- Save the file as mywebpage.html
- After saving the file, double click on the file or open it using your web browser. It should display similarly as seen below.
Notice in the above example that the HTML tags were not displayed. This is because HTML tags were just used to interpret how data in your website will be used.
Creating a thumbnail image link
No web site is complete without a few graphics, photos or images. They add a lot to any web site. Images are also one of the things that can slow down the load time of a page more than any other element. If the image or graphic is not compressed and sized to be correct for the page, it can cause a lot of problems.
Take photos, for example. If you want to display some of your photos on your site, then they are going to need to be worked on a bit. Usually, when you upload a photo from your digital camera onto your hard drive, the size of the photo is very large. It can’t be used on a web site when it is this large.
The size you want the photo to be depends somewhat on just how you want to display it on your site. One of the best things you can do with a large photo is to create a thumbnail image to put on the regular page, and then make it a link to a page that displays the large photo with very little text. This makes both pages load more quickly.
So, to do this, you need to make a copy of your photo that you can work with. Then resize the copy to something small, say 100 pixels wide. This smaller image will work as your thumbnail. When you insert the thumbnail onto the page of your site, you will want to first create an alt tag for it. This tag is a text description of the photo. Here is the tag:
The ‘img src’ part is the name of the picture. The alt tag gives the image a name. It is simply added to the end of the html for the thumbnail.
Now, you want to make the thumbnail lead to the larger photo that is located on another page of your site. To do this, you make the thumbnail image into a link:
And now your thumbnail image is a link that leads to another page of your site. The ‘a href=’ is what makes the link, and it is very important to add the ‘/a’ at the end, because this is what ends the link. Otherwise, everything that comes after this will be turned into one gigantic link.
