# html-in-class-exercise
First exercise learning HTML

# HTML in-class  exercise

Now that you have a little sense of how HTML works, you can try it out for yourself. We will be working in the prestigious world of online advertising today, try to sell some exercise equipment from the 1800's. 

You will be using the "mechanical_exercise.html" document to start. There is nothing special about this document. It is just a plain text document with the extension ".html". 

#### 1. Open *mechanical_exercise.html* in a web browser

You can see there is some text there, but it looks a little planer than most webpages. 

#### 2. Open it in Brackets

You should see the same plane text. This is actually the beauty of HTML. At its heart its just text. We will now use our new knowledge of HTML tags to give that text some context and meaning.

Here is some vintage advertising copy but it has no structure. Lets start at the top.

#### 3. Create headings

In HTML headings are defined in a numbered hierarchy: *&lt;h1&gt;* to *&lt;h6&gt;* with *&lt;h1&gt;* being the most important heading on the page and consequently the biggest.

**Make "Mechanical exercise" the most important heading on the page.**

**Make "A means of cure." the second most important heading.**

**Make "Hours:" the next most important heading.**

**Make "Gentlemen" and "Ladies" both the the fourth most important headings**

Remember that tags should surround the text they "mark" with opening an closing tags. Save the document and reload it in the browser to see the effects.

#### 4. Create paragraphs

For normal text the *&lt;p&gt;* tag or paragraph helps group text. You might 

**Make the three lines starting with "Also useful in promoting..." and ending in "both in London and the Provinces." each into its own paragraph with *&lt;p&gt;* tags.**

**Make the times under "Gentlemen" and "Ladies" both paragraphs, as well as "Inspection of the machines..." and the address at the end.**

#### 5. Nested tags

Now that we have tags most everything on the page. Lets add some tags to emphasize certain content. Paragraph and heading tags are known as *block* tags. Which means they create a block or box around their content. In our simple page this simple means a newline with some space between it and the next element. You can also create inline elements, which can surround an element without moving it to a new line.

Lets use two inline tags to draw attention to some of the text on the page.





Add exercise instructions to readme
Add exercise instructions to readme