Scribd
Upload
36 views4 pages

Web Development Assignment Overview

The document outlines a web development assignment consisting of ten tasks, each demonstrating different HTML concepts. Tasks include designing a homepage, creating lists, using hyperlinks, inserting images and iframes, and demonstrating forms with GET and POST methods. Each task is accompanied by sample HTML code to illustrate the required implementation.

Uploaded by

jatinsadaphal760
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
36 views4 pages

Web Development Assignment Overview

The document outlines a web development assignment consisting of ten tasks, each demonstrating different HTML concepts. Tasks include designing a homepage, creating lists, using hyperlinks, inserting images and iframes, and demonstrating forms with GET and POST methods. Each task is accompanied by sample HTML code to illustrate the required implementation.

Uploaded by

jatinsadaphal760
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

Web Development Assignment

1. Design a homepage displaying information about your college department

<html>
<head><title>College Department</title></head>
<body>
<h1>Department of Computer Science</h1>
<p>Welcome to our department. We offer courses like BCA, MCA, and [Link] Computer Science.</p>
<p>&copy; 2025 College Name</p>
</body>
</html>

2. Different types of list tags

<html>
<head><title>List Example</title></head>
<body>
<h2>Ordered List</h2>
<ol>
<li>BCA</li>
<li>MCA</li>
<li>[Link]</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Web Development</li>
<li>Programming</li>
<li>Networking</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>

3. Create webpages for clinic using marquee and formatting tags

<html>
<head><title>Clinic Page</title></head>
<body>
<marquee>Welcome to Health Care Clinic</marquee>
<h1>Our Services</h1>
<b>General Checkup</b><br>
<i>Dental Services</i><br>
<u>Eye Specialist</u>
Web Development Assignment

</body>
</html>

4. Create 3 hyperlinks connecting to 3 different pages

<html>
<head><title>Home Page</title></head>
<body>
<h1>Welcome</h1>
<a href="[Link]">About Us</a><br>
<a href="[Link]">Services</a><br>
<a href="[Link]">Contact Us</a>
</body>
</html>

5. Create 3 hyperlinks jumping to headings on same page

<html>
<head><title>Jump to Headings</title></head>
<body>
<h1>Links</h1>
<a href="#intro">Introduction</a><br>
<a href="#courses">Courses</a><br>
<a href="#contact">Contact</a>

<h2 id="intro">Introduction</h2>
<p>Welcome to our site.</p>

<h2 id="courses">Courses</h2>
<p>We offer BCA, MCA.</p>

<h2 id="contact">Contact</h2>
<p>Email: example@[Link]</p>
</body>
</html>

6. Insert images and iframe

<html>
<head><title>Image and Iframe</title></head>
<body>
<h1>Our Clinic</h1>
<img src="[Link]" width="300" height="200">

<h2>Our Location</h2>
<iframe src="[Link] width="300" height="200"></iframe>
</body>
</html>
Web Development Assignment

7. Design a page with image map

<html>
<head><title>Image Mapping</title></head>
<body>
<h1>Computer Diagram</h1>
<img src="[Link]" usemap="#compmap">

<map name="compmap">
<area shape="rect" coords="50,50,150,150" href="[Link]">
<area shape="rect" coords="200,50,300,150" href="[Link]">
<area shape="rect" coords="350,50,450,150" href="[Link]">
</map>
</body>
</html>

8. Create a web page with two frames

<html>
<head><title>Frames</title></head>
<frameset cols="30%,70%">
<frame src="[Link]">
<frame src="[Link]" name="content">
</frameset>
</html>

9. Design a timetable in tabular format

<html>
<head><title>Timetable</title></head>
<body>
<h1>My Timetable</h1>
<table border="1">
<tr><th>Day</th><th>9-10</th><th>10-11</th><th>11-12</th></tr>
<tr><td>Monday</td><td>Math</td><td>English</td><td>Physics</td></tr>
<tr><td>Tuesday</td><td>Computer</td><td>Chemistry</td><td>Biology</td></tr>
</table>
</body>
</html>

