‹Revenir à la recherche

8.4.3 - Taking shortcuts

Seating Plan
1 / 24
suivant
Slide 1: Diapositive
ComputingLower Secondary (Key Stage 3)

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Seating Plan

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Mr Hughes' expectations
It’s ok to be wrong.

Cold calling, everybody needs an answer.
Listen when others are speaking.
Work on teams. Today’s lesson on the slides.
No shouting out – hands up for any questions.
Don't wait for me to tell you what to do with the tasks.




Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Image tags look like?
A
<image src=“image.jpg” alt=“this is an image”>
B
<img source=“image.jpg”>
C
<img src=“image” alt=“this is an image”>
D
<img src=“image.jpg” alt=“this is an image”>

Slide 4 - Quiz

Cet élément n'a pas d'instructions

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?

Slide 5 - Diapositive

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?


Slide 6 - Diapositive

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

Slide 7 - Question de remorquage

Cet élément n'a pas d'instructions

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.


Slide 8 - Diapositive

Cet élément n'a pas d'instructions

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:


Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Moving the files over

Follow the instructions on the sheet handed to you to move the correct files over to your s:\



Try to add a border to all images, using the following text in the CSS file (see the ‘Setting up CSS’ handout for details on how to do this):

img {
   border:1px solid blue;
}

Edit the CSS to format the page as follows (use the same attribute settings as when you formatted the HTML directly):

  • Set the body with an ivory coloured background and Verdana text
  • Set h1 so that it is blue and aligned to the centre
  • Set h2 to the colour DarkRed

Task 1 - Editing the Files

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 11 - Question ouverte

Cet élément n'a pas d'instructions

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.

Slide 12 - Diapositive

Cet élément n'a pas d'instructions



h2 {
        color:DarkRed;
       }

h2 {
      color:DarkGreen;
      }

h2 {
      color:DarkBlue;
      }



Examples of quick changes

Slide 13 - Diapositive

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

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 15 - Question ouverte

Cet élément n'a pas d'instructions

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

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 17 - Question ouverte

Cet élément n'a pas d'instructions

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. 

Slide 18 - Question de remorquage

Cet élément n'a pas d'instructions

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;

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Dingbats
No shouting out; give everyone time to think.

Slide 20 - Diapositive

Cet élément n'a pas d'instructions


Slide 21 - Question ouverte

crocodile teeth

Slide 22 - Question ouverte

inline styling

Slide 23 - Question ouverte

Web site

Slide 24 - Question ouverte

Web site

Plus de leçons comme celle-ci

8.4.3 - Taking shortcuts - 8CS5

- Leçon avec 22 diapositives
ComputingLower Secondary (Key Stage 3)

8CS1 - 8.4.3 - Taking shortcuts

- Leçon avec 29 diapositives
ComputingLower Secondary (Key Stage 3)

8.4.2 - Words are not enough

- Leçon avec 24 diapositives
ComputingLower Secondary (Key Stage 3)

8CS5 - 8.4.1 - Developing for the web

- Leçon avec 25 diapositives
ComputingLower Secondary (Key Stage 3)

Building Your First Website: HTML + CSS Fundamentals

- Leçon avec 15 diapositives

Website Development

- Leçon avec 19 diapositives
ComputingFurther Education (Key Stage 5)

2. Lists en CSS Basics

- Leçon avec 30 diapositives
Software Developer [WEB_A]MBOStudiejaar 1

HWUD04-sj2122-03-HTML-document

- Leçon avec 31 diapositives
Communication & multimedia designHBOStudiejaar 2