8CS1 - 8.4.3 - Taking shortcuts

• Computing
• Lower Secondary (Key Stage 3)

8.4.3 - Taking shortcuts

Year 8 – Developing for the Web

In this lesson, you will:

• Describe what Cascading Style Sheets (CSS) is
  
• Use CSS to style static web pages
  
• Assess the benefits of using CSS to style pages instead of in-line formatting
  

Mr Hughes' expectations

It’s ok to be wrong.

Cold calling, everybody needs an answer.

Listen when others are speaking.

No shouting out – hands up for any questions.

Don't wait for me to tell you what to do with the tasks. Not working will result in a C1.

Forgetting passwords will be a C1.

Image tags look like?

1. <image src=“image.jpg” alt=“this is an image”>
2. <img source=“image.jpg”>
3. <img src=“image” alt=“this is an image”>
4. <img src=“image.jpg” alt=“this is an image”>

What's gone wrong?

<h1>Astro Pi - Mission Zero<h1>

Young people write a simple program to take a humidity reading onboard the International Space Station and communicate it to the astronauts with a personalised message, which will be displayed for 30 seconds!</p>

<p style="text-align:center;"><img src “astronaut.jpg”></p>

Carefully look at this HTML document. Can you spot three reasons why it won’t work in the way the designer expected?

make sure to highlight

/ by the h1>

<p>

= after src

What's gone wrong?

<h1>Astro Pi - Mission Zero<h1>

Young people write a simple program to take a humidity reading onboard the International Space Station and communicate it to the astronauts with a personalised message, which will be displayed for 30 seconds!</p>

<p style="text-align:center;"><img src “astronaut.jpg”></p>

Carefully look at this HTML document. Can you spot three reasons why it won’t work in the way the designer expected?

make sure to highlight

/ by the h1>

<p>

= after src

Think, pair, share

We know we can modify how parts of our web pages look by using tags.

 If we had 1000 lines of code and we needed to make changes to 60% of them, and each change took 50 seconds, how long would we need to spend making changes?

What happens if we need to make further additional changes in the future?

600x50 = 30,000 / 60 / 60 = Over 8 hours!

Inline formatting - Drag & Drop

Remember that you have formatted HTML directly.

But you have to do this line by line.

Recall:

<h2 style="color:red;">Title</h2>

Some arbitrary text

<h2 style="color:green;">Another title</h2>

Some more arbitrary text

CSS

Cascading style sheets.

Formatting each web page element individually can take a long time within the HTML file.

Alternatively, you can use a separate CSS file to format different parts of web page structures all at once and in one place only.

How a style sheet works

A style sheet defines how tags and properties in a HTML document should be formatted.

Tags are modified so they all take on the properties defined in the style sheet.

For example:

Main Tasks.....

The main steps are on the sheet handed out. 

Do not wait for me to move onto step Task 2. 

Make sure to save a screenshot before you move onto Task 2.

Moving files over

Follow the instructions on the sheet handed to you or follow me step by step. Don't wait for me to move on.

Step 1:

• Minimize all windows so you can see your desktop

• Double click on ‘This PC’ in the top left hand corner of the screen

• Double Click on the ‘X’ drive called Student resources

Step 2:

• Navigate to X:\Computer Science\Year 8\

• Make sure that the folder 8.4 Web Design is highlighted and right mouse click to bring up the context menu

• Click on Copy

Step 3:

• Navigate to to your S:\ drive which should be called OneDrive-HomeFolder

• Right mouse click in any blank space within your S:\ drive and click Paste from the context menu - Overwrite saved files

10 minutes

Task 1 - Editing the files

Follow the instructions on the sheet handed to you or follow me step by step

Step 1:

• Double click on 8.4 web design on your S:\ drive

• Double click on L3 – Taking shortcuts

• Open A1 CSS start_CSS in Notepad ++

• Pin Notepad++ to the left of the screen by click and dragging the top bar to the left of the screen. Click on Chrome (The browser) when the animation happens to pin that to the right.

10 minutes

Yes, I've done all the tasks

No I've not done this task

I have you added a blue border to the images.

I have you set H1 so that it is blue and aligned to centre.

I have set H2 to the colour 'DarkRed'

I have experimented with different colours and settings.

Take a screenshot of your webpage and upload it here (WIN + SHIFT + S, save your screenshot to your documents and upload below)

Efficient design

Using CSS means that a web designer does not have to make formatting changes to lines of HTML.

 

Once CSS is in place, it is easier to apply a change to adjust the style of a web page.

h2 {

        color:DarkRed;

       }

h2 {

      color:DarkGreen;

      }

h2 {

      color:DarkBlue;

      }

Examples of quick changes

Cold Call - Can anyone see a disadvantage of CSS here for this example?

Task 2 - Using CSS

The HTML document needs to be told to use a named style sheet.

This reference is created between the <head></head> tags.

Open the template HTML file called ‘A2 CSS page.html’

Create a blank line between the <head></head> tags.

Add the following:  <link rel="stylesheet" type="text/css" href="format.css">

Link HTML page with a specific style sheet

Yes, I've done all the tasks

No I've not done this task

I have added <link rel="stylesheet" type="text/css" href="format.css"> between the head tag?

I have you created the file 'format.css'

I have you checked the the webpage A2 CSS page.html has a blue background.

Take a screenshot of your webpage with a blue background and upload it here (WIN + SHIFT + S, save your screenshot to your documents and upload below). Add your additional changes with separate screenshots.

The next step is to create the style sheet file:

Create a new plain text file called format.css in the same folder as your HTML file.

Add the following formatting information to the file:

body {

    background-color: blue;

}

Open your HTML file in a web browser to check the background turns blue.

Improve the appearance of the web page using CSS to make your changes, (see worksheet for suggestions) and add information about CSS.

Create a style sheet

Take a screenshot of your webpage and upload it here (WIN + SHIFT + S, save your screenshot to your documents and upload below)

Which of the following statements about CSS are true?

CSS is easier to change formatting than inline formatting of HTML.

CSS requires a reference to the style sheet within the head of the HTML document.

TRUE

FALSE

The tags specified in a CSS document need to be referenced using angular brackets (crocodile teeth), e.g. <h1>. 

CSS makes HTML web pages more consistent in their formatting. 

CSS takes more time to format large HTML documents. 

Extra stretch

1. Open ‘A2 Web page design.pdf’ 

Try to recreate this web page as closely as you can. 

Hint: You will need to account for using tags in your text so the browser shows them:

  < becomes &lt;

 > becomes &gt;

Dingbats

No shouting out; give everyone time to think.

crocodile teeth

inline styling

Web site

Web site