1. Engineering
  2. Computer Science
  3. i need help with this code how do i complete...

Question: i need help with this code how do i complete...

Question details

I need help with this code, how do I complete do this? This is what I currently have...

<!DOCTYPE html>

<html lang="en">

<style> div {

border: 1px solid #000;

margin: 5px 0px 5px 0px; /* Top, right, bottom, left margins */

} </style>

<head>

<title>Kirtan: Singing of Sikh Hymns</title>

<meta name="author" content="Jasvant Singh Dosanjh" />

<meta name="description" content="Basic Website that describes my favority hobby"/>

<style> div {

border: 1px solid #000;

margin: 5px 0px 5px 0px; /* Top, right, bottom, left margins */

}

</style>

<style>

div {

border-radius: 10px;

}

#header{

height: 200px;

background-color:blue;

border:1px solid blue;

margin:5px 10px 20px 10px;

color:white;

}

#sidebar{

display: block;

margin-left: 10px;

float: left;

background-color:blue;

border:1px solid red;

height: 300px;

width: 20%;

}

#content{

display: block;

margin-right: 10px;

float: right;

height: 300px;

width: 75%;

background-color:blue;

border:1px dotted red;

color:white;

}

#content *{

text-align: center;

}

#footer{

margin-bottom:10px;

margin-left: 10px;

margin-top: 20px;

margin-right: 10px;

display: block;

height: 200px;

background-color: blue;

width: 99%;

width: 99%;

float: left;

}

span{

display: block;

margin-left: auto;

margin-right: auto;

text-align: center;

margin-top: 100px;

font-size: 20px;

font-family: Calibri;

color: white;

}

</style>

</head>

<body>

<div id="header"><span>Header</span></div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="content"><span>Content</span></div>

<div id="footer"><span>Footer</span></div>

</body>

Now lets work on the header block. First, delete the border from the div element (we dont need it anymore), and then add the code in red style> div f margin: 5px 0px 5px epx; /* Top, right, bottom, left margins #header, #footer { background: #eee; #header, #sidebar, #content, #footer { border : 1px solid #000; /style> If youve followed along, your site should look like this right now laxeectThe Middle Now, let us move to the bane of the web developer. Ensuring that two divs float next to each other This has been done innumerable ways throughout the years, and if you search for put two divs next to each other youll probably get a wealth of StackOverflow answers, as well as out of date blog posts There are many ways to do this, here is one way. And yes, it validates. Were going to use the flex-box property of CSS3 (meaning, browsers that dont support CSS3 wont render it correctly). In your style block, add the following in red / Float two divs next to each other, with the right div expanding to fill the window / tima în { display: flex; #sidebar { width: 300px; #content { margin-left: 10px; padding: 10px; flex-grow: 1; It should now look like this. What the flex property does is allow divs to be side-by-side and to fill the available space Traditionally, this was done by using the float property and careful playing with margin values.Validation Make sure that your website passes the HTML validator. We will also be running it through the validator, so ensure that what youve put up on your Google Cloud website passes it. Filling the Page with Content Now that we have the basic layout, it is up to you to fill in the blanks. Remember, the purpose of this page is to describe your favorite thing. Remove all of the lorem text (all the placeholder text in each of your divs) and replace it with the following requirements 1) In the header div, give the page an appropriate title with an <h1> tag, where this is a short bit about what the website is (note, it is not CSI2520 thing). HW2, it should be about your favorite 2) Leave the sidebar div blank, but change its background color. 3) In the footer div, put a copyright symbol (using the HTML code), your name, and the current year. This should be inside of an <h6> tag. 4) In the content div, add the following: a. Two sections to describe your favorite thing, where each section has: i. An <h2> that titles the section ii. A <p> tag and write a short paragraph The first paragraph should be what the thing is, and the second paragraph should describe why it is your favorite thing. b. For each p tag, use at least three of the phrasing elements we covered in class. This can be something like <dfn>, <abbr>, <em>, etc. c. An image of your favorite thing (using the <img> tag). If you dont remember how to use the img tag, look it up on w3schools or look at your last homework assignment Take a screenshot of your website when you are done and paste it into Q1

Can anyone explain the number 5 and 7 from the questions below?

1. Please add the two screenshots from the lab section and insert them below. (30 points) What is the full URL of your homework submission? (5 points) → you can literally copy and paste the direct link to your Google Cloud website, this is just to make it easy for the TA and I to look things up here. 2. 3. Why did we use the div element to lay out each content area of the website? (5 points) 4. In the div ldentification section, why did we remove the border definition from all divs and add 5. What is the difference between the padding and margin properties in CSS? (5 points) 6. Go out to Google and look up the difference between the <b> and <strong>, and <i> and t only to the header, sidebar, content, and footer divs? (5 points) <em> tags. Why would you use one over the other (i.e., strong instead of b, and em instead of )? (5 points) 7. What is the difference between a <div> and a <span> tag? (5 points) 8. (Extra credit) Play around with the CSS styles and make your site a bit prettier. less than attractive to the eye. Right now it is

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution