L2Web.pptx

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

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">
</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">
</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>
<label> I have a car</label><br>
<label> I have a boat</label><br><br>
</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>
</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

L2Web.pptx

More Related Content

More from samaghorab

Recently uploaded

L2Web.pptx