Getting digital HTML and digital communications Introduce yourself as the facilitator and outline (briefly) your STEM background. Ask STEM Ambassadors (if present) to (briefly) introduce themselves and to say which STEM discipline/industry they are from.
Time spent online… Ofcom research shows that internet users aged 16 and above said they spend nearly 10 hours online each week in 2005. It had climbed to over 20 hours and 30 minutes in 2014. Two thirds of people now own a smartphone, using it for nearly two hours every day to browse the internet, access social media, bank and shop online. (Fact: People in the UK took an estimated 1.2 billion ‘selfies’ in the past year.) Over half of UK households (54%) now have a tablet, a rapid rise in popularity from just 2% in 2011. Source: Ofcom article published 6th Aug 2015 http://media.ofcom.org.uk/news/2015/cmr-uk-2015/ Digital technology is everywhere! (some examples: IT systems that manage logistics, state of the art systems used for intelligence analysis, programming used in air traffic control, managing equipment like tactical satellite systems and airfield radars etc). It’s the online and digital communications that we’re going to be looking at today. So why is it so important that we get our message out online? Importance of digital in today’s society: We’re spending more time online than ever before: Ofcom research shows that internet users aged 16 and above said they spend nearly 10 hours online each week in 2005. It had climbed to over 20 hours and 30 minutes in 2014. Two thirds of people now own a smartphone, using it for nearly two hours every day to browse the internet, access social media, bank and shop online. (Interesting fact: People in the UK took an estimated 1.2 billion ‘selfies’ in the past year.) Over half of UK households (54%) now have a tablet, a rapid rise in popularity from just 2% in 2011. Other advertisements provide links to websites for further information. Recruitment – many people will look to the web for further information and complete initial applications online.
Code – A different sort of language HTML or HyperText Markup Language, is used to establish a page’s structure, and lets us add text, links and images. We can use this language to make our own simple webpage for our Campaign. Code is the language we use to instruct computers. It can be used to build websites, design apps, make games and more, and it helps us get the most out of technology. There are a number of different codes (like we have lots of different languages) and HTML is just one of them. HTML or HyperText Markup Language, is used to establish a page’s structure, and lets us add text, links and images. We can use this language to make our own simple webpage for our Campaign.
Code: let’s design our own webpages Work in small groups (2-3) to build your own webpage. Open Notepad (Alternatively, you can use Word if your computer doesn’t have Notepad). We are going to use the guidance provided on the next 10 slides to design our webpage. We are all going to work through it together but you still might want to make some notes as we go along!
The Basics All instructions are written inside brackets <> e.g. <title> To end an instruction, use a forward slash inside brackets / e.g. </title> Everything on a website is nested inside <html> - this tells the computer the language you’re using <html> Start using html <head> Edit the page heading <title> My RAF Campaign Page</title> Add the title of your page (visible in tabs & window) </head> Ending instructions for the page heading <body <body bgcolor="#FFFFFF"> Edit the body of your page, starting with the background colour Hello, welcome to my web page. Write the text you would like to appear on your webpage </body> Ending instructions for the page body </html> End html instructions The basics. All instructions are written inside brackets <> e.g. <title>. To end an instruction, use a forward slash inside brackets / e.g. </title>. Everything on a website is nested inside <html> - this tells the computer the language you’re using.
Saving your webpage Select File and Save As Give your webpage a title and (including your name) and add .htm after it Saving your webpage. Select File and Save As. Give your webpage a title and (including your name) and add .htm after it. .htm is a file type – by saving your html as a .htm file, it will automatically open in your web browser. .htm is a file type – by saving your html as a .htm file, it will automatically open in your web browser
View your webpage Your webpage should looks something like this Now we’re going to look at ways that we can continue to personalise your webpage. Close your webpage. Right click the file and select Open With Notepad View your webpage. Your webpage should looks something like this. Now we’re going to look at ways that we can continue to personalise your webpage. Close your webpage. Right click the file and select - Open With – Notepad.
Paragraphs and font size Important text For important text on your page, like your campaign title, use h1-h6 to change the size <h1>Text</h1> Making paragraphs If you want to add text that shows on a different line you need to make a new paragraph, using p <p>A whole paragraph of text is entered here</p> Changing the font size You can select what size font you would like your text to be by changing the number <font size=“2px”>Text</font> Paragraphs and font size. Important text. For important text on your page, like your campaign title, use h1-h6 to change the size. <h1>Text</h1>. Making paragraphs. If you want to add text that shows on a different line you need to make a new paragraph, using p. <p>A whole paragraph of text is entered here</p>. Changing the font size. You can select what size font you would like your text to be by changing the number. <font size=“2px”>Text</font>.
Background Colour Lowest 0 1 2 3 4 5 6 7 8 9 A B C D E F Highest We’ve already written the code for background colour: <body <body bg color=“#000000”> (Note: the American spelling of colour!) 000000 instructs the background colour to appear as white We can break down this bit of code into Red, Green, Blue (RGB) 00 00 00 R G B Background Colour. We’ve already written the code for background colour: <body <body bg color=“#000000”>. (Note: the American spelling of colour!). 000000 instructs the background colour to appear as white. We can break down this bit of code into Red, Green, Blue (RGB). 16 numbers and letters are used to make up lots of different colour combinations … 16 numbers and letters are used to make up lots of different colour combinations: Lowest 0 1 2 3 4 5 6 7 8 9 A B C D E F Highest This is called hexadecimal code
Use hexadecimal code to experiment with your background colour Lowest 0 1 2 3 4 5 6 7 8 9 A B C D E F Highest
Adding links You can add a link to another webpage by using a href <a href=“web address”>Text that will be linked</a> (Remember to add a new paragraph <p> for your link to appear on a new line) To link part of your sentence to another webpage (like the example on the right) use your code like this: Text<a href =“web address”>Text that will be linked</a> Adding links. You can add a link to another webpage by using a href. <a href=“web address”>Text that will be linked</a>. (Remember to add a new paragraph <p> for your link to appear on a new line). To link part of your sentence to another webpage (like the example on the right) use your code like this: Text<a href =“web address”>Text that will be linked</a>.
Make it your own – HTML glossary Underlined Text <u>Text</u> Bold Text <b>Text</b> Italicised text <i>Text</i> Paragraphs <p>A whole paragraph of text is entered here</p> Links <a href=“web address”>Text that will be linked</a> Bullet Pointed Lists A bulleted list is started using <ul> Each item on the list is placed inside an <li> <ul> <li> First bullet point on list</li> <li> Second bullet point on list</li> </ul> Font size <font size=“2px”>Text</font> Headings and important text <h1>Text</h1> Make it your own – HTML glossary. Underlined text. Bold text. Italicised text. Paragraphs. Links Bullet point links. Font size. Headings and important text. Background colour. Background colour: <body<bodybgcolor=“#000000”>
Adding your campaign poster An image hosting service allows you to upload images to a website. The image host will then store the image onto its server, and provide us with the code we need to add it to our html. On Photobucket (the image hosting service we’ve used) select your poster from the uploads Click the Link icon Click the ‘HTML’ link option and the code you need will automatically be copied Adding your campaign poster. An image hosting service allows you to upload images to a website. The image host will then store the image onto its server, and provide us with the code we need to add it to our html. On Photobucket (the image hosting service we’ve used) select your poster from the uploads. Click the Link icon. Click the ‘HTML’ link option and the code you need will automatically be copied.
Adding your campaign poster Paste the code for your image where you’d like it to appear on your page Save and view your webpage to see your campaign poster featured Adding your campaign poster. Paste the code for your image where you’d like it to appear on your page. Save and view your webpage to see your campaign poster featured.
QR Codes
RAF examples: Digital data security Digital data can sometimes be sensitive and might need to be kept private. The RAF have special Cyberspace Communication Specialists whose job involves dealing with digital data and helping to protect it from interception from others. A key part of securing data involves Cryptographic Security – coding or scrambling the data so that it is meaningless to anyone who doesn’t have the ‘key’ to decode it.