How do I add my logo to my website using html

0 votes

I already have a website set up, but I'm having trouble adding a logo to the upper left corner. If you're wondering, I'm not referring to a favicon; rather, I'm referring to a logo that is displayed on the website itself, similar to how stack overflow's logo displays the words "Stack Overflow" next to it. I'm rather new to coding, so there is definitely a measurement error, but I can't seem to get my logo to appear on my page. Here is the code I currently have in Notepad+.

UPDATE: I changed my code and used Filezilla to post it to the internet, but for some reason now my logo won't appear; all that appears is the tiny shredded piece of paper, indicating that the image won't function and I have no idea how to make my logo appear. Another thing I did was fix my code on my laptop, transfer it to a USB drive, and then use filezilla on my desktop to submit my website to the internet.

(Correct code)

<!Doctype html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/G:/coding/wensite/favicon.ico" type="image/x-icon" />
<meta charset="utf-8"/>
<title> I_See_St4irs</title>
<meta name="Viewpoint" content="Width=device-width,initial-scale=1.0">
<link rel="stylsheet" href="blueberry.css"/>
<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
body{
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
}
h1 {
text-align: center;
font size: 180%;
line-height: 120%;
padding: 5% 0;
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%:
}
h3 {
line-height: 110%;
padding: 5% 0;
}
p{
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #fff;
text-decoration: underline;
}
header {
background: #405580;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
}
#logo {
  display: inline-block;
  margin: 15px; 
  float: left;
  height: 60px;
  width: auto; 
  border-radius: 50%; 
}
nav { 
float: right;
padding: 35px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background:#ccc url(http://i65.tinypic.com/xgfvc4.jpg ) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
.current {
color: #fff;
text-decoration: underline;
}
#doc {
margin: 40px 0;
}
#content {
margin; 0 auto;
max-width: 1140px;
margin-top: 110px;
}
.blueberry {
max-width; 960px;
margin-top; 110px;
}
section {
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;
}
ul.camaro li {
padding-left: 3%;
}
footer {
background: #333333;
width: 100%;
overflow: hidden;
opacity: 0.90;
}
footer p, footer h3 {
color: #fff;
}
footer p a {
color: #fff;
text-decoration: none;
}
ul.social li {
display: inline;
}
ul.social li img {
height: 50px;
}
footer.second {
border-top: 1px solid #4D4E50;
background-color: #333333;
max-height: 50px;
text-align: center;
opacity: 0.95;
}






/*-------------------------MEDIA!!!-------------------------*/
@media screen and (max-width: 478px) {
body {
position: absolute;
}
}
@media screen and (max-width: 740px) {
header {
psotion: absolute;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #405580;
border: 1px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px 0 2px 2px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<a href="#"><img id="logo" src="http://i67.tinypic.com/2v9dm5h.jpg"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="contact me.html">Contact Me.</a></li>
<li><a href="pictures.html">Pictures</a></li>
<li><a href="about me.html">About Me</a></li>
<li><a href="other people.html">Other People</a></li>
</ul>

</nav>
</header>
<div id="doc">
<div id="content">
<div class="blueberry">
<ul class="slides">
<li><img src="staring.jpg"/></li>
<li><img src="burnout.jpg"/></li>
<li><img src="ablade.jpg"/></li>
<li><img src="aston.jpg"/></li>
<li><img src="jag.jpg"/></li>
<li><img src="post1.jpg"/></li>
<li><img src="post2.jpg"/></li>
<li><img src="post4.jpg"/></li>
<li><img src="post5.jpg"/></li>
<li><img src="post8.jpg"/></li>
<li><img src="post9.jpg"/></li>
<li><img src="post10.jpg"/></li>
<li><img src="post11.jpg"/></li>

</ul>
</div>
</div>
</div>
<section>
<img src="instagram_logo_small.png"/>
<h1>My Instagram!</h1>
<p> This is my instagram account my name on instagram is I_see_st4irs i post mainly car pictures</p>
</section>
<section>
<img src="twitter.png"/>
<h1>My Twitter!</h1>
<p> This is my Twitter account my name on Twitter is I_see_st4irs i post a little bit of everything i have a secondary twitter by the name of Lenny_bruh_rekt</p>
</section>
<section>
<img src="pinterest.png"/>
<h1>My Pinterest!</h1>
<p> This is my Pinterest account my name on Pinterest is I_see_st4irs i post anything i like on my boards.</p>
</section>
<div class="clear"></div>
<article>
<img src="2ss.jpg"/>
</article>
<aside>
<h2> My Favorite Car:</h2>
<ul class="Camaro">
<li><h3>My favorite car is the Chevrolet Camaro, especially the 6th gen Camaro which is the latest Camaro.</h3></li>
<li><h3>455 horsepower</h3></li>
<li><h3>455 foot pounds of torque</h3></li>
<li><h3>0-60 mph in 3.9 seconds</h3></li>
<li><h3>Runs the quarter mile in 12.2 seconds</h3></li>
<li><h3>Weighs 3,685 pounds</h3></li>
<li><h3>So the 2016 Camaro SS is a great muscle car</h3></li>
</ul>
</aside>
<div class="clear"></div>
<section>
<h1>The 2016 Camaro SS</h1>
<img src="ss.jpg"/>
<p> This is My favorite muscle car.</p>
</section>
<section>
<h1>The 2015 Koenigsegg one:1</h1>
<img src="koenigsegg.jpg"/>
<p> This is my favorite Megacar.</p>
</section>
<section>
<h1>The 2016 Dodge Charger Hellcat</h1>
<img src="hellcat.jpg"/>
<p> This is My favorite sports sedan.</p>
</section>
<footer>
<section>
<h3><b> Me</b></h3>
<p><b>@iamwilsparks@gmail.com</b><br><br>
contact me if you want to send me pictures to post on my Instagram or Twitter.</p>
</section>
<section>
<h3>Follow me!</h3>
<ul class="social">
<li><a href="www.online-instagram.com/user/i_see_st4irs/246253528"><img src="instagram_logo_small.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="twitter.png"></a></li>
<li><a href="https://twitter.com/i_see_st4irs"><img src="tumblr.png"></a></li>
<li><a href="https://plus.google.com/wm/quevuelvamatt/.../collections"><img src="googleplus.png"></a></li>
<li><a href="https://www.youtube.com/channel/UCOaUXzGUZ2_1EB_-QI15WoA"><img src="youtube.png"></a></li>
</ul>
</section>
<section>
<img src="logo.jpg">
</section>
</footer>
<footer class="second">
<p>©copyright - I_See_St4irs, 2016.</p>
</footer>





</body>
</html>
Aug 8 in HTML by Tejashwini
• 540 points
71 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In HTML

0 votes
0 answers

How do I link a JavaScript file to a HTML file?

How should a JavaScript file be linked ...READ MORE

Jul 21 in HTML by Ashwini
• 1,160 points
20 views
0 votes
0 answers

How to do calculations in HTML forms using JavaScript?

I'm developing a straightforward app that multiplies ...READ MORE

Jul 26 in HTML by Tejashwini
• 1,960 points
57 views
0 votes
0 answers

How to add/update an attribute to an HTML element using JavaScript?

I'm looking for a JavaScript method to ...READ MORE

Aug 1 in HTML by Ashwini
• 1,160 points
33 views
0 votes
1 answer

How to add/update an attribute to an HTML element using JavaScript?

You can read here about the behaviour of attributes ...READ MORE

answered Aug 4 in HTML by Deepak
• 940 points
26 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,780 points
3,130 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
921 views
0 votes
1 answer

Which is faster: Using bootstrap CDN or downloaded

CDNs deliver faster loading speeds for readers. Files ...READ MORE

answered Jun 30 in Web Development by rajatha
• 7,440 points
111 views
0 votes
0 answers

Fading in a background image using javascript or css on hover

I have so far been able to ...READ MORE

Jun 30 in CSS by Edureka
• 11,040 points
127 views
0 votes
0 answers

How to add CSS to my HTML code on Notepad++?

So I'm attempting to use notepad++ to ...READ MORE

Jul 28 in CSS by Edureka
• 11,040 points
45 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
4,980 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP