Saturday night/Sunday morning learning party – comments and links

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&gt; – 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&#8221; 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:timjohnson@gmail.com?bcc=test@gmail.com&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!

Heading and whatever else is on the next few pages

There are six heading tags, <h1> through <h6>, with <h1> being the most important header and <h6> being the least. They affect the font size, but should be used for heading pages and sections and NOT for making text bold or large, that’s what CSS is for. Headings are used by search engines to index your page, which is one of those phrases where I feel like I know what it means, but kinda not really.

<hr> is another empty tag, like <br>. It makes a horizontal line on the page.

Some tags for modifying how the text looks within a <p> element:

<p>These <b>words are gonna be bold</b>, while <em>these will be italics</em>.</p> gets you:

These words are gonna be bold, while these will be italics.

<strong> is  typically used for bold like <b> and <em> is usually used for emphasis like <i> to make things italics.

There’s a special tag for <address> but I can’t tell what it does besides making everything italics, but then again if you wanted to style all addresses on your site a certain way using this tag would make things a lot easier. Same concept for the <abbr> tag, which is for abbreviations but it’d be tough to think of a situation where you’d need to style them specifically.

Text direction is a pretty sweet attribute, if you do <bdo dir=”rtl>This is some text</bdo> will write it backwards. bdo stands for bi-directional override, and the dir attribute’s value tells it which direction to write the text.

<blockquote cite=”https//whateverthesourceisforthequote.com”> This is a blockquote element and will have that indent you see when quoting a whole paragraph for a blockquote</blockquote>

<q> can be used within a <p> element to add some quotes. As noted, a benefit of all these specific tags is that it helps with styling them. If, you know, for some reason you wanted to really style the hell out of those quotation marks.

<del> can be used within <p> elements to strikethrough text for deleted text, and <ins> will underline inserted text. It’s for when you cross out a word and put a new word in to replace, and for some reason want people to see that.

Finally, <mark> allows you to mark/highlight some text.

Alright, that’s it for now. Off to hot air balloon.