diff --git a/en/application-dev/ui/ui-ts-components-web.md b/en/application-dev/ui/ui-ts-components-web.md
index c1a6363dfd7588d4ad9854539b1d8d54f47ef8c1..0d66b70e6d6569b7d7b8b9943e1cf3cc541d0fdb 100644
--- a/en/application-dev/ui/ui-ts-components-web.md
+++ b/en/application-dev/ui/ui-ts-components-web.md
@@ -1,10 +1,10 @@
 # Web
 
-The \<Web> component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
+The **\<Web>** component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
 
 ## Creating a Component
 
-Create a \<Web> component in the .ets file under main/ets/MainAbility/pages. Then, in the created component, use src to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
+Create a **\<Web>** component in the .ets file under **main/ets/MainAbility/pages**. Then, in the created component, use **src** to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
 
   ```
   // xxx.ets
@@ -22,7 +22,7 @@ Create a \<Web> component in the .ets file under main/ets/MainAbility/pages. The
 
 ## Setting Styles and Attributes
 
-When using the \<Web> component, you need to specify the styles and attributes. The sample code is as follows.
+When using the **\<Web>** component, you need to specify the styles and attributes. The sample code is as follows.
 
 ```
 // xxx.ets
@@ -50,7 +50,7 @@ struct WebComponent {
 ```
 ## Adding Events and Methods
 
-Add the onProgressChange event for the \<Web> component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the \<Progress> component to control the status of the component. When the progress reaches 100%, the \<Progress> component is hidden, and the web page loading is complete.
+Add the **onProgressChange** event for the **\<Web>** component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the **\<Progress>** component to control the status of the component. When the progress reaches 100%, the **\<Progress>** component is hidden, and the web page loading is complete.
 
 ```
 // xxx.ets
@@ -89,7 +89,7 @@ struct WebComponent {
   }
 }
 ```
-Add the runJavaScript method to the onPageEnd event. The onPageEnd event is triggered when the web page finishes loading. In this case, the runJavaScript method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the onPageEnd event is triggered to call the test method in the HTML file and print information on the console.
+Add the **runJavaScript** method to the **onPageEnd** event. The **onPageEnd** event is triggered when the web page finishes loading. In this case, the **runJavaScript** method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the **onPageEnd** event is triggered to call the **test** method in the HTML file and print information on the console.
 
 ```
 // xxx.ets
@@ -134,7 +134,7 @@ struct WebComponent {
 }
 ```
 
-Create an HTML file in main/resources/rawfile.
+Create an HTML file in **main/resources/rawfile**.
 
 ```
 <!-- index.html -->
@@ -153,31 +153,31 @@ Create an HTML file in main/resources/rawfile.
 ```
 ## Scenario Example
 
-In this example, you'll implement a \<Web> component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the \<Web> component controller to invoke the onActive and onInactive methods to activate and pause page rendering, respectively. When the page is hidden, the \<Web> component stops rendering and the video playback pauses. When the page is displayed, the \<Web> component is activated and the video playback resumes.
+In this example, you'll implement a **\<Web>** component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the **\<Web>** component controller to invoke the **onActive** and **onInactive** methods to activate and pause page rendering, respectively. Upon clicking of the **onInactive** button, the **\<Web>** component stops rendering and the video playback pauses. Upon clicking of the **onActive** button, the **\<Web>** component is activated and the video playback resumes.
 
   ```
   // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController();
-    build() {
-      Column() {
-        Web({ src: $rawfile('index.html'), controller: this.controller })
-        .fileAccess(true)
+@Entry
+@Component
+struct WebComponent {
+  controller: WebController = new WebController();
+  build() {
+    Column() {
+      Row() {
+        Button('onActive').onClick(() => {
+          console.info("Web Component onActive");
+          this.controller.onActive();
+        })
+        Button('onInactive').onClick(() => {
+          console.info("Web Component onInactive");
+          this.controller.onInactive();
+        })
       }
-    }
-
-    onPageHide() {
-      // Invoked when the page is hidden.
-      this.controller.onInactive();
-    }
-
-    onPageShow() {
-      // Invoked when the page is displayed.
-      this.controller.onActive();
+      Web({ src: $rawfile('index.html'), controller: this.controller })
+        .fileAccess(true)
     }
   }
+}
   ```
 
   ```