We always cross such websites where we can upload images or some files on the page. For example to upload pictures, movies, or even their own webpages. An upload form is another type of input form, where we apecify the type as file.
Upload Form:
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.
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.
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.
<textarea>Text Area!</textarea>
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 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.
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.
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).
By using the checked attribute, we can tell our form to automatically “check” a default radio.
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.
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.
Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.
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.
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.
Text Fields and Passwords:
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.
Changing the size attribute changes the size of the display of the text field on our site.
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.
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.
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.
To specify the type of input we want to use, we have to set the type attribute to one of the following values.
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.
Combine ‘&’, ‘copy’, and ‘;’ to make – © – Copyright symbol.
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.
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.
< for less than
> for greater than
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
| Column 1 | Column 2 | Column 3 |
| Row 1 Cell 2 | Row 1 Cell 3 | |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
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.
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
And now we will change the cellpadding of the table and remove the cellspacing from the previous example.
| Column 1 | Column 2 |
| Row 1 Cell 1 | Row 1 Cell 2 |
| Row 2 Cell 1 | Row 2 Cell 2 |
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
| Tag | Description |
| <table> | Defines a table |
| <th> | Defines a table header |
| <tr> | Defines a table row |
| <td> | Defines a table cell |
| <caption> | Defines a table caption |
| <colgroup> | Defines groups of table columns |
| <col> | Defines the attribute values for one or more columns in a table |
| <thead> | Defines a table head |
| <tbody> | Defines a table body |
| <tfoot> | Defines a table footer |
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.
| <table border=”1″> <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> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
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:
| <table border=”1″> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
Headings in a Table
Headings in a table are defined with the <th> tag.
| <table border=”1″> <tr> <th>Heading</th> <th>Another Heading</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> |
How it looks in a browser:
|
Heading |
Another Heading |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
| <table border=”1″> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
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 ( ) to empty data cells, to make the borders visible:
| <table border=”1″> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> |
How it looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
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.
To align the images according to the content in your website you can use the align attribute.
1. align (Horizontal)
2. valign (Vertical)
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!
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.
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.
| Local Src | Location Description |
| src=”sunset.gif” | picture file resides in same directory as .html file |
| src=”../sunset.gif” | picture file resides in previous directory as .html file |
| src=”../pics/sunset.gif” | picture file resides in the pic directory in a previous directory as .html file |
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.
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.
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:
| <img src=”boat.gif” alt=”Big Boat” /> |
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
| Tag | Description |
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
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.
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.
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.
<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.
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.
<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.
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.
An anchor can be given a name of its own, this name is used for the internal linking within the page.
Now create the reference links, placing the # symbol followed by the name of the anchor in the href of the new link.
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.
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:
|
Example:
| _blank
_self” |
opens the page in a blank window
Loads the new page in current window |
|
| _parent” | Loads new page into a frame that is superior to where the link lies | |
| _top” | Loads new page into the current browser window, cancelling all frames |
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
| Example
<a href=”http://www.w3schools.com”>This is a link</a> |
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.
