ZuoTi.Pro
Question

the is my HTML and CSS code. I didn't attach the image or the CSS file...

the is my HTML and CSS code. I didn't attach the image or the CSS file because of the space limit.

two things I wanted to incorporate on this page are to make "MY TOP 3 MUSIC GENRES" blink using javascript and to make the video links autoplay using javascript

both should be using javascript

requirement: our professor told us not to use <div> or alert.

thank you for your help

<!DOCTYPE html>
<!-- I used w3school for the formatting of my code-->
<!-- I took the content of this page from Wikipedia-->
<html lang="en">
<head>
<!-- code for the style of the text-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--web page name -->
<title>Amha's web site</title>
<!-- it resize web page on diffrent platform -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<!-- header code-->
<header class="intro "> MY TOP 3 MUSIC GENERES </header>
<p lang="en"></p>
<hr>
<hr>
<br><br><br><br><br><br>
<!-- assigning the id and navigate to the different part of the page -->
<h2 class="nav">
<b><a class="a active " href="#perf">1. Hip Hop </a></b> <br>
<b><a class="b" href="#top">2. Rnb </a></b><br>
<b><a class="c" href="#trou">3. Trap music </a></b>
</h2>
<br><br><br><br><br>
<!--I took this line of code form w3school it is the code that links the web pages -->
<article class="dropdown">
<button class="dropbtn">Dropdown</button>
<article class="dropdown-content">
<h3>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/foodanddrinks/drinks.html">Drink's</a>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/foodanddrinks/foods.html">Food's</a>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/moviesandmusic/movies.html">movies</a>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/moviesandmusic/musics.html">music</a>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/sportandcars/cars.html">car's</a>
<a href="http://students.washington.edu/amhaa/tinfo230/assign3/sportandcars/sports.html">sports</a>
</h3>
</article >
</article>
<main>
<br>
<a id="perf"></a>
<hr>
<h2>1. Hip Hop </h2>
<!-- the content of the web page -->
<p class="important">
Hip hop music, also called hip-hop or rap music, is a music genre developed in the United States by inner-city African Americans
in the late 1970s which consists of stylized rhythmic music that commonly accompanies rapping, a rhythmic and rhyming speech that
is changed. It developed as part of hip hop culture, a subculture defined by four key stylistic elements: MCing/rapping,
DJing/scratching with turntables, break dancing, and graffiti writing.
<a href="https://youtu.be/sqyNqxbCfO8"> video link for "drip too hard" </a> <!-- This line of code is for a link -->
</p>
<!-- This line of code for insertion of images for the page -->
<img src="hip.jpg" alt="picture of hip hop " title="hip hop " width="200" height="150" />
</main>
<aside>
<!--assining id -->
<a id="top"></a>
<hr>
<h2>2. Rnb </h2>
<!-- the content of the web page -->
<p class="important">
Rhythm and blues, commonly abbreviated as RnB is a genre of popular music that originated in African American communities in the 1940s. The term
was originally used by record companies to describe recordings marketed predominantly to urban African Americans, at a time when "urbane, rocking,
jazz based music with a heavy, insistent beat" was becoming more popular.
<a href="https://youtu.be/450p7goxZqg "> link for all of me music video </a> <!-- This line of code is for a link -->
</p>
<!-- This line of code for insertion of images for the page -->
<img src="rnb.jpg" alt=" rnb picture " title="rnb " width="300" height="250"/>
</aside >
<section>
<hr>
<a id="trou"></a>
<h2>3. Trap music </h2>
<p class="important">
The trap is a style of Southern hip hop that was developed in the late 1990s to early 2000s in the Southern United States. It is typified by double or triple-time
sub-divided hi-hats, heavy, sub-bass layered kick drums from the Roland TR-808 drum machine, layered synthesizers and an overall dark, ominous or bleak atmosphere
and lyrical content. The term "trap" referred to places where drug deals take place. In the 2010s, artists crossbred trap with dubstep to create trap EDM
<a href="https://youtu.be/LVOS_lzgEpQ" > link for "Bad and Boujee music video" </a> <!-- link video -->
</p>
<!-- This line of code for insertion of images for the page -->
<img src="trap.jpg" alt=" trap music " title="music " width="300" height="250"/>
</section>
<br><br>
<h4>Do You like my webpage?</h4>
<!-- Radio button -->
<form>
<input type="radio" name="rate" value="yes" checked> Yes
<input type="radio" name="rate" value="no"> NO
</form>
<h4>My name is: </h4>
<!-- text validation -->
<form action=" validation">
First name:
<input type="text" name="firstname" value="Amha">
Last name:
<input type="text" name="lastname" value="Aygoda">
</form>
<!-- I took this line of code from w3school.com it is going to let the user choose what they want -->
<h4>Which movie do you like? for multiple selection press control or command</h4>
<form action="/action_page.php">
<select name="sport" multiple>
<option value="Hip Hop "> Hip Hop </option>
<option value="Hip Hop "> Rnb </option>
<option value="Trap music "> Trap music </option>
</select>
<input type="submit">
</form>
<!-- footer code for the page-->
<footer>
This web site is created by <cite>Amha Aygoda </cite> contact: [email protected]
</footer>
</body>
</html>
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Program -

<!DOCTYPE html>

<!-- I used w3school for the formatting of my code-->

<!-- I took the content of this page from Wikipedia-->

<html lang="en">

<head>

<script>

/* this will help in blinking the header */

window.addEventListener("load", function () {

var f = document.getElementById('headerMusic');

setInterval(function () {

f.style.display = (f.style.display == 'none' ? '' : 'none');

}, 1000);

}, false);

/* for autoplay of video you should get the id for the video and then set the autoplay of video = true */

/* for using autoplay functionality you should html5 video tag and down the video and give the src to you html */

var vid = document.getElementById("myVideo");

vid.autoplay = true;/* this will enable video autoplay to true , means you video will be played auto play */

vid.load();

</script>

<!-- code for the style of the text-->

<link rel="stylesheet" type="text/css" href="style.css">

<!--web page name -->

<title>Amha's web site</title>

<!-- it resize web page on diffrent platform -->

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

<meta charset="UTF-8">

</head>

<body>

<!-- header code-->

<header class="intro" style="height: 20px"> <span id="headerMusic">MY TOP 3 MUSIC GENERES </span></header>

<p lang="en"></p>

<hr>

<hr>

<br><br><br><br><br><br>

<!-- assigning the id and navigate to the different part of the page -->

<h2 class="nav">

<b><a class="a active " href="#perf">1. Hip Hop </a></b> <br>

<b><a class="b" href="#top">2. Rnb </a></b><br>

<b><a class="c" href="#trou">3. Trap music </a></b>

</h2>

<br><br><br><br><br>

<!--I took this line of code form w3school it is the code that links the web pages -->

<article class="dropdown">

<button class="dropbtn">Dropdown</button>

<article class="dropdown-content">

<h3>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/foodanddrinks/drinks.html">Drink's</a>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/foodanddrinks/foods.html">Food's</a>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/moviesandmusic/movies.html">movies</a>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/moviesandmusic/musics.html">music</a>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/sportandcars/cars.html">car's</a>

<a href="http://students.washington.edu/amhaa/tinfo230/assign3/sportandcars/sports.html">sports</a>

</h3>

</article>

</article>

<main>

<br>

<a id="perf"></a>

<hr>

<h2>1. Hip Hop </h2>

<!-- the content of the web page -->

<p class="important">

Hip hop music, also called hip-hop or rap music, is a music genre developed in the United States by

inner-city African Americans

in the late 1970s which consists of stylized rhythmic music that commonly accompanies rapping, a rhythmic

and rhyming speech that

is changed. It developed as part of hip hop culture, a subculture defined by four key stylistic elements:

MCing/rapping,

DJing/scratching with turntables, break dancing, and graffiti writing.

<a id="videoLink1" href="https://youtu.be/sqyNqxbCfO8"> video link for "drip too hard" </a>

<!-- This line of code is for a link -->

</p>

<!-- This line of code for insertion of images for the page -->

<img src="hip.jpg" title="hip hop " width="200" height="150" />

</main>

<aside>

<!--assining id -->

<a id="top"></a>

<hr>

<h2>2. Rnb </h2>

<!-- the content of the web page -->

<p class="important">

Rhythm and blues, commonly abbreviated as RnB is a genre of popular music that originated in African

American communities in the 1940s. The term

was originally used by record companies to describe recordings marketed predominantly to urban African

Americans, at a time when "urbane, rocking,

jazz based music with a heavy, insistent beat" was becoming more popular.

<a href="https://youtu.be/450p7goxZqg "> link for all of me music video </a>

<!-- This line of code is for a link -->

</p>

