Introduction
In 1989, whilst working at CERN, Englishman Tim Berners-Lee wrote a proposal for what was to become the World Wide Web. The response from his manager at the time did not foretell the impact this innovation was to have on the world. "Vague, but exciting" was the feedback that was handwritten on the draft document.
During the opening ceremony for the 2012 Olympic Games, Berners-Lee made a typically self-effacing appearance in a section that celebrated the invention of the World Wide Web. The slogan "This is for everyone" was displayed in flashing LED lights around the stadium, making reference to Berners-Lee's commitment to protecting an open web, accessible to all and free from corporate or government control.
This resource will help you to develop your understanding of the technologies upon which the web relies and will present some recommended starting points for teaching children about these technologies.
Terminology
Equipping children with an understanding of the technologies that power the web will help them to make more informed and discriminating judgments about how they use it, thereby helping them to stay safe online and maximise the value of their web browsing. It can also enable them to become creators of content for the web, opening up a wider range of learning opportunities. In order to achieve this it is important that teachers have a sound grasp of key concepts and an understanding of relevant terminology.
The internet and the web
The internet and the web are often referred to as though they were one and the same thing. This is not the case, though they are closely related. Put simply, the internet is a global network of computers, connected by cables, satellites and other wireless technologies. This network provides the hardware and communication technologies that facilitate the web but it also facilitates other digital technologies that we utilise on a daily basis, such as email, voice-over-internet (VoIP) services and digital file sharing. The BBC have produced a simple guide to the internet that could be used in the classroom.
The web is the diverse but interlinked mass of data that we access - via the internet - in a form generally referred to as "webpages", although the metaphor of a "page" (taken from the world of print media) has started to look less appropriate as the web content we consume becomes increasingly dynamic and responsive to the range of devices that we use to access it. Another BBC guide explains how the web works.
HTML
Hypertext Markup Language (HTML) is the language of the web. The content of web pages - headings, paragraphs, lists, links, images etc - is "marked up" using a system of tags that wrap around these pieces of content. These tags are used by web browsers and search engines to identify these different elements of content. Later in this chapter we will explore this system of tags in more detail.
CSS
Cascading Stylesheets (CSS) is a layer of code added on top of HTML that defines how the various elements of content within a web page should be presented by a web browser. For instance, it can be used to set the font size, weight and colour for the various elements of text within a webpage. It can also be used to manipulate the layout of content within a page: for instance, presenting a list of links as a tabbed menu across the top of the page. An introduction to writing CSS code is provided later in this chapter.
HTTP
Hypertext Transfer Protocol (HTTP) is a data transfer protocol. In simple terms, a data transfer protocol is a set of rules for moving data around on a computer network. HTTP essentially enables web browsers and web servers to communicate with each other.
Web Server
Web servers host websites. When a user enters an address (URL) into the address bar of their web browser the web browser sends an HTTP request which is passed to a web server that then responds by sending back the requested web page (an HTML document). If the web page includes embedded media files (e.g. images, audio, video) or references other files, such as CSS stylesheets or JavaScript, these assets will also be sent to the user's web browser. All this data is temporarily stored (or "cached") on the user's computing device.
Web Browser
A web browser is a piece of software that runs on a computing device. A web browser can communicate with web servers over the Internet using HTTP, giving access to the wealth of data that is collectively referred to as "the web". Modern web browsers usually share common features such as back/forward navigation, tabbed browsing, access to browsing history, private browsing modes (which in theory don't store website data on the user's device) and quick access to search engines such as Google or Bing.
It is important to note that these days access to the web is offered on a wide range of devices, including mobile phones, tablets, TVs, laptops, games consoles and even wristwatches. Web browsers exist that are optimised for each of these device types. The most widely used web browsers on desktop and laptop computers are Microsoft's Internet Explorer, Google's Chrome, Mozilla's Firefox and Apple's Safari but other browsers, such as Opera, are commonly used on other kinds of devices, including mobile phones.
Search Engine
The web consists of an enormous amount of data and therefore quickly finding relevant information is a potentially challenging problem. Search engines are designed to help solve that problem. A search engine is a program that searches for items in a database through the use of keywords. Search engines use "web crawlers" to index the data that exists on the web. These web crawlers collect data - for instance, how many other websites link to a particular webpage - that is then used to help serve up the most relevant and useful content when a user enters a particular set of keywords into the search bar of a search engine.
Whilst Google now offer a wide range of software systems, they are most closely identified with their search engine which has gained huge popularity due to its speed and ability to return relevant search results. Other popular search engines include Microsoft's Bing, and Yahoo! Niche search engines offer features such as greater privacy (e.g. DuckDuckGo) or combining search results from multiple search engines (e.g. Dogpile)
The BBC have produced resources to help children at KS2 understand how search engines work.
URL
A Uniform Resource Locator (URL) is the address of a resource that exists on the web (that is to say it is stored on an accessible web server). If we know the URL for a website, webpage or other web-based resource then we don't need to use a search engine to find it; we can simply type the URL into the address bar of our chosen web browser and an HTTP request for that resource will be sent.
Understanding the structure of a URL can help us to navigate web
resources more easily. URLs can be likened to a postal address
written in reverse order. The diagram below shows how a URL can be
broken down. The last part of this URL is the file name of the
resource with its file extension: index.html. From this
we can deduce that this is a URL for a webpage (the
.html extension tells us this as .html is
the extension for a webpage). The part of the URL immediately before
indicates that this webpage is located inside a folder (also known
as a directory) called resources.
The mywebsite.co.uk part of the URL is known as the
domain name. If we were to remove all that comes after this part,
the remaining URL should take us to the homepage of this website.
The .co.uk part of the domain name (known as the top
level domain) is a fairly strong indicator that this is a UK-based
site but it is important to understand that there is nothing to
prevent an individual, organisation or business from setting up a
website with a .co.uk domain when they are
geographically located elsewhere. The domain name alone should not
be taken as any kind of guarantee of the relevance of the website or
the veracity of the information contained within it.
Web URLs begin either with http:// or
https:// - the latter indicating a secure connection,
meaning that in theory the data sent between the web browser and web
server cannot be intercepted as it is encrypted. Understanding the
difference between secure and insecure connections is an important
aspect of e-safety education. Submitting credit card details over an
insecure (http) connection, for example, leaves the user more
vulnerable to credit card fraud.
These days many web browsers don't require the
http:// or www.
component when entering a URL in their address bar and by default
don't display these when a website is loaded.
JavaScript
JavaScript is a client-side scripting language that enables web developers to enhance the interactive behaviour of websites. Client-side means that the code is executed in the user's web browser rather than on the web server that serves the website. JavaScript can, for instance, be used to validate the data entered by a user before it is submitted in an online form (e.g. checking that a password uses a mixture of letters and numbers and is of a certain length). It can also be used to create sophisticated applications that can run in a web browser (e.g. an online photo editor).
JavaScript programming can quickly become very complex but, with appropriate support, children at the upper end of key stage 2 may be ready to begin exploring some more simple uses of it within their own webpages. For learning resources relating to JavaScript see the list of useful links at the end of this chapter.
Writing HTML
A bit of HTML code is all that is required to create a simple webpage. This code can be written in any text editor that supports plain text format. This includes Notepad on Windows and TextEdit on Mac OS X - both of which are shipped as part of the standard software suite for these platforms - although a text editor designed for coding, such as Brackets, will offer additional features that can make the process a lot more efficient and enjoyable.
The following is a quick primer to help you develop your own understanding of how to create simple web pages with HTML. Later in this resource we will explore some good ways of introducing learners to HTML and CSS coding, making use of the best online resources available. You may find these interactive resources helpful in supporting your own subject knowledge development.
Writing CSS
Webpages produced using only HTML may be readable but they will lack the kind of design features that will make them really functional and visually appealing to the target audience. CSS allows us to add these important design features via style rules which can be applied to the different elements within a webpage or set of webpages.
Writing simple CSS style rules is something that children in upper key stage 2 are likely to be able to manage having mastered some basic HTML but it is worth noting that CSS can become quite complex, particularly when used to create more sophisticated page layouts and therefore it is important to set realistic expectations of what might be achieved.
Teaching resources
X-Ray Goggles
Exploring existing webpages using X-Ray Goggles can be a great way for children to start to develop some familiarity with HTML code. The X-Ray Goggles reveal the HTML that has been used to mark up elements within a webpage and can be enabled using an easy-to-install web browser bookmarklet. Once this has been installed you simply click it to enable the X-Ray Goggles on any webpage page you visit. The X-Ray Goggles not only reveal the underlying HTML code, they also allow the user to edit this code.
Children could use the X-Ray Goggles to remix a news article (e.g.
from the BBC News website). They might start by locating the
headline for the article (very likely marked up as an
<h1> element) and then replacing this with their
own headline text. After this they could try editing the paragraphs
of text (almost certainly marked up with
<p> tags. The challenge of replacing an image in
a news article presents a good opportunity for children to learn
about the construction of URLs.
Once a webpage has been remixed with the X-Ray Goggles, it can be saved to a user's Webmaker account and a link to the saved remix can be shared with others. Links could be shared with the wider school community via a class blog or the school's website.
Remixing with Glitch
Whilst the X-Ray Goggles allow children to start exploring the HTML code that is used to mark up the content of web documents, you will soon want to give them more freedom to create their own webpages. Glitch offers a natural progression, providing opportunities for children to remix HTML and CSS documents to create their own webpages. Alternatively, Glitch can be used by children to code web pages from scratch.
As with the X-Ray Goggles, children's Glitch creations can be saved (if they are signed in) and links to their webpages can then be shared. Providing a wider audience for the children's work can be a great motivator. Another key fetures of Glitch is the option to collaboratively edit code.
Activities such as those described above provide an excellent context for tackling important e-safety issues, including copyright infringement. This relates to the expectations of the programme of study for key stage 2, which states that children must learn to "use technology safely, respectfully and responsibly". This would be a good opportunity to introduce Creative Commons licensing and "public domain" media.
Unplugged activities
Student teachers at the University of Brighton worked with children in Year 6, teaching them how to create their own webpages using HTML and CSS. In order to help them learn how to markup elements in a web document, they created a giant HTML jigsaw. The children worked collaboratively to agree on the correct arrangement of the tags, attributes and values. This kind of activity, away from the computer screen, can help children learn from each other and presents good opportunities for identifying and correcting misconceptions.
Curriculum links
Teaching children about the Web could help address several different aspects of the English national curriculum programmes of study for computing.
Summary
- Equipping children with an understanding of web technologies will help them make more informed and discriminating judgments about how they use it;
- Developing your own understanding of key concepts and terminology relating web technologies is a necessary step in enabling you to support the development of children's web literacy;
- A range of interactive learning resources are available online that can be utilised by teachers to develop their understanding of HTML and CSS;
- Remix projects can provide good opportunities for exploring relevant e-safety issues.