|
Obviously, it
would be a huge task to systematically explain each entry as I
have done up to now, but suffice to say, there are various kinds
of tags containing coded instructions that tell the browser (or
whatever program is used to produce the visual representation of
the HTML code) what to put in the web page, where to put it, what
colour to make it etc. Just with regard to colours, all colours of
the rainbow are represented by a six digit system called the
'hexadecimal' system, which we don't need to get into except to
say that each code that looks like '#A1B2C3' represents a
particular colour.
The more oft
used coded instructions found on a web page are:
< font>
- A font tag is the instruction to the browser concerning what
type, size and colour the text in between these tags is to be.
When anything about the font changes, you will see the new
tag containing the new instruction, which may simply be a
colour change. For example:
< font face
="Arial" color="#FFFFFF size=" 4">.
This represents
text written in Arial font, coloured white (#FFFFFF), size 4
(which is 14pt text).
< b>,
< i>, < u> - Text can also have other tags within
the < font> tag, which denote, as these do
respectively, bold type, italic type and underlined type.
When the bold, italic or underlined type is discontinued, there
needs to be a corresponding < /b> or < /i>
etc, to instruct the program to go back to the standard type.
< p>
- is a paragraph break. It can also contain extra information like
where to align the entry (left, right, center or justify). For
example: < p align=" left">
< br>
- is a single line break. It doesn't carry any extra instructions.
< table>
- A table is simply a box. It can be any size, in any position and
have borders or not, which are coloured or plain, dotted or solid
etc. It can have a specific background colour, which is different
from the main page background. It can contain different numbers of
rows or columns or just be a single open box. If the table is
divided into rows or columns, the different sections within the
table are called 'cells' which can all have the border, size and
background options as the table.
< tr>
- Defines a row within a table. It is always contained between a <
table> and < /table> tag.
< td>
- Defines the attributes of any given cell within a table. Again,
it can only be between a < table> and <
/table> tag. For instance: a 'cell' or < td>
tag might look like this:
< td
width="100%" height="64" bgcolor="#FFFFFF"
style="border: 1 solid #BF0000; padding: 2" >
In this
particular code the width indicates 100% (of the table in which it
is contained), the height is represented as 64 pixels - both
percentages or exact pixel measurements can be chosen. The
background colour is, as you can see, #FFFFFF, which is white and
it has a solid border, 1 pixel thick and the border colour is
#BF0000, which is a red/brown colour. You also see another
attribute - padding, which in this case is '2' pixels. This is the
'buffer' zone around the inside edge of the cell so that the
contents of the cell (text, image or whatever) don't sit right up
against the edge of the cell border.
< a>
- is an 'anchor' TAG. It is more often used to create a hyperlink
to another webpage (in the same site) or another website
altogether. The 'hyperlink' anchor will have the tag < a
href>. Hyperlink tags will contain the location the user is
to be taken. For instance, a link to my example website would look
like this:
< a
href="http://www.online-plus.biz"
target="_new">Whatever text is to contain the link<
/a>
You will also
notice a 'target' attribute, which determines whether the
destination of the link opens in a 'new' browser window (in this
case) or it can be designated to open in the same window.
The < a>
tag can also be used to 'link' to another point on the SAME web
page. In this case the tag used will still be the < a
href> tag but the point to which you wish it to go to will
have a < a name> tag. For example:
< a
href="whatever">The text to be the link< /a>
and the point in the page to which it links will have a tag <
a name="whatever" >Word or image at that point linked
to< /a>
< img>
- Is the instruction to insert an image. Of course, the program
needs to know which image to insert so, this tag will contain the
location of the image (using 'src', meaning source), which
will generally be within a folder on the server, which hosts the
website. However, essentially, the address (URL) of ANY image on
any public server can be inserted and that image will appear on
the web page. It is represented like this:
< img
border="0" src="images/logo1.png"
width="195" height="66" >
This instruction
says the image (with the file name 'logo1.png') has no border
("0"), it's source (where it's located is the 'images'
folder within this website). It also has the measurements of the
image in pixels. If an image from another website needed to be
inserted, the full URL of the image would appear. For instance, if
this image was located on another website server, instead of the
'src' being just 'images/logo1.png' (which is a local website
address), it would need to be 'http://www.other-website
.com/images/logo1.png', so the program would know exactly
where to go to retrieve the image.
That's about all
that can be covered in a short (or not so short article) however,
I hope that to those who have either never seen HTML code or those
who have considered it some mysterious secret technical jargon,
will now see it as more friendly and understandable.
In my earlier
days I found such websites as W3Schools
as an invaluable source in the process of understanding what all
the 'gobbledygook' meant. There is also a full list of all the
different HTML tags and their meanings. I'm sure my over 35's
peers (and possibly even younger ones) will too.
** This 'Author's Resource' must be published intact with links
active when copying or publishing this article **
|
