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.

You do not have access to this action.
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.
There are no records to display.
Powered by Gibbon v24.0.00dev | © Ross Parker 2010-2022
Created under the GNU GPL at ICHK | Credits | Translators