Using the images provided, build the page to the specifications shown in the figure below. To be complete, the web page must contain the following:
The basic HTML elements such as , , , , ,
Look at figure below for title.
Regular Web page text should be arranged in paragraphs. The About Us and Services text is available below. You will need to type the text for Contact and Links.
Use the highest-level headings on the page for About Us, Services, Contact, and Links. You will need to type the headings. If you haven't already, check the progress of your Web page in the browser. Any errors that you find should be corrected before proceeding. At this point, you should have all the text on the Web page, except for the navigation links at the top of the page.
Insert the images provided so they appear as shown in the figure below. Images must have appropriate width, height, and alternate text associated with them. You can find the image width and height by opening the images in any graphics program, such as the Paint application that comes with Windows. Look at the Paint application's status bar for the dimensions. If status bar is not viewable, click the View tab. Use alt text that makes sense to you. Be sure to check the progress of your Web page in the browser often. Correct any errors now .
Link to CSS, create navigation links, and create anchors
Link the html page to the style sheet .
Links use element to indicate content and function (will not use a skip link) Links have the id="mainnav".
Home will be linked to index.html. The other links will take the user down to the sections of the page indicated in the figure. For example, if the user clicks the Contact link at the top of the page, the page should jump down to the Contact section. To test this, you will need to make your browser window small enough so that the entire page does not fit within it without having to scroll down (see page 112). First, you will need to create the anchors (steps 2-3) and then you will create the links to the anchors (step 6). Use whatever id values you feel are short, descriptive and appropriate.
Create style rules for your links with CSS Pseudo-Classes on the external style sheet .
Not been visited: #FF00FF
Visited: #FFB8FF
Hover: #7BB25D
Active: #D1FFB8
Be sure the link colors change in appearance in different states.
The "not been visited" link color is a dark pink. Visited links are light pink, hover is green, and active is lighter green. Note: if you've already clicked your links once and they're now in a visited state, you won't see the dark pink color, but the light pink instead.
Create a table in the Schedule section using colors similar to the ones used for the Pseudo-Classes in step 6. Match column number and row information. Colors should be close and placement is default on the page, which is left alignment.
When you insert the "Click here for a valuable coupon" image, it should be designed so that when the user clicks on it, it opens up the fpcoupon.pdf file in a new window. Make sure the image has an appropriate width, height and alternative text.
To ensure the image will have no link border in any browser, create a style rule in the main.css so that the border value is 0
Create an unordered list for the Services. Add the CSS list-style-type property so that the bullets are square
Add absolute links in the Links section of the Web page
The text HorsemanshipX should be a hyperlink that, when clicked, takes the user to the web site
Browse the Internet and locate another Horse related link and add that as the second link. Try searching on "Natural Horsemanship"
Links need to open in a new window
Create a div container to contain all Web page content with a fixed width of 960px and centered.
Create a div tag, with the id="wrapper". The div tags should be within the body tag to surround all the content within the body.
All Web page content
The Web page will have a fixed with of 960px and be centered in the browser window, therefore create a style rule in the main.css for #wrapper.
#wrapper
{
width: 960px;
margin-right: auto;
margin-left: auto;
}
Test the Web page in a browser and resize the browser window larger and then smaller. Notice that the content is centered with an even margin on the left and right.
. We created a div element, with an id of box, to surround all the Web page content that appears in the browser.
Add to the #wrapper style rule in the htmain.css to specify font family, size and color.
Font family tahoma, arial, sans-serif
Declare a font size of 1em
Font color #663300
Add to the #wrapper a style rule in the main.css to specify a background color of #f5f5dc and padding of 15px.
Use the generic inline span element and a style rule on the external style sheet to bold the name Mary Rider in the first sentence of the first paragraph. Use whatever id is short, appropriate and descriptive.
Add a favicon, Unit F 144-145.
You can use the Favicon site to locate an appropriate favicon or create your own favicon at
In the search box, type in "horse", pick a icon, download and add a link to reference the icon
Again, check Web page in your web browser. Correct errors as necessary and save your files.
Add a comment to BOTH your HTML and CSS code that states you are the author of the page .
Validate your HTML and CSS and be sure no errors are found.
Text to be entered in above in web page is as follows:
Mary Rider started a riding school in the early 1990's when she was given 3 horses as a gift. Although there were many riding businesses in the area, Mary could not bring herself to place her "horses" in the hands of others. She quickly decided to start a business and became the riding instructor of choice for family and friends. After some encouragement, she opened up her own riding academy in 1991. Mary takes pride in providing a happy and safe horse handling and riding instructions for newby to advanced horse owners. She also provides a homey environment for horses during their time at Happy Trails. With her partner and daughter, July, she offers extensive "horse whispering techniques" and trail rides of different lengths: 1/2 hour, 1 hour or 2 hour lessons, which correspond to the different levels of riders, beginners, intermediate and advanced riders.
At Happy Trails, we offer a wide variety of services to fit the needs of horse enthusiest. No appointment required.
Friendly Horse Talk: Teaches you how to communicate with your horse as if you were another horse. Get your horse to respect you as they respect each other in the wild.
Comfort Grooming and Clipping: Guaranteed to teach you how to groom your horse so they ask for more and clip your horse so that they win every class.
- Add three more bullets of your creative choice.
I also have the files and pictures i need inserted. I need to have this completed no later than Sunday by noon.