HTML Definition Lists
AI-enhanced description
HTML and XHTML support a list style which is called definition lists where entries are listedlike in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, listof terms, or other name/value list.
Example<!DOCTYPE html><html><head><title>HTML Definition List</title></head><body><dl><dt><b>HTML</b></dt><dd>This stands for Hyper Text Markup Language</dd><dt><b>HTTP</b></dt><dd>This stands for Hyper Text Transfer Protocol</dd></dl></body></html>
HTML
HTTP
HTML FRAMES
HTML frames are used to divide your browser window into multiple sections where each sectioncan load a separate HTML document. A collection of frames in the browser window is known asa frameset. The window is divided into frames in a similar way the tables are organized: intorows and columns.
Disadvantages of Frames There are few drawbacks with using frames, so it's never recommended to use frames in yourwebpages:
Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up. Sometimes your page will be displayed differently on different computers due to different screen resolution. The browser's back button might not work as the user hopes. There are still few browsers that do not support frame technology.
Creating FramesTo use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tagdefines how to divide the window into frames. The rows attribute of <frameset> tag defineshorizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>tag and it defines which HTML document shall open into the frame.
Example
<!DOCTYPE html><html><head><title>HTML Frames</title></head><frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes></frameset></html>
Let's put above example as follows, here we replaced rows attribute by cols and changed theirwidth. This will create all the three frames vertically:
<!DOCTYPE html><html><head><title>HTML Frames</title></head><frameset cols="25%,50%,25%"> <frame name="left" src="/html/top_frame.htm" /> <frame name="center" src="/html/main_frame.htm" /> <frame name="right" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes></frameset></html>
specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways:
Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". A percentage of the browser window. For example to create three verticalCols frames, use cols="10%, 80%,10%". Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth.
This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, useRows rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns.
This attribute specifies the width of the border of each frame in pixels. For exampleBorder border="5". A value of zero means no border.
This attribute specifies the amount of space between frames in a frameset. This can takeframespacing any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames.
Attribute Description
This attribute is used to give the file name that should be loaded in the frame. Its valueSrc can be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in html directory.
Name This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link.
This attribute specifies whether or not the borders of that frame are shown; it overridesframeborder the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).
This attribute allows you to specify the width of the space between the left and right ofmarginwidth the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10".
This attribute allows you to specify the height of the space between the top and bottommarginheight of the frame's borders and its contents. The value is given in pixels. For example marginheight="10".
By default you can resize any frame by clicking and dragging on the borders of a frame.Noresize The noresize attribute prevents a user from being able to resize the frame. For example noresize="noresize".
This attribute controls the appearance of the scrollbars that appear on the frame. ThisScrolling takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.
This attribute allows you to provide a link to another page containing a long description ofLongdesc the contents of the frame. For example longdesc="framedescription.htm"
So you must place a <body> element inside the <noframes> element because the <frameset>element is supposed to replace the <body> element, but if a browser does not understand<frameset> element then it should understand what is inside the <body> element which iscontained in a <noframes> element.
You can put some nice message for your user having old browsers. For example Sorry!! yourbrowser does not support frames. as shown in the above example.
Let's see following example where a test.htm file has following code:
<!DOCTYPE html><html><head><title>HTML Target Frames</title></head><frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> Your browser does not support frames. </body> </noframes></frameset></html>
Here we have created two columns to fill with two frames. The first frame is 200 pixels wide andwill contain the navigation menubar implemented by menu.htm file. The second column fills inremaining space and will contain the main part of the page and it is implemented by main.htmfile. For all the three links available in menubar, we have mentioned target frame as main_page,so whenever you click any of the links in menubar, available link will open in main_page.
<!DOCTYPE html><html><body bgcolor="#4a7d49"><a href="http://www.google.com" target="main_page">Google</a><br /><br /><a href="http://www.microsoft.com" target="main_page">Microsoft</a><br /><br /><a href="http://news.bbc.co.uk" target="main_page">BBC News</a></body></html>
<!DOCTYPE html><html><body bgcolor="#b5dcb3"><h3>This is main page and content from any link will be displayed here.</h3><p>So now click any link and see the result.</p></body></html>
Option Description
Loads the page into the parent window, which in the case of a single frameset is the main_parent browser window.
_top Loads the page into the browser window, replacing any current frames.
By default, your webpage background is white in color. You may not like it, but no worries.HTML provides you following two good ways to decorate your webpage background.
Now let's see both the approaches one by one using appropriate examples.
<tagname bgcolor="color_value"...>
<!DOCTYPE html><html><head><title>HTML Background Colors</title></head><body>
</body></html>
Note: The background attribute is deprecated and it is recommended to use Style Sheet for backgroundsetting.
The most frequently used image formats are JPEG, GIF and PNG images.
<!DOCTYPE html><html><head><title>HTML Background Images</title></head><body>
It is suggested that while creating patterns or transparent GIF or PNG images, use the smallestdimensions possible even as small as 1x1 to avoid slow loading.
Colors are very important to give a good look and feel to your website. You can specify colorson page level using <body> tag or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors:
Color names - You can specify color names directly like green, blue or red. Hex codes - A six-digit code representing the amount of red, green, and blue that makes up the color. Color decimal or percentage values - This value is specified using the rgb( ) property.
Here is the list of W3C Standard 16 Colors names and it is recommended to use them.
Here are the examples to set background of an HTML tag by color name:
<!DOCTYPE html><html><head><title>HTML Colors by Name</title></head><body text="blue" bgcolor="green"><p>Use different color names for for body and table and see the result.</p><table bgcolor="black"><tr><td><font color="white">This text will appear white on black background.</font></td></tr></table></body></html>
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a redvalue, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #. Following is a list of fewcolors using hexadecimal notation.
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Here are the examples to set background of an HTML tag by color code in hexadecimal:
<!DOCTYPE html><html><head><title>HTML Colors by Hex</title></head><body text="#0000FF" bgcolor="#00FF00"><p>Use different color hexa for for body and table and see the result.</p><table bgcolor="#000000"><tr><td><font color="#FFFFFF">This text will appear white on black background.</font></td></tr></table></body></html> HTML Colors - RGB ValuesThis color value is specified using the rgb( ) property. This property takes three values, one eachfor red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
Note: All the browsers does not support rgb() property of color so it is recommended not to use it.
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)
Here are the examples to set background of an HTML tag by color code using rgb() values:
<!DOCTYPE html><html><head><title>HTML Colors by RGB code</title></head><body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)"><p>Use different color code for for body and table and see the result.</p><table bgcolor="rgb(0,0,0)"><tr><td><font color="rgb(255,255,255)">This text will appear white on blackbackground.</font></td></tr> </table></body></html>
HTML IMAGES
Images are very important to beautify as well as to depict many complex concepts in simple wayon your web page. This tutorial will take you through simple steps to use images in your webpages.
Insert ImageYou can insert any image in your web page by using <img> tag. Following is the simple syntaxto use this tag.
The <img> tag is an empty tag, which means that it can contain only list of attributes and it hasno closing tag.
To try following example, let's keep our HTML file test.htm and image file test.png in the samedirectory:
<!DOCTYPE html><html><head><title>Using Image in Webpage</title></head><body><p>Simple Image Insert</p><img src="/html/images/test.png" alt="Test Image" /></body></html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specifycorrect image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
Example<!DOCTYPE html><html><head><title>Set Image Width and Height</title></head><body><p>Setting image width and height</p> <img src="/html/images/test.png" alt="Test Image" width="150" height="100"/></body></html>
Example<!DOCTYPE html><html><head><title>Set Image Border</title></head><body><p>Setting image Border</p><img src="/html/images/test.png" alt="Test Image" border="3"/></body></html>
Example <!DOCTYPE html><html><head><title>Set Image Alignment</title></head><body><p>Setting image Alignment</p><img src="/html/images/test.png" alt="Test Image" border="3" align="right"/></body></html>
HTML Forms are required when you want to collect some data from the site visitor. Forexample during user registration you would like to collect information such as name, emailaddress, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such asCGI, ASP Script or PHP script etc. The back-end application will perform required processingon the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus,radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax:
Form AttributesApart from common attributes, following is a list of the most frequently used form attributes:
Attribute Description Action Backend script ready to process your passed data. Method to be used to upload data. The most frequently used are GET and POSTMethod methods. Specify the target window or frame where the result of the script will be displayed. ItTarget takes values like _blank, _self, _parent etc. You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:
Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
Here is a basic example of a single-line text input used to take first name and last name:
<!DOCTYPE html><html><head><title>Text Input Control</title></head><body><form >First name: <input type="text" name="first_name" /><br>Last name: <input type="text" name="last_name" /></form></body></html>
First name:
Last name:
Attributes
Following is the list of attributes for <input> tag for creating text field.
Type Indicates the type of input control and for text input control it will be set to text.
Used to give a name to the control which is sent to the server to be recognized and get theName value.
Value This can be used to provide an initial value inside the control.
Size Allows to specify the width of the text-input control in terms of characters.
maxlength Allows to specify the maximum number of characters a user can enter into the text box. Password input controlsThis is also a single-line text input but it masks the character as soon as a user enters it. They arealso created using HTML <input> tag but type attribute is set to password.
Here is a basic example of a single-line password input used to take user password:
<!DOCTYPE html><html><head><title>Password Input Control</title></head><body><form >User ID : <input type="text" name="user_id" /><br>Password: <input type="password" name="password" /></form></body></html>
User ID :
Password:
Following is the list of attributes for <input> tag for creating password field.
Type Indicates the type of input control and for password input control it will be set to password.
maxlength Allows to specify the maximum number of characters a user can enter into the text box.
Here is a basic example of a multi-line text input used to take item description:
<!DOCTYPE html><html><head><title>Multiple-Line Input Control</title></head><body><form>Description : <br /><textarea rows="5" cols="50" name="description">Enter description here...</textarea></form></body></html>
Description : Enter description here...
attributes
Used to give a name to the control which is sent to the server to be recognized and get thename value.
<!DOCTYPE html><html><head><title>Checkbox Control</title></head><body><form><input type="checkbox" name="maths" value="on"> Maths<input type="checkbox" name="physics" value="on"> Physics</form></body></html>
Maths Physics
type Indicates the type of input control and for checkbox input control it will be set to checkbox.
Example Here is example HTML code for a form with two radio buttons:
<!DOCTYPE html><html><head><title>Radio Box Control</title></head><body><form><input type="radio" name="subject" value="maths"> Maths<input type="radio" name="subject" value="physics"> Physics</form></body></html>
type Indicates the type of input control and for checkbox input control it will be set to radio.
value The value that will be used if the radio box is selected.
Here is example HTML code for a form with one drop down box
<!DOCTYPE html><html><head><title>Select Box Control</title> </head><body><form><select name="dropdown"><option value="Maths" selected>Maths</option><option value="Physics">Physics</option></select></form></body></html>
multiple If set to "multiple" then allows a user to select multiple items from the menu.
value The value that will be used if an option in the select box box is selected.
selected Specifies that this option should be the initially selected value when the page loads.
Here is example HTML code for a form with one file upload box:
<!DOCTYPE html><html> <head><title>File Upload Box</title></head><body><form><input type="file" name="fileupload" accept="image/*" /></form></body></html>
Button ControlsThere are various ways in HTML to create clickable buttons. You can also create a clickablebutton using <input> tag by setting its type attribute to button. The type attribute can take thefollowing values:
Type Description
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
image This creates a clickable button but we can use an image as background of the button.
Here is example HTML code for a form with three types of buttons:
<!DOCTYPE html><html><head><title>File Upload Box</title></head> <body><form><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /><input type="button" name="ok" value="OK" /><input type="image" name="imagebutton" src="/html/images/logo.png" /></form></body></html>
<!DOCTYPE html><html><head><title>File Upload Box</title></head><body><form><p>This is page 10</p><input type="hidden" name="pagename" value="10" /><input type="submit" name="submit" value="Submit" /><input type="reset" name="reset" value="Reset" /></form></body></html>
This is page 10