short HyperText Markup Language (HTML) tutorial

This tutorial is intended for people who have little, or no knowledge of HTML language. The goal is only to give the reader a simple idea about what this language means, the implications in building a web page, or codes from MySpace, Xanga, Blogger or other well known sites.

HTML TUTORIAL
Codes, tags and colors to customize Web layout and optimize ads and search engine traffic.

HTML stands for the HyperText Markup Language. HTML code is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML code. With HTML code and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML code files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.

Whether it's customizing a MySpace layout, or adding AdSense to a blog, HTML is the language of the web that enables us to build our online presence. With the popularity of open access web publishing tools such as MySpace, Blogger, and various WordPress hosts, it has become necessary to learn a little HTML in order to make a blog stand out from the crowd. Even simple MySpace HTML code samples can look daunting if the reader is not familiar with the HTML language.
To give a little HTML help, this HTML tutorial concentrates on understanding a core set of concepts and tags. It will not provide a complete description of all HTML codes in existence, but is designed to allow the reader an insight into HTML Programming that will help them customize HTML templates to give a different look and feel to their MySpace profile, or Blogspot blog.

The HTML Document
An HTML document can be seen as a descriptive container. It provides three levels of description - the overall document type, some information about the contents, and the contents itself. A simple HTML skeleton might look like:
If this is cut and pasted into a document with an .HTML extension, and opened in a web browser, the page will be blank. Nonetheless it is a perfectly valid HTML container and illustrates the simplest example possible.
The reader will note that special instructions to the web browser are enclosed in . These are known as tags, and the HTML, HEAD and BODY tags provide structure to the HTML container.
In the HTML HEAD section, we will usually find the TITLE tag, which gives the title that appears in the web browsers' title bar. We might also have some scripting and style information too, as well as the so-called META tags. While these are all useful to know about, most customizations can be done without understanding them, and so the reader can skip to the BODY of the HTML container.

Basic HTML Tag Set
The BODY of the HTML code is where we place the actual document. The layout of the text, is dictated by more HTML tags. The simplest tags control the appearance of text in a very simple manner:

Bold text

Italicized Text

Underlined Text

These can, of course, be combined. We can also change the font using the HTML FONT tag.
If we wish to link to another document, which is common in adding affiliate links (for example) to Blogs or MySpace profiles, we use the A HREF HTML tag:
Link text
Should we wish to insert an image, we can use the HTML IMG tag as follows:

<img src='images/image.jpg'>

Usually, we should add some attributes to tell the browser what size the image is, and provide text so that text only browsers have something logical to display. It is important to provide the dimensions for another reason : the browser might take some time to download the image, and having the dimensions to hand will allow it to lay out the page whilst waiting for the actual images to be displayed.
Note also that this tag has no closing tag, and so we need to include the '/' character at the end of the tag. This is good practice, but not yet required by the HTML standard.

HTML Color Code
When customizing a template, one of the first things that usually needs to be customized is the color scheme. HTML has two color schemes to choose from. The first is a list of names such as Black, White, Magenta, Aqua, Yellow, and so on, whilst the second is a slightly peculiar looking number. Red, for example can be represented as #FF0000.
We can use the color code to change the color of almost any piece of HTML - text, borders, backgrounds and so on, but not pre-rendered elements such as images. So, to change the text color to red, we might use:

Red Text

Or, we could use the color code for red:

Red Text

It is worth pointing out at this point that the color code consists of three numbers, the red, green and blue components of the desired color. The number can range (in hexadecimal) from 00 to FF, and FF represents the full intensity of that color.
So, red is #FF0000, green is #00FF00 and blue is #0000FF. White (all three at full intensity) is #FFFFFF and black (all three off) is #000000. Grey would be somewhere in between, either #404040 or #808080 depending on taste.

Basic HTML tags
Worth to know that most of the HTML tags are in pair like <TAG> , </TAG> ; still there are a few singleton tags like <HR> , , etc.
Some tags have attributes, for each attribute there is some value defined like <TAG attribute1=value1, attribute2=value2, ...>
Here are the most likely HTML tags you will need to know at your MySpace profile:
 - emphasis text

 - strong text

 - bold text

 - italic text

 - underline text

 - here new text paragraph starts a new paragraph section inserting an empty line as paragraph separator
 -......- the effect of this tag takes over the text inside, the meaning of attributes:

SIZE=n defines the dimension of the characters, where n is between 1 and 7

COLOR=x is the color of the text and can be defined in hexadecimal format #RRGGBB where RR-red (values 0-FF), GG-green (values 0-FF), BB-blue (values 0-FF); #000000 is code for black, and #ffffff is code for white; #ff0000 is code for red, and logically #0000ff is the code for blue; Worth noting that value for this attribute can be write down in human readable language like red, blue, black, yellow etc.

<CENTER> - </CENTER> horizontally center text and images

<IMG SRC='image address' WIDTH=x HEIGHT=y> - include an image in web page

<A HREF='web address'> human readable web address </A> anchor hipertext link reference, it is the way that different web documents are connected, and by clicking on it, the surfer is transferred to a new web document. Transferring can be done internally, in the same document, locally to a document on the same server or externally to a document on other server. 'web_address' can be the name of a local document, an internal anchor, or a external URL document address.

<TABLE> - </TABLE> define a table object

<TR> - </TR> table row object

<TD> - </TD> table cell object

Important. The appearance of these objects (color, border, thickness of border, cell margins and paddings, etc. ca be defined via CASCADE STYLE SHEETS or CSS STYLE definitions, which is a different language, but works in conjunction with HTML. Every HTML TAG can have a special attribute called STYLE, attribute that has as value a CSS definition for appearance of that tag object.
Also, CSS definition for various tags can be defined at the beginning of HTML document or in a separat file (with extension .css) asociated with HTML document.
The most important thing with these CSS definitions is that they could be dynamically redefined, so certain CSS definitions inserted in your profile can overwrite the old ones (provided by MySpace site) , and so everybody can arrange the aspect of his page by inserting the proper CSS definitions where this is permitted, that is in About Me or whatever section from your profile.
More informations about CSS language you can found in this short CSS tutorial Another important tag you will see in MySpace codes is <EMBED ...lots of parameters... ></EMBED> this is the mechanism used to insert in your page videos, flash animations, players and other objects. In general you should insert the provided code without any modification, altering it could result in mal-functioning of that object.

The HTML Editor
Finally, it is worth noting that HTML is designed to be edited by a simple text editor. However, many good Open Source solutions exist for editing plain HTML; a simple web search will yield a goodly list.
Things to look for are:

Syntax hi-lighting

Automatic tag generation

Built-in FTP (for file upload)

For those who want to go one step further, we explore the world of HTML STYLE in a later tutorial. For now though, this should be enough to get started editing the HTML code in your MySpace profile, adding AdSense to your blog, or just creating a site using pure HTML code.

go home Contact tables graphics Profile videos Extended network graphics Animated icons

back

webmaster Layouts4Myspace