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.
Related
Why are these two blocks of code being rendered different?
<button>text1</button>
<button>text2</button>
vs
<button>text1</button><button>text2</button>
Editted for clarification:
We can see in this Fiddle:
writting controls in diferent lines adds a white space between them (this space cannot be reached by console inspection, but can clearly be seen)
writting controls in the same line doesn't.
It's because the browser has no concept of linebreaks or tabs outside of special situations like the <pre> tag so wherever it finds them it converts them to whitespace. Keep in mind it will ignore all whitespaces, line breaks and tabs except the first one. You could have 30 consecutive line breaks and 100 spaces in your code, but it will render as 1 space in the browser.
Even code that only has a line break but no spaces or indents will still show a space when rendered.
An example: code with a line break but no space:
<button>text1</button>
<button>text2</button>
It will still render 1 whitespace character between them because of the line break. You can verify this in the fiddle.
Typically any sort of formatting like this is handled by CSS.
MDN's explanation is about as good as any. The actual spec.
The "EOL" in HTML you have to tell it, try put <br> between buttons.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Case 1</h1>
<button>text1</button>
<br>
<button>text2</button>
<h1>Case 2</h1>
<button>text1</button>
<br>
<button>text2</button>
</body>
</html>
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?
<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.
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>
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.