10. Demonstrate difference between GET and POST in form

<html>
<head><title>Form Example</title></head>
<body>

<h2>Form with GET</h2>


Web Development Assignment

<form method="get" action="[Link]">


Name: <input type="text" name="name"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Submit">
</form>

<h2>Form with POST</h2>


<form method="post" action="[Link]">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="pass"><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

Common questions

Powered by AI

Iframes allow embedding external content, such as maps or videos, providing interactive or third-party services without redirecting away from the current page . This enhances user experience by integrating comprehensive features seamlessly. However, developers should consider security risks like clickjacking and ensure iframes do not slow page loading or violate same-origin policies by managing cross-origin resources carefully .

The <marquee> tag is useful for creating a scrolling effect for text or images, drawing attention to announcements or offers . However, it is deprecated in HTML5 due to poor usability on mobile devices, performance issues, and incompatibility with web accessibility principles. Contemporary websites achieve similar effects with CSS animations and JavaScript, which offer greater flexibility and control over design and performance .

Hyperlinks for external page navigation use standard anchor tags with 'href' set to the target page URL, allowing users to navigate between distinct web pages, often enhancing site interconnectedness . For within-page navigation (jump links), 'href' is set to an 'id' attribute on the same page using a hash (#), enabling users to quickly reach different sections of a lengthy document without loading new pages, which streamlines single-page user experiences .

Ordered lists in HTML (<ol>) are used for items that have a specific sequence, as they are automatically numbered, suitable for instructions or steps . Unordered lists (<ul>) are used for items that can be presented in any order, typically using bullet points for readability. These are suitable for static lists like categories . Definition lists (<dl>) are used for presenting name-value groups such as terms and their explanations, making them appropriate for glossaries or metadata listings .

HTML tables organize data into rows and columns, improving readability and alignment of structured data like schedules or datasets . Elements like <table>, <tr>, <th>, and <td> delineate the table, rows, headers, and individual data cells, respectively, ensuring tabular data is clearly and consistently presented, which is particularly useful for summarizing and comparing information efficiently .

Using semantic HTML elements and appropriate CSS styling, developers can create a visually appealing and user-friendly interface. Techniques include using clear typography with <h1>, <h2>, etc., for hierarchy, utilizing <img> and <iframe> for multimedia, and enhancing content flow with lists <ol>, <ul>, and <dl> . Incorporating dynamic elements like <marquee> for scrolling text, although outdated, can draw attention to announcements (best replaced by CSS animations). Such elements combined ensure engagement and intuitive navigation .

Image maps increase interactivity by associating different clickable areas on an image with URLs or actions, allowing users to interact with specific sections of an image . For example, a computer diagram could use an image map to link specific parts like the CPU, memory, and input areas to more detailed pages about each component, thus making complex images functional navigation aids .

Framesets in HTML allow multiple web pages to be shown within a browser window, each as a segment or “frame,” which can be useful for constant navigation elements. However, they restrict design by complicating CSS and JavaScript implementations across frames and negatively affect SEO by fragmenting a website's content structure . Modern web development favors CSS layouts and JavaScript for dynamic content presentation due to flexibility and enhanced compatibility across devices, rendering framesets largely obsolete .

HTML tables can achieve consistent alignment across different content types like text and images, but they are disadvantageous for modern website layouts due to inflexibility, inadequate support for responsive design, and adding complexity to markup, leading to poor semantic structure . Modern CSS techniques, like Flexbox and Grid, offer much more flexibility, responsiveness, and separation of content from presentation, making them superior for professional, responsive web design .

GET method in HTML forms appends form data to the URL, which makes it suitable for non-sensitive data as it doesn't hide information and has a limited data length . Conversely, POST does not append data to the URL, sending it in the HTTP request body, which supports larger amounts and is more secure for transmitting sensitive information as it doesn’t expose data in the URL .

You might also like