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
