To previous Build a website: 3    To end of this webpage    To Maps: 1

Home English Contents Miscellaneous

Home > English > Miscellaneous > Build a Website > Build a website 4 - Build text

 

Build a website 4 - Build text

 

The first three lessons were these:
Build a webpage
Build Links
Build more Links
and this fourth one is now to deal with more details about text.

Webpages should contain inspired text and how to write inspired text is one of the many subjects that the messages received by Bertha Dudde deal with.

Here are links to a couple of examples:
0807 0814 0815 0816 0817  0819 0820 0858 0864 0876
0877 0910 0912 0921 0925  0926 0962 0981 0987 1024
1141 1405 1543 8146

Now to bring such inspired messages to the people, therefore spread them, and it does not matter who receives them, is an important aspect of the work for God.

The internet is an excellent medium to do this and if you want to help spreading messages that really bring life, then this is a place where you might get some tools to help you.

So help spreading the message coming from God and if you yourself receive such a message then this here might be a place where you get some aid to get started.

In this lesson we want to deal mainly with text.

In the previous three lessons we have already brought the basics of HTML regarding text and in this lesson we just want to expand a little bit.

Let us just list what has already been discussed in terms of commands.

The command <br> breaks a line of text into two lines at the place where it is placed; it has no end command.

The command <p> stands at the beginning of a paragraph and its end command </p> forms the end of a paragraph.

The commands <b> and </b> make that what is between them appear bold on the browser.

Similar commands are:
<i> and </i> for italic
<u> and </u> for underlined text
<html> and </html> enclose everything
<head> and </head> enclose the first main part
<title> and </title> enclose the title
<body> and </body> enclose the second main part
<a href=""> and </a> are used for a link
<h1> and </h1> enclose a heading size 1 and the size of a heading can vary from 1 to 6
and the command &nbsp; creates extra space non-breaking-space.

Now let us have a look at some more commands.

As examples I here give some special characters and I use the special German letters, the Umlaute, because I often write German:

For ä the code is &auml;
for ö the code is &ouml;
for ü the code is &uuml;
for Ä the code is &Auml;
for Ö the code is &Ouml;
for Ü the code is &Uuml;
for ß the code is &szlig;

I have stopped using these codes and instead type the German letters directly or when I use an English keyboard I have keyboard shortcuts for them and that seems to work. I am however not sure whether surfers with old browsers will see the right letters and I am also not sure whether surfers who do not have German software and a "German" computer will see them. Such characters seem to be depending on the specifications of the operating system.

So as you can see from this sometimes one has to use some sort of trial and error way to find out if something works. Some people use all kinds of different browsers and different versions of browsers to check for something like this when they create webpages.

Superscript: The formula E = mc2 would look like this in code:
E = mc<sup>2</sup>

Subscript: The expression H2O looks like this in code:
H<sub>2</sub>O

25°C in code is 25&deg;C.

Now I want to come to three special characters that are used in HTML commands and they are the two characters of angle brackets and the ampersand.

The first sign of the two signs used of the angle brackets is the < sign. It is also called the "less than" sign. The second sign used in angle brackets is the > sign. It is also called the "greater than" sign.

The angle brackets constitute basic elements of HTML commands and when the browser finds the first then the browser considers it as an introduction to a command. And then the browser tries to interpret the following text as a command.

And the same applies to the ampersand, &, it is also often used as an introduction to a command. The end sign to it is the ; - the semicolon.

So when one wants to use these signs in a different way, not as part of a command, then it is better to use the codes for them.

So the recommendation is to only use these three directly when commands are used and in all other instances to use them indirectly and that means to use the codes for them:
Code for < is &lt;
Code for > is &gt;
Code for & is &amp;

Now let us have a look at one use of the last sign - & - the ampersand.

The code for many special characters starts with & and one of them is the protected space, a non-breaking-space, &nbsp;.

This non-breaking-space - &nbsp; - normally causes that words or expressions are not torn apart at line breaks.

But this non-breaking-space - &nbsp; - can also be used for special purposes, it can for instance be used to create a bigger distance than the normal distance between two paragraphs and that is this combination:

<p>&nbsp;</p>

We have explained that the browser does not show more than one space and that when a line break is forced in Notepad that the browser interprets this as a space and that when one wants more than one space the sign &nbsp; has to be used.

But there is an exception to this rule that the browser does not recognize more than one space and that is when the command <pre> is used.

I use <pre> when I want the browser to display something exactly as I type it. And that includes all spaces and all line breaks. So the <pre> command is used to keep text in the same format and shape it appears in when one types it into the webpage. The end command is as usual </pre>.

The messages by Bertha Dudde deal a lot with the times of the end and there is some sort of a time table in this connection which shows different sections graphically on the webpage
Bar chart end-time

Have a look at that webpage. It gives an idea what one can do with <pre>.

Notepad breaks lines automatically when the edge of the open window is reached, but that is a line break that the browser does not recognize and in <pre> the browser would carry on for ever when one does not force a line break by pressing Enter. But such a line break is not visible in Notepad and when wants to know where such a line break is, then one has to basically move along with the arrow keys to find it.

A similar action is required when an address in a link might have a break and therefore does not work, also then one should move along this address with the arrow keys to detect it.

Now this was just a detail about the use of this <pre> command.

Here is an example - have a look at the code to see how it works and go along with the arrow keys to get a feel for it:

                     __________
              start |__________| end

So the main characteristic of text and signs used with pre commands is that all is dominated by space formatting. It could be used to form tables, but there is another way to build tables:

A quite useful thing in HTML is a table. The code is very simple for simple tables. On this website the main webpages at the beginning are tables. Have a look at them and their codes.

To see how flexible such tables are, go to such a webpage, for example
en/enc.htm
and then vary the width of the window and see how the different column widths change and how the text within the columns changes. And all that is done by the browser automatically without any input being required from the side of the creator of the webpage.

Here is an example of a table that has two rows and three columns:

1.1 is small1.2 is bigger than 1.11.3 is much bigger than 1.1 and also than 1.2
2.12.22.3 is even bigger than 1.3 because of all the bbbbb bbbbb bbbbb bbbbb bbbbb bbbbb bbbb bbbbb

Make the opened window of the browser very narrow and then drag it wider and see how the text breaks change and also how the cell widths and heights change.

Have a look at the code of this table by right clicking into this browser window and then clicking Source or Source Code or something like this.

So if one creates a simple table then the browser does automatically do all the adjusting of cell sizes and the adjusting of line break of the text in the cells when the size of the window is changed. The longest text in a cell determines the width of that column.

If you want that the table has borders then just add the word border inside the introductory command and then the table looks like this:

1.1 is small1.2 is bigger than 1.11.3 is much bigger than 1.1 and also than 1.2
2.12.22.3 is even bigger than 1.3 because of all the bbbbb bbbbb bbbbb bbbbb bbbbb bbbbb bbbb bbbbb

The basic HTML structure for a table with two rows and two columns and with borders looks like this in a HTML document:

<table border>
<tr>
 <td> </td>
 <td> </td>
</tr>
<tr>
 <td> </td>
 <td> </td>
</tr>
</table>

Between the two commands <td> </td> you can place the text of a cell.

And this basic HTML structure for a table would have to be placed into that part of the basic HTML structure for an entire webpage that is enclosed by the two commands <body> and </body> and then the entire basic HTML structure for a webpage that just has a table would look like this:

<html>
<head>
<title> </title>
</head>
<body>
 <table border>
 <tr>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td> </td>
  <td> </td>
 </tr>
 </table>
</body>
</html>

Now blockquote:

Now we come to <blockquote> and to show you how it works I have formatted this paragraph in <blockquote>. It starts with the command <blockquote> and at the end the command </blockquote> has to appear, otherwise the rest of this webpage appears in blockquote. So if one forgets such an end command then the command affects everything what comes after it.

So this is quite handy when one wants a text to look different from the rest, like for a quotation.

For the building of a webpage Notepad can therefore be used. Using a normal word processing program is also okay, it has the advantage of a spell and grammar check. And one can also save it as a HTML file, with the ending .htm, but I do not do this, because a lot of unnecessary code it created this way. I prefer to copy the text I create in a word processing program and paste it into Notepad. This way all code is created by me and I understand it and therefore can also change it when I want to.

When I want to use text that exists already on my computer then I do the same, I copy that text and paste it into Notepad.

Often I write directly in Notepad and then load that file in a word processing program and do spell checking and grammar checking. The mistakes I find I correct in Notepad and then save this corrected Notepad file, but I only do the saving after I have closed the file in the word processing program. When closing the file in the word processing program I do not save the file there, but click Don't Save.

When I have created a document in a word processing program then I save that file; but after I have copied the text and pasted it into Notepad I do all following work, like correcting wrong spelling, and all kinds of editing, in Notepad, and I do that by having the Notepad window on the left hand side of the screen and the browser on the right hand side of the screen and after the change in Notepad I save the file and I change over to the browser and there I refresh the display and have a look how it looks like.

 

Home English Contents Miscellaneous

To previous Build a website: 3    To beginning of this webpage    To Maps: 1