Tuesday, 22 January 2019

Garaphic User interface



What is garapic user inter face ?
-The learn user interface originated  in the engineering in the 1970s,
Virtually everyone who interacted with computer had been an engineer and a programmer , but new kind of user s wee  emering the non programming user, , These users often rected more negativity to dealing with a machine , New forms of interaction were needed new interface were required attenion flowed to "the user interface" 

with the introduction of the Macintosh in 1984 , Apple computer popularised the users interface as it is know today, Apple's user interface is now commonly referred to as a Graphical user interface or gui , The gui has become associated with a common features set aviable in a number of product offering common features include , 

  • Secoundary userinterface , usually s pointing device and typically a mouse,
  • point and shoot functionallu with screen menu that appear or disappear under pointing device control,
  • Icons the present files directories and other application and system entities 
  • Dialog boxes buttons sliders check boxes and many other graphical metsphors that let the programmer and user tell the computer what to do and how to do it, 
Today's  GUIs have expanded basic functionalities to support not only graphics but also dimensions color height video and highly dynamic interaction  modern user interface can simulate a very realistic view of a real three dimensional world. 


Evolution of human and machine interaction 

-The primary means communcation with computers  carlier had been through command based interface , In command interface user have to learn to large command to get their jobs done, in earlier computer systempaper tapes cards and batch jobs were the primary means of communicating these commands to the computer user later time shareing system allowed to the use of CRT termminals to interat/communication with the computer . These early systems were havily burdened by users trying to share precious computer resources such as cpu and peripherals , The batch systems and time sharing led to command driven user interfaces Users had to memories commands and options or consult a large set of user manual , The carly mainframe and minicomputer sysems required a large set of interaction manuals to haw to use the system , In  some system s required a large set of instruction manuals of instruction , meaningful terms were used for command names to help the end user , But in other systems the user had to memories several sequences of keystrokes to accomplish certain tasks , 
Early users of computers were engineers and what we now call expert users, users who had a lot of internet in knowing more about computer system and the technology, Command line interfaces were acceptable to majority of these users, in the 1970s, computers were introduced to a new class of users, secrelaries , managers and non-technical people, These new users were less interested in learning computer technology and more interested in getting their jobs done through the machine, Thecommand -based interface caused many of these new users to develop computer phobia,



Monday, 21 January 2019

Discuss various features of GUI

Following are the features of GUI 

Secoundary user input devices , usually a pointing device and typically a mouse,
point and shoot functionally with screen menus that appear or disappear under pointing device control,
windows that graphically display what the computer is doing ,
icons that represent files directes and other application and system entities,
Dialog boxes, button slides check boxes and many other graphical metaphores that let the proggramming and user tell the computer what to do and how to do it ,

What is the difference between bitmapped and character based display..?

-Bit-mapped display is made up tiny dots (pixel) that is an independent addressable and has much finer resolution that  character display .-bit-mapped display have the advantage over character display .one of the major advantages is of graphic capability....

Sunday, 23 December 2018

The Memory System



Q, What is memory hirerarchy?  Explain in terms of access  time and cost per bit ?

Ans,- A memory systerm is a very simple system yet it exhibites a winde range of technology and type , The basic objective of a memory system is to increase the speed of compution , Likewise the basic objectives of a memory system is to provided fast uninterrupted access by the processor to the memory , Such that the processor can operate at the  speed it's expexted to work , But does kind of technology where there is no speed gap beteen processor and memory speed exits ? The answer is yes they do , but unfortunately as the access time (time taken by cpu to access a location in memory) becomes less and less the cost per bit of memory becomes increasingly higher , in additions , normally these things memories requires power supply till the information need to stred . Both these things are not very convenient but on the other hand the memory of other smaller cost have  very high access time, which will result in slower operation of the cpu . Thus the cost of vs access time a normally has lead to hierachy of memory where we supplement fast memories with larger cheaper slower memories , These memory units may have very different physical and operational charecteristics therefore, making the memory system very divers in type cost, orgation technology and performance , This memory hierachy will work only if the frequency of access to the slower memories are significantly less than the faster memories --

Wednesday, 19 December 2018

Boolean Algebra and circuite Fundamental

 A Booleam  algebra B is a algebric structure  which consists of the set X(# )  having two binary operations (denoted by the  and or  ) one unary operation (denoted by ) and two specially defined element 0 and 1  which satisfy the following rules for all x,y,z 






Sunday, 25 November 2018

What is menu element code




<!Doctype html>

<html>

<heas>

<title> Using the menu element </title>

</head>


<body>


<h1> Uing the  menu element </h1>

<Menu type="Toolbar"> >


<L1> <Menu  label="New">

<Button type="button"> Open</button>
<Button type="Button" > Save </button>
</Menu>

</L1>

<L1>

<Menu label=Edit">
<Button type="Button"> Undo </button>

<Button type=" Button" > Redo</Button>
</Menu>
</l1>

</body>

</html>

Saturday, 17 November 2018

# Detais and summary html5 code



 Details and summary codes 


<!DOCTYPE HTML>

<html>

<head>


<title> detais and summary </title>


</head>


<body>

<h1> Using the details and summary element </h1>


<Details>


<summary>  details and summary element  are newly introducted in the html5 </summary>


</details>


</body>

</html>



Before  click figure 




after click figure 



                                                                     see change  symbol ,



 Using the command element 

<!doctype html>

<html>
<head>
<body> 

< h1> using the command element </h1>

<Menu>
<command onclick ="alert('hello world')"> click here</command>

</menu>
</Body>

</html>


(showing the message box)


<!Doctype html>


<html>

<head>

<body>
<h1> using the command element </h1>


<Menu>

<L1> <command type="radio" radigroup="bgcolor" onclick ="document =.bgcolor=' lightgreen' > light green </command> </L1>

</Menu>

</body>

</html>



Friday, 16 November 2018

What does interactive elements means

What is interactive element  ....?

Interactivity is the process of information on web page  and allows the user to communicates with that web page , An interactive element  ,  web page allows a user to easily perform the tasked related to the content  of the web page, such as retireving the details of an article or executing commands using radio buttons or check boxes , You can display the content on web page by using different web page , Provided by Hypertext mark up language such as Details summary menu , and kbd

The details of summary element 

The DETAILS  element is used to display the addtional details about a document such as , Publishing date  of the document or the name of the other, , Where as the summary element or the used provided the summary element  to create the header that can expend


<DETAILS>
<summary> This section contains the summary of the document , </SUmmary>
</DETAIL>


                                                                 see in the figure


The menu element 

The menu element  is used to display  a list of menu items of the of the list ,


The Attributes of the MENU  Element 

Attribute                       Description 
    Label                        Specifices a lebel of the  menu, which is visible on the web page,
 Type                             Defines the type of the menu such as context menu  toolbar or list (details)




Followin is the an example of using the MENU element

 <MENU>
<L1> <INPUT TYPE="RADIO"  />> Ferrari</l1>
<l2> <input type="radio" /><maruti</l2>
</MENU>




                                                             See display menu items





The COMMAND element 

The command element is introduce in html5 and is used to define the command button such as - radio button  chech box, or button ,  you can use the command element in conjuction with the MENU element ,

The attribute of the command element 
 Attribute                          desciptions
checked                              Define the selection of the command in case of radio button and checkbox 
disabled                             Disable the command    
 icon                                      Specific the location of the graphical image that representing the command ,

lebel
radiogroup
type


Thursday, 1 November 2018

How to easy create a Form with Multiple steps

 Working with form 

 Main focus on this 

  • Creating a form
  • Working with the input element
  • Using with the SELECT and OPTION element
  • Using the OPTGROUP element
  • Working with thw Textarea element
  • Using the FIELDSET AND LEGEND element
  • Using with the BUtton element
  • Using with the Datalist element
  • using with the Keygen element
  • Using with the output element
  • using with the PROGRESS element
  • using with the Meter element 
  • Using with the enctype action and method attributes 

      IN DEPATH 



At times ,  you need to develop websites that requires users interaction , For example , you need to develop a  railway websites that allows uswers to check the arrival department status on the   internet , This website user a registration and log in form  to collect the user information that submits the information to server for futher processing , These type of form pfovide the medium of interaction between a websites and its users on the internet , A form is a are of a web page 
that allowsthe users to provides the information in a varitey of the way ,




Exploring of the input element element 
 A form is the composed control s, such as text box, drop down list and check box radio button and enable users  to enter the information , you can create by using the INPUT ELEMENT  To do this , u need to set type of this INPUT ELEMENT 

  • test and serach
  • tel
  • url
  • email
  • password
  • datetime-local
  • datetime, date, month, year, day , week time 
  • number and range
  • file
  • hidden
  • checkbox
  • radio
  • submit
  • reset
Let's  start ou discussion with the text and search type .,




Displaying the text and search type 

here in include rectangle text box that facilites a userto enter information , It is used to collect single line information , 




Creating a form 

Create using the form  element a web page  


<1doctype html>


<html>


<head>

<title> Form</Title>

</head>


<body>

start of form <FORM>

FORM 

</FORM>
Ending form 

</body>

</html>


                                                   see in  figure display on  form start and end 




Working with the input element 


<!Doctype html>


<html>

<head>


<title> Input </title>

</head>

<body>

<form>

Enter your name <input>

</Form>

</body>

</html>



output


                                                    display web page on form input textarea ,





Using the input element , You can add the following field on a forms,

  • Text field
  • Password field
  • Hidden field
  • Checkbox field
  • Radio button
  • Submit button firld
  • Reset button field 
Now let's start to  create all the these field on a web page,


Working with the text field 
  start text code in html form 

<!DOCTYPE HTML>

<HTML>


<HEAD>

<TITLE> TEXT </TITLE>

</HEAD>

<BODY>

<FORM>

Enter your username :<INPUT TYPE="TEXT" NAME="Username">

</FORM>

</BODY>

</HTML> 


Display output  usename form 






Using the tex value code 





include
  • size
  • maxlength
  • vale


Tye code here  value text amd size 

<!DOCTYPE HTML>
<HTML>

<HEAD>
<TITLE> text value </TITLE>
</HEAD>

<BODY>

<FORM>

Enter your two digit code number:<input ype="text" name="username" size="2" maxlength="2" value="00">

</FORM>

</BODY>

</HTML> 



Output  HeRe  WEB PAGE FORM 


                                                    Display the value text and size 






Working with field password 

  start code very easy  to  learn and type  and create password  (ek najar dekh lo easily set ho jaega mind m )

<!doctype html>
<html>

<head>
<title> password </title>
</head>

<body>

<form>

Password:<Input yype="password">

</form>

</body>

</html>

  ready  password code now see output on web page ,



                                                                  Display hese,




How to creaate password size code


see here very simple code type

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> PSWSIZE</TITLE>

</HEAD>


<BODY>
<form>

Enter pasword:<input ype="password" name="pw" size="10">

</form>

</body>
</html< 

Out put on web  page


                                                                                 Looking picture


 MAXLENGTH OF PASSWORD



Same code different some and add  maxlength

<!DOCTYPE HTML>

<HTML>

<HEAD>
<TITLE> CODE MAXLENGTH </TITLE>

</HEAD>

<BODY>

<FORM>
Enter your password:<input  type="password" name="pw" size="10" maxlength ="4">
</form>

</body>

</html> 



So guy's looking here password output ,
below

                                                               Web form pw




Now start how to make a value of password 


 simple and easy value password code ,( cool mind and see)

<!Doctype html>

<html>

<head>

<title> value of password </title>

</head>


<body>


<form>

Enter password: <input type="password" name="pw" size="10" maxlength="5" value="dreamtech">

</form>

</body>
</html> 

 Ready  output  web page form value of password ,


                                                                               Display output 






Hidden field  code type show below:

<!Doctype html>

<html>

<head>

<title> hidden field</title>

</head>

<body>

<form>

 User name :<input id ="name="text"  /> <br>
<input type="hidden" id="country" value="india"><br>
<input type="submit"  onclick="alert('Hellow '+
document.getelementById('name'),value +'from'+
document.getelementById('country').value)" value="submit">

</Form>

</body>

</html> 



 results here in picture



                                                                      hidden  name submit

 Create web page and show out then input name and submit , your name is hidden and show click text box,




Creating a check box field 



Check boxees allows you to select one or more number of iteems from the list of items , you can add the checkboxes field on the web page , by specify the type attribute INPUT element to checkbox 


Show the checkbox code 

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>


<FORM>

Select one o the three choices :</br>

<INPUT type="checkbox" name="option1" value="india" > India  </BR>
<input  type="checkbox"  name="option2"   value="Pakistan"> Pakistan </br>
<input type="checkbox" name= "option3" value="China"> China </br>
<input type="checkbox" name="option4"  value="singapur"> Singapur</br>



</FORM>

</BODY>
</HTML>




                                                             se display on picture checkbox




Creating  a radio button 



, its creating radio button  , use tis button  in form select gender male nad femel and other , and  option  select ,  on web page



<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>


<FORM>

Select one o the three choices :</br>

<input type="radio" name="group1" value="mobile"> mobile</br>
<input type="radio" name="group2" value="smart mobile"> smart mobile</br>
<input type="radio" name= "group3"  value="laptop" > laptop </br>
<input type="radio" name="group4" value="mouse"> mouse</br>


</FORM>

</BODY>
</HTML>





                                                     see display readio button on form




Creating a submit button field 

The submit button use to submit detail s entered in a form to the server ,Let's create a web page ,




<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>


<FORM>

Username:<input type="test"  name="username" value="dreatech"> </br>
Password:<input type="password"  name="password" value="kogent"> </br>
<input type="submit" name="submit"  value="click1"></br>  


</FORM>

</BODY>
</HTML>

  Output :






Creating reset butto and include submit in form 



 Already disscuss about submit button so  reset button  clear data and input new username and password , this called reset


<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> checkbox </TITLE>

</HEAD>

<BODY>


<FORM>

Username:<input type="test"  name="username" value="dreatech"> </br>
Password:<input type="password"  name="password" value="kogent"> </br>
<input type="submit" name="submit"  value="click1"></br>
<input type="reset " name="reset"  value="reset"> </br>


</FORM>

</BODY>
</HTML>



USING SELECT AND OPTION ELEMENT 


  Nnw disscuss here option value work select any other option as like you have ten  things if  you want to selec one  then use option ,


<!DOCTYPE HTML>
<HTML>

<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>

<BODY>

<FORM>
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html> 



                                                                         see on figure ,




Select option  body color 

  add one code
(<body bgcolor="yellow">)

There add one code change form background color , very easy option and select coede ,

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY bgcolor="yellow">
<FORM>
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html> 




                                                                  see output on picture





SELECT AND OPTION  CHANGE ALIGEMENT 



Aligement change  this option elemnt add aligement code <center, left, right>
 below 





<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT>

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html> 


                                                                       see display on form in  align





Option and select size 



Here code is  option element change size this element ,

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT size="10">

<OPTION value="mango" >Mango</option>
<option value="banana"> banana </option>
<option value="apple"> apple</option>
</option value="orange"> orange</option>
</select>

</form>
</body>
</html> 



output this code


                                                    see on picture  option element




Using the option group element 



The OPTION GROUP element  is used to group the list of option and display in the deop down list
Let's create 




<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> group  OPTION ELEMENT</TITLE>
</HEAD>
<BODY>
<FORM align="center">
Select anyone fruites </br>
<SELECT>

<OPTGROUP level="Fruties">
<option value="orange"> orange</option>
<option value=" mango"> mango</option>
<option value="apple"> apple</option>
<option value="grapes ">grapes</ption>
</select>



</form>
</body>
</html> 


                                                                               see output 



Working with the text area element 


<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> TEXTAREA </TITLE>

</HEAD>

<BODY>

<TEXTAREA>

 Enter the text here

</TEXTAREA>

</form>

</body>

</html> 



                                                               OUTPUT textarea



Using the field set and legend element 



 Fileset elemnt group related control in a single box and the legend elements provide the caption for that box,,




<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Grouping </TITLE>

</HEAD>

<BODY>

<FORM>

<FIELDSET>

<LEGEND> Log in </LEGEND>

<level>

usernae
<input type="text" name="name" value ="Username"></br>
</level>
<br>
<level>
Password<input type="password">
</level>
</BR>
<level>
<input type="Submit" name="Submit" value="Submit">
</level>
</Fieldset>
</legend>

</form>
</body>
</html> 










Using the BUTTON ELEMENT 




!<DOCTYPE HTML>

<HTML>

<TITLE>  Using the butto element </title>


</head>

<body>


<p> simple submit button </p>

<Button type="submit"> submit</button>


<hr>


<p> Changing the font of the button </p>

<Button type="button" style="color:red;font-size:20px;">

<b> Submit</b>

</button>


</body>


</html> 


















Image button display  using back and font button 





The BUTTON element allows you to a display the image on the button control , let's create web page


<!DOCTYPE  HTML>


<HTML>


<HEAD>


<TITLE> Display image button </TITLE>


</head>


<body>


<p> Display image on button </p>

