I created a text file using notepad with the following content, and save it with a html extension. Then I open it in browser. The image doesn't show. When I put the image URL in the browser the image shows up, so I know my link is correct. What am I missing here? Thanks in advance for your answer.
<!DOCTYPE html>
<html>
<body>
<p>Image doesn't show</p>
<img scr="https://www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
</body>
</html>
<img scr="https://www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
corrected spelling
<img src="https://www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
you've incorrectly typed the src attribute.
change this:
<img scr="https://www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
to this:
<img src="https://www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
<!DOCTYPE html>
<html>
<body>
<p>See Image below</p>
<img src="//www.findtaxpro.com/Content/img/logo.png" style="width:90px; height:90px;"/>
</body>
</html>
Related
I want to use margin in html but when im writing margin it doesn't auto complete and It doesn't work even if I type
here is my code;
<html lang="tr">
<head>
<meta charset="utf-8">
<title>GAMEBLOG</title>
</head>
<body>
STYLE="margin:30px"
<hr align="left" color="Red" size="60"width="1475">
<center><font face="papyrus" size="12" color="maroon"> <span><b>Gameblog News</b></span></font></center>
<p>
<center><h1><font face="Arial">En hızlı büyüyen kara delik bulundu: <br>
'Her saniye Dünya büyüklüğünde kütle yutuyor'</font> </h1></center>
</p>
<hr color="Lightgray" width="500"size="3">
<center><img src="C:\Users\Samet\Desktop/kara.png" width="400" height="400">
</center>
<b>Avustralyalı astronomların liderliğini yaptığı bilim insanlarından oluşan bir ekip, son dokuz milyar yılın en hızlı büyüyen kara deliğini keşfettiklerini açıkladı.</b>
</body>
</html>
You have to put style a HTML tag. For exemple, if you want to put margin on the body, you have to do this :
<body style="margin:30px;">
// Your code
</body>
I am learning HTML and CSS and I found one weird thing, despite training that I watch, and copy this step by step(using Visual Studio Code) I am unable to apply any style to any part of HTML file, when I add a Class to it. However, if I add ID, style applies.
My setting:
Visual Studio Code
Separate CSS and HTML File.
Example of not working code:
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
however, if I change above code to this:
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
This does work.
Yes, I do change properly the CSS file to be either "." or "#" is there anything I miss here?
I don't think this works:
<div Class="Author">
it should be lowercase:
<div class="Author">
and then in the css reference it like
.Author {color: red}
This functions correctly. You didn't give us css to work from so this is the best I can offer.
#Author {
color: red;
}
.Author {
color: blue;
}
<!-- no css applied -->
<div ID="no_css">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `ID` using `#` -->
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `Class` using `.` -->
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
I have a webpage which is the main index.html and another projects_imgs.html which will be the iframe src inside the index.html
Inside the projects_imgs.html there will be images. What I want to do is,
In index.html I want to add <a> tags that links to the images inside projects_imgs.html, so whenever the user clicks these links the iframe loads the clicked link that targets a specific image
get the idea?
So far here is the code of index.html:
<!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p>Images</p>
</div>
</div>
and projects_imgs.html:
<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}
img {
position: fixed;
width: 100%;
height: 100%;
}
</style>
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>
</body>
</html>
To implement such a logic in html only is not possible i think.
I suggest you to use PHP to implement this logic. Here is a small example:
index.html
<html>
<body>
Images: <br>
Image 1 <br>
Image 2
</body>
</html>
These links call images.html with the parameter "image". As you can see, we set "image" to 1 or 2, depends on what the user is clicking on.
images.html
<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>
In images.html you decide with an IF Statement. If it was 1, then you just call the with the Image 1. If 2....
You can use that to implement it with your iFrame. But keep in mind that you need a webserver who understands PHP to get this running!
Have a nice day!
I actually figured it out!
I do it like this:
function setURL(url){
document.getElementById('iframe').src = url;
}
<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
A01-FAF-1<br>
A01-FAF-2<br>
A01-FAF-3<br>
A01-FAF-4<br>
A01-FAF-5<br>
A01-FAF-6<br>
Just replace the images with some random google images link to test it.
I'm having trouble getting my image link to work when someone presses the picture button, and I'm not sure why. It works on my phone and my computer, but it doesn't work on other people's computer for some reason. Please let me know what I need to do to get this fixed.
Thank you.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_top">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" /> </a></div>
</div>
The code should be like this, you don't need to set target while adding link to mailto, the code should be like this
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;>
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
The markup of your code is worng. May be it's the problem.
<div class="logo2">
<a href="mailto:careers#remaxfutura.com?Subject=Career%20information%20Request;" target="_blank">
<img src="http://www.remaxfutura.com/admin/web/files/1469815489_Request_an_Appointment.png" style="display:inline-block;" />
</a>
</div>
i have email template and this was configured in firebug Linux its working fine over there , but when that same template configure in mobile phone its not working messing logo and css .
code is like below.
<style>span,p,a{font-size:11px;text-transform:uppercase;color:#7f7f7f;font-family:Calibri,Arial,sans-serif;margin:0;padding:0;line-height:11px}</style>
<body>
<div style="width:415px;height:293px">
<div style="width:5px;float:left">
<div style="height:100%;width:100%">
<img style="height:290px" src="http://example.com/line.png" />
</div>
</div>
<div style="width:88%;float:left;padding:5px 0 0 10px">
<p style="clear:both;line-height:12px">
<span style="text-transform:uppercase;font-weight:bold">Example Name</span>
<span style="font-size:10px;vertical-align:top"> |</span>
<span style=""> example name </span>
</p>
<p style="margin:5px 0 3px;padding:0;clear:both;line-height:10px"></p>
<p style="margin:10px 0;padding:0;clear:both;line-height:12px">
<img src="http:www.demo.com/signature_logo/logo.png" alt="Logo" style="width:150px"/>
</p>
</div>
</div>
</body>
The code?
Probably you add the CSS code inner <head></head>
Most email clients remove all above the <body> tag
EDIT
Now I see your error. in your logo image put correct protocol:
http:www.demo.com/signature_logo/logo.png INCORRECT
http://www.demo.com/signature_logo/logo.png CORRECT
And put <style> tag down the <body> tag to maximize compatibility.