My first webpage - adding content to the body

Adding content to the body

The tutorial on this page is a continuation of the tutorial 'My first webpage'. The information in this hub focuses on creating some basic content for your first webpage with the use of simple HTML. Be sure to read the article 'My first webpage' first, to learn how to create an empty HTML page. After you have successfully created an empty HTML page, you are ready to add content.

'It really works now!' - Cym in 1999
'It really works now!' - Cym in 1999

In this article I will explain how to add text to your web page. And I will show you how you can format, design this text, how to make words appear bold or italic, how to create a distance between two lines and how to center a word or text.

Don't be disappointed at first. In this manual you will realize that in HTML you need to define each and every detail yourself. If you want a word to appear bold, you will have to use the HTML commands to make that word appear bold. If you want a word to start on a new line, you will have to manually insert the command to make that word start on a new line.

In basic good old HTML nothing is done automatically. Each and every step you have to type (to program) yourself into your HTML page.

Welcome to my first webpage!

Anything that you would like to be visible on your website, should go in the body of the HTML code. This means, any text which you would like to appear, should go AFTER the command <body> and BEFORE the command </body>.

The content of the website should be typed in the body of the HTML document.
The content of the website should be typed in the body of the HTML document.

Viewing the updated page

After you have entered a text in the editor, you need to save the page again. You can save the page with the same filename. You can simply choose File -> Save from the menu on the top in the editor. Or press ctrl-s to save the file.

After that, you need to open the page again in the browser. The page is not updated automatically. The browser doesn't know that you changed the page. You need to manually open the page again, via File -> Open. The same way how it was done before, in the first manual My first webpage.

And this is how it looks in the browser.
And this is how it looks in the browser.

The body

The body is the part of a page which is visible in the browser. It is the big window in which texts and images appear. Anything you type between the commands <body> and </body> will appear on your web page.

Adding some more text

Now add some more text to the page. In order to do so, you must go back to the editor and type some more text after (or before) the text which is already there. Be sure to type all your text AFTER the command <body> and BEFORE the command </body>.

After you have entered some more text, you need to save the web page again. You can save it again with the same name. After that, you need to open it again in the browser, to see the new version of the page.

Practise these steps a couple of times: make some changes to the text in the editor, save the page and view the page again in the browser. This way of working is the basis for all the webdesign that we will do.

The feeling of making a change in the editor and then viewing that change in the browser needs to become automatic at some point. It might take a while though before it becomes automatic. Don't worry if you still feel a little confused now, just continue with this manual.

Go back to the editor to add some more text between the body commands.
Go back to the editor to add some more text between the body commands.
Open the page again in the browser to see the new version of the page.
Open the page again in the browser to see the new version of the page.

Repeat and repeat

Repeat these steps until you feel comfortable with them. Add text in the editor, save the page and open the page again in the browser, to see the changes that you made to the page. Repeat, repeat, repeat...

Go back to the editor and make changes to the text. Then save the page again.
Go back to the editor and make changes to the text. Then save the page again.
Open the page again in the browser to view the changes that you just made.
Open the page again in the browser to view the changes that you just made.

Designing your text a little

When you have entered a few lines of text, you are ready to design the text a little. At this moment the only design we will do is to make some of the words bold, some words italic and some words both bold and italic.

In the next hub I will show you how to use the commands for bold and italic.

Click here to continue: Designing your text using bold and italic.

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working