Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
Coding with HTML - Web Page Creation
Transcript of Coding with HTML - Web Page Creation
Coding with HTML - Web Page Creation
"KS3 - Project A"
Week 2 - Lesson Aims
All Pupils will understand the
setup of webpage
using a text / HTML editor
All learners will create their first basic webpage
using the main basic tag attributes
and add colour to their text.
Some will be able to
edit their text
Lesson Aim 1
Before we get started, lets look at a basic webpage in a
All learners will understand and use basic HTML tags, attributes and components to create a basic HTML webpage. (Level 4 - 5).
Most learners will be able to link at
least two HTML pages
for their chosen audience and include a
of attributes. (Level 5 - 6).
Some learners will be able to include a range of
to emphasize the contents of their website. There will be colour and appropriate
use of formatting attributes.
(Level 6 - 7).
To understand why a webpage can be an effective tool for everyone.
Be able to analyse different websites for different audiences and their needs.
Have a look at this basic structure of a website. Can you identify the main components?
Web Page Components
A web page is made up of several components
Title / Main Text
it will also have
images, sound, colour to enhance its presence for the user.
Web pages - purpose
created to be viewed
in a web browser (Explorer, Safari, Firefox). Each webpage has a purpose.
Individuals share their hobbies or interests on single / several web pages or use
web pages to
Companies / Individuals create websites to help them
advertise products / attract new customers.
Match the purpose of each website listed on the left.
Selling and Buying
Main Task 1
1. Download and Complete worksheet #1 from Fronter.
2. Save it - Project C Folder area.
Google Chrome is
not a website / webpage
True or False
websites are viewed by many users through a web browser.
Websites can be created to communicate with other people across the locally.
Colour is a main component of a website
An Attribute of a website can either be sound or an image placed inside it
web page structure
Three parts make up a structure of any web page:
A component will sit in each section using special coded language
Structure of a web page
These Codes are written attributes within "
" to present information or components onto each section of the page.
Creating a page using HTML codes
Pages are written in coded web language called
"Hyper Text Markup Language".
Open any webpage of your choice, then right click on the page to view it's source.
Mini task 1
[this shows the div tags for the whole of the webpage without the visual look.]
Web pages are viewed by the web browser reading the codes in each section.
Let's give it try....
Before we do.
remember, we need a
text editor app;
Open NotePad.. and follow the instructions provided on screen
You will see something like this
Open a new notepad file.
Type in the main sections using the div tags as shown:
each tag comes in pairs
< > = opening tag
</ > closing tag
the HTML is the main opening tag, it tells the browser that it is a webpage
<Title> My First Web Page. </title>
Hello and welcome to my first Web page.
Lets see what you have done!
Save the document
as an HTML page. eg: mypage.html.
Save it again using Save As to save it in its current editable format.
Close it and the open the HTML version from your folder area.
To edit it, you will need to reopen from the notepad version.
Now lets add the body with text components
Formatting the body text
same as formatting text on a document
We can add bold, underlining and even centre the text.
what do you think these tags represent?
Try them out!
<b> = bold the text
<u> = underline the text / line of text
To centre text,
the tag requires more information;
<center> / </center>
how can I add
a new line?
Look at worksheet 2;
Analyse the structure of the webpage.
What do you see that's different ?
create a page
to tell your teacher what you have learnt this week.
use the tags learnt
to make the body of the text more visual and attractive.
the notepad text version
to your teacher - "homework 1" in your class fronter area.