Word processing applications give you options for formatting and I know you use them all the time. Well the good news is that HTML also has a way of formatting which is achieved through the use of HTML tags and the bad news is that inappropriate use of these tags results in a bad web page. This lesson deals with some of the more common formatting options.
Requirements
Open the basic HTML page with a text editor (Notepad or TextEdit ).
Step 2Add the following HTML code between the <body></body> tags. And don't forget to save your work after editing the file.
Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The <strong> Element
This is used to place a strong importance on a piece of text, use the
<p><strong>Attention:</strong> Please leave the door open.</p>
The <em> Element
You can place an emphasis on text by using the
<p>Strawberries are <em>delicious</em>!</p>
Line Breaks
You can force a line break by using the <br> element.
<p>Here is a <br />line break.</p>
Horizontal Rule
You can create a horizontal rule by using the
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Unordered (un-numbered) List
To create an unordered list, use the
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Ordered (numbered) List
To create an ordered list, use the
Step 3
Open the file in any browser by simply
Open the source page of websites and play around with the tags inside by opening your browser, go to any website, and follow the steps below to view the source page.
Requirements
- Text Editor (Notepad for those using Windows or TextEdit for Mac users).
- Web Browser (Internet Explorer, Firefox, Google Chrome, Netscape etc).
- A Basic HTML Page.
Open the basic HTML page with a text editor (Notepad or TextEdit ).
Step 2Add the following HTML code between the <body></body> tags. And don't forget to save your work after editing the file.
Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
<h1>
for the most important, to <h6>
for the least important.<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
The <strong> Element
This is used to place a strong importance on a piece of text, use the
<strong>
element.<p><strong>Attention:</strong> Please leave the door open.</p>
The <em> Element
You can place an emphasis on text by using the
<em>
element.<p>Strawberries are <em>delicious</em>!</p>
Line Breaks
You can force a line break by using the <br> element.
<p>Here is a <br />line break.</p>
Horizontal Rule
You can create a horizontal rule by using the
<hr>
element.Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Unordered (un-numbered) List
To create an unordered list, use the
<ul>
element to define the list, and the <li>
element for each list item.<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Ordered (numbered) List
To create an ordered list, use the
<ol>
element to define the list, and the <li>
element for each list item.Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Step 3
Open the file in any browser by simply
- Navigating to your file then double clicking on it
- Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
- Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".
Open the source page of websites and play around with the tags inside by opening your browser, go to any website, and follow the steps below to view the source page.
- View > Source (Internet Explorer)
- Tools > Web Developer > Page Source = Ctrl + U (Mozilla Firefox)
- View > Source = Ctrl + U (Opera)