Session 7 More on the internet HTML and CSS Teaching Computing to GCSE Level with Python.
-
Upload
todd-doyle -
Category
Documents
-
view
215 -
download
0
Transcript of Session 7 More on the internet HTML and CSS Teaching Computing to GCSE Level with Python.
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