1. Session 7 More on the internet HTML and CSS Teaching Computing to GCSE Level with Python

2. Topics today Theory The internet – more on IP addresses HTML CSS

3. From the specification OCR  (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

4. 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

5. 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)

6. 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

7. Domain Name  A 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.

8. International codes.ac academic institution.cocompany that trades in a single country.comcommercial organisation that trades internationally.edueducational establishment.govgovernment dept or related facility.netcompany providing internet access.orgnon-profitmaking, e.g. charity

9. UK specific codes.ltd UK limited company.schschool

10. Country codes A 2-character code at the end of the name shows where the host computer is located Examples:.auAustralia.esSpain.sgSingapore.ukUK

11. Domain Name System  The 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.

12. 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

13. 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.

14. 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 example25.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?

15. HTML and CSS Students 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 Microsoft Virtual Academy also have lots of courses on HTML5 and CSSlots of courses

16. Task 1 From 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.

17. Task 2: Create a simple form in HTML First name: Last name:

18. Task 3: Enhance the form Use 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

19. Task 3: Responding to a form Please enter your name:

20. Task 3: Responding to a form #!C:\Python31\python.exe import cgi def htmlTop(): print("""Content-type:text/html\n\n Retrieving your name ""”) def htmlTail(): print(""" ""”) # main program if __name__ =="__main__”: try: htmlTop() print(“Hello there!”) htmlTail() except: cgi_print_exception()

21. Getting data from a form def getData(): formData = cgi.FieldStorage() firstName = formData.getvalue("firstname") return firstName # main program if __name__ =="__main__": try: htmlTop() userName = getData() print("Your name is {0}".format(userName)) htmlTail() except: cgi_print_exception()

22. Using Apache web server Click on XAMPP and turn Apache on Copy both files to C://Xampp/Htdocs Run by entering localHost in a web browser

23. Exam questions

24. Answer

25. Another question …

26. Answer 4 (a)

27. Answer 4 (b)

28. Another question…

29. Answer