We can make an input field as read only if we want the user not to interfere with the text written. We give the value of readonly attribute as true to make it readonly and then the user can not manipulate the data inside the input field.

This attribute is only for textbox and textarea input types.

Example:

• <textarea cols=”20″ rows=”5″ wrap=”hard” readonly=”yes”> As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.</textarea>

Disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the input field altogether and inhibits any change in the text as well as text highlighting.

This attribute can be used for most of the input fields including the buttons.

Example:

• <textarea cols=”20″ rows=”5″ wrap=”hard” disabled=”yes”>As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.</textarea>

---

[Translate]

Textareas retrieve descriptive type of information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area. It can take large inputs, and have scroll bars to navigate within the text entered.

Example:

<textarea>Text Area!</textarea>

Text area Cols and Rows

We can display the text area according to our choice by using the rows and cols attribute.

Use a numeric value for each attribute and the larger the value the larger the field will appear.

Example:

• <textarea cols=”20″ rows=”10″>Text Area!</textarea>
• <textarea cols=”40″ rows=”2″>Text Area!</textarea>
• <textarea cols=”45″ rows=”5″>Text Area!</textarea>

Textarea Wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

·           soft

forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

·           hard

Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

·           off

Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

·           wrap=

o          “virtual”

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

o   “physical”
Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Example:

• <textarea cols=”20″ rows=”5″ wrap=”hard”>As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read.</textarea>

Example:

• <textarea cols=”20″ rows=”5″ wrap=”off”>As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read.</textarea>

---

[Translate]

Radios are best used in “multiple choice” type quizzes and questionaires, where the user can have only one single choice.

Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.

·           value – specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).

·           name – defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

Example:

• Italian: <input type=”radio” name=”food” />
• Greek: <input type=”radio” name=”food” />
• Chinese: <input type=”radio” name=”food” />

By naming these three radios “food” they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection).

Radio Checked

By using the checked attribute, we can tell our form to automatically “check” a default radio.

Example:

• Italian: <input type=”radio” name=”food” checked=”yes” />
• Greek: <input type=”radio” name=”food” />
• Chinese: <input type=”radio” name=”food” />

---

[Translate]

Checkboxes allow the user to select multiple choices for a single question. for example if we need multiple selections for a single question.

Checkboxes are another type of <input /> form. We set the type attribute to check and we also must set a name and value attribute for them to be at all helpful.

Example:

• <input type=”checkbox” />
• <input type=”checkbox” /><input type=”checkbox” />

Checkboxes are used for instances where a user may wish to select multiple options, a sort of check all that apply question.

It is possible to precheck the input boxes for your viewers using the checked attribute. Simply set the checked attribute to yes or no.

Example:

• name=”sports” value=”football” />
• <br />
• Baseball: <input type=”checkbox”
• name=”sports” value=”baseball” />
• <br />
• Basketball: <input type=”checkbox” checked=”yes”
• name=”sports” value=”basketball” />

---

[Translate]

Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.

Example:

• <input type=”password” size=”5″ maxlength=”5″ />
• <input type=”password” size=”15″ maxlength=”15″ />
• <input type=”password” size=”25″ maxlength=”25″ />

Password Fields:

The only difference between these fields and the normal text fields is that when you type into them, the browser hides the characters being typed; replacing them with dots, stars, or boxes.

---

[Translate]

You have seen many websites which provide the facility of creating accounts, and so that we need to register with a username and a password.

Text fields are small rectangles that allow a user to simply input some text and submit that information to the web server.

This information is usually then processed through a server side scripting language such as PHP, PERL, or ASP.

Example:

• <input type=”text” />
• <input type=”password” />

Text Fields and Passwords:

Text Field Size

We can control the size of the text area by specifying the size attribute. The example below provides 3 different sizes for your text fields. The default size is around 20 characters long.

Example:

• <input type=”text” size=”5″ />
• <input type=”text” size=”15″ />
• <input type=”text” size=”25″ />

Text Fields:

Changing the size attribute changes the size of the display of the text field on our site.

Text Field Maxlength

Without specifying a maxlength attribute, the viewer is able to type as many characters as they wish into the text field (even if you specify a size). To limit the number of characters a user can type into your fields, always specify a maxlength, generally this should match the size of your field.

