ZuoTi.Pro
Question

Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm...

Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm trying to figure out how to get the 'planned stadium' photo to be shifted to the right and parallel to the 'Ground View 2018' picture.

Below is the attached code and thanks for your help:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="Ian Kusnadi" />
<title>Tottenham Spurs Fan Page</title>

</head>

<style type="text/css">
a:link {
    color: #e6f2ff;
}
a:visited {
    color: #99caff;
}
.maintext {
   margin: 10;
   font-family: Cambria, Cochin, Georgia, Times, Times New Roman;
   color: #e6f2ff;
   padding-left:50px;
   padding-right:50px;
   font-size: 20.5px;  
   background-color: #333333;
   opacity: 0.8;
}
h2 {
   color: #66b0ff;
}
h3 {
   color: #66b0ff;
}
</style>

<style type="text/css">
.topnav {
   overflow: hidden;
   background-color: #333;
}
.topnav a {
   float: none;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 20px;
}
.topnav a:hover {
   background-color: #ddd;
   color: black;
}
.topnav a.active {
   background-color: #3396ff;
   color: white;
}

.logo {
   vertical-align: middle;
   margin-left: 20px;
   margin-right: 20px;
}
</style>

<style type="text/css">
.column {
    float: left;
    width: 50%;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>


<body>
<div class="topnav">
   <img alt="Spurs Logo" longdesc="spurs_logo.jpg" src="spurs_logo.jpg" height="100" width="110" class="logo" />
   <a class="active" href="#home">Home</a>
   <a class="active" href="#become a fan">Become a Fan</a>
   <a class="active" href="#media">Media</a>
   <a class="active" href="#contact">Contact Us</a>
</div>

<div class="maintext">
   <h2 id="home">Tottenham Spurs Membership</h2>
   <p>Welcome to the Tottenham Spurs fan page. </p>
   <p>Here you can view membership information before purchasing on the official website.
   Feel free to view the media of one of the Premier League's best teams.</p>
   <p>If you have any questions feel free to contact us or we can also direct you to the official website. </p>
</div>

<div class="maintext" >
   <h3 id="become a fan">What it means to be a Hotspur</h3>
   <p>Here is a directory of general perks when becoming an official member:
       <ul>
           <li>
           <a href="https://www.tottenhamhotspur.com/fans/membership/benefits-and-packs/" target="_blank">Benefits and Packs</a></li>
           <li>
           <a href="https://www.tottenhamhotspur.com/fans/membership/ticketing-benefits/" target="_blank">Ticketing Benefits</a></li>
           <li>
           <a href="https://www.tottenhamhotspur.com/fans/membership/moments/" target="_blank">The Hotspur Experience</a></li>
       </ul>
   </p>
   <p>Videos on why support Tottenham Hotspurs?:
      
   </p>
   <ul>
       <li><a href="https://www.youtube.com/watch?v=bpWeZz28258">
       What does it mean to be a Tottenham fan?</a></li>
       <li>Some Tottenham Fans:
       <a href="https://www.youtube.com/watch?v=0ux4Wk6vtf0">Why I'm a Spurs Fan</a>,
       <a href="https://www.youtube.com/watch?v=D2CePBZJtQs">We Are Tottenham</a>,
       and <a href="https://www.youtube.com/watch?v=3aEDwPZExkg">
       The Best of Tottenham Fans</a></li>
   </ul>
   <p>Spurs' Best Premier League Goals:
   <iframe width="380" height="210" src="https://www.youtube.com/embed/9Y2DTqT_6cI"
   frameborder="0" allow="autoplay; encrypted-media" align="middle" allowfullscreen></iframe></p>
  
   <p>2017 / 2018 Spurs Season Review:
   <iframe width="380" height="210" src="https://www.youtube.com/embed/wLCQi9kmUfc"
   frameborder="0" allow="autoplay; encrypted-media" align="middle" allowfullscreen></iframe></p>
   <p>&nbsp;</p>
  
</div>

<div class="maintext">
   <h3 id="media">Photos</h3>
   <p>Tottenham Spurs are waiting for their new stadium to be built. Take a look
       <a href="http://new-stadium.tottenhamhotspur.com/image-gallery/">here</a>, for the full gallery of the work in progress.
      
  
   <table style="width: 100%">
       <tr>
           <td>
           <img alt="Latest Progress 2018" height="300" longdesc="latest_progress_2018.jp"
           src="latest_progress_2018.jpg" width="480" />&nbsp;</td>
           <td>
           <img alt="Aerial View 2018" height="300" longdesc="aerial_view_2018.jpg"
           src="aerial_view_2018.jpg" width="480" /></td>
       </tr>
       <tr>
           <td>
           <img alt="Ground View 2018" height="300" longdesc="ground_view_2018.jpg"
           src="ground_view_2018.jpg" width="480" /></td>
       </tr>
       <tr>
           <td>
           <img alt="Planned Stadium" height="300" longdesc="planned_stadium.jpg"
           src="planned_stadium.jpg" width="480" />&nbsp;</td>
       </tr>

</table>

</p>
<p>&nbsp;</p>


</div>

<div class="maintext" >
   <h3 id="contact">Contact Us</h3>
   <p>Tottenham's headquarters and offices are located in London, England.</p>
  
   <div class="row">
       <div class="column"><a href="https://www.google.com/maps/place/Tottenham,+London+N17+8HJ,+UK/@51.604966,-0.072279,13z/data=!4m5!3m4!1s0x48761e9e6a360c5d:0xd3d2a790ea2bb941!8m2!3d51.6049674!4d-0.0722785?hl=en-US">Headquarters</a><br>
           <iframe src="https://maps.google.com/maps?q=Tottenham%20Hotspur%20Football%20Club%20Lilywhite%20House%2C%20782%20High%20Rd%2C%20London%20N17%200BX%2C%20United%20Kingdom&t=&z=13&ie=UTF8&iwloc=&output=embed"
           width="400" height="300" frameborder="1" style="border:0" allowfullscreen></iframe>
       </div>
       <div class="column"><a href="https://www.google.com/maps/place/Tottenham+Spurs+Ticket+Office/@51.6052929,-0.0673345,15z/data=!4m5!3m4!1s0x0:0xd6f48baddd525110!8m2!3d51.6052929!4d-0.0673345">Ticketing Office</a><br>
           <iframe src="https://maps.google.com/maps?q=Park%20Ln%2C%20London%20W1K%207AN%2C%20UK&t=&z=13&ie=UTF8&iwloc=&output=embed"
           width="400" height="300" frameborder="1" style="border:0" allowfullscreen></iframe>
       </div>
       &nbsp;
   </div>

</div>

</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

Dear Student ,

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

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

Note :Here all images are used for demonstration purpose only.

demoHTML.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<meta name="author" content="Ian Kusnadi" />

<title>Tottenham Spurs Fan Page</title>

</head>

<style type="text/css">

a:link {

color: #e6f2ff;

}

a:visited {

color: #99caff;

}

.maintext {

margin: 10;

font-family: Cambria, Cochin, Georgia, Times, Times New Roman;

color: #e6f2ff;

padding-left:50px;

padding-right:50px;

font-size: 20.5px;

background-color: #333333;

opacity: 0.8;

}

h2 {

color: #66b0ff;

}

h3 {

color: #66b0ff;

}

</style>

<style type="text/css">

.topnav {

overflow: hidden;

background-color: #333;

}

.topnav a {

float: none;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 20px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #3396ff;

color: white;

}

.logo {

vertical-align: middle;

margin-left: 20px;

margin-right: 20px;

}

</style>

<style type="text/css">

.column {

float: left;

width: 50%;

}

.row:after {

content: "";

display: table;

clear: both;

}

</style>


<body>

<div class="topnav">

<img alt="Spurs Logo" longdesc="spurs_logo.jpg" src="spurs_logo.jpg" height="100" width="110" class="logo" />

<a class="active" href="#home">Home</a>

<a class="active" href="#become a fan">Become a Fan</a>

<a class="active" href="#media">Media</a>

<a class="active" href="#contact">Contact Us</a>

</div>

<div class="maintext">

<h2 id="home">Tottenham Spurs Membership</h2>

<p>Welcome to the Tottenham Spurs fan page. </p>

<p>Here you can view membership information before purchasing on the official website.

Feel free to view the media of one of the Premier League's best teams.</p>

<p>If you have any questions feel free to contact us or we can also direct you to the official website. </p>

</div>

<div class="maintext" >

<h3 id="become a fan">What it means to be a Hotspur</h3>

<p>Here is a directory of general perks when becoming an official member:

<ul>

<li>

<a href="https://www.tottenhamhotspur.com/fans/membership/benefits-and-packs/" target="_blank">Benefits and Packs</a></li>

<li>

<a href="https://www.tottenhamhotspur.com/fans/membership/ticketing-benefits/" target="_blank">Ticketing Benefits</a></li>

<li>

<a href="https://www.tottenhamhotspur.com/fans/membership/moments/" target="_blank">The Hotspur Experience</a></li>

</ul>

</p>

<p>Videos on why support Tottenham Hotspurs?:

</p>

<ul>

<li><a href="https://www.youtube.com/watch?v=bpWeZz28258">

What does it mean to be a Tottenham fan?</a></li>

<li>Some Tottenham Fans:

<a href="https://www.youtube.com/watch?v=0ux4Wk6vtf0">Why I'm a Spurs Fan</a>,

<a href="https://www.youtube.com/watch?v=D2CePBZJtQs">We Are Tottenham</a>,

and <a href="https://www.youtube.com/watch?v=3aEDwPZExkg">

The Best of Tottenham Fans</a></li>

</ul>

<p>Spurs' Best Premier League Goals:

<iframe width="380" height="210" src="https://www.youtube.com/embed/9Y2DTqT_6cI"

frameborder="0" allow="autoplay; encrypted-media" align="middle" allowfullscreen></iframe></p>

<p>2017 / 2018 Spurs Season Review:

<iframe width="380" height="210" src="https://www.youtube.com/embed/wLCQi9kmUfc"

frameborder="0" allow="autoplay; encrypted-media" align="middle" allowfullscreen></iframe></p>

<p>&nbsp;</p>

</div>

<div class="maintext">

<h3 id="media">Photos</h3>

<p>Tottenham Spurs are waiting for their new stadium to be built. Take a look

<a href="http://new-stadium.tottenhamhotspur.com/image-gallery/">here</a>, for the full gallery of the work in progress.

<table style="width: 100%">

<tr>

<td>

<img alt="Latest Progress 2018" height="300" longdesc="latest_progress_2018.jp"

src="latest_progress_2018.jpg" width="480" />&nbsp;</td>

<td>

<img alt="Aerial View 2018" height="300" longdesc="aerial_view_2018.jpg"

src="aerial_view_2018.jpg" width="480" /></td>

</tr>

<tr>

<td>

<img alt="Ground View 2018" height="300" longdesc="ground_view_2018.jpg"

src="ground_view_2018.jpg" width="480" /></td>

<td>

<img alt="Planned Stadium" height="300" longdesc="planned_stadium.jpg"

src="planned_stadium.jpg" width="480" />&nbsp;</td>

</tr>

</table>

</p>

<p>&nbsp;</p>


</div>

<div class="maintext" >

<h3 id="contact">Contact Us</h3>

<p>Tottenham's headquarters and offices are located in London, England.</p>

<div class="row">

<div class="column"><a href="https://www.google.com/maps/place/Tottenham,+London+N17+8HJ,+UK/@51.604966,-0.072279,13z/data=!4m5!3m4!1s0x48761e9e6a360c5d:0xd3d2a790ea2bb941!8m2!3d51.6049674!4d-0.0722785?hl=en-US">Headquarters</a><br>

<iframe src="https://maps.google.com/maps?q=Tottenham%20Hotspur%20Football%20Club%20Lilywhite%20House%2C%20782%20High%20Rd%2C%20London%20N17%200BX%2C%20United%20Kingdom&t=&z=13&ie=UTF8&iwloc=&output=embed"

width="400" height="300" frameborder="1" style="border:0" allowfullscreen></iframe>

</div>

<div class="column"><a href="https://www.google.com/maps/place/Tottenham+Spurs+Ticket+Office/@51.6052929,-0.0673345,15z/data=!4m5!3m4!1s0x0:0xd6f48baddd525110!8m2!3d51.6052929!4d-0.0673345">Ticketing Office</a><br>

<iframe src="https://maps.google.com/maps?q=Park%20Ln%2C%20London%20W1K%207AN%2C%20UK&t=&z=13&ie=UTF8&iwloc=&output=embed"

width="400" height="300" frameborder="1" style="border:0" allowfullscreen></iframe>

</div>

&nbsp;

</div>

</div>

</body>

</html>

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

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

Screen 1 :demoHTML.html

Tottenham Spurs Fan Page ← → c s localhost:8080/demoHTMLhtml Photos Tottenham Spurs are waiting for their new stadium to be built. Take alook here, for the full gallery ofthe work in progress. BE IEVE IN it wont be easy but itlI be worth it WORK HARD DREAM BIG OuR FUTUREs CREATED BY WHAT YOU DO TODAY NOT TOMORROW

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

0 0
Add a comment
Know the answer?
Add Answer to:
Hi, trying to arrange the fourth photo under media tab for a mock web page. I'm...
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

  • <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...

    <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • As part of this assignment we are using the base Gallery HTML and writing JavaScript code...

    As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...

  • 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>...

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <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...

  • 1. Predict the Result.Draw and write a brief description of the Web page that will becreated...

    1. Predict the Result.Draw and write a brief description of the Web page that will becreated with the following XHTML code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CircleSoft Designs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { background-color: #FFFFCC;color: #330000;font-family Arial,Helvetica,sans-serif; }.content { width: 750px; }</style></head>Apply Your Knowledge<body><div class="content"><h1>CircleSoft Design</h1><div><strong>CircleSoft Designs will </strong><ul><li>work with you to create a Web presence that fits yourcompany</li><li>listen to you and answer your questions</li><li>utilize the most appropriate technology for your sites:JavaScript, Java, PHP, databases,...

  • div <h3 class-"fancy"> Hi </h3> cul> <li>Location 1 </li>cli> Location 2</li</ul p id-greeting"> Hello </p> p>...

    div <h3 class-"fancy"> Hi </h3> cul> <li>Location 1 </li>cli> Location 2</li</ul p id-greeting"> Hello </p> p> Welcome to <span> Pizza City </span>lp> <div id- "food" class-"fancy"> Here is our menu <h3> Pizzas </h3> <ul> <li>Pepperoni </li><li> Cheese </li/ul> <h3> Sandwiches </h3> ul> li>Philly/libclis Italian</lis <luls /div> </div> Write the javascript code (one line of code) to achieve the following for the HTML above. The HTML will not be modified. Write the javascript code (1 line) to change the background color...

  • 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....

  • Problems: Develop a web page that allows a user to try out different text and background...

    Problems: Develop a web page that allows a user to try out different text and background color combinations by clicking buttons. Use Javascript to implement the functionalities. Below are two screen shots of the working application. Clicking the buttons at the bottom changes either the foreground color or the background color. The following descriptions are about the details. Specifically, you have to implement: An HTML file should include the following features (3 points) Some texts (Anything you like) Put the...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

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