SiteDesignTutorial.com

Adding text to html page.


By now you have created your first html page, saved it and learned how to see the output of a html page in a browser. It was a blank page, so you didn't see anything, but now let's add some text now!

Hopefully, you have the page still opened in browser. If not, please open it, (double click the html file). It's not that hard to remember...

Right click anywhere in the blank white screen. In the menu that comes up, choose View source.
Once again, your little friend NOTEPAD opens up!
Wait a minute, some of you might see wordpad, or [MS-WORD open up. Close it. This is because Microsoft has set this as your default HTML editor. To change this, right click the logo of [[]]Internet Explorer[[]] on your desktop. Click the Programs Tab. The first option here is HTML Editor. Change it's value to NOTEPAD. Click OK.

Now when you right click to View Source, Notepad will open. Enough talking, get back to work. Adding text to html page...

In notepad, type the following:


<html>
<head>
</head>
<body>


</body>
</html>



I know you just copied it...

What you just typed is a basic requirement to notify a browser that this page is a proper html page. What do those Tags mean?

<html>: specifies that it's a html document.
<head>: This is header. Think of this as a store. This is used to store Javascripts, style sheets, and other similar stuff that will affect the way your page will look. We actually will not put anything here right now, but will do in later lessons.
</head>: Store closes for the night... Remember, every tag in html needs to be closed?

Note:
The / sign in the tag. It means that this is a closing tag.

<body>: The tag you have been waiting for!!! This is where you will add your text and other formatting that will render your page.
</body>: Close the <body> Tag.
</html>: Close the <html> tag.

These tags will not be visible when the page is opened in the browser. The browser uses this information to correctly render your page. Only the text between those tags will be seen in browser.

From here on everything you will be asked to type should be typed between the <body> and </body> tags only. I won't type the other tags here to keep the tutorial easy to understand and follow, but remember not to omit those tags mentioned above. You got to type those...

Finally, type the following text between the <body></body> tags:


Hellow world!



So your final document looks like this:


<html>
<head>
</head>
<body>
Hello World!

</body>
</html>



Close the notepad file. You will be asked if you want to save the changes. Click yes. Now hit the F5 key on your keyboard, or choose refresh from the right click menu.

Congratulations! The text Hello World! is visible in the browser. You just created your first html page, saved it, and editted it with a simple notepad!

Commenting text


Sometimes you want to leave a note for future reference, or you simply don't want a certain piece of html code to be shown on screen. In that case, html allows you to comment text in your page. The tag used to comment text is:


<!--



Closed by:


-->



Let's try this out...


<html>
<head>
</head>
<body>
Hello World!
<!-- A line of comment. -->
<!--
A block of comment.
Another commented line.
-->
</body>
</html>



Try it, the lines between <!-- and --> will never show on the screen.

Note:
If you forget to close this tag, the entire page after you opened it will go invisible.

<!-- is used to open comment.
--> is used to close a comment.

Let's now add some formatting to your html document, Bold, italic, underline etc.

SiteDesignTutorial arrowHTML Text bold