The Student Room Group

html help

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 :tongue:), 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):
Screen Shot 2016-01-10 at 16.57.37.png
And this is the page from the link I have tried to open:
Attachment not found


I would much appreciate any help,
thanks
(edited 8 years ago)

Scroll to see replies

Reply 1
Looks like your text editor is encoding the characters.

A quick Google shows this could fix the issue: http://apple.stackexchange.com/a/120488
Reply 3
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?
Try adding this to the header tag
<meta charset="utf-8" />


Posted from TSR Mobile
Reply 5
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 :frown:
On text edit, can you go on the top bar and press format -> make plain text? :smile:
Reply 7
Original post by rayquaza17
On text edit, can you go on the top bar and press format -> make plain text? :smile:


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.
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 :smile:.

The final code:

Spoiler

Reply 9
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 :smile:.

The final code:

Spoiler



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:
No problem, well done!
Reply 11
Original post by chrissmith95
No problem, well done!


Thanks :biggrin:
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.
Original post by Guy123
Thanks :biggrin:
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.
Reply 13
Original post by iainvg
With the appropriate packages, just about anything.


Ohh ok, I've just discovered the build systems menu in tools.
Thanks :smile:
Original post by Guy123
Ohh ok, I've just discovered the build systems menu in tools.
Thanks :smile:


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
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.
I like Brackets so easy to work with.
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
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


Screen Shot 2016-02-03 at 17.13.22.png

Taken straight from the website.
Reply 19
I might also try another one, like you said Sublime Text 3 or Brackets, or Eclipse, which everyone says is extremely popular.

Latest