MMDT1021 Chapter 22 Notes - page 3

 

Creating Indents (with Lists)

Code Result
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
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 &lt;img src="1x1red.GIF" width="25" height="50" align="left"&gt; 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.