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://placekitten.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://placekitten.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://placekitten.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://placekitten.com/200/300" alt="kitten" />
</body>
</html>

Markdown

HTML in Markdown e.g.

# Cool media

## Casper in snow

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

Cute!

Casper in snow

Cute!

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
  3. 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

  1. Break into groups (I will deputize volunteers).
  2. Make sure you know how to embed an image and a video.
  3. Make sure you can create assignment pages.
  4. Create links to those pages.

hackmd.io

Tips

Paragraphs

Conclusion

Questions?

Ask Dr. Reagle!

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://placekitten.com/200/300" alt="kitten" />