Web Designing Tutorials(Image Types)

You remember at the start of this course we talked about file extensions, and you learnt what the .htmlfile extension was? You’re now going to learn about two new file extensions: JPEG and GIF.

Just like web pages and word process documents have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF. (PNG is another popular image format. It’s similar to GIF, so we won’t discuss it.)

Read More...

Web Designing Tutorials(Inserting images into a web page)

So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with the IMG tag in HTML. The basic IMG tag looks like this:

<IMG SRC=”some_image.gif”>

There are no closing tags for the IMG tag. So you don’t do this:

<IMG SRC=”some_image.gif”></IMG>

In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you type SRC. This stands for Source and means the location of your image. After an equals sign, you type the name of your image between a pair of double quotes.

It’s essential that you get the SRC part right, though. To do that, you need to know about Absolute versus Relative file referencing.

Read More...

Web Designing Tutorials(Font Style, Font Weight, Font Variant)

Font-Style

There are only three font styles to choose from: normal, italic, and oblique. Of course, the default is normal, so you don’t have to use font-style unless you want italic or oblique text. You use them like this:

There’s not a great deal of difference between italic and oblique, though. If you want to see the difference, use a sans-serif font, with a large font size.

Read More...

Web Designing Tutorials(Font Size with CSS)

There are plenty of ways to change the font size with CCS.

You can change the size of your page fonts with the font-size property. The values for the property, however, can be a bit tricky. Take a look at these values for font-size:

font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;

They are actually the same size! Try them out in your code. Add the following highlighted CSS Style:

Read More...

Web Designing Tutorials(Font Colors)

There are quite a lot of other font styles you can use in your CSS. We’ll start with font colours. (Strictly speaking, though, COLOR is not a font style – it can be used just about anywhere to colour lots of different things.):

You can have just about any font colour you want for your text (British English users, note the missing “u” after the second “o”. The American spelling is used in HTML and CSS). To specify a colour, you can use one of three formats:

Read More...

Web Designing Tutorials(CSS and Fonts)

In HTML versions prior to the new version, which is HTML 5, you could specify a Font with HTML tags. If you wanted Arial, for example, you could do this:

<FONT face=”Arial, Helvetica, san-serif”>Some text here</FONT>

However, In HTML 5 the FONT tag is deprecated. That doesn’t mean you can’t use it anymore, as browsers are backward compatible, meaning that older code will work with all browsers. But if you want to go with the modern way of doing things then fonts, font sizes, and font colours should be done with a Stylesheet.

To change the font on your page, the font-family CSS property is used:

Read More...

Web Designing Tutorials(Inline and Embedded Styles)

Inline Styles

Open up the HTML template text file you created at the start of the course. Click File > Save As in Notepad. Save the file with the name newpage.html. Don’t forget to change the Save as type box toAll Files before clicking the Save button, if you’re using Windows.

Add some text for the TITLE tag. Add an H1 heading, with some text between the two H1 tags. Now add a paragraph of text below the H1 heading. To create an Inline Style, click after the first H1. Tap the space bar on your keyboard. Type the following:

<H1 style=text-align:center>

Make sure there is no space after the colon and before the word ‘center’.

Read More...