HTML Tutorial 02 – code made simple

1. You can produce web pages using a simple word processor such as Windows NotePad or WordPad. The files you produce should be saved with an .htm extension.

2. The files can contain text, colour, and pictures [even sounds] – but they also contains HTML code.

3. HyperText Markup Language (HTML) uses ‘tags’ to send instructions to a web browser that will ‘read’ the web page. The browser then arranges the appearance of the text on screen.

4. The tags are a code which is placed between angled brackets – <H1> Here is a level one Heading </H1>.

5. Note that the tags are placed around any text you wish to affect. They commonly begin with one tag <H1>, and then they are switched off with another, </H1>, which contains an olbique stroke.

6. <H1>Heading</H1> – shows headings raging from big and bold at size 1 – to 6 – which is quite small.

7. You can also change the size of text on the page from 1 to 6 by enclosing the text between FONT SIZE tags

<FONT SIZE=”4″>produce text size four</FONT>

8. Notice that in this case the numbers 1 to 6 range from small to large.

9. Browsers show text at SIZE=”3″ unless told to do otherwise.

10. You can also change the colour of the text on the page – but note that the tag requires the US spelling of COLOR.

11. The text between the tags will appear in colour:

<FONT COLOR=”RED”>some text in red</FONT>

12. The <P> tag inserts a double space to start a new paragraph.

<P>
Here is the text of one paragraph, which is shown to illustrate the use of the paragraph tag.
</P>
<P>
And this is the start of the following paragraph, which as you can see has been separated from the first with a space.
</P>

13. The <BR> tag forces text to start on the next line down.

Here is a short statement.<BR>
The tag has been used to force the next sentence to begin on a new line.

14. The <HR SIZE=1> tag inserts a Horizontal Rule. The size of the line goes from 1 (most narrow) upwards, with 3 as the default.

15. There are two types of list – ordered and unordered. These are created by using the tags <OL> and <UL>. The first automatically numbers the points in the list, the second creates bulleted points.

16. The items in the list are created by using the <LI> tag. Notice that each point is automatically indented.

17. This is an example of coding for an ordered list:

<OL>

<LI>List item number one</LI>

<LI>List item number two</LI>

<LI>List item number three</LI>

</OL>

This will be show on the screen as follows:

  1. List item number one
  2. List item number two
  3. List item number three

18. This is the coding for an unordered list:

<UL>

<LI>List item number one</LI>

<LI>List item number two</LI>

</UL>

This will be shown on the screen as follows:

  • List item number one
  • List item number two

19. Emphasis is added to text using the BOLD and ITALIC tags, which are shown as <B></B> and <I></I> respectively.

20. Here is some text which is shown in bold and then in italics.

21. You can combine tags – by making text both bold and italic for instance. Here is bold italics.

22. The tags must be correctly nested. That is, they must be added and removed in the correct sequence (or syntax).

<B><I>bold italics</I></B>

23. You can also insert an extra space by using the non-breaking space tag – &nbsp; (which does not come in angled brackets).

no spaces abcdefgh
extra spaces a   b   c   d   e   f   g   h

24. That’s a quick run through some commonly used tags. Here are some general tips on writing the code.

General points

  • You can type tags in upper case <FONT SIZE=4> or lower case <font size=4>.
  • Do not miss out any angled brackets <these> or quote marks “these” – or the code will not work.
  • Do not insert any spaces, as in <FONT C OLOR=RED> or the code will not work.
  • You can combine tags, but they must be correctly nested, as in <B><I>EXAMPLE</I></B>.

NB! This is an extremely simplified account of HTML coding. The appearance of most web pages these days is controlled by style sheets. But the principles shown here are still working underneath.

© Roy Johnson 2002

previousnext

 


  • Study Skills 2.0 (html)Study Skills 2.0

    Study Skills covers every aspect of study skills – reading, writing, research, revision, exams, and even presentations. Learn how to absorb information quickly. Study effectively by using good time management skills. How to digest books and summarise their contents. Suitable for all students in further and higher education. Runs in any Web browser. Latest version […]

    Order Study Skills 2.0 Study Skills 2.0 @ £4.95

Buy from Amazon US     Buy from Amazon UK

You can leave a response, or trackback from your own site.

If you found this article interesting you might want to Tell-A-Friend.

Tell A Friend
  1. (required)
  2. (valid email required)
  3. (required)
  4. (valid email required)
 

cforms contact form by delicious:days

Leave a Reply

 
 
 
 
 
 
css.php

Powered by eShop v.6