SlideShare a Scribd company logo
1 of 18
Web
Development
Level 2-Bio
Dr./ Zainab Hassan Ali Hassan- Lecturer at the Department of Embedded Networks and
Technology- Faculty of Artificial Intelligence, Kafrelsheikh University
In This Chapter
2
 Image Format
 Image Map
 Table Structure
 Forms
3
PART 1
Img Format:
4
<!DOCTYPE html>
<html>
<head>
<title> lec2 </title>
</head>
<body>
<img width="1038px" height="778px" alt="This
img for dna"
src="dna.jpg" align="right" />
</body>
</html>
Img Map:
5
<!DOCTYPE html>
<html>
<head> <title> Map Img </title></head>
<body>
<img src="Map.jpg" usemap="#area1">
<map name="area1">
<area shape="circle" coords="385,547,385"
href="https://www.yourgenome.org/video/dna-replication">
</area>
<area shape="regtagle" coords="373,119,949,600"
href="https://www.w3schools.com/tags/att_img_longdesc.asp"
>
</area>
</map>
</body>
</html>
Iframe:
6
<html>
<head> <title> iframe</title></head>
<body>
<iframe height="500" width="600" scrolling="no"
src="lec2.html"></iframe>
</body>
</html>
Img Map: Cont.
7
<html>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/zdPcqeoukUI"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27327.8943431735!2d30
.95769373842958!3d31.11009910990372!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!
1m2!1s0x14f7ab78f233021f%3A0xc2cdebb004a208f8!2z2YPZgdixINin2YTYtNmK2K7YjCDZgtiz
2YUg2YPZgdixINin2YTYtNmK2K7YjCDZg9mB2LEg2KfZhNi02YrYrtiMINin2YTYutix2KjZitip!5e0
!3m2!1sar!2seg!4v1645994958262!5m2!1sar!2seg"
width="600" height="450" style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</body>
</html>
Table Structure:
8
Table 1
ID Name
This table contains data about AI
students
Table Tag:
9
<table width=“100”%" border="2px">
<caption> Table1: AI Students</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> 1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
Table Tag:
10
<table width="30%" border="1">
<tr>
<td colspan="2">Full Name</td>
<td>No.</td>
</tr>
<tr>
<th>Fname</th>
<th>Lname</th>
<th>ID</th>
</tr>
<tr>
<td>Zainab</td>
<td>Hassan</td>
<td>1000</td>
</tr>
</table>
Forms:
11
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form>
<label>First name:</label><br>
<input type="text” value="Enter first name"><br>
<label>Last name:</label><br>
<input type="text" value="Enter last name"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button.</p>
</body>
</html>
Forms: Cont.
12
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<form>
<label>Birthday:</label>
<input type="date">
<input type="submit" value="Submit">
</form>
</body>
</html>
- Input type date
Forms: Cont.
13
<!DOCTYPE html>
<html>
<body>
<h2>Show a Color Picker</h2>
<form>
<label>Select your favourite Color:</label>
<input type="color" value="#ff0000">
<input type="submit" value="Submit">
</form>
</body>
</html>
- Input type color
Forms: Cont.
14
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<form>
<input type="checkbox">
<label > I have a bike</label><br>
<input type="checkbox">
<label> I have a car</label><br>
<input type="checkbox">
<label> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- Input type checkbox
Forms: Cont.
15
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello World!')"
value="Click Me!">
</body>
</html>
- Alert message
Forms: Cont.
16
<!DOCTYPE html>
<html>
<body>
<h1>File upload</h1>
<p>Show a file-select field which allows a file to be chosen
for upload:</p>
<form>
<label >Select a file:</label>
<input type="file"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- Input type File
Activity 1
17
Create the following table
Full Name Address Hire-date
First Last
There is no data about this cell
Enter your data
Thank You
18

More Related Content

Similar to L2Web.pptx

Private slideshow
Private slideshowPrivate slideshow
Private slideshow
sblackman
 
网站无障碍阅读知识
网站无障碍阅读知识网站无障碍阅读知识
网站无障碍阅读知识
ppanyong
 
网站无障碍阅读知识
网站无障碍阅读知识网站无障碍阅读知识
网站无障碍阅读知识
ppanyong
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
Igor Bronovskyy
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 

Similar to L2Web.pptx (20)

Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Responsive design
Responsive designResponsive design
Responsive design
 
Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010Scraping with Python for Fun and Profit - PyCon India 2010
Scraping with Python for Fun and Profit - PyCon India 2010
 
Bhanu Pratap Singh Shekhawat, BCA Third Year
Bhanu Pratap Singh Shekhawat, BCA Third YearBhanu Pratap Singh Shekhawat, BCA Third Year
Bhanu Pratap Singh Shekhawat, BCA Third Year
 
Test upload
Test uploadTest upload
Test upload
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
网站无障碍阅读知识
网站无障碍阅读知识网站无障碍阅读知识
网站无障碍阅读知识
 
网站无障碍阅读知识
网站无障碍阅读知识网站无障碍阅读知识
网站无障碍阅读知识
 
DOM.pptx
DOM.pptxDOM.pptx
DOM.pptx
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
bootstrap.pptx
bootstrap.pptxbootstrap.pptx
bootstrap.pptx
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
Web technology
Web technologyWeb technology
Web technology
 
RCEC Email 8.14.03
RCEC Email 8.14.03RCEC Email 8.14.03
RCEC Email 8.14.03
 
The new static resources framework
The new static resources frameworkThe new static resources framework
The new static resources framework
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 

More from samaghorab

Lec+3-Introduction-to-Distributed-Systems.pdf
Lec+3-Introduction-to-Distributed-Systems.pdfLec+3-Introduction-to-Distributed-Systems.pdf
Lec+3-Introduction-to-Distributed-Systems.pdf
samaghorab
 
Lecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdfLecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdf
samaghorab
 
Lec_1_Integration.ppt
Lec_1_Integration.pptLec_1_Integration.ppt
Lec_1_Integration.ppt
samaghorab
 
Chapter+3+-+Normalization.pdf
Chapter+3+-+Normalization.pdfChapter+3+-+Normalization.pdf
Chapter+3+-+Normalization.pdf
samaghorab
 
Lecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdfLecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdf
samaghorab
 
programs+ifelse&+for.pptx
programs+ifelse&+for.pptxprograms+ifelse&+for.pptx
programs+ifelse&+for.pptx
samaghorab
 
Bioinformatics-Lec+4-DNADamage-and-Repair.pptx
Bioinformatics-Lec+4-DNADamage-and-Repair.pptxBioinformatics-Lec+4-DNADamage-and-Repair.pptx
Bioinformatics-Lec+4-DNADamage-and-Repair.pptx
samaghorab
 

More from samaghorab (11)

Lec+3-Introduction-to-Distributed-Systems.pdf
Lec+3-Introduction-to-Distributed-Systems.pdfLec+3-Introduction-to-Distributed-Systems.pdf
Lec+3-Introduction-to-Distributed-Systems.pdf
 
Lecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdfLecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdf
 
Lec_1_Integration.ppt
Lec_1_Integration.pptLec_1_Integration.ppt
Lec_1_Integration.ppt
 
Chapter+3+-+Normalization.pdf
Chapter+3+-+Normalization.pdfChapter+3+-+Normalization.pdf
Chapter+3+-+Normalization.pdf
 
L6.pdf
L6.pdfL6.pdf
L6.pdf
 
Lecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdfLecture-1-2-+(1).pdf
Lecture-1-2-+(1).pdf
 
Intro_to_data_base.pdf
Intro_to_data_base.pdfIntro_to_data_base.pdf
Intro_to_data_base.pdf
 
5941981.ppt
5941981.ppt5941981.ppt
5941981.ppt
 
programs+ifelse&+for.pptx
programs+ifelse&+for.pptxprograms+ifelse&+for.pptx
programs+ifelse&+for.pptx
 
Bioinformatics-Lec+4-DNADamage-and-Repair.pptx
Bioinformatics-Lec+4-DNADamage-and-Repair.pptxBioinformatics-Lec+4-DNADamage-and-Repair.pptx
Bioinformatics-Lec+4-DNADamage-and-Repair.pptx
 
Python_Session05_Homeworkquestions.pptx
Python_Session05_Homeworkquestions.pptxPython_Session05_Homeworkquestions.pptx
Python_Session05_Homeworkquestions.pptx
 

Recently uploaded

obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
yulianti213969
 
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
acoha1
 
Audience Researchndfhcvnfgvgbhujhgfv.pptx
Audience Researchndfhcvnfgvgbhujhgfv.pptxAudience Researchndfhcvnfgvgbhujhgfv.pptx
Audience Researchndfhcvnfgvgbhujhgfv.pptx
Stephen266013
 