<Button type="Button">

<img src="back.png" width="50" height="50"/>



</button>


<button type="submit">


<img src="next.png" width="50" height="50">

</button>

</body>


</html>


 The button element back and next






NEXT

  • Datalist
  • keygen element
  • outputelement
  • meter




Using the datalist  element 

 You can create a list  of predefined options in a field using the DATALIST
  Element  Let's create a web page

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> dATALIST </title>

</HEAD>


<BODY>

<P>ENTER  THE NAME OF YOUR FAVIROUITE CAR :</P>

<INPUT  type="text" name="favcar" list="car">

<datalist id="cars">


<option value="BLW">
<option value="porsche">
<option value="audi">
<ption value="ford">
<option value="Ferrari">
<option value="wercedes">

</DATALIST>

</BODY>

</HTML>


 display here output  on figure,





Keygen element  using 

The element keygen is need to generated the key pair at the  time of submiting the form, let's create web page

 <!DOCTYPE HTML>

<html>

<head>

<title> keygen </title>

</head>

<body>

 <FORM action ="option.html" methodt="post" enctype="text/plain">

First name:<input type="text" name="name">

</br>

Last name:<input type="text" name="name"></br>

<KEYGEN name="key" challenge="09856413145" keytype="RSA">

<input type="submit" value="submit"/>

</FORM>

</BODY>

</HTML> 


 Display her output




                                                           disply post page ,(option.html>






Using the progress element 




As alerdy disscuss about element ,  you can view the progress of your current task with the help of the PROGRESS.element


<!DOCTYPE HTML>

<html>

<head>

<title> progress element </title>

</head>

<body BGCOLOR="grey">

Current task</BR>

</BR>
<PROGRESS value="200"  max="500">

</PROGRESS>

</FORM>

</BODY>

</HTML> 


  progress  element output on thist page


Using the meter element 


<!DOCTYPE HTML>

<html>

<head>

<title> METER ELEMENT  </title>

</head>

<body>

<Meter value="5" min="0" max="10" style="width:200px"> </METER> Passing score </br>

<METER value="10" min="1" max="20" style="width="300px"> </METER> your score</br>

</BODY>

</HTML>



 output in this figure meter element
below:







USING THE ENCTYPE, ACTION, METHOD  ATTRIBUTE 

The enctype attribute use the specify the format of the form's content at the time of submission ,

<!DOCTYPE HTML>

<HTML>

<HEAD>
<

<TITLE> USING THE ENCTYPE ACTION METHOD  </TITLE>
 </HEAD>

<BODY>

<FORM action="action.asp" method="get" enctype="text/plain">

Fiest name="<input type="text" name="frame"  />

Last name:<input type="text"  name="fname" />

<input type="submit" value="submit" />

</form>

</body>

</html>





output below in this picture :

                                                                    display






  then add its code action form and method

Monday, 29 October 2018

How do make hyperlink


REFERENCE PAGE 


<!DOCTYPE HTML>

<HTML>

<TITLE> LINK </TITLE>

</HEAD>


<BODY BGCOLOR="GREY">


<H> Referance page </h>

<a href="www.google.com> Google l link </a>


</body>


</html>



Using the   target Attribute 

As alreadey discussed, the target attribute of the , A element is used to specify the frame or the window in which you want to open the reference page,



Using the id attribute 

as already disscused   unique identifiyer ,


<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Creating a hyper link with id attribute </TITLE>

</HEAD>

<BODY>

<H1>This is a top</h1>


<A Id ="top"></a>

<a href="#middle"> Go to middle </a>


</br><A href="#bottom"> Go to bottom </a>

<h1> This is top </h1>

</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>

<h> This is middle </h>
<A id="middle"></A>
<A href=#top"> Go to bottom </a>

<h> This is middle </h>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>



<H> This is bottom</h>
<A ID-"bottom"></a>
<A HREF="#TOP"> GO TO MIDDLE </A>
</BR>

<A HREF="#MIDDLE"> Go to middle </a>
<h1> This is bottom </h>



</br></br></br></br>/br></br></br></br>
</br></br></br></br>/br></br></br></br>

</body>


</html> 







Linking to a mail system


<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Linking to mail system </TITLE>

</HEAD>



<Body bgcolor="pink">



<h1> <A href="mallto:info@kogentindia.co"> E-mail    us </a></h1>


</BODY>

</HTML>









IMPLEMENTING LINK RELATIONS 



The ref attribute of the link element is used to connect the external resource  with the current document Foe instance if you want to link your document  to external stylesheet,


<!DOCTYPE HTML>

<HTML>


<TIELE> Link relation </TITLE>

<Link ref=stylesheet"href="/example.css"/>

</HEAD>

<BODY>

<H1> This is an example of the link relation </h1>

<p> Here is some text to be displayed as the the body of the web page </p>

</body>

</html>











Using relation link

 body {

colr:ff0000;

background-color:pink;

font:family: couter new;

}

h1


}

