|
|
Paragraph Spacing
|
One of the best options for spacing your text that I highly reccommend is using the <p> and </p> tags, or paragraph tags. They don't indent your text, but they put one line of space inbetween your two paragraphs. They would be used like this:
<body>
<p>Hi! My name is Heather and I am 14 years old. I live in the Puget Sound Area in Washington. A few of my hobbies are making jewelry, creating websites, reading, writing, and chatting with my friends.</p>
<p>I also like to play music. I have played the piano for about 5 years and I started playing the bassoon last September. I am in the school concert band and am currently having lessons for both instruments.</p>
</body>
Another option for spacing paragraphs is indenting text. The best way is to use this code: . If you add a bunch of them (5-7) to the front of a few sentences in your document, you will see that they become indented when you open your page. Remember to put a space inbetween this code and your text!
If you decide to use this code, you need to use the tag for skipping a line of text (or adding a "break"), which is <br>. <br> does not have a closing tag. If you put one <br> after your paragraph, it will be like pressing "enter" on your keyboard - it puts the second paragraph on the next line, but it doesn't put space between them. If you want space, you have to put two <br> tags. Here is an example of spacing your text the other way:
<body>
      Hi! My name is Heather and I am 14 years old. I live in the Puget Sound Area in Washington. A few of my hobbies are making jewelry, creating websites, reading, writing, and chatting with my friends.
<br>
      I also like to play music. I have played the piano for about 5 years and I started playing the bassoon last September. I am in the school concert band and am currently having lessons for both instruments.
</body>
Here is what your webpage would look like with these two different ways of spacing your text. Remember to right click the page (or ctrl+click for Mac) and click "view source" to see the HTML!
Example Webpage
|
|
|
Centering and Dividing Your Page
|
The most common way to center anything on your page is put it inbetween the <center> and </center> tags. A quick and easy way to do this to a paragraph is put it as an attribute in the <p> tag, like this:<p align="center">.
To divide your page using a line, you can use the <hr> tag. You do not need the <center> tags because it is automatically centered. It has no closing tag, but many attributes. You can change how wide it is, what color it is, and how thick it is (do not take away any quotation marks - they are very important):<hr width="NUMBER" color="COLOR" size="NUMBER">.
Put a percent of the page (or the table, tables are explained later) or the number of pixels wide you want it where the first "NUMBER" is, and a pixel number where the second "NUMBER" is (1-5 is average). I will explain color on the next page, Formatting Text. Here are some examples (the first two are 40% and 25% of the table, not the page, and the third one is 300 pixels):
<hr width="40%" color="magenta" size="2">
<hr width="25%" color="green" size="5">
<hr width="300" color="blue" size="1">
Here is what your webpage would look like with the paragraphs centered and a dividing line before and after the text. Remember to right click the page (or ctrl+click for Mac) and click "view source" to see the HTML!
Example Webpage
|
|
|
Lists
|
There are three types of lists: ordered lists, unordered lists, and definition lists. Ordered lists are when each line is numbered, beginning with "1". Use the tags <ol> and </ol> for the whole list and the tags <li> and </li> for each list item. The HTML code looks like this:
<ol>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ol>
When you look at it in a browser, it looks like this:
- red
- yellow
- blue
Unordered lists have a bullet before each list item. Use the tags <ul> and </ul> for the whole list and the tags <li> and </li> for each list item. The HTML code looks like this:
<ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ul>
When you look at it in a browser, it looks like this:
Definition lists are usually used in glossaries. There are two parts: the term (word) and definition. The term is on the left and the definition is on the next line, indented. Use the tags <dl> and </dl> for the whole list, the tags <dt> and </dt> for each term, and the tags <dd> and </dd> for each definition. The HTML code looks like this:
<dl>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>pixel</dt>
<dd>picture element</dd>
</dl>
When you look at it in a browser, it looks like this:
- FTP
- File Transfer Protocol
- HTML
- Hypertext Markup Language
- pixel
- picture element
Here is what your webpage would look like with a list or two. Remember to right click the page (or ctrl+click for Mac) and click "view source" to see the HTML!
Example Webpage
|
|
|
|
