HTML img src format? - html

I have an API that I can get a "snapshot" from my IP camera. If I use this line my browser returns and image.
http://my_NAS_IP:PORT/webapi/entry.cgi?camStm=1&version="8"&cameraId=1&api="SYNO.SurveillanceStation.Camera"&preview=true&method="GetSnapshot"&_sid=SESSION_ID
but when I try to put this into an html it doesn't work.
<!DOCTYPE html>
<html>
<body>
<img src="my_NAS_IP:PORT/webapi/entry.cgi?camStm=1&version="8"&cameraId=1&api="SYNO.SurveillanceStation.Camera"&preview=true&method="GetSnapshot"&_sid=SESSION_ID"
/>
</body>
</html>
To many " in the line? How can I format this to give me an image on the page?

Yes, you cannot use " character inside a quote that is surrounded by ". Use single quotes ' for the outer string.

Just enclose your img tag in single quotes
<img src='my_NAS_IP:PORT/webapi/entry.cgi?camStm=1&version="8"&cameraId=1&api="SYNO.SurveillanceStation.Camera"&preview=true&method="GetSnapshot"&_sid=SESSION_ID'/>

<img src="my_NAS_IP:PORT/webapi/entry.cgi?camStm=1&version='8'&cameraId=1&api='SYNO.SurveillanceStation.Camera'&preview=true&method='GetSnapshot'&_sid=SESSION_ID"
/>
Use single quotes within ...

Related

Image is not being displayed in chrome browser

I am a beginner in HTML and was trying to run a code to display image in chrome browser using "textedit" (Mac).
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Image addition </h1>
<p> <img src=“/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg”> </p>
</body>
</html>
However the image is not being displayed. attaching the screenshot of image in browser. Please helpenter image description here
I tested your code and caugth the error where you are doing mistake. You need to change double quotes to "" instead of ““ for src attribute.
Correct Syntax:
<img src="/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just copy this syntax from here and paste in your html page. you will get output.
You need to put a URI scheme at the beginning like file:// to tell the web browser to look on the hard drive instead of requesting the image from the internet.
So the img src should look like
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just replace the qoutations you used in the img src
“ ”
with
" "
Please remove the fancy quotes use this.
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg" alt="aman image">
enter image description hereThank you all for your comments, I tried each and every suggestions but didn't work. But accidentally tried the below mentioned code it worked.
Is it because of the gaps in /HTML Image/ and since the gaps have been filled with %20 it worked.
What could be the reason for same?

Why aren't my pictures appearing in HTML?

<html>
<head><title>Real.com</title>
</head>
<body bgcolor= “white” text=“red”>
<h1>welcome to my site!</h1>
<h2>Welcome</h2>
<p> |Home|
<b>Welcome</b></p>
<center><img src=“john_hancock.jpg” width=“400” height=“500” alt=“john_hancock”></center>
<br>
<a href=“home.html” style=“color:red;”>Home
<body>
</html>
I am trying to upload an image to the website and is trying to create the code for fun, and I am not sure where its going wrong?
Both the file and Image are both in the same directory as well!
Thank you for your help in advance!
You use bad quotes, use " instead of ”. In whole document. Try to find replace all in your text editor.
Image tag will be:
<img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">
syntax error change any “ ” to ""
You used bad quotation marks. Use " instead of ”.
The proper image tag would be: <img src="john_hancock.jpg" width="400" height="500" alt="john_hancock">
Whenever you are not sure where your error is, consider using the w3c HTML-Validator! https://validator.w3.org/
It will tell when your html file contains errors.
1) You're are using the so-called typographical quotation marks (“ and ”) while you ought to use the so-called neutral quotation mark (").
2) The img tag needs to be closed, like so:
<img src="image.jpg" />
3) You haven't closed your anchor tag.

HTML link issue

I'm attempting to learn some HTML on my own and I'm starting out with some very basic formatting and linking:
<!DOCTYPE html>
<html>
<body>
<h1> First Heading </h1>
<a href = “http://www.stackoverflow.com” target=“_blank”>TEST LINK</a>
</body>
</html>
I saved the file as .html and it opens correctly in any browser like I would expect, but when attempting to click the link, the browser displays a 'website not found' message. The URL shows the directory to the folder on my computer where I created the HTML document followed by http://www.stackoverflow.com.
I feel like this is a formatting issue but I have tried all kinds of variations of the notation. Any help is appreciated.
Edit:
Thanks for the help guys! I think TextEdit is just the source of the problem. I wrote a new HTML file in VIM and everything is working perfectly.
You have a typo because you used wrong quotes.
Change this:
<a href = “http://www.stackoverflow.com” target=“_blank”>TEST LINK</a>
To:
TEST LINK
It has to do with your quotes. You're using “ instead of "
TEST LINK
FIDDLE
you have a typo with your ". Just re-type them:
TEST LINK
You are using the wrong kind of quotes. ” should be ". When copying/pasting code, always make sure to do by pasting the value. Here's the code with correct quotes:
<!DOCTYPE html>
<html>
<body>
<h1> First Heading </h1>
TEST LINK
</body>
</html>
Your quotes are wrong for both the href attribute and the target attribute.
Try using " " like so:
Link to Google
You can use both single quotes ' ' and double quotes " " for the attribute values, but it is recommended that you use double.
Don't use ”. Instead, use the double quote sign (") for all links and attributes.
Check the following code:
<!DOCTYPE html>
<html>
<body>
<h1> First Heading </h1>
TEST LINK
</body>
</html>

what does forward slash do in html img tag

I'm learning html/css and following the tutorial # W3Schools.com.
The code that I'm having trouble with is # http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align
In line 11
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
what does the / do just just before the > and after the height attribute?
I looked at http://www.w3schools.com/tags/tag_img.asp but it didn't mention /.
Absolutely nothing, the trailing / is just ignored by the parser.
It is allowed on void tags (i.e. those without other tags/text content inside) by HTML5 specs to make the tag "self-closing", thus the markup valid XML. But it has no HTML-specific meaning.
Conversely, it is compulsory in xHTML for the same reason (making the markup valid XML).
In HTML there are two kind of tag :
First, e.g <div> that you need to close like </div> because it can have other tag inside
Second, e.g <img/> <br/> that doesn't need </img> or </br> to close. These are called void tags means it can't contains other tags.
The "/" is basically used for ending tags.
In HTML you need to start your tag and you need to end your tag
the code
here<img
marks the opening of the tag
so you need to close it with />
/> is required for ending HTML tags which don't have a closing tag . They are required to make tags compliant with XHTML.
Other examples are
<br/>
<hr/>
in HTML, elements have a beginning and ending tag e.g. <p> & </p> and in between these beginning and ending tags come the content of that element.
But some elements do not have content e.g. <br /> for line break and <img src="" /> for images. Such Elements are called empty elements and do not need a closing tag separately. Hence, the /> denotes closing of this tag.
in html each end every tag has an opening and closing like for body tag, the syntax is like <body></body>
similarly for imagae tag its like <img></img>
But we can use the other short form also...which is we are marking the closing option also with the same img tag... <img/> and then we can give all the options (properties for the img tag) inside it . src="w3schools_logo.gif" alt="W3Schools" width="270" height="50"
so it should be finally like <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" />

A "_" every-time i use a <a href code

... <img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" > height="180" border="0px" " >
type="text/css" rel="stylesheet" /> ...
</head>
Every time i use this tag appears a "_" on the right of the image
The code you pasted is borked (double quotes at the beginning of href and an extra '>' in the middle of the img tag) so I'm guessing this isn't a real example. My guess is that you have some kind of whitespace between your img tag and the end of your a tag, like so
<img src="..">
which will show up as an underlined space. The whitespace might be a newline too mind you, so you should always keep them tight. For example, the following will produce the same problem
<a href="..."><img src="...">
</a>
HTH.
<a> and <img> are not allowed in <head>
Try:
<img src="/PhpProject1/vital1_top_logo.jpg" height="180" border="0px" />
It might help if you'd stick to the HTML syntax, right now this snippet is just gibberish. I tried cleaning it up, but then there's almost nothing left that makes sense.
You added two double quotes:
<a href=""http:
Use a single one
<a href="http: