HTML Attributes
After reading my last article (if you haven’t you should) you are able to write a very basic web page. Now when I say basic I mean BASIC, all you can do at this stage is put a title on your page and insert text in the body of the page. OK, then let’s get on with the show! This article covers new lines and paragraphs, discusses html’s rendering of white space, teaches you about attributes and covers some basic formatting. HTML Attributes New line If you want to go on to the next line in a word processor you simply press [enter]. However, if you type the following into a html document:
<html>
<body>
Here is some writing.
Now it is on a new line.
</body>
</html>
Wrong! This is what will appear on the web page: Here is some writing. Now it is on a new line. If you want to start more text on a new line you should write:
<html>
<body>
Here is some writing. <br>
Now it is on a new line.
</body>
</html>
Standalone You will notice that the <br> tag does not have a corresponding </br> tag. That is because it is a standalone tag. It is the first standalone tag you have come across, but it will not be the last. Paragraphs On the Internet paragraphs are presented with a blank line in between them. I personally believe that paragraphs look better and are easier to read when the first line of the new paragraph is indented. I will show you how to do both. Blank line First of all, the Internet blank line way:
<html>
<body>
<p>Here is my first paragraph……….</p>
<p>Here is my next paragraph………….</p>
</body>
</html>
This can also be written as:
<html>
<body>
Here is my first paragraph…….<p>
Here is my second paragraph…….
</body>
</html>
Both of the above are presented the same in the browser but each uses a different approach. In the first example you are treating the <p> tag as a container tag, and enclosing each paragraph in a container. In the second example you are treating the <p> tag as a standalone tag that is inserted in the text when you want to start a new paragraph. The first example is the way that the tag is designed to be used but the second example works just the same. It’s up to you which one you adopt. Indenting There is also the other way that I mentioned but before I show you this way I should demonstrate something else. Single Spacing Read this:
<html>
<body>
thisis

some text

separated with loads of white

space
</body>
</html>
This displays as: this is some text some text separated with loads of white space This demonstrates an important feature of html. No matter how many spaces and blank lines you put between words in your html source code, when opened in a browser there will be only one space between words. With this in mind, indenting text in a new paragraph becomes tricky but there is a workaround, if you type &nbsp; into your source code a space will be added. It then follows if you type &nbsp; 3 times, 3 spaces will appear and this is usually a sufficient indent to have at the start of your paragraphs. Now….. So to start a paragraph with an indent you use code similar to the following:
<html>
<body>
This is the first paragraph, I think I’ll start a new paragraph.
<br>&nbsp; &nbsp; &nbsp;
I just started a new paragraph and indented it too!
</body>
</html>
Bold, Italic & underline To make text bold you use the <b> tag, this tag is a container meaning that it requires and end tag, </b>. To make text italic you use the <i> tag and mark the end of the italicised text with </i>. To underline text you use <u> and </u> but it is not recommended that you underline text on the Internet because people will think it is a link and will quite often try and click it. Attributes I think it is now time I should explain attributes to you. Attributes are use to personalise a tag and are enclosed between the ‘<’ and ‘>’ after the tag name. The general form is: <tagname attribute=”setting”> For example: <body text=”black”> body is the tag name text is the attribute you are setting black is the setting you give this attribute A tag can contain more than one attribute: <tagname att1=”setting1” att2=”setting2”> For example: <body text=”black” link=”red”> Not all tags have attributes but most do. Next time I will discuss the <font> tag and cover the <body> tag in more detail.