Scribd
Upload
3 views16 pages

HTML

coding

Uploaded by

jocelynoppong
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views16 pages

HTML

coding

Uploaded by

jocelynoppong
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML

Year 8 HTML
Learning Objectives
• To understand the difference between the internet and world wide
web
• To understand why we use opening and closing tags
• To use our HTML skills to create a webpage
The Internet vs the World Wide Web
• The internet is a huge network
of computer all connected
together
• The world wide web (www or
web) is a collection of webpages
found on this network of
computers
• Your web browser uses the
internet to access the web
HTML
• Hyper Text Markup Language is the language of the web
• It describes the content in web pages
<opening> and </closing> tags

<holiday>
- Swimming
- Sandcastles
- Sightseeing
</holiday>

Without the closing tag, we would be permanently in a holiday!


Parts of a webpage
• The webpage is composed of two parts:
- The head: where everything about the Head
webpage is held
- The body: where all the visible content will
be shown Body
• You can think of this as all the brainy stuff
belongs in your head/brain
• You show off the clothes on your body
Step 1
• Open Notepad
• Create a folder named ‘HTML’
• Inside that folder, save your notepad file
• You can call it mywebsite.html
• The .html is the most important part – this tells your computer that it
is a html file!
Step 2
• Open your HTML folder
• Double click on your website
• This will open a blank webpage – this is ok!

• Click back onto your Notepad file


Step 3
• On your notepad file type the following line:

• Notice the * next to mywebsite.html – this means that the file needs
to be saved
• Save it and then go to your webpage – refresh and see what appears

<h1> text here</h1>means that we want to create a heading


of size 1 (you can go up to 6)
Experiment with different numbering.
How does it change the headings?
Step 4
• You have made your first heading!
• Now we want to write some paragraphs
• You do this by writing <p> put your text here </p>

Remember – every time you change any of your HTML code, you need
to save and then refresh your browser!
Step 5
• I would like to add some pictures into my webpage!
• To do this, I am going to first find a picture I want
• Then I will save that picture in the same location as my webpage
• Try to make sure that the file type of your picture is jpg or png – you
can take a screenshot and save that if it isn’t!
• The picture I have chosen has a long name so I will rename it

• Copy the file name, for me it is pandemic.png


Step 5
• I am then going to write the below code to put my picture on my
website:

• This is telling the code to look for a file named ‘pandemic.png’


• The alt text is explaining what the picture is
• You will need to change this to your image name and description

If you need to resize


you can use width
and height:
Step 6
• Now I want to add a link to somewhere
• I can type :

• In my case, I put a link to the amazon listing


• As it was a long link, I used TinyURL to shorten it
Your task!

• This is my basic website


• You can use the steps to create your own about me
website
• Try to experiment!
Extension
• Use head and body to bring a bit more structure to your website
• DOCTYPE tells your computer it is a html file and the line below sets
language to English
Extension
• You can link to other html pages too!
• Make sure it’s saved in same place
• Create a new html and use your previous steps to link

You might also like