Scribd
Upload
1 views15 pages

Web Tech. File

The document is an index and collection of HTML examples covering various web development topics, including personal profile pages, web page formatting, tables, forms, navigation links, image galleries, CSS styling, and iframes. Each section provides a brief description and corresponding HTML code for practical implementation. It serves as a guide for creating different types of web pages and elements using HTML and CSS.

Uploaded by

matifsheikh827
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
1 views15 pages

Web Tech. File

The document is an index and collection of HTML examples covering various web development topics, including personal profile pages, web page formatting, tables, forms, navigation links, image galleries, CSS styling, and iframes. Each section provides a brief description and corresponding HTML code for practical implementation. It serves as a guide for creating different types of web pages and elements using HTML and CSS.

Uploaded by

matifsheikh827
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/ 15

INDEX

SR.NO TITLE PAGE


NO.
1. Personal Profile Page using Text Formatting 01
and Horizontal Rule
2. Web Page using Headings, Paragraphs, Line 02
Break and Formatting

3. Web Page with Description List and Nested 03


Lists
4. Table with Rowspan and Colspan for Time 05
Table
5. Form with All Input Types 07
6. Web Page with Links to Different Pages 08
(Same Website)

7. Image Gallery Web Page 10

8. Internal CSS Styling of a Resume Page 11

9. Web Page Using Iframes (Internal Pages) 12

10. Web Page Using Iframes (Internal Pages) 13


1. Personal Profile Page using Text Formatting and Horizontal Rule
<!DOCTYPE html>

<html>

<head><title>My Profile</title></head>

<body>

<h1>X.Y.Z</h1>

<hr>

<p><b>Roll No:</b> 123456</p>

<p><i>Course:</i> Bachelor of Computer Applications</p>

<p><u>College:</u> MJPRU University</p>

</body>

</html>

OUTPUT :-
2. Web Page using Headings, Paragraphs, Line Break and
Formatting
<!DOCTYPE html>

<html>

<head><title>About Web Technology</title></head>

<body>

<h1>Web Technology</h1>

<p>This subject covers <b>HTML</b>, <i>CSS</i>, and <u>JavaScript</u>.</p>

<br>

<p>It is important for developing web applications.</p>

</body>

</html>

OUTPUT :-
3. Web Page with Description List and Nested Lists
<!DOCTYPE html>

<html>

<head><title>Nested List</title></head>

<body>

<h2>My Courses</h2>

<dl>

<dt>HTML</dt>

<dd>Structure of Web Pages</dd>

<dt>CSS</dt>

<dd>Styling of Web Pages</dd>

</dl>

<h2>Daily Schedule</h2>

<ol>

<li>Morning

<ul>

<li>Exercise</li>

<li>Study</li>

</ul>

</li>

<li>Evening

<ul>

<li>Coding</li>

<li>Reading</li>

</ul>
</li>

</ol>

</body>

</html>

OUTPUT :-
4. Table with Rowspan and Colspan for Time Table
<!DOCTYPE html>

<html>

<head><title>Class Time Table</title></head>

<body>

<h2>BCA 6th Sem Time Table</h2>

<table border="1">

<tr>

<th>Day</th>

<th colspan="2">Subjects</th>

</tr>

<tr>

<td>Monday</td>

<td>Web Tech</td>

<td>DBMS</td>

</tr>

<tr>

<td rowspan="2">Tuesday</td>

<td colspan="2">Project Work</td>

</tr>

<tr>

<td>Java</td>

<td>Python</td>

</tr>

</table>
</body>

</html>

OUTPUT :-
5. Form with All Input Types
<!DOCTYPE html>

<html>

<head><title>Full Form</title></head>

<body>

<h2>Feedback Form</h2>

<form>

Name: <input type="text"><br><br>

Email: <input type="email"><br><br>

Age: <input type="number"><br><br>

Password: <input type="password"><br><br>

Gender:

<input type="radio" name="gender"> Male

<input type="radio" name="gender"> Female <br><br>

Hobbies:

<input type="checkbox"> Reading

<input type="checkbox"> Sports <br><br>

City:

<select>

<option>Bijnor</option>

<option>Moradabad</option>

<option>Meerut</option>

</select><br><br>

Message:<br>

<textarea rows="4" cols="30"></textarea><br><br>


<input type="submit" value="Submit">

</form>

</body>

</html>

OUTPUT :-
6. Web Page with Links to Different Pages (Same Website)
<!DOCTYPE html>

<html>

<head><title>Navigation Page</title></head>

<body>

<h2>My Website</h2>

<a href="about.html">About</a> |

<a href="services.html">Services</a> |

<a href="contact.html">Contact</a>

</body>

</html>

OUTPUT :-
7. Image Gallery Web Page
<!DOCTYPE html>

<html>

<head><title>Gallery</title></head>

<body>

<h2>My Gallery</h2>

<img src="https://images.unsplash.com/photo-1509395176047-4a66953fd231" width="200"


height="150">

<img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" width="200"


height="150">

<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" width="200"


height="150">

</body>

</html>

OUTPUT :-
8. Internal CSS Styling of a Resume Page
<!DOCTYPE html>

<html>

<head>

<title>Resume</title>

<style>

body { font-family: Arial; }

h1 { color: darkblue; }

p { font-size: 16px; color: gray; }

</style>

</head>

<body>

<h1>X Y Z</h1>

<p><b>Email:</b> xyz@example.com</p>

<p><b>Skills:</b> HTML, CSS, JS</p>

</body>

</html>

OUTPUT :-
9. Web Page Using Iframes (Internal Pages)
<!DOCTYPE html>

<html>

<head><title>IFrame Example</title></head>

<body>

<h2>Website with Iframe</h2>

<iframe src="https://www.wikipedia.org" width="1200" height="580"></iframe>

</body>

</html>

OUTPUT :-
10. DHTML with Button to Change Text Color
<!DOCTYPE html>

<html>

<head>

<script>

function changeColor() {

document.getElementById('text').style.color = 'red';

</script>

</head>

<body>

<h2 id="text">Click button to change my color</h2>

<button onclick="changeColor()">Change Color</button>

</body>

</html>

OUTPUT :-
After clicking “Change Color” button :-

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