3. HTML & Website Development

In the first three lessons, you will learn the basics of HTML and CSS, and how to create a responsive design which adapts to any size of screen for viewing on, say, a mobile phone or a PC. You will learn how to create text styles and add content, including text and graphics, in a specified position on a page, as well as navigation links to other pages on their website and to external websites. The basics of good design are covered and, with the help of worksheets, you will develop their own templates in a text editor such as Notepad. They will decide on a topic for their websites, document their designs and collect suitable text and images. They will then use their HTML templates to create their websites, including a web form. You can view the data collected by the web form into a simulated database. This also helps to stimulate discussion on the privacy of data.

1. HTML

Understand that the WWW is a huge collection of websites all over the world
Learn what HTML is and what it is used for
Type basic HTML tags using a text editor to create a page that can be viewed in a browser
Edit the HTML code and view the changes in a browser

HOW TO SET UP THE WORKSPACELESSON PRESENTATION WATCH THIS LESSON

2. CSS

Learn how CSS is used to set the styles in web pages and websites
Write CSS code to set styles, e.g. background colour of sections of the page; size, font, colour and alignment of text
Learn what is meant by responsive design, and create a responsive web page
Learn the main principles of good website design

LESSON PRESENTATIONWATCH THIS LESSONWATCH HOW TO DO THE ACTIVITIES L2 Resources

3. DESIGN

Complete website designs and gather content
Use an HTML template to create consistent web pages
Use float to position elements on a page

LESSON PRESENTATION WATCH THIS LESSONWATCH HOW TO DO THE ACTIVITIESL3 Resources
USING DREAMWEAVER

4. DEVELOPMENT

Learn how to create a consistent look and feel throughout a website
Add well-formatted content, including text and images, to each page
Create internal and external links and make sure they all work

LESSON PRESENTATION WATCH THIS LESSON

5. web forms

Learn how to create a web form
Learn what happens to the input data once it has been submitted

LESSON PRESENTATION

6. ALTERNATIVE APPROACHES

If you find that the learning and development of webpages in Dreamweaver is too difficult, you can achieve the same objectives using the Raspberry Pi foundation courses (linked to below). In each case you get to develop the site using a TRinket environment and step by step instructions.

RASPBERRY PI FOUNDATION

Page updated

Google Sites

Report abuse