edited gordis ebook sixth edition david d.pdf
edited gordis ebook sixth edition david d.pdfedited gordis ebook sixth edition david d.pdf
edited gordis ebook sixth edition david d.pdf
great91
 
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
fztigerwe
 
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
a8om7o51
 
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotecAbortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
Abortion pills in Riyadh +966572737505 get cytotec
 
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
pwgnohujw
 
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
zifhagzkk
 

Recently uploaded (20)

Identify Customer Segments to Create Customer Offers for Each Segment - Appli...
Identify Customer Segments to Create Customer Offers for Each Segment - Appli...Identify Customer Segments to Create Customer Offers for Each Segment - Appli...
Identify Customer Segments to Create Customer Offers for Each Segment - Appli...
 
obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
obat aborsi Bontang wa 081336238223 jual obat aborsi cytotec asli di Bontang6...
 
Identify Rules that Predict Patient’s Heart Disease - An Application of Decis...
Identify Rules that Predict Patient’s Heart Disease - An Application of Decis...Identify Rules that Predict Patient’s Heart Disease - An Application of Decis...
Identify Rules that Predict Patient’s Heart Disease - An Application of Decis...
 
Credit Card Fraud Detection: Safeguarding Transactions in the Digital Age
Credit Card Fraud Detection: Safeguarding Transactions in the Digital AgeCredit Card Fraud Detection: Safeguarding Transactions in the Digital Age
Credit Card Fraud Detection: Safeguarding Transactions in the Digital Age
 
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UPenn毕业证书)宾夕法尼亚大学毕业证成绩单本科硕士学位证留信学历认证
 
Genuine love spell caster )! ,+27834335081) Ex lover back permanently in At...
Genuine love spell caster )! ,+27834335081)   Ex lover back permanently in At...Genuine love spell caster )! ,+27834335081)   Ex lover back permanently in At...
Genuine love spell caster )! ,+27834335081) Ex lover back permanently in At...
 
Sensing the Future: Anomaly Detection and Event Prediction in Sensor Networks
Sensing the Future: Anomaly Detection and Event Prediction in Sensor NetworksSensing the Future: Anomaly Detection and Event Prediction in Sensor Networks
Sensing the Future: Anomaly Detection and Event Prediction in Sensor Networks
 
Predictive Precipitation: Advanced Rain Forecasting Techniques
Predictive Precipitation: Advanced Rain Forecasting TechniquesPredictive Precipitation: Advanced Rain Forecasting Techniques
Predictive Precipitation: Advanced Rain Forecasting Techniques
 
Audience Researchndfhcvnfgvgbhujhgfv.pptx
Audience Researchndfhcvnfgvgbhujhgfv.pptxAudience Researchndfhcvnfgvgbhujhgfv.pptx
Audience Researchndfhcvnfgvgbhujhgfv.pptx
 
edited gordis ebook sixth edition david d.pdf
edited gordis ebook sixth edition david d.pdfedited gordis ebook sixth edition david d.pdf
edited gordis ebook sixth edition david d.pdf
 
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
如何办理哥伦比亚大学毕业证(Columbia毕业证)成绩单原版一比一
 
Digital Marketing Demystified: Expert Tips from Samantha Rae Coolbeth
Digital Marketing Demystified: Expert Tips from Samantha Rae CoolbethDigital Marketing Demystified: Expert Tips from Samantha Rae Coolbeth
Digital Marketing Demystified: Expert Tips from Samantha Rae Coolbeth
 
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
如何办理加州大学伯克利分校毕业证(UCB毕业证)成绩单留信学历认证
 
社内勉強会資料_Object Recognition as Next Token Prediction
社内勉強会資料_Object Recognition as Next Token Prediction社内勉強会資料_Object Recognition as Next Token Prediction
社内勉強会資料_Object Recognition as Next Token Prediction
 
The Significance of Transliteration Enhancing
The Significance of Transliteration EnhancingThe Significance of Transliteration Enhancing
The Significance of Transliteration Enhancing
 
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotecAbortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
Abortion pills in Riyadh Saudi Arabia (+966572737505 buy cytotec
 
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
原件一样(UWO毕业证书)西安大略大学毕业证成绩单留信学历认证
 
Data Analysis Project Presentation : NYC Shooting Cluster Analysis
Data Analysis Project Presentation : NYC Shooting Cluster AnalysisData Analysis Project Presentation : NYC Shooting Cluster Analysis
Data Analysis Project Presentation : NYC Shooting Cluster Analysis
 
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
如何办理(Dalhousie毕业证书)达尔豪斯大学毕业证成绩单留信学历认证
 
How to Transform Clinical Trial Management with Advanced Data Analytics
How to Transform Clinical Trial Management with Advanced Data AnalyticsHow to Transform Clinical Trial Management with Advanced Data Analytics
How to Transform Clinical Trial Management with Advanced Data Analytics
 

L2Web.pptx

  • 1. Web Development Level 2-Bio Dr./ Zainab Hassan Ali Hassan- Lecturer at the Department of Embedded Networks and Technology- Faculty of Artificial Intelligence, Kafrelsheikh University
  • 2. In This Chapter 2  Image Format  Image Map  Table Structure  Forms
  • 4. Img Format: 4 <!DOCTYPE html> <html> <head> <title> lec2 </title> </head> <body> <img width="1038px" height="778px" alt="This img for dna" src="dna.jpg" align="right" /> </body> </html>
  • 5. Img Map: 5 <!DOCTYPE html> <html> <head> <title> Map Img </title></head> <body> <img src="Map.jpg" usemap="#area1"> <map name="area1"> <area shape="circle" coords="385,547,385" href="https://www.yourgenome.org/video/dna-replication"> </area> <area shape="regtagle" coords="373,119,949,600" href="https://www.w3schools.com/tags/att_img_longdesc.asp" > </area> </map> </body> </html>
  • 6. Iframe: 6 <html> <head> <title> iframe</title></head> <body> <iframe height="500" width="600" scrolling="no" src="lec2.html"></iframe> </body> </html>
  • 7. Img Map: Cont. 7 <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/zdPcqeoukUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27327.8943431735!2d30 .95769373842958!3d31.11009910990372!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3! 1m2!1s0x14f7ab78f233021f%3A0xc2cdebb004a208f8!2z2YPZgdixINin2YTYtNmK2K7YjCDZgtiz 2YUg2YPZgdixINin2YTYtNmK2K7YjCDZg9mB2LEg2KfZhNi02YrYrtiMINin2YTYutix2KjZitip!5e0 !3m2!1sar!2seg!4v1645994958262!5m2!1sar!2seg" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </body> </html>
  • 8. Table Structure: 8 Table 1 ID Name This table contains data about AI students
  • 9. Table Tag: 9 <table width=“100”%" border="2px"> <caption> Table1: AI Students</caption> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> </tbody> <tfoot> <tr> <td> 1</td> <td>2</td> <td>3</td> </tr> </tfoot> </table>
  • 10. Table Tag: 10 <table width="30%" border="1"> <tr> <td colspan="2">Full Name</td> <td>No.</td> </tr> <tr> <th>Fname</th> <th>Lname</th> <th>ID</th> </tr> <tr> <td>Zainab</td> <td>Hassan</td> <td>1000</td> </tr> </table>
  • 11. Forms: 11 <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form> <label>First name:</label><br> <input type="text” value="Enter first name"><br> <label>Last name:</label><br> <input type="text" value="Enter last name"><br><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button.</p> </body> </html>
  • 12. Forms: Cont. 12 <!DOCTYPE html> <html> <body> <h2>Date Field</h2> <form> <label>Birthday:</label> <input type="date"> <input type="submit" value="Submit"> </form> </body> </html> - Input type date
  • 13. Forms: Cont. 13 <!DOCTYPE html> <html> <body> <h2>Show a Color Picker</h2> <form> <label>Select your favourite Color:</label> <input type="color" value="#ff0000"> <input type="submit" value="Submit"> </form> </body> </html> - Input type color
  • 14. Forms: Cont. 14 <!DOCTYPE html> <html> <body> <h2>Checkboxes</h2> <form> <input type="checkbox"> <label > I have a bike</label><br> <input type="checkbox"> <label> I have a car</label><br> <input type="checkbox"> <label> I have a boat</label><br><br> <input type="submit" value="Submit"> </form> </body> </html> - Input type checkbox
  • 15. Forms: Cont. 15 <!DOCTYPE html> <html> <body> <h2>Input Button</h2> <input type="button" onclick="alert('Hello World!')" value="Click Me!"> </body> </html> - Alert message
  • 16. Forms: Cont. 16 <!DOCTYPE html> <html> <body> <h1>File upload</h1> <p>Show a file-select field which allows a file to be chosen for upload:</p> <form> <label >Select a file:</label> <input type="file"><br><br> <input type="submit" value="Submit"> </form> </body> </html> - Input type File
  • 17. Activity 1 17 Create the following table Full Name Address Hire-date First Last There is no data about this cell Enter your data