skunkbear
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
Span and font-size

We can easily write text in a webpage between the body tags and put them on new lines using a break tag, but the text has stayed the same size. Sometimes you may want smaller or larger text. We can change the text size of the whole webpage by adding some style into the body tag like we did with a background color. Instead of using background-color though, you use font-size like so:
That code says that, for all the text in the body section, you want the font size to be 200 percent bigger than the default. The default that web browsers set text to is 16 pixels. A pixel is one of those little dots on your screen. So if you stack 16 dots up then your text is 16 pixels high. That height of 16 pixels also goes by another name, an "em". In the code above, we told it to be twice as big, so 32 pixels high, or 2 ems. You can use percentages, pixels, or ems to set your text size.

Sometimes you just want to change the text size of one word or one line of text. Maybe you'd even say a "span" of text. Luckily, there is two tags we can put around text that we can attach a style to. They are span tags: <span> text goes here </span>. That's how a normal span is written. Without adding any style, it wouldn't change the text in anyway. Spans don't change anything, they are just an empty container to put things in and add style to. You can add a style in the same way that we did in a body tag like in this code:
Inside the first span tag we put the code: style="font-size:70%". That sets the code to be 70% the size of the default size. After writing "Little crazy world" We used the ending span tag that has a backslash "/" in it. This indicates that the span tag is over and to stop making code 70% smaller. Then we added a break tag so that the next text will be on a new line. That text we set with pixels. Twenty pixels should be a little bigger than the original line that says "Hello Crazy World!". The last span is set using "2em". That makes it show up at 2 times the default of 16px which is 32pixels.

If you want to have some real fun, you can even use background-color again in the span instead of the body. Just make sure you separate the font-size property from the background-color property using a semi-colon ";". Check this out:


submit to reddit

More: CSSHTMLfont-sizeempixel

Source: Seth | 2012-05-14

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag