Scribd
Upload
5 views18 pages

HTML TAGE

The document contains multiple HTML forms for various purposes, including personal information, login, gender selection, course selection, and file uploads. It also provides examples of CSS, explaining its purpose, syntax, and methods of insertion, such as external, internal, and inline CSS. Additionally, it includes a sample website structure with HTML and CSS for styling.

Uploaded by

ramalanbegam1
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 views18 pages

HTML TAGE

The document contains multiple HTML forms for various purposes, including personal information, login, gender selection, course selection, and file uploads. It also provides examples of CSS, explaining its purpose, syntax, and methods of insertion, such as external, internal, and inline CSS. Additionally, it includes a sample website structure with HTML and CSS for styling.

Uploaded by

ramalanbegam1
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/ 18

HTML TAGE:

a.html

<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" >
First Name:<input type="text" name="Fname">:<br />
Last Name:<input type="text" name="Lname">:<br />
<input type="submit" value=”Submit Query”/>

</form>

</body>

</html>

OUTPUT:
Password

b.html
<html>

<head>

<title>Login INFO</title>

</head>

<body>

<form method="post">

User Name:<input type="text" name="Fname"><br /><br />

Password:<input type="password" name="Lname"><br /><br />

<input type="submit" />

</form>

</body>

</html>

OUTPUT:
Radio Buttons

c.html

<html>

<body>

<form name="gender” method="post" action="c.html">

<b>Gender</b><br />

<input type="radio" name="gen" value="male" /> Male<br />

<input type="radio" name="gen" value="female" /> Female <br />

<input type="submit" />

</form>

</body>

</html>

OUTPUT:
Checkboxes

d.html

<html>

<body>

<form name="Check” method="post" action="d.html">

<b>Course</b><br />

<input type="checkbox" name="course" value="B.sc" /> B.sc<br />

<input type="checkbox" name="course" value="Bca" /> Bca<br />

<input type="checkbox" name="course" value="Bcom" /> Bcom<br />

<input type="submit" />

</form>

</body>
</html>

OUTPUT:
Drop Down Lists
College.html
<html>
<body>
<form method="post" action="college.html">
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" >
</select>
</form>
</body>
</html>
OUTPUT:
HTML Upload Forms
Upload.html
<html >
<head>
<title>Upload</title>
</head>
<body>
<input type="hidden" name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />
</body>
</html>
OUTPUT:
Text Areas
ta.html
<html >
<head>
<title>address</title>
</head>
<body>
<form method="post" action="tarea.html" name="ta.html">
Enter Your Address Here<br>
<textarea rows="5" cols="20" name="comments">
</textarea>
<input type="submit">
</form>
</body>
</html>
OUTPUT:
Application Form

App.html
<html >
<head>
<title>Application Form</title>
</head>
<body>
**************APPLICATION FORM***************
<form name="frm" method="post">
<table>
<tr>
<td>NAME</td>
<td><input type="text" name="na" /></td>
</tr>
<tr>
<td>FATHER NAME</td>
<td><input type="text" name="fa" /></td>
</tr>
<tr>
<td>ADDRESS</td>
<td><input type="text" name="ad" /></td>
</tr>
<tr>
<td>PHONE NUMBER</td>
<td><input type="text" name="ph" /></td>
</tr>
<tr>
<td>GENDER</td>
<td><input type="radio" name="ra" value=”male”/>Male
<input type="radio" name="ra" value=”female "/>Female</td>
</tr>
<td>EDUCATIONAL QUALIFICATION</td> <tr>

<td>UG</td>
<td><select name="sl">
<option value="BCA" >BCA</option>
<option value="BBA">BBA</option>
<option value="BCOM">BCOM</option>
<option value="BSC">BSc</option>
<option value="B.ED">B.ED</option>
</select>
</td>
</tr>
<tr>
<td>BG</td>
<td><select name="sl1">
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="MCOM">MCOM</option>
<option value="MSC">MSc</option>
<option value="M.ED">M.ED</option>
</select>
</td>
</tr>
<tr>
<td>EXPERIENCE</td>
<td><select name="sl2"><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>YEAR </td> </tr>
<tr> <td>ABOUT YOURSELF</td>
<td><textarea rows="5" name="txa"></textarea>
</td> </tr>

<tr>
<td><input type="submit" name="sm" value="submit" />
<input type="reset" name="sm1" value="cancel" />
</td>
</tr>
</table>
</form>
</body>
</html>
CSS:

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

CSS Syntax

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element

#para1 {
text-align: center;
color: red;
}

CSS class Selector

To select elements with a specific class, write a period (.) character, followed by the class name.

.center {
text-align: center;
color: red;

User Defined Tag :

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"style.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Internal CSS
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

<html> p{
<head> font-family: sans-serif;
<link rel="stylesheet" href="style.css"> font-size: xx-large;
</head> font-weight: 900;
<body> color: green;
<p>Hello GFG</p> }
</body>
</html>

<html> button {
<head> background-color: greenyellow;
<link rel="stylesheet" href="style.css"> color: white;
</head> padding: 10px 20px;
<body> border: none;
<button>Hover me</button> border-radius: 5px;
</body> transition: background-color 0.3s ease;
</html> }

button:hover {
background-color: blue;
}

body {
<html> margin: 0;
<head> display: flex;
<link rel="stylesheet" href="style.css"> justify-content: center;
</head> align-items: center;
<body> height: 100vh;
<div class="container">Centered</div> background: #f4f4f4;
</body> }
</html> .container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background: #4caf50;
color: white;
}

Index.html

<html>
<head>
<title>My Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Welcome to My Website</h2>
<p>This is a simple HTML website styled using an external CSS file.</p>
</section>
</main>

<footer>
<p>&copy; 2025 My Simple Website</p>
</footer>
</body>
</html>

Style.css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}

/* Header */
header {
background-color: #008000;
color: white;
padding: 20px;
text-align: center;
}

/* Navigation */
nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
}

/* Main Content */
main {
padding: 20px;
background-color: white;
}
/* Footer */
footer {
text-align: center;
padding: 10px;
background-color: #FFFF00;
color: #000; }

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