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.


Related Solutions

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...
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...
write php code for buying and selling web using sql, javascript ,html ,css style
write php code for buying and selling web using sql, javascript ,html ,css style
Please change this code to follow the rules. The program must not use global variables. In...
Please change this code to follow the rules. The program must not use global variables. In another words, it must use local variables and pass-by-value or pass-by-reference parameters. #include <iostream> #include <string> #include <algorithm> using namespace std; struct expense { string Desc; double exp; }; expense arr[100]; int c = 0; void menu(); //1. show all void showArray(){ if (c>0){ for(int i=0;i<c;i++){ cout<<"AMOUNT("<<arr[i].exp<<") DESC"<<arr[i].Desc<<")"<<endl; } }else{ cout<<"There is no expense entry available"; } menu(); } //2. spend void addArray(){ string...
Create a form using the following HTML elements at a minimum. Style the form in your...
Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...
Please complete in Python and neatly explain and format code. Use snake case style when defining...
Please complete in Python and neatly explain and format code. Use snake case style when defining variables. Write a program named wordhistogram.py which takes one file as an argument. The file is an plain text file(make your own) which shall be analyzed by the program. Upon completing the analysis, the program shall output a report detailing the shortest word(s), the longest word(s), the most frequently used word(s), and a histogram of all the words used in the input file. If...
Please complete in Python and neatly explain and format code. Use snake case style when defining...
Please complete in Python and neatly explain and format code. Use snake case style when defining variables. Write a program named wordhistogram.py which takes one file as an argument. The file is an plain text file(make your own) which shall be analyzed by the program. Upon completing the analysis, the program shall output a report detailing the shortest word(s), the longest word(s), the most frequently used word(s), and a histogram of all the words used in the input file. If...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT