Question

In: Computer Science

Create a webpage with Margins, Padding, Alignment, and Floating: Begin with a basic web page using...

Create a webpage with Margins, Padding, Alignment, and Floating:

  1. Begin with a basic web page using the 5 required html tags.
  2. Add 4 or 5 paragraphs of text from a page in this chapter.
  3. Format the text to appear as on the page using < p>, < h1>, < ol> and < li> tags.
  4. Enclose the content with a < div> tag.
  5. With an internal stylesheet, set the body element to have no margins and a gray background.
  6. Style the div element with a width of 400 pixels, no top and bottom margins, automatic left and right margins, 10 pixels of padding all around, a 1 pixel black border and a white background.
  7. You finish page should look like this: (https://s3.amazonaws.com/blackboard.learn.xythos.prod/58771c61a39f4/3132468?response-cache-control=private%2C%20max-age%3D21600&response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27Screen%2520Shot%25202020-10-08%2520at%25205.09.17%2520PM.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20201009T150000Z&X-Amz-SignedHeaders=host&X-Amz-Expires=21600&X-Amz-Credential=AKIAYDKQORRYTKBSBE4S%2F20201009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=663f55cb392c78ef4fc1c5827d8925574c7fe821c186ba18165606c3f2e43814) but choose something else!

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}

.box {
float: left;
width: 33.33%;
padding: 50px;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>
<h1>Hello Word</h1>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ccc">
<p>Some text inside the box.</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Some text inside the box.</p>
</div>
</div>
<ol>
<li>
   AAAA
</li>
<li>
   BBBB
</li>
</ol>

<p>Note that we also use the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.</p>

</body>
</html>


Related Solutions

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Create a web page using PHP that allows the users to create an account (a username...
Create a web page using PHP that allows the users to create an account (a username and a password). There should be a login page that allows users to create an account by entering their preferred username and password. The same page should also let users login if they already have an account. If a user is logged in successfully , they should be able to enter a comment and also read the comments entered by others previously.
Create following webpage in HTML : 1. Login Page This is the first page the user...
Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...
DNS Query and Web Page Access Time: Suppose you click on a hyperlink on a webpage...
DNS Query and Web Page Access Time: Suppose you click on a hyperlink on a webpage you are currently viewing -- this causes a new web page to be loaded and displayed. Suppose the IP address for the host in the new URL is not cached in your local DNS server (AKA local name server), so your Client (browser) makes a DNS query to obtain the IP address before the page can be requested from the web server. To resolve...
Create a new website using C# & ASP.Net in Visual Studio: 1. Create a web page...
Create a new website using C# & ASP.Net in Visual Studio: 1. Create a web page to access a database and display the data from a table by providing an SQL statement. Create the page with these requirements:     create label, textbox and button     the textbox will capture the SQL statement     the button will process the statement and display the results 2. Add necessary data access pages to your project. 3. Display the data in Gridview
Make a modest or simple Web page using Python flask. The basic components of HTML should...
Make a modest or simple Web page using Python flask. The basic components of HTML should be included. The Web page should have at least 3 Headings(<h1>), paragraph (<p>), comments (<!-- -->), ordered list, unordered list, three links to website, and should display time & date. Example: <html>     <head>         <title>Page Title</title>     </head> <body>     ..new page content.. </body> </html>
Create a web page using PHP and HTML that contains a list of movie names available...
Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...
Create an “About Me” HTML webpage. Use the <h2> Tag to give the page a header...
Create an “About Me” HTML webpage. Use the <h2> Tag to give the page a header with your Full name. The header needs to be in Plum color(Any color other than black, blue – Make the page look good). The webpage should have a background color that compliments the header color. Set the content(Anything about yourself!) of the page inside <p> tags and use a different color for it. Save your file as “AboutMe.html” and upload the file to BB...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below). Table 1 – Discounts Quantity Purchased Discount 1 – 29 0% 30 - 59 10% 60 + 15% Example: If a customer purchases 40 family membership, their total price (CTotal) would be: COriginalPrice = 30*40=1200 DMainDiscount = 1200*0.1=120 CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 =...
Using HTML: Create a Book of the Month Club Web site. The home page should describe...
Using HTML: Create a Book of the Month Club Web site. The home page should describe the current month's selection, including book title, author, publisher, ISBN, and the number of pages. Create separate Web pages for book selections in each of the last three months. Add links to the home page that opens each of the three Web pages. Save the home page as BookClub.html, and save the Web Pages for previous months using the name of the month. BOOK:...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT