F rom w w.basic compu this Booklet

I

Tk Thm Tof Nyptf Yo IfT Soi Y

ntroduction

This booklet isknowledge of

These days it having a web might be all th

This booklet isof a web pagefind what you

Numerous weyou don’t NEEpersonal or smthe right look features, but

You are welcoon my web sit

f you want toThe name is S

SiteSell offersof people to hncluded in thYou can read

F

Than

s intended fof “what goes o

is almost expsite for persohe training yo

s written in ae from scratchu need to kno

eb hosts “out ED to know hmall business and feel. Moit is always ni

ome to make te. You can fin

o start a smallSiteSell, and c

s hosting, sitehelp with anye subscriptio more about

rom ww

nk you fo

or people, whon behind the

pected that evonal use or foou’ll need.

n easy to undh. You may orw by using th

there” will oow to work wwebsite, you

ost of these wice to know t

comments ond it HERE.

l business on alling it a web

‐building madthing you findn. it HERE

ww.basic

or down

o want to stae a web page

veryone has aor your small b

derstand langr may not knohe Index.

ffer you smalwith html. It isu will want to web host proghe basics of h

r suggestions

the web, I wob host is reall

de very easy, d difficult, lot

c‐compu

nloading

art out with th”.

at least a persbusiness – an

guage and illuow some of it

ll programs fos my experienbe able to pe

grams will allohow you achie

s to this Eboo

ould like to rely not the righ

submission tts and lots of

uterskills

this free

heir own web

sonal webpagnd never reall

ustrated with t already, so I

or creating a “nce, howeverersonalize yoow you to choeve simple ch

k. Just send m

ecommend thht word for it

to the search “easy to follo

s.com/

e Bookle

b site or just w

ge. If you havy had any htm

images. It ex tried to mak

“click by clickr, that when yur site, so theoose betweenhanges.

me a note thr

he world’s bet!

engines is incow’ tutorials..

et.

want to get th

ve been consiml training, th

plains the setke it easy for y

k” edited webyou first start e site gets youn different eff

ough the con

est web host

cluded, a com...and LOTS m

he basic

idering his just

tting up you to

bsite, so your ur idea of fects or

ntact form

to you.

mmunity more – all

http://www.basic-computerskills.com/

http://www.basic-computerskills.com/contact.html

http://www.basic-computerskills.com/SBI.html






T

Table of

Copy

This d

Permof th

f content

PagPagPagPagPagPagPagPagPagPagPagPagPagPagPagPagPag

yright 2007 ©

document is p

mission is granis document

t

ge 1...............ge 2...............ge 3‐4...........ge 5...............ge 6...............ge 7...............ge 8‐9...........ge 10‐11.......ge 12‐13.......ge 14.............ge 15.............ge 16.............ge 17.............ge18‐19........ge 20.............ge 21‐23.......ge 24.............

©www.basic‐c

protected und

nted to print twith a clear r

..............

..............

.............

.............

..............

..............

.............

.............

.............

.............

.............

.............

............. ............. ............. ............. .............

computerskil

der the gener

this documenreference to th

TOC Building aAdding teFormattinAdding linYour firstAligning tFormattinFont coloBack grouInserting Inserting Creating Creating Creating L&F of taWrapping

lls.com

ral law of Cop

nt for educatiohe author an

a page ext ng text ne breaks t web page! text/contentng font or und color image text link image links a list a Table ble g text around

pyright.

onal purposesd web site it b

d an image

s and/or to linbelongs to.

nk to the orig

Page 1

gin

The html codes are called "tags", and every tag has a start and an ending symbolized with the "<" and the ">" Also called 'starting a tag" and "closing a tag".

Every web site/web page consists of a notepad text file with the information for every command ‐ everything you see on the page:

<html> ‐ tells the browser, that here comes a web site/page <head> ‐ inside the head tag you will find the tags for keywords optimization for the seach engines, IF the

page you're looking at is keywords optimized, that is. You may also find the page "Title" </head> Marks the end of the head tag <body> ‐ tells the browser that here starts the actual content of the page </body> ‐ tells the browser that here ends the actual contents of the page </html> ‐ tells the browser that here ends the web site/page

What I just mentioned is the basics behind any web page, if left like this the page will be a white page in the browser with no content, but just a page.

Text file for the basic web page

And the web site will look like this

<html> <head> </head> <body> </body> </html>

C <<<<<< SD

N Wb O

S

• Give

Create a text f

<html> <head> </head> <body> </body> </html>

Save the text Double‐click t

• Cont

Now we want

We already knbetween thes

Open the text

Save the file, a

e it a try...

file with Note

file as test.htthe icon...and

tent

t to actually w

now that conse two tags in

t file test.htm

