Learn HTML Code » HTML Basics (learn HTML)

GIF, JPG, and PNG – Which should you use?

Zach — Sat, 05 Sep 2009 07:31:55 +0000

Gif Images

GIF images are primarily used when showing images that do not have a wide range of colors. A gif image only supports up to 256 unique colors. When saved, GIFs are relatively small files and therefore load faster. You should not use a GIF to show pictures or any images with a gradient. GIFs images are the only alternative to flash when you want to show a “moving” image. GIF images allow a transparency and an interlacing option.

When using the transparency of a GIF the GIF background will appear as the same color that it is placed on. Therefore placing a transparent background GIF in a red background div will turn the GIF background red.

Interlacing a GIF will make the image appear right away while it is being downloaded. The image will be blurry and continue to get less blurry until the full image is downloaded. Which it will then display crisp and sharp. GIF files that contain interlacing will be a larger file size then those without it. This means make sure you use it when appropriate or else you may be taking more time to show then image then just waiting for the server to download the full image and then display it.

JPG Images

A JPG image is primarily used for pictures and images with a gradient. A JPG image will show about 16.7 million colors. Only use JPG images when the image is a photo, a gradient image, or does not look good in a GIF format. JPG images allow an interlacing option called a progressive JPG. A progressive JPG acts like an interlacing GIF Do not use a JPG to display text because your text will blur in with the image and it will not look crisp.

Once a JPG file has been saved you can not retrieve the previous version of the image. Be sure to save an original file of the JPG if you ever want to make corrections.

PNG Images

PNG is the newest image format that the web offers. It was created to replace GIF images. It offers more color options then GIFs 256 capacity. However, PNGs should not be used for pictures. Though, PNGs can be a good image to use for gradients. The downfall to a PNG file is that not all browsers fully support everything a PNG file can do. However, in time this will probably change. PNG images do not support animated images.

Creating a box with a Div

Zach — Sat, 05 Sep 2009 07:28:44 +0000

Do you want a highlight box, but don’t want to have to go through the trouble of tables? Using divs to create a highlight box is much faster and easier then using tables. Once you have created your box you can use the float style to position your box where ever you want it. An example of creating a box with divs would be:

Example

Notice the border style I put in this code. You can change the pixel of your border to make the line thicker. Here is an example of this code in use (I added a height and width to mine to scale the box to my text):

Example

Inline Tags

Zach — Sat, 05 Sep 2009 07:28:33 +0000

Below is a table with inline styles that can be used throughout your website. Each style has the example to the right of the tag.

Tag	Value
	bold text
	big text
	emphasized text
	italic text
	small text
	strong text
	_{subscripted text}
	^{superscripted text}
	inserted text
	~~deleted text~~

Paragraphs

Zach — Sat, 05 Sep 2009 07:28:17 +0000

Do you want your paragraphs to stick right under each other? Want your paragraphs to have more spaces between them? Do you want to break a paragraph at a certain point in your webpage but do not know how? Well you’re in luck! To play with the spacing of paragraphs you just need to change the margin and paddings in your css or inline style. However, to make a paragraph jump to the next line in your web page you need to add a
in your code. An example of this would be:

Example of a line
break.

This would turn out to look like

Example of a line
break.

If you have a certain width that you want your paragraphs to always be you can place the paragraphs into a div. Once you place them in a div, style the div to have a specified width. This will make your paragraph jump down to the next line whenever it has to exceed that width. Do not use paragraphs to create empty lines in your HTML. You should always use the
tag to add blank lines in your webpage

Div Tags

Zach — Sat, 05 Sep 2009 07:27:59 +0000

Div tags can be nice tools to help move any content on a webpage. Can’t seem to get that image right where you want it? Use a div! Tired of using a table styled web page? Construct it with divs. Div tags encompass only what is inside the tag. You can’t ID a div with a number first. For example:

Example

