Adding Content to Your Web Page.

Using and Modifying Text

All you should have at the moment is a web page with a title and coloured background, still not much to look at, let's add some text.

To add text to your web page, you need to type the text in your page using the text editor and the text must go between the opening and closing body tags. And after the HEADER tag Hn where n equals a number from 1 to 6 which determines the size of the header, 1 being the largest and 6 the smallest. Type the text This is my first test text in your test page using the text editor, then save the text and return to this page and click on the TEST button. Remember to click on the back button in your browser to return to this page.

You should have seen your test text when you clicked on the TEST button if not check carefully that you have followed the instructions and try again.

Now let's make the text a little more interesting by making changes to the text, type the code below in your test.html file exactly as shown but after your previous work. Save your work and return to this page to test your work using the TEST button, then return to this tutorial where the code will then be explained.

This is my second test text.

If the code was typed exactly as shown you should have noticed that the size of the text is now larger and the type of text has changed, look at the differences between the letter T in your first and second sets of text and the colour of the text has changed from black to white.

FONT A font is a lettering style and you can use different font styles in a web page but different web browsers may display the same font differently. Standard Microsoft fonts include Arial, Courier and Times Roman, use of non standard fonts may render your page unreadable to visitors who do not have the font installed on their computer.

SIZE determines the size of the font, which can be any whole positive number from 1 to 7.

FACE determines the actual font used such as Arial, Courier, Times Roman etc check your operating system for the full list of fonts installed.

COLOR determines the colour of the text displayed, the standard colours are the same as for the background colours as shown in Stage 3 and the same rules apply. A useful tip here, if you want to change the default font colour for the whole page you can modify the body tag like so <BODY TEXT="blue"> substituting any of the standard colours or Hex codes (Hex codes are beyond the scope of this tutorial).

Now try experimenting with the font settings for SIZE, FACE and COLOR and click on the TEST button below to see the affects of your experimentation.

Using Bold, Italic and Underline.

A simple way to make text stand out is to format the text in BOLD, ITALIC or UNDERLINE. The tags used are B for BOLD, I for ITALIC and U for UNDERLINE and the tags are closed in the usual way, look at the 3 examples below.

This is my second test text.

This is my second test text.

This is my second test text.

Try this for yourself.

Content and Paragraph Styles.

Now we need some content to make the page more interesting. To do this we need to have a topic to talk about, let's talk about computers but you can talk about any topic you wish.

Unless you have your own text type in the text below between the body tags and after your previous but precede the text with the following tags as these will separate your earlier work.

 
 

BR stands for BREAK and this tag does not require closing, now copy the text into your test.html file, the text between the lines that is (HINT you could highlight and copy the text and then paste it into your test page if you do not want to type it all out!).

A computer is an electronic data-processing machine that has three components where the input and output may be digital or analogue and the process would involve storage, control and arithmetical operations. A computer differs from most other machines because it is versatile and not restricted to doing one particular job. The modern world of high technology could not have come about except for the development of the computer. Different types and sizes of computers find uses throughout society in the storage and handling of data, from secret governmental files to banking transactions to private household accounts. Computers have opened up a new era in manufacturing through the techniques of automation, and they have enhanced modern communication systems. They are essential tools in almost every field of research and applied technology, from constructing models of the universe to producing tomorrow's weather reports, and their use has in itself opened up new areas of conjecture. Database services and computer networks make available a great variety of information sources. The same advanced techniques also make possible invasions of privacy and of restricted information sources, but computer crime has become one of the many risks that society must face if it would enjoy the benefits of modern technology.

Before we go any further let's revisit the HEADER tag and use this to add another title to the web page but this time before the content section. Copy the code below exactly as shown into your page, save it and return to this tutorial page and click on the TEST button.

<H2>What is a Computer.</H2> Notice the number 2, this will make the title smaller than the main title at the top of your test page.

Now copy the above paragraph (the text between the horizontal rules) and paste this in 3 more times so that you have a long section of text to work on in your test.html file. Save the file and click on the TEST button to view your creation.

Next we will break the text on the test.html page into paragraphs. To do this we use the following tags:




Each paragraph must be between these tags, if all of the text that you have added to your test page is enclosed within these tags you will not see any difference. However if you break the text into several paragraphs e.g. by placing each paragraph between these tags, you will notice a difference. You can use the tags at each point where the text repeats if you have used the text provided, otherwise you will have to decide where to break your own text into paragraphs, try this now.

You should notice that each paragraph automatically has a single line spacing separating them. In fact you do not need the closing paragraph tag, however if you use the closing tags in pairs for each paragraph you can then modify each paragraph and align the text within that paragraph. Let's try this, make sure you have at least 4 paragraphs, copy text if necessary, then leave the first set of paragraph tags exactly as they are. Then modify the next 3 paragraphs as shown below but only modify the opening tag of each paragraph, do not modify the closing tags.







When you have modified the opening paragraph tags as shown above, saved your test.html file and clicked on the TEST button, you will notice that the text on your page has changed. The first paragraph remains unchanged and the second paragraph looks identical to the first, this is because the text is left aligned by default. By left aligned it is meant that each sentence of the text lines up on the left-hand side. In the third paragraph you will notice that the text lines up on the right hand side and in the fourth paragraph each sentence of the paragraph is centered, this is most noticeable in the last line of the fourth paragraph.

This concludes the lesson on paragraphs, feel free to experiment with the paragraph tags and see how this affects the alignment of the text on the page. When you are ready return to the main menu and go on to stage 5 where you will learn about Marquee's and the Blink tags.

[ TOP ] [ Click here to start the next stage. ]