Learn HTML, Javascript, and C++

Lesson 1

In this section we will be talking about backgrounds, images, and making background images. We will also talk about how to manipulate each of these to suit your every need.

Backgrounds

Read the code below:

This code you should recognize each tag except for the 5th line. If you do not understand the other tags please refer to the Introduction page of HTML.

Alright lets look at a part of this code:

Lets break this down. We have the <body> tag but it has an attached attribute, the "bgcolor". This tells the <body> of your website to have the attribute of your "bgcolor" or background color to equal #000000 (dont forget to use quotations after the equal sign for your attributes). The #000000 is a Hex code, we will refer to Hex codes in the Hexadecimal chart. This particular number is black, so your website background will now be black. Easy enough? Well it can get easier...

The above code does exactly the same thing and is easier to write. I recommend using this way if you are just wanting a simple color like black, blue, red, etc. If you want a specific color the Hex chart has a wide range of them to choose from.

Images

The above code would make an image (as long as the URL address is correct and points to an image).

Obviously if youve paid attention in the introduction you will be able to figure out that <IMG> is a tag, and as you can see it doesnt require an ending tag because it is a single entity and doesnt affect anything after it. The SRC is an attribute that gives the <IMG> tag something to grab its image from, in this case its a website URL that goes after the equal sign, and must be inbetween 2 quotes.

Image Alignment

Now we will be talking about Image alignment, learning this you can learn to put your image in a strategic position that suits your website.

<HTML>
<HEAD>
<TITLE>The Jester Site</TITLE>
</HEAD>
<BODY>

<IMG SRC="http://typojester.page.tl/image.gif" ALIGN="LEFT">

</BODY>
</HTML>

This would align your image to the left, obviously. There are about 9 alignment values:

1. ALIGN = LEFT
2. ALIGN = RIGHT
3. ALIGN = TOP
4. ALIGN = MIDDLE
5. ALIGN = BOTTOM
6. ALIGN = TEXTTTOP
7. ALIGN = ABSMIDDLE
8. ALIGN = BASELINE
9. ALIGN = ABSBOTTOM

Alignment can be a little tricky, i will try to show you what each does when compared to nearby text, so you can see how it works.

ALIGN = TOP

ALIGN = TOP

ALIGN = MIDDLE

ALIGN = MIDDLE

ALIGN = BOTTOM

ALIGN = BOTTOM

ALIGN = TEXTTTOP

ALIGN = TEXTTTOP

ALIGN = ABSMIDDLE

ALIGN = ABSMIDDLE

ALIGN = BASELINE

ALIGN = BASELINE

ALIGN = ABSBOTTOM

ALIGN = ABSBOTTOM

Now that i showed you the first set of alignments, next comes the alignment of images and text wrapping with LEFT and RIGHT.

TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester.

The above is a red image with no alignment at all. The text doesnt come up right next to it like i would like, instead it just writes one line and drops the rest to the open line, which makes it look bad.

Now the above image has the ALIGN="LEFT" attribute, this makes all the text write right along side it, until the next open line. This works the same for ALIGN="RIGHT".

TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester
TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester TypoJester.

Now if we wanted the text to only write a couple of lines then drop to the next line we use the <BR CLEAR="LEFT"> like in the above example.

The above example is the break tag with the attribute CLEAR="LEFT", which just says break to the next line, but break to the next open line to the left (so any clear line that doesnt have an image aligned to the left). This works the same for images aligned to the right.

Background images

Now for background images, the way to make a background image for your background is like so:

<HTML>
<HEAD>
<TITLE>The Jester Site</TITLE>
</HEAD>
<BODY background="You_image_URL.gif">

</BODY>
</HTML>

The above code would create a background image for your website.

That is it for this lesson check out the others when you are ready.