f rom w w.basic compu this booklet
Post on 12-Sep-2021
1 Views
Preview:
TRANSCRIPT
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
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
Page 2
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
Page 5
• 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:
Page 6
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
Page 8
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
Page 10
• 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
Page 12
• 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
Page 13
• 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 14
• 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...
Page 15
• 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:
Page 16
• 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..
Page 17
• 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
Page 18
• 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
Page 20
• 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:
Page 21
• 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:
Page 22
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:
Page 23
Here is an example of a table with two rows and three columns: ‐ and on the web page...
Page 24
• 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
top related