font-size:18pt
color:pink;

p

}

font-size:12pt
}













Creating tables 

  1. Creating a simple table
  2. Adding a title to column 
  3. Adding caption to a table 
  4. Specify the propertiecs of the column 
  5. spaning rows and columns 
  6. Using table in the image 
  7. Creating advanced table 
  8. Nesting tables 


In depth 

Hypertext markup language is designed to enforce  the proper sepration  of structure and grphic is a web page , if you html document contain simple then text it is also important , that the content should be structured in a manner that makes it clear and readable , To represent the web  page , in an organized manners , headers paragraph and lines brakets are commonly used in a HTML document, Apart from this  HTML  also provides the table to structure the content in an  HTML document , 
A table in an orderly management of data that is stored in the form of rows and columns  , web designers use table for multiple purpose , such as positioning image and text or web pages (page layout)  displaying large arays data and creating input forms, suppose u need to design a weeb page to display , then you can use table s to display the information in a structure manner, HTML provied the TABLE element to create table and display the respective information in a tabular  format, These elements are
  • Caption 
  • colorgroup
  • col
  • thead
  • tfoot
  • tr
  • td
  • th
Here first learn about table , Next you learn about the TABLE  element, FUTHER, you learn about the child elemnt of the TABLE element , including the CAPTION element, the COLGROUP  element, the COL element , the BODY element  the HEADelementthe TFOOT, element, the TR element the Td element, and the TH element  in the immediate solutions section ,




Understing table 
Table allow you to organize data such as text image and links in the form of rows the colums , Each tan=ble cointan an associated caption that provied  a small description about all content avilable in the table , You can use tables to represent information in an orgnized manner and of format a web page , Table are used on web sites for two major purpose 



<TABLE>

-the  table element the data 


</TABLE>

THE CAPTION ELEMENT 


The CAPTION element is used the caption of a table and is used in conjuction with the TABLE element, A table should have only one CAPTION element and it must be placed after starting tag of the  TABLE element,



<TABLE>

<CAPTION>

Here goes the caption of a table

</CAPTION>

</TABLE>



The colgroup element 

<TABLE>


<CAPTION>


Here goes the caption of a table ,

</CAPTION>


<Colgroup  span="3" style="color:blue">


<Colgroup>

</TBLE> 




The COL element 



<Table>

<col style="background-color:green/>
<col style="background-color:orange />

</Table>



The TBODY element 



<Table>

<THEAD>

<THEAD>

<TFOOT>

</TFOOT>

<TBODY>

<TR>
<TD> tHIS IS FIRST CELL OF THE TABLE </td>

<Td> This is the second cell of the table </td>
<tr>

</Table>





see here cell,



Immediate solution 



<!Doctype html>

<html>

<head>

<title> a simple table</title>

</head>

<Table>

<tr>

<td>001</td>
<td>Harish</td>
<td>15/02/2018</td>
<td>D-23, vijay nagar txt, delhi </td>

</tr>

<tr>
<td> 003</td>
<td> Deepak pandey </td>
<td>26/01/2018</td>
<td> nagar new delhi </td>
</tr>

<tr> <td> 004</td>
<td> Rohit </td>
<td> 25/11/1970</td>
<td>h,no-123, south text , delhi </td>
</tr>

</TABLE> 




see sample table 


ADDITING A TITLE TO A COLUMN


<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>


<Table border="1">

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>


</TABLE> 






see , table with the column title 




Table body color 





<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>

<body bgcolor="red">
<Table border="1" align="center"> 

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>


</TABLE> 






see, body color,






Creating table aligment 




<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>

<body>
<Table border="1" align="center"> 

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>
</br>

<body bgcolor="blue">
<Table border="1" align="right"> 

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>

</br></br></br> 
<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deep </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 17, Gurugram</td>
</tr>
</br></br></br>
<body bgcolor="red">
<Table border="1" align="left"> 

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Mark Batiya  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 50,Noida </td>
</tr>
</br></br></br>

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Devi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe28, Gurugram</td>
</tr>

</TABLE> 



employee





Employee details 







<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>

<body>
<Table border="1" align="center"> 

<tr style="backgroud-color:green">
<Th> Emp details</th>
<th>Emp name </th>
<th>dob</th>
<th>>doj</th>
<th>>Address</th>
<tr>

</br<
<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>
</br>


<Table border="1" align="right"> 

<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>

</br></br></br> 
<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deep </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 17, Gurugram</td>
</tr>
</br></br></br>
<body bgcolor="red">
<Table border="1">

<tr>
<Td> Emp details</td> 
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Mark Batiya  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 50,Noida </td>
</tr>
</br></br></br>

<tr>
<Td Emp details </td> 
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Devi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe28, Gurugram</td>
</tr>

</TABLE> 








Cell color in table 





<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>

<body>
<Table border="1">
<caption>
<b> Here employee details again </b>
</caption>
<COL style="background-color:green"/>
<COL style="background-color:orange"/>

<tr>
<Th> Emp details</th>
<th>Emp name </th>
<th>dob</th>
<th>>doj</th>
<th>>Address</th>
<tr>

</br<
<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>
</br>




<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>

</br></br></br> 
<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deep </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 17, Gurugram</td>
</tr>
</br></br></br>
<body bgcolor="red">
<Table border="1">

<tr>
<Td> Emp details</td> 
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Mark Batiya  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 50,Noida </td>
</tr>
</br></br></br>

<tr>
<Td Emp details </td> 
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Devi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe28, Gurugram</td>
</tr>

</TABLE> 






see, celcolor



<!Doctype html>

<html>

<head>

<title> Adding a title to acolumns </TITLE>


</head>

<body>
<Table border="1">
<caption>
<b> Here employee details again </b>
</caption>
<COL style="background-color:green"/>
<COL style="background-color:orange"/>
<Col style="background-color:pink"/>
<col style ="background-color:blue" /> 
<col style="background-color:yellow" />

<tr>
<Th> Emp details</th>
<th>Emp name </th>
<th>dob</th>
<th>>doj</th>
<th>>Address</th>
<tr>

</br
<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>


<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deepanshi  </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Gurugram</td>
</tr>
</br>




<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 001</th>
<td>Harish </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 62, Noida </td>
</tr>

</br></br></br> 
<tr>
<Th> Emp</th>
<td>Emp name </td>
<td>dob</td>
<td>doj</td>
<td>Address</td>
<tr>


<tr>
<th> 002</th>
<td>Deep </td>
<td>31/12/1990</td>
<td>01-01-2009</td>
<td> nodia, sectoe 17, Gurugram</td>
</tr>


</TABLE> 











Spanning rows and column

When yoe work with table s, it is sometimesrequired to combine one or more adjucement cellsinto one cells. The process of combining one or more adjecementcellsis know spanning , , you can span cells either , vertical or horizentally,


<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Spaning rows in the table </Title>

</HEAD>

<body>
<table border="1">
<caption><b>
Student details</b> </caption>



<tr>

<th>Student id </th>
<th>Student name </th>
<th> Date of birth</th>
<th> Address </th>
</tr>

<tr>
<td>001</td>
<td>Deepak </td>
<td>12/2/1992</td>
<td> ssector 26, New Delhi </td>
</tr>

<tr>
<td>003</td>
<td> Mark </td>
<td>20/1/1993</td>
<td> Isarland </td>
</tr>

<tr>
<td>004</td>
<td> doni</td>
<td>2/02/1990</td>
<td> America </td>
</tr>

<tr>
<td>005</td>
<td>Mantex kat </td>
<td>01/2/1995</td>
<td> affirca </td>
</tr>

<tr>
<td> 006</td>
<td> Sauthanic </td>
<td> 5/06/1996</td>
<td> South, america </td>
</tr>
</table>
</body>
</html>




                                                                    see figure 

Image Taable 


<!DOCTYPE HTML>

<HTML>
<HEAD> 
<TITLE> Using is the image in the table </Title>

</Head>

<body>
<table border="1">
<Tr>
<th> Tic </th>

</tr>


<tr>
<td><img src="C:\Users\intel\Pictures\download (6).jpg" \>
</td>
</tr>
</table>
</body>
</html> 


                                                                             see figure, in html 



 IMAGE ALIGMENT 




<!DOCTYPE HTML>

<html>

<head>

<tittle> image </title>

<body>

<p> IMAGE ALL <p>
</br>

<center>

<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100">
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
</center>

</br>
<right>

<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">  
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> <img>


</right>

</body>
</html>









Displaying Image by codeing 


<!DOCTYPE HTML>
<html>
<head>
<tittle> image </title>

<body>
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img>
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></img>
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
<img src="C:\Users\intel\Downloads\jobs\14.JPG"  WIDTH="100" HEIGTH="100"></IMG >
<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" > </img> 
</br></br>
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">  
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">  
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">  
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
 <Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">  
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100">
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> 
<Img src="C:\Users\intel\Downloads\jobs\18.JPG" WIDTH="100" HEIGHT="100"> <img>

</body>
/HTML> 




see image . figure 



Image border 


<!DOCTYPE HTML>
<html>
<head>
<tittle> image </title>

<body>

<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="100" height="100" border="4" > </img>


</body>
</html>





Image - size


<!DOCTYPE HTML>

<html>

<head>
<tittle> image </title>


<body>

<IMAGE SRC="C:\Users\intel\Downloads\jobs\26.JPG" Width="600" height="700"> > </img


</body>
</html>




 see here image size ,


Gif




<!DOCTYPE HTML>
<html>
<head>
<tittle> gif </title>

<body>

<IMAGE SRC="C:\Users\intel\Music\gif.PNG" width="100" height="100"> </img> 


</body>
</html>



see gif  




Displaying altimae Text for an image 

Displaying altermate text for in image , sometimes , you insert image in a web page , which file todisplay due to various reasons , such as internet path or invalid file name , In such as case , you can specify altermate text to an image that is displayed even if the image in not visiual on the web page 



<!DOCTYPE HTML>
<html>
<head>
<tittle>  alternet text </title>

<body>

<h1> Displaying altermate text for an image </h1>
<img ser="progress.pnh" alt="progress bar" />
</img>



</body>
</html>






see figure 




 Modify the heading size of the image 






<!DOCTYPE HTML>
<html>
<head>
<tittle>  alternet text </title>

<body>

<h1>Specify  size of the image </h1> 
<img src="C:\Users\intel\Music\laptop.JPG" width="100" height="60" />

<h2> Simple image </h2>
<img src="C:\Users\intel\Music\pink lappy.JPG" \></IMG>



</body>
</html>












Image hyperlink 


You can use image hyperlink in hte same way as a hyperlink , You wish to provide information about the image , you can use the hyperlink , in the web page ,  web can create the hyperlink and them add an image to a hyperlink , 






<!DOCTYPE HTML>
<html>
<head>
<tittle>  alternet text </title>

<body>

<h1>Specify  size of the image </h1> 
<a href="C:\Users\intel\Desktop\codeing 123\image.big" \>
 <img src="C:\Users\intel\Music\pink lappy.JPG" \></IMG></a> 




</body>
</html>



Using color name 



<!DOCTYOE HTML>

<HTML>

<HEAD>

<TITLE> Using color name </TITLE>

</HEAD>

<Body text="Red">

<h2> Welcome to  the world of html </h2> 
<h3> specify body text color </h3>

</body>

</html> 





                                       Display the output bodytext color 






Using the hex value 

Insted of using the color you can  use the Hex value of colors to specify a color on web page  , 

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Using the Hex  value </Title>

</HEAD>

<bODY text="#ff0000">

 WELCOME TO THE WORLD OF HTML

</BODY>
</HTML> 

















Easy lear coding  hml image tage beatiful type , then display web browser 

  •  Hyerlink image tage
  • Target 
  • Progress bar
  • size
  • height/ width
  • border
  • color
  •  area shpae
  • map
  •  border



USING THE RGB CONFIGURATION 



The RGB color   is the set of three dials , Whwere the first dial representes red, second dial represent green , and third dial blue color ,  create the web page , 
Let's go 



<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Using color hex value </TITLE>

</HEAD>

<BODY text="rgp(255,0,0")">


<H2> welcome to the html hex world </H2>

</BODY>

</HTML>



Implemention the CANVAS element




Canvas element  used to display 2D shaps and graphical on a web page