A Bit More Than Basics

Hopefully that wasn't too bad - it's going to get even better from here! ###Headers In HTML, you can have 6 header types. ```html <!DOCTYPE html> <html> <head> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> ``` Heading 1 will be the largest and heading 6 the smallest. You should use these with paragraphs and other elements when you want to distinguish the headings from the actual text. For text, the paragraph and heading elements are your go-to. Use them wisely! ###Links (Hyperlinks) To create a link to another page or website, you use an anchor element. ```html <a href="https://youtube.com/">My Text</a> ``` Lets decipher this code: - As you know, the anchor element has opening and closing tags. - The `href=""` part is called an attribute. The name of the attribute is `href` and it is equal to whatever is between those two quotations, in this case `"https://youtube.com/"` (without the quotes). `href` stands for hypertext reference and you'll see it being used as well when we're importing stylesheets. - The text in between the two tags will be the clickable link. You can place this anywhere - in a header element, paragraph element, it really doesn't matter. Depending on your requirements, you will be able to figure out a good placement. Attributes are an important aspect of HTML and so you'll see them come up a lot. You can have as many (custom) attributes separated by a space, so there's no limit. ###Images Yay! Something more exciting. Let's see how images are created... ```html <img src="https://slinthn.me/res/pusheen.png" /> ``` Hold on - where's the closing tag? For images, a closing tag is not required since you can't really put text in an image (kinda, we'll get to that later). It's my own preference to add a `/` before the `>`, though this is not required. I do it because I think it makes the code look cooler; you could just have ended after the endquote with a >. Since we have a basic understanding of attributes, I'd like to introduce you to two friends, `width` and `height`. Check this out. ```html <img src="https://slinthn.me/res/pusheen.png" width="200px" height="200px" /> ``` I don't think this needs much explaining - these two attributes set the width and height of the image to 200 pixels (px stands for pixels). ###Divisions (divs) This is of lesser importance here but more in the next section where we will be covering stylings. A `<div>` is basically used to separate content on a website. This makes styling and scripting easier. It also makes code a little more readable. Here's how you can use it. ```html <div> <h1>Blog Post 1</h1> <p>Trees are nice. They provide us with oxygen and are beautiful in general. Here is a picture of a tree:</p> <img src="https://slinthn.me/res/tree.png" /> <p>Lovely, isn't it?</p> </div> <div> <h1>Website Update</h1> <h2>What changed?</h2> <p>As you can see, there is a new styling. Let me know if you guys like it.</p> ... </div> ... ``` It's not the best example but it definitely shows one way which they can be used. The next page will explain why this is benefitial for us. For now, just understand that it divides up content into smaller sections and you will use it a lot. Also, make sure you only ever use this in the `<body>`. There is no reason to use it anywhere else. ###Comments Last thing. Comments are useful for writing notes, todos and stackoverflow links in case you forget something. They are simple: ```html <!--MY COMMENT--> ``` Put this wherever you want, and this works on multiple lines too, until you put the ending `-->`. There's not much more to say about this, so lets move on to the next thing!

Continue to Simple Stylesheets