Posts

Showing posts from July, 2020

HTML FORMS

Image
HTML FORMS: • Form are used to collect some data from site visitor. • A from will take input from the visitor & post to backend application. • There are various types of elements available like text field, text area, drop-down, radio button, checkbox, password field etc. FORM ATTRIBUTES: HTML FORM CONTROL: • Text input control • Checkbox control • Radio box control • Select Box control • Hidden Control • Clickable Button • Submit & Reset Button Text Input Control: • Single line text input-This control is used for only take one line. It is used by using <input>tag. • Password Input Control-This is also a single line text input but it masks the character. It is also created by using <input>tag. • Multiline Input Control-For multi-line text input we use <textarea>tag.
Post a Comment
Read more

HTML ORDERED LISTS

HTML ORDERED LISTS: • You can also create number list in HTML. • This list is created by using <ol> tag. • The numbering starts at one & is increment by one for each successive order list. Example: <!DOCTYPE html> <html> <head> <title>order Lists </title> </head> <body> <ol> <li>Java</li> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>PHP</li> </ol> </body> </html> OUTPUT: 1. Java 2. HTML 3. CSS 4. Java Script 5. PHP There are various types are present in ordered list. Example: <!DOCTYPE html> <html> <head> <title>order Lists </title> </head> <body> <ol type= "i"> <li>Java</li> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>PHP</li> </ol> </body> </html> OUTPUT: i. Java ii. HTML iii. CSS iv. Java Script v. PH...
Post a Comment
Read more

HTML LISTS

Image
HTML LISTS: • HTML offers web authors to specify the lists in three ways. • <ul> - An unorder list. This list items using plain bullet. • <ol>- An order list. This list items using different schemes of numbers to list your items. • <dl> - An definition list. This arranges items in the same way as they were arranged in a dictionary. HTML UNORDERED LISTS: • An unordered list is a collection of related items that have no special order. • We define the tag by using <ul> tag. • Each item list is marked with a bullet. • You use <li> tag to lists the items. • Type disc is default unordered list type. Example: <!DOCTYPE html> <html> <head> <title>Unorder Lists </title> </head> <body> <ul> <li>Java</li> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>PHP</li> </ul> </body> </html> OUTPUT: • Java • HTML • CSS • Java Script • PHP Example: ...
Post a Comment
Read more

Set Font Colour

Set Font Colour: • You can set font colour by using color attributes. • You can specify either hexadecimal colour code or colour name. Example: <!DOCTYPE html> <html> <head> <title>Font size</title> </head> <body> <font color="#FF00FF">This text is Pink</font><br/> <font color="yellow"> This text is Yellow</font><br/> </body> </html> OUTPUT: This text is Pink This text is Yellow
Post a Comment
Read more

Set Font Face

Set Font Face: • You can set font face by using face attribute. Example: <!DOCTYPE html> <html> <head> <title>Font size</title> </head> <body> <font face="Times new roman">Times Now Roman</font><br/> <font face="verdana">Verdana</font><br/> <font face="Arial">Arial</font><br/> </body> </html> OUTPUT : Times Now Roman Verdana Arial
Post a Comment
Read more

HTML FONTS

Image
HTML FONTS: • Fonts play an important role in making a website. • HTML <font> tag used toad style, size, & colour to the text on your website. • You can use a <basefont> tag to set all of your text to the same size, face, &colour. NOTES: The font & basefont tags are deprecated & it is supposed to be removed in a future version of HTML. So they should not use rather, it’s suggested to use CSS styles to manipulate your fonts. Set Font size: • You can set content font size using size attributes. • The accepted value is 1 to 7. • Default size is 3. • Here size 1 is smallest size & 7 is largest size. • You can also specify the size +n or -n. Example: <!DOCTYPE html> <html> <head> <title>Font size</title> </head> <body> <font size="-1">Font Size="-1"</font><br/> <font size="1">Font Size="1"</font><br/> <font size="2">Font Size=...
Post a Comment
Read more

Table Height & width on HTML

Image
Table Height & width: • You can set the table height & width using height and width attributes. • You can specify the size in the form of pixels or percentage. Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="300" height="50"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> OUTPUT:
Post a Comment
Read more

Table Backgrounds on HTML

Image
Table Backgrounds: • You can also set table background: • bgcolor attribute-You can set Background colour for whole table or just for one cell. • background attribute-You can set Background image for whole table or just for one cell. • bordercolor attribute-You can also set border colour . Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1” bordercolor="green" bgcolor="red"> <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> </body> </html> OUTPUT:
Post a Comment
Read more

Colspan & Rowspan Attributes on HTML Table

Image
Colspan & Rowspan Attributes: • You will use colspan attributes if you want to merge two or more columns nto single column. • Rowspan is used if you want to merge two more rows. Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <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> </body> </html> OUTPUT:
Post a Comment
Read more

Cellpadding & Cellspacing Attributes on HTML Table

Image
Cellpadding & Cellspacing Attributes: • It is used to adjust the white space in your table cells. • Cellpadding represents the distance between cell borders & content within the cell. • Cellspacing attributes defines the width of the border. Example: <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1” cellpadding=”5”cellspacing=”5”> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Raju</td> <td>5000</td> </tr> <tr> <td>Masuf</td> <td>4000</td> </tr> </table> </body>  </html> OUTPUT:
Post a Comment
Read more

HTML Table Heading

Image
Table Heading: • It is used by using <th> tag. • Normally you will put your top row as table heading. Example : <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1”> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Raju</td> <td>5000</td> </tr> <tr> <td>Masuf</td> <td>4000</td> </tr> </table> </body> </html>   OUTPUT :
Post a Comment
Read more

HTML tables

Image
HTML Tables: • The HTML Tables allow web author to arrange data in rows & column of cells. • To create table <table> tag is used in which <tr> tag is used to create table row & <td > tag is used to create table data cells. • Here border is an attributes of<table>tag. Example : <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border=”1”> <tr> <td>Row 1, Column1</td> <td>Row 1, Column2</td> </tr> <tr> <td>Row 2, Column1</td> <td>Row 2 Column2</td> </tr> </table> </body> </html> OUTPUT :
Post a Comment
Read more

HTML Images

Image
HTML Images: • Images are very important to beautify & depict many complex concepts in simple way on your web page. • To insert image in your web page you use <img>tag. • You can use png,jpeg,jpg image file based on your comfort. • Remember that image name is always case sensitive. Syntax: <img src=”image url”…attributes-lists> Example : <!DOCTYPE html> <html> <head> <title>Image in webpage</title> </head> <body> <p>Simple image insert</p> <img src=”Desktop\SavedPictures\flower.jpg” >  </body> </html>  OUTPUT: Simple image insert
Post a Comment
Read more