Ok. That is not the worlds most exciting of pages, and if you play with it (feel free) and put more text into the hello world section you will soon notice a problem.
Browsers can't see carriage returns.
Thus
<BODY>
Hello world!
This is my web page.
What do you think?
</BODY>Will appear in the browser as
"Hello world! This is my web page. What do you think?"Which is not what we want.
This is where the Tags come in.
This says to the browser "I want to break the line here."
So. looking at out very basic example...
<BODY>
Hello world!<BR>
This is my web page.<BR>
What do you think?
</BODY>Will appear just as we want it to.
In fact the <BR> tag is falling out of favor now as the following tag allows you to do more interesting things with the look of the text on the page.
This is the Paragraph tag. You will notice from the basic structure man tags come in a turn on-turn off format. The BR tag does not. As it just says put a line break in here.
The Paragraph does. It says this paragraph starts here and ends here. This is really important as you can include extra information in the tag that will be applied to all that text. For example there you want it to appear on the page. The <P> </P> automatically assumes a space at the end..Ok try this one...
<BODY>
<P>Hello world!</P>
<P>This is my web page.<BR>
What do you think?</P>
</BODY>Should look something like
"Hello world!
This is my web page
What do you think?"Ok I mention putting things in that <P> tag. The easiest example is alignments. This tells the browser where you want t put this thing on the page.
Try changing the Hello world <P> for <P align=center>
You should get "
Hello world!
This is my web page
What do you think?"Notice how the stuff in the normal <P> is still against the left margin.
Now try <P align=right> or <P align=left>Good isn't it :)
There is also a <CENTER> </CENTER> which does a similar job in that everything between these tags is aligned in the center of the window. This can be useful if you have a lot of paragraphs or want to center images and tables and clever things like that.
But we are getting ahead of ourselves.
Back to basics.
Ok that is all well and good but it is kind of boring. All you end up with is blocks of texts. How do we make things stand out?
Well the first thing you will probably want are Headings. This is what the <H> tag is concerned with. In HTML there are 6 basic sizes of heading <H1> being the largest <H6> being very small.
People can change the way that these are viewed by their browsers but assuming that have not been totally dumb they will always stand out. Like <P> tags <H> tags are opened and closed.
Also like <P> tags they force a new line at the end.Try this.
<body>
<H1>This is a H1 heading </H1>
<H2>This is a H2 heading </H2>
<H3>This is a H3 heading </H3>
<H4>This is a H4 heading </H4>
<H5>This is a H5 heading </H5>
<H6>This is a H6 heading </H6>
<P>This is a paragraph</P>
</body>Should look like
This is a H1 heading
This is a H2 heading
This is a H3 heading
This is a H4 heading
This is a H5 heading
This is a H6 heading
This is a paragraph
Like the <P> <Hx> tags can use align=xxx to move the Heading round the page.
Have a play with that too.
Ok the heading are all well and good but they have a problem. You can not use then to draw the readers eye to a bit of text in a paragraph because they force a new line. There have been a number of tags throughout the evolution of HMTL that allow you to do this.
<B>Which makes bold text</B>
<I>Which makes italic text</I>
<U>Which underlines text</U> but this can be confusing as many links are underlined.
So much so some browsers have deleted it as an instruction.Which is a good thing really-trust me no one likes to read a blinking page!
<EM>Which emphasise text in a way set by the browser</EM>
<STRONG> Which emphasise text in a different way set by the browser </STRONG>
As the browser decided what these look like if you want a specific look you are better using <B> and <I>The size of the text can be changed <SMALL>make the text small</SMALL>
<BIG>Makes it bigger</BIG>
Both of these have been superceed in later versions of HTML by <FONT SIZE=x> </FONT> but they still work and are probably easier to start with. Confusingly unlike the <H> tag. The smaller the number in the size the smaller the font.
<FONT SIZE=1> size 1 text </FONT> size 1 text
<FONT SIZE=3> size 3 text </FONT> size 3 text
<FONT SIZE=6> size 6 text </FONT> size 6 text
<FONT SIZE=9> size 9 text </FONT> size 9 textThere is also
<SUB>Subscript</SUB> text
<SUP>Superscript</SUP> text
Which are handy for those maths problems.
<strike≷ strike out text </strike>
<tt> Teletext type</tt>Finally there is a <pre></pre> command. Kind of a dinosaur now having replaced by the Table tags. These tags allows preformated text, so it leaves in all the carriage returns and spaces.
Have a play with it. Might be useful for asci art or something.
this is and example of Pre formated text. This is the same text with no <PRE> tags lots of spaces and a carriage re turns in strange places. Armed with these basic effects you can make things surprisingly very good but kind of monochrome.
Adding colour to your lives pages