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
The break tag

I've already taught you how to make your first page and change the background color. You can write whatever you want on it, but you may have noticed that you can't make the text go to the next line by pressing the enter button like you can in a word processor. I think the easiest way to move to the next line is to use a break tag that looks like this: <br> . Just remember that br stands for break. Here's some sample code:

Notice that one line break tag moves the text to a new line, and two line breaks will skip the next line and leave a space. You can put as many break tags as you want in a row, but I recommend just using a max of two. After that, you should probably be using margins and padding, which is some CSS we will get to another day.

submit to reddit

More: HTMLbrline break

Source: Seth | 2012-05-11

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag