It’s funny, when you’re sober video games are definitely less fun and engaging. Time to spice up my night with a second blog post.
Comments are important because they let you add notes on what you’re doing with the code, and the browser will just ignore them without changing anything on the page. To add one, you do this:
<!– This is a comment –>
W3C says they’re also good for debugging, as you can comment something out to temporarily remove it from the page.
IE accepts conditional comments, which only execute what’s in between them if the browser you’re using is that specific version of IE. If not, it will be treated as just another comment.
<!–[if IE 7]>This is IE 7<br><![endif]–>
<!–[if IE 8]>This is IE 8<br><![endif]–>
<!–[if IE 9]>This is IE 9<br><![endif]–>
Hyperlinks are text or images that link to other stuff (also, water is wet and grass is green). Worth noting that they seem to have some built in hover state CSS in all browsers, assuming you haven’t manually set this yourself.
If the link hasn’t been clicked – underlined and blue
If it’s already been clicked – underlined and purple
If it’s active, which is sometimes hard to see as it happens the moment you click it – underlined and red
There are some good attributes to know, one of which we’ve already seen:
href – for setting what the hyperlink is actually linking to
target – let’s you choose how this link will open. If you don’t set the target, it will open in the same tab/window you’re already on. If you set it to target=”_blank”, it will open in a new tab or window. There are some other options as well. “_self” opens the link in the same tab or window and is actually the default so apparently you never have to set it to that. “_top” opens the link in a new, full browser tab/window, removing all the frames. This is hard to explain, as I don’t really have a good understanding of frames yet, but W3C has a good example tutorial here. Finally, there’s “_parent”, which opens the link in the parent frame. No quite sure what that means yet.
id – the id attribute lets you create a bookmark, aka an anchor, so you can link back to it later. This is very handy is you want to link to a specific part of a page, rather than to the entire page itself. Here’s an example:
<a id=”contact”>This is our contact us page</a> – This is setting the anchor up so we can link other things to this page.
<a href=”#contact”>Visit our contact us page</a> – By using the href attribute, we can link to that anchor using a # sign, if we write this inside the same HTML document.
<a href=”http://www.mywebsite.com/html_links.htm#contact<a> – This is how we would right a link to this page from another page. I’m not 100% sure how this is different than just writing the normal link for the page, but I believe it’s for if you want to link to a specific part of the page.
Finally, it’s good practice to write a “/” after the url value for the href attribute. If you don’t, you actually end up making two requests to the server, the first of which adds the / for you, and the second one actually requesting the link.
To make a link out of an image, you simply put the link tags around the img element:
<a href=”http://www.nytimes.com/”><img src=”http://www.randomnude.com/wp-content/uploads/sites/39/tdomf/820/1184015367358.jpg” title=”look at dem titties” alt=”boobs”></a>
mailto link are very handy in that they open a new message your default mail client and then automatically fill in things for you, like the To field and the Subject line. It’s worth noting, after the first part, the mailto with what you want in the To field, you put a ? after for any other details you want to fill in, like bcc, subject or the body of the message. Then, you can use the & to separate those different parameters, and %20 for any spaces you might need to write. Here’s an example:
<a href=”mailto:email@example.comfirstname.lastname@example.org&subject=Hello%20there!&body=Hey%20there,%20this%20message%20is%20to%20tell%20you%20to%20learn%20this%20soon!” target=”_blank”>Contact us!</a>, gives us this in the message it opens:
Wooo!!! That was a lot of information about links, didn’t expect there to be this much. On to the next lesson!