Tell a Story - Code Club World Projects
HTML &CSS 1 TellaStory AllCodeClubsmustberegistered.Registeredclubsappearonthemapat codeclubworld.org-ifyourclubisnotonthemapthenvisitjumpto.cc/18CpLPyto findoutwhattodo. 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!
© Copyright 2024