|
|
|
|
HTML - A Website Language Explained - For Over 35?s
|
|
Author: Stephen Brennan
Topic: HTML
Viewed: 65 time(s)
[ Not Rated Yet ]
|
This is a very perfunctory look at the website code HTML, for
those who never did any kind of Computer Studies at school and
have never had the need or opportunity to look ?under the skirt?
of your average website. There's nothing that an experienced
webmaster will find here that's not very basic, but for those
who have just begun to discover the 'website' and especially
those venturing into... maybe starting one of their own, here's
a basic understanding to pique the interest and possibly
kick-start the learning process. If you don't even know what I'm
talking about when I say HTML, as a means to follow what we're
talking about as we go, then just go to this page - Home Based
Business & Affiliate Center and click on the
'View' option at the top of your browser and select
'Source' or 'Page Source' (depending on your browser
type) from the drop-down menu. You will be confronted by a
Notepad document with silly looking symbols, letters and numbers
on it. Well, that is HTML code. It's the coded 'blueprint' for
the web PAGE (not the whole website) that you're looking at.
Keep the Notepad document open to refer to as we discuss each
part. P.S. I have had to add some spaces into the example codes
that wouldn't normally be there, otherwise the example codes
would actually 'work' and influence the way the article looked
in those article websites that accept their article submissions
with html code ability. But you'll get the idea... HTML
is nothing more than a set of instructions for your browser
program (or any program used to read web pages) to interpret and
present the web page in a visual form for you to see. It's made
up of individual symbols, with each either have a meaning in
itself or sometimes a set of them (often many characters long)
representing a simple instruction to place any part of the web
page, say... an image in a certain spot or to perform a
function. Firstly, at the top, you'll see the < html>
tag, which is identifying the language being used. Then you see
a tag. That's comparable to the 'header' on a
letter, where your company name, address and phone number would
go. It's there for the Search Engines, like Google and Yahoo
etc, so they can, at a glance, see what the web page is and what
it's about. Under the < head> tag there are <
meta> tags, each of which contains information about
different aspects of the web page like, the title, a short
description, the program used to create it, copyright
information, keywords that relate to the subject matter on the
web page and other instructions that are meant solely for the
Search Engine robots (spiders, crawlers - they have different
names) when they visit. The < head> section is then
closed off with a < /head>. That's an important part of
the html code. Every tag that contains an instruction needs to
be 'finished' by using the same tag with a '/' in front.
This is telling the program that this particular instruction
type is finished. It's like saying 'over' at the end of a radio
transmission. There are too many different types of
instructional tags to cover in a simple article, but covering a
few of the most common ones will give you the basic idea. Next
is the tag. This is the start of the part of the
web page that will be visible in the browser. In the case of my
webpage example, the tag is long because it
contains some specific instructions, which apply to the entire
web page. They concern the background of the page (in this case
an image is being used for a background that forms the vertical
stripes), the colour of the page text and the different colours
of any 'hyperlinks' on the page (before during and after they
are being clicked by someone). 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: .
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 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.
> - Defines a row within a table. It is always contained
between a < table> and | tag.
- 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 .
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 tag. For
example: < a href="whatever">The text to be the link
> 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 < 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 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.
About the author:
The Latest Edition of Steve Brennan's popular Affiliate tutorial
'The Affiliate Guide
Book' - The Complete Guide To Affiliate SUCCESS is now
available. He operates a number of Affiliate wesbites including
Online
Pharmacy Medications and Diet OnlinePlus.
|
|
