Scribd
Upload
5 views

Web_Tutorial_Answers

The document contains various HTML examples including a form for user input, a birthday invitation page, a personal portfolio page, and different types of CSS implementations. It also covers HTTP request and response structures, common HTTP headers, web browser architecture, the importance of SEO, and responsive layout techniques using media queries. Each section provides code snippets and explanations relevant to web development.

Uploaded by

shubhambharatpatil25
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
5 views

Web_Tutorial_Answers

The document contains various HTML examples including a form for user input, a birthday invitation page, a personal portfolio page, and different types of CSS implementations. It also covers HTTP request and response structures, common HTTP headers, web browser architecture, the importance of SEO, and responsive layout techniques using media queries. Each section provides code snippets and explanations relevant to web development.

Uploaded by

shubhambharatpatil25
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/ 5

1) HTML Form (POST Method)

<form action="submit.php" method="POST">


<label>Name: <input type="text" name="username" required></label><br>
<label>Email: <input type="email" name="email" required></label><br>
Gender:<br>
<label><input type="radio" name="gender" value="male"> Male</label><br>
<label><input type="radio" name="gender" value="female"> Female</label><br>
<input type="submit" value="Submit">
</form>

2) Birthday Invitation Page

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffe6f0;
text-align: center;
font-family: Arial;
}
.invitation {
background: #fff;
padding: 20px;
margin: 50px auto;
width: 60%;
border: 2px solid #ff66b2;
}
</style>
</head>
<body>
<div class="invitation">
<h1>You're Invited!</h1>
<p>Join us to celebrate Sarah's 10th Birthday!</p>
<p>Date: June 1, 2025<br>Time: 3:00 PM<br>Location: 123 Party Lane</p>
<p>RSVP: 123-456-7890</p>
</div>
</body>
</html>

3) Personal Portfolio Page

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
img {
width: 150px;
border-radius: 50%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<h1>John Doe</h1>
<img src="photo.jpg" alt="Profile Photo">
<h2>Hobbies</h2>
<ul>
<li>Coding</li>
<li>Photography</li>
<li>Reading</li>
</ul>
<h2>Education</h2>
<table>
<tr><th>Year</th><th>Degree</th><th>Institution</th></tr>
<tr><td>2020</td><td>BSc Computer Science</td><td>XYZ University</td></tr>
<tr><td>2023</td><td>MSc IT</td><td>ABC Institute</td></tr>
</table>
</body>
</html>

4) Types of CSS

- Inline CSS
<p style="color: blue;">This is inline CSS.</p>

- Internal CSS
<head>
<style>
p { color: green; }
</style>
</head>

- External CSS
<link rel="stylesheet" href="style.css">

In style.css:
p {
color: red;
}

5) Internal CSS with ID and Class Selectors

<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: navy;
color: white;
padding: 10px;
}
.section {
border: 1px solid gray;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="header"><h1>My Website</h1></div>
<div class="section"><p>This is section 1</p></div>
<div class="section"><p>This is section 2</p></div>
</body>
</html>

6) HTTP Request and Response Structure

Request:
GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

Response:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024

<html>...</html>

7) Common HTTP Headers

Request Headers:
- Host: Specifies the domain name.
- User-Agent: Info about client browser.
- Accept: Types of media client accepts.
- Authorization: Credentials for authentication.

Response Headers:
- Content-Type: Type of content returned.
- Content-Length: Size of response.
- Set-Cookie: Sets cookies on client.
- Cache-Control: Caching policies.
8) Web Browser Architecture

Diagram (Text Form):


+------------------------+
| User Interface |
+------------------------+
| Browser Engine |
+------------------------+
| Rendering Engine |
+------------------------+
| Networking |
+------------------------+
| JavaScript Interpreter |
+------------------------+
| UI Backend |
+------------------------+
| Data Storage |
+------------------------+

9) SEO and Its Importance

SEO (Search Engine Optimization) is the process of improving a website's visibility on search
engines like Google.
It increases traffic, credibility, and reach, making it essential for modern websites.

10) Responsive Layout with Media Queries

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial;
}
.container {
display: flex;
flex-direction: row;
}
.box {
flex: 1;
padding: 20px;
background: lightblue;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>

You might also like