Web page construct -- Head first into HTML

1.  Create a rough sketch of the journal that is the basis for your page design

2. Use the basic building blocks of HTML to translate sketch into an outline.

3. Translate the outline into real HTML

Elements in the page:

1. quote <q> .... </q> 

 <p> You never know when you'll need a good quote, how about <q>To be or not to be</q>, or <q>Wherever you go, there you are</q>.
</p>

One of the best reasons is that you’ll be able to style quotes to look just the way you want.
Suppose you want quoted text to be displayed in italics and colored gray? If you’ve used the <q> element to structure the quoted content in your web pages, you’ll
be able to do just that.

2. <blockquote> .... </bolckquote>

<p>

I saw some Burma Shave style signs on the side of the road today:

</p> // to insert blockquote, we need to end the paragraph first 
<blockquote>

Passing cars,

When you can't see,

May get you,

A glimpse,

Of eternity.

</blockquote>
<p> // finally, we need to add a p tag to start a paragraph 
I definitely won't be passing any cars.
</p>

<blockquote> versus <q>

1) use <blockquote> if you want to quote something that was a paragraph or more, while you can
use <q> anytime you just want to throw in a quote as part of your running text.

2) <blockquote> is a block element, <q> is a in-line element .

3. <br> linebreak 

</p>

<blockquote>

Passing cars, <br>

When you can't see, <br>

May get you, <br>

A glimpse, <br>

Of eternity. <br>

</blockquote>

<p>

4. Void elements vs. normal elements

 Elements that don’t have any content by design are called void elements.
When you need to use a void element, like <br> or <img>, you only use an opening tag. This is a convenient shorthand that reduces the amount of markup in your HTML

5. List

why use list element instead of paragraph element. 

we always want to choose the HTML element that is closest in meaning to the structure of your content. This will give you and 

the browser the most power and flexibility to display the content in a useful manner.

1) <ol>, <ul>, <li> are all block elements, because there are linebreaks before list starts

2) <ol>&<ul> are group elements to group them items together. <li> is to identify each item.

3) <ol> & <ul> are elements designed to work only with <li> elements.  So we can't use other elements, other than <li> inside <ol> and <ul>

4) we can make bullet look for <ul> different using CSS

5) nested list.

 ordered list  & unordered list

step 1: put each list item in an <li> element.

<li>Walla Walla, WA</li>

<li>Magic City, ID</li>

<li>Bountiful, UT</li>

<li>Last Chance, CO</li>

<li>Why, AZ</li>

<li>Truth or Consequences, NM</li>

step 2: Enclose your list items with either the <ol> or <ul> element.

<ol> means ordered list

<ul> means unordered list

      <ol>

<li>Walla Walla, WA</li>

<li>Magic City, ID</li>

<li>Bountiful, UT</li>

<li>Last Chance, CO</li>

<li>Why, AZ</li>

<li>Truth or Consequences, NM</li>

    </ol>

definition list

<dl>

<dt>Burma Shave Signs</dt>

<dd>Road signs common in the U.S. in

the 1920s and 1930s advertising shaving

products.</dd>

<dt>Route 66</dt>

<dd>Most famous road in the U.S. highway

system.</dd>

</dl>