///////////////////////////////HTML5/CSS homework help//////////////////////////

ID: 3808333 • Letter: #

Question

///////////////////////////////HTML5/CSS homework help///////////////////////////////////////////////

Unit 2: Homework

Part I: The HTML Elements: Creating Web Sites

General Directions

Overview

Remember, in order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

Demonstrate creativity and problem-solving skills.

Analyze web programs in order to test, debug, and improve them. (& in the Discussions)

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Please review the general directions from week 1.

In week 1 you learned all about the HTML elements. This week you will learn about the meta tags, external CSS, favicons, external javascripts, work with hyperlinks, modify the appearance of text elements, breaks, use CSS selectors, and organize content using lists, use new HTML 5 elements (sections, article, header, footer, aside, summary and details).

To accomplish this task, you will also insert external CSS and JS files to help you layout your page.

The first problem you will use basic html and css to layout a page. Then in problem 2 you will investigate altenate techniques using HTML 5 and external JavaScript libraries (Bootstrap and JQuery) to layout your pages. Problem 2 will involve significant creativity, thought and additional reading beyond the textbook.

Remember your site this term is a ‘Rummage Sale” site. So you should be configuring your site to look like a rummage sale web site!

Problem 1

Your boss has asked you to create a template for the new web site.

Learning Outcomes

Demonstrate creativity and problem-solving skills.

Analyze web programs in order to test, debug, and improve them

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall HTML structure

Create a Word document and save this to your web site in the homework folder after you have completed both problems.

Gather your images and resources

You will need at least one image that is 960 by 180 and one that is 180 by 100 for the week2-1logoandweek2-1banner. In your code you’ll need to refer to the file types for your images (Use only gif, jpg, and png). Don’t spend too much time! You can always go back and play with your images after you code your program.

Create the skeleton code in the head section of the week2-1.html page

Insert the html and head tags, a comment with your name, the page name and date, the title tag,metatags (including the description and keywords), closing head tag, opening and closing body tags, and closing html tags.

Above the title tag enter this meta tag to set the window to open to the full scale.

Give the page title a descriptive name about your project.

Below the title, insert a link to a style sheet. The style sheet will be located in the css folder. The page will be named week2-1.css.

Note that every time we refer to a relative file you should review the URL. In this case it’s “../css/week2-1.css”. You need to remember to include the “../” in your file path.

Under the link tag, insert a set of opening and closing style tags. Configure the type property to betext/css and rel to stylesheet.

Create a style rule for a class named content. Set the font size to 10 pixels and the color to CC9900.

Use the HTML 5 header tag to group the heading section

On the line after the opening body tag, insert a comment that says, “insert header here”.

Insert a pair of opening and closing header tags. (You can assume when I say insert a tag, to insert both opening and closing tags!)

Inside the header tag insert an image tag. Set the class to “logo”. Set the alternative text to “Logo”. Set the image source to the week2-1.logo in the images directory.

Insert the navigation tags (nav tag). Set the class of the nav tag to topMenu.

Inside the nav tags, insert three sets of hyperlink () tags. The first should be Week 2-1. Create the other two links to go to the other two homework pages. Each link will go to a page on your homework.

After the closing navigation tag, insert a heading 1 element that has a catchy title to your web site.

Use the HTML 5 section tag layout the body of the page

On the line after the closing header tag, insert a comment that says “insert main section here”

Insert a pair of div tags. Assign the section the class called “main”.

Inside the div tags, insert a comment, “insert left content”

Then insert a pair of aside tags. Assign the aside the class called “leftAside”.

Inside the left aside, insert a pair of nav tags. Set the class to “leftMenu”.

Below the aside tags, insert a comment that says, “insert main content”.

Then insert a pair of section tags. Assign the section the class called “content”.

Use the HTML 5 footer tag to group the footing section

On the line after the closing div tag, insert a comment that says “insert footer here”

Insert a pair of footer tags.

Inside the footer tag, insert a paragraph. Inside the paragraph type “Created by John Smith”. But replace John Smith with your name.

Create a hyperlink. Set the text displayed to be your name above. Set the href attribute to your email address. (mailto:youremailaddress@yourplace.com)

Create the navigation

Inside the nav tags and inside the left aside insert unordered list tags (<ul>)

Create four bullets for your list using the list item tags (<li>).

Inside each list item, insert a hyperlink (). The hyperlinks should be configured similar to what you created in the top menu. You should have links to each page on your web site, plus the home page. This includes for all of the pages from week 1. (Example:

Week 2-1

)

The last link should go to the W3Schools.com web site and should say W3Schools.

After the closing nav tag, insert a line break using the
tag.

Insert a paragraph with the p tag. Insert some text content here.

After the closing p tag, insert another line break.

Configure the content area with content and HTML elements and attributes.

In the content section (

), insert a heading 2 tag that says “Welcome to My Rummage Store”.

For the rest of the page, insert content and text using a variety of HTML elements and attributes you learned from all of your readings.

Step 2. Validating your HTML

Validate the code using the validator.w3.org tool as you did last week

If you have any errors fix them before moving on. When you are finished, take a screen shot of the validation report showing you have validated your HTML.

Step 3. Create the Cascading Style Sheet and customize the program

Some of the style rules are structural, such as the height, width, margin, padding, float. Changes can make big impacts on your overall page layout. The header, main div and footer all need the same basic layout so they line up on the page in this page design. Layouts will vary with your preferences. For this activity, use the basic layout. You can use different layouts in problem 2. Other styles such as fonts, colors, styles of text have more impact on the design and less impact on the layout.

Create the style rules

In the style sheet, add a comment with your name, data and file name.

Insert comments for the body, header section, main section, left aside, content section and body.

Configure the default body rule

In the body section insert a body tag that sets the margin to 0 and auto.

Set the font to black, Verdana, Arial, Helvetica, and sans-serif and size 12 points. (All fonts are in points for this class and measurements in pixels).

Set the background color is 042841.

Configure the header section style rules

Under the header section comment, insert the style rules:

The header selector should be set to:

960 by 100 pixels, no padding, margin is 0 and auto in order to center the header, and the background color is d8e6b3.

The background image should point to your week2-1banner image.

The background size is 960 by 100, not repeating, with a z-index of 100.

The heading 2 selectors will align in the center with right adding at 225, and set color to white, font to Papyrus.

Add a text shadow. (Use text-shadow: 2px 1px #042841)

The logo class used for the logo image is set to float left, with a width of 180 and height of 100.

Configure the styles for the mouseover links

The links are configured using the topMenu class.

The topMenu class has padding on the right set to 40, text align set to right, color set to 042841, text decoration set to none so there is no underline with the links, font size set to 9 and family set to Verdana, Geneva, sans-serif.

Set the default hyperlinks and the visited hyperlinks in the topMenu class to this color: 141919.

Set the hover hyperlinks in the topMenu class to this color: A69055. This creates the mouseover effect!

Hint: When referring to html selectors inside another element where we just know the class, use:classname selector {style rules} For example, use: .topMenu a:hover {color:#ff0000;}

Configure the style for the left aside content and navigation

The navigation links are in the aside.

Configure the aside using the selector because it’s our only aside in the page. Set the width to 180, margin to 0 and auto, vertical alignment to top, padding to 0 and display to ‘table-cell’.

Configure the paragraph inside the aside, set the padding to 0 and center the text alignment and the left padding to 5 pixels.

For the unordered list inside the aside, set the margin to 0 and padding to 10 and 20, the background color to 1A5476, and the list syle and text decoration to none.

For the default link and visited links, inside the aside, the font family is set to Verdana, Geneva, sans-serif, with no text decoration, and the color is set to white.

For the hyperlinks inside the aside, the color for the hover state is set to CC9900, creating the mouseover effect.

Hint: When referring to html selectors inside another element where we just know the selector name, useparentSelector childSelector {style rules} For example, use: aside p {color:#ff0000;}

Configure the main section of the page.

Like the header element you need to set the content area.

Set the content width to 780 because it can’t take up all the width. Add 0 and 10 for padding, set vertical alignment to the top and the display to table-cell.

Set the color of the heading 2 tags inside the content class to 042841.

Set the default and visited links inside the content class to have no decoration and set the color to 141919.

Set the color of the mouseover links (hover) to be A69055.

Configure the footer

Like the header and main div tags, you need to configure the content area structure.

Set the properties for the content class.

Set the dimensions to 960, 10 and 0 for padding, margin is 0 and auto, center text alignment.

Set the background color to 508d8d and the text color to d8e6b3.

Set the clear property to both.

Create custom HTML, CSS and content

It is expected that you will add your own content, html elements, styles, images, colors and style rules to make this page, ‘uniquely yours’ You will be given creativity for going beyond the basic assignment and customizing the page.

Congratulations!

You’ve just created your first modern web page!

Oh, did I say modern? That’s relative. It’s a common layout. But today with mobile devices, if we view this page, it’s hard to see the text unless we zoom in. So we’re going to look at another page, to help you see why the current trend is to use programs like JQuery and Bootstrap to help us create our web pages.

/////////////////////////////////////////////////////////////////////////////////

Week2-1.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Annual Rummage Sale//Come see our Rum</title>
<link rel="stylesheet" href="../css/week2-1.css">
<style type="text/css" rel="stylesheet">
.content {
font-size:10px;
color: #CC9900;
}
</style>

</head>
<body>

<header>

</nav>
<h1>RUMMAGE THROUGH OUR RUMMAGE SALE</h1>
</header>

<div class="main">

<aside class="leftAside">
<nav class="leftMenu">
<ul>
<li><a href="week2-1.html">Week 2-1</a></li>
<li><a href="week1-2.html">Week 1-2</a></li>
<li><a href="week1-1.html">Week 1-1</a></li>
<li><a href="www.W3Schools.com">W3Schools</a></li>
</ul>
</nav>
<br />
<p>
I should insert some context here. This will be a paragraph later on.
I just need more words in here.Bigger paragraph, relating to a rummage sale.
I don't know what else to include.abfhejwcbwahbcjhjewbcafhejfba
adfnewjkfnjecnejcnejwkncwjcn
cjwnjwefwjefwueinfwejnfewnfcewki
ejkwncweiucbnwieufuiwefuieq
</p>
<br />
</aside>

<section class="content">
<h2>Welcome to my Rummage Store</h2>
<p>Hello</p>
</section>
</div>

<footer>
<p>Created by John Smith.</p>
<a href="mailto:email@yahoo.com">email@yahoo.com</a>
</footer>
</body>
</html

/////////////////////////////////////////////////////////////////////////////////////////

Css

/*body*/
body
{
/*Jack Huynh, week2-1.css*/
margin: 0 auto;
font-family:black,Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
background:#042841;
color:black;
}
/*header comment*/
header{
padding:0;
width: 960px;
height: 100px;
margin: 0 auto;
align-content:center;
background: #d8e6b3;
background-image: url("../images/week2-1banner.jpg");
background-repeat:no-repeat;
z-index:100;
}
h2{
font-family: Papyrus;
color: white !important;
align-content:center;
padding-right:225px;
text-shadow: 2px 1px #042841
}
.logo{
float:left;
width:180px;
height:100px;
}
.topMenu{
padding-right:40px;
text-align:right;
color:#042841;
text-decoration:none;
font-size:9px;
font-family:Verdana,Geneva,sans-serif;
}
a, .topMenu.default a, .topMenu.visited{
color:#141919;
}
a:hover, .topMenu:hover{
color:#A69055;
}
/*Left aside*/
aside{
width:180px;
margin: 0 auto;
vertical-align: top;
padding:0;
display:table-cell;
}
aside p{
padding:0;
text-align:center;
padding-left:5px;
}
aside.ul{
margin:0 auto;
padding: 10px 20px;
background-color:#1A5476;
list-style-type: none;
text-decoration:none;
}
ul li, ul li:visited{
font-family:Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
color:white;
}
aside a:hover{
color:#CC9900;
}
/*content section*/
.content{
width:780px;
padding:0px 10px;
vertical-align:top;
display:table-cell;
}
.content h2{
color:#042841;
}
.content a, .content a:visited{
color:#141919;
text-decoration:none;
}
.content a, .content a:hover{
color:#A69055;
}
/*footer*/
.content{
margin: 0 auto;
text-align: center;
padding: 960px 10px 10px;
background-color: #508d8d;
color: #d8e6b3;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

I am unsure of the format of the CSS as it does not look right on the webpage, I think that is the main focus of my problem is. What I am asking is to check if I did the html and css right. It looks kind of distorted right now. Example: The 'Welcome to my Rummage Store' (h2) is at the bottom but I do not think it is suppose to be there.

Explanation / Answer

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Annual Rummage Sale//Come see our Rum</title>

<style type="text/css" rel="stylesheet">
body
{
/*Jack Huynh, week2-1.css*/
margin: 0 auto;
font-family:black,Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
background:#042841;
color:black;
}
/*header comment*/
header{
padding:0;
width: 960px;
height: 100px;
margin: 0 auto;
align-content:center;
background: #d8e6b3;
background-image: url("../images/week2-1banner.jpg");
background-repeat:no-repeat;
z-index:100;
}
footer{
padding:0;
width: 960px;
height: 100px;
margin: 0 auto;
align-content:center;
background: #d8e6b3;
float: left;
margin-left: 203px;

}

footer p{padding: 12px;}
footer a{padding: 12px;}
h2{
font-family: Papyrus;
color: white !important;
align-content:center;
padding-right:225px;
text-shadow: 2px 1px #042841
}
article{
width: 960px;
height: 430px;
margin: 0 auto;
background-color: #508d8d;
float: left;
margin-left: 203px;
}
.logo{
float:left;
width:180px;
height:100px;
}
.topMenu{
padding-right:40px;
text-align:right;
color:#042841;
text-decoration:none;
font-size:9px;
font-family:Verdana,Geneva,sans-serif;
}
a, .topMenu.default a, .topMenu.visited{
color:#141919;
}
a:hover, .topMenu:hover{
color:#A69055;
}
/*Left aside*/
aside{
width:400px;
margin: 0 auto;
vertical-align: top;
padding:0;
display:table-cell;

}
aside p{
padding:0;
text-align:left;
padding-left:5px;
}
aside.ul{
margin:0 auto;
padding: 10px 20px;
background-color:#1A5476;
list-style-type: none;
text-decoration:none;
}
ul li, ul li:visited{
font-family:Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
color:white;
}
aside a:hover{
color:#CC9900;
}
section{float: left;}
/*content section*/
.content{
width:500px;
padding:0px 10px;
vertical-align:top;
display:table-cell;
margin: 0 auto;
background-color: #508d8d;
color: #d8e6b3;
float: left;
}
.content h2{
color:#042841;
}
.content a, .content a:visited{
color:#141919;
text-decoration:none;
}
.content a, .content a:hover{
color:#A69055;
}
.main{float: left; width:400px;}

/*footer*/
/*.content{
margin: 0 auto;
text-align: center;
padding: 960px 10px 10px;
background-color: #508d8d;
color: #d8e6b3;
}*/
.content {
font-size:10px;
color: #CC9900;
}
</style>

</head>
<body>
<header>
<img src="../images/week2-1.logo.png" class="logo" alt="logo" />

<nav class="topMenu">
<a href="week2-1.html">Week 2-1</a>
<a href="week1-2.html">Week 1-2</a>
<a href="week1-1.html">Week 1-1</a>
</nav>
<h1>RUMMAGE THROUGH OUR RUMMAGE SALE</h1>
</header>
<article>
<section class="content">
<h2>Welcome to my Rummage Store</h2>
<p>Hello</p>
</section>
<div class="main">

<aside class="leftAside">
<nav class="leftMenu">
<ul>
<li><a href="week2-1.html">Week 2-1</a></li>
<li><a href="week1-2.html">Week 1-2</a></li>
<li><a href="week1-1.html">Week 1-1</a></li>
<li><a href="www.W3Schools.com">W3Schools</a></li>
</ul>
</nav>
<br />
<p>
I should insert some context here. This will be a paragraph later on.
I just need more words in here.Bigger paragraph, relating to a rummage sale.
I don't know what else to include.abfhejwcbwahbcjhjewbcafhejfba
adfnewjkfnjecnejcnejwkncwjcn
cjwnjwefwjefwueinfwejnfewnfcewki
ejkwncweiucbnwieufuiwefuieq
</p>
<br />
</aside>


</div>
</article>

<footer>
<p>Created by John Smith.</p>
<a href="mailto:email@yahoo.com">email@yahoo.com</a>
</footer>
</body>
</html

Navigate

///////////////////////////////HTML5/CSS homework help//////////////////////////

////////////////C++ if else statement not working////////////// #include<iostrea

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

///////////////////////////////HTML5/CSS homework help//////////////////////////

Question

Explanation / Answer

Related Questions

Navigate