Scribd
Upload
2 views13 pages

Development Lesson One Y8

This document outlines a lesson on HTML, focusing on its structure and styling for web pages. It includes step-by-step tasks for creating HTML documents using Notepad++, saving them, and running them to view the results. Additionally, it encourages experimentation with HTML tags and provides tasks for taking screenshots of the code and webpages created.

Uploaded by

Rob Carrigan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views13 pages

Development Lesson One Y8

This document outlines a lesson on HTML, focusing on its structure and styling for web pages. It includes step-by-step tasks for creating HTML documents using Notepad++, saving them, and running them to view the results. Additionally, it encourages experimentation with HTML tags and provides tasks for taking screenshots of the code and webpages created.

Uploaded by

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

Lesson 1 – Website Building Blocks

Starter:

Learning Objectives
 Learn how to describe what HTML is.
 Learn how to use HTML to structure Web Pages.
 Learn how to modify HTML tags to improve styling.

HTML (Hypertext mark-up language)

HTML example 1
HTML example 2

Task 1 - Getting started with HTML


This lesson is all about how we use tags to mark-up text to
display as a web page.

Video stopped at
6.26

-Follow these steps to complete TASK 1


(1) Create a folder in your oneDrive and name it
“htmlFolder”

(a)

(b)

(c) Name the folder htmlFolder

(2) In the bottom of your screen search for and select


Notepad++.
(3) Inside your notepad++ file type the following.

(4) Saving your file. Save the file as [Link]


inside your oneDrive > htmlFolder
Note: Make sure you save as a HTML document
Click on Run > Run
Click Run again

Go to you htmlFolder > [Link]


Your webpage should appear.

Play around with your code to make the text below


appear.

Task 1: Take a screenshot of your code and the


webpage. Paste below.

Video will restart at


6.26
Task 1 – Getting Started with HTML – Solution

Video paused at 7.41

Task 2 - Some more HTML tags

Task 2 - Some more HTML tags. Part 1


Write the HTML code in Notepad++

Experiment with the tags you see above on the right.

Save the file inside Onedrive > htmlFolder


Name the file “[Link]”.
Run the code to produce the webpage.
Take a screenshot of your html code in Notepad++ and
the webpage.
Paste the screenshots in the box below.
Task 2 - Some more HTML tags. Part 2
Now experiment with these tags in your code.
Then Run your code to produce the webpage.

Take a screenshot of your html code in Notepad++ and


the webpage.
Paste the screenshots in the box below.

Restart Video at 7.41


Task 2 – Some more HTML tags – part 1 – Solution
Video paused at 9.33
Task 3 - Challenge

Task 3: Take a screenshot of your code and the


webpage. Paste below.

Task 3: Challenge Solution


Text Formatting in HTML

Video paused at 9.33

Task 4: Use the slide above to help you to complete this task.

Take a screenshot of your code and the webpage. Paste


below.
Extension Task:
Play around with your code. See what you can create.
Take a screenshot of your code and the webpage. Paste
below.

Task 4: Task Formatting Solution

Extension Task:
Play around with your code. See what you can create.
Take a screenshot of your code and the webpage. Paste
below.

You might also like