Dumb Beginner HTML Question

5    25 Aug 2015 03:09 by u/HinkMyDinkD00d

Yo, I'm in a highschool class for web design. Part of this is coding in html, and the class is still only 3 days in, but I'm having a curious problem.

Whenever I'm writing random stuff at home, if I make a webpage that has an image that links to a website, then that image won't show up when I open the .html file. If the image doesn't link to anything, then there's no problem.

When I type the same code in my school's computers, however, it seems to work fine. Is there some issue that I could be having like forgetting to install some html plugin or something? I know you have to install something for python. I've tried this in Notepad++ on Windows 10 and in Notepadqq and Sublime Text in Linux Mint.

Code I wrote that exhibits this behavior:

<!DOCTYPE html>
<html>
    <body>
        <h1>
            Donkey Kong
        </h1>
        <h2>
            Isn't very funny but I didn't want to change the links
        </h2>
        <a href="https://pbs.twimg.com/media/CLBO4fLXAAA1jTo.jpg" <img src="https://sickr.files.wordpress.com/2013/05/donkey_kong_bananas.jpg?w=604&h=604" /></a>
    </body>
</html>

I feel like this is a dumb question that everyone but me knows the answer to.

I would also totally ask my web design teacher, but since this issue only seems to be affecting me at home, I don't think she'd be too enthused with me asking her "Yo teach tech support pls?"

Thanks in advance.

EDIT: Oh wow I just found out that the real problem was a dang compilation error, jeez Louise. Sorry to have wasted a thread on a missing '>'

42 comments

5 u/pikeymick 25 Aug 2015 03:39

It looks like you need to close your anchor tag prior to the img tag.

1 u/HinkMyDinkD00d [OP] 25 Aug 2015 03:54

I'm, uh, still new to this. What does this mean?

2 u/escape 25 Aug 2015 03:58 
<a href="https://pbs.twimg.com/media/CLBO4fLXAAA1jTo.jpg"
    <img src="https://sickr.files.wordpress.com/2013/05/donkey_kong_bananas.jpg?w=604&h=604">
</a>

<a href="https://pbs.twimg.com/media/CLBO4fLXAAA1jTo.jpg">
    <img src="https://sickr.files.wordpress.com/2013/05/donkey_kong_bananas.jpg?w=604&h=604">
</a>

See what is different.

Edit: Also since you're using HTML5, you don't need self closing tags. Use <img src="..."> instead of <img src="..." />

0 u/HinkMyDinkD00d [OP] 25 Aug 2015 04:05

I should go to jail for not catching this, holy crap. I guess when I've been trying this at school, I've been closing the tag. Now I feel like a double dumbo, but thanks!

1 u/escape 25 Aug 2015 04:09

Do you type out tags in sequence like open A, open/close IMG, close A? Or do you do open A, close A, move cursor back, open/close IMG?

I do the latter. So like this:

// 1

<a href="#"></a>

// 2

<a href="#">
</a>

// 3

<a href="#">
    <img src="#">
</a>

I find that it helps me keep track of my elements and layout better. Also depending on what editor you're using, it can close the tags for you as you type. Sublime Text 3 does this. It's really handy.

1 u/HinkMyDinkD00d [OP] 25 Aug 2015 04:14

I've been using ST3 on Linux Mint, but mostly Notepadqq and Notepad++ since that's the software that we get in my school and we can't install any of our own. Thanks for the helpful tip; I did a baby beginner's programming course in Java and I think that I got way too comfy with Eclipse's features for my own good.

1 u/MarianOnEarth 25 Aug 2015 07:56

Good job. Making mistakes is a big part of programming. For most projects it'll be what you spend the majority of your time on. Even the professionals make mistakes.

2 u/pikeymick 25 Aug 2015 06:02

Welcome to programming! A few thousand more of these and you get faster at seeing them.

4 u/Balrogic 25 Aug 2015 05:08

Typos are the bane of your life when you're writing computer instructions. Nothing to apologize about, just be aware of typos. Train yourself to check for them, re-check, re-check so you can spot and correct errors on the fly.

1 u/acheron2012 25 Aug 2015 03:35

The problem is that you are missing a &gt sign after the href attribute. Now why you need a &gt sign there I'm not really exactly sure. It must have something to do with the img sub-element.

I did not see your problem personally. I looked at an example at w3schools.com and found the difference. But then I've never been very good at html, so that may not be saying much.

w3schools.com seems pretty good though. And stackoverflow is probably the most useful programming site on the entire internet. Create an account now so you can start earning points and doing more stuff. They are part of the larger stackexchange group.

Good luck!

Edit: it probably works at school because they have a less strict rendering engine. Safari perhaps?

2 u/SelfReferenceParadox 25 Aug 2015 03:57

Just to clarify for OP, I think &gt should render as '>'. (a bug in Voat?)

0 u/HinkMyDinkD00d [OP] 25 Aug 2015 04:05

Weird.

0 u/escape 25 Aug 2015 05:44

It requires a semi-colon. >

0 u/HinkMyDinkD00d [OP] 25 Aug 2015 03:59

as in 

<a href&gt="https://pbs.twimg.com/media/CLBO4fLXAAA1jTo.jpg" <img src="https://sickr.files.wordpress.com/2013/05/donkey_kong_bananas.jpg?w=604&h=604" /></a>

?

Because that didn't help me. I believe that W3Schools is what the teacher wants us to use, but I've been switching between that and Codecademy because I like Codecademy's pace more than W3Schools.

I don't know a diddly dang thing about strict rendering engines, but I tested the code in Firefox. The school computers are running the latest version of Windows 7.

I've used Stackoverflow for Java stuff before, but I didn't find anything pertaining to my issue on there. Still, thanks!

EDIT: HAHAHA VOAT IS SILLY PTTTTTHHHHHHHB

1 u/dvhh 25 Aug 2015 03:37

Depending on the browser security, it would not load mixed protocol resources.
You are probably loading the html page directly from the disk instead of a http server.
So to avoid security issues (mostly with untrusted javascript ), your browser will refuse loading remote resources

0 u/HinkMyDinkD00d [OP] 25 Aug 2015 03:56

Yes, I'm loading directly from a disk, but I'm doing the same thing from my school computers and I have no issue there. I tried running this in a fresh Chrome install and nothing changed.

Thanks for the info, though!

1 u/dvhh 25 Aug 2015 04:21

What are the OS/Browser combo you are using at school and at home ?

0 u/HinkMyDinkD00d [OP] 25 Aug 2015 04:51

Ah, it doesn't matter anymore. I found out that I'm a double dumbo and forgot to close a tag whenever I'm home but remember to close it when I'm at school for some reason. Thanks for trying to help, though!

1 u/Codewow 25 Aug 2015 05:53

Haha. I used to do this all the time when I was working with NotePad++ I switched over to KomodoEdit 8 and it auto closes most elements for you. Super convenient and prevents some of these kinds of things from happening. Even the smallest things can get past us though! I had a few of these moments last week.

-2 u/Toroidal 25 Aug 2015 03:55

HTML isn't programming.

0 u/escape 25 Aug 2015 03:59

HTML is often associated with programming languages. It's a markup language but it's often the first thing people learn when learning programming.

2 u/Toroidal 25 Aug 2015 04:15

Which is unfortunate, because it causes confusion as to what programming really is.

-1 u/escape 25 Aug 2015 04:54

Only to people who waste time with pointless distinctions. HTML is a great start to learning programming because it's completely inert, easy to begin understanding structure and relationships in code, and helps you learn to think in code. The useless pedantry of endlessly reminding people it isn't programming doesn't serve any purpose. That doesn't change the fact that it is strongly related to programming and people will post here often about it.

1 u/Toroidal 25 Aug 2015 05:26

So, you'd say the same of CSS, XML? Browsers are very permissive of error-filled HTML, in general your interpreter/compiler isn't going to be anywhere as permissive of error-filled code. The relation to programming is only as strong as your view of programming being majority web-based.

0 u/escape 25 Aug 2015 05:41

So, you'd say the same of CSS

Absolutely. CSS may as well be considered a core part of HTML as it isn't used for anything else.

XML?

Sure. It's dated now and not worth learning but it's all part of the bag.

Browsers are very permissive of error-filled HTML, in general your interpreter/compiler isn't going to be anywhere as permissive of error-filled code

Which is the entire point of learning HTML first. It's more user-friendly and isn't as daunting to learn.

The relation to programming is only as strong as your view of programming being majority web-based.

The majority of programming isn't web-based. However web programming is a very important part of programming.

I'm not sure why you're so insistent that HTML isn't part of programming and why you're still arguing about this.

0 u/Toroidal 25 Aug 2015 05:49

I just feel like defending a fact, I guess. However, if you'd prefer no more replies from me, just stop replying to me.

0 u/escape 25 Aug 2015 05:50

No I'm just curious why you're so uptight about someone including HTML in programming, despite it obviously being a subset of programming.

2 u/HinkMyDinkD00d [OP] 25 Aug 2015 04:06

I figured I'd post here since /v/html is dead, sorry.

-1 u/Toroidal 25 Aug 2015 04:17

At least you've learned something today.

4 u/escape 25 Aug 2015 04:55

Don't listen to him. HTML is acceptable to post here since it's often most people's starting point in learning HTML. You're welcome to post about it here.

-1 u/Toroidal 25 Aug 2015 05:20

You're effectively saying people should ignore the subverse rules... I don't think that's good advice.

1 u/HinkMyDinkD00d [OP] 25 Aug 2015 05:30

I don't think that's accurate at all, man. I get that html technically isn't programming, but /v/markup doesn't exist and /v/html is dead, so this was the only subverse I could post in and hope to get a few responses from. I'm glad to have learned a lesson about compilation errors rather than spend a week or so thinking "Why does this work at school but not at home?" before finally getting it.

Thanks for letting me know, but letting html stuff in here isn't going to ruin the sub.

0 u/escape 25 Aug 2015 05:43

Dude just ignore him. He's clearly trolling at this point.

0 u/Toroidal 25 Aug 2015 05:43

I didn't say it'd ruin the sub, just found it odd someone would suggest not adhering to the rules.

compilation error

Haha, now you're trolling me. :P

0 u/escape 25 Aug 2015 05:42

Which rule is this breaking, hmm?

0 u/Toroidal 25 Aug 2015 05:50

2, obviously. Why are you trying to get me to reply more?

0 u/escape 25 Aug 2015 05:51

Wait what? You don't think HTML is part of programming? It isn't a compiled language, but that's an oddly esoteric definition that seems to be used by pedants when talking about programming. The act of writing HTML is literally called "programming" and HTML is the first language most people who learn programming learn. It's obviously part of programming.

Are you autistic?

0 u/Toroidal 25 Aug 2015 05:55

Haha, am I autistic? Ok, you're a funny one. You're just joking about HTML being programming, gotcha.

0 u/escape 25 Aug 2015 05:57

Are you sure you're qualified to take part in this subreddit?

https://en.wikipedia.org/wiki/Declarative_programming#Domain-specific_languages