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

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

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

hackmd.io

Tips

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" /> ▶