HTML
&CSS
1
TellaStory
AllCodeClubsmustberegistered.Registeredclubsappearonthemapat
codeclubworld.org-ifyourclubisnotonthemapthenvisitjumpto.cc/18CpLPyto
ﬁndoutwhattodo.
Introduction
Inthisproject,you’lllearnhowtocreateyourownwebpagetotella
story,jokeorpoem.
ActivityChecklist
FollowtheseINSTRUCTIONSonebyone
TestyourProject
ClickonthegreenflagtoTESTyourcode
SaveyourProject
MakesuretoSAVEyourworknow
1
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Step1:Decideonastory
Beforeyougetcoding,you’llneedtodecideonastorytotell.
ActivityChecklist
1. Thinkaboutthestoryyouwanttotell.Itcouldbe:
Afamousstory;
Astoryyouhavemadeup;
Somethingthathashappenedtoyouor
someoneyouknow.
Itdoesn’tevenhavetobeastory.Itcouldbeajoke,apoem,
oranythingelseyouwant!
Step2:Editingyourstory
Let’sstartbyeditingtheHTMLcontentandCSSstyleofthestorywebpage.
ActivityChecklist
1. Openthistrinket:jumpto.cc/web-story.Ifyou’rereadingthis
online,youcanalsousetheembeddedversionofthistrinket
below.
1. Youmightrememberfromthe‘HappyBirthday’projectthat
webpagecontentgoesinthe <body> oftheHTMLdocument.
Gotoline7ofthecode,andyoushouldseethewebpage
content,whichisinside <body> and </body> tags.
2
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
2. Canyoutellwhichtagsareusedtocreatethedifferentparts
ofthewebpage?
<h1>
isaheading.Youcanusethenumbers1
to6tocreateheadingsofdifferentsizes;
<div>
isshortfordivision,andisawayof
groupingstufftogether.Inthiswebpage,you’ll
useittogrouptogetherallthestuffforeach
partofyourstory;
<img>
<p>
isanimage;
isaparagraphoftext.
3
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Challenge:Makesomechanges
EdittheHTMLandtheCSScodetocustomiseyourwebpage.
Youcanalterthecoloursusedinthewebpage,andyoucan
alsousefontslikeArial,ComicSansMS,ImpactandTahoma.
Ifyouneedmorehelp,youcanusethe‘HappyBirthday’project
tohelpyou.
SaveYourProject
Step3:Tellingyourstory
Let’saddasecondparttoyourstory.
ActivityChecklist
1. Gotoline17ofthecode,andaddinanothersetof <div>
and </div> startandendtags.Thiswillcreateanewboxfor
thenextpartofyourstory.
4
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
2. Addaparagraphoftextinsideyournew <div> tag.
3. Finally,youcanaddanimagetoyournewbox,byaddingthis
codeinsideyour <div> tag:
<imgsrc="">
Noticethat <img> tagsareabitdifferenttoothertags,as
theydon’thaveanendtag.
4. ForHTMLimages,youneedtoaddthesourceoftheimage,
insidethespeechmarks.Let’sfindanimagetoaddtoyour
story.
Gotojumpto.cc/cc-web-images,andfindanimagethatyou
wanttoincludeinyourstory.
5. Right-clicktheimage,andclick‘CopyimageURL’.TheURLis
theaddressoftheimage.
5
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
6. PastetheURLbetweenthespeechmarksinyour <img> tag.
Youshouldseeyourimageappear!
7. IfyouhaveaTrinketaccount,youcanalsouploadyourown
imagestoyourwebpage!Todothis,clicktheimageiconatthe
topofyourtrinketandthenclick‘upload’.
8. Findyourimageonyourcomputer,anddragitintoyour
trinket.
6
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
9. Youcanthenjustaddthenameofyournewimagebetween
thespeechmarksinyour <img> tag,likethis:
<imgsrc="buildings.png">
SaveYourProject
7
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!
Challenge:Keepgoing!
Usewhatyou’velearntinthisprojecttofinishtellingyourstory!
Here’sanexample:
SaveYourProject
8
TheseprojectsareforuseoutsidetheUKonly.Moreinformationisavailableonourwebsiteatwww.codeclubworld.org.
ThiscourseworkisdevelopedintheopenonGitHub,atwww.github.com/CodeClub.Comeandjoinus!