8.4.2 - Words are not enough

• Computing
• Lower Secondary (Key Stage 3)

8.4.2 - Words are not enough

Year 8 – Developing for the Web

/h1

p

em

/em

/b

/p

color:red

p

100px

/body

Do No - 5 minutes

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.

Learning Objectives

• Display images within a web page
  
• Apply HTML tags to construct a web page structure from a provided design
  

<p>Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are used to create and format pages of a website. CSS allows you to make formatting changes to your website in one document. The 'instructions' in this document are then applied to your web pages.

</p>

<img src="code.png" alt="screenshot of HTML code">

The HTML code below includes an image.

Can you imagine what it would look like on your screen if you viewed it?

Let's talk about image tags

Like the tags you have seen before, image tags mark a place in a document where an image should be displayed.

<img src="code.jpg" alt="Screenshot of HTML code">

The src attribute identifies the filename of the image that should be loaded.

The alt attribute is used to associate some helpful text with image and is only visible when the mouse hovers over the image or if it doesn’t load.

Loading a file

The image tag creates a space where an image should be displayed.

Images are stored like any other file in computer by being given a name and a location.

When the web page is viewed, the web browser collects the image from where it is stored.

Look at what we've done so far

The purpose of web pages

Remember that a web page is designed for an audience and purpose.

The use of images should enhance a web page and complement the text.

Also remember that web pages need to get across useful information to the reader, so the formatting of the page should enable this to happen.

Why is it important to use images on webpages?

5 minutes - Expect an extended answer - once you've written an answer, you'll get access to a resource to uplift your answer.

Setting up - Using images

Using your instructions on your desk, Open your ‘A2 Hometags.html’ web in a Notepad++ 

Copy the images (.png files) and the A2 Web page design.pdf from  and paste the images to the same place where your 'A2 Hometags.html' page is stored.

Task - Using images

1. Place one of the images in an appropriate place in your HTML document.
2. Resize the image by adding the property width="15%".
3. Experiment with the layout of the image by placing image tags inside of modified <p> tags, e.g. 
                     <p style="text-align:center;"><img src="code.jpg"></p>
4. Repeat for the other images and add subheadings for each.

5. If you finish early, start the PDF task by trying to recreate 'A2 Web Design.PDF'

Formatting 

What formatting can you spot on this web page?

Emphasised (italics)

h1, red font colour

Bold

This formatting was used

This formatting was't used

h2, black font colour

Light blue background

underlined

P

lists

h3, black colour

italics

centered text

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;

Take a screenshot of your webpage and upload it here

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

Dingbats

No shouting out; give everyone time to think.

crocodile teeth

inline styling

Web site

Web site