HTML Tutorial


Learn how to make links with anchor text, image links, image tags, align text, format text, and align images with simple HTML tags which you can use inside of .html, .htm, .php files.

The first step you need to do is open up a text editor like Windows Notepad, Notepad++ then save your file as a .html file by going to save, then pick the all files *.* option ubder file type. Type your filename then a .html extension at the end your file should look like .htm . After you typed .htm and save it type.

<html>
<head>
  <title>Type title here</title>
</head>
<body>
Content for website
</body>
</html>

Enter the title of the page in between the two Title(title will only be viewable on a web browsers title bar, and toolbar button on your start menu) tag then enter your content/words in between the two body tags.

the finish website would look like

Content for Website

Learn to add images, text links, and align+format your images and text.



How to make a link with Anchor text.
Quote:
1. <a href="http://link of site">

2. Name of site

3. </a>

4. add steps 1+2+3 together and you should have a HTML code that looks like this

<a href="http://link of site"> Name of site</a>

My example:

<a href="http://www.johnsonyip.com/forum">Johnson Yip Forum</a>

Should look like this Johnson Yip Forum

Note remember the Qoutations "http://"


HTML code for Posting a picture with an embedded picture :

artgallery1

Code:
1. <a href="http://link of site">

2. <img src="http://link of image" border="0">

3. </a>

4. add steps 1+2+3 together and you should have a html code that looks like this:

<a href="http://link of site"><img src="http://link of image" border="0"></a>

My example:

<a href=http://www.johnsonyip.com><img src="http://www.Johnsonyip.com/image.jpg" border="0"></a>


Should look like this : artgallery1

Posting a image without a link

Code:
1. <img src="http://linkofimage">

Note remember the Qoutations "http://"

Example

<img src="http://johnsonyip.com/image.jpg"border="0>


should look like this: artgallery1
HTML codes for Bolding, indenting, underlining, and striking text

To bold text use this

Code:
<b>type text you want to bold here</b>

My example:

<b>johnsonyip.com</b>


Produces : johnsonyip.com

To indent text use this

Code:
<i>type text you want to indent here</i>

My example:

<i>johnsonyip.com</i>


Produces: johnsonyip.com

To underline text use this

Code:
<u>type text you want to underline her</u>

My example:

<u>johnsonyip.com</u>


produces: johnsonyip.com

To strike text use this

Code:
<s>type text you want to strike here</s>

My example

<s>johnsonyip.com</s>


Produces: johnsonyip.com
Aligning text and images to the left, center, or right

Just replace text with " <a href="http://link of website"><img src="http://link of image"></a> " if you want to align an image to the left, center, or right"

1. Aligning text and images to the left


Code:
<P ALIGN=Left>Type your text here </p>

Image:

<P ALIGN=Left><a href="http://link of website"><img src="http://link of image"></a> </p>

My example:

<P ALIGN=Left>johnsonyip.com </p>

<P ALIGN=LEFT><a href=http://www.johnsonyip.com><img src="http://www.johnsonyip.com/image.jpg"></a></p>


Produces:

artgallery1


2. Aligning text and images to the centre

Code:
<P ALIGN=Center>Type your text here </p>

Image:

<P ALIGN=Center><a href="http://link of website"><img src="http://link of image"></a> </p>

My example:

<P ALIGN=Center>johnsonyip.com </p>

<P ALIGN=Center><a href=http://johnsonyip.com><img src=http://johnsonyip.com/image.jpg></a></p>


Produces:



artgallery1


3. Aligning text and images to the right

Code:
<P ALIGN=Right>your text Type your text here </p>

Image:

<P ALIGN=Right><a href="http://link of website"><img src="http://link of image"></a> </p>

My example:

<P ALIGN=Right>johnsonyip.com </p>

<P ALIGN=Right><a href=http://www.johnsonyip.com><img src=http://johnsonyip.com/image.jpg></a></p>




Produces:

johnsonyip.com


artgallery1
To make a line break type <BR> After a Object or line of text you want a new line for.
For example: I like Cheese<BR>MMMM Would look like this

I like Cheese
MMMM