Scribd
Carica
4 visualizzazioni

HTML CSS WT EXTERNAL

HTML AND CSS DOCUMENT

Caricato da

sreejaravinderreddy
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
4 visualizzazioni

HTML CSS WT EXTERNAL

HTML AND CSS DOCUMENT

Caricato da

sreejaravinderreddy
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 7

HTML CSS WT EXTERNAL

1)Design web pages using internal, inline, external style sheets


//internal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p{
font-family: Arial, sans-serif;
font-size: 18px;
color: darkgreen;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS Example</h1>
<p>This is an example of using internal styles within the HTML document.</p>
</body>
</html>

//inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body style="background-color: lightyellow;">
<h1 style="color: red; text-align: center;">Welcome to Inline CSS Example</h1>
<p style="font-family: 'Courier New', Courier, monospace; font-size: 16px; color: blue;">
This is an example of using inline styles applied directly to HTML elements.
</p>
<p style="font-weight: bold; color: green;">Inline styles override any other styles for specific
elements.</p>
</body>
</html>
//external Css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to External CSS Example</h1>
<p>This is an example of using an external style sheet linked to the HTML document.</p>
</body>
</html>

//save file as style.css

body {
background-color: lightgray;
}
h1 {
color: darkblue;
text-align: center;
}
p{
font-family: Verdana, sans-serif;
font-size: 18px;
color: black;
}

2)Design web pages using frames , Embedded frames


// Frames
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset rows="50%,*">
<frame src="a.html"> // save a file as a.html and add any style to it
</frame>
<frame src="b.html"> // save a file as b.html and add any style to it
</frame>
</frameset>
</html>
//Embedded Frames
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame src="b.html">
</frame>
<frame src="b.html">
</frame>
</frameset>
</frame>
</frame>
<frameset rows="50%,*">
<frame src="b.html">
</frame>
<frame src="b.html">
</frame>
</frameset>
</frame>
</frame>
</frameset>
</html>

3) Design web pages using table of images


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table of Images</title>
<style>
th{
text-align: center;
width: 8rem;
}
</style>
</head>
<body>

<h2>Table of Images</h2>
<table border="3">
<tr>
<th>Rock</th>
<td>
<img src="./images/rock-paper-scissors-emoji-cartoon-006-512.webp" width="150"
alt="Image 1">
</td>
</tr>
<tr>
<th>Paper</th>
<td>
<img src="./images/rock-paper-scissors-emoji-cartoon-011-512.webp" width="150"
alt="Image 2">
</td>>
</tr>
<tr>
<th>Scissors</th>
<td>
<img src="./images/rock-paper-scissors-emoji-cartoon-014-512.webp" width="150"
alt="Image 2">
</td>>
</tr>

</table>

</body>
</html>

4)Design web pages using i)Lists ii) table( implement rowspan, colspan attributes )
//lists
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lists Example</title>
</head>
<body>
<h2>Unordered List (Bullet Points)</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
</ul>

<h2>Ordered List (Numbered List)</h2>


<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3
<li>Step 4</li>
</ol>
<h2>Definition List (Description List)</h2>
<dl>
<dt>HTML</dt>
<dd>A standard markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language used for describing the presentation of a document written in
HTML.</dd>
<dt>JavaScript</dt>
<dd>A programming language that enables interactive web pages.</dd>
</dl>
</body>
</html>

//tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example with rowspan and colspan</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>Table with rowspan and colspan</h2>


<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Marks</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>John</td>
<td>85</td>
<td>90</td>
<td>175</td>
</tr>
<tr>
<td>Jane</td>
<td>80</td>
<td>85</td>
<td>165</td>
</tr>
<tr>
<td>Tom</td>
<td>90</td>
<td>88</td>
<td>178</td>
</tr>
</table>

</body>
</html>

5)Design a registration page using HTML FORMS


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
</head>
<body>

<div class="form-container">
<h2>Registration Form</h2>
<form id="registrationForm">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<br><br>

<label for="lname">Last Name:</label>


<input type="text" id="lname" name="lname">
<br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword">
<br><br>

<button type="button">Register</button>

<p class="error" id="errorMessage"></p>


</form>
</div>
</body>
</html>

Potrebbero piacerti anche