Question: Create two web pages, linked back and forth to each other, with a well-structured directory. Required Code + Include elements form: links, images, & tables.
Create two web pages, linked back and forth to each other, with a well-structured directory.
Required Code
+ Include elements form: links, images, & tables. + Include links from one page (home) to the second page, and back (relative pathways) + Include a table showing examples of each image type, with pointers on when to use.
Instructions - Directory Structure
- In your Root DIR, create a single html page named: index.html
- In your Root DIR, create two more folders: img pages
- In the pages DIR, create a second page, name it: image-guide.html (this page will have info one using different file types of images)
Instructions - Images
Here you will locate three images (jpg, png, gif), save them, resize them (small, med. large)
- locate three images - one each that is appropriate to use as a JPEG, one as a PNG, & one as a GIF.
- Save them in your img DIR
- for each of the three images - save them in the img directory and name (or rename them) with a descriptive name.
- Rename each file to include the image dimensions, in pixels. For example: cats-560x620.jpg
- Using an image editor (Google or refer to your text), and for each of your three images, make copies and re-size into SMALL, MEDIUM, and LARGE IMAGES. Name each with the pixel sizes. For example, Id take cats500x600.jpg, copy it, resize it to 50 by 60 px, and name it: cats-SM-50x60.jpg.
- Make sure you keep the same aspect ratio as the original (or a cropped version). .
- You should end up with nine (9) images, three of each image type (png, gif, and jpg), and three sizes for each (sm, md, and lg).
Instructions - Home Page
- For the home page (index.html), create a basic valid page (doctype, html, meta, head, body, etc.).
- Include comments in your to indicate: your name, created date, and version (1.0?)
- Edit the page to create a navigation area w/2 links:
- Create a link to your second page and describe it as a guide for choosing image file types
Instruction - Img Page
use rowspan or colspan or break into multiple tables
- For the second page (image-guide.html), include a link to get back to the home page.
- For this page, include a header and content to describe its purpose
- Create an HTML table to list the different image types, describe when to use them, gives tips on naming images, and display your example images.
- Your table will be a reference where a user could easily learn about which image type to use and then use one of your example images - small, medium, or large. Ask yourself, could a user visit my page, learn when to use a jpg instead of gif (or png), and quickly see an example of each at different sizes?
- Make sure each of your elements are valid (i.e., uses the alt attribute) and uses the height and width attribute that matches the image dimensions.
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
