250 likes | 437 Views
Session 7 More on the internet HTML and CSS. Teaching Computing to GCSE Level with Python. Topics today. Theory The internet – more on IP addresses HTML CSS. From the specification. OCR ( i ) describe the nature of the Internet as a worldwide collection of computer networks
E N D
Session 7More on the internetHTML and CSS Teaching Computing to GCSE Level with Python
Topics today Theory The internet – more on IP addresses HTML CSS
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
Last week • The internet is a very large Wide Area Network • World-wide collection of thousands of LAN and WAN networks • The internet is aclient-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)
What?Path to page How?Protocolused Where?Domainname 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.
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.
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 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.
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 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 also have lots of courses on HTML5 and CSS
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.
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 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