So now that we have a nice Background, and have all the Colors set up, let's move on to putting some text on the web page. As long as you don't have any pictures on the page, text is really super simple to add. Just type it in somewhere between the opening <BODY> and closing </BODY) tags. But, remember that the web browser will ignore extra spaces (unless told how not to), and will only single space between words. Going back to the minimum HTML document, we could add in the first line of this paragraph like this:
<HTML> <HEAD> <TITLE>You would put a title here</TITLE> </HEAD> <BODY and any other options for color and background> So now that we have a nice Background, and have all the Colors set up, let's move on to putting some text on the web page. </BODY> </HTML>
Unfortunately, the 5 blank spaces at the beginning will end up as only one space, and depending on the web browser the line may end up scrolling off of the right side of the screen!
As I mentioned earlier, I probably will not get into some of the more advanced HTML tags. However, I will point out here that if you really want to force a blank space in HTML you could use a No-Breaking-Space. It would be entered as " " (without the quotes). You could use a series of No-Breaking-Spaces to create the 5 blank spaces that would normally be ignored in the above example. But, that really is a lof of extra work (and may not end up looking like you want it to anyway). So, I'll skip how to get those extra 5 spaces at the beginning of the line. Instead, I'll show you how to Center and/or Break up text.
Since different web browsers handle text differently, it becomes almost useless to try and lay out a web page exactly the way you want it to look. However there is one HTML tag that seems to work with almost all web browsers, and may help make your text look a bit nicer (and also stop it from running off the right side of the screen). It is the <CENTER> tag. There is also a </CENTER> tag to turn off centering. Here is how we might use this to fix up the previous example:
<BODY and any other options for color and background> <CENTER> So now that we have a nice Background, and have all the Colors set up, let's move on to putting some text on the web page. </CENTER> </BODY>
Here is what this looks like with the web browser you are using now:
This way, you can enter whatever text you want, and the web browser will automaticlly word wrap it, and center it on the screen. But what if you wanted this to show up as three lines instead? You could use the HTML tag for a line Break. It is simply <BR> (no closing </BR> tag). We could add it in like this:
<BODY and any other options for color and background> <CENTER> So now that we have a nice Background,<BR>and have all the Colors set,<BR> let's move on to putting some text on the web page. </CENTER> </BODY>
Here is what this looks like with the web browser you are using now:
The <BR> tag basically just adds in a line feed to Break up a line of text and continues it on the next line. Combined with the <CENTER> tag this can usually produce a nice lay out of text. But only if you add in the <BR> tag before a line of text gets so long that the web browser word wraps part of it. As I mentioned earlier, it is almost useless to try to lay things out exactly the way you want them to look because it will depend on just what web browser the user is using (and screen size, etc.). However, if you put in <BR> tags to keep the lines short, it will probably make things look nice for most people.
But what if you really wanted a blank line between text? There is an HTML tag for creating Paragraphs, the <P> tag (there is a closing </P>, but you usually don't need to use it). The <P> tag will not only produce a line Break, but also add a blank line. So we could modify the previous example like this:
<BODY and any other options for color and background> <CENTER> So now that we have a nice Background,<P>and have all the Colors set up,<P> let's move on to putting some text on the web page. </CENTER> </BODY>
Here is what this looks like with the web browser you are using now:
and have all the Colors set up,
let's move on to putting some text on the web page.
Notice in the examples for the <BR> and <P> tags that I did not put any spaces in on either side of them. The extra space would have been included in the final display, and could through off the centering by that one extra space. The trick is to remember that HTML ignores multiple spaces (and will only produce a single space unless told otherwise), but it will (usually) use a single space.