JSP, Tomcat, JDBC, Projects, Example, Program » HTML

HTML – Anchor Tag

admin — Sun, 22 Nov 2009 11:59:23 +0000

The example of anchor tag in Web page

<a href="http://www.easywayserver.com/">http://www.easywayserver.com/a>

The Example of anchor tag in HTML

JavaScript Form Validation

Include File in HTML

Confirm Javascript

Anchor tag is used to transfer control from current page to another page. Anchor tag opens another webpage or another file PDF, Doc, Excel or any HTML page in same window or new window.

Anchor tag use href attribute to find URL of another page where it has to visit. It is also called hyperlink Href attribute help to create a hyperlink with another page.

Anchor tag is used for creating bookmarking with name attribute which is followed by #. This bookmarking works within the same page and no extra webpage is called in bookmark. If we want to give path of another page we need to use href attribute. This href solve all problems to send us to one page to another destination page.

Anchor tag is supported by all web browsers. This browser can be firefox, Internet explorer, mozilla, netscape, opera, and google chrome.

By default, color of hyperlink is dark blue and is shown with underline.
If link is visited by someone, color of link will be changed to purple.
If link is active, color of link will be changed o red or orange.

These color is slightly change by browser to browser.

Anchor tag of html is defined by all standard HTML DTD versions. But some attribute is not available in DTD version. It is explained in below section.

Attribute of Anchor Tag

Attribute	Value	Explaination
charset	char_encoding (iso-8859-1,utf-8)	character encoding of linked
type	content types	MIME Content Type
name	Property_name	Name of anchor tag link
href	URL	URL path for linked web page
hreflang	language_code	Language Code of the linked page
target	_blank _parent _self _top	Linked page open in window
rel	LinkTypes	relationship between the current document and the linked document
rev	LinkTypes	relationship between the linked document and the current document
accesskey	Character	accessibility key character (Shortcut key character)
shape	Shape	for use with client-side image maps
coords	coordinates	Define coordinates of the link
tabindex	NUMBER	position in tabbing order

Common Attribute of Anchor Tag

Attribute	Value	Explaination
id	ID	unique id document for link element
class	classname	list of CSS classes
style	StyleSheet	associated style information of style tags
title	Text	information about an element shown on mouse over cursor
lang	LanguageCode	Language Code of the element
dir	(ltr\|rtl)	direction for weak/neutral text

Events Attribute of Anchor Tag

Attribute	Value	Explaination
onfocus	event	Event Fire on element got the focus
onblur	event	Event Fire on element lost the focus
onclick	event	Event Fire on mouse button was clicked
ondblclick	event	Event Fire on a mouse button was double clicked
onmousedown	event	Event Fire on a mouse button was pressed down
onmouseup	event	Event Fire on a mouse button was released
onmouseover	event	Event Fire on a mouse was moved onto
onmousemove	event	Event Fire on a mouse was moved within
onmouseout	event	Event Fire on a mouse was moved away
onkeypress	event	Event Fire on a key was pressed and released
onkeydown	event	Event Fire on a key was pressed down
onkeyup	event	Event Fire on a key was released

Convert Photoshop PSD into HTML

admin — Sun, 18 Oct 2009 07:30:50 +0000

Photoshop PSD image can be easily converted into HTML web page through photoshop itself. If you are graphic designer and don’t have good knowledge about HTML programming. You can make web page from photoshop just in 3 clicks.

Open PSD file in photoshop

1. Go to File menu > Save for Web

2. Press Save button

3. Save file at your distination

4. Check in Browser (Firefox and Internet Explorer)

More than one form in HTML page

admin — Tue, 14 Apr 2009 08:54:05 +0000

In HTML page, we can use more than one form. Sometimes it is useful to add more forms in webpage.

Suppose we have a home page. In home page, we have two options, either user can register as new member or login to application.

This condition is more useful for using more than one form in html page.

This keeps form property separate from other form which is defined. We can use same text field name in both forms and on submit we will get only one related form text field value.

In javascript, we can access form property with form name or array of form e.g. form[0], form[1].

See the example

<html>
<head>
<title>Use more than one form in html pagetitle>
head>

<body>
<form name="frm1" action="actionPage1.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

form>

<form name="frm2" action="actionPage2.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

form>

<form name="frm3" action="actionPage3.jsp">

<input type="text" name="txtName">
<input type="submit" name="goSubmit" value="Submit">

form>
body>
html>

HTML – Redirect

admin — Tue, 07 Apr 2009 10:56:23 +0000

HTML can redirect webpage one location to another location. This needs to use Meta tag of HTML.

Meta tag can redirect HTML page with or without time interval. This interval can be of 0 second or more than 0 seconds. Browser automatically redirect to URL in the specified interval time.

This HTML redirection is client side execution and done by web browser.

In example, you will see how to use redirect code.

<meta http-equiv="refresh" content="3; URL=http://www.yahoo.com" />

This code will redirect after 3 seconds to yahoo webpage.

<meta http-equiv="refresh" content="0; URL=http://www.yahoo.com" />

This code will redirect immediately when it open on web browser.

We can give relative URL in URL property of content

<meta http-equiv="refresh" content="3; URL=goToPage.html" />

Full example code

<html>
<head>
<meta http-equiv="refresh" content="3; URL=http://www.yahoo.com" />
<title>HTML Redirecttitle>
head>

<body>
Wait Redirecting ....
body>
html>

Css – Convert lower and Upper case

admin — Wed, 01 Apr 2009 06:28:02 +0000

Css convert text to lower case and upper case and capitalize all first character

text-transform helps to convert string to upper lower case easily

Just use this class in html all work done by css itself.

.caseLowerCSS
{
   text-transform:lowercase;
}

.caseUpperCSS
{
   text-transform:uppercase;
}

.caseCapitalAllFirstCSS
{
   text-transform:capitalize;
}

Make Your Own Website

admin — Fri, 20 Mar 2009 15:16:09 +0000

If a person who do not having knowledge about programming and web development. Can s/he make their own website without help of other technical person or any web developer? What should they have to do? Today website is online identity of anyone; this can be company or personal blog or personal website.

Making personal website is very easy and anyone can make website without having programming background. They should invest some money and time to learn for configuration of software. It is also easy and anyone can learn within 2 or 3 hours.

You need to learn about joomla cms, blog wordpress and create database in server.

1. Search web hosting and register domain name and purchase it

2. Search about CMS most popular is Joomla which is also open source and free. Learn about installation and cofiguration of joomla menu, page setup etc http://www.joomla.org/

3. Learn about Ftp (file transfer protocol) this is used for copy file (images, doc or php or html) into web server in step 1 (Free FTP client http://filezilla-project.org/)

4. Learn public directory where to copy Images or docs in web server

5. Learn phpMyAdmin Mysql database in your control panel only to make user name and create database http://www.phpmyadmin.net/

6. Most of web hosting company provide install package where from you can install Joomla and blog wordpress http://wordpress.org/

7. Just check your new website

This was about to make personal website.
By experience you can make quality website also

Today web designing companies provide to online software, where you can add your pages at run time and after save publish on web

http://sites.google.com

Create Free blog

http://wordpress.com/

http://www.blogger.com/ by Google

If you want to configure store

http://www.oscommerce.com/

Easily create a personal website and not technical can make it own

http://www.homestead.com/

Only 3 steps make website in homestead

1. Choose a design

Pick from 2,000 professionally designed websites.

2. Customize it

Quickly add your own logo, graphics, text, and domain name.

3. Show to the world

Click one button to publish your site to the web (we host it).

your website ready

but you have to loss some bucks for more professional and template design

HTML – Select box option group

admin — Wed, 11 Mar 2009 14:20:47 +0000

In this section, we are explaining about group of option in select box. Option group can be created by using of OPTGROUP element of HTML in select box. Optgroup keeps separated an one block to another block from each other. It is easier for user to understand quickly the categories of the list displayed in the select box.

OPTGROUP work with newer HTML version and it does not supported by older version of browser.

OPTGROUP used label to display group name in select box.

Demo

The example will explains the how to use optgroup in select box

<html>
<head>
<title>Select box option grouptitle>
head>

<body>

<select>
  <optgroup label="US State">
    <option value="Alaska">Alaskaoption>
    <option value="California">Californiaoption>
    <option value="New Jersey">New Jerseyoption>
    <option value="Washington">Washingtonoption>
  optgroup>
  <optgroup label="India">
    <option value="Punjab">Punjaboption>
    <option value="Kerala">Keralaoption>
    <option value="Rajasthan">Rajasthanoption>
    <option value="Maharashtra">Maharashtraoption>
  optgroup>
select>

body>
html>

Password Field in HTML

admin — Sun, 08 Mar 2009 13:01:56 +0000

Password field is same as input field other field, only difference is, it takes character in dot format which can not read by other adjcent user.

It is having same properties as other input text field having.

To make password field we have to change type of field to password instead of text

Properties of password field

1. size length of field size to print

2. maxlength strict field characters

3. name name of property field

4. value predefined value for password field

5. align predefined value at right or center or left

6. tabindex tab index using for tab order to move cursor

7. onblur fire on if focus out of password field

8. onchange

9. onclick

10. ondblclick

11. onfocus

12. onkeydown

13. onkeypress

14. onmousedown

15. onmousemove

16. onmouseout

Demo

Password :

<input type="password" name="sPassword" />

Example of Password Field in HTML

<html>
<head>
<title>Password Field in HTMLtitle>
head>

<body>
<form name="frm">
Password Field <input type="password" name="sPassword" />
<input type="submit" name="GoPassword" value="Submit"/>
form>
body>
html>

Include File in HTML

admin — Wed, 25 Feb 2009 06:04:45 +0000

Dynamic web pages allow you to include static or dynamic web pages through web programming. These web programming can be PHP, JSP, ASP or Perl which having a function include.

We are talking about HTML pages, to include another HTML pages. HTML does not have any function or method to include any other HTML pages. HTML can include HTML pages through iFrame or Frame. HTML can also include javascript file (js) and style sheet (CSS) extension file.

We have to make logic and take the help of JavaScript and Ajax or jQuery to include another HTML file in HTML file.

Ajax (send) function can call a file and get the content in response object. This response object can be easily added in HTML page through innerHTML.

xmlHttp.open("GET",header.html,true)
xmlHttp.send(null)

jQuery has a function (load) and get the innerHTML value in ID of any HTML tag of HTML page.

$("#header").load("header.html");

Demo

main.html

<html>
<head>
<title>including HTML file in HTML filetitle>
<script>
var xmlHttp

function loadContent()
{
   xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
     alert ("Browser does not support HTTP Request")
     return
    }
    var url="header.html"

    xmlHttp.onreadystatechange=getData;
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)

    return
}

function getData()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
      document.getElementById("header").innerHTML=xmlHttp.responseText
    }
}

function GetXmlHttpObject()
{
  var objXMLHttp=null
    if (window.XMLHttpRequest)
    {
      objXMLHttp=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
      objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
  return objXMLHttp
}
script>
head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="header">&nbsp;td>
  tr>
  <tr>
    <td>This is example of including file in HTML pagetd>
  tr>
table>
<script>
loadContent() // this will call function loadContent when page is loading
script>
body>
html>

header.html

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Hometd>
    <td>Profiletd>
    <td>Contacttd>
  tr>
table>

mainjQuery.html

<html>
<head>
<title>including HTML file in HTML filetitle>
<script src="jquery.js">script>
<script>
var xmlHttp

function loadContent()
{
   $("#header").load("header.html");
}
script>
head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td id="header">&nbsp;td>
  tr>
  <tr>
    <td>This is example of including file in HTML pagetd>
  tr>
table>
<script>
loadContent() // this will call function loadContent when page is loading
script>
body>
html>

header.html

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Hometd>
    <td>Profiletd>
    <td>Contacttd>
  tr>
table>

Both of these allow us to include content in our HTML page. This is done by without using any PHP, JSP or any web programming.

JSP, Tomcat, JDBC, Projects, Example, Program » HTML

HTML – Anchor Tag

Attribute of Anchor Tag

Common Attribute of Anchor Tag

Events Attribute of Anchor Tag

Related Posts:

Convert Photoshop PSD into HTML

Related Posts:

More than one form in HTML page

Related Posts:

HTML – Redirect

Related Posts:

Css – Convert lower and Upper case

Related Posts:

Make Your Own Website

Create Free blog

Related Posts:

HTML – Select box option group

Related Posts:

Password Field in HTML

Related Posts:

Include File in HTML

Related Posts: