Question

In: Computer Science

FOR HTML Web scripting Complete the following: Create and test an HTML document that has six...

FOR HTML Web scripting

Complete the following:

  • Create and test an HTML document that has six short paragraphs of text that describe various aspects of the state in which you live. You must define three different paragraph styles, p1, p2, and p3. The p1 style must use left and right margins of 20 pixels, a background color of pink, and a foreground color of blue. The p2 style must use left and right margins of 30 pixels, a background color of black, and a foreground color of yellow. The p3 style must use a text indent of 1 centimeter, a background color of green, and a foreground color of white. The first and fourth paragraphs must use p1, the second and fifth must use p2, and the third and sixth must use p3.  Modify your index.html page to include a link to this page.
  • Create and test an HTML document that describes nested ordered lists of cars. The outer list must have three entries: compact, midsize, and sports. Inside each of these three lists there must be two sublists of body styles. The compact- and midsize-car sublists are two door and four door; the sports-car sublists are coupe and convertible. Each body-style sublist must have at least three entries, each of which is the make and model of a particular car that fits the category. The outer list must use uppercase Roman numerals, the middle lists must use uppercase letters, and the inner lists must use Arabic numerals. The background color for the compact-car list must be pink; for the midsize-car list, it must be blue, for the sports-car list, it must be red. All styles must be in a document style sheet.  Modify your index.html page to include a link to this page.

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

NOTE :MAKE REQUIRED CHANGES AS PER NEED IN THE CONTENTS.

state.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>State Page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- style is used for internal stylesheet -->

<style>

/* style for p1 */

.p1{

margin-left: 20px;

margin-right: 20px;

background-color: pink;

color: blue;

}

/* style for p2 */

.p2{

margin-left: 30px;

margin-right: 30px;

background-color: black;

color: yellow;

}

/* style for p3 */

.p3{

text-indent: 1cm;

margin-left: 30px;

margin-right: 30px;

background-color: green;

color: white;

}

</style>

</head>

<body>

<p class="p1">This state has historical bindings.The state is known for culturl activities.</p>

<p class="p2">The state has produced many sports persons.</p>

<p class="p3">State is coverd with sea around it.</p>

<p class="p1">State is one of the economical capital of the country.</p>

<p class="p2">State has contains art and movie culture. </p>

<p class="p3">

State includes lots of industrial sectors like automobile , IT etc.

</p>

</body>

</html>

******************************

state.html :

====================================

cars.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Cars Page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<ol type="I">

<li style="background-color: Pink">compact

<ol type="A">

<li> two door</li>

<ol>

<li>Ford , Figo</li>

<li>Maruti Suzuki , WagonR</li>

<li>Hundai, Santro</li>

</ol>

<li> four door</li>

<ol>

<li>Mahondra , Scorpio</li>

<li>Maruti Suzuki , Baleno</li>

<li>Tata , tiago</li>

</ol>

</ol>

</li>

<li style="background-color: blue">midsize

<ol type="A">

<li> two door</li>

<ol>

<li>Tata, Nano</li>

<li>Wolkswagon , Polo</li>

<li>Toyato , Qualis</li>

</ol>

<li> four door</li>

<ol>

<li>Tata, Fortuner</li>

<li>Audi , Q7</li>

<li>BMW,X4</li>

</ol>

</ol>

</li>

<li style="background-color: red">sports

<ol type="A">

<li>coupe </li>

<ol>

<li>Shevrolet, Sparks</li>

<li>Jeep, Compas</li>

<li>Maruti Suzuki , Brezza</li>

</ol>

<li>convertible</li>

<ol>

<li>Maruti Suzuki, Scross</li>

<li>Wolkswagon , Vento</li>

<li>Toyato , Altis</li>

</ol>

</ol>

</li>

</ol>

</body>

</html>

****************************

cars.html :

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.


Related Solutions

1. An HTML document that’s generated by a web application is a ________________________ web page. 2....
1. An HTML document that’s generated by a web application is a ________________________ web page. 2. An easy way to log the progress of an application in Chrome’s Console panel is to insert __________________ methods at critical points in the code. 3. The childNodes property of a DOM object returns a/an ______________________ of the child nodes for that object. 4. The ___________________ method of an array can be used to concatenate the elements of the array into a single string.​...
Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of...
Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of the images from lab 2 in approximately the center of the page; centering need not be exact. Below the image, place three button elements labeled with the names of items from lab 2. (One of them must be the name of the item you chose to display.) Pressing a button should change the displayed image to that of the item named on the button....
Create and test an HTML document for yourself, including your name, address, and electronic mail address....
Create and test an HTML document for yourself, including your name, address, and electronic mail address. If you are a student, you must include your major and your grade level. If you work, you must include your employer, your employer’s address, and your job title. This document must use several headings and <em>, <strong>, <hr />, <p>, and <br /> tags. 2.2 Add pictures of yourself and at least one other image (of your friend, spouse, or pet) 2.3 Add...
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...
Develop and test an HTML document to use the DOM 2 event model that has text...
Develop and test an HTML document to use the DOM 2 event model that has text boxes for apple (59 cents each), orange (49 cents each), and banana (39 cents each), along with a Submit button. These text boxes take a number, which is the purchased number of the particular fruit. Add reality checks to the text boxes of the document to ensure that the input values are numbers in the range from 0 to 99. Each of the text...
Develop and test an HTML document that has text boxes for apple (69 cents each), orange...
Develop and test an HTML document that has text boxes for apple (69 cents each), orange (59 cents each), and banana (49 cents each), along with a Submit button. These text boxes take a number, which is the purchased number of the particular fruit. Add a max property value of 99 and a min property value of 0. Add event handlers using the min and max properties to check on values input through the text boxes of the document to...
Use HTML5 to create a document that contains the following text: Internet and World Wide Web...
Use HTML5 to create a document that contains the following text: Internet and World Wide Web How to Program: Fifth Edition Welcome to the world of Internet programming. We have provided coverage for many Internet-related topics. Use h1 for the title (the first line of text), p for text (the second and third lines of text). Insert a horizontal rule between the h1 element and the p element. Open your new document in a web browser to view the marked-up...
Create a web application for a daily planner in HTML. Please include testing in the files...
Create a web application for a daily planner in HTML. Please include testing in the files and show correct code formatting.
2. The HTML document on the following page consists of JavaScript code executed when the document...
2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...
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...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT