skunkbear
Don't forget to comment your work

Before you program too much, you have to start putting comments in your code. Putting in comments will help you find places in your code when you go back later to edit it. You can also write yourself little notes to explain some confusing code. Sometimes I write myself little reminders too, like something I want to add later. HTML will work perfectly fine without comments, but they will help you tremendously. Just write <!-- as your opening tag. Then write any comments you want or even code that you just want to hide for a little while. Then close it up with -->. Here's an example:


submit to reddit

More: HTMLcomments notes

Source: Seth | 2012-05-28
Layout your webpage using divs

You can make a simple web page with just text, pictures, and links. By default, they'll form a nice line on the left side of the browser window like a big list. If you'd rather not have your website look like a list, you can lay it out in a grid like pattern. You can create your grid out of boxes or divisions called divs. A div is similar to a span in that you can change it's background color and set the font size is in it. A span can't be set to be a certain size though or take up a specified spot on your webpage. First we will just make a div and give it a border. To create it we will use a starting <div> tag and a closing </div> tag.

one red div

All that code does it create a div whose height is 12 pixels high, width is 600px wide, and background color is red. Inside the div are the words: "wow it's a div". An average web user has a screen that is at least 1024 pixels wide and 768 pixels tall, unless they are using a tablet, phone, or outdated monitor. Sometimes it might be better to use percentages for the width and height. Let's use two divs.



You can set pixels or percentages, but the divs will just stack up below each other like a list if you let them. What's nice is when you can put a div beside another div like blocks in a line. What you want to do is "display" it as an "inline-block" like in the example below.

inline blocks

We changed the width of the divs so they didn't add up to more than 100%. Then at the end of the where we set our styles, we added "display:inline-block;". If you set one div to be an inline block, and the one after it to be an inline block, then they will both be blocks in a line. That's enough to get you started with divs. You can now set them so that they stack in line going down, or so that they line up as boxes piling to the right.

submit to reddit

More: HTMLdivdisplayinline-block

Source: Seth | 2012-05-25
Link it together

Creating links is simple. You just have to remember this: a href. The "a" stands for anchor and the "href" stands for hypertext reference, but forget I just told you that. "a href" is a link. Let's see some code:
So you just set your "href" to whatever filename or website that you want to link to. If it's a file in the same folder as your webpage, all you write is the file name. If it's an external website, just write out the whole site, and don't forget the http part. Between your opening <a href=""> and closing </a> tags, you put the words that you actually want displayed that people will click on. You don't have to use words though, you can use a picture as a link like so:

image in link

submit to reddit

More: HTMLlinksa href

Source: Seth | 2012-05-17

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag