HTML ATTRIBUTES :
- HTML attributes shows the extra or additional information about an html element and html tag.
- They always written after main tag in opening of the main tag.
- They shows the property of an html element and tag.
- HTML attributes always comes in a pair lie name=value , it defines the characteristic of html element and tag.
- name is the property or characteristic of element and value is the value that have to be set to element.
- Value is always written in double quotes. " value"
- for example :
In the above example , given tag is table and it has attribute align .
Left is the value given to align attribute .
GENERIC ATTRIBUTES :
| Attributes | options | function |
|---|---|---|
| bgcolor | - | gives background color to document |
| background | - | gives background image to document |
| align | left, right, center | works horizontally and shows the position of elements |
| valign | top, bottom, middle | works vertically and shows the position of elements |
| title | user defined | gives the title of element |
| width | - | gives the width of element |
| height | - | gives the height of element |
| id | - | names the element for use with cascading style sheet |
| class | - | classifies element use with cascading style sheet |
| href | - | used for linking one page to another in html document |
| alt | - | can give alternate text for particular area or image |
| style | - | can give color,font,styling,etc. to text in html document |
| src | - | used for giving source of an image in document |
HTML ELEMENTS :
HTML elements are defined as the everything between opening tag and closing tag . It starts with opening tag and ends with the closing tag .
EXAMPLE :
<html>
<head> Tprograming </head>
<body>
<p> Learn with us ! </p>
</body>
</html>
In the above example , <html> is the main basic root element in html . Inside <html> element there is a <head> element which shows the heading of the html document . <body> element is also important html element which plays important role in html documentation .
HTML COLORS :
We can apply color to text in an html document.
Also we can apply background color to an html text .
Let's see ,
BLUE
RED
PINK
YELLOW
PURPLE
ADDING BACKGROUND COLOR :
For this use 'bgcolor ' attribute .
Syntax :
<html>
<body bgcolor="add color">
<p> Tprograming.com </p>
</body>
</html>
EXAMPLE :
ADDING COLOR TO TEXT :
For this use 'style' attribute .
SYNTAX :
<html>
<body>
<p style="color:add color"> Tprograming.com </p>
</body>
</html>
EXAMPLE :
HTML - TABLE TAGS
- HTML <table> tags are used to draw table in an html document.
- To show data in a tabular format we are using table tag .
- They are just a spreadsheet made up of rows and columns.
- To divide a page into different section we uses table element.
- <table> is the main element for creating a table.
- There are many table elements like <th>, <tr>, <td>,etc.
<tr> - It defines table rows.
<td> - It defines table data .
ATTRIBUTES IN <TABLE> :
| border | pixels | shows the width of border in table |
| align | left, right, center | shows the position of table in html document |
| bgcolor | multiple colors | sets the background color in table |
| cellspacing | % or pixels | shows the space between cells |
| cellpading | % or pixels | shows the space between cell wall and cell content |
| width | % or pixels | shows the width of table |
| abbr | string of abbreviated text | shows abbreviation for header cell in table |
| frame | above, below, LHS, RHS, box border | shows which part of outside border should be display |
APPLY BACKGROUND COLOR IN TABLE :
</html>
<body>
<table border="2"bgcolor="yellow">
<th>column 1</th>
<th>column 2</th>
<tr>
<td>html</td>
<td>php</td>
</tr>
</table>
</body>
</html>
GIVE ALIGNMENT TO TABLE :
</html>
<body>
<table border="2" bgcolor="yellow" align="left">
<th>column 1</th>
<th>column 2</th>
<tr>
<td>html</td>
<td>php</td>
</tr>
</table>
</body>
</html>
CELLPADING AND CELLSPACING :
</html>
<body>
<table border="2"bgcolor="yellow" style="padding:5px" cellspacing="5px" >
<th style="pading:10px">column 1</th>
<th>column 2</th>
<tr>
<td>html</td>
<td>php</td>
</tr>
</table>
</body>
</html>
OTHER <table> ELEMENTS :
| thead | table head element, the group of rows showing the heading of column in table |
| tbody | specifies whole body of table |
| tfooter | used to group footer data in table |
| caption | used to give caption to table |
| col | shows header cell used for column |
| colgroup | shows number of cells splitted in a column |
HTML LIST TAGS :
- HTML <list> is used to create listing in an html document.
- To show specific list of content we uses <list> in html.
- We can group related content in form of list in html document.
Types of <list> :
- Ordered list tag
- Unordered list tag
- Definition list tag
let's see how to use list tag in html document ,
ORDERED LIST TAG :
- It is used to list related items or data in sequencial format.
- Ordered list tag uses number list, numbering starts from 1 and it is incremented by one for each successive order .
- Ordered list tag starts with <li> .
EXAMPLE 1 :
<html>
<head>
<ol>
<li>FYBCA</li>
<li>SYBCA</li>
<li>TYBCA</li>
</ol>
</head>
</html>
Output :
- FYBCA
- SYBCA
- TYBCA
<html>
<head>
<ol type="A">
<li>FYBCA</li>
<li>SYBCA</li>
<li>TYBCA</li>
</ol>
</head> <
</html>
Output :
A. FYBCA
B. SYBCA
C. TYBCA
EXAMPLE 3 :
<html>
<head>
<ol type="a">
<li>FYBCA</li>
<li>SYBCA</li>
<li>TYBCA</li>
</ol>
</head> <
</html>
Output :
A. FYBCA
B. SYBCA
C. TYBCA
UNORDERED LIST TAG :
- It is used to collect items in non-sequencial manner .
- It has no special order .
- An unordered list tag starts with <ul> .
- Unordered list defines bulleted list , i.e. disc, circle, square
EXAMPLE 1 :
<html>
<head>
<ul type="disc">
<li>mango</li>
<li>banana</li>
<li>orange</li>
</ul>
</head>
</html>
Output :
EXAMPLE 2 :
<html>
<head>
<ul type="circle">
<li>mango</li>
<li>banana</li>
<li>orange</li>
</ul>
</head>
</html>
Output :
<html>
<head>
<ul type="square">
<li>mango</li>
<li>banana</li>
<li>orange</li>
</ul>
</head>
</html>
DEFINITION LIST TAG :
- Definition list tag is used to list items with its description also .
- Starts with <dl> .
- It uses two tags <dt> and <dd> .
- <dt> for showing the item definition is provided by next <dd> .
- <dd> used inside <dt> and shows the definition of item in <dt> .
<html>
<head>
<dl>
<dt>HTML</dt>
<dd>HypertText Markup Language</dd>
</dl>
</head>
</html>
