Lab 19 Paragraphs and Headings

Goals

Paragraph Structuring

In your index.html's <body>, add another line:

index.html


      
If you go to your webpage in your browser, you'll see that the text you added does not look the same as in your
        code, on two separate lines.

      The text added to the page is not on two separate lines.
      
This is because web browsers don't usually take into account the way your code looks. Remember, HTML is all
        about meaning, or semantics. This means that if you want there to be two separate blocks of
        text, you need to explicitly code it.

      
This is where the <p> tag comes in. Wrap each line of text in a <p> tag.

      
index.html

      

      
In the browser, you can now see that the paragraphs are on two separate lines.

      The paragraphs added to the page is on two separate lines.
      
 You can also achieve a line-break using the self-closing <br>, or
        line-break tag, inside of a paragraph tag between text:
      
<p>some text<br>other text</p>

      
However, only use this if the ideas in the paragraph are related. Don't use this as a subsitute for
        using
        multiple paragraph tags.

      
Emphasis and Breaks

      
So far, all we have is plain text, but there are a couple of ways to emphasize and higlight
        important text. You might have noticed some text that have been emphasized throughout this Starter Pack.


      
To do that you can surround text with the <em> or the <strong> tags. Usually browsers will render the <em> as italicized and the <strong> tags as bold, but remember that HTML is about semantics or
        meaning, not appearance. You should use these when you want to emphasize or strongly
          emphasize text, not to make text italicized or bolded.

      
Get rid of the temporary text in your index.html's <main>
        and instead write an introduction about you! Use paragraphs, emphasis, and strong emphasis where appropriate!
      

      A description or about me about Hack4Impact
      
Note: This is your reminder to commit! If it's been a while, remember you can
        separate out the staging
        and committing of different files.

      
Headings

      
Continuing with text formatting, we have headings! They're exactly what they sound like. There are 6 different
        headings with specific emphasis and styles. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

      
At the top of your index.html's <main>, before your <p> paragraphs, put an <h1> tag.
        Inside, give your home page an appropriate heading. We'll put "hello world!"

      A description or about me about Hack4Impact
      
The <h1> heading is used once as the main heading of a page.
        The other headings can be used as many times as necessary, but always in order. <h3> should be a sub-heading of <h2> and <h6> should be the
        sub-heading of <h5> and so on.

      
headings.html