MMDT1021 Chapter 22 Notes

MMDT1021 Chapter 22 Notes - page 3

Creating Indents (with Lists)

Code Result

Code	Result
`Here is the first line of text. <ul>Here is the line after the <ul> tag.</ul> <ul>This is another line that begins with the <ul> tag so that you can see the behavior when the line wraps.</ul> Here is the ending line.`	Here is the first line of text. Here is the line after the <ul> tag. This is another line that begins with the <ul> tag so that you can see the behavior when the line wraps. Here is the ending line.

Here is the first line of text.

      <ul>Here is the line after the &lt;ul&gt; tag.</ul>

      <ul>This is another line that begins with the &lt;ul&gt; tag so that you 
      can see the behavior when the line wraps.</ul>

      Here is the ending line.

Here is the first line of text.

Here is the line after the <ul> tag.

This is another line that begins with the <ul> tag so that you can see the behavior when the line wraps.

Here is the ending line.

Using Block Quotes

<blockquote> is normally used to indent text. This is the preferred method of indenting text.

Code Result

Code	Result
`Here is some text <b>before</b> the <blockquote>. <blockquote> Here is some paragraph text that is inside the <blockquote> tags. This paragraph text will be indented from the left and right sides as well as set off from the surrounding text as if there were a <p> tag. </blockquote> Here is some text <b>after</b> the <blockquote>.`	Here is some text before the <blockquote>. Here is some paragraph text that is inside the <blockquote> tags. This paragraph text will be indented from the left and right sides as well as set off from the surrounding text as if there were a <p> tag. Here is some text after the <blockquote>.

Here is some text <b>before</b> the &lt;blockquote&gt;.

      <blockquote>

      Here is some paragraph text that is inside the &lt;blockquote&gt; tags. 
      This paragraph text will be indented from the left and right sides as well 
      as set off from the surrounding text as if there were a &lt;p&gt; tag.

      </blockquote>

      Here is some text <b>after</b> the &lt;blockquote&gt;.

Here is some text before the <blockquote>.

Here is some paragraph text that is inside the <blockquote> tags. This paragraph text will be indented from the left and right sides as well as set off from the surrounding text as if there were a <p> tag.

Here is some text after the <blockquote>.

Using Pixel Shims

Normally, the 1x1 gif would be transparent or of a color you would not see. I used a red colored one so you could see where it is. Pixel shims give you ultimate control of a width. You will in the future see how pixel shims are used in tables or professional layout software.

Code	Result
`<img src="1x1red.GIF" width="25" height="50" align="left"> This is the text that follows the <img src="1x1red.GIF" width="25" height="50" align="left"> tag. Notice how the text is indented. Once the text has wrapped past the bottom of the &apm;lt;img&apm;gt; tag it then resumes along the left side.`	This is the text that follows the <img src="1x1red.gif" width="25" height="50" align="left"> tag. Notice how the text is indented. Once the text has wrapped past the bottom of the <img> tag it then resumes along the left side.