Question

In: Computer Science

Use a style sheet to define the following rules and implement the given HTML code. Please...

Use a style sheet to define the following rules and implement the given HTML code. Please
put your style information within the same file as the HTML code.
Rules
• Hyperlinks using the nodec class should display no decoration. • Hyperlinks should
display text in white with a green background color when the mouse pointer is held over
the link. (use the hover pseudo-class)
• Unordered lists not nested within any other lists should be displayed in blue text and
should be in bold.
• Ordered lists that are nested within one Unordered lists should be displayed in red
text.
• Unordered lists that are nested within one Unordered lists should be displayed in green
text and should be underlined.
• Replace “insert a web address of your choice” with a web address of your choice and
replace “Put title here” with a title that matches the URL.
HTML Body Code
<BODY>
<H2>
<a class="nodec" href="http://insert a web address of your choice.com">Put title here</a>
</H2>
<UL>
<LI>Macintosh OS</LI>
<LI>Microsoft</LI>
<OL>
<LI>Windows 98</LI>
<LI>Windows 2000</LI>
</OL>
<LI>Linux</LI>
<UL>
<LI>Redhat</LI>
<LI>Slackware</LI>
</UL>
<LI>OS/2</LI>
</UL>
</BODY>

Solutions

Expert Solution

Dear Student ,

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

Here a new web page with name "url.html" is created, which contains following code.

url.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Style sheet</title>

<meta charset="UTF-8">

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

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

<style>

/* style rule for hyperlink with class=nodec */

a.nodec {

text-decoration: none;

}

/* style rule for hyperlink when mouse pointer held over the hyperlink */

a.nodec:hover {

color: white;

background-color: green;

}

/* style rule for ul */

ul {

color: blue;

font-weight: bold;

}

/* style rule for ol in ul */

ul ol {

color: green;

font-weight: normal;

text-decoration: underline;

}

/* style rule for ul in ul */

ul ul {

color: green;

font-weight: normal;

text-decoration: underline;

}

</style>

</head>

<body>

<BODY>

<H2>

<a class="nodec" href="http://Amazok.com">Amazok.com</a>

</H2>

<UL>

<LI>Macintosh OS</LI>

<LI>Microsoft</LI>

<OL>

<LI>Windows 98</LI>

<LI>Windows 2000</LI>

</OL>

<LI>Linux</LI>

<UL>

<LI>Redhat</LI>

<LI>Slackware</LI>

</UL>

<LI>OS/2</LI>

</UL>

</BODY>

</body>

</html>

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

Output : Open web page url.html in the browser and will get the screen as shown below

Screen 1 :url.html

Screen 2:Screen when mouse is hover the hyperlink

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

venereology answered 1 year ago
Next > < Previous

Related Solutions

a style sheet was not new with HTML and even today other languages use a similar...
a style sheet was not new with HTML and even today other languages use a similar approach. JavaFX uses an almost identical style definition as CSS for its style sheets. .NET's Windows Presentation Foundation (WPF) uses an XML like style definition in a language named XAMLAll these different technologies have one thing in common: they separate what is being displayed from how it is being displayed. Why? What is the benefit of doing so, if any? What are the drawbacks,...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following: Folder structure Short description of what layout does You should not include the content of css or how you defined your css
Please write a python code for the following. Use dictionaries and list comprehensions to implement the...
Please write a python code for the following. Use dictionaries and list comprehensions to implement the functions defined below. You are expected to re-use these functions in implementing other functions in the file. Include a triple-quoted string at the bottom displaying your output. Here is the starter outline for the homework: a. def count_character(text, char): """ Count the number of times a character occurs in some text. Do not use the count() method. """ return 0 b. def count_sentences(text): """...
Please write a python code for the following. Use dictionaries and list comprehensions to implement the...
Please write a python code for the following. Use dictionaries and list comprehensions to implement the functions defined below. You are expected to re-use these functions in implementing other functions in the file. Include a triple-quoted string at the bottom displaying your output. Here is the starter outline for the homework: g. def big_words(text, min_length=10): """ Return a list of big words whose length is at least min_length """ return [] h. def common_words(text, min_frequency=10): """ Return words occurring at...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Please provide HTML code for the following: - Create a page that lists a set of...
Please provide HTML code for the following: - Create a page that lists a set of audio files and shows their duration - Create a page that lists a set of video files and plays a different video when you click on the play icon
Q2. Update the given code 2 to implement the following problem: Create a class triangle Use...
Q2. Update the given code 2 to implement the following problem: Create a class triangle Use dynamic memory allocation to create 10 objects of the class triangle Set default height and base of all created objects (triangle) to 5 and 10 respectively using a constructor Ask user to change only the height of the 5th triangle Print height and base of all (10) triangles to demonstrate that you did the task correctly Deallocate the 5th object Print height and base...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
Given the following HTML code (You are not allowed to add additional id or class to...
Given the following HTML code (You are not allowed to add additional id or class to the file test.html) test.html <h1>Down the Rabbit-Hole</h1> <div class="bb" >        <p class="bb" >Alice was beginning to get very tired ...</p>    <br/>    <p> Alice </p> </div> <div id="aa">    <p>Down, down, down. Would the fall never come to an end</p>    <div> <p class="bb" >I wonder if I shall fall right …</p> </div> </div> <h1> Upcoming Event </h1> <p> Excitng Event: 101 </p> <p> A limited number...
take the following html code and make it work for html validator. heres the ,html file...
take the following html code and make it work for html validator. heres the ,html file <!DOCTYPE html> <html lang="en">    <head>        <title> GettingStarted</title>        <meta charset="utf-8">        <link href="Style.css" rel="stylesheet">    </head>       <body>        <header><h1>GettingStarted</h1></header>        <nav>               <b>        <a href="Home.html">Home</a>&nbsp;        <a href="GettingStarted.html">Getting Started</a>&nbsp;        <a href="MaterialsNeeded.html">Materials Needed</a>&nbsp;                      <a href="TroubleShooting.html">TroubleShooting</a>&nbsp;        <a href="InfoMaterials.html">Infomation on materials</a>&nbsp;   ...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT