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>
Related
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 ...
I'm new to HTML and have a quick question with regards to images. Below I have a simple html file I was playing around with. I wanted to put an image into it which is stored in the home directory of my site. The site is local, on my macbook.
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<p style="background-color:green;">This is a paragraph.</p>
<img src=“HoneyBadger.jpg” alt=“Grumpy honey badger”>
</body>
</html>
However when I open the file with my browser I see a broken link. If I look at the URL of the image in my browser it is,
file:///Users/admin/Sites/project_honey_badger/%C3%A2%E2%82%AC%C5%93HoneyBadger.jpg%C3%A2%E2%82%AC%C2%9D
Some random percent signs and text have been added in? Any idea what I am doing wrong?
Thanks
Look at the syntax highlighting Stackoverflow has added. You are using “ (U+201C: LEFT DOUBLE QUOTATION MARK) and ” (U+201D: RIGHT DOUBLE QUOTATION MARK) where you should be using " (U+0022: QUOTATION MARK).
This is usually caused by writing HTML using a word processor (with automatic replacement of straight quotes with typographic quotes turned on) instead of a text editor.
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?
I'm new to HTML and have a quick question with regards to images. Below I have a simple html file I was playing around with. I wanted to put an image into it which is stored in the home directory of my site. The site is local, on my macbook.
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<p style="background-color:green;">This is a paragraph.</p>
<img src=“HoneyBadger.jpg” alt=“Grumpy honey badger”>
</body>
</html>
However when I open the file with my browser I see a broken link. If I look at the URL of the image in my browser it is,
file:///Users/admin/Sites/project_honey_badger/%C3%A2%E2%82%AC%C5%93HoneyBadger.jpg%C3%A2%E2%82%AC%C2%9D
Some random percent signs and text have been added in? Any idea what I am doing wrong?
Thanks
Look at the syntax highlighting Stackoverflow has added. You are using “ (U+201C: LEFT DOUBLE QUOTATION MARK) and ” (U+201D: RIGHT DOUBLE QUOTATION MARK) where you should be using " (U+0022: QUOTATION MARK).
This is usually caused by writing HTML using a word processor (with automatic replacement of straight quotes with typographic quotes turned on) instead of a text editor.
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>