One goal of this lab is to learn about file name extensions and to setup Windows to show file name extensions. You will also learn how to resize images and how to add an image to your web presentation.
A computer can store many file types such as text files,
HTML files, GIF files, Word files and so on. Microsoft
Windows determine the file type from the file name extension,
which is the section of the file name following the final
period. For instance text files have extension
.txt, HTML files have extension
.html, GIF files have extension
.gif, programs have extension
.exe.
Execute Start>All
Programs>Accessories>Notepad and then type some
text inside Notepad. Save the file using
File>Save As, make sure you Save
in: My Documents and that you Save
as type: All Files. Specify the
File Name: to be test1.txt. Repeat
the Save As operation but use different file
names test2.html and then
test3.gif. Close Notepad.
Open folder Start>My Documents and notice
that you have inside My Documents three files
test1 of type Text Document,
test2 of type HTML File and
test3 of type GIF Image. Windows
determined the file type only from the extension you provided,
but it doesn't show the file name extension.
Select Start>Control Panel. Click on
Switch to Classic View if Control Panel is using
the category view. double-click on Folder
Options and then select View tab. Uncheck
Hide extensions for known file types and then
click OK
Notice that files in My Documents folder now
display the file name extension as
well. (test1.txt, test2.html,
test3.gif)
test1.txt,
test2.html, test3.gif.
Start File Transfer, change the location for the
left panel to be My Documents and delete
public_html folder if there is one. Connect to the
Unix machine (the right panel location is your home
directory). In the right panel, right-click on
public_html and select Download and
then Yes to All. Minimize File
Transfer program. You won't use it until you finished
changing your presentation and you are ready to upload your work
to the Unix machine.
We want to add an image to our web page, but the image produced by our fancy new
camera is too big. You can see the size of the image by
right-click on it and then choosing
Properties. In this section of the lab we will learn
how to resize an image and how to add it to our web
presentation.
First, lets create the folder that is going to store all files
for this lab: inside My Documents/public_html create
a folder called lab2
Lets save the image on the local machine, by clicking on the
image link to load the image in the browser and then
right-click>Save Image As choose Save
in: to be My Documents/public_html/lab2. Note
that the name of the image is palm-leaf.jpg
We are going to use Microsoft Office Picture
Manager to resize the image. This tool comes with
Microsoft Office. If you don't have that, you can use any other
Image Manipulation program such as the one that came with your
digital camera, Adobe Photoshop or Gimp.
Go to My Documents/public_html/lab2 and then open
palm-leaf.jpg by right-click on it and
then choose Open With>Microsoft Office Picture
Manager. Choose Picture>Resize, and then
choose Percentage of original width x height,
10% and press OK. Save the new picture using
File>Save As and File Name:
palm-leaf-thumb.jpg. Use the following standard
sizes: 225x150 (thumb), 750x500 (small), 1500x1000 (large). Note
that these dimensions assume that the width of your picture is
bigger than the height. If that is not the case, just reverse the
two numbers for the standard sizes.
Image ratio is defined as the width of the image divided by the height. The standard image ratio for film cameras is 3:2 (1.5), for digital cameras and (standard) TV is 4:3 (1.33) and for HD-TV is 16:9 (1.78). The image you want to resize might have a different ratio because the image might be only a part from the original image.
If you use width and height attributes
for the img tag to modify the size of an image showed
in you page, you have to make sure you keep the same image
ratio.
Here is a page that contains an 84x136 image which was resized to 484x536. The new dimensions of the image were obtained by adding 400 to the width and height. Is the image displayed correctly or is it stretched?
To get new width and height you can use in the img
tag you can use Microsoft Office Picture Manager, and
Picture > Resize > Custom width x height: and
specify the new rectangle you want you picture to fit into.
My
Documents/public_html/lab2/index.html that contains:
<html> <head><title>Palm (plant)</title><head> <body> <h1>Palm (plant)</h1> <img src="palm-leaf-thumb.jpg" align="right"> <p> Arecaceae (sometimes known by the names Palmae or Palmaceae, although the latter name is taxonomically invalid.), the Palm Family, is a family of flowering plants belonging to the monocot order, Arecales. There are roughly 202 currently known genera with around 2600 species, most of which are restricted to tropical or subtropical climates. Of all the families of plants, the Arecaceae is the most easily recognizable as distinct by most persons. Most palms are distinguished by their large, compound, evergreen leaves arranged at the top of an unbranched stem. However, many palms are exceptions to this statement, and palms in fact exhibit an enormous diversity in physical characteristics. As well as being morphologically diverse, palms also inhabit nearly every type of habitat within their range, from rainforests to deserts.</p> <p> Palms are one of the most well-known and extensively cultivated plant families. They have had an important role to humans throughout much of history. Many common products and foods are derived from palms, and palms are also widely used in landscaping for their exotic appearance, making them one of the most economically important plants. In many historical cultures, palms were symbols for such ideas as victory, peace, and fertility. Today, palms remain a popular symbol for the tropics and vacations</p> <br> © Wikipedia </body> </html>
Notice that if the image file name is specified incorrectly,
only a small broken picture icon is displayed. If we add image
size specifications, using the attributes width and
height for the img tag, the broken image
icon occupies the correct area on the screen. It is important to
provide width and height attributes
every time you use the img tag because your pages
will load more smoothly and will have a more professional look.
To find out the width and height of an image, open the folder that contains the image and hold the mouse pointer over the image.
You should always use the alt attribute for the
img tag. This allows you to provide a short
description of your image and helps search engines to find your
files. This is how your img should look like after
you filled in the width, height and
alt attributes:
<img src="palm-leaf-thumb.jpg" align="right" width="168" height="225" alt="Palm leaf">
Restore File Transfer. In the left panel,
right-click on public_html and select
Upload
Type
http://astro.armstrong.edu/~yourUserName/lab2/ in the
location bar of your browser and make sure the HTML page is
correct.