HTML Link Targets

By default, links will open in the current window or frame.

We need to add a target if we want the link to open in another window or frame than the link itself is placed in.

To do this we simply add a target=" " to the <a href>.

This example will open anybodycanmaster-computer-network.blogspot.com website in a new window:

<a href = "http://anybodycanmaster-computer-network.blogspot.com"
target="_blank">.

Predefined targets are:

_blank loads the page into a new browser window.

_self loads the page into the current window.

_parent loads the page into the frame that is superior to the frame the hyperlink is in.

_top cancels all frames, and loads in full browser window.

In addition to these, we can also enter the name of a frame window if our page is within a frameset.

2:38 AM | Filed Under HTML Links | 1 Comments

Define colors for individual links on the HTML page

The method described as link, vlink, alink is for setting overall link colors for the page.

However, we might want one or more links to have different colors than the rest of the page.

There are two methods for doing this:

Placing font tags between the <a href> and the </a> tag. This method will work on all browsers except Microsoft Internet Explorer 3 (MSIE 3).

Using a style setting in the <a> tag. This method works on MSIE 3 and newer browsers.

The first technique would look like this:

Click <a href = "http://anybodycanmaster-computer-network.blogspot.com"> here</a> to go to this website.

Note:
If is important that both and the tags are between the <a href> and </a> tags.

The second technique would like this:

Click <a href = "http://anybodycanmaster-computer-network.blogspot.com"
style="color : rgb(0,255,0)"> here</a> to go to this website.

Note:

The RBG numbers indicates amounts of red , green and blue using values between 0 and 255.

Now, since neither of the two methods covers all browsers, we need to use both techniques at once.

This example works on all browsers:

Click <a href = "http://anybodycanmaster-computer-network.blogspot.com"
style="color : rgb(0,255,0)"><font color ="FF00CC"> here</a> to go to this website.

The last example is interesting. Not only because it will work on all the browsers. But even more because it shows a general to make the pages browser safe. Since browsers simply leave out information that is not understood, we can work around browser differences by simply adding different settings for multiple browsers.

1:46 AM | Filed Under HTML Links | 0 Comments

Colors on Text Links in HTML

There are few settings that can be useful for controlling the colors of text links.

This page will teach us how to:

Define colors for all links on the page.
Define colors for individual links on the page.

Define colors for all links on the page

The general color of text links is specified in the <body> tag, like in the example below:

Link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).

vLink - visited link - to a page the visitor has been to before. (standard color is purple - #800080)

aLink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

1:26 AM | Filed Under HTML Links | 0 Comments

How to make a Link in HTML

The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a> tag using the href = "http://www.anybodycanmaster-computer-network.blogspot.com/" setting.

There example below shows how to make the word here work as a link to yahoo.

Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

We simply:

Specify the target in the <a href = " ">.

Then add the text that should work as a link.

Finally add an </a> tag to indicate where the link ends.

1:12 AM | Filed Under HTML Links | 0 Comments

HTML Links

Links are the most fundamental part of the world wide web. It is the links that tie it all together.

There are three different kinds of links we can have on our website:

Links to anchors on the current page (Internal Links).
Links to other pages within the current site (Local Links).
Links to pages outside the current site (Global Links).

It is possible to make texts and images work as links. With a little creativity other object, such as push buttons or even drop-down menus can work as links as well. This section will cover the usual links: Text and Images.

11:18 AM | Filed Under HTML Links | 0 Comments

Wrap Text Around Images in HTML

In addition to the vertical alignments, images can also be aligned horizontally. To do this, add align ="left" or align = "right" or align = "center" to the <img> tag.

align = "left"

align = "right"

align = "center"

Another way to obtain the same effect would be to enter the image and text in an invisible table. Entering text in one column and the image in another would create a similar effect.

2:45 AM | Filed Under HTML Images | 0 Comments

Alignment of Images in HTML

We can align images according to the text around it, using the following alignments:

Default aligns the image using default settings of the Web browser. Same as baseline.

Left aligns the image in the left margin and wraps the text that follows the image.

Right aligns the image in the right margin and wraps the text that precedes the image.

Top aligns the top of the image with the surrounding text.

TextTop aligns the top of the image with the top of the tallest text in the line.

Middle aligns the middle of the image with the surrounding text.

Absmiddle aligns the image with the middle of the current line.

Baseline aligns the image with the baseline of the current line.

Bottom aligns the bottom of the image with the surrounding text.

Absbottom aligns the image with the bottom of the current line.

Center aligns the center of the image with the surrounding text.

Below we can see examples of the different vertical alignments we can make for an image.

2:29 AM | Filed Under HTML Images | 0 Comments

Spacing Around Images in HTML

We can easily add space over and under our images with the Vspace attribute. In a similar way we can add space to the left and right of the image using the Hspace attribute. Below is an example using these attributes:

<img src="rainbow.gif" Hspace = "30"> Vspace = "10"

As we see these settings allow us to add spacing around our image. Unfortunately they also force us to add the same spacing to each side of the image (over and under - or left and right). The workaround for this, if we only want spacing on one side of the image is to use a 1 x 1 pixel transparent gif image. If, for example, we wanted a 10 pixel spacing to the left of our image we could use the transparent image (pixel.gif) this way:

The 1 x 1 pixel transparent gif image is simply stretched to whatever size we want the spacing to have. This 1 x 1 pixel "cowboy-trick" is probably one of the most widely used workarounds on the entire net. The reasons are obvious: It works on all browsers and it gives us complete pixel precision in our design!

1:43 AM | Filed Under HTML Images | 0 Comments

Add ALTERNATIVE texts to our Images in HTML

We can add an alternative text to an image using the ALT setting shown in the example below:

We should always add alternative texts to our images, so the users can get an idea of what the image is about before it is loaded. This becomes particularly important if the image is a link. Few things are as annoying as knowing that we want to leave the current page - and at the same time being forced to wait for an image to load before being able to do so. It is extremely temping to use the browser's straightforward options to leave the entire site instead.

6:36 AM | Filed Under HTML Images | 0 Comments

Border around the images in HTML

We can add a border to the image using the border setting shown in the example below:

Note:
Netscape browsers will only show the border if the image is a link.

Adding a border to our image might help the visitor recognize that the image is a link. However, the net is filled with images that work as links and have no borders indicating it - so the average visitor is used to letting the mouse run over images to see if they are links.

Still - If we have an image that is often mistaken we might consider adding a border to it - although we should probably consider changing the image entirely - since if it does not indicate by itself that it is a link then it isn't serving it's purpose.

6:24 AM | Filed Under HTML Images | 0 Comments

Resizing Images in HTML

Resizing

We can change the size of an image using the width and height attributes. In general, it is not advisable to reduce image size using these settings, since the image will transferred over the Internet in its original size no matter what reduction is set for it. This will slow the loading of our web page. This means, that if we have an image that is bigger in size than we want it to be on our page, we should reduce the size in a graphics program, rather than reducing the size on the web page using the width and height attributes.

On the contrary, sometimes, it cab be wise to enlarge images using this technique.

Below are two setting of images using width and height attributes:

If we leave out the settings for width and height, the browser will automatically use the real size of the image. However, we should always enter the settings for width and height, even when using the real size!

The reason is that if the settings are left out, the browser can not build the page until the image is loaded entirely. This means, that the visitor cannot read text around the image while the image itself is loading - which in turn will give the visitor an impression of a slow loading page. This becomes especially true if the image is inside a table. In that case, the whole table will not be shown until the image is loaded entirely.

4:35 AM | Filed Under HTML Images | 0 Comments

Inserting Images in HTML

The tag used to insert an image is called .

Here is the HTML code used to insert the image on the web page:

By using above tag we will see the image called "rainbow.gif" in our web page.

If the image is stored in the same folder as the HTML page, we can leave out the domain reference http://www.anybodycanmaster-computer-network.blogspot.com/

and simply insert the image with this code:

4:08 AM | Filed Under HTML Images | 0 Comments

GIF and JPG Images

HTML Images - GIF and JPG Images

Computers store images in several different ways. Some storage methods focus on compressing the size of the image as much as possible. A major problem with using images on websites is that images take much longer to load than text.

To reduce download times as much as possible two of the best image compressing formats used on the web are:

Comparison between GIF and JPG Images
GIF	JPG
256 Colors	Unlimited Colors
Can handle transparent areas	Cannot handle transparent areas
This format is not good at compressing photographs	Excellent for compressing photographs and complex images
In general, it is excellent for banners, buttons and clipart	In general, it is not good for banners, buttons and clipart.

This means that:

Banners, buttons, dividers, clipart and other simple images usually work best as GIF's.
Photographs and other complex images usually work best as JPG's.

If we want to use an image that is in format other than JPG or GIF, we will need to load the image into a graphics program and save it as either JPG or GIF.

1:38 AM | Filed Under HTML Images | 0 Comments

Multimedia - HTML Images

HTML Images - Multimedia HTML Images

This section will show how to add images to web pages. We will start out with a presentation of the two main image type on web pages : jpg and gif. Then let us proceed with various ways to insert and customize images, with a special focus on the different alignments we can choose.

1:17 AM | Filed Under HTML Images | 0 Comments

HTML Numbered Lists

HTML Lists - HTML Numbered Lists

This page shows how to make different kinds of numbered lists.

The following number options are:

Plain / Normal Numbers
Capital Letters
Small Letters
Capital Roman Numbers
Small Roman Numbers

In addtion to these options we can specify at which number the list should start. The default start value for numbered lists is at number one (or the letter A).

Look at these examples to see the detailed syntax.

HTML Numbered List Syntax Table
HTML - Code	Explanation / Example
<ol type = "1">	Starts a numbered list, using plain / normal numbers. This is one line This is another line And this is the final line
<ol type = "A">	Starts a numbered list, using capital letters This is one line This is another line And this is the final line
<ol type = "a">	Starts a numbered list, using small letters This is one line This is another line And this is the final line
<ol type = "I">	Starts a numbered list, using capital roman numbers This is one line This is another line And this is the final line
<ol type="I" start="7">	An example of how type and start can be combined This is one line This is another line And this is the final line
<ol type = "i">	Starts a numbered list, using small roman numbers This is one line This is another line And this is the final line

11:26 AM | Filed Under HTML Lists | 0 Comments

HTML Bulleted Lists

HTML Lists - HTML Bulleted Lists

This page shows how to make different kinds of bulleted lists.

The following bullet options are:

Disc
Circle
Square

Look at these examples to see the detailed syntax:

HTML Bulleted Lists Syntax
HTML - Code	Explanation / Example
<ul type="disc">	Starts a bulleted list using disc as bullets: This is one line This is another line And this is the final line
<ul type = "circle">	Starts a bulleted list using squares as bullets: This is one line This is another line And this is the final line
<ul type = "square">	Starts a bulleted list using squares as bullets: This is one line This is another line And this is the final line

12:54 PM | Filed Under HTML Lists | 0 Comments

HTML Lists

To create a bulleted list we need to add a <ul> and a </ul> tag at the beginning and the end of the list. Numbered lists have <ol> tags instead of <ul> tags. To separate single list items use <li> and </li> tags. There are special settings that we can use to customize the lists on our page.

12:38 PM | Filed Under HTML Lists | 0 Comments

HTML Text Layout

HTML Text - HTML Text Layout

HTML Text Layout
<p>Text Paragraph</p>	Adds a paragraph break after the text. (2 linebreaks)
<p align="left">Left justify Text</p>	Left justify text in paragraph.
<p align="center">Center justify Text</p>	Center justify text in paragraph.
<p align="right">Right justify Text</p>	Right justify text in paragraph.
line breaks<br>	Adds single line break where the tag is.
<nobr>no breaks</nobr>	Turns off automatic linebreaks - even if text is wider than the window.
text<wbr>	Allows the browser to insert a linebreak at exactly this point -even if the text is within <nobr> tags.
<center>center text</center>	Center Text
<div align="center">center text</div>	Center Text
<div align="left">left justify text</div>	Left justify Text
<div align="right">right justify text</div>	Right justify Text

Note in particular the difference between the and the <div>tags. The <div>tag allows us to justify content without being forced to add a double linebreak. Also, note that these alignment tags are not limited to text. They work on text, images applets or whatever it is that we insert on the page.

7:22 AM | Filed Under HTML Text | 0 Comments

HTML Text Size

HTML Text - HTML Text Size

These are the tags for changing the font size.

HTML Text Size
<big>HTML Text</big>	Increase the size by one
<small>HTML Text<small>	Decrease the size by one
<h1> HTML Header </h1>	Writes text in bigger heading
<h6>HTML Header</h6>	Writes text in smallest heading
<font >HTML Font Size</font>	Writes text in smallest font size. (8 pt)
<font size="7> HTML Font Size </font>"	Writes text in biggest font size. (36 pt)

Note:
If none of the above sizes fit, we will need to save the text as an image, and then insert the image on the page.

7:04 AM | Filed Under HTML Text | 0 Comments

HTML Text Formatting Tags

HTML Text - HTML Text Formatting Tags

These are the tags for text formats:

HTML Text Formatting Tags
<b>boldtext</b>	Writes text as bold
<i>italic text<i>	Writes text in italic
<u>underline text</u>	Writes underlined text
<sub>_{subscript text}</sub>	Lowers text and makes it smaller (subscript)
<sup>^{superscript text}</sup>	Lifts text and makes it smaller (superscript)
<blink>blinking text</blink>	Guess yourself! (Note: Netscape only).
<strike>~~strike through text~~</strike>	Strikes a line through the text
<tt>`typewriter text`</tt>	Writes text as on a classic typewriter
<pre>`exact text`</pre>	Writes text exactly as it is, including spaces.
<em>italic text</em>	Usually makes text italic
<strong>strong/bold text</strong>	Usually makes text bold

Note:
The <blink> tag is only supported by Netscape browsers, and should be avoided.

6:19 AM | Filed Under HTML Text | 0 Comments

HTML Text Links

HTML Text - HTML Text Links

The tags used to produce links are the <a> and </a>. The <a> anchor tag tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a> tag using the href="http://www.anybodycanmaster-hmtl.blogspot.com" setting.

The example below shows how to make the word here work as a link to yahoo.

<a href="http://www.yahoo.com">Click here</a> to go to yahoo

The output will look like :

Click here to go to yahoo

We simply:

Specify the target in the

Then add the text that should work as a link.

Finally add an tag to indicate where the link ends.

5:22 AM | Filed Under HTML Text | 0 Comments

HTML Font

HTML Text - HTML Font

HTML: The code to produce the example shown below.

<html>
<head>
<title>Free Online HTML Tutorials</title>
</head>
<body>
<basefont color="green" face="arial" size="4">
Free Online HTML Tutorials.

Anybody can master in HTML.
This local text looks different.

This text looks like the first line
</basefont>
</body>
</html>

Example: How the output looks in the browser.

Free Online HTML Tutorials

Free Online HTML Tutorials.

Anybody can master in HTML.
This local text looks different.

This text looks like the first line

The color attribute selects the desired color for the text. The face attribute selects the desired font.

4:18 AM | Filed Under HTML Text | 0 Comments

HTML Base Font

HTML Text - HTML Base Font

To specify the overall font for the page add the tag at the begining of the section.

HTML : The code to produce the example shown below:

<html>
<head>
<title>My Page</title>
</head>
<body>
<basefont style="font-family:arial, verdana, courier;color:green;">
Hello! this is my page. 
All text looks the same 
Since I only specified a basefont. 
</body>
</html>

Example: The page as it looks in the browser.

Hello! this is my page.
All text looks the same
Since I only specified a basefont.

The color attributes selects the desired color for the text. The face attribute selects the desired font.

Note:
If we enter a list of fonts, like in the above example, the browser will use the font in the list available on the visitor's computer.

The size attribute specifies the desired size, between 1 (smallest) and 7 (biggest).

3:45 AM | Filed Under HTML Text | 0 Comments

HTML Text

HTML Text - Enter text on web pages

To enter text on web pages - all we have to do is simply enter the text. If we do not specify any attributes for text it will use the default size, font etc. of the visitor's browser. Browsers can only show fonts available on the visitor's PC. There fore we are limited to using the fonts that are available on almost any computer.

If we need to use a fancy font, we should use web graphics program to make an image with the text. This will assure that the visitor will see it - even if he does not have the fancy font we're using. Since images take up much more space than plain text, thus increasing download time, we should use this option with care.

2:43 AM | Filed Under HTML Text | 0 Comments

HTML Body Section

HTML Basics - HTML Body Section

The body of the document contains all that can be seen when the user loads the page. For example Text, Links, Images, Backgrounds, Tables, Frames, Forms, Metatags and Colors.

6:31 AM | Filed Under HTML Introduction | 0 Comments

HTML Head Section

HTML Basics - HTML Head Section

The head section of the webpage includes all the stuffs that does not allow directly on the resulting page. The and tags encapsulate the title of the page. The title is what shown in the top of the browser window when the page is loaded.

Quite often the head section contains Javascript, which is a programming language for more complex HTML pages. Finally, more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the information of major websites.

6:15 AM | Filed Under HTML Introduction | 0 Comments

HTML Page Structure

HTML Basics - HTML Page Structure

All normal web pages consist of a and a tag.

The most basic code - The code we will use for any page we make, is shown below:

The head tag is used for text and tags that do not show directly on the page.

The body tag is used for text and tags that are shown directly on the page.

Finally, all webpages have an tag at the beginning and the end, telling that browser where the document starts and where it stops.

Head

Body

5:22 AM | Filed Under HTML Introduction | 0 Comments

HTML Tags

HTML Basics - HTML Tags

Basically a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to put a markup in front of the "A". Such a markcup is called a Tag.

All HTML tags are enclosed in < and > (angle brackets).

Example: The HTML code for displaying text in bold is shown below:

This is an example of bold text.

a piece of text as it appears on the screem.

This is an example of bold text.

As it is shown, the start tag indicates that whatever followss should be written in bold. The corresponding end tag indicates that the browser should stop writing text in bold.

4:52 AM | Filed Under HTML Introduction | 0 Comments

Why Learn HTML

HTML Basics - Why Learn HTML?

It is possible to create web pages without knowing anything about the HTML source behind the page. It is strongly recommended that we understand certain tags before designing.

The most important benefits are:

We can read the code of other people's pages, and "borrow" the cool effects.
We can do the work ourself, when the editor simply refuses to create the effects we want.

One can write HTML with almost any available text editor, including notepad that comes as a standard program with Windows. All we need to do is type in the code, then save the document, making sure to put in .html extension or an .htm extension to the file (for instance "mypage.html").

4:19 AM | Filed Under HTML Introduction | 0 Comments

HTML Introduction

HTML Introduction

Webpages are written in HTML. HTML is stands for Hyper Text Markup Language.

Hypertext is simplay a piece of text that works as a link.
Markup Language is a way of writing information within documents.

Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the information, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor.

A more popular choice is to use a special HTML editor - may be even one that puts focus on the visual result rather than the codes - a so -called WYSIWYG editor ("What you see is what you get"). Some of the most popular HTML editors, such as Front Page or Dreamweaver will allow to create pages more or less as we write documents in Word.

2:22 AM | Filed Under HTML Introduction | 0 Comments

Free Online HTML Tutorials

Sponsored Links

Archive