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):
And this is the page from the link I have tried to open:
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?
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>
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.
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".
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
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:
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.
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
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.