@ Web Development 2 2 Basic Content and Style 3 3 More CSS Styling 4 4 Adding Pages 5 5 Navigation 6 6 User Input Form 7 7 Data Validation Select a topic 1 1 Understanding the Internet 8 8 Testing & Evaluation

@ Understanding the Internet  LO: Understand the hardware components required for networking computers and recognise the protocols required for communication.

@ Accessing a Network  To access a network/The Internet certain things are required: –Hardware (physical devices) –Protocols (rules that allow devices to communicate)

@ Hardware  Hubs  Switches  Routers

@ Hub  Used to connect multiple computers together.  Passes on all data it receives.  Can result in lots of network traffic as copies of data packets are sent everywhere!  Suitable for small networks.

@ Switch  Used to network multiple computers together.  Controls the flow of network traffic based on address information in the data packet.  Learns which devices are connected to its ports and then forwards data to the correct places.  Suitable for large networks.

@ Router  Acts as a gateway between two networks (ie, your home network and the Internet).  Allows only authorised machines to talk to one another.  Keeps a log of network traffic.  Usually provides a firewall to prevent unauthorised access to a network.

@ Protocols Set of rules that allow electronic devices to communicate with one another. Some common protocols:  SMTP (Simple Mail Transfer Protocol)  IMAP (Internet Message Access Protocol)  POP (Post Office Protocol)  FTP (File Transfer Protocol)  TCP/IP (Transmission Control Protocol/ Internet Protocol) Services

@ Mini-Task 1.Go to the website techterms.com 2.Find out what each of the protocols does and write a few bullet-points to summarise each one: SMTP (Simple Mail Transfer Protocol) IMAP (Internet Message Access Protocol) POP (Post Office Protocol) FTP (File Transfer Protocol) TCP/IP

@ Client-Server Model The Internet Server (Where your website is stored) Client

@ Lesson 1 Questions In a new Word document answer the following questions in FULL sentences: 1.What is a hub? 2.What is a switch? 3.What is a router? 4.Write a definition of each of the main networking protocols: SMTP IMAP POP FTP TCP/IP EXTENSION: Create a diagram and label it to explain how the client-server model works.

@ Basic Content and Style  LO: Know how to use the basic structures of HTML and CSS.

@ What are HTML & CSS?  Two of the main languages of the Web: – HTML (HyperText Markup Language) – CSS (Cascading Style Sheet) – JavaScript  HTML defines the content.  CSS defines the appearance.  JavaScript defines the behaviour.

@ How is HTML Written?  HTML is made up of open and close tags with content in the middle. Here are some examples: – – This is my title – Main content goes here – (one of a few tags to have no closing tag) –

@ Getting Started Before you can start building your web page you need to do the following: 1.Create a folder in your documents called … website 2.Open up Notepad++, create a new document and save it into your “website” folder as… index.html

This line tells the web browser to expect an HTML web page. YOUR TASK Type these tags into your blank document in Notepad++ then save the file. (Don’t forget to indent it in the same way as here.) This section gives information about the site (it’s one of the places search engines look for information.) All of the content (the visible parts) of your website will go into the section.

@ Website Topic  Your website will be a fan site for your chosen topic, this could be: –Pop band/Singer –TV Show/Film –Comic –Sports team  Eventually your website will consist of around four pages: –Home –News –Picture Gallery –Sign-Up

The Walking Dead! The Walking Dead Fan Site! This is a website about... YOUR TASKS  Decide on a topic for your web site then add a suitable title, heading and relevant information to your web page.  Investigate different types of heading you could use. EXTENSION  Find out how to add a picture (make sure you save the picture in the same folder first!)  Find out how to add a hyperlink

@ Structure of CSS  CSS is a bit different to html. Instead of open and close tags it uses brackets { } to begin and end a section.  To define a style for our body we would do this… body{ } This tells the CSS what part of the web page we are styling. Curly brackets are used to begin and end each section of CSS. color: A CSS property can be assigned a value using the colon : All CSS statements must end with a semicolon ; rgb(251, 133, 195);

@ Creating the CSS Before you can start styling your web page with CSS you need to do the following: 1.Open up your index.html page in Notepad++ 2.Create a new file in Notepad++ called… style.css 3.Save this into the same folder as your web page. 4.Add the line of code in bold below to the section of your own web page: My Cool Website! Note – NO capitals here!

body{ color: rgb(199,0,0); background-color: rgb(83,83,83); } YOUR TASK  Type these styles into your CSS document. You can play with the RGB values to change the colours. Search online for an “RGB Colour picker” to help you. EXTENSION  Apply a font to your web page using “Google Fonts” (Hint: look at steps 3 and 4 under “Quick Use”).

@ Homework Project Find three different websites online. For each one identify and explain the following:  Ideas you would like to incorporate in your own site.  Design & layout (colours, fonts, positions of items etc.)  Multimedia features (videos, animations, pictures etc.)  Interactive features (roll-over effects, games, forms etc.) Make sure you include screenshots and use PEE within your written work.

@ More CSS Styling  LO: Recognise how to style different areas of HTML using tags.

@ Tags  tags define divisions (or sections) of our page so we can apply different styles to different parts.  In html this looks like… tags define the start and end of a section in the. Some content would go in here. For example, paragraphs of information, pictures etc. Each needs an ID so the CSS knows which one we are styling.

The Walking Dead! The Walking Dead Fan Site Some info you’ve written YOUR TASK  Add tags to your web page to define a section of the html. Add the bits in bold into your own page.

body{ color: rgb(195,1,112); background-color: rgb(251,133,195); } div#box{ width: 80%; margin-left: 10%; background-color: rgb(204,12,12); } YOUR TASKS  Give your box some style by adding the section in bold to your CSS document. EXTENSION  Use to find out how to give your box a border (hint: put the code underneath the background colour)

@ Adding Pages  LO: Know how to add additional pages to a website.

@ Adding Additional Pages  To add a new page, just copy and paste your existing HTML page and change its name.  Add at least one more relevant information page, this could be: –Characters –Tour Dates –Series Information –Band Members –Photo Gallery  Add another page called “form.html” (we’ll add some content to this later!)

@ What Went Well... Even Better if…  Swap computers with the person next to you.  Add a sticky note to their desktop to give them feedback on how their website is progressing.

@ Navigation  LO: Understand how pages are linked together and recognise how to make a navigation bar more visibly appealing with CSS.

@ A List of Links  First you need to tell your page what the links need to be, we can create these as a list. link 1 link 2 link 3 tags define an unordered list. tags are used to define each list item.

The Walking Dead Fan Site Home Page 2 Page 3 Sign Up... YOUR TASK  Add a list of your own links to your page (change the names to fit the pages you have created. Test it to make sure they work.

@ Not Very Pretty is it?  We now need to tell the CSS how to lay out our menu: ul { list-style-type: none; margin-left: 10%; padding: 0; } li { float: left; } This part removes the bullet- points and padding from the whole list and sets the left margin to 10%. This tells each item to line up next to the previous item to make a horizontal bar.

body{ color: rgb(195,1,112); background-color: rgb(251,133,195); } ul{ list-style-type: none; margin-left: 10%; padding: 0; } li{ float: left; } YOUR TASKS  Change the layout of your menu by adding the parts in bold to your CSS document.  Use to find out how to make your menu look good. Search for “fully styled horizontal navigation bar”.

a#menu:link, a#menu:visited { display: block; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(204, 12, 12); width: 120px; text-align: center; padding: 4px; text-decoration: none; } a#menu:hover, a#menu:active { background-color: rgb(99, 14, 14); } YOUR TASKS  Use and tweak the CSS code above to improve the appearance of your navigation bar.  Now add your menu to your other web pages.  Finally, continue adding content to your other pages.

@ User Input Form  LO: Understand what is meant by a ‘form’ and be able to use appropriate HTML tags to add this to a website.

@ Tags  tags define which section of our page will make up our input form.  In html this looks like… tags define the start and end of the form section in the. Each of the form items would go here.

Enter your details below to sign up to our mailing list: First name: Surname: Phone Number: Age: YOUR TASKS  Add the HTML code above to add your form.  Test out your form to make sure it looks correct on the page.  Finally, finish adding content to your other pages.

@ Data Validation  LO: Understand how JavaScript is structured and be able to apply basic JavaScript validation to a web form.

@ What is JavaScript?  One of the main languages of the Web: – HTML (HyperText Markup Language) – CSS (Cascading Style Sheet) – JavaScript  HTML defines the content.  CSS defines the appearance.  JavaScript defines the behaviour.

@ Creating the JavaScript Before you can start styling your web page with CSS you need to do the following: 1.Open up your form.html page in Notepad++ 2.Create a new file in Notepad++ called… script.js 3.Save this into the same folder as your web pages. 4.Add the line of code in bold below to the section of your form page: The Walking Dead Note – NO capitals here!

@  Presence  Type  Length  Range  Format Types of Validation

function validateForm(){ //Check data is present - if (document.myForm.fname.value ==""){ alert("Enter a first name"); return false; } } PRESENCE CHECK - TASKS  Add the JavaScript code above to check data is present for the first name.  Copy and paste the IF statement for each of the other text boxes in your form.

//Check the length of data - if (document.myForm.phone.value.length !== 11){ alert("This is not a valid phonenumber"); return false; } LENGTH CHECK - TASKS  Add the JavaScript code above to check data entered for the phone number is the correct length.

//Check the range if (document.myForm.age.value < 18){ alert("You must be over 18 to continue"); return false; } RANGE CHECK - TASKS  Add the JavaScript code above to check data entered for the age is greater than 18.

@ Testing & Evaluation  LO: Understand how to thoroughly test a website and be able to use this structure to inform a detailed evaluation.

@ Testing the Website  A test table can be used to check everything works as expected in your website. Create a Test Table like this for your own website: TestPageExpected Result Actual ResultImprovements Needed Click Home button Sign-upShould take me to the home page. As expectedNone Click News button Sign-upShould take me to the news page. Took me to the home page. Change the hyperlink to the correct page. Leaving any box blank when submitting the form. Sign-upError message should appear. As expected but spelling mistake in message. Correct spelling mistake.

@ Success Criteria  Criteria used to judge whether your website is a success or not.  Come up with your own list of success criteria (try to think of at least five).  Ask a critical friend if they think your website meets all of your given success criteria.

@ Evaluation Underneath your Test Table write an Evaluation of your website. This should include: 1.Explanation of what you have done, explain HTML and CSS used. 2.Detailed breakdown of the testing carried out. 3.Explain how your website meets/doesn’t meet your success criteria (explain feedback received). 4.Make improvements and explain what you have done with before and after screenshots.