L2Web-intro to web development in html,css.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

2
In This Chapter
 Image Format
 Image Map
 Table Structure
 Forms

4
Img Format:
<!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:
<!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:
<html>
<head> <title> iframe</title></head>
<body>
<iframe height="500" width="600" scrolling="no"
src="lec2.html"></iframe>
</body>
</html>

7
Img Map: Cont.
<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!
2z2YPZgdixINin2YTYtNmK2K7YjCDZgtiz2YUg2YPZgdixINin2YTYtNmK2K7YjCDZg9mB2LE
g2KfZhNi02YrYrtiMINin2YTYutix2KjZitip!5e0!3m2!1sar!2seg!4v1645994958262!
5m2!1sar!2seg"
width="600" height="450" style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</body>
</html>

8
Table Structure:
Table 1
ID Name
This table contains data about
AI students

9
Table Tag:
<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:
<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:
<!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.
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<form>
<label>Birthday:</label>
<input type="date">
</form>
</body>
</html>
- Input type date

13
Forms: Cont.
<!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

14
Forms: Cont. <!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

15
Forms: Cont.
<!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. <!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

17
Activity 1
Create the following table
Full Name Address Hire-date
First Last
There is no data about this cell
Enter your data

L2Web-intro to web development in html,css.pptx

More Related Content

More from samaghorab

Recently uploaded

L2Web-intro to web development in html,css.pptx