Basic Html Tags

Basic Html Tags

Paragraph Tags

Tag: <p> </p> (Has a closing tag) </> means closed.

What it Does: Puts 2 breaks between lines of text.

Attributes:

 

Align=left, right, center

 

Code Example:

1.    <p align=left>This is a paragraph tag</p>

2.    <p align=right >This is a paragraph tag</p>

3.    <p align=center >This is a paragraph tag</p>

 

 

What it looks like:

 

1. This is a paragraph tag.

2. This is a paragraph tag.

 

Break Tags 3. This is a paragraph tag.

 

Tag: <br> (Has no closing tag)

 

What it Does: Puts a one line break between text.

Code Example:

 

This is a break tag. <br>

This is another break tag.

What it looks like:

 

This is a break tag.

This is another break tag.

Bold Tags

Tag: <b></b>(Has closing tag) </> means closed.

 

What it Does: Creates bold text

 

Code Example: <b>this is bold. </b>

 

What it looks like:  this is bold.

Italic Tags

Tag: <i></i>(Has closing tag) </> means closed.

 

What it Does: Creates Italic text.

Code Example: <i> This text is italic. </i>

 

What it looks like: This text is italic.

Unordered List Tags

Tag: <ul> </ul> (Has closing tag) </> means closed.

 

What it Does: The UL tag lists items using bullets. Also indents your list tags.

 

Code Example:

<ul>This is a ul tag</ul>

What it looks like: This is a ul tag.

List Tags

Tag: <li> </li> (Has closing tag) </> means closed.

What it Does: Creates a bulleted list.

Code Example:

<li>Apple </li>

<li>Orange</li>

<li>Peach</li>

What it looks like:

· Apple

· Orange

· Peach

Hyperlink Tag

Tag: <a href="URL"></a> Has closing tag) </> means closed.

What it does: Creates a hyperlink to another page.

Attributes:

Target=”new” This opens up a new window.

Code Example:

<a href=”doc.html”>document</a>

What it looks like:

Document

To create a “hotlink” email reference:

<a href=mailto:srkrdipayan22@gmail.com>srkrdipayan22@gmail.com</a>

Table Tags

Tag: <table></table> Creates a table

Tag: <tr></tr> Sets off each row in a table

Tag: <td></td> Sets off Each cell in a table>

Attributes:

align=left, right, center

border=x

cellpadding=x

cellspacing=x

width=

height=

How these work and look: All these tags must be closed. </>

<table border=1 cellpadding=2 cellspacing=2>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

</table>

How it looks:

 

Cell 1

Cell 2

 

 

Tag: <img src=”imagename.gif” alt=”description”> there is no closing tag

Attributes:

alt=”description”

Align=right or left

Border=0

What it does: Inserts an image into the page. Always have an alt tag in your images. Alt tags are part of priority

one ADA compliance. The site will not be compliant without this tag.

Code Example: This is an image <img src=”images/dog.gif” alt=”dog”>.

What it looks like: This is an image .

1. Always use alt tags (alternative text) in images

2. Close your tags </>

Email Tags

<a href=”mailto:srkrdipayan22@gmail.com” class=”links” >srkrdipayan22@gmail.com </a>

Image Tags with locations

To insert an image into text area

<img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of Image”>

To place this in a left, center or right position you would:

<center><img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of

Image”></center>

Note: Sometimes the code is particular about the image name being all on one line. If your image doesn’t display properly on the page, then check for the file name being split on two lines.