Markup & Markdown
Time 60 mins

Difficulty Beginner
Prerequisites The Internet
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

Blurb

Markup Languages

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.
5 mins
Introduction
Getting Started
  • The internet is FULL of webpages.
  • Just below the surface of each webpage we visit is HTML.
  • There are millions and millions of webpages on the internet.
  • This means there's billions and billions of lines of HTML!
  • Each webpage may look different, but they share the same fundamental markup language.
  • In this unit, we'll explore what a markup language is, and how it's different than a programming language.
5 mins
What is Markup?
Digging In
  • To mark something up means to take existing text and add marks to it, like highlights and notes.
  • The name comes from publishing editors who use a pen to make marks all over a manuscript.
  • Editors would highlight words and add notes, eg: fix this typo, rewrite this sentence, etc.

  • A markup language for a computer is similar.
  • It starts with plain text, and then adds special markup called tags to indicate what the text should look like.
  • Each tag in a markup language has a special meaning.
5 mins
Markup vs. Programming
Digging In

  • A markup language is different than a programming language.
  • Programming languages use variables, loops, and logic to follow a procedure or create an algorithm.
  • Markup languages don't have any procedures or logic.
  • Instead, markup is a set of tags applied to plain text to indicate how it should be displayed.
    • No variables
    • No loops
    • No functions
    • No algorithms
  • Check out the Difference Between Programming, Scripting, and Markup Languages
5 mins
Opening Tag, Closing Tag
Examples
  • Markup is made up of tags.
  • This is a tag: <p>
  • And another tag: <div>
  • Each tag uses <> and has a name like p or div.

  • Almost every piece of markup uses an opening tag and a closing tag.
  • Content goes in between the tags, and the whole thing together is called an element.
  • <p>This is an example paragraph element</p>
  • Opening tags and closing tags work as a pair.
  • Here's another example of tags in HTML:
<h1>My Cat</h1>

<p>My cat is <strong>very</strong> grumpy.</p>
  • Each tag has a different meaning.
  • In the example above, there are <p> paragraphs, <strong> bold tags, and <h1> heading tags.
  • Tags are used to add markup to plain text, which your web browser uses to transform into a website.

10 mins
Nested Tags
  • Tags can be nested inside each other.
  • To get an idea of how to nest tags, check out this video from Don't Fear the Internet.

  • In this video, we can see how markup tags can be nested. Like a hamburger.

More Tags
Examples
  • Along with p, here are some more common formatting tags:
<p> </p> Paragraph
<strong> </strong> Bold
<em> </em> Emphasis
<i> </i> Italic
<u> </u> Underline
<s> </s> Strikethrough
<h1> </h1>

Heading 1

<h2> </h2>

Heading 2

<h3> </h3>

Heading 3

<h4> </h4>

Heading 4

<br> Line Break. Unlike other tags, this one doesn't need a closing tag.
30 mins
Simple Markup
Evidence
  • Lets write some markup!
  • First, we need some text. Lorem Ipsum is generic placeholder text that designers use.
    • But, regular lorem ipsum is full of latin and kinda boring.
    • Visit Meet the Ipsums and generate some more interesting text :)
  • Then, visit CodePen and paste your text in the HTML area.
    • CodePen is an online editor for HTML, CSS and Javascript.
    • You'll need to create an account to save your work.
  • Once you have some text in CodePen, you're ready to add some markup!
  • When you're done adding markup to your text, save your work and submit a URL to your CodePen 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