I was learning about this attribute vspace but it is applied to all three images which I have
I don't understand why?
As you can see in the code I have written only one vspace attribute in one of img tag. But It is moving all three images down vertically. Don't understand why?
Screenshot of output
Code
<html>
<head>
</head>
<body>
<br> Can you see the stars
<img src=stars.jpg height=200 width=200 >
<img src=stars.jpg height=200 width=200>
<img src=stars.jpg height=200 width=200 vspace=20 >
Can you see the stars?
</body>
</html>
Related
I'm having trouble getting some images to show. The issue starts at C:\Users... and ends at .\august19\google2.0.0.jpg
I'm not very experienced with the ... thing in pathways
I've tried but it doesn't work. A large space appears but image doesn't show
<html lang="en">
<head>
<title>My First Webpage</title>
</head>
<body>
<p style="background-color: blue; color: white">
My First Paragraph <br>
My second sentence in this paragraph on another line
</p>
<p style="background-color: green; color: white"> My Second Paragraph >:3c</p>
C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg
https://www.google.com/images/google2.0.0.jpg
.\images\google2.0.0.jpg"
.\august19\google2.0.0.jpg"
<a href="https://www.apple.com">
<img src="images/23656.png" width=500 border=0 />
</a>
Home
August19
</body>
</html>
In order for the browser to render the image, you need to put it in an <img> tag.
<img src="C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg https://www.google.com/images/google2.0.0.jpg">
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
I'm trying to get a background image to display when the mouse is hovered over any one of three images. Here is a jsFiddle: http://jsfiddle.net/cvh2013/gefKT/, can anyone tell me what I'm doing wrong please? At the moment the background image simply doesn't display when you hover any of the three circular images.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>SVG Included with <object> tag</title>
<style>
.center {
text-align: center;
}
#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<div id="images">
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object></td>
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object></td>
<td class="center"><object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object></td>
</div>
</tr>
</table>
</body>
</html>
If I was you I would change the CSS as follows:
<style>
.center {text-align:center;}
.boxy:hover {box-shadow:0 0 5px #000; border-radius:50%;}
</style>
And add the .boxy class to the object you have declared. Border Radius is much cleaner than to use an image (one more asset to load). You can use the actual image approach you wanted if you want this to work on IE8 and below.
Fiddle: http://jsfiddle.net/gefKT/9/
The #images div contains nothing thus has no dimensions and therefore can never be hovered over. You need to place your three images inside this div.
I am completely new to Web Development, still a student. Kindly bare this extremely low level question.
I have this small HTML code:
<html>
<body>
<img scr="logo.jpg" alt"nextgen logo" width="370" height="100" />
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
with the logo.jpg file in the exact same folder as the .html file, with the exact width and height given.
Yet, when I open the HTML page, I am not able to see the image at all. What's Wrong? What should I do?
simple typo. src, not scr
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<html>
<body>
<img src="logo.jpg" alt="nextgen logo" width="370" height="100" />
<!-- fix src and add in the = on the alt tag !-->
<h1> NEXTZEN </h1>
<p> Welcome to NEXTZEN </p>
</body>
</html>
You need to change scr to src in your image tag, and add an = sign as Florian pointed out.