Example:

• <input type=”text” size=”5″ maxlength=”5″ />
• <input type=”text” size=”15″ maxlength=”15″ />
• <input type=”text” size=”25″ maxlength=”25″ />

Maxlength Attribute:

Using the value attribute, we could pre-populate our text fields with some information. Later on as you develop your skills with a scripting language such as PHP, this will become more useful as you will be able to pre-populate text fields for returning users through the use of session variables.

Example:

• <input type=”text” size=”5″ maxlength=”5″ value=”55555″ />
• <input type=”text” size=”15″ maxlength=”15″ value=”Corndog” />
• <input type=”text” size=”25″ maxlength=”25″ value=”Tizag Tutorials!” />

Text Field Values:

---

[Translate]

Without user input a website is just a static show page. We use user inputs to make it more and more effective and to interact with the users.

When we are talking about websites and users visiting the website you must be well aware that this requires user interaction in variuos ways. For example if we want to make our website interactive then we have to take in some inputs from the use and display some output according to the input provided.

This process requires, first of all somewhere or some area where a user can write directly or it can interact in any way with the page being displayed.

We have various kind of input tags according to the different purpose like checkboxes, text fields, radios, and form submission buttons.

The <input /> tag does not require a closing tag and is thus an “all in one” tag.

The Type Attribute

To specify the type of input we want to use, we have to set the type attribute to one of the following values.

• “text”
• “password”
• “checkbox”
• “radio”
• “submit”
• “reset”

---

[Translate]

Several symbols such as copyright, trademark, or foreign cash symbols don’t exist on the keyboard, but they are  sometimes required in your document In order to display these characters, you have to know 4 things.

• Each begins with a ampersand – &
• Then the entities name – copy
• And finally a semicolon – ;

Copyright:

Combine ‘&’, ‘copy’, and ‘;’ to make – © – Copyright symbol.

Additional Spaces and <>.

As you have may have learned within paragraph and heading tags, browsers will only recognize and format 1 space between words reguardless of how many you may actually type in your coded HTML. That means no tab would work. But sometimes its necessary to provide multiple spaces between the words. We can do so by using the non-breaking space entity.

&nbsp;

Example:

• <p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;&nbsp;down!</p>

Spaces:

Everything that goes up, must come    down!

In HTML the less than and greater than signs are used for tags so they cannot be directly used as the browser will not show them on the page

to use them on your web site you will need entities.

&lt for less than

&gt for greater than

Example:

• <p>
• Less than – &lt; <br />
• Greater than – &gt; <br />
• Body tag – &lt;body&gt;
• </p>

Less than Greater than:

• Less than – <
• Greater than – >
• Body tag – <body>

---

[Translate]

rowspan is an attribute to span multiple rows and colspan to span multiple columns.

i.e. with rowspan you can make a row span over multople columns and with colspan you can make a column span over multiple columns.

<th> tag can be used to give header to the columns

Example:

• <table border=”1″>
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• <th>Column 3</th>
• </tr>
• <tr><td rowspan=”2″>Row 1 Cell 1</td>
• <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
• <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
• <tr><td colspan=”3″>Row 3 Cell 1</td></tr>
• </table>

Colspan and Rowspan:

Cell Padding and Spacing

cellpadding and cellspacing attributes are used to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within.

Example:

• <table border=”1″ cellspacing=”10″ bgcolor=”rgb(0,255,0)”>
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• </tr>
• <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
• <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
• </table>

Cellspacing and Padding:

And now we will change the cellpadding of the table and remove the cellspacing from the previous example.

Example:

• <table border=”1″ cellpadding=”10″ bgcolor=”rgb(0,255,0)”>
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• </tr>
• <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
• <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
• </table>

Cell Pads:

The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.

Table Tags

---

[Translate]

Gif stand for Graphics Interchange Format.

Gifs are used for banners, clip art, and buttons. gifs can have a transparent background and so we can place them above any content on the website. But also gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates.Moreover Gifs can have only 256 colors.

Jpegs, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. But Jpegs don’t allow for transparent backgrounds. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

How it looks in a browser:

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Headings in a Table

Headings in a table are defined with the <th> tag.

How it looks in a browser:

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

How it looks in a browser:

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible:

How it looks in a browser:

---

[Translate]

Thumbnail is a low quality small sized image which represents a high quality and larger image on a web page. Thumbnails are used for the faster loading of the web page. They are small in size so they load quickly as the page loads. They serve as a link to the high resolution image and if in case a user want to see the actual image they can click on the thumbnail and can see the real image.

Example:

• <a href=”sunset.gif”>
• <img src=”thmb_sunset.gif”>
• </a>

---

[Translate]

To align the images according to the content in your website you can use the align attribute.

1.         align (Horizontal)

• right
• left
• center

2.         valign (Vertical)

• top
• bottom
• center

Example:

• <p>This is paragraph 1, yes it is…</p>
• <p><img src=”sunset.gif” align=”right”>The image will appear along the…isn’t it?</p>
• <p>This is the third paragraph that appears…</p>

Image Wrap Arond:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.

The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren’t talking about that, so it’s rather a waste, isn’t it?

This is the third paragraph that appears below the paragraph with the image!

---

[Translate]

Images are always a plus point in your website. They highlight the effect of the contents. so it is very important that you use them properly.

<img /> tag is used to place an image on your web page.

the src attribute takes the address of the image to be displayed and the browser shows the image in its place.

Example:

• <img src=”sunset.gif” />

Image:

Image src

Src stands for source, the source of the image or more appropriately, the address of the image.

We can use local images as well as the global images. ie. we can use the images inside our domin with a relative address or we can use an image at some other location or some other website by providing the exact or the complete URL.

The first one is called relative addressing, and the second is called absolute addressing.

URL Types:

With relative addressing you will have to keep everything in your domain only which means a lot of space requirement

whereas in absolute adressing you don’t need to worry about the space in your domain. But absolute addressing poses a problem if the web master(s) of the other site happen to change the physical location of the picture file.

The decision depends on you, which factor to consider.

Alternative Attribute

Whenever you use images and graphics on your website it makes the loading of the page slow.sometimes the browser doesn’t support the content you have put there, in such cases the area remains blank and the user doesn’t know anything what goes there.

In such cases we use the alt attribute.

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

Example:

• <img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” />

Alternative Text:

The Alt Attribute

The alt attribute is used to define an “alternate text” for an image. The value of the alt attribute is an author-defined text:

The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image. It is a good practice to include the “alt” attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Image Tags

Image Height and Width

You can define the height and width of the image, rather than letting the browser compute the size.

height and width attributes of an image element helps in providing the width and height you want to give tou your image.

Example:

• <img src=”sunset.gif” height=”50″ width=”100″>

By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image’s dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

---

[Translate]

Download links are same as text links. Problems come when you want to place image links for download.

The solution for this problem is to use a thumbnail link for the images.

Example:

• <a href=”http://www.xyz.com/pics/htmlT/blanktext.zip”>Text Document</a>

Download a Text Document:

• Text Document

Default Links; Base

<base> tag is used to provide a default link for all the other links on your page

It’s a good practice to set a base tag just in case your links become bugged somewhere down the line.

the base is usually set to the home page.

Example:

• <head>
• <base href=”http://www.xyz.com/”>
• </head>

---

[Translate]

While defining an email link you can even provide some additional information like the subject or even the body also.

you can define a uniform subject which users can automatically have when they click the link.

This type of facility can be provided while taking feedback from the users visiting your website, or in case you want to take some survey.

·           Subject – Populates the subject of the email with the information that you provide.

·           Body – Populates the body of the email with the information that you provide.

Example:

• <a href= “mailto: a@b.com?subject=Web Page Email&body=This email is from your website” >2nd Email Example</a>

Complete Email:

• 2nd Email Example

Example:

• <a href=”mailto:email@xyz.com?subject=Feedback&body=Good work!”>
• Email@xyz.com</a>

Complete Email:

• Email@xyz.com

---

[Translate]

<a></a> tag is used to define the start and ending of an anchor.the link is given as the value of the href attribute. The text you place between the opening and closing tags will be shown as the link on a page.

Example:

• <a href=”http://www.xyz.com/” target=”_blank” >XYZ Home</a>
• <a href=”http://www.espn.com/” target=”_blank” >ESPN Home</a>
• <a href=”http://www.yahoo.com/” target=”_blank” >Yahoo Home</a>

Email Links

We can make email links. whenever a user will click on the link he will be directed to a blank mail composing page with the to and the subject already filled up.

There actually is not a separate HTML tag for creating an HTML email link. Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress, rather than specifying a web URL.

these things are done in case you want to take feedback from anyone visiting your webpage.

Example:

• <a href=”mailto:email@xyz.com?subject=Feedback” >Email@xyz.com</a>

Email Links:

• Email@xyz.com

---

[Translate]

An anchor can be given a name of its own, this name is used for the internal linking within the page.

• <h2>HTML Links and Anchors<a name=”top”></a></h2>
• <h2>HTML Text Links<a name=”text”></a></h2>
• <h2>HTML Email<a name=”email”></a></h2>

Now create the reference links, placing the # symbol followed by the name of the anchor in the href of the new link.

Anchor Code:

• <a href=”#top”>Go to the Top</a>
• <a href=”#text”>Learn about Text Links</a>
• <a href=”#email”>Learn about Email Links</a>

Local Links:

• Go to the Top
• Learn about Text Links
• Learn about Email Links

---

[Translate]

The href attribute in an anchor tag defines a reference, an address that the link refers to. Basically this is where the user will be taken if they click this link.

Hypertext references can be Internal, Local, or Global.

·           Internal – Links to the current page

in the href attribute we give the name of the anchor we need to link to in our page, preceeded by a hash (#)

·           Local – Links to other pages within your domain

in the href attribute we give a relative address of our own domain

·           Global – Links to other domains outside of your site

in the href attribute we provide the full URL of the web page we are making a link to.

Example:

Internal – href=”#anchorname”

Local – href=”../pics/picturefile.jpg”

Global – href=”http://www.xyz.com/”

Target Attribute

The target attribute defines where to open the linked document or page., ie on the same page or on a new page or in some frame if frmaes are used.

The code below will open the document in a new browser window:

Example:

---

[Translate]

A webpage is nothing without connections. In fact, its web because its connected just like a spider web. There are lots and lots of web pages and much more links to move from one page to another.

Think of a scenarion if we don’t have any links. then we either need to have all the names of different pages or the pages itself will go so long that you will go on scrolling and scrolling.

In a practical way its not possible at all to build a website without any links. We have different kind of websites with different matter in each of them. Even a single site is very varid in terms of content, and each type of content is kept in a different page. We constantly need to navigate between different pages to collect information we want.

Links take us to different pages from a single point and let us come back anytime we need.

Links are basically providing a third dimension to the web pages, ie the depth, we can go any deeper we want to in a web page.

HTML links are defined with the <a> tag. Its called the anchor tag

Note: The link address is provided as an attribute.

An anchor can be anything , a text, a letter, a paragraph, images, graphics, animations, depending upon our choice and use.

---

[Translate]

The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

Hexadecimal Color Values:

Giving hexadecimal values:

bgcolor=”#FFFFFF”

This code represents white color.

The letter “F” is the maximum amount that we can give to each color .

The following formula can be used to calculate the numeric equivalent of a hexadecimal.

The value 255 is the maximum allowed for any primary color.

Hexadecimal Formula:

• (code * 16) + (code) = value in decimal

Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15.

Example 2:

• bgcolor=”#CC7005″

• CC is the two digit code for the red part of the color and c stands for 12 so in the above formula we put 12 in place of code.

• (12 * 16) + (12) = 204

Similarly for the green part we do

• 70(GG – Green)
• (7 * 16) + (0) = 112

and for the blue part we have to do

• 05(BB – Blue)
• (0 * 16) + (5) = 5

Hexadecimal codings are much consistent while working on different browsers. So its a good practice to use this coding only, it helps maintaining a consistency in the look and feel of the web pages.

Further If you dont want  your colors to be changed even slightly, then use the hexadecimal values in pairs for color. Examples: “#0011EE”, “#44HHFF”, or “#117788″. These are called True Colors, since they will stay true in hue from browser to browser.

---

[Translate]