<!-- This line of code for insertion of images for the page -->

<img src="rnb.jpg" title="rnb " width="300" height="250" />

</aside>

<section>

<hr>

<a id="trou"></a>

<h2>3. Trap music </h2>

<p class="important">

The trap is a style of Southern hip hop that was developed in the late 1990s to early 2000s in the Southern

United States. It is typified by double or triple-time

sub-divided hi-hats, heavy, sub-bass layered kick drums from the Roland TR-808 drum machine, layered

synthesizers and an overall dark, ominous or bleak atmosphere

and lyrical content. The term "trap" referred to places where drug deals take place. In the 2010s, artists

crossbred trap with dubstep to create trap EDM

<a href="https://youtu.be/LVOS_lzgEpQ"> link for "Bad and Boujee music video" </a> <!-- link video -->

</p>

<!-- This line of code for insertion of images for the page -->

<img src="trap.jpg" title="music " width="300" height="250" />

</section>

<br><br>

<h4>Do You like my webpage?</h4>

<!-- Radio button -->

<form>

<input type="radio" name="rate" value="yes" checked> Yes

<input type="radio" name="rate" value="no"> NO

</form>

<h4>My name is: </h4>

<!-- text validation -->

<form action=" validation">

First name:

<input type="text" name="firstname" value="Amha">

Last name:

<input type="text" name="lastname" value="Aygoda">

</form>

<!-- I took this line of code from w3school.com it is going to let the user choose what they want -->

<h4>Which movie do you like? for multiple selection press control or command</h4>

<form action="/action_page.php">

<select name="sport" multiple>

<option value="Hip Hop "> Hip Hop </option>

<option value="Hip Hop "> Rnb </option>

<option value="Trap music "> Trap music </option>

</select>

<input type="submit">

</form>

<!-- footer code for the page-->

<footer>

This web site is created by <cite>Amha Aygoda </cite> contact: [email protected]

</footer>

</body>

</html>

For video auto you need to downlaod the video and play it using video tag of html5 and and then you can the video element by id and the autoplay of your video to true

example - download ExampleVideo and put into video url like this and then enable autoplay using the javascript

HTML CODE -

<video id="myVideo" width="320" height="240" controls>
<source src="ExampleVideo.mp4" type="video/mp4">
<source src="ExampleVideo.ogg" type="video/ogg">
</video>

JAVASCRIPT CODE -

var x = document.getElementById("myVideo");
x.autoplay = true;
x.load();

this will help in auto play

0 0
Add a comment
Know the answer?
Add Answer to:
the is my HTML and CSS code. I didn't attach the image or the CSS file...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • I cant complete this assignment, I have tried several ways shown in the tutorial but cant...

    I cant complete this assignment, I have tried several ways shown in the tutorial but cant seem to get it to validate, can anyone help? This is a basic JavaScript tutorial and will not validate with Jquery. Monroe Public Library Denise Kruschev manages the website for the Monroe Public Library in Monroe, Ohio. One of her responsibilities is to add content and links to the site that will be of interest to the library’s patrons. Denise has asked you to...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...

    Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page: <html lang="en"> <head> <title>Path of Light Yoga Studio</title> <link rel="stylesheet" href="yoga.css" /> </head> <body> <div id="wrapper"> <header> <h1>Path of Light Yoga Studio</h1> </header> <nav> <a href="index.html">Home</a> &nbsp; <a href="classes.html">Classes</a> &nbsp; <a href="schedule.html">Schedule</a> &nbsp; <a href="contact.html">Contact</a> </nav> <main> <img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2" height="300px" width="250px"> <h2>Find Your Inner Light</h2> <p> Path of Light Yoga Studio provides all levels of yoga practice in a tranquil, peaceful environment....

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

    I need help writting a Javascript function that does the following its for a HTML/CSS Shopping Cart Page CODE This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...

    How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>nitro site</title>     <link href="css/main.css" rel="stylesheet"/> </head> <body>     <header class="header">     <section class="navlist">         <img class="logo" src="assets/logobeans.png"/>         <h2 class="headertitle">nitro</h2>     <nav>         <ul>             <li><a href="index.html" target="_parent">About</a></li>             <li><a href="/html/menu.html" target="_blank">Menu</a></li>             <li><a href="/html/menu.html">Shop Now</a></li>         </ul>     </nav>     </section>     <section class="headerContainer">         <h1 class="heading">Nitro Coffee</h1>         <p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT