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

Create, test, and validate an HTML document that has a form with the following controls: a....
Create, test, and validate an HTML document that has a form with the following controls: a. A text box to collect the user's name b. Four checkboxes, one for each of the following items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four 25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c. A collection of three radio buttons that are labeled as follows: i. Visa ii. Master...
Create, test, and validate an HTML document that defines a table with columns for state, state...
Create, test, and validate an HTML document that defines a table with columns for state, state bird, state flower, and state tree. There must be at least five rows for states in the table.
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, test, and validate an HTML document for yourself, including your name, address, and email address....
Create, test, and validate an HTML document for yourself, including your name, address, and email address. If you are a student, you must include your major and your grade level. This document must use several headings and <em>, <strong>, <hr />, <p>, and <br /> tags.
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...
Write an HTML file that create the following web page. my first nested list steps of...
Write an HTML file that create the following web page. my first nested list steps of backing a cake Important notes: You should have to copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot for your output web page and paste it as a part of your answer.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT