Markup 101

Joseph Reagle

Web HTTP

HTTP Client request

You type:

http://www.example.com/Index.Html

Your browser sends:

GET /Index.Html HTTP/1.1
Host: www.example.com

HTTP Server response

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Content-Type: text/html; charset=UTF-8
Content-Length: 131
Accept-Ranges: bytes
Connection: close

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

Markup

HTML e.g.

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

HTML

  • is a type of markup
  • used to structure elements of a document using tags
    • head, body, headings, paragraphs, links, etc.
  • tags need to be paired
    <title>An Example Page</title>
  • or singular and closed
    <img src="http://placecats.com/200/300" />

This markdown

# An example page

## Intro

Hello World, this is a *very* simple 
[Web](http://w3.org/) document.

![kitten](http://placecats.com/200/300)

↪ this HTML

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

Markdown

  • easy to type
  • human readable, easily converted to HTML, Word, PDF, etc.
  • used on many Websites and in text editors (including Reddit and AI chatbots)
  • limited styling, but you can include HTML

HTML in Markdown e.g.

## Nixie catching a ball

<iframe width="853" height="480" 
src="https://www.youtube.com/embed/hisd3dZbbvA" 
frameborder="0" allowfullscreen></iframe>

Nixie catching a ball

(Not all video or website authors permit embedding.)

Image hosting

There is a difference between the URL of the page and the URL of an embedded image.

ex. Hosted screenshot

  1. Take a screenshot of something on your device.
  2. Upload it to imgur.com (‘New post’)
  3. “Grab link” to the HTML page of the image.
  4. Alt-click to get link of actual image.
  5. Embed that image in a page on your wiki.

Styling / CSS

<h1 style="color:blue;">This is a Blue Heading</h1>

yes you can

ex. Structure your wiki

  • Break into groups and make sure can:
    1. create two new pages: tutorial and first reading set.
    2. create links to those pages from home page.
    3. make the permissions on all pages public.
    4. embed an image and a video on tutorial page.
    5. enable spell checking.

hackmd.io

Tips

  • you can share, edit synchronously, and set permissions
  • share/publish to snapshot a public version (send me original)
  • menu/revision to see versions
  • menu/export to backup
  • picture to automatically upload and embed an image

Paragraphs

  • Unfortunately, there are different variations of markdown.
  • By default, HackMD doesn’t require blank lines between paragraphs, but I recommend you do so.
    • Use blank lines between paragraphs.
    • Don’t worry about indenting paragraphs.

Conclusion

Questions?

Ask Me a Tech Question!

Review

Convert to markdown

  1. paragraph and strong
    <p>This is <strong>very</strong> simple</p>

  2. link
    <a href="http://w3.org/">Web</a> document.

  3. image
    <img src="http://placecats.com/200/300" alt="kitten" />