In this Project assignment, you will use images as links and also create what amounts to a mini-website. Your task is to create four pages as follows: the first page will be like a home page for three thumbnails of three images and the other three pages will each be a page for a larger view of one of the images. You will create a thumb nail sized image on the first page of each image which will be used as a link to the larger view of the image on a separate page. TRY TO MAKE YOUR PAGES SIMILAR TO THE EXAMPLES BELOW. You should have already. created a folder on your USB device called Project. Save all your pages and images inside of it. Photo Gallery Click on the image to see a larger vi C Ras Erdman Rock Creek Fr Downtown Portland, Oregon at Night This will be considered practices for Project. We will have worked on this together in class so that you should have: 1. SAVE AS your file as: lastname.html in your folder on your USB device. Be sure there is a .html extension on the file name. 2. In the tag of the <head> section put your Name. 3. Choose an appropriate background color (your choice) and text color (your choice). You just have to modify the body colors in the CSS in the <head> section. (If you wish, you may use an image for your background. See if you can find one on the Internet. We will discuss this in class using CSS to set the background image.) 4. Choose colors for your links (these are set as attributes in the CSS for links or anchor tags <a href=>. The link color should contrast well with the background color. For example, don't use blue as your background color and blue as your links color because the links won't show. Also, don't use colors which may have a bad contrast, such as, red on green. 5. Use a heading for your pages, such as Photo Gallery or something appropriate for the images, in Level 1 Heading <h1>, centered on your page. Don't forget to end your heading </h1>. Use CSS to format your heading tag. 6. Use the Tables. The default text alignment is "left" unless otherwise specified in your code. Position your text, other than the heading, as you desire. In the example all the page content has been centered. 7. Find a minimum of three large pictures you like from the Internet, or use your own images you may have scanned/saved onto your disk. (It is reccomended that your large images be no more than about 800 pixels wide by about 600 pixels high so they will display nicely on the page. If they are larger to start, you can resize them using Paint or other photo software.) 8. To create thumbnails of the larger pictures do the following below: A. First, right click and save the larger images of your choice into your folder on your USB device. B. Open the one of the larger pictures in MS Paint. Right click on your picture file name and choose Open with-Paint. 1. Go to the Resize and Skew feature under the Home tab to resize the entire picture. In the Horizontal and Vertical percent boxes of the Resize section enter the amount you wish to reduce each dimension. Keep the numbers the same so you don't distort the image. Make sure that Maintain aspect ratio is checked.

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

HTML PROJECT

2. Alternatively, crop the picture with the tools in Paint, that is, select a small portion of the picture, that still
retains the overall meaning, and copy it. Open a new paint window and paste it. Be sure that the image is only
as large as the portion you cropped. One way to avoid extra white space is to reduce the size of the area in
Paint before you paste.
C. Save As the thumb nail image with the same name as the large image plus an addition of an _T on the end of the
name. For example, if the larger image file was named portland.jpg then you would name your thumb nail
portland_T.jpg. DO NOT USE Save or you will cover over your larger image.
9. Arrange your thumb nails of the pictures on your first page any way you like, such as vertically, horizontally, diagonally or
centered on the page. The example has the images centered on the page.
The minimum HTML code to display an image is: <img src="picture_name.jpg" />, but to be correct we will also include
the width, height and alt attributes for all images. The alt attribute is required. A web page will not validate correctly
without it. The alt attribute makes the page accessible.
HTML5 requires a style attribute for the width and height. Always specify the width and height of an image. If width and
height are not specified, the page may/will flicker while the image loads. Therefore, in HTML5, to display an image the
code would be as follows:
<img src="mount_hood.jpg" alt="Mount Hood" style="width:304px;height:228px">
You may also use percentage values for the diamensions.
You will have to combine the image code with the code for a link to make the images into links. For example, to link a
thumbnail to a page with the larger image your link code would look like the following:
<a href="portland.html"><img src="portland_T.jpg" style="width: 250px;height:300px" alt="Portland, OR" /></a>
In the above example the image file, portland_T.jpg, becomes a link you can click to take you to a web page,
portland.html.
Repeat the process for the second and third image. They will appear beside each other on the page unless you use a
break tag, <br/>, to cause them to display vertically. You can use the &nbsp; character entity to create space between
your images horizontally.
10. Create your larger image pages and give them a logical name. For example, your project home page, the project's first
page, would be called lastname.html and the others might be called pic1.html and pic2.html. It would be better to name
the large picture pages with some reference to the picture name, such as portland.html. When you are finished with all
four pages you will have a sort of mini, four page website.
11. Follow the instructions above to make the images into links, such as in the code above. The thumb nail image will be the
link to your page with the larger image. The larger image will be the link back to your Photo Gallery home page
(lastname.html)
12. It is often advisable to have more than one way to link to another page (redundant links), so you may want to also put
text links to your picture pages and back to the picture home page. ONLY THE IMAGES HAVE TO BE LINKS BETWEEN
THE PAGES.
13. The larger picture pages should have a name for each picture on it's appropriate page in a Level 1 Heading, <h1>.
14. Include your name, in Level 3 Heading letters, <h3> on separate lines (no space between lines - use the break <br/> tag
after your name), centered at the bottom of each page. Use CSS in a selector to center your name.
Transcribed Image Text:2. Alternatively, crop the picture with the tools in Paint, that is, select a small portion of the picture, that still retains the overall meaning, and copy it. Open a new paint window and paste it. Be sure that the image is only as large as the portion you cropped. One way to avoid extra white space is to reduce the size of the area in Paint before you paste. C. Save As the thumb nail image with the same name as the large image plus an addition of an _T on the end of the name. For example, if the larger image file was named portland.jpg then you would name your thumb nail portland_T.jpg. DO NOT USE Save or you will cover over your larger image. 9. Arrange your thumb nails of the pictures on your first page any way you like, such as vertically, horizontally, diagonally or centered on the page. The example has the images centered on the page. The minimum HTML code to display an image is: <img src="picture_name.jpg" />, but to be correct we will also include the width, height and alt attributes for all images. The alt attribute is required. A web page will not validate correctly without it. The alt attribute makes the page accessible. HTML5 requires a style attribute for the width and height. Always specify the width and height of an image. If width and height are not specified, the page may/will flicker while the image loads. Therefore, in HTML5, to display an image the code would be as follows: <img src="mount_hood.jpg" alt="Mount Hood" style="width:304px;height:228px"> You may also use percentage values for the diamensions. You will have to combine the image code with the code for a link to make the images into links. For example, to link a thumbnail to a page with the larger image your link code would look like the following: <a href="portland.html"><img src="portland_T.jpg" style="width: 250px;height:300px" alt="Portland, OR" /></a> In the above example the image file, portland_T.jpg, becomes a link you can click to take you to a web page, portland.html. Repeat the process for the second and third image. They will appear beside each other on the page unless you use a break tag, <br/>, to cause them to display vertically. You can use the &nbsp; character entity to create space between your images horizontally. 10. Create your larger image pages and give them a logical name. For example, your project home page, the project's first page, would be called lastname.html and the others might be called pic1.html and pic2.html. It would be better to name the large picture pages with some reference to the picture name, such as portland.html. When you are finished with all four pages you will have a sort of mini, four page website. 11. Follow the instructions above to make the images into links, such as in the code above. The thumb nail image will be the link to your page with the larger image. The larger image will be the link back to your Photo Gallery home page (lastname.html) 12. It is often advisable to have more than one way to link to another page (redundant links), so you may want to also put text links to your picture pages and back to the picture home page. ONLY THE IMAGES HAVE TO BE LINKS BETWEEN THE PAGES. 13. The larger picture pages should have a name for each picture on it's appropriate page in a Level 1 Heading, <h1>. 14. Include your name, in Level 3 Heading letters, <h3> on separate lines (no space between lines - use the break <br/> tag after your name), centered at the bottom of each page. Use CSS in a selector to center your name.
In this Project assignment, you will use images as links and also create what amounts to a mini-website. Your task is to create
four pages as follows: the first page will be like a home page for three thumbnails of three images and the other three pages
will each be a page for a larger view of one of the images.
You will create a thumb nail sized image on the first page of each image which will be used as a link to the larger view of the
image on a separate page. TRY TO MAKE YOUR PAGES SIMILAR TO THE EXAMPLES BELOW. You should have already.
created a folder on your USB device called Project. Save all your pages and images inside of it.
Web Page Template - Microsoft Internet Explorer
Elle Ede Your Favorites Tools Help
Back
Search Face History
Address EXCIS 120 LabebPaweb Page Design Project Links
Photo Gallery
NININA METROPOLITAIN
Click on the image to see a larger view!
Steel Bridge in Winter
Entrance to Metro-Paris, France
Downtown Portland, Oregon
Russ Erdman
Rock Creek
My Computer
Downtown Portland Miss Int
Elke FI
32
F3RY
ACS 120 Page Patc
Downtown Portland, Oregon
at Night
Photo Gallery Home Pa
Russ Erdman
Rock Creek
Compute
This will be considered practices for Project. We will have worked on this together in class so that you should have:
1. SAVE AS your file as: lastname.html in your folder on your USB device. Be sure there is a .html extension on the file
name.
2. In the <title> tag of the <head> section put your Name.
3. Choose an appropriate background color (your choice) and text color (your choice). You just have to modify the body
colors in the CSS in the <head> section. (If you wish, you may use an image for your background. See if you can find one
on the Internet. We will discuss this in class using CSS to set the background image.)
4. Choose colors for your links (these are set as attributes in the CSS for links or anchor tags <a href="">>. The link color
should contrast well with the background color. For example, don't use blue as your background color and blue as your
links color because the links won't show. Also, don't use colors which may have a bad contrast, such as, red on green.
5. Use a heading for your pages, such as Photo Gallery or something appropriate for the images, in Level 1 Heading <h1>,
centered on your page. Don't forget to end your heading </h1>. Use CSS to format your heading tag.
6. Use the Tables. The default text alignment is "left" unless otherwise specified in your code. Position your text, other than
the heading, as you desire. In the example all the page content has been centered.
7. Find a minimum of three large pictures you like from the Internet, or use your own images you may have scanned/saved
onto your disk. (It is reccomended that your large images be no more than about 800 pixels wide by about 600 pixels high
so they will display nicely on the page. If they are larger to start, you can resize them using Paint or other photo software.)
8. To create thumb nails of the larger pictures do the following below:
A. First, right click and save the larger images your choice into your folder on your USB device.
B. Open the one of the larger pictures MS Paint. Right click on your picture file name and choose Open with-Paint.
1. Go to the Resize and Skew feature under the Home tab to resize the entire picture. In the Horizontal and
Vertical percent boxes of the Resize section enter the amount you wish to reduce each dimension. Keep the
numbers the same so you don't distort the image. Make sure that Maintain aspect ratio is checked.
This PC 3D Objects
Transcribed Image Text:In this Project assignment, you will use images as links and also create what amounts to a mini-website. Your task is to create four pages as follows: the first page will be like a home page for three thumbnails of three images and the other three pages will each be a page for a larger view of one of the images. You will create a thumb nail sized image on the first page of each image which will be used as a link to the larger view of the image on a separate page. TRY TO MAKE YOUR PAGES SIMILAR TO THE EXAMPLES BELOW. You should have already. created a folder on your USB device called Project. Save all your pages and images inside of it. Web Page Template - Microsoft Internet Explorer Elle Ede Your Favorites Tools Help Back Search Face History Address EXCIS 120 LabebPaweb Page Design Project Links Photo Gallery NININA METROPOLITAIN Click on the image to see a larger view! Steel Bridge in Winter Entrance to Metro-Paris, France Downtown Portland, Oregon Russ Erdman Rock Creek My Computer Downtown Portland Miss Int Elke FI 32 F3RY ACS 120 Page Patc Downtown Portland, Oregon at Night Photo Gallery Home Pa Russ Erdman Rock Creek Compute This will be considered practices for Project. We will have worked on this together in class so that you should have: 1. SAVE AS your file as: lastname.html in your folder on your USB device. Be sure there is a .html extension on the file name. 2. In the <title> tag of the <head> section put your Name. 3. Choose an appropriate background color (your choice) and text color (your choice). You just have to modify the body colors in the CSS in the <head> section. (If you wish, you may use an image for your background. See if you can find one on the Internet. We will discuss this in class using CSS to set the background image.) 4. Choose colors for your links (these are set as attributes in the CSS for links or anchor tags <a href="">>. The link color should contrast well with the background color. For example, don't use blue as your background color and blue as your links color because the links won't show. Also, don't use colors which may have a bad contrast, such as, red on green. 5. Use a heading for your pages, such as Photo Gallery or something appropriate for the images, in Level 1 Heading <h1>, centered on your page. Don't forget to end your heading </h1>. Use CSS to format your heading tag. 6. Use the Tables. The default text alignment is "left" unless otherwise specified in your code. Position your text, other than the heading, as you desire. In the example all the page content has been centered. 7. Find a minimum of three large pictures you like from the Internet, or use your own images you may have scanned/saved onto your disk. (It is reccomended that your large images be no more than about 800 pixels wide by about 600 pixels high so they will display nicely on the page. If they are larger to start, you can resize them using Paint or other photo software.) 8. To create thumb nails of the larger pictures do the following below: A. First, right click and save the larger images your choice into your folder on your USB device. B. Open the one of the larger pictures MS Paint. Right click on your picture file name and choose Open with-Paint. 1. Go to the Resize and Skew feature under the Home tab to resize the entire picture. In the Horizontal and Vertical percent boxes of the Resize section enter the amount you wish to reduce each dimension. Keep the numbers the same so you don't distort the image. Make sure that Maintain aspect ratio is checked. This PC 3D Objects
Expert Solution
steps

Step by step

Solved in 4 steps with 9 images

Blurred answer
Knowledge Booster
External Style Sheet
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education