ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

My first webpage - adding content to the body

Updated on July 24, 2010

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.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)