Website Development

Web Development Session

Year 12 CS

1 / 19

Slide 1: Slide

ComputingFurther Education (Key Stage 5)

This lesson contains 19 slides, with interactive quizzes and text slides.

Lesson duration is: 120 min

Items in this lesson

Web Development Session

Year 12 CS

Slide 1 - Slide

KO: To know how to create a website using Web Development tools.

All

To understand why we need key components such as HTML, CSS and JavaScript in a website.
To be-able to create a website using HTML & CSS.

Most

To be-able to create a website using HTML and CSS, whilst understanding why they are needed.

Some

To be-able to create a website in HTML that has built-in interactivity using JavaScript and has effective CSS.

Slide 2 - Slide

Starter

What acronyms do you already know, that are associated with Web Development?

Slide 3 - Slide

Websites that we shouldn't be creating as Website Developers

Website 1

Website 2

Slide 4 - Slide

What is HTML?

Do we know what HTML stands for and it's place in Web Development?

Slide 5 - Slide

HTML stands for Hypertext Markup Language, which is a standard markup language used to create web pages. HTML provides a structure for web pages by defining the elements and attributes that make up a webpage, such as headings, paragraphs, images, and links.

Slide 6 - Slide

What is CSS?

Do we know what CSS stands for and it's place in Web Development?

Slide 7 - Slide

CSS stands for Cascading Style Sheets, which is a style sheet language used to describe the presentation of a web page. CSS is used to control the visual appearance of HTML elements on a web page, such as the colors, fonts, layouts, and sizes.

Slide 8 - Slide

What is JavaScript?

What is JavaScript and what is its place in Web Development?

Slide 9 - Slide

JavaScript is a scripting language used to add dynamic and interactive features to web pages. JavaScript allows web us to add functionality to a website that can respond to user interactions, such as clicking a button, submitting a form, or scrolling the page.

Slide 10 - Slide

What can we use to create our websites?

Slide 11 - Open question

Now, let's have a go at creating our own!

Slide 12 - Slide

HTML Template

<!doctype html> <!-- --!>

<html>

<head>

<title>Our Amazing HTML Page</title>

<meta name="description" content="Our first page">

<meta name="keywords" content="html tutorial template">

</head>

<body>

Content goes here.

</body>

</html>

Slide 13 - Slide

Extension Task 1

Can you find a way of making your navigation bar on your website, look better?

Maybe a 'drop down' navigation?

Useful link

Slide 14 - Slide

Extension Task 2

Could you find a way to make a gallery on your website?

Useful link

Slide 15 - Slide

Plenary

Slide 16 - Slide

In order for our HTML document to work, what do we need to make sure we have declared?

Slide 17 - Open question

In order for our CSS and JavaScript to work, what do we need to make sure we have done?

Slide 18 - Open question

Why is it important to have 'ALT' tags on our images?

Slide 19 - Open question