Lesson Wednesday

Many people think that creating a web page involves really complicated code that requires extensive studying to understand. This is not necessarily the case. We are going to learn a simple language called Markdown in this lesson that will let you create web pages really easily. But before we do that let's quickly go over what the World Wide Web is in a nutshell.

The web is made up of mostly text files - like the ones you created to write your papers in high school - as well as some other files like images or videos. These files are stored on computers that are linked together over networks. When you put a web site's address into your browser, you are really just asking to see a particular file, or combination of files. We will go more in depth into how the internet works later, but for now, this idea should help you to understand how to create basic web pages.

Markdown is one of the easiest browser languages to learn. Here is an example of a document written in Markdown.

# Markdown lesson

**Goal**: The goal for this lesson is to show how simple Markdown is to read and write by displaying a text written in Markdown and what it looks like when it is rendered in a browser.

**What is Markdown?**

According to the _Mastering Markdown GitHub Guide_, Markdown is:

>[A] way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

We most often use Markdown to write our READMEs for [GitHub](https://github.com/). A **README** is how we document our code, give specific instructions on how to run it, or what bugs it might currently contain.

**How to learn Markdown**

There are many sites that offer instructions or tutorials on how to write in Markdown. Here is a list:

* [Mastering Markdown](https://guides.github.com/features/mastering-markdown)
* [Daring Fireball](http://daringfireball.net/projects/markdown/syntax)

When this Markdown document is opened in a browser (which we call rendering), it will look like this.

Markdown lesson

Goal: The goal for this lesson is to show how simple Markdown is to read and write by displaying a text written in Markdown and what it looks like when it is rendered in a browser.

What is Markdown?

According to the Mastering Markdown GitHub Guide, Markdown is:

[A] way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

We most often use Markdown to write our READMEs for GitHub. A README is how we document our code, give specific instructions on how to run it, or what bugs it might currently contain.

How to learn Markdown

There are many sites that offer instructions or tutorials on how to write in Markdown. Here is a list:

See how it is easy to read and understand Markdown? It uses basic, familiar punctuation.

Remember Markdown is a way to format text to be viewed in a browser, but we can also add in active links to image files, video files, and other web pages. The page you are currently looking at is written in Markdown.

So let's get to it! We will practice writing Markdown by using Dillinger and see the results rendered in realtime.

Let's say we wanted to create a webpage for our favorite recipe. We would want a header to tell the world in large font what type of food we will be making. In Markdown, headers are constructed with # symbols and there are six sizes with one being the largest and 6 the smallest. Here are the header options in Markdown:

# Best Chocolate Chip Cookies
## Best Chocolate Chip Cookies
### Best Chocolate Chip Cookies
#### Best Chocolate Chip Cookies
##### Best Chocolate Chip Cookies
###### Best Chocolate Chip Cookies

And here they are rendered:

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies
Best Chocolate Chip Cookies

Generally, the main header for the page should be the largest header, with a single #.

Below the header, we want to give a brief description of where our recipe came from and what makes it "the best". In Markdown, special symbols aren't needed for normal paragraph text. Here is the page with our cookie description:

# Best Chocolate Chip Cookies

This recipe is from my dad, and they are a favorite among friends and family. The secret ingredient is the coconut! Be warned, though, these will fly off of the plate!

Now let's say you want to add some emphasis to your description using italics. In Markdown, any text that you would like to be in italics should be surrounded by single underscores. We want the words "Be warned" to be emphasized, so we will add an underscore to each side.

# Best Chocolate Chip Cookies

This recipe is from my dad and they are a favorite among friends and family. The secret ingredient is the coconut! _Be warned_, these will fly off of the plate!

Here is what this looks like rendered:

Best Chocolate Chip Cookies

This recipe is from my dad and they are a favorite among friends and family. The secret ingredient is the coconut! Be warned, these will fly off of the plate!

Now we need to list the ingredients. In Markdown there are ordered lists, which means they are numbered, and there are unordered lists, which use bullet points instead of numbers. Since the ingredients don't need to be listed in any particular order, we will use an unordered list. In an unordered list, we use the * symbol followed by one space before the text. Here's what it will look like:

* Butter
* White sugar
* Brown sugar
* Eggs
* Vanilla
* Flour
* Baking soda
* Salt
* Chocolate chips
* Oatmeal
* Coconut

And here it is rendered:

  • Butter
  • White sugar
  • Brown sugar
  • Eggs
  • Vanilla
  • Flour
  • Baking soda
  • Salt
  • Chocolate chips
  • Oatmeal
  • Coconut

Yum. Alright, now we want to list out the directions. Since directions need to be followed in a particular order, we will write these using the symbols for an ordered list, which are just regular numerals followed by a period. For example:

1. Preheat the oven to 325.
2. Beat the butter, sugar, eggs and vanilla together until creamy.
3. Mix together the flour, baking soda and salt in a separate bowl.
4. Add flour mixture to butter mixture slowly.
5. Stir in chocolate chips, oatmeal and coconut.
6. Bake for 10 minutes or until golden brown.

And here it is rendered:

  1. Preheat the oven to 325.
  2. Beat the butter, sugar, eggs and vanilla together until creamy.
  3. Mix together the flour, baking soda and salt in a separate bowl.
  4. Add flour mixture to butter mixture slowly.
  5. Stir in chocolate chips, oatmeal and coconut.
  6. Bake for 10 minutes or until golden brown.

Alright, our recipe is coming together nicely. Let's add some headers for the ingredients and the directions. These headings are secondary to the main title of the recipe, so let's use the ## headers:

# Best Chocolate Chip Cookies

This recipe is from my dad and they are a favorite among friends and family. The secret ingredient is the coconut! _Be warned_, these will fly off of the plate!

## Ingredients

* Butter
* White sugar
* Brown sugar
* Eggs
* Vanilla
* Flour
* Baking soda
* Salt
* Chocolate chips
* Oatmeal
* Coconut

## Directions

1. Preheat the oven to 325.
2. Beat the butter, sugar, eggs and vanilla together until creamy.
3. Mix together the flour, baking soda and salt in a separate bowl.
4. Add flour mixture to butter mixture slowly.
5. Stir in chocolate chips, oatmeal and coconut.
6. Bake for 10 minutes or until golden brown.

We really don't want our users to over bake their cookies, so we want to strongly emphasize the amount of time the cookies should bake by making it bold. In Markdown, we put two ** around any text that we would like bolded. For example: Bake for **10 minutes** or until golden brown.

Now we want anyone who views this page and likes our cookies to find our other recipes, so we will provide a link to our website's recipe index. In Markdown, a link is composed of two elements, the text that will display on the page surrounded by [] and the web address of where the link will go surrounded by (). Here is an example:

[Click here](http://allrecipes.com/) to check out my other great recipes.

And here is what this will look like rendered on the page.

Click here to check out my other great recipes.

Lastly, we should add an image of our cookies to our recipe. In Markdown, images are added very similarly to links, but the square brackets are preceded by ! and contain alt text for the visually impaired, and the () can contain a web address for an image. Let's grab a random picture to be a placeholder in our page.

Let's go to http://lorempixel.com/ and select the http://lorempixel.com/400/200/ link. Then we will copy the web address for that image and paste it into the parentheses on our Markdown page.

![An image of a cookie](http://lorempixel.com/400/200/)

And here is our final recipe web page in Markdown!

# Best Chocolate Chip Cookies

![An image of a cookie](http://lorempixel.com/400/200/)

This recipe is from my dad and they are a favorite among friends and family. The secret ingredient is the coconut! _Be warned_, these will fly off of the plate!

## Ingredients

* Butter
* White sugar
* Brown sugar
* Eggs
* Vanilla
* Flour
* Baking soda
* Salt
* Chocolate chips
* Oatmeal
* Coconut

## Directions

1. Preheat the oven to 325.
2. Beat the butter, sugar, eggs and vanilla together until creamy.
3. Mix together the flour, baking soda and salt in a separate bowl.
4. Add flour mixture to butter mixture slowly.
5. Stir in chocolate chips, oatmeal and coconut.
6. Bake for **10 minutes** or until golden brown.


[Click here](http://allrecipes.com) to check out my other great recipes.

There is definitely more that you can do with Markdown, so if you are enjoying Markdown and want to learn more, go in depth at Daring Fireball.

Next you will be learning about HTML or HyperText Markup Language. HTML is very much considered the language of the web. So why did we cover Markdown? Well Markdown is used in simple situations where a lot of customization is not needed. It's mainly used by programmers in writing documentation of their code and is frequently seen in README files. HTML, however, is universally used and far more customizable and powerful. So let's get some practice with Markdown before we move on to HTML!

Headers

Headers are designated with a #. Text with 1 # is the largest and text with 6 #s is the smallest.

# Best Chocolate Chip Cookies
## Best Chocolate Chip Cookies
### Best Chocolate Chip Cookies
#### Best Chocolate Chip Cookies
##### Best Chocolate Chip Cookies
###### Best Chocolate Chip Cookies

becomes

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies

Best Chocolate Chip Cookies
Best Chocolate Chip Cookies

Italics

To create italics, surround the text with single underscores _.

Example:
_Be warned_, these will fly off of the plate!

becomes:

Be warned, these will fly off the plate!

Bold

To create a bold text, surround the text with double asterisks `**.

Example: Bake for **10 minutes** or until golden brown.

becomes:

Bake for 10 minutes or until golden brown.

Ordered lists (numbered)

Ordered list just use the number and period for each line.

1. Beat the butter...
2. Mix the flour...

Unordered lists (bullet points)

Bullet points are made with the * and a single space. There must also be a blank line before the first item on the list.

Example:

Ingredients

* butter
* flour
* brown sugar
* maple syrup

becomes:

Ingredients

  • butter
  • flour
  • brown sugar
  • maple syrup

Links

Two elements make up a Markdown link, the text that will display on the page surrounded by [] and the web address where the link will go surrounded by ().

Example: [Click here](http://allrecipes.com/) to check out my other great recipes.

Images

Like links except the square brackets are preceded by ! and contain alt text for the visually impaired, and the () can contain a web address for an image.

Example: ![An image of a cookie](http://lorempixel.com/400/200/)

Resources

For more on Markdown: Daring Fireball.