top left
The HTML Source Logo


 html
Top Right
    
 Getting StartedHow Do I...TroubleShootingPromotionContact Us
 html
HTML
SEARCH THE SITE
advanced search



CATEGORIES
Home
Getting Started
HTML Cheat Sheet
Webmaster Tools
HTML Help Forum
Color Codes
Link to us









































bottom
HTML HTML HTML HTML
Lesson 2
My First WebPage


Welcome to Lesson 2, in this lesson we will begin writing some HTML. We will learn the various ways to display text, and how HTML tags are put together.


Now lets get started.

First you're going to need something to write the HTML in. In Lesson 1 we learned how to do this, if your unsure about what you should write your HTML in, you should go back to Lesson 1.

By now you should have Notpad or whatever program your going to write your HTML in open, right? Good...

In HTML you use tags, tags tell the browser how to display the webpage, and are always in brakets that look like this <tag goes here>

So lets write a simple line of text. Say you want the words (Hello, welcome to my new site!) at the top of your page. Looks like this:

Hello, welcome to my new site!

Simple enough right, now lets say you want that text to be in bold writing, you'd place bold HTML tags around the text you want to be bold. Bold tags look like this <B> That's pretty simple right? Just a B whitch of course stands for bold enclosed in brackets. So now your line of text should looks like this:

<B>Hello, welcome to my new site!</B>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


Notice what I did, I placed the bold HTML tag <B> in the front of the line of text that I wanted to turn bold. Then at the end of the line of text I placed a bold html tag <B> but with a / in front of the B, this tells the browser to stop the bold. This part confuses some people. When the browser read's this page it will see the <B> tag, so everything after the <B> tag will become bold untill it gets to the </B> tag, whitch tells the browser to stop the bold. For example instead of trying to bold the entire line of text lets only bold a few words:

<B>Hello</B>, welcome to my <B>new</B> site!


Seeing this in the browser will look like this:

Hello, welcome to my new site!


See now just the words Hello and new are in bold, and none of the rest of the line of text. You must always remember your ending tags, I get alot of question's from people about this, if you forget to place the ending </B> tag at the end of where you want the bold to stop, it will continue bolding all the text all the way down your page because the browser will not know where to stop at.

Guess what, you've already wrote a line of HTML, wasn't that hard was it? Naaa, didn't think so.

Bolding text is not by far the only thing you can do, say you want to make the text italic, you'd use the italic HTML tag whitch is <I> So your HTML code would know look like this:

<I>Hello, welcome to my new site!</I>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


How about underlining the text, you'd use the underline HTML code whitch is <U>, your code would look like this:

<U>Hello, welcome to my new site!</U>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


Now what if you wanted your text to be both bold and italic, your code would look like this:

<B><I>Hello, welcome to my new site!</I></B>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


Notice how there in order, <B> then <I> in the front, then <I> then <B> in the back, just reversed order on either side.

Now lets make the text bold italic and underlined, your code should look like this:

<B><I><U>Hello, welcome to my new site!</U></I></B>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


Notice the order there in, your tags must be reversed in the same order on the end of the line of text, first B then I then U in the front, then U then I then B on the end.

O.K. by now you should be begining to understand how HTML works. You know how to make text bold, italic, and how to underline it. Now lets get a little more technical, lets change the color of the text, you do this by using the <FONT> tag. You're code looks like this:

<FONT>Hello, welcome to my new site!</FONT>


Now to change the color you need to add the code COLOR="insertcolor here" to the front font tag. So for exmple lets change the line of text to green:

<FONT COLOR="green">Hello, welcome to my new site!</FONT>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


Notice you only have to add the color tag to the front font tag and not to the end, the end </font> tag just tells the browser to stop coloring the text on the page, now lets change the color to blue:

<FONT COLOR="blue">Hello, welcome to my new site!</FONT>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


You can change it to any color you want.

How about changeing the size of the text, once agin you use the <FONT> tag, but this time you add SIZE="font size #" So lets write some text with the size of 3.

<FONT SIZE="3">Hello, welcome to my new site!<FONT>


Seeing this in the browser will look like this:

Hello, welcome to my new site!

The font size can be any number you want, the higher the number the bigger the text, for example this is what text will look like in different sizes:

<FONT SIZE="1">Hello, welcome to my new site!</FONT>
<FONT SIZE="2">Hello, welcome to my new site!</FONT>
<FONT SIZE="3">Hello, welcome to my new site!</FONT>
<FONT SIZE="4">Hello, welcome to my new site!</FONT>
<FONT SIZE="5">Hello, welcome to my new site!</FONT>
<FONT SIZE="6">Hello, welcome to my new site!</FONT>
<FONT SIZE="10">Hello, welcome to my new site!</FONT>

Etc...
Now to change both the color and size of the text just add both the color and size tags to the front font tag, like this:

<FONT COLOR="red" SIZE="3">Hello, welcome to my new site!<FONT>


Seeing this in the browser will look like this:

Hello, welcome to my new site!

Now lets change the font type. To do this just add the face="your font" tag to the front <FONT> tag, so your code should look like this:

<FONT face="arial">Hello, welcome to my new site!</FONT>


Seeing this in the browser will look like this:

Hello, welcome to my new site!


You can change the font type to whatever font you want.

So what have we learned, how to make text Bold, Italic, Underlined, how to change the Size of the font, how to change the Color of the font, and even the Font Type of the text.

Congratulations, you've learned how to write text in HTML. You should have enough to keep your busy for tonight, So go, go and test out your new power's, try writing your text in different ways and colors. As learned in Lesson 1, save your file and open it up in you browser and you will be able to see what you HTML look's like as a webpage.

When your ready to move on to the next lesson Click Here



Lesson 3




Company   |   Careers   |   Partners   |   Advertising   |   Help
Privacy Policy   |   Trademark Notices   |   User Agreement
2001 TheHTMlSource.com, INC. All Rights Reserved.



Site hosted by Angelfire.com: Build your free website today!