make your first webpage

making websiteswith HTML and CSS

by Ian Simons and Will Mooreat www.go-berserk.com

for ages 8 and up

Go BerserkGo Berserk

First published in 2012Imphora Limited© Imphora Limited, 2012. All rights reservedPrinted by EJH Design and Print

ISBN 978-0-9571655-0-2www.go-berserk.comemail: [email protected]

Let’s get started.

and Ireland.We’ve settled in England..

For more help online go to www.go-berserk.com

There’s nowhere left

to invade!

Let’s make a website!

How about the Internet?

Somewhere in Greenland, not so long ago…

This book belongs to :

© Ian Simons, Will MooreIllustrations © Imphora Limited by Sam Hunter

WELCOME TO YOUR INTERNET!

This book will help you make your very own website on the Internet.

Millions of people use the Internet every day - it’s like a huge library of pages

about every subject you can imagine.

Now, with your own website, you can tell the whole world what YOU think.

Some web site ideas

Here are some ideas for websites:

•Favouritethings(likePetsorMusic)

•Goodcauses(likeSavetheWhale)

•Hobbies(likeFootballorComputers)

•Favouritesubjects(likeVikings)

We’regoingtomakeawebsiteaboutVikingstoshowyouhow.


VIKINGS ON THE WEB

8 of the 9 countries in the world with the

most Internet use are in Scandinavia, wheretheVikings

come from!

MORE IDEASHave a look at these websites for

more ideas to try:

www.snaithprimary.eril.net

www.nettlesworth.durham.sch.uk

thinkquest.org/pls/html/think.library

www.go-berserk.com

i

Contents

010206101112121619202025262829293137384041444647525656585962626364677171737475

Lesson 1 - Make your First Web Page Starting the page Putting things into the page Addingsomecolour(usingbody) CodeLesson 2 - More Colours and Text Changingthelookoftext Centreandemphasisetext CodeLesson 3 - Pictures and Links Adding pictures Adding background pictures Adding links to other pages CodeLesson 4 - Lists, Tables and Moving Pictures Team tags - make lists using li Adding tables Moving pictures with marquee CodeLesson 5 - Sound and Video Making navigation bars Table styles Making a picture gallery Adding sound and video CodeLesson 6 - Launch on the web Getwebspaceonawebhost Install FileZilla Add pages to a web hostAppendix Colournames Web page fonts CascadingStyleSheets(CSS) AdvancedCSS Web site description Code Taking things furtherIndexQuiz

Next, what this book will do for you ii

Introduction - Before you start!


What you needYour computer already has what you need:

1.Awebbrowser(likeInternetExplorer)

2.Atexteditor(likeNotepad)

And now you have this book to help you!We’veusedWindowsandInternetExplorer,butyoucanuseaMacorLinuxandanybrowser(visitwww.go-berserk.comforinstructions).

What this book will do for youIn this book you’ll learn how to make web pages.

We’llusethebestHTML(HypertextMarkupLanguage)andthecoolestCSS

(CascadingStyleSheets).It may sound difficult, but it isn’t really... and it’ll make you a web genius.

Even most university students don’t know what you’ll know by the end!!

How this book worksSo that you can find things easily, all the parts of the book are numbered

withcapitalletters(A,B),thennumbers(1,2),thensmallletters(a,b).

The writing is coloured to help you know what to read.

• YouDON’Tneedtoreadwhat’sintheseboxes(butitishelpful):

• YouDOneedtoreadwhatisinthemain(centre)partofthepage.

Any important codewordsinthetextarecolouredyellow.

BytheendofChapter4,you’llhavemadeagoodwebsite.Chapter5andtheAppendixaddamazingeffects(butyoucanignorethem).

• In a Heading: means something is more difficult.

means something is not necessary for your website to work.

CODETheseboxesdescribe what is happening in the code.

FUN FACTSTheseboxescontain

fun Internet facts

NOTETheseboxesgive

helpful suggestions

IDEATheseboxesgiveyou

ideas to try

Code we’ll write is in dark blue on a white background.

