Hey! I'm your first Markdown/HTML Article for the Natural Hazards Center.

The first thing you should notice is that you can click "Preview" at anytime to see how this text is converted to HTML. Our first Tutorial will Teach you the basics of Markdown, Then we will discuss images and formating. After that how to customize the look of your article via CSS/LESS, while utilizing UIKits excellent features.

Finally, we will look at a complex example where you can essentially make your article look like anything you wish.

First some Terminology. Your canvas is the article "div" and the wall you cannot break, Outside of that is the though you are free to try.

Lets Talk Basic Style

First, this uses Markdown which is a popular formatting syntax. But you can also use good old fashion html, if you are more comfortable or want more control. Let's go over some of the basics.

Headers

You can create headers (ie <h*> tags) like so:

h1

h2

h3

h4

h5

h6

Alternatively, you can put use the underline style

Alt-H1

Alt-H2

Emphasis

Text emphasis, aka italics, can be done with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Lists

1. The web wouldn't be complete without a good old <ul> and <ol> lists
2. To create an <ol> simply place a number period and text at the beginning of a line
   1. To create an ordered sublist. Put two (count em) two spaces before the next list

3. Actual numbers don't matter, just that it's a number

   • Unordered sub-list in an ordered list, cool.
   • And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

   To have a line break without a paragraph, you will need to use two trailing spaces.
   Keep in mind the above line and this one have two trailing spaces.
   Note that this line is separate, but within the same paragraph.

• Unordered list can use asterisks
• Or minuses
• Or pluses

Links

There are a couple of ways to create links:

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com.

Some text to show that the reference links can follow later.

Footnotes

Hey Jolie¹, you can use footnotes², all thanks to markdown extra³

Code blocks

I doubt you will be using a lot of code blocks. But I will be in these tutorials so I figured it would be best to show you what they look like so that there is no confusion.

<div>
 <p>This will be 'escaped', so I can put html tags in here and have them render</p>
</div>

Tables

Function name	Description
help()	Display the help window.
destroy()	Something bad!

You can specify alignment for each column by adding colons to separator lines. A colon at the left of the separator line will make the column left-aligned; a colon on the right of the line will make the column right-aligned; colons at both side means the column is center-aligned.

Item	Value
Computer	$1600
Phone	$12
Pipe	$1

Abbrv

The NHC has collaborated in the past with FEMA.

Block Quotes

Want to quote a person and give it that block quote feel?

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal Rule

Three or more...

---

Hyphens

---

Asterisks

---

Underscores