Make your first webpage
-
Upload
mrgonzalezpr -
Category
Education
-
view
151 -
download
2
Transcript of 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.
For more help online go to www.go-berserk.com
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!
For more help online go to www.go-berserk.com
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
Chapter 1 – Make Your First Web Page
04 For more help online go to www.go-berserk.com
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.
Chapter 1 – Make Your First Web Page
06 For more help online go to www.go-berserk.com
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:
<p>Our Home Page.</p>
<p>Hello. This site is all about our favourite things</p>
Chapter 1 – Make Your First Web Page
08 For more help online go to www.go-berserk.com
3. Writing on different lines (using p)
If you want to have the sentences on different lines, you can use <p> 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
<p>Our Home Page.</p>
<p>Hello.<br />This site is all about our favourite
things</p>
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 <br /> 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 <br />. Unlike <p>…</p>, there are no closing <br /> tags.
IDEAIf you type <hr />
instead of <br />, 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</p>
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.
Chapter 1 – Make Your First Web Page
10 For more help online go to www.go-berserk.com
Figure 17: the whole page coloured in
this site is all about our favourite things</p>
<p>here is a list of things we like:<br />
Ships<br />
Visiting Ireland<br />
Going berserk<br />
</p>
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"> <p>Our Home Page.</p> <p>Hello.<br /> This site is all about our favourite things</p> <p>here is a list of things we like:<br /> Ships<br /> Visiting Ireland<br /> Going berserk<br /> </p> </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
74 For more help online go to www.go-berserk.com
<!-- -->, 27<!DOCTYPE>, 64<?xml>, 64<a>, 26<b>, 16<big>, 16<body>, 3, 8, 25<br />, 9<em>, 34<embed>, 47<font>, 12<h1>, 15<h2> to <h6>, 16<head>, 3<hr />, 9<html>, 3<i>, 16<iframe>, 28<img />, 22<ins>, 34<li>, 29<link />, 64<marquee>, 37<meta />, 71<ol>, 29<small>, 16<strong>, 34<sub>, 16<super>, 16<table>, 31<td>, 31<tr>, 31<title>, 3<u>, 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.
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