This discussion is closed.
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#1
Report Thread starter 6 years ago
#1
Hello everyone,

I am learning html code and I am finding it quite easy and very fun. I have written a couple of simple html documents in TextEdit on my Mac and they display perfectly fine on Safari. These documents have just some text in a paragraph, heading and I have included a line break, so nothing fancy so far.

However, now I am trying to add in attributes, like the ones below (lang, title, href and the image ones), but the only one that works is the title, which displays as a tooltip. I was wondering if anyone could help me and see if there is a mistake in my code below:

<!doctype html>
<html lang=en>
<body>
<h1 title=“Attributes”>This is a heading</h1>
<p>This is a paragraph with a link and an image.
<a href=“http://www.w3schools.com/“>This is the link</a><img src=“/Users/Akaash/html/Baroccoli.jpg” alt=“Broccoli” style=“width=104px; height=142px”>
</p>
</body>
</html>

That was exactly how I wrote it, but this is how it displays in text form on Safari:
<!doctype html>
<html lang=en>
<body>
<h1 title=“Attributes”>This is a heading</h1>
<p>This is a paragraph with a link and an image.
<a href=â€http://www.w3schools.com/“>This is the link</a><img src=“/Users/Akaash/html/Baroccoli.jpg” alt=“Baroccoli” style=“width=104px; height=142px”>
</p>
</body>
</html>

For some reason, it doesn't recognise the image (which is my profile picture btw ), even though I've put it in the same folder as the document. It also can't find the link, which is w3schools.com, the website from which I am learning html. I don't know why the quotation marks show up as those weird symbols.

This is what the page looks like as a html document (if it shows up on here):
Name:  Screen Shot 2016-01-10 at 16.57.37.png
Views: 204
Size:  64.5 KB
And this is the page from the link I have tried to open:
Attachment 492769492771

I would much appreciate any help,
thanks
Attached files
0
z33
Badges: 21
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#2
Report 6 years ago
#2
Andy98 Async ?
0
Push_More_Button
Badges: 10
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#3
Report 6 years ago
#3
Looks like your text editor is encoding the characters.

A quick Google shows this could fix the issue: http://apple.stackexchange.com/a/120488
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#4
Report Thread starter 6 years ago
#4
(Original post by Push_More_Button)
Looks like your text editor is encoding the characters.

A quick Google shows this could fix the issue: http://apple.stackexchange.com/a/120488
The site said to uncheck 'smart quotes' and I did, but it didn't work, it's still the same. Could it be how TextEdit recognises some characters, compared to Notepad in Windows?
0
bigboateng_
Badges: 15
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#5
Report 6 years ago
#5
Try adding this to the header tag
<meta charset="utf-8" />


Posted from TSR Mobile
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#6
Report Thread starter 6 years ago
#6
(Original post by bigboateng_)
Try adding this to the header tag
<meta charset="utf-8" />


Posted from TSR Mobile
I tried that and this is my new code:
<!doctype html>
<html lang=en>
<head>
<title>HTML</title>
<meta charset="utf-8" />
</head>
<body>
<h1 title=“Attributes”>This is a heading</h1>
<p>This is a paragraph with a link and an image.
<a href=â€http://www.w3schools.com/“>This is the link</a
<img src=“/Users/Akaash/html/Baroccoli.jpg” alt=“Broccoli” style=“width=104px; height=142px”
</p>
</body>
</html>

It hasn't really made a change
0
rayquaza17
Badges: 17
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#7
Report 6 years ago
#7
On text edit, can you go on the top bar and press format -> make plain text?
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#8
Report Thread starter 6 years ago
#8
(Original post by rayquaza17)
On text edit, can you go on the top bar and press format -> make plain text?
It's already in plain text and has already got UTF-8 encoding, I've basically followed everything it says on W3Schools. I think it may just be the image that perhaps isn't working.
0
chrissmith95
Badges: 0
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#9
Report 6 years ago
#9
This may be a bit late, but you have two things wrong:
1. The quotes should be " not “, I would recommend using a text editor such as Sublime Text as it will not cause these issues and will also highlight syntax for you based on the file type.
2. Your CSS in the style attribute is incorrect. It should be style="width: 104px; height :142px".

Don't give up, you will get there .

The final code:
Spoiler:
Show
<!DOCTYPE html><html lang=en><body> <h1 title="Attributes">This is a heading</h1> <p>This is a paragraph with a link and an image. <a href="http://www.w3schools.com/">This is the link</a> <img src="/Users/Akaash/html/Baroccoli.jpg" alt="Broccoli" style="width:104px; height:142px"> </p></body></html>
1
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#10
Report Thread starter 5 years ago
#10
(Original post by chrissmith95)
This may be a bit late, but you have two things wrong:
1. The quotes should be " not “, I would recommend using a text editor such as Sublime Text as it will not cause these issues and will also highlight syntax for you based on the file type.
2. Your CSS in the style attribute is incorrect. It should be style="width: 104px; height :142px".

Don't give up, you will get there .

The final code:
Spoiler:
Show
<!DOCTYPE html><html lang=en><body> <h1 title="Attributes">This is a heading</h1> <p>This is a paragraph with a link and an image. <a href="http://www.w3schools.com/">This is the link</a> <img src="/Users/Akaash/html/Baroccoli.jpg" alt="Broccoli" style="width:104px; height:142px"> </p></body></html>
Thank you sooooooo much, my code is FINALLY working, the image shows up and the link works. The type of quote marks would be the thing I would least expect to cause an issue and the CSS, ok I'll admit I'm not fully up to scratch with that.
Anyway here is my new html document with the corrections:
Attached files
1
chrissmith95
Badges: 0
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#11
Report 5 years ago
#11
No problem, well done!
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#12
Report Thread starter 5 years ago
#12
(Original post by chrissmith95)
No problem, well done!
Thanks
I've managed to download Sublime Text 2 and it works really well.
What other languages can you write in it? Because I'm learning html and python and I've managed to write both languages in there. So I'm wondering what else it works for, apart from html, css, javascript and python.
0
GiantKiwi
Badges: 19
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#13
Report 5 years ago
#13
(Original post by Guy123)
Thanks
I've managed to download Sublime Text 2 and it works really well.
What other languages can you write in it?
With the appropriate packages, just about anything.
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#14
Report Thread starter 5 years ago
#14
(Original post by iainvg)
With the appropriate packages, just about anything.
Ohh ok, I've just discovered the build systems menu in tools.
Thanks
0
bigboateng_
Badges: 15
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#15
Report 5 years ago
#15
(Original post by Guy123)
Ohh ok, I've just discovered the build systems menu in tools.
Thanks
There's sublime text 3 as well if you didn't know. But usually I personally use sublime text for web development, it's really good for that. But for others like python/java/c++ I use eclipse/intellij, they have a lot more features and doesn't require much configuring like sublime
0
GiantKiwi
Badges: 19
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#16
Report 5 years ago
#16
(Original post by bigboateng_)
There's sublime text 3 as well if you didn't know. But usually I personally use sublime text for web development, it's really good for that. But for others like python/java/c++ I use eclipse/intellij, they have a lot more features and doesn't require much configuring like sublime
Package support for 3 vs 2 is still distinctly lacking, and 3 is still in beta, so still not fully supported.
0
hihihihihi
Badges: 18
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#17
Report 5 years ago
#17
I like Brackets so easy to work with.
0
bigboateng_
Badges: 15
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#18
Report 5 years ago
#18
(Original post by iainvg)
Package support for 3 vs 2 is still distinctly lacking, and 3 is still in beta, so still not fully supported.
3 was released March 2015 so I doubt it still being in beta means it's lacking packages or is buggy. I certainly haven't noticed any problems


Posted from TSR Mobile
0
GiantKiwi
Badges: 19
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#19
Report 5 years ago
#19
(Original post by bigboateng_)
3 was released March 2015 so I doubt it still being in beta means it's lacking packages or is buggy. I certainly haven't noticed any problems


Posted from TSR Mobile
Name:  Screen Shot 2016-02-03 at 17.13.22.png
Views: 259
Size:  9.3 KB

Taken straight from the website.
0
Guy123
Badges: 16
Rep:
? You'll earn badges for being active around the site. Rep gems come when your posts are rated by other community members.
#20
Report Thread starter 5 years ago
#20
I might also try another one, like you said Sublime Text 3 or Brackets, or Eclipse, which everyone says is extremely popular.
0
X
new posts
Back
to top
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

What is your favourite revision method?

Taking notes manually (67)
22.33%
Note taking apps (6)
2%
Flashcards (60)
20%
Revision guides (17)
5.67%
Past papers (138)
46%
Something else (let us know in the thread) (12)
4%

Watched Threads

View All