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
Images- the img tag

Once you have a webpage with text and fancy background colors, you probably want to add an image or two. To add an image you use the <img> tag. It does not have a closing tag. It looks something like this:

The img tag has too parts that you need to set. You put the image file name inside quotes in src="". Src is short for source, but I always think of it as search, like search for the image that equals "zombie.jpg". If the image is not in the same folder as your webpage, don't forget the full path to the image. If zombie.jpg was in a folder called "images", and that folder was in the same folder as my webpage, then I would write src="images/zombie.jpg".

Another thing you have to set is alternate text for your image in case it can't be displayed. It should describe what the image looks like, or if text is on the image you should probably write that in the alt text. Just put a description in between the quotes in alt="".

You can also specify a height and/or width like this:

submit to reddit

More: HTMLimgsrcaltimages

Source: Seth | 2012-05-15

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag