User:Elina Real Teaching Lesson Plan 15: Difference between revisions

From ICTED-WIKI
Jump to navigation Jump to search
(Created page with "Specific Objective: At the end of this class, student will be able to: Understand the concept of the HTML table, create a table and assign data in tabular form. Teaching Material: Whiteboard, marker, computer with text editor(noteppad,vs code). Browser for testing(chrome and ms edge). Introduction: Start by asking a questions about HTML tags, Encourage them to share their thought, HTML table tag is used to display data in tabular form (row * column). There can be many co...")
 
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
Specific Objective:
{| class="wikitable"
|+
!Subject:Computer Science
!Class:8"A"
|-
|Unit:17
|Topic:Table in HTML
|-
|Period:7th
|Time:45min
|-
|School:Adarsha Secondary School
|no of student:64
|}
 
== Specific Objective: ==
At the end of this class, student will be able to:
At the end of this class, student will be able to:
Understand the concept of the HTML table,
 
create a table and assign data in tabular form.
* Understand the concept of the HTML table,
Teaching Material:
* create a table and assign data in tabular form.
Whiteboard, marker,
 
computer with text editor(noteppad,vs code).
== Teaching Material: ==
Browser for testing(chrome and ms edge).
 
Introduction:
* Whiteboard, marker,
Start by asking a questions about HTML tags,
* computer with text editor(noteppad,vs code).
Encourage them to share their thought,
* Browser for testing(chrome and ms edge).
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
 
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
== Introduction: ==
In each table , table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
 
HTML table used to manage the layout of the page e.g header section, navigation bar, body content, footer section etc
* Start by asking a questions about HTML tags,
But it is recommended to use div tag over table to manage the layout of the page .
* Encourage them to share their thought,
HTML table tag:
* HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
Class Room Activity:
* We can create a table to display data in tabular form, using element,  using <nowiki><table> element, with the help of <tr></nowiki> , <nowiki><td></nowiki>, and <nowiki><th> elements.</nowiki>
Have student open their prefered text editor and create a new HTML document,
* In each table , table row is defined by <nowiki><tr></nowiki> tag, table header is defined by <nowiki><th>, and table data is defined by <td></nowiki> tags.
Demonstarte how to create a simple table structure using <table> , <tr>, <td> , and <th> tages,
* HTML table used to manage the layout of the page e.g header section, navigation bar, body content, footer section etc
Create a tabe that include header and a few row of data,
* But it is recommended to use div tag over table to manage the layout of the page .
for example:
 
Conclusion:
== HTML table tag: ==
Summarize a ey points about HTML tables discussed during the lesson,
{| class="wikitable"
Encourage students to practice table on their own and explore more advanced table functionalities.
|+
Assessment:
!Tag
How to create table in HTML with exampes?
!Description
How to create table in HTML with border?
|-
create a table using your own personal data(Name,DOB,address and email id).
|<nowiki><table></nowiki>
|Define a table
|-
|<nowiki><th></nowiki>
|Define a header cell in table
|-
|<nowiki><tr></nowiki>
|Define a row in a table
|-
|<nowiki><td></nowiki>
|Define a cell in a table
|-
|<nowiki><caption></nowiki>
|Define a table caption
|-
|<colgroup>
|Specifies a group of one or more column in a table for formating
|-
|<col>
|Specifies a colum properties for each column within a <colgroup> element.
|-
|<thead>
|Group the header content in a table.
|-
|<tbody>
|Group the body content in a table.
|-
|<tfoot>
|Group the footer content in a table.
|}
 
== Class Room Activity: ==
 
* Have student open their prefered text editor and create a new HTML document.
* Demonstarte how to create a simple table structure using <nowiki><table>, <tr></nowiki>, <nowiki><td></nowiki> and <nowiki><th> tags.</nowiki>
* Create a table that include header and a few row of data.
* '''[[Table:]]'''
<table border="1"> 
<tr><th>First_Name</th><th>Last_Name</th><th>District</th></tr> 
<tr><td>Elina</td><td>Bastola</td><td>Solukhumbu</td></tr> 
<tr><td>Ansha </td><td>kandel</td><td>Dhading</td></tr> 
<tr><td>Aasha</td><td>Parajuli</td><td>Kavrepalanchok</td></tr> 
<tr><td>Ashmita</td><td>Shrestha</td><td>Tanahu</td></tr> 
</table>
 
== Conclusion: ==
 
* Summarize a ey points about HTML tables discussed during the lesson,
 
* Encourage students to practice table on their own and explore more advanced table functionalities,
 
== Assessment: ==
 
# How create table in web page ?write a step.
# How to create table in HTML document with border.
# Create a table using your personal data( Name,DOB,Address,email id).

Latest revision as of 23:03, 2 February 2024

Subject:Computer Science Class:8"A"
Unit:17 Topic:Table in HTML
Period:7th Time:45min
School:Adarsha Secondary School no of student:64

Specific Objective:

At the end of this class, student will be able to:

  • Understand the concept of the HTML table,
  • create a table and assign data in tabular form.

Teaching Material:

  • Whiteboard, marker,
  • computer with text editor(noteppad,vs code).
  • Browser for testing(chrome and ms edge).

Introduction:

  • Start by asking a questions about HTML tags,
  • Encourage them to share their thought,
  • HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
  • We can create a table to display data in tabular form, using element, using <table> element, with the help of <tr> , <td>, and <th> elements.
  • In each table , table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
  • HTML table used to manage the layout of the page e.g header section, navigation bar, body content, footer section etc
  • But it is recommended to use div tag over table to manage the layout of the page .

HTML table tag:

Tag Description
<table> Define a table
<th> Define a header cell in table
<tr> Define a row in a table
<td> Define a cell in a table
<caption> Define a table caption
<colgroup> Specifies a group of one or more column in a table for formating
<col> Specifies a colum properties for each column within a <colgroup> element.
<thead> Group the header content in a table.
<tbody> Group the body content in a table.
<tfoot> Group the footer content in a table.

Class Room Activity:

  • Have student open their prefered text editor and create a new HTML document.
  • Demonstarte how to create a simple table structure using <table>, <tr>, <td> and <th> tags.
  • Create a table that include header and a few row of data.
  • Table:
First_NameLast_NameDistrict
ElinaBastolaSolukhumbu
Ansha kandelDhading
AashaParajuliKavrepalanchok
AshmitaShresthaTanahu

Conclusion:

  • Summarize a ey points about HTML tables discussed during the lesson,
  • Encourage students to practice table on their own and explore more advanced table functionalities,

Assessment:

  1. How create table in web page ?write a step.
  2. How to create table in HTML document with border.
  3. Create a table using your personal data( Name,DOB,Address,email id).