Session 7More on the internetHTML and CSSTeaching Computing to GCSE Level with Python

Topics today

Theory

The internet – more on IP addresses

HTML

CSS

From the specificationOCR

(i) describe the nature of the Internet as a worldwide collection of computer networks

(j) describe the hardware needed to connect to the Internet including modems, routers etc

(k) explain the need for IP addressing of resources on the Internet and how this can be facilitated by the role of DNS servers

(l) explain the importance of HTML and its derivatives as a standard for the creation of web pages

(m) describe common file standards associated with the Internet such as JPG, GIF, PDF, MP3, MPEG

(n) explain the importance of compressing files that are transmitted via the Internet

(o) describe the differences between lossy and lossless compression

AQA

 understand the concept of coding at the server and client end

 know what can be coded at the server end

 know what can be coded at the client end

 have experience of coding solutions to simple web application problems

Last week

The internet is a very large Wide Area Network

World-wide collection of thousands of LAN and WAN networks

The internet is a client-server network

Services available on the Internet: World Wide Web File Transfer Protocol (FTP) servers Email Cloud technology (storage online)

A protocol is a set of pre-agreed signals, codes and rules to be used for communication between systems

Other aspects of using the web

URL (uniform resource locator)

Domain names – what the codes mean

IP addresses (and relationship with domain names)

Compression of data/file types

For GCSE: being able to develop basic web pages

(AQA only: some server-side programming involved)

Uniform Resource Locator (URL)

The global address of documents and other resources on the World Wide Web.

The first part of the address indicates what protocol to use, and the second part specifies the IP address or the domain name where the resource is located. (How, where, what)

For example, http://www.pcwebopedia.com/index.html specifies a Web page that should be fetched using the HTTP protocol.

How?Protocol

used

Where?Domain

name

What?Path to page

Domain NameA domain name is a string of identifiers separated by ‘dots’ (full-stop)

Web Server domain names can identify the type of organisation and often the country in which the server is located.

International codes

.ac academic institution

.co company that trades in a single country

.com commercial organisation that trades internationally

.edu educational establishment

.gov government dept or related facility

.net company providing internet access

.org non-profitmaking, e.g. charity

UK specific codes

.ltd UK limited company

.sch school

Country codes

A 2-character code at the end of the name shows where the host computer is located

Examples:

.au Australia

.es Spain

.sg Singapore

.uk UK

Domain Name SystemThe Domain Name System (DNS) was

invented so users could use a memorable name to refer to a network and a host on that network.

The DNS is a hierarchical system of names and abbreviations

A Fully Qualified Domain name (FQDN) is one which uniquely identifies a host, such as mail.longroad.ac.uk

DNS servers translate FQDNs into IP Addresses.

Hosts use DNS servers to resolve domain names into IP addresses before connecting to other hosts on the Internet.

IP Addresses Every Web site has a ‘Home page’ with a unique address

known as its IP address 4 numbers, each in range 0 to 255, separated by full-

stops. e.g. 177.234.243.186

IP addresses are difficult to remember, so can use Domain Name instead

Domain name system maps the domain names onto the IP addresses

Compression Techniques

In Computer Science data compression or source coding is the process of encoding information using fewer bits than an unencoded representation would use through use of specific encoding schemes. Examples include the ZIP file format and MP3.

Compression is useful because it helps reduce the consumption of expensive resources, such as hard disk space or transmission bandwidth.

Lossy and Lossless Compression

Lossless compression algorithms usually exploit statistical redundancy in such a way as to represent the sender's data more concisely without error. Lossless compression is possible because most real-world data has statistical redundancy.

For example 25.888888888 can be compressed as: 25.[9]8

Interpreted as, "twenty five point 9 eights", the original string is perfectly recreated, just written in a smaller form

Lossy compression discards information which is not considered important e.g. background scenery is saved with reduced resolution, uses fewer bits for colours to which the human eye is less sensitive and uses fewer bits for low-intensity colours

Decompressing a lossy compression image results in an uncompressed image that is different from the original but is close enough to be useful.

Question: What data do we need lossless compression for?

HTML and CSSStudents should be able to use HTML and CSS. Basic elements of a webpage:

HTML – Structure and content

CSS – Presentation and Design

JavaScript – behaviour

Good resources here:

W3 Schools

Google From the Ground Up course Introduction

Video on CSS

There are lots of videos from Google which will be particularly good for the AQA specification and looking at server-side scripting

Microsoft Virtual Academy also have lots of courses on HTML5 and CSS

Task 1From the shared drive copy the files

basics.html

astyle.css

The “basics” file does not include very much – but the css file can be edited to make it look very different.

Add some additional content to the basics file in line with the css file and then edit the css file to make the file look different.

Task 2: Create a simple form in HTML

<!DOCTYPE html><html><body><form action="">First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form></body></html>

Task 3: Enhance the formUse w3Schools.com to look up elements of a form

Create a more sophisticated page with:

Heading

Form with- Text boxes- Radio buttons- Check boxes- Simple drop-down menu

Exam questions

Answer

Another question …

Answer 4 (a)

Answer 4 (b)

Another question…

Answer