Scribd
Upload
27 views

RRKWebProgramming EX1 (

web

Uploaded by

Satyam Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

RRKWebProgramming EX1 (

web

Uploaded by

Satyam Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Worksheet (Experiment 1)

Student Name: Satyam Kumar UID: 24MCA20083

Branch: MCA-305 Section/Group: MCA-2A

Semester: 1st Date of Performance: 12-08-24

Sub Name: Web Programming La Subject Code: 24CAP-605

Aim: Demonstrating various HTML tag, Anchor tag and creating table in webpage.

Overview: (A) WAP to demonstrate various HTML tags and Anchor control.

(B) WAP to demonstrate Table tag.

Steps:

(A) WAP to demonstrate various HTML tags and Anchor control

Open a text editor, such as Visual Studio Code or Sublime Text, and begin writing
HTML code
• Using some basic HTML tags to create a web page and also providing a YouTube
link using Anchor tag.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header align="center">
<h1>Satyam Kumar</h1>
<p>Web Developer | satyamkumar@gmail.com | +918766233870</p>
<p><a href="https://www.linkedin.com/in/satyamkumar"
target="_blank">LinkedIn</a> | <a href="https://github.com/satyamkumar"
target="_blank">GitHub</a></p>
</header>

<div class="container">
<section id="summary">
<img src="C:\Users\ksaty\OneDrive\Pictures\Photograph.jpg" align="right"
height="150" width="100">

<h2>Professional Summary</h2>
<p>Experienced Web Developer with a strong background in creating
responsive and user-friendly websites. Proficient in HTML, CSS, JavaScript, and
various frameworks. Adept at problem-solving and collaborating with teams to
deliver high-quality projects on time.</p>
</section>

<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Angular, Vue.js</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>RESTful APIs</li>
</ul>
</section>

<section id="experience">
<h2>Experience</h2>

<p>Fresher and willing to Work</p>

</section>

<section id="education">
<h2>Education</h2>
<table border="1" cellspacing = 0 cellpadding = 10>
<tr>
<th>Education</th>
<th>Institute</th>
<th>Year of passing</th>
<th>Result</th>
</tr>
<tr>
<td>10<sup>th</sup> </td>
<td>SMPS</td>
<td>2019</td>
<td>95.6%</td>
</tr>
<tr>
<td>12<sup>th</sup></td>
<td>SMPS </td>
<td>2021</td>
<td>91%</td>
</tr>
<tr>
<td>BCA</td>
<td>MDU</td>
<td>2024</td>
<td>63.3</td>
</tr>
<tr>
<td>MCA</td>
<td>Chandigarh University</td>
<td>2026</td>
<td>Ongonig</td>
</tr>
</table>

</section>

<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Portfolio Website</h3>
<p>A personal website to showcase my work and projects. Developed
using React and deployed on Netlify. <a href="https://www.example.com"
target="_blank">View Project</a></p>
</div>

<div class="project">
<h3>E-Commerce Platform</h3>
<p>Built an e-commerce platform with Angular and Node.js. Integrated
payment gateway and user authentication. <a href="https://www.example.com"
target="_blank">View Project</a></p>
</div>
</section>
</div>

<footer>
<p>© 2024 Satyam Kumar. All rights reserved.</p>
</footer>
</body>
</html>

Step:
(B) WAP to demonstrate Table tag

Creating a sample Table.

 Table Tag (<table></table>) is used to create table in webpages.


 In table tag we have some other tags such as, Table heading(</th><th>) used to
provide headings in table, Table row(</tr><tr>) used to create a new row in a table,
Table data(</td><td>) used to add some data in a cell.
<!DOCTYPE html>
<html>
<head>

<title>HTML Table Tags Example</title>


<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
border: 1px solid #ddd;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f4f4f4;
}
caption {
font-size: 1.5em;
margin: 10px 0;
}
thead {
background-color: #f4f4f4;
}
tfoot {
background-color: #f4f4f4;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Employee Information</caption>
<thead>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>E001</td>
<td>John Doe</td>
<td>Web Developer</td>
<td>IT</td>
</tr>
<tr>
<td>E002</td>
<td>Will Smith</td>
<td>Project Manager</td>
<td>IT</td>
</tr>
<tr>
<td>E003</td>
<td>Shreya Gupta</td>
<td>UX Designer</td>
<td>Design</td>
</tr>
<tr>
<td>E004</td>
<td>Arpan Mishra</td>
<td>HR Specialist</td>
<td>HR</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Total Employees: 4</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output :
Learning Outcomes :

• Learning basic HTML tags how to use and where to use those tags.
• Learnt about how to add image in a webpage.
• Creating Tables in webpages.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy