STUDENT WORKING AT TEACHER CLASS GRADE ... - Year 8 …y8computing.weebly.com/uploads/1/3/5/0/13509255/year_8_term_5... · GRADE TERM TARGET ... L Drive:/ ICT / KS3 /Year 8/ Term

1

STUDENT

TEACHER

CLASS

WORKING AT

GRADE

TERM

TARGET

YEAR

TARGET

The long answer questions in this booklet are designed to stretch and challenge you. It is important that you understand how they should be answered. You should structure your answer like this:

1st Paragraph – should explain the key term e.g. give a definition.

2nd Paragraph – should make a point (could be an advantage or disadvantage) and explain the point fully giving an example where necessary.

3rd Paragraph – should make another point (could be an advantage or disadvantage) and explain the point fully giving an example where necessary.

4th Paragraph – should make a point (could be an advantage or disadvantage) and explain the point fully giving an example where necessary.

You should have at least 1 advantage and 1 disadvantage.

GRADE FOR THIS TOPIC

2

Progress against termly target

ABOVE

ON

BELOW

TERM 1 2 3 4 5 6

Learning Outcomes

Levels

Lesson 4 5 6

1

How do you create

websites?

I can make judgements about digital content when evalua ng and

repurposing it for a given audience.

I know how to construct sta c web pages using HTML and CSS.

I can jus fy the choice of and independently combine and I use mul ple digital devices, internet services and applica on so ware

to achieve given goals.

2

How do you add images and links?

I know the audience when I am designing and crea ng digital

content.


I can evaluate the appropriateness of digital

devices, internet services and applica on so ware to achieve

given goals.

3

How do you add different elements to your page?






4

How do you control how your site looks?

I know the audience when I am designing and crea ng digital

content.


I can evaluate the appropriateness of digital

devices, internet services and applica on so ware to achieve

given goals.

5

How do you edit fonts using CSS?






6

Assessment

Achieves a level 4 in the end of term assessment



3

1. How do you create websites?

Draw a picture of the layout of your favourite website here.

Explain what this looks like in the preview

window:

_________________________________

______________________________________

______________________________________

______________________________________

What does the <br> tag do?

______________________________________

______________________________________

______________________________________

______________________________________

How is the <p> tag different to the <br> tag?

______________________________________

______________________________________

This term we will be finding out about how websites are created. You will need to follow the instruc ons

in your booklet and then fill in the boxes to show your understanding.

1. In the editor, type a sentence about

what makes you special.

2. Add another sentence on a separate line

in the code.

3. Press space bar to add several spaces

between 2 words in your sentence.

Put the tag <br> between 2 of your

sentences.

Change the <br> tag to <p>.

4

The code <!DOCTYPE html> tells the web browser that your page is using the latest version of the HTML

language called HTML5. It is always put at the start of your code.

Put <!DOCTYPE html> on line 1 (this won't change how your page looks).

1. Create a folder called ‘web_development’

2. Inside this folder create a copy of the CSS and images folders

from: L Drive:/ ICT / KS3 /Year 8/ Term 5/ Lesson 1

3. Save your work so far as test (save it in your

web_development folder)

Create a new Dreamweaver page:

1. Click File > New > HTML

2. Delete all of the code in the code editor

3. Save the page as profile Label the folder tree diagram

A tle element code looks like < tle>Title text</

tle>.

1. Put a tle element with the text Super

Hero Profile on line 2.

2. On line 3 type the text My Profile with no

tags around it.

What does the tle element do?

________________________________

________________________________

______________________________________

______________________________________

What does the <h1> tag do?

______________________________________

______________________________________

______________________________________

______________________________________

What does the <sup> tag do?

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

1. Put the tags <h1> and </h1> around the

words My Profile.

2. Change both h1's to one of these tags: h2,

h3, h4, h5 or h6.

15<sup>th</sup> uses the superscript tag

Choose a cool superhero name to hide

your true iden ty and add it to your

profile in this format:

Name: superhero name

Using the same format add your height

and birthday to your profile using the

superscript tag

Surround the words name, birthday

and height with strong start and end

tags

5

Add a link to a stylesheet I created for you

(this was contained in the CSS folder you saved

earlier), by adding the following code under

your doctype tag:

<link rel="stylesheet" href="/css/profile1.css">

There are several stylesheet op ons. Try

changing profile1.css to profile2.css,

profile3.css etc. and use the one you like best.

What happened when you added the

stylesheet link?

_________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

2. How do you add images and links?

Exit Ticket: What is used to create websites?

R A G

Explain what each tag does:

<br> ____________________________________________________________________

<p> _____________________________________________________________________

________________________________________________________________________

<h1> _____________________________________________________________________

________________________________________________________________________

<sup> _____________________________________________________________________

________________________________________________________________________

Self Assessment:

Explain why HTML is used to create websites.

_______________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

__________________________________________________________________________________

6

What does the <img> tag do?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

What does the width attribute do?

______________________________________

______________________________________

______________________________________

______________________________________

What is a tooltip?

______________________________________

______________________________________

______________________________________

______________________________________

Underneath where you have added the

heading ‘My Profile’, add the following code:

<img src="images/profile3.png">

1. Change the code to reference

profile1.png ; it is stored in the same

folder as profile3.png.

2. Try changing the number 1

in profile1.png to the numbers 2 to 11,

and choose your favourite.

Adapt your code to add the bold width a ribute

<img width="300" src="images/profile3.png">

Adapt your code un l your image displays

correctly

NOTE: you can also use the height a ribute.

<img width= 300 src="images/profile3.png" tle

= "Super Fox"> the bold sec on is called a

tool p.

Add a tool p to your profile image and

then press F12 to preview your page

<img width="300" src="h p://4.bp.blogspot.com/‐OCAHM7Rfn5Y/TnQYvQy1ITI/AAAAAAAABFA/

lSe_VC6JkfQ/s1600/ers7lrg.jpg" tle="Super Dog">

The src a ribute allows me to add an image that I found on the internet

1. Get the full URL of an image of a vehicle or gadget using Google image search

2. Add an image tag and use the full URL as the src a ribute value. If the image doesn't appear in

the design preview, carefully repeat the instruc ons for ge ng the full URL of an image.

3. Add a tool p that gives extra informa on about the image.

Here is an example of some code:

<img src="/images/daughter2.jpg" alt="baby

and dad">

Add alt a ribute text to describe each of

your images.

Why use alt text?

________________________________

________________________________

______________________________________

______________________________________

7

Add the following code on the

line before the heading My Profile

<a href="h p://hotmail.com">Hotmail</a>

Adapt the code to go to the google

homepage: h p://google.com

What does the <a> tag do?

________________________________

________________________________

______________________________________

______________________________________

Create a copy of the about.html and index.html files from L Drive:/ ICT / KS3 / Year 8 / Term 5 /

Lesson 2 in your web_development folder

1. Next to the blog link, add a link to a page on the superhero’s site called About us.

2. The text for the link is About us.

3. The URL (or address) is: about.html

4. Press F12 on your keyboard to preview your work in browser and check your link works when

you click on it

Info: Use the | character (above the windows key) to put a bar between the links

1. Add the Superhero’s website logo before the blog and about links; the source is: images/

logo.png

2. Add alt a ribute text;

3. Surround the logo image and cap on with <a> tags.

4. Link the logo to the home page by se ng the href a ribute of the link to: index.html.

<a target="_blank" href="h p://

focusstudio.co.nz">Focus Studio</a>

1. Add a link around the vehicle or gadget

image you added earlier in the lesson.

2. Link the image to the site that you got

the image from.

3. Add the bold target a ribute and press

F12 to preview your webpage

What does the target=“_blank” attribute do?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

1. Add a tool p to the Code Avengers logo that says Go to Code Avengers home page.

2. Add a tool p to any image on your page that doesn't have one.

8

3. How do you add different elements to your page? Explain what each line of code does:

<a href="http://hotmail.com">Hotmail</a>

<img width= 300 src="images/profile3.png" title = "Super Fox">

<img src="/images/daughter2.jpg" alt="baby and dad">

Evaluate the use of a website builder like wix.com compared to wri ng HTML.

_______________________________________________________________________

__________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

Exit Ticket: How do you add images to your website?

R A G

Self Assessment:

Using the <hr> tag is one way to separate

sec ons on a page.

Add an <hr> tag to the end of your code.

What does the <hr> tag do?

________________________________

________________________________

______________________________________

9

1. On the next line, add a level 2 heading My Super Powers.

2. A er the heading, add 3 sentences about what your super hero powers are.

3. Put 2 break tags between each sentence to add some space.

Using the <p> or paragraph tag is be er than

using 2 break tags.

1. Remove the 2 break tags between the

sentences about your super powers.

2. Put <p> at the start of each sentence.

Why is it better to use one <p> tag?

________________________________

________________________________

______________________________________

Some mes you will want to create lists on your website, to do this you will need to use ul and li

tags.

ul means unordered list and is put at the start and end of a list. li means list item and is put at the

start of each item in your list. Here is an example of some code that uses a list:

<ul>

<li><a href="h p://facebook.com">Facebook</a>

<li><a href="h p://twi er.com">Twi er</a>

<li><a href="h p://pinterest.com">Pinterest</a>

<li><a href="h p://hotmail.com">Hotmail</a>

</ul>

1. Add a level 2 heading that says My Top

Websites.

2. Add an unordered list of at least 4 of

your favourite web sites.

3. Link each item in the list to the web site.

An ordered list uses the same HTML tags as an

unordered list, except that ul is changed with

an ol tag.

1. Before your list, add a level 2 heading that

starts with My Top 5.

2. Add a list of your top 5 favourite movies,

sports, musicians, books or anything else.

3. Use the ol tag to create an ordered list.

Describe the difference between an ordered and unordered list.

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

Now you will add a special tag that makes your page look be er on all the different shapes and sizes

of mobile phones. The code is: <meta name="viewport" content="width=device‐width">

1. Copy the viewport meta tag and put it at the top of your page with the link and tle tags. All me‐

ta tags are put at the top of your page a er the tle tag.

2. Add another meta tag with the name a ribute set to descrip on; set the content a ribute to a

short explana on of what your page contains (the descrip on is o en shown in search results

when people find your site with a search engine).

10

For your final task, you'll create a new webpage called likes.html.

1. Copy the CSS stylesheet link tag used in profile.html and paste it into a blank HTML document,

save it as likes.html.

2. Include at least 3 images of things you like.

3. Link each image to the site the image is from.

HTML is a de facto standard. What is a de facto standard?

_______________________________________________________________________

__________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

Exit Ticket: Name one of the elements you have added today:

R A G

Self Assessment:

Think about your favourite website, what elements are the same on every page. Make a list.

4. How do you control how your webpage looks?

11

Header tags are put around the site logo, heading text and naviga on links that appear at the top of

the page.

Footer tags are put around informa on at the bo om of the page such as copyright info, authors

name, contact informa on and naviga on links.

1. Add a header start tag just before the Superheros logo and the google and about links.

2. Add a header end tag just a er the logo and google and about links.

3. At the end of your code add a footer that contains your name and copyright date (e.g.Created

by Miss Marchant 2015).

Sec on tags are put around part of a page that

is about the same topic.

1. Put a start sec on tag just a er the end

header tag.

2. Put a end sec on tag just before the start

footer tag.

Document rela ve paths are rela ve to the loca on of the html page they are on. For example, last

lesson you created likes.html. Since likes.html and profile.html are in the same folder, <a

href="profile.html">Profile</a> creates a link to profile.html from likes.html.

1. Add a link to likes.html on your profile page with the text: My likes.

2. Use a document rela ve path to set the href a ribute.

Why have you used a section tag on this part of your webpage?

________________________________

________________________________

______________________________________

______________________________________

Create a copy of Introduc on to CSS.html from L Drive:/ ICT / KS3 / Year 8 /Term 5/ Lesson 4

Before we start CSS, make the following changes to the HTML code in the code editor:

1. Make the heading 1 level smaller

2. Change the list from an unordered list to an ordered or numbered list

3. Remove the link tag on line 5, so you can add your own CSS style code

Add the following CSS code to the head sec on

of your HTML code:

<style>

html {

color: red;

background‐color: green;

}

</style>

What did adding this CSS code do?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

12

Exit Ticket: What is used to change how a website looks:

R A G

Self Assessment:

1. Make the text easier to read;

set color to lightYellow and background

color to darkBlue.

2. Change the

CSS selector from html to ol to see what

happens.

3. Then change the

CSS selector from ol to h2.

Why is it important to make the text easy to read?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

What did changing the CSS selector to ol do?

______________________________________

______________________________________

______________________________________

______________________________________

What did changing the CSS selector to h2 do?

______________________________________

______________________________________

______________________________________

______________________________________

You can set CSS selectors to apply to more than

one element in the HTML, for example a rule

that starts with ol, p { will change ordered lists

and paragraphs.

1. Set the heading and paragraph

background to indigo and the text

to yellowGreen

Set more than one CSS selector if you want to create separate rules for different elements of your

webpage:

1. Make the background colour of the heading and list hotPink.

2. Make the background colour of the rest of the page lightBlue.

3. Make the text colour of the whole page any colour you like. Use google to find out a list of CSS

colour names.

Explain the advantage of using CSS when designing websites:

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

13

STRENGTH TARGET ACTION EFFORT

Green Pen Activity:

14

5. How do you edit fonts using CSS?

In todays lesson you will create a webpage for a business. Make up a business name and tell me about it below.

1.Create a new blank HTML page in Dreamweaver

2.Create a new folder for your business website (name the folder a er the business)

3.On line 1 add the doctype tag.

4.On line 2 add <meta name="viewport" content="width=device‐width">, to make your page

automa cally adjust to the width of whatever browser the user is using to view your website.

5.On line 3 add tle tags that contain the name of the business.

6.On line 4 and 5 add style start and end tags.

7.Inside the style tags, set the background colour of the whole page to any of the colour

names except black or white. If you want to change the text colour, do that too.

8.A er the style tags, add level 1 heading tags that contain the name of the business.

9.Add a level 3 heading that contains the business slogan or mo o.

10.Save the webpage as index (this is the name given to the first page of all websites)

Add the following CSS code:

h2 {

font‐family: monospace;

}

If you don't specify a font‐family the serif font

is used.

1. For the level 1 heading (business name)

use the cursive, fantasy or sans‐serif

font type.

2. For the slogan use any font type

What does the font-family attribute do?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

15

The following code is used to set the main heading font:

font‐family: 'Trebuchet MS', sans‐serif;

The specific font (Trebuchet MS) is followed by a comma then its generic font (sans‐serif), which is used as a

backup if the computer is missing the specific font. Font names with 2 or more words are usually surround by ' '

1. Change the CSS to use a different web‐safe font for each heading.

(If you need the code for each font style ask your teacher to display it on the board)

Add the CSS code font‐size: 48px; to your h2 CSS

selector.

1. Set the size of the level 1 heading to any

value between 24 and 48 pixels.

2. Set the size of the level 3 heading to any

value between 12 and 18 pixels.

What does the font-size: attribute do?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

You are not only limited to the list of web‐safe fonts:

1. Go to www.google.com/fonts/

2. Choose a font to use for your heading and click the bu on with a small arrow in a box (Quick‐use).

3. Scroll down to the sec on tled 3. Add this code to your website and copy the code that begins

with<link href='h p://fonts.googleapis.com/css.

4. Paste the code from link tag on a new line above the <style> start tag.

5. Go back to Google web fonts, scroll to the sec on tled: 4. Integrate the fonts into your CSS and copy

the code that begins with font‐family:

6. Paste that code into the CSS rule for the h1 tag.

Now you are going to change the style of the website and add Facebook links. First, add these contact details

to your page: loca on, email, phone number, website and Facebook page. If your business is not real, use

any loca on, email and phone number you like. If you don't have a website or Facebook page, link to any real

web and Facebook page you like.

1. Use the format on the right to add contact details

to your page. Use the strong tag to bold the

words: loca on, email, phone, website and

Facebook. Use the break tag to put each detail on

separate lines.

2. Make the website and Facebook pages link to the

actual site.

3. Add the a ribute target="_blank" to make the

linked pages open in a new tab.

16

You have already set specific fonts for h1 and h3. Now you will set a specific font for the rest of the

page. If you don't set the font‐family for an element, your web browser will use the font‐family that is

set for the html tag. If there is no font‐family set for the html tag, your web‐browser will use

the serif font.

1. Choose a font from the web‐safe font list, then add the font‐family property to the CSS rule that

starts with html {.

2. Make the colour of your heading text different from the colour of the rest of the text.

3. By default links are blue; change the colour of the anchor tags <a> to any colour except blue or

black.

The underline on links can be turned off by se ng a value of none for the text‐decora on property.

For text that is not underlined, it can be turned on by giving the text‐decora on property a value

of underline. This property can also be set to line‐through or overline to put a line through or above

text.

1. Turn off the underline for your links.

2. Turn on the underline for your level 1 heading.

a:hover {

color: green;

}

:hover is used with other elements too,

e.g. h1:hover is used to set the hover style of

headings.

1. Make links change colour when the

user hovers over them.

2. Make the underline appear for links

only when the user hovers over them.

3. Make the h1 heading font‐size larger

when the user hovers over it.

What does the a:hover selector control?

________________________________

________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

______________________________________

You can also change the style of links that the user has already visited by using the

CSS selector a:visited.

1. Set the colour for visited links to a different colour from normal (un‐visited) links.

2. Check that your rule works by clicking on the links and checking that the colour changes.

3. Remove the rule that made the heading font size larger when the user hovers over it; we don't

really want to do that! Also remove the underline from the heading if you want to.

17

Explain why you would use a combina on of CSS and HTML to create a website:

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

________________________________________________________________________________

Self Assessment: Exit Ticket: Name one CSS selector you have used today:

R A G

18

6. Assessment lesson

19

Create a website for the band you have completed your homework about.

Your website should include both HTML and CSS

You should have at least two pages that are linked together correctly.

STICK YOUR HTML AND CSS CODE HERE

Print off your HTML and CSS code and s ck it in the box below.

20

Keywords HTML Hypertext Markup Language. The language used to define pages on

the world wide web and similar networks.

Internet An interna onal network of networks.

Domain name Name assigned to a resource on the internet.

Selector CSS code used to change the look of an HTML element

Element HTML code used to add a specific type of content to a website

A ribute HTML code used within tags to control how the element looks when previewed in a web browser

Tag HTML code used to display a specific element of a webpage

CSS Cascading Style Sheet. The language used to define how pages look on the world wide web and similar networks.

Web design so ware So ware used to design websites

Text editor So ware used to write simple text programs including HTML and CSS

Web browser So ware used to read HTML and CSS code which is hosted on the internet and display the output to the user

Png Image file type used on the internet

Jpg Image file type used on the internet

MP3 Sound file type used on the internet

MP4 Video file type used on the internet

PDF File type used for documents on the internet

<!DOCTYPE html> Tag that tells the browser that the code that follows is wri en in HTML

<style> Tage which tells the browser the code that follows is wri en in CSS

Tool p Text which is displayed when an image is hovered over

Documents

STUDENT WORKING AT TEACHER CLASS GRADE ... - Year 8 …y8computing.weebly.com/uploads/1/3/5/0/13509255/year_8_term_5... · GRADE TERM TARGET ... L Drive:/ ICT / KS3 /Year 8/ Term