When you use CSS and reference body, only items within that div will be affected. To move the div to where ever you want it, you just need to add a float style. For example:

Example

This will let you move that div area anywhere on your page using padding and margins. Be sure to reference a height and width to your invisible box to give it dimension!

Styling your Webpage

Zach — Sat, 05 Sep 2009 07:26:38 +0000

Now let’s add some style to your content. We will give your div an id of main and we will make your header blue, your background a yellow, and your paragraph maroon. You will want to style your body to set the margins and padding to 0 in your website, choose the placement of your text, and assign fonts to your website. To align your website in the center of the page in both firefox and IE you will want to give your content div a margin of ‘0 auto’.

The body style will also be where you give your webpage its main background. You may have more then one background to accomplish different things. I used four background images in this website. Your code should look like this:

title of your website

Cool Website

This is my first website

Be sure to save this as an .htm or .html document and then open it in your web browser. Click here to see an example of what your page should look like (The back button will not be in your webpage, it is to make it easier for you to navigate back to the tutorial page).

Website with Basic Content

Zach — Sat, 05 Sep 2009 07:26:16 +0000

Now let’s add some content to your website! We will start off by giving it a title. Put a

then

Cool Website

then

This is my first website

and finally,

. Your code should look like this:

title of your website

Cool Website

This is my first website

Essential Code for a Website

Zach — Sat, 05 Sep 2009 07:25:43 +0000

Never coded a website before? No problem! I’ll take it back to the basics for you and walk you through the beginnings of coding a web page. First of all every website needs an html tag, head tag, title tag, style tag, and a body tag. A style tag is not required when you use a css link, but we’ll get into that later. To begin, your layout should look something like this:

title of your website

Your content will go here

Be sure to save this as an .htm or .html document. This is the basic layout of a webpage before you put any content in it. I did not add the doc types or anything because we will talk about that later. There are many tags you will use in your web pages so I will not create a list of them. Some of the basic ones you will use are headers, paragraphs, and divs. You will use divs a lot to group specific items of your website.

When you assign an id to a div, only the content inside the div will be altered when you add styles inside your style tags. You style id’s by typing ‘#id name’. You style a class by typing ‘.id name’. Please note that you can use the same class tag name on multiple items, but you may only use one id per item. Also, when you style a class, everything that has that class id will be affected. Do not begin id or class tags with a number and do not enter spaces in the name of your tags.

Inline Spans

Zach — Sat, 05 Sep 2009 07:25:28 +0000

Inline Spans are used to change a length of text through CSS. If you are going to be doing the same thing to certain areas of text throughout your paragraph then it would be a wise choice to use inline spans to reduce the amount of coding you need to do. This also allows you to change all of the Inline Spans at once if you ever decide to change them, rather then coding each section individually on the changes. Inline spans can be assigned an id, class, or both. Example of a span being used would be:

Here in the United States

Inline Spans will not do anything to your text until you assign them style code, whether it is through your CSS or inside the opening of the span tag.

Headers and Paragraphs

Zach — Sat, 05 Sep 2009 07:24:53 +0000

Headers are used to break up information of your webpage. A good example of using a header would be the title of your article. There are 6 levels of headers (). ‘N’ stands for any number 1-6. The size of the header font becomes smaller as your value of n becomes larger. They start at 24 and go down 18,14,12,10, and 8. You can use headers as anchors for navigating a visitor to your texts.

Paragraphs are what most of your content will be encompassed in. To move a paragraph up and down vertically use ‘line-height:n’. ‘N’ may either be a percent, ‘a’, or a number. N is a number multiplied by the font size, n% is a percentage of the font size and ‘a’ is an absolute value. To change space after a paragraph you should use margins and padding. Your paragraph may be aligned to a side by typing align=”direction”.

HTML and XHTML do not register extra spaces you place in your code. If you want to put an extra space in your design view you have to type & nbsp; in the code with no space between the & and ‘n’.