Student Log Coding in HTML5 and CSS with Intel and CoderDojo Name .............................................................................................. Class/tutor group .............................................................................. This log is for you to record your work as you complete the Social Media Command Centre project. There are pages inside this document that are related to the activities and tasks you will complete along the way. Make sure you keep your log up to date – your teacher may need it to assess your work. A reminder – what’s the brief? You are going to complete an app for a company who have so much work that they can’t finish the project. They have achieved quite a bit in designing and building an app that teaches the user to play the piano, but there’s still a lot to do. It’s your task to sort out the design and functionality of the app to make it work properly, and then to try it out on your friends. Along the way you will learn how to use HTML5 and CSS, as well as programming in JavaScript. Resources – what you can use to complete the project You have a bank of resources to help you with this project. These are: Video to introduce the project A click-through project guide with video and audio Briefing documents to help with you with HTML5 and CSS Guides to downloading and using Notepad++ Video tutorials that show you how to use Notepad++ to program in HTML5 and CSS The partially completed app to work on Student Log to complete © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 1 of 30 Activity 1: Examples of using ‘if... then’ decisions In Chapter 1 of the project, you have learned about ‘if...then’ statements and how they are used to make a decision. You saw a couple of examples of how you may use ‘if... then’ decisions if, for example, the ketchup runs out, or you find you don’t have a clean shirt for school. Your task is to come up with three more examples of ‘if...then’ decisions that you have made over the last few days. These might be about what you have chosen to eat or drink, or places you have chosen to go, or friends you have chosen to meet up with. Write your three examples in the spaces below. Example 1: Example 2: Example 3: Activity 2: Turn a sequence of steps into an algorithm Below is a simple sequence of steps to make a bowl of cereal for a friend. Take these steps, add some ‘if...then’ statements, and identify the inputs. Enter your answer in the box on the next page. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Do you want a bowl of cereal? YES Do you want frosted flakes or fruity wheat? FRUITY WHEAT Take box of fruity wheat from cupboard Take cereal bowl from cupboard Tip portion of fruity wheat cereal into bowl Do you want sugar with the cereal? YES Take sugar from cupboard Take spoon from drawer Add spoonful of sugar to cereal bowl Do you want skimmed or full-fat milk? FULL FAT Take full fat milk from refrigerator Add milk to cereal Give cereal bowl and spoon to the receiver © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 2 of 30 Your cereal-making algorithm... Activity 3: Turning a process into a flowchart In the box below, you will see a simple numbered list that represents the process of getting out of bed. It’s your job to turn this into a simple flowchart using MS Word and the flowchart graphics in the Shapes menu (there are some hints about this in the ‘Flowchart shapes and what they mean’ resource). You can insert the shapes into the next page in his log, use some connectors, and create your flowchart. Remember, you can easily add text to each shape by right clicking on it and choosing ‘Add Text’. Getting out of bed 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Wake up Is it a school day? If no, go back to sleep (hint: this would terminate the process!) If yes, push back the duvet Stretch Sit up Is the bed against the wall to your right? If yes, swing legs to left If no, swing legs to right Do you wear slippers? If no, stand up If yes, put slippers on and then stand up Put on dressing gown End of process © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 3 of 30 Build your flow chart here (insert page break to generate a new page if you need it) © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 4 of 30 Activity 4: Identifying the algorithm in HTML5 code There is a piece of HTML5 code in the screenshot below. This has been created in Notepad++. Just as the ‘Algorithms in HTML5’ briefing document explained, it’s your task to work out the simple algorithm that this code represents. To help you, we’ve created the right number of steps in the algorithm in the box below the screenshot. All you need to do is fill in the blanks. If you’re unsure about any of them, check back to the briefing document. You can also insert the tags that are used at the end of each step, if you feel confident! The algorithm is... 1. Tell the browser that .....................................starts here 2. Tell the browser that .......................................................starts here 3. Tell the browser that .......................................................starts here 4. Tell the browser that ........................................................ends here 5. Tell the browser that ......................................starts here 6. Tell the browser that ......................................ends here 7. Tell the browser that ...............................................starts here 8. Tell the browser that ...............................................ends here 9. Tell the browser that ...............................................starts here 10. Tell the browser that ...............................................starts here 11. Tell the browser that .................................................ends here 12. Tell the browser that .................................................ends here 13. Tell the browser that .......................................................ends here 14. Tell the browser that .............................................ends here © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 5 of 30 Activity 5: Knowing your tags In Chapter 2 you are able to watch a set of video screen captures that explain and demonstrate how to code in HTML5. As you work through the videos, you will learn about the different tags that are used in the code to tell the browser how to present your text and images. The table below will help you remember these tags. Complete it as you work through the videos. We have entered some information to get you started, and your task is to fill in the blank cells. Start tag End tag <html> </html> What the tag does Tells the browser that this is the body where text and images will appear <br> No tag needed </i> Tells the browser that the text between the tags should be bold <p> <h1> Inserts an image into the body src=”—“ No tag needed Specifies the width and height of an image </a> Inserts a table into a page <tr> <td> Adds an ordered list to a page </ul> No tag needed Adds an input field to a page <input type=”button”> Divides a document into sections </audio> <div class=”header” <div id=”special” Adds a head to a web page </title> <style> © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 6 of 30 Activity 5 cont’d: Creating your first pages in HTML5 To make it easier for your teacher to assess your progress, take a screen shot of your code in HTML5 and insert it into the box below. HTML5 code... Take a screen shot of the published page from your HTML5 code and insert it in the box below: The published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 7 of 30 Activity 6: Inserting an image into a page Take a screenshot of your code to insert an image in Notepad++ and insert it here. HTML5 code... Take a screen shot of the published page from your HTML5 code and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 8 of 30 Activity 7: Adding hyperlinks using the anchor tag Take a screenshot of the anchor tags in your Notepad++ and insert it here. HTML5 code... Take a screen shot of the published page, showing the hyperlinks (one to a page you made in the previous activity, and the other to an external website) and insert it here. The published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 9 of 30 Activity 8: Adding a table to a page Take a screenshot of the table, table row and table data tags in your Notepad++ and insert it here. HTML5 code... Take a screenshot of the table on your published page and insert it in here. The published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 10 of 30 Activity 9: Adding an ordered and unordered list to a page Take a screenshot of the code for the ordered list from your Notepad++ and insert it here. HTML5 code... Take a screenshot of your published ordered list and insert it here. Published ordered list... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 11 of 30 Take a screenshot of the code for the unordered list from your Notepad++ and insert it here. HTML5 code... Take a screenshot of your published unordered list and insert it here. Published ordered list... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 12 of 30 Activity 10: Inserting input fields and a button into a page Take a screenshot of the code for inputting a name and address field and a button and insert it here. HTML5 code... Take a screenshot of the published page, with input fields and button, and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 13 of 30 Activity 11: Dividing up your web page into sections Take a screenshot of the code for dividing your web page into three sections and insert it here. HTML5 code... Take a screenshot of the published page, with the three sections, and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 14 of 30 Activity 12: Adding audio to your web page Take a screenshot of the code for adding an audio player with an MP3 track and insert it here. HTML5 code... Take a screenshot of the published page with the audio player with controls and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 15 of 30 Activity 13: The HTML5 code for the class and id attributes Take a screenshot of the code for adding a class and an id within a page division and insert it here. HTML5 code... Activity 14: Adding a head and title to your web page Take a screenshot of the code for adding a head and title to your web page and insert it here. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 16 of 30 Take a screenshot of the published page head and title and insert it here. Published page... Main task 1: Debugging the Piano app HTML5 code Your main task for Chapter 2 is to fix the HTML5 code for the app so that the first problem is resolved. When you have changed the code, take a screenshot of the change you have made and insert it below. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 17 of 30 Take a screenshot of the Piano app with the problem resolved and insert it below. This will show your teacher that you have completed the first main task. Piano app with problem resolved... Activity 15: Starting to use CSS Take a screenshot of your use of the <style> tag and insert it below. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 18 of 30 Take a screenshot of the published page with the styled text and insert it here. Published page... Activity 16: Using CSS with HTML5 attributes Take a screenshot of your use of the class and id tags and insert it here. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 19 of 30 Take a screenshot of the published page with the styled text and insert it here. Published page... Activity 17: Changing the font style and text alignment using CSS Take a screenshot of your use of the font style and alignment code and insert it here. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 20 of 30 Take a screenshot of the published page with the styled text and insert it here. Published page... Activity 18: Setting the size and position of an image with CSS Take a screenshot of your use of the image size and position code and insert it here. HTML5 code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 21 of 30 Take a screenshot of the published page with the sized and positioned image and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 22 of 30 Activity 19: Using the box model with margins, borders and padding Take a screenshot of your use of the border using the border-style, border-color, borderwidth syntax and insert it here. HTML5 code... Take a screenshot of the published page with the image and its border and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 23 of 30 Take a screenshot of your use of the border using the border: syntax and insert it here. HTML5 code... Take a screenshot of the published page with the image and its border and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 24 of 30 Take a screenshot of your use of the margin and padding syntax and insert it here. HTML5 code... Take a screenshot of the published page with the image and its border, margin and padding and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 25 of 30 Activity 20: Using the float attribute Take a screenshot of your code that floats the image to the left and adds a margin, and insert it here HTML5 code... Take a screenshot of the published page with the image and the text alongside it and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 26 of 30 Activity 21: Revising the CSS syntax Complete the table below to show you know the different CSS syntax that is used to style a web page. We have completed the first two to help you. CSS syntax What the syntax does <style> ... </style> (inserted in the <head> section) Tells the browser the style information for the web page <style> p{color:red;} </style> Tells the browser that all paragraph text in the website will be red <style> .green{color:green;} </style> <style> #blue{color:blue;} </style> <style> .green{color:green; font-family:verdana;} </style> <style> .green{color:green; font-family:verdana; font-size:10px;} </style> <style> .green{color:green; font-family:verdana; font-size:10px; font-style:italic; </style> <style> .green{color:green; font-family:verdana; font-size:10px; font-style:italic; text-align:center;} </style> <style> #pic1{width:320px; Height:240px;} </style> <style> #pic1{width:320px; height:240px; position:absolute; left:50px; top:50px;} </style> <style> #pic1{border-style:solid; border-color:red; border-width:2px;} </style> <style> #pic1{border:2px solid red;} </style> © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 27 of 30 CSS syntax What the syntax does <style> #pic1{border-style:solid; border-color:red; border-width:2px; margin:10px;} </style> <style> #pic1{border-style:solid; border-color:red; border-width:2px; margin:10px; padding:10px;} </style> <style> img{float:left;} </style> Complete the next tag for Activity 22 Tells the browser that the styling information for the page can be found in a separate css file called ‘mystyle.css’. Main task 2: Debugging the CSS in the Piano App Take a screen shot of the debugged CSS code and insert it below. CSS code... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 28 of 30 Take a screenshot of the published debugged Piano App and insert it here. Published page... © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 29 of 30 Learning outcomes for the Intel and CoderDojo Coding in HTML5 and CSS project At the end of the project, go through this list and tick the boxes you feel you have achieved. If you think of any that we haven’t included here, add them at the end! Learning outcomes Tick Understand what simple algorithms are Understand how pseudo code can be used to create simple algorithms Understand how an algorithm can be used to identify and respond to user input (e.g. password strength testing) Understand how flow charts and their symbols can be used to represent an algorithm Create pseudo code flow charts to represent simple process algorithms Understand the use of if…then statements Understand how algorithms are used in computer code Use Notepad++ to create HTML 5 code Use HTML5 tags to produce and format text in a web page Use HTML5 tags to insert and size images into a web page Use HTML5 tags to insert hyperlinks into a web page Use HTML5 tags to add and format tables to a web page Use HTML5 tags to add input fields and buttons to a web page Use HTML5 tags to divide a web page into sections Use HTML5 tags to add MP3 audio tracks to a web page Use HTML5 tags to create attributes (class and id) for styling purposes Use HTML5 tags to add a head and title section to a web page Find errors in HTML5 code and correct them Use Notepad++ to create CSS for a web page Use HTML5 attributes (class and id) with CSS Use CSS to style and position text in a web page Use CSS to set the size of elements (e.g. images) in a web page Use CSS to set the margins, borders and padding (e.g. the box model) of elements in a web page Use CSS and HTML5 to mix text and images effectively in a web page Work with both HTML5 and CSS to code and style a web page from scratch Apply CSS to a whole web page using a separate styling file Find errors in CSS code and fix them © Copyright e-skills UK Sector Skills Council Ltd 2000-2014 Page 30 of 30