ZuoTi.Pro
Question

HTML only!!! Add an image logo.gif (230*230) in a web page so that: When the visitor...

  • HTML only!!!
  • Add an image logo.gif (230*230) in a web page so that:
    • When the visitor clicks the upper half of this image, the visitor will be directed to your university homepage.
    • When the visitor clicks the lower half of this image, the visitor will be directed to your own homepage.
    • Save your file as hw3.html, load your file in a web browser, and paste the page display result here.
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

hw3.html

<html><!--start html tag-->
<head><!--start head tag-->
<title>CSS Template</title><!--add title here-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--link external css-->

</head><!--end head-->
<body><!--start body tag-->
<header>
<h2>Add Header File </h2><!--Here it is header-->
<IMG SRC="logo.png" id="mainimage" WIDTH=230 HEIGHT=230 usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,115,115" href="Homepage.html">
<area shape="rect" coords="0,115,230,230" href="OwnPage.html">
</map>
<input type="text" placeholder="Please Username From here" name="username">
<input type="text" placeholder="Please Password From here" name="password">
<input type="button" Value="login" name="login">
</header>

<section>
<nav>
    <ul>
      <li><a href="#">Navigation1</a></li><!--Navigation here-->
      <li><a href="#">Navigation2</a></li>
      <li><a href="#">Navigation3</a></li>
    </ul>
</nav>


<article>
    <h1>Here is our Content <input type="text" class="content"placeholder="Please Search From here" name="Search"></h1><!--Content part here-->
</article>
   </article>
     <nav id="myright">
    <ul>
      <li><a href="#">Sidebar1</a></li><!--Sidebar here-->
      <li><a href="#">Sidebar2</a></li>
      <li><a href="#">Sidebar3</a></li>
    </ul>
</nav>

</section>

<footer>
<p>Here Is footer</p><!--footer here-->
</footer>
</body>
</html>

Homepage.html

<html><!--start html tag-->
<head><!--start head tag-->
<title>CSS Template</title><!--add title here-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--link external css-->
</head><!--end head-->
<body><!--start body tag-->
<header>
<h2>Home Page this </h2><!--Here it is header-->
<input type="text" placeholder="Please Username From here" name="username">
<input type="text" placeholder="Please Password From here" name="password">
<input type="button" Value="login" name="login">
</header>

<section>
<nav>
    <ul>
      <li><a href="#">Navigation1</a></li><!--Navigation here-->
      <li><a href="#">Navigation2</a></li>
      <li><a href="#">Navigation3</a></li>
    </ul>
</nav>


<article>
    <h1>Here is our Content <input type="text" class="content"placeholder="Please Search From here" name="Search"></h1><!--Content part here-->
</article>
   </article>
     <nav id="myright">
    <ul>
      <li><a href="#">Sidebar1</a></li><!--Sidebar here-->
      <li><a href="#">Sidebar2</a></li>
      <li><a href="#">Sidebar3</a></li>
    </ul>
</nav>

</section>

<footer>
<p>Here Is footer</p><!--footer here-->
</footer>
</body>
</html>

OwnPage.html

<html><!--start html tag-->
<head><!--start head tag-->
<title>CSS Template</title><!--add title here-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css"><!--link external css-->
</head><!--end head-->
<body><!--start body tag-->
<header>
<h2>Own Page here </h2><!--Here it is header-->
<input type="text" placeholder="Please Username From here" name="username">
<input type="text" placeholder="Please Password From here" name="password">
<input type="button" Value="login" name="login">
</header>

<section>
<nav>
    <ul>
      <li><a href="#">Navigation1</a></li><!--Navigation here-->
      <li><a href="#">Navigation2</a></li>
      <li><a href="#">Navigation3</a></li>
    </ul>
</nav>


<article>
    <h1>Here is our Content <input type="text" class="content"placeholder="Please Search From here" name="Search"></h1><!--Content part here-->
</article>
   </article>
     <nav id="myright">
    <ul>
      <li><a href="#">Sidebar1</a></li><!--Sidebar here-->
      <li><a href="#">Sidebar2</a></li>
      <li><a href="#">Sidebar3</a></li>
    </ul>
</nav>

</section>

<footer>
<p>Here Is footer</p><!--footer here-->
</footer>
</body>
</html>


mystyle.css

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}
header {
    background-color: #666;
    padding: 30px;
    text-align: center;
    font-size: 35px;
    color: white;
}
nav {
    float: left;
    width: 10%;
    height: 300px;
    background: #ccc;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
#myright {
    float: right;
    width: 10%;
    height: 300px; /* only for demonstration, should be removed */
    background: #ccc;
    padding: 20px;
}


article {
    float: left;
    padding: 20px;
    width: 80%;
    background-color: #f1f1f1;
    height: 300px;
}


section:after {
    content: "";
    display: table;
    clear: both;
}
input[type=text] {
  
    padding: 6px 20px;
    margin: 0px 900px;
    box-sizing: border-box;
}
input[type=password] {
  
    padding: 6px 20px;
    margin: 0px 900px;
    box-sizing: border-box;
}
input[type=button] {
  
    padding: 6px 20px;
    margin: 0px 900px;
    box-sizing: border-box;
}
footer {
    background-color: #777;
    padding: 10px;
    text-align: center;
    color: white;
}

@media (max-width: 600px) {
    nav, article {
        width: 100%;
        height: auto;
    }
}

output:

if you still have any Problem regarding this question please comment and if you like my code please appreciate me by thumbs up thank you.........

0 0
Add a comment
Know the answer?
Add Answer to:
HTML only!!! Add an image logo.gif (230*230) in a web page so that: When the visitor...
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

  • JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web...

    JUDY'S HTML TUTORIAL MENU CREATING YOUR FIRST WEB PAGE The best way to make a web page is to just dive right in. Open Notepad. To open notepad in Windows, click the windows icon in the lower left corner of the screen and then type "notepad." Notepad is a text editor. Other text editors you may consider are TextPad, Sublime Text, or NotePad++. Do not use Word or WordPad; they are word processors. If you are using an Apple computer...

  • HTML Web Page project: Need help to create a web page exactly as the example below...

    HTML Web Page project: Need help to create a web page exactly as the example below using HTML. I need the source code. Page 1 of CA272 Midterm Welcome to your name's CA272 Midterm Text In this class, I learned how to... 1. create an X)HTML web page, where I can 2. change the size of my font, 3. change the color of my fonts, 4. change my font style, 5. and change the background color of my web page....

  • Suppose within your web browser you click on a link to obtain a web page. The...

    Suppose within your web browser you click on a link to obtain a web page. The IP address for the associated URL is not cached in your local host, so a DNS look up is necessary to obtain the given IP address. Further suppose that 3 DNS servers are visited before your host receives the IP address form DNS. The round trip time between the client and the ithDNS server is Ti(1≤i≤3), and that between the jthDNS server and the...

  • HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page,...

    HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...

  • In this assignment you will combine HTML, PHP, and SQL in order to create a web...

    In this assignment you will combine HTML, PHP, and SQL in order to create a web form that allows a manager to add films to the sakila database. You will also create a method to allow the manager to view a list of all films along with their related information, and a list of actors in the movies. Task 1 Create an initial HTML page titled manager.html with 2 buttons. The first button will be labeled “View Films”, and the...

  • Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...

    Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Daniel's Movie Page</title> </head> <body> <a href="hobbies.html">Hobbies</a> <h1>Movies and Actors</h1> <ol> <li class="ol-list1">Gravity</li> <li>Avenger</li> <li>Marshal</li> <li>Interstellar</li> <li>Dark Knight</li> <li>Superman</li> </ol> <ul> <li class="ul-list1">Robet Downey jr.</li> <li>Sharuk Khan</li> <li>Ranbir Kapoor</li> <li>Sidhhart Malhotra</li> <li>Angela Joli</li> <li>Leonardo DiCaprio/li> </ul> <h2>Favorite Movie</h2> <p> <b>Gravity:</b> The movie portrayed what happens to an astronaut if he/she is pushed away from spaceship.It was terrifying how much...

  • HTML / CSS Content Requirements Create a home page with the following elements and settings: Set...

    HTML / CSS Content Requirements Create a home page with the following elements and settings: Set the background, font colors, and “theme” to match those used in lab assignment #1 using an external css file; inline styling should be used only where necessary to override styling from the external css H1 element, centered at the top of the page, with “Thank you for choosing Your Company Name. . . “ text* Div or other container with at least 5 sentences...

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

  • Add event-handling code for the "Load File” button and its associated TextField so that the user...

    Add event-handling code for the "Load File” button and its associated TextField so that the user can load the file with the name provided in the text field and display its contents in the text area for editing. If you are using IntelliJ to implement this assignment, place your input text file in the top directory of your IntelliJ project (perhaps you called it "CSE 114"). Use an Alert Dialog to show an informative error message if a problem is...

  • Chapter 2 Review Required Data File: healthy.png Create a new HTML file in Notepad++ with the...

    Chapter 2 Review Required Data File: healthy.png Create a new HTML file in Notepad++ with the title Lab 2 . Save the file as Review 2. In the body section, add an <h1> heading, Healthy Living Plan. Format the heading to use the heading 1 style centered-aligned on the Web page. Add the centered paragraph of text shown in Figure 2 below. Add a horizontal rule with a height of 10 pixel, a width of 80%, and a background color...

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