New code is in red, so you can see what’s been added.

x

iii

NOTETofindInternetExploreron

Windows:Clickon“Start”,then“Programs”(or“AllPrograms”),

then“InternetExplorer”,orfindthe“e”icon:

TofindNotepadonWindows,clickon“Start”,then“Programs”(or“AllPrograms”),then

“Accessories”,then“Notepad”,orfindtheNotepadicon

Lesson 1 – Make Your First Web Page

Next, make your first web page 01

Figure 1: web pages you will build

Would you like to make your own Internet pages?By the end of this book you will be able to make pages like this:

these links change colour

when you hover the mouse over

them

theVikings’eyesblink

the ships race across the screen

this video plays when the

page opens

BLAAAAH!!!

the page plays a sound when it

opens

Chapter 1 – Make Your First Web Page

02 For more help online go to www.go-berserk.com

You’ll be able to:

• Make pictures move

• Merge colours into each other

• Show videos and pictures on your web site

And more….

In this chapter, you’ll learn how to make a page like this:

A. STARTING THE PAGE1. Creating the folders for the page

1)Find space on your computer for the web page

2)Createafoldertoholdthewebpage a. Right-click in the empty space A menu will appearb.Select“New”then“Folder”fromthelist.

Afolderwillappearcalled“NewFolder”c.Double-clickonthename“NewFolder” d. Type in a new name, e.g.“MyWebsite” e.Double-clickonthefolderpicture(oricon)

The folder will open up.

Figure 2: chapter 1 completed page

IDEAIf you go to the page andclick“View”

(fromthetoolbar),then“SourceCode”,

you can see the HTML code that makes the

page.

This works with any web page!

ANYTHING BUT MY COMPUTER!

In a survey, 1 in 3 children said that the

computer was the one thing they could not live

without.

Figure 4: a new folder

Figure 3: New Folder menu

folder picture

folder name

“New”and“Folder”in menu list

Next, open the web page 03

This is the basic code in every Internet page.

a. brackets and words•Thecodeismadeupofwordssurroundedbybrackets(<>),

sometimeswithaforwardslash(/)atthestart.

•Everywordappearstwice,butnotinthesameorder.

Thebrackets(<>)areputroundwordstoform“tags”.• If a tag has a / before the word it is a closing tag,• if it doesn’t it is an opening tag.

b. pairs and containersTags usually come in pairs.

•Youcanseethateveryopeningtag(e.g.<html>)hasaclosingtag

(e.g.</html>).

•Youcanalsoputtagsinsideothertags,likeboxesinsideboxes

(e.g.the<head> tags contain the <title>tags).

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

2. Creating the web page

1)Right-click in the empty space in your folder

Anothermenuwillappear(likeFigure3).

2)Select“New”then“TextDocument”

AnewTextDocumentwillappear.

3)Double-clickontheTextDocumentpicture

TheTextDocumentwillopenup.

4)Type this into it:

NOTES1. You can write the HTML code incapitallettersifyouwant(e.g.<HEAD>),butit’sbettertouselowercaseletters(<head>).

2. You can use spaces and the Enter key to put the words on newlines(likeourcode),

oryou can type it without spaces on

one line if you want. e.g. <html><head><title>

(spaceandnewlinesareignoredby the computer, so they aren’t

important).

3. You can put lots of spaces in at once by pressing the Tab key on

your keyboard.

TOP WEB COUNTRIES

The only country in the world where everyone

is online is the Falkland Islands(withapopulation

of2,408people)

Figure 5: Text Document

new code is in red

TextDocumentpicture

TextDocumentname



c. good-looking codeTo make the code look nicer, we’ve used spaces to:

• put each tag on a new line,

• line up pairs of tags,

• and show which tags contain which.

But you can write the code without any spaces, all on the same line.

The computer just ignores spaces.

Figure 7: Save As box

IDEAIfyounamethefirstwebpageinawebsiteindex.html(witha

smalli),itwillhelpthecomputerfindthepage.

Makesureyoucallitindex.htmlNOTIndex.html(withacapitalI)

Figure 6: File, Save As menu

3. Saving as a web page

Before we fill in the page with other things, you’ll need to save it as an HTML page so that the computer knows to open it as a web page.1)Inthetextdocument’smenu(alongthetop),clickon“File”

The File Menu will appear with lots of options.2)Clickon“SaveAs”(NOT“Save”)

The“SaveAs”boxappears.

3)Typeinthenameyouwanttocallthepageinthe“Filename”box.We’llcallourpage“index”.

Make sure you type .html after the name, e.g.index.html. This will tell the computer that it is a web page.

“SaveAs”option(clickthisone)

“Save”option(don’tclickthisone)

“File”button

“File”menu

Next, put things onto the page 05

Figure 9: index.html opened in Internet Explorer

4)Changethe“Saveastype:”to“Allfiles”byclickingonthedrop-down

list and selecting it

5)ClickonSave

The computer will now save the file as an html file.If you want to save any more changes to the page you can just click on “File”then“Save”inthetextfile’smenubaratthetopofthetextfile.

4. Opening the web page

You can see in your folder that the file has a web page picture on it.This picture could be a picture from the browser you use to open web pages,oraglobe.OnWindows,it’susuallyablueInternetExplorer“e”.

This file has two parts to it – the outside part which you see on the Internet, and an inside part where the html code is. It’s a bit like a human body, where all your insides shape what your outsides look like.

a)ToseethewebpageasitwillbeontheInternet,doubleclickonit.

Figure 8: the web page in the folder

THE FIRST WEB PAGEYou can see the first web

page ever here: www.w3.org/

History/19921103-hypertext/hypertext/

WWW/TheProject.htmlLots of links, no colour

and no pictures. It was browsed by the

first surfer, the Belgian RobertCailliau.

web page called “index”inthe“MyWebsite”folder

web page called“index”displayed in a

browser

NOTEYoumayseetwofilesin the folder, the web

pageandaTextDocument with the

same name as the web page(TextDocumentslooklikeFigure5).YoucandeletetheText

Document. You only need the web page.

b)ToseetheHTMLcodeinsidethewebpage:

1. Gotoyourfolder(seepage5)andright-clickonthewebpage

2. Select“OpenWith”then“Notepad”

The code page will appear in a Notepad window.

Atthemoment,thepagehasn’tgotanytextorpicturesinit.

Figure 10: code inside index.html

B. PUTTING THINGS INTO THE PAGE1. Adding a Title (using title)

Anything you write between the <title> and </title> tags will appear in the title bar of the web page.1)Make sure you are in the HTML code of the web page

a. Gotothecodepagebyclickingonthepage’siconinyourtoolbaratthebottom of the computer screen Itwillhaveagreyboxicon,andwillbecalled“index–NotePad”ifyouhover your mouse over it.

Figure 11: code page in the toolbar at the bottom of the screen

HTMLHTML stands for “HypertextMarkupLanguage”.It’sa

computer language made upoftags(markup).Hypertextislinksto

other pages.

NOTEIfNotepaddoesn’tappearinthe“OpenWith”menu:1. Clickon“ChooseDefaultProgram”or“ChooseProgram”

The“OpenWith”windowwillappear.A.IfNotepadisinthe“RecommendedPrograms”or“OtherPrograms”list,clickonit

Otherwise:B.Clickon“Browse” a.Browseto“Computer”,then“C:”, then“Windows”or“WINNT”,then“System32”, thenclickon“Notepad” b.Click“Open”The code page will open, and Notepad will appear in the “OpenWith”menunexttime.

the code page of your web page

“index.html”openin Notepad

Notepad in “RecommendedProgams”

“Browse”button

code page icon in toolbar

Next, write on the page 07

2)GivethepageatitlebytypingitinbetweentheopeningandclosingTitle tags, <title> and </title>We’vechosen“HomePage”asourtitle.

3)Clickon“File”then“Save:”inthetextfilemenutosavethechanges

4)GotothewebpageIf you have already opened the web page then:a. Clickonthewebpage’siconinyourtoolbaratthebottomofthescreen

It will have theiconofyourbrowser(e.g.“e”forInternetExplorer).If you hover your mouse over the icon, it will have the same name as the title of the page followed by the name of your browser.

Ifyouhavenotopenedthewebpage(oryouhaveclosedit)then: b.Gotothefolderwherethewebpageis,anddouble-clickonit(seeaboveonpage5)

5)ClickontheRefreshorReloadbutton(usually1or2curvedarrows)

You can now see the changes on the web page. • Thetopofthepageisnowcalled“HomePage”.• Ifthebrowserhastabs(likeFigure13),thetitlewillappearonatab.

Figure 13: the web page with a title

NUMBER 1 WEB BROWSER Thefirstweb

browser was built in 1991 by Nicola

Pellow, an undergraduate maths student. You can see a picture of it here:

info.cern.ch/www20/photos

<title>Home Page

</title>

new code is in red

code you’ve already written is in blue

refresh button

the title ‘Home

Page’ in the top of the

window

web page icon in toolbarFigure 12: web page in toolbar at the bottom of the screen

the title on the page’s tab

<body>

Our Home Page. Hello. This site is all about our

favourite things

</body>

2. Writing on the page (in the body)

Anything you write between the <body> and </body> tags will appear in the web page.

1)Followsteps1to5(onpages6and7),exceptinsteadoftypingsomething between the <title> tags, type it between the <body> tags, e.g.

Whenyourefreshthepage(step5)youwillseewhatyouhavewritten:

Our Home Page.

Hello. This site is all about our favourite things



3. Writing on different lines (using p)

If you want to have the sentences on different lines, you can use tags.1)Open up the code page

2)Changethetextinthebodytagstoread:

3)Savethecodebyclickingon“File”then“Save”intheNotepadcodepage

4)ClickontheRefreshbuttononthewebpagetorefreshit

Figure 14: writing in the body of the page

WARNINGMake sure you never

put your address, phone number, email or contact details on your website - you never know who

might try to contact you.

new code is in red

code you’ve already written

is in blue

Our Home Page.

Hello. This site is all about our favourite

things

Next, change the page colour 09

Figure 15: text on new lines using the p tags

Figure 16: text on new lines using the br tag

The“OurHomePage.”isononeline,the“Hello.Thissiteisallaboutourfavouritethings”isonanother,andaspacehasnowappearedbetweenthe two lines.

4. Writing on different lines (using br)

If you don’t want spaces between lines, use the tag:

1)Open up the code page

2)Changethetextinthebodytagstoread:

3)Refresh the web page and you will see this:

The“Hello”and“Thissiteisallabout..”areonseparatelines,butthereisno big space between the lines.

CODEbr stands for break.It only needs one tag . Unlike …, there are no closing tags.

IDEAIf you type <hr />

instead of , you willgetahorizontalline,

like this:

This works with any web page!

Hello.

This site is all about

WEB LINGO In 1965 Ted Nelson came up with the idea of pages

that could link to other pages - he called them

Hypertext(whichistheHTinHTML)

<body bgcolor="yellow" text="blue">

Let’s add some more lines for practice. We’ll make a list of some of our favourite things:

4)Add this under favourite things

5)Save the code and refresh the web pageYou’ll see the new lines in the code put on new lines on the page.

C. ADDING SOME COLOUR (USING body)

Youcancolourthewholepage(andthewritingonit)bytypingcoloursinsidethe <body> tag.

1)Open the code, and change the first body tag to this:

2)Save the code and refresh the web page

Thewholepageiscolouredyellow,andthetextonthepageisblue.

Youcanreplacethe“yellow”and“blue”coloursforalmostanycolourthatyou can imagine.



Figure 17: the whole page coloured in

this site is all about our favourite things

here is a list of things we like: 

Ships 

Visiting Ireland 

Going berserk 



WEIRD NOTEOnly use straight speech marks(like"…")notcurly

ones(like“…”).HTMLdoesn’tlike curly speech marks.

To make sure you use straight ones, always type your speech marks in the code page using

Notepad.

(beware:ifyoucopycodefromWord,forexample,it’llmake

all the straight speech marks curly)

CODEbgcolor stands for Background colour. It colours the whole body tag(i.e.thewholepage).text colours all the writing in the body tag.

<html> <head> <title>Home Page </title> </head> <body bgcolor="yellow" text="blue"> Our Home Page. Hello. This site is all about our favourite things here is a list of things we like: Ships Visiting Ireland Going berserk </body></html>

Next, add more colour 11

There are a huge number of colours. The 16 basic ones are:

black navy blue green teal lime aqua maroonpurple olive gray silver red fuschia yellow white

Table 1: the 16 basic colours

There are 124 other ones from:

AliceBluethoughOrangeRed,OrchidandPaleGoldenRodtoYellowGreen.

You can see the complete list at www.go-berserk.com/htmlcolours.html (oronpage62).

Justchangethe“yellow”or“blue”inthecodeforthecolouryouwant.

CODEYour code will now look like this:

Figure 18: Chapter 1 code

COLOUR CLASHThe Internet and Windows

computers don’t agree over the names of colours. Forexample,aWindowswindow coloured gray is

actually what the Internet calls silver.

Index


, 27<!DOCTYPE>, 64<?xml>, 64<a>, 26, 16<big>, 16<body>, 3, 8, 25 , 9, 34<embed>, 47, 12<h1>, 15<h2> to <h6>, 16<head>, 3<hr />, 9<html>, 3, 16<iframe>, 28<img />, 22<ins>, 34<li>, 29<link />, 64<marquee>, 37<meta />, 71<ol>, 29, 16, 34, 16<super>, 16<table>, 31<td>, 31<tr>, 31<title>, 3, 16<ul>, 29active, 66align, 17alt, 22animated gif, 22autostart, 49behavior, 38bgcolor, 10, 33background, 25, 45border, 32, 41bordercolor, 33

cellspacing, 45center, 17class, 67color, 12colspan, 35colours•additional, 62•basic, 10, 62•merge, 70comments•in HTML code, 27create web pages, 3CSS,14,44,64•glowingtext,67•shadow, 68description, 71domain, 56email, 36face, 13FileZilla, 58filter, 67folder, 2font-family, 14headings, 16height, 24hexcode,62hover, 66href, 26HTML code, 3Internet•put website on, 59keywords, 71links•to other websites, 26•to your pages, 27list-style, 66lists, 29loop, 47movetext,37navigation bar, 41Notepad, 5padding-left, 66pictures, 20•background, 25•moving, 22, 45

reload, 6rowspan, 36scrollamount, 37sound, 50src, 22size, 12style, 14, 44, 66tags•format of, 3•parameters, 12, 17team tags, 29text-shadow, 68three letter codes, 21toolbar, 6valign, 42video, 47visited, 66webhost, 57web page, 3•display in browser, 5 width, 24

Here is a list of all the tags, all the parameters and all the important subjects in this book, as well as the pages they appear on:

Quiz

You are now a web genius!! 75

Hereisaquizbasedonallthefascinatingfactsinthisbook:

1. Whatisthemostpopulargirl’snameusedforapassword?

2. HowmanyGermanslovetheirInternetmorethantheirgirlfriend?

3. Whatistherewardforrevealingtheidentityoftheconfickervirus’screator?

4. Howmanyhoursadaydoestheaverageteenagerspendonmultimedia?

5. What’sthedifferencebetweentheInternetandtheWorldWideWeb?

6. InwhichcountryareallitscitizensusingtheInternet?

7. WhoinventedHTML?

8. Whobuiltthefirstwebbrowser?

9. Whatiscybercrud?

10. WhatageistheyoungestWhiteHatHacker?

11. WhatisMysteryMeatNavigation?

12. WhatistheinventorofCSScalledbyhisfriends?

13. HowmanypeoplehaveaCCIEcertification?

14. WhoinventedGooglecakes?

15. WhatcolourisgreyinolderIEbrowsers?

16. WhatwastheoriginalnameofGoogle?

17. What did the <blink>tagdo?

18. Howmanypeopleintheworldgoonline?

19. Whatwasthefirstwordsentonline?

20. Whatnationalityisthefirstwebsurfer?

WHERE ARE THE HORNED HELMETS???

Vikingsneverworehornedhelmets(untilAugust

Malmström painted his Vikingpicturesin1850,

http://enc.tfode.com/August_Malmstroem).

But horned helmets were popular in Britain and Ireland.

NOTEGettheanswersfrom

this book, and check them online at

www.go-berserk.com.

Notes


77

Go Berserk.. Making Websites with HTML and CSS

This book shows how to create websitesusingHTML4andCSS2.Itisdesignedspecificallyforschools and young people.

TheillustrationsandtextshowWindowsXPandInternetExplorer8, but the book will work with other types of Windows, as well as Mac andLinuxcomputers,andotherbrowsers. Please go to www.go-berserk.com for details.

For more lessons and materials visit www.go-berserk.com.

Ordering InformationOrder online at:www.go-berserk.com

Order by email at:[email protected]

Other Publications in this seriesGoBerserk...• MakingWebsiteswithCSSand

Javascript• Making Websites with PHP• Making Programs with Java• MakingProgramswithVB.NET

The website www.go-berserk.comgives full details of the latest titles and prices.

Acknowledgments

ThankstotheMcAleeses,theWebGeniusesatOurLady’sSchoolforGirlsandtothetestersatWellingtonCollegefortheirhelp.

Thanksalsotofollowingpeople:AlanJackson,GaryRedpath,JingJingTao,StephenMorrissey,LaurieKorte,BluegatorCreative,theMelins,Cullens,Doyles,HannasandMcElroys.

Our Sponsors

We are grateful to the following organisations which sponsored this book:Allstate NILiberty ITNorthgateCitiBelfast

PublishersEJH Design and Print

LOGO

ISBN

Go Berserk...Making Websites with HTML and CSSThis book shows you how to make a website using the latest code for all browsers (HTML4andCSS2).It’sfun,easytofollowanddesignedforyoungpeople.We’vemadeawebsiteaboutVikingstoshowyouhow. By the end of the book, you’ll have your own website online with:• moving pictures• video and sounds... and more!You’ll be a real web genius!

For more ideas and help, visit www.go-berserk.com.

Sponsors

Dr Bro McFerran, Managing Director, Allstate NI: “ThisisthewayITskillsshouldand

will be acquiredgoingforward;anewparadigm,atourdeforce!”

JohnHealy,Director,Citi: “Thisisagreatwaytocapturetheimaginationandinter-estofthenextgenerationoftechnologists”

William Hamilton, Managing Director, Liberty Information Technology: “Thisbookgiveschildrenagreatinsightintotheexcitingworldofsoftwaredevelopment”

AndyRoss,ChiefExecutive,NorthgateManagedServices:“ThroughsponsorshipofGoBerserk,Northgateaimtocontinueengagingwithprimaryandsecondaryschoolchildrenandbringingthemsomethingdifferentthatstimulatestheirfutureinterestintechnology”

SponsorsDr Bro McFerran, Managing Director, Allstate NI:“ThisisthewayITskillsshouldandwillbeacquiredgoingforward;anewparadigm,atourdeforce!”

John Healy, Director, Citi: “Thisisagreatwaytocapturetheimaginationandinterestofthenextgenerationoftechnologists.”

William Hamilton, Managing Director, Liberty IT: “Thisbookgiveschildrenagreatinsightintotheexcitingworldofsoftwaredevelopment.”

Andy Ross, ChiefExecutive,NorthgateManagedServices: “ThroughsponsorshipofGoBerserk,Northgateaimtocontinue engaging with primary and secondary school childrenandbringingthemsomethingdifferentthatstimulatestheirfutureinterestintechnology.”

Price: £11-99 €13-99www.go-berserk.com

ISBN

Go Berserk

make your first webpage

Education