html font size

Document Sample
html font size Powered By Docstoc
					      Writing Web Pages using HTML
Reading HTML (Hypertext mark-up language)
HTML is a computer language which forms the basis of communication over the Internet.
Computers can only understand this language with the help of an Internet browser such as
Netscape Navigator or Internet Explorer.

An Internet browser displays web pages and so you will need to use a browser to see
what your page looks like. To see the code behind the scenes and work with the HTML
language you need to go to “View” and then “Source”.

Writing in HTML
All web pages can be viewed in their original source code using the “View” and “Source”
but when writing pages, you want to be able to make changes to the code as easily as
possible. For this reason, Internet Explorer is the preferred choice of Web Browser as it
automatically opens the Microsoft word processing program “Notepad” which is loaded
onto all computers using the “Windows” operating system.

This is how pages are worked on but the very first lines of code must be entered straight
into “Notepad” as your web browser can’t open a page that doesn’t exist.

Open “Notepad” from the “Start” menu and then go “Programs” and “Accessories”.
I will use capital letters for HTML code which must be entered exactly. Other parts of
the page which are subject to your preference will be typed in lower case.

Type the following three lines in:

<HTML>
This is an actual web page
</HTML>
Those sharp looking brackets are found by pressing “Shift” and then the full stop and
comma keys.

Saving your web page
This page needs to be saved in a special way before it will work as a web page. Under
the “File” menu, go to “Save”. Save this file to a place that you can put all other files you
will be wanting to be associated with your page. If writing this at School, save it in your
classroom folder (Network Neighbourhood / FS1 / Room 9 or whatever room number it
is).
This page must also have a file extension to complete the process. Use a file name which
is unique to you as there are many files in your classroom folder. You can use your own
name even if you have already used your name on previous files. A file extension is like
a surname which tells certain files apart. Extensions are three letters following a full stop
which goes after the actual name.

For example: Save the file as brendan.htm

It is better use lower case letters when naming files as this can be important when your
pages are uploaded to the Internet. Try to keep the length of the file name to eight letters
for the same reason. If you have successfully saved your page it will be listed on the
network or wherever it is with an “e” icon which means it is a web page.

Working with your page
When you make changes to your page you will want to see what difference has been
made. Do this by exiting the “Notepad” program using the x in the top right-hand corner.
You will be asked if you want to save the changes. Click “Yes”.

The screen will look as if nothing has happened. This is because the computer already
thinks it knows what your page looks like. Because you have made changes you will
need to click on the “Refresh” button on your browser navigation bar. Now you will see
an update of how your page really looks.

Changing colours
Add the following commands to change the background colour and text colour:

<HTML>
<BODY BGCOLOR=”black” TEXT=”red”>
This is an actual web page
</BODY>
</HTML>
You will notice that colour is spelt “color” as HTML was written by Americans.


Changing the size of the font (writing)
The font size can be changed if you want a heading to be bigger or for any other reason.
The font size is a number between 1 and 7 with 7 being the largest size available. Add
the following commands:
<HTML>
<BODY BGCOLOR=”black” TEXT=”red”>
<FONT SIZE=”7”>
My first web page
</FONT>
This is an actual web page
</BODY>
</HTML>

Page layout
The previous commands will appear in the order you have written them. <HTML> must
always be first and </HTML> must always be last. You can “Cut” and “Paste” the lines
of code rather than type them out again.

To spread the different elements in you page out neatly you should use the following
commands:

<P> to start a new paragraph.
<BR> to start a new line.

Inserting a picture
A picture must be located in the same folder as your web page so the computer knows
where to find it. Use “Windows Explorer” to transfer a picture to this folder or save it in
this folder in the first place.

Pictures can be found from the following resources:
    1. Clip art
    2. Scanner
    3. Digital camera
    4. Graphics programs such as KidPix
    5. Looking on the Internet.

To use a picture from the Internet:

              Find the picture you want by searching for a topic of interest.
              Move your cursor (mouse) over the picture (image).
              RIGHT click on it.
              From the drop-down-menu that appears, select “Save image as”
              Remember the name that you give to this picture and what kind of picture
               file it it (eg. .gif or .jpg)
              Insert the details and the following command into your page:
<HTML>
<BODY BGCOLOR=”black” TEXT=”red”>
<FONT SIZE=”7”>
My first web page<P>
</FONT>
This is an actual web page<P>
<IMG SRC=”flower.gif” WIDTH=”100” HEIGHT=”200”><P>
</BODY>
</HTML>
The dimensions of the picture can easily be changed. The example I’ve listed is
rectangular and so the height is greater than the width. You can play around with the size
until you are happy with it. Try to keep the image size small to allow for faster
downloads. Pictures over 30K are considered too slow.

Using a picture as a background
You can use a picture from your folder as a background. Change the line which defined
the background colour to:

<BODY BACKGROUND=”yourpicture.gif”>

Adding a link to another page
You can make a link go to any page in the world and call it anything you like. Make sure
that you have the correct address first or it won’t work. Add the following code to your
page:

<HTML>
<BODY BGCOLOR=”black” TEXT=”red”>
<FONT SIZE=”7”>
My first web page<P>
</FONT>
This is an actual web page<P>
<IMG SRC=”flower.gif” WIDTH=”100” HEIGHT=”200”><P>
<A HREF=”http://www.pokemon.com”>Click to see Pokemon</A><P>
</BODY>
</HTML>
You don’t need to underline the address. The computer underlines it as a way of saying
that this is a link. There are more features you can use on your page use but this is more
than enough to get started.