HTML
Time
4.3 hrs

Difficulty
Beginner
Prerequisites
Markup & Markdown
Departments
Science
Authors
Sandra Kuipers
Groupings
Individual
Minimum Year Group
None
Blurb
HTML
License
This work is shared under the following license: Creative Commons BY-SA-NC
Outline
Learner Outcomes Students will:
|
|
Competency Focus
|
Interdisciplinary Connections
|
Reflection What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
|
|
Credits Any CC attribution, thanks, credit, etc.
|
This page requires you to be logged in to access it. Please login and try again.
10 mins
Intro
Getting Started
- HTML stands for HyperText Markup Language
- HyperText because it's more advanced than regular text
(and everything in the '90s was hyper or cyber) - Markup, because it modifies regular text my marking it up
- Language, because it has a special syntax to learn.
- We can learn to write HTML by learning what each tag does.
- Check out the Khan Academy video for a quick intro to HTML:
10 mins
Code Editors
Tools of the trade
- Writing HTML is just like writing text. You'll need an editor to get started.
- A code editor is like a text editor, but with superpowers.
- There are lots of editors out there to choose from, a couple favorites are:
- Each editor has different features, but they all essentially let you write code.
- Before we get too far, it's important to note that for HTML to become a website, it needs to be hosted somewhere.
- You can edit HTML on your computer, but only you would have access to see it :(
- As we learned in the Internet unit, networks use IP addresses and DNS servers to find webpages. Your code would need to be hosted on a server for other people to find it.
- But, there is an alternate solution! Online editors let us write and save our code in the cloud.
- There are lots of editors out there, here are a few recommended ones:
- Replit is easy to setup, allows uploads, and has great debugging tools.
- Glitch has great templates to get you started, and a handy rewind feature.
- CodeSandbox is powerful, allows uploads, but requires you create a GitHub account.
- Feel free to test them out, pick one, and be sure to create an account so you can save your work.
10 mins
Interneting is Hard
Tutorial
- The internet is a big complex place, and learning HTML can seem daunting.
- There are a lot of tutorials out there, but this is one of the best ones I've found.
- It has lots of great illustrations, and steps you through the hard stuff.
- Check out Interneting is Hard (but it doesn't have to be).
- If you prefer video tutorials instead of text, check out scrimba's Introduction to HTML.
- This course offers an interactive introduction to building your own website.
30 mins
Basic Web Pages
Tutorial
- Start at the beginning of Interneting is Hard, and be sure to read the Basic Web Pages chapter.
- Be sure to follow along by setting up your own basic web page.
- Continue until you complete the Links & Images chapter.
- If you're following the scrimba Introduction to HTML course, the order and content is a bit different.
- Continue until you reach the HTML Figure & Image Elements section.
10 mins
Fancy Web Pages
Tutorial
- HTML alone doesn't look like much.
- You can think of HTML as the skeleton of your website. It defines the structure of where everything is.
- JavaScript is like the brains. It adds scripted elements to make a website interactive.
- CSS is like the skin. It adds colours, shapes, sizes, and positions to your HTML.
- To begin with, start by learning HTML. After all, brains and skin without a skeleton are just a blob!
- For this unit, you won't need to dive to far into CSS. We'll explore it in-depth in a later unit.
- But if you'd like to get started, check out some tutorials about learning CSS:
- Interneting is Hard introduces you to styling with Hello, CSS
- W3Schools has an intro to CSS and a great reference section.
- Khan Academy also has an Intro to CSS tutorial.
10 mins
References
Docs & stuff
- At this point, the best way to learn is to dive in and start making something.
- As you get going, you're going to have questions. Questions are good :)
- Here are some helpful references to get started:
- W3Schools is the definitive resource for HTML info. Check the sidebar, there's a huge selection of info and examples.
- Interneting is Hard has lots more illustrated tutorials about HTML and CSS.
- Mozilla Docs also have a great guide for getting started with HTML.
- Don't Fear the Internet also has more videos to explain the hard parts of web development.
- Also, be sure to google your questions, or ask your teacher or friend.
180 mins
Your Simple Webpage
Evidence
- After all these tutorials and references, it's time to try your hand at building a simple web page!
- The topic can be anything you'd like! Some ideas include (but are not limited to)
- A gallery of the p5js projects you've created so-far in this course.
- A page about your favourite movies, books, comics, games, etc.
- A walkthrough for a level of a video game you like.
- A how-to guide for a hobby you enjoy.
- Pick one of the online code editors (Replit, Glitch, Code Sandbox) and create a new project there.
- It can be handy to sketch your website idea out on paper to help you picture what it will look like.
- Not sure how to add a particular element? Be sure to check the references in this page and on W3Schools.
- Have fun exploring what HTML can do! Try to go beyond just a title and a few words:
- Can you add images or embedded videos?
- Can you add colours, borders, and other css styles to your HTML?
- Can you create multiple pages and link between them?
- Once you're happy with your website be sure to save it, grab the shareable link from your editor, and submit it as your evidence of learning in this unit.
Links
- Don't Fear the Internet
- Atom
- VSCode
- CodeSandbox
- Mozilla Docs
- GitHub
- Glitch
- Replit
- Introduction to HTML
- Interneting is Hard
- Interneting is Hard
- Basic Web Pages
- Hello, CSS
- Links & Images
- Khan Academy
- Khan Academy video
- Sublime Text
- W3Schools
- W3Schools
Images






Embeds
There are no records to display.