Internet Awareness - Interactive Classroom.net
advertisement
Select a topic
Understanding the Internet
1
Basic Content and Style
2
More CSS Styling
3
Adding Pages
4
Navigation
5
User Input Form
6
Data Validation
7
Testing & Evaluation
8
Understanding the Internet
LO: Understand the hardware components
required for networking computers and
recognise the protocols required for
communication.
To access a network/The Internet
certain things are required:
– Hardware (physical devices)
– Protocols (rules that allow devices
to communicate)
Hubs
Switches
Routers
Used to connect multiple computers
together.
Passes on all data it receives.
Can result in lots of network traffic as
copies of data packets are sent
everywhere!
Suitable for small networks.
Used to network multiple computers
together.
Controls the flow of network traffic based
on address information in the data
packet.
Learns which devices are connected to
its ports and then forwards data to the
correct places.
Suitable for large networks.
Acts as a gateway between two networks
(ie, your home network and the Internet).
Allows only authorised machines to talk
to one another.
Keeps a log of network traffic.
Usually provides a firewall to prevent
unauthorised access to a network.
Set of rules that allow electronic devices to
communicate with one another. Some common
protocols:
SMTP (Simple Mail Transfer Protocol)
IMAP (Internet Message Access Protocol)
POP (Post Office Protocol)
FTP (File Transfer Protocol)
TCP/IP (Transmission Control Protocol/
Internet Protocol)
1. Go to the website techterms.com
2. Find out what each of the protocols
does and write a few bullet-points to
summarise each one:
SMTP (Simple Mail Transfer Protocol)
IMAP (Internet Message Access
Protocol)
POP (Post Office Protocol)
FTP (File Transfer Protocol)
TCP/IP
Server
(Where your website is
stored)
The Internet
Client
Client
Client
In a new Word document answer the following
questions in FULL sentences:
1. What is a hub?
2. What is a switch?
3. What is a router?
4. Write a definition of each of the main
networking protocols:
SMTP
IMAP
POP
FTP
TCP/IP
EXTENSION: Create a diagram and label it to
explain how the client-server model works.
Basic Content and Style
LO: Know how to use the basic structures of
HTML and CSS.
Two of the main languages of the Web:
–
HTML (HyperText Markup Language)
CSS (Cascading Style Sheet)
–
– JavaScript
HTML defines the content.
CSS defines the appearance.
JavaScript defines the behaviour.
HTML is made up of open and close tags with
content in the middle. Here are some
examples:
– <html> </html>
– <title> This is my title </title>
– <body>Main content goes here</body>
– <img> (one of a few tags to have no closing tag)
– <a> </a>
Before you can start building your web page
you need to do the following:
1. Create a folder in your documents called …
website
2. Open up Notepad++, create a new
document and save it into your “website”
folder as…
index.html
<!DOCTYPE html>
This line tells the web
browser to expect an
HTML web page.
<html>
<head>
</head>
<body>
This section gives
information about the site
(it’s one of the places
search engines look for
information.)
</body>
</html>
All of the content (the
visible parts) of your
website will go into the
<body> section.
YOUR TASK
Type these tags into your
blank document in
Notepad++ then save the file.
(Don’t forget to indent it in the same
way as here.)
Your website will be a fan site for your chosen
topic, this could be:
– Pop band/Singer
– TV Show/Film
– Comic
– Sports team
Eventually your website will consist of around
four pages:
– Home
– News
– Picture Gallery
– Sign-Up
<!DOCTYPE html>
<html>
<head>
<title>The Walking Dead!</title>
</head>
<body>
<h1>The Walking Dead Fan Site!</h1>
<p>This is a website about . . .</p>
</body>
</html> YOUR TASKS
Decide on a topic for your web site then add a suitable
title, heading and relevant information to your web
page.
Investigate different types of heading you could use.
EXTENSION
Find out how to add a picture (make sure you save
the picture in the same folder first!)
Find out how to add a hyperlink
CSS is a bit different to html. Instead of
open and close tags it uses brackets { } to
begin and end a section.
This tells the
CSS what
part of the
web page we
are styling.
To define a style for our body we would do
this…
A CSS property can be
assigned a value using
the colon :
body{
color: rgb(251, 133, 195);
}
Curly brackets are used
to begin and end each
section of CSS.
All CSS statements must
end with a semicolon ;
Note – NO
capitals
here!
Before you can start styling your web page with
CSS you need to do the following:
1. Open up your index.html page in Notepad++
2. Create a new file in Notepad++ called…
style.css
3.
4.
Save this into the same folder as your web page.
Add the line of code in bold below to the <head>
section of your own web page:
<head>
<title>My Cool Website!</title>
<link rel="stylesheet" href="style.css">
</head>
body{
color: rgb(199,0,0);
background-color: rgb(83,83,83);
}
YOUR TASK
Type these styles into your CSS document. You can
play with the RGB values to change the colours.
Search online for an “RGB Colour picker” to help
you.
EXTENSION
Apply a font to your web page using “Google Fonts”
(Hint: look at steps 3 and 4 under “Quick Use”).
Find three different websites online. For each one
identify and explain the following:
Ideas you would like to incorporate in your own site.
Design & layout (colours, fonts, positions of items
etc.)
Multimedia features (videos, animations, pictures
etc.)
Interactive features (roll-over effects, games, forms
etc.)
Make sure you include screenshots and use PEE within
your written work.
More CSS Styling
LO: Recognise how to style different areas of
HTML using <div> tags.
<div> tags define divisions (or sections) of
our page so we can apply different styles to
different parts.
In html this looks like…
<div> tags
define the
start and
end of a
section in
the <body>.
Each <div> needs an
ID so the CSS knows
which one we are
styling.
<div id=“box”>
</div>
Some content would
go in here. For
example, paragraphs
of information,
pictures etc.
<!DOCTYPE html>
<html>
<head>
<title>The Walking Dead!</title>
</head>
<body>
<h1>The Walking Dead Fan Site</h1>
<div id=“box”>
<p>Some info you’ve written </p>
</div>
</body>
</html>
YOUR TASK
Add <div> tags to your web
page to define a section of
the html. Add the bits in bold
into your own page.
body{
color: rgb(195,1,112);
background-color: rgb(251,133,195);
}
div#box{
width: 80%;
margin-left: 10%;
background-color: rgb(204,12,12);
}
YOUR TASKS
Give your box some style by adding the section in bold to
your CSS document.
EXTENSION
Use www.w3schools.com to find out how to give
your box a border (hint: put the code underneath the
background colour)
Adding Pages
LO: Know how to add additional pages to a
website.
To add a new page, just copy and paste your
existing HTML page and change its name.
Add at least one more relevant information
page, this could be:
– Characters
– Tour Dates
– Series Information
– Band Members
– Photo Gallery
Add another page called “form.html” (we’ll
add some content to this later!)
Swap computers with the person next
to you.
Add a sticky note to their desktop to
give them feedback on how their
website is progressing.
Navigation
LO: Understand how pages are linked
together and recognise how to make a
navigation bar more visibly appealing with
CSS.
First you need to tell your page what
the links need to be, we can create
these as a list.
<ul> tags
define an
unordered
list.
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
<li> tags are
used to
define each
list item.
<body>
<h1>The Walking Dead Fan Site</h1>
<ul>
<li><a id="menu" href="index.html">Home</a></li>
<li><a id="menu" href="page2.html">Page 2</a></li>
<li><a id="menu" href="page3.html">Page 3</a></li>
<li><a id="menu" href="form.html">Sign Up</a></li>
</ul>
<br>
<div id=“box”>
...
YOUR TASK
Add a list of your own links to
your page (change the names
to fit the pages you have
created. Test it to make sure
they work.
This part
removes
the bulletpoints and
padding
from the
whole list
and sets the
left margin
to 10%.
We now need to tell the CSS how to
lay out our menu:
ul {
list-style-type: none;
margin-left: 10%;
padding: 0;
}
li {
float: left;
}
This tells
each item to
line up next
to the
previous
item to
make a
horizontal
bar.
body{
color: rgb(195,1,112);
background-color: rgb(251,133,195);
}
ul{
list-style-type: none;
margin-left: 10%;
padding: 0;
}
li{
float: left;
}
YOUR TASKS
Change the layout of your menu by adding the parts in bold
to your CSS document.
Use www.w3schools.com to find out how to make
your menu look good. Search for “fully styled horizontal
navigation bar”.
a#menu:link, a#menu:visited {
display: block;
font-weight: bold;
color: rgb(255, 255, 255);
background-color: rgb(204, 12, 12);
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a#menu:hover, a#menu:active {
background-color: rgb(99, 14, 14);
}
YOUR TASKS
Use and tweak the CSS code above to improve the
appearance of your navigation bar.
Now add your menu to your other web pages.
Finally, continue adding content to your other pages.
User Input Form
LO: Understand what is meant by a ‘form’ and
be able to use appropriate HTML tags to add
this to a website.
<form> tags define which section of our
page will make up our input form.
In html this looks like…
<form name=“myForm”>
<form> tags
define the
start and
end of the
form
section in
the <body>.
</form>
Each of the form
items would go here.
<p>Enter your details below to sign up to our mailing
list:</p>
<form name="myForm" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
<br><br>
Surname: <input type="text" name="sname">
<br><br>
Email: <input type="text" name="email">
<br><br>
Phone Number: <input type="text" name="phone">
<br><br>
Age: <input type="number" name="age">
<br><br>
<input type="submit" value="Submit">
</form>
YOUR TASKS
Add the HTML code above to add your form.
Test out your form to make sure it looks correct on the page.
Finally, finish adding content to your other pages.
Data Validation
LO: Understand how JavaScript is structured
and be able to apply basic JavaScript
validation to a web form.
One of the main languages of the Web:
– HTML
– CSS
–
(HyperText Markup Language)
(Cascading Style Sheet)
JavaScript
HTML defines the content.
CSS defines the appearance.
JavaScript defines the behaviour.
Note – NO
capitals
here!
Before you can start styling your web page with
CSS you need to do the following:
1. Open up your form.html page in Notepad++
2. Create a new file in Notepad++ called…
script.js
3.
4.
Save this into the same folder as your web pages.
Add the line of code in bold below to the <head>
section of your form page:
<head>
<title>The Walking Dead</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
Presence
Type
Length
Range
Format
function validateForm(){
//Check data is present if (document.myForm.fname.value ==""){
alert("Enter a first name");
return false;
}
}
PRESENCE CHECK - TASKS
Add the JavaScript code above to check data is present for
the first name.
Copy and paste the IF statement for each of the other text
boxes in your form.
//Check the length of data if (document.myForm.phone.value.length !== 11){
alert("This is not a valid phonenumber");
return false;
}
LENGTH CHECK - TASKS
Add the JavaScript code above to check data entered for
the phone number is the correct length.
//Check the range
if (document.myForm.age.value < 18){
alert("You must be over 18 to continue");
return false;
}
RANGE CHECK - TASKS
Add the JavaScript code above to check data entered for
the age is greater than 18.
Testing & Evaluation
LO: Understand how to thoroughly test a
website and be able to use this structure to
inform a detailed evaluation.
A test table can be used to check everything
works as expected in your website. Create a
Test Table like this for your own website:
Test
Page
Expected
Result
Actual Result
Improvements
Needed
Click Home
button
Sign-up
Should take me
to the home
page.
As expected
None
Click News
button
Sign-up
Should take me
to the news
page.
Took me to the
home page.
Change the
hyperlink to the
correct page.
Leaving any
box blank when
submitting the
form.
Sign-up
Error message
should appear.
As expected
but spelling
mistake in
message.
Correct
spelling
mistake.
Criteria used to judge whether your
website is a success or not.
Come up with your own list of success
criteria (try to think of at least five).
Ask a critical friend if they think your
website meets all of your given
success criteria.
Underneath your Test Table write an Evaluation of
your website. This should include:
1. Explanation of what you have done, explain
HTML and CSS used.
2.
Detailed breakdown of the testing carried out.
3.
Explain how your website meets/doesn’t meet
your success criteria (explain feedback
received).
4.
Make improvements and explain what you have
done with before and after screenshots.