and open it b

epad with the

tml (save it tod the file will o

write somethi

tent goes bet the text file.

ml file with no

by double‐clic

e text :

o your desktoopen with yo

ing on that pa

tween the <b.

otepad ...(righ

cking it again.

op).... ur browser..

age...

ody> and the

ht‐click .... ope

..

e</body> tags

en with....Not

s, so try to wr

tepad)

rite a sentenc

Page 3

ce

A

And now you actually wrotte a page with

h text on it!

Page 4

• Formatting the text

<b> Start Bold text </b> End bold text <i> Start Italic text </i> End Italic text <u> Start underlined text </u> End underlined text

Open your text file again ‐ Type in the same line 3 times like this between the “body” tags.:

Line number 1 you wrap in the BOLD tags Line number 2 you wrap in the italic tags Line number 3 you wrap in the underline tags Now your text file should look like this:

Now save the text file again as text.html and open it by double‐clicking it. It will again open in your browser, only now you have formatted the text and your web page will look like this: Notice how the 3 lines you typed are NOT 3 lines, but actually 1 line. That is because we haven’t actually told the browser to see them as 3 lines. In order to do that we need to insert another tag – the line break tag:

<br> Tells the browser that here is a line break

This tag does NOT have an end tag, as a line break really doesn’t have a start and an end! Try adding it like this to your text file

N

Now you told the browser

Cong

to see these

gratulation

lines as 3 line

ns! You ha

es in a row.

ave created

d your firstt web pagee.

Page 7

Now I’m sure you would like to be able to do more than just adding random text.. Ready to go on to next step?

• Aligning your text/content

<p> Start of paragraph </p> End of paragraph <p align=”right”> Describes the alignment of the paragraph as RIGHT <p align=”left”> Describes the alignment of the paragraph as LEFT <p align=”center”> Describes the alignment of the paragraph as CENTERED

• Give it a try.. Open Notepad again and create a file that looks like this: Save it like before as test.htlm (overwrite the one you have)

D

Double‐click yyour text.htmml file ‐ and noow you have

a web page liike this:

Page 9

• Formatting font We don’t always want to write in Times New Roman, which is the usual default font, so we need to be able to change that. However, you will have to choose between the web safe fonts – the fonts that most browsers will allow you to use.

Web‐Safe fonts include: • Arial • sans‐serif • Verdana • Times New Roman • Courier • Courier New • Impact

Other fonts that work on a majority of browsers include:

• Chicago • Helvetica

Microsoft Internet Explorer (now about 75% of the market) also accepts:

• Georgia • Trebuchet

<font face=”verdana”> Start of text with a special font face </font> End of text with a special font face

So let’s try changing the font in our test.html file:

O T

Open the test

Try the same

t.html by dou

with your oth

ble‐clicking, a

her lines in th

and you’ll see

he text file an

e the result:

d use other foonts.

Notice the linechange

how the fonte inside the taed...

t of ag has

Page 11

• Adding color to fonts Next step is to be able to change the color of the font.. Colors are changed by adding the hex number for the color you want your text to have. Here are some examples of hex numbers for the most usual colors:

• Color Color Code

Red #FF0000

Turquoise #00FFFF

Light Blue #0000FF

Dark Blue #0000A0

Light Purple #FF0080

Dark Purple #800080

Yellow #FFFF00

Pastel Green #00FF00

Pink #FF00FF

• Color Color Code

White #FFFFFF

Light Grey #C0C0C0

Dark Grey #808080

Black #000000

Orange #FF8040

Brown #804000

Burgundy #800000

Forest Green #808000

Grass Green #408080

<font color=”ff0000”> Starts the color of the font </font> Ends the color of the font

• Give it a try.. Write your text with the codes like this: And the result:

Notice how the font of the line inside the tag has changed...

• Page color/background color

You can change the background color for the entire page...

<body bgcolor=”hex number”> No end tag needed, it applies to the entire page

Let’s try the code for that in the text file:

Open it the usual way and the results will be...

• Inserting an image

<img src=”name‐of‐image.jpg”> Start of image – shows the source of the file displayed

</img> End of image

To insert an image, you will need to point to the source of the image, meaning the location where it is stored. In this case we point to an image source located on this computer. If this web page was to go “live” on the net, the source would have to be somewhere online – you would need to upload your images to a folder at an online storage. Let’s write the code into the text file:

Open the file the usual way..

‐ and the result would be this:

• Inserting a text link

We want to link to Yahoo from our web page, so we will have to referrence to a URL:

<a href=http://www.something.com> Start of link/reference </a> End of link/reference

Put this code into your text file:

And now you have a text with a link..

• Make an image link

Instead of the text you can also make an image link to another page..

<a href=”url‐of‐website/page.com”><img scr=”name‐of‐image.jpg”> Refers to webpage and image source </a> Closes the tag

Back to your text file...and write in the code – and save the file as test.html

‐ now you have a linked image.

Notice how the link shows as a hand and in the process line when pointed at with the mouse

• Creating a list

There are several different kinds of lsts, but tis booklet will concentrate one two kinds of lists: The unordered list – a lists with bullets The ordered list – a numbered list starting with the number 1

Your text file for a list with bullets...

Your web page...with an un‐ordered list with bullets.

Y

Nis S

Your text file f

Notice the ons the start an

Save and ope

for a list with

ly thing chand end tag ...

n your web p

numbers...

ge from befo

page file and y

ore

you’ll see the

difference..

Page 19

• Adding a table

<table cellpadding”xx” cellspacing”xx” width=”xxx”> Starts table and gives info on dimensions <td> Table data <tr> Table row </table> End of table

So the code for a 2 column 1 row table will be:

And the result will look like this:

• Look and feel of the table

You can also change the L&F of the table by adding a little more info inside that table tag. You can change the number for cell space and – padding and add the hex number for the color, you would like.

border color=”hexnumber” Inside <table‐> ‐ tag cellspadding=”xxx” Inside <table‐> ‐ tag cellspace=”xx” Inside <table‐> ‐ tag

To add some color to the borders, in this case red:

And here is the result:

Of course inside the table tag you can add the other formating snippets like bold, Italic,underlined , change the font, insert images or create links. In this next example we want to create a table for small images..

You can add as many as you like. Remember to deine the width of your table suitable for the number of images you want to place inside the table.

When one row is filled up and you want to add another ro, you use the</tr> and start the next row with a new <tr>

This code would result in one row of two columns:

Here is an example of a table with two rows and three columns: ‐ and on the web page...

• Wrapping text around an image

To make the text wrap nicely around an image, you’ll need to use a “div’ tag. The “div” tag defines a division/section of the document.

<div> Inside the div‐tag the information of that section will have to be placed.

Here’s an example:

In this example the image floats to the rigth of the section. You can change that to “left” or “center” as well.

The web page of this example looks like this:

<

<

<

<<<<

<<

<

<

<<

<

<

<

<<

<

b

c

cB

<

• Basic

Sta<html>

<head>

<body>

<b> <i> <u> <br>

<p> <p align=”righ

<p align=”left

<p align=”cen

<font face=”n<font color=”

<img src=”nam

<a href=”URL

<ul>

<ol> <li>

<table>

border=”xx”

cellpadding=”

cellspace=”xxBorder color=

<div>

c html ove

rt of tag

ht”>

t”>

nter”>

name‐of‐fonthex‐number”

me‐of‐image

L”>

”xxx”

xx” =”hexnumber

erview

‐ telweb‐ inskeywthe that‐ telactuStarStarStarTellstag!StarDesRIGDesendDesCEN

”> Star”> Star

.jpg”> Starfile Star

Un‐

NumStar<ul>StardimDefi<tabDefi> Defi

r” Defi<tabDefi

Whlls the browseb site/page side the headwords optimipage you're lt is. You may lls the browseual content ofrt and ends Brt and ends Itrt and ends us the browse! rt and end of cribes the aliHT – end withcribes the ali with... cribes the aliNTERED – endrt and end of rt and end of

rt and end of displayed rt and end of

numbered lis

mbered list rts every elem> tags. rts table and sensions insidines the bordble‐> ines the cell p

ines the cell sines color of tble‐> ines a division

hat the tager, that here

d tag you will fization for thelooking at is kalso find the er that here sf the page old text talic text nderlined texr that here is

paragraph gnment of thh... gnment of th

gnment of thd with... text with a spfont color

image – show

link tag

st

ment of the lis

should have tde the <> der of the tab

padding – pla

space – placetable border

n/section of a

g does..starts and en

find the tags e search engikeywords optpage "Title"starts and end

xt a line break –

he paragraph

he paragraph

he paragraph

pecial font fa

ws the source

st inside the <

the snippets f

le – placed in

ced inside th

d inside the <– placed insid

a document

ds a </

for nes, IF timized,

</

ds the </

</</</

– no end

</as </

as LEFT– </

as </

ce </</

e of the </

</

</

</<ol> and

for </

nside the N

e <table‐ N

<table‐> Nde the N

</

End of /html>

/head>

/body>

/b> /i> /u>

/p> /p>

/p>

/p>

/font > /font>

/img>

/a>

/ul>

/ol>

/table>

o end

o end

o end o end

/div>

Page 25

tag

F rom w w.basic compu this Booklet

Documents

Transcript of F rom w w.basic compu this Booklet