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 < body> 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:
< 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
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.
The 2005 Edition of Steve Brennan's popular ebook title 'The Affiliate
Guide Book' is available now. He also operates a number of Affiliate
wesbites which include The Diet & Weight Loss Place
MORE RESOURCES:
RELATED ARTICLES
The Seven Deadly Sins of Web Business Design
Before you take a road trip it is usually a good idea to know where you
are going. It is the same when you are building a business, creating a
marketing plan or building your web site.
Ten Fatal Mistakes That Make Web Sites Stink
Since you'll spend lots of time and money to create your web site, don't
you want to make sure you're not making mistakes that at best irritate
users, and at worst make you lose customers?After all, when you alienate
users, you lose potential revenue. Who can afford that?Dr.
Keep It Simple, Stupid: The Beauty of a Clean Cut Website
Don't knock it; "Keep It Simple, Stupid" is a great rule to live by.
Nobody likes a website to "yell" at them, with blaring colors and flashing
lights.
Give Your Web Wite Visitors What They Really Want - Information!
Surfing the internet is basically an information-fest! From intellectual
discussions to the bizarre..
Quality Web Copy is the Key to Success
Many websites make the mistake of being all flash and no substance.
Nothing irritates potential customers more than visiting your website
hoping to find information and instead seeing only blinding color and
flashing borders.
Adding the Right Keywords to Your Website Content
You've made your website, added a great title and keywords in the meta
tags. That's it, right?Not quite.
Get Rid of Your Frames
A few years ago a lot of websites utilized frame technology.A website that
uses this frame technology is apparent when the left hand or top of the
screen stays the same and the inner part changes when links are clicked on.
HTML - A Website Language Explained - For Over 35s
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.
Integrating Advertising into Your Web Design
If you are going to be placing ads on your website, you'll want to put
some thought into how you'll integrate them. Poor integration of ads into
your website will cause visitors to click away fast.
10 Tips for Killer Website Design
Does website design make a difference in how long people will visit your
website or if they'll stay and shop? You bet. You've seen the websites
that scream "bad idea" and you know those folks are losing potential
customers to their ineffective website design.
Wording Up Your Website
Back to basics. Forget funky design, good copywriting is the key to a
clear and intuitive website.
Choose & Use the Best Colors
The Psychology of ColorAre you using the best colors for your web site?
Many web designers often overlook the issues of color in web design. When
choosing colors for your web site there are three main areas that should
be addressed.
Getting Along With Your Web Designer
You're all ready to get started creating your web presence and you've
found a skilled web designer to build your website for you. Do you know
what he needs from you to do an efficient job? Good web design requires
cooperation between the architect and the user to create a product that
will serve its intended function, and you don't have to be an internet
expert to do your part.
Building Web Sites Using Web Templates
Gone are the days when you had to rely on a web-designer to design your
websites. New technologies with innovative ideas have brought out a new
variant to this trend in the form of ready to use website templates.
Looking For A Designer To Re-Design Your Website?
If you were like me and you have just started an online business, you have
a website that you have made or someone has made it for you, and this
design does not match up to your expectations and the competition. Fear
not, there is an inexpensive solution to your problem.
Recipe For A Good Looking Web Site
We've all surfed the web and seen some awful web sites. Sites that never
completely loaded.
Simplify Your Web Site for Clarity and Ease of Use
There are plenty of web sites out there in which basic elements of design
are ignored. The viewer may experience overkill and frustration, instead
of gently receiving the message or information.
Finger Eating Garage Door Reveals Breakthrough Web Design and Linking
Strategy
Last Thursday afternoon I was working on a garage door and regrettably
loosened the torsion spring too much. This spring is what relieves or
neutralizes the weight of the garage door so the openers can work without
burning out and so you don't have to be Arnold Schwarzenegger to open it.
Plugging the Dreaded World Wide Web Black Hole is Just the First Step
You have created your custom error page so now all of that traffic that
use to go into the World Wide Web black hole now stays on your web page.
But if you don't do the following 15 Minute exercise once or twice a month
you are not Maximizing those Lost visitorsCustom error pages are a crucial
part of your web page but they are just not enough.
Create Favorite Icon
Favorite icon appears to the left of your link in either address bar or in
favorites menu of your browser. It gives your website more personality,
better visibility in favorites menu and is easy to create.
--
http://venteinternet.blogspot.com |
http://pusatinternetmarketing.blogspot.com |
http://webandblogdesign.blogspot.com
No comments:
Post a Comment