• Finalist Infinity Blog Award banner

Step 4 – Text

Last update: February 15 2019

What’s a website without text? In this step, you’ll learn:

Adding Text

Whatever you type, in between the BODY-tag, becomes visible in the browser window. Just try it. Type a little bit, add some enters and some extra spaces, save index.html and open it in a browser.

You will notice that the text will automatically begin on the left side of the browser. It will not read any of your enters or empty spaces. It’s just one blob of text. A line will only get cut off, when the whole line is full.

To make sure the text is readable, the first think I will teach you is how to add line breaks (enters) and paragraphs:

Line Break and Paragraphs

An enter is given as a “forced line break” and looks like this in HTML: <BR>

Any selection of text, surrounded by a white line above and a white line below, is simply a paragraph. It will be no surprise to you that we will use a “paragraph”-tag to create this: <P>

Both tags don’t need to be closed. However, the <P>-tag can be closed. Because this is so commonly used to refer to through other languages, like CSS, and it’s a W3C standard, it’s in your favor to teach yourself to close this.

The next bit of HTML is an example. You may continue with your own text. I’ll continue using the following throughout the rest of this course:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p>Nora Tol started offering webdesign services since the middle of the 90s with her
first company Nora Tol Virtual Publishing and, now, with her second company, ElNorado
Productions</p>


<p>By growing demand, she expanded her services with designing logos, hosting, online
marketing and even creating online content.</p>


<p>Take a look at her website for more information.<br />Or get in touch.</p>

</body>
</html>

As you can see, all my paragraphs are surrounded by the <p>-tag.
In my last paragraph, I’ve added a <BR>-tag. You can use <br>, but I’ve used it as <br />. The addiotional forward slash actually tells the browser there’s no additional closure-tag. So, there’s no <br> followed by </br>. Instead, I’m closing it right away, <br />. There are only two tags where you can do this. It’s with this <br> tag and the tags you use to place images. It’s not required, but it’s neat, though.

White Spaces

Spaces in between words show in the browser, but more spaces in a row will get ignored. If you want an extra space to be read, you have to use the following code: &nbsp;

This is what is called a character entity and it stands for a “no-break space”. There are character entities for many characters. Mostly, you will use the no-break space, as well the one for the copyright symbol (&copy;).

On to Step 5

Bookmark the permalink.

Comments are closed.