Scribd
Upload
4 views28 pages

Web CC

The document contains multiple HTML examples demonstrating various web development concepts, including basic HTML structure, tables, forms, and CSS styling. Each section illustrates different elements like headings, paragraphs, tables, and forms, along with their respective styling rules. The examples range from a simple web page to a registration form and a calculator interface.

Uploaded by

ashiqkzr1
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
4 views28 pages

Web CC

The document contains multiple HTML examples demonstrating various web development concepts, including basic HTML structure, tables, forms, and CSS styling. Each section illustrates different elements like headings, paragraphs, tables, and forms, along with their respective styling rules. The examples range from a simple web page to a registration form and a calculator interface.

Uploaded by

ashiqkzr1
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

p1

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My First Web Page</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<marquee>Basic HTML Tags</marquee>

<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

<p>This is a paragraph. It demonstrates the use of the paragraph tag in

HTML. Paragraphs are used to group related content together.</p>

<hr>

<p>This is another paragraph.<br>This text appears on a new line due to the

line break tag.</p>

<blockquote>

This is a block quote. It's often used to highlight quoted text from another

source.
</blockquote>

<pre>

This is preformatted text.

It preserves both spaces and

line breaks, making it useful

for displaying code or ASCII art.

</pre>

<p>

Here are examples of logical styles:<br>

<b>Bold text</b><br>

<i>Italic text</i><br>

<u>Underlined text</u><br>

<strong>Strong text</strong><br>

<em>Emphasized text</em><br>

Text with <sub>subscript</sub> and <sup>superscript</sup>

</p>

</body>

</html>
p2

<!DOCTYPE html>

<html>

<head>

<title>Timetable</title>

<style>

table { width:100%; border-collapse:collapse; font-family:Arial; }

th, td { border:1px solid #ddd; padding:8px; text-align:center; }

th { background:#f2f2f2; }

.lab { background:#ffcccb; }

.elective { background:#90ee90; }

.lunch {background:#ffd700; }

.odd { background:#f8f8f8; }

</style>

</head>

<body>

<table>

<tr><th colspan="7">Class Time Table</th></tr>

<tr>

<th>Time</th><th>Mon</th><th>Tue</th><th>Wed</th>

<th>Thu</th><th>Fri</th><th>Sat</th>

</tr>

<tr>

<td>9-10</td><td>Math</td><td>English</td><td>Science</td>

<td>History</td><td>Geography</td><td rowspan="6">No Classes</td>

</tr>

<tr class="odd">
<td>10-11</td><td>Physics</td><td>Chemistry</td><td>Biology</td>

<td class="elective">CS</td><td class="elective">Art</td>

</tr>

<tr>

<td>11-12</td>

<td class="lab" colspan="2">Physics Lab</td>

<td class="lab" colspan="2">Chem Lab</td>

<td class="lab">Bio Lab</td>

</tr>

<tr class="odd">

<td>12-1</td><td class="lunch" colspan="5">Lunch Break</td>

</tr>

<tr>

<td>1-2</td><td>Literature</td><td>Math</td><td>English</td>

<td>Physics</td><td>Chemistry</td>

</tr>

<tr class="odd">

<td>2-3</td><td class="elective">Music</td><td class="elective">Drama</td>

<td class="lab" colspan="3">Computer Lab</td>

</tr>

<tr>

<td colspan="7">* Pink = Lab, Green = Elective</td>

</tr>

</table>

</body>

</html>
p3

html

--

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sample Styled Page (No Div)</title>

<link rel="stylesheet" href="[Link]">

</head>

<body>

<main id="main-content">

<h2>Welcome to Our Styled Page</h2>

<p>This is a paragraph right after an h2. It demonstrates the adjacent

sibling selector.</p>

<h3>Hover over me!</h3>

<hr>

<p lang="en">This paragraph has a lang attribute, demonstrating the

attribute selector.</p>

<p>Here's a <span class="highlight">highlighted</span> word using the

class selector.</p>

<section>

<p>This paragraph is inside a section, showing the descendant

selector.</p>

<span>This span is a direct child of the section.</span>

</section>
<p>The current date and time: <time datetime="2025-11-30">November 30,

2025</time></p>

<p>Notice how the first letter of each paragraph is styled differently.</p>

<article class="special">

<p>This paragraph is inside an article with class="special".</p>

</article>

<img

src="[Link]
av1p1/6z473u5f7WaFUnr9GxDEk2/085274c4a841bd2dc900ebca36c43c9c/GettyImages-
[Link]?w=1500&h=680&q=60&fit=fill&f=faces&fm=jpg&fl=progressive&auto=format%2Ccompress
&dpr=1&w=1000" alt="A placeholder image">

<p>Check out this <a href="[Link] to see

different link states.</p>

</main>

</body>

</html>

[Link]

--------

/* Adjacent sibling: paragraph after h2 */

h2 + p {

color: blue;

font-weight: bold;

/* Hover effect for h3 */

h3:hover {

color: red;

cursor: pointer;

}
/* Attribute selector */

p[lang="en"] {

background-color: #f0f0f0;

/* Class selector */

.highlight {

background: yellow;

padding: 2px 4px;

/* Descendant selector */

section p {

color: green;

/* Direct child selector */

section > span {

font-style: italic;

/* First letter of all paragraphs */

p::first-letter {

font-size: 24px;

color: brown;

/* Article with class "special" */

[Link] p {

border-left: 4px solid orange;

padding-left: 10px;

/* Time tag styling */

time {
font-weight: bold;

color: purple;

}
p4

<!DOCTYPE html>

<html>

<head>

<title>Registration Form</title>

<style>

body { font-family: Arial; padding: 20px; }

table { width: 400px; margin: auto; }

td { padding: 8px; }

input, select, textarea { width: 100%; padding: 6px; }

input[type="radio"], input[type="checkbox"] { width: auto; }

input[type="submit"] { background: green; color: #fff; padding: 8px 15px; }

</style>

</head>

<body>

<h2 style="text-align:center;">Registration Form</h2>

<form>

<table>

<tr>

<td>Full Name</td>

<td><input type="text" required></td>

</tr>

<tr>

<td>Email</td>

<td><input type="email" required></td>

</tr>

<tr>

<td>Password</td>
<td><input type="password" required></td>

</tr>

<tr>

<td>Gender</td>

<td>

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

<input type="radio" name="g"> Female

</td>

</tr>

<tr>

<td>Country</td>

<td>

<select>

<option>Select</option>

<option>India</option>

<option>UK</option>

<option>Canada</option>

</select>

</td>

</tr>

<tr>

<td>Interests</td>

<td>

<input type="checkbox"> Sports

<input type="checkbox"> Music

</td>

</tr>

<tr>

<td>Bio</td>
<td><textarea rows="3"></textarea></td>

</tr>

<tr>

<td colspan="2" style="text-align:center;">

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

</td>

</tr>

</table>

</form>

</body>

</html>
p5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The Daily Chronicle - Simple</title>

<style>

body {

font-family: Arial, sans-serif;

max-width: 800px;

margin: 20px auto;

padding: 0;

background-color: #f0f0f0;

header {

background-color: #333;

color: #fff;

padding: 10px;

text-align: center;

nav {

background-color: #555;

padding: 5px;

nav ul {

list-style-type: none;

padding: 0;
margin: 0;

display: flex;

justify-content: space-around;

nav a {

color: #fff;

text-decoration: none;

main {

display: flex;

margin-top: 10px;

gap: 10px; /* Space between main sections */

section {

flex: 2;

/* Main content area is larger */

article {

background-color: #fff;

padding: 15px;

margin-bottom: 10px;

border: 1px solid #ccc;

aside {

flex: 1;

/* Sidebar is smaller */

background-color: #ddd;

padding: 15px;

}
footer {

background-color: #333;

color: #fff;

text-align: center;

padding: 10px;

margin-top: 10px;

/* Table simplification */

table {

width: 100%;

border-collapse: collapse;

th, td {

border: 1px solid #999;

padding: 8px;

</style>

</head>

<body>

<header>

<h1>The Daily Chronicle</h1>

</header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Tech</a></li>

<li><a href="#">Sports</a></li>

</ul>

</nav>
<main>

<section>

<article>

<h2>Tech Breakthrough</h2>

<p>A major discovery in quantum computing is set to change the industry...</p>

</article>

<article>

<h2>Local Team Wins</h2>

<p>Our local heroes secured victory in the championship.</p>

<table>

<tr>

<th>Team</th>

<th>Score</th>

</tr>

<tr>

<td>Local Heroes</td>

<td>3</td>

</tr>

<tr>

<td>Challengers</td>

<td>2</td>

</tr>

</table>

</article>

</section>

<aside>

<h3>Updates</h3>

<p>Weather: Sunny, 75°F.</p>

<ul>
<li>City Festival - Weekend</li>

<li>Tech Conference - Next Month</li>

</ul>

</aside>

</main>

<footer>

<p>&copy; 2023 The Daily Chronicle.</p>

</footer>

</body>

</html>
a5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Newspaper Layout</title>

<style>

body { font-family: Arial, sans-serif; margin: 0; }

header { background: #333; color: white; padding: 15px; text-align: center; }

nav { background: #444; color: #fff; padding: 10px; }

section { background: #f0f0f0; padding: 20px; }

article { background: #ffffff; margin: 10px 0; padding: 15px; border-left: 5px solid #0088cc; }

aside { background: #ffeccc; padding: 15px; margin: 10px 0; }

figure { background: #d6ecff; padding: 10px; width: 250px; }

figure img { width: 100%; }

figcaption { text-align: center; font-size: 14px; }

table { width: 100%; border-collapse: collapse; background: #fff; }

table, th, td { border: 1px solid #ccc; }

th { background: #ffcc99; padding: 8px; }

td { padding: 8px; }
footer { background: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }

</style>

</head>

<body>

<header>

<h1>Daily Times Newspaper</h1>

</header>

<nav>

Home | World | Politics | Sports | Entertainment

</nav>

<section>

<h2>Top Stories</h2>

<article>

<h3>Global News Headline</h3>

<p>

A short description of the news article goes here. This is an example of an article section.

</p>

</article>

<aside>

<h4>Breaking Update</h4>

<p>Latest quick news highlight or advertisement section.</p>

</aside>
<figure>

<img src="[Link] alt="News Image">

<figcaption>Sample Image Caption</figcaption>

</figure>

<h3>Statistics Table</h3>

<table>

<tr>

<th>Category</th>

<th>Value</th>

</tr>

<tr>

<td>Readers Today</td>

<td>1200</td>

</tr>

<tr>

<td>Articles</td>

<td>45</td>

</tr>

</table>

</section>

<footer>

© 2025 Daily Times. All Rights Reserved.

</footer>

</body>

</html>
p6

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

.calculator {

background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

padding: 20px;

width: 300px;

#display {

width: 100%;

height: 40px;

font-size: 1.5em;
text-align: right;

margin-bottom: 10px;

padding: 5px;

box-sizing: border-box;

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

button {

padding: 10px;

font-size: 1.2em;

border: none;

background-color: #e0e0e0;

cursor: pointer;

border-radius: 4px;

button:hover {

background-color: #d0d0d0;

.operator {

background-color: #f0a030;

color: white;

.operator:hover {

background-color: #e09020;

</style>
</head>

<body>

<div class="calculator">

<input type="text" id="display" readonly>

<div class="buttons">

<button onclick="appendToDisplay('7')">7</button>

<button onclick="appendToDisplay('8')">8</button>

<button onclick="appendToDisplay('9')">9</button>

<button class="operator"

onclick="setOperation('+')">&plus;</button>

<button onclick="appendToDisplay('4')">4</button>

<button onclick="appendToDisplay('5')">5</button>

<button onclick="appendToDisplay('6')">6</button>

<button class="operator" onclick="setOperation('-')">&minus;</button>

<button onclick="appendToDisplay('1')">1</button>

<button onclick="appendToDisplay('2')">2</button>

<button onclick="appendToDisplay('3')">3</button>

<button class="operator"

onclick="setOperation('*')">&times;</button>

<button onclick="appendToDisplay('0')">0</button>

<button onclick="appendToDisplay('.')">.</button>

<button class="operator" onclick="calculate()">&equals;</button>

<button class="operator"

onclick="setOperation('/')">&divide;</button>

<button class="operator" onclick="setOperation('%')">%</button>

<button class="operator"

onclick="setOperation('^')">x<sup>y</sup></button>

<button class="operator" onclick="squareRoot()">√</button>

<button class="operator"
onclick="square()">x<sup>2</sup></button>

<button onclick="clearDisplay()">C</button>

</div>

</div>

<script>

let display = [Link]('display');

let currentValue = '';

let operation = '';

let previousValue = '';

function appendToDisplay(value) {

currentValue += value;

[Link] = currentValue;

function clearDisplay() {

currentValue = '';

operation = '';

previousValue = '';

[Link] = '';

function setOperation(op) {

if (currentValue !== '') {

if (previousValue !== '') {

calculate();

operation = op;

previousValue = currentValue;

currentValue = '';

}
function calculate() {

if (previousValue !== '' && currentValue !== '') {

let result;

const prev = parseFloat(previousValue);

const current = parseFloat(currentValue);

switch(operation) {

case '+':

result = prev + current;

break;

case '-':

result = prev - current;

break;

case '*':

result = prev * current;

break;

case '/':

result = prev / current;

break;

case '%':

result = prev % current;

break;

case '^':

result = [Link](prev, current);

break;

[Link] = result;

previousValue = [Link]();

currentValue = '';

operation = '';
}

function squareRoot() {

if (currentValue !== '') {

const result = [Link](parseFloat(currentValue));

[Link] = result;

currentValue = [Link]();

function square() {

if (currentValue !== '') {

const result = [Link](parseFloat(currentValue), 2);

[Link] = result;

currentValue = [Link]();

</script>

</body>

</html>
p7

<!DOCTYPE html>

<html>

<head>

<title>JSON and Hash Converter</title>

</head>

<body style="font-family:Arial; padding:20px">

<h3>a) Convert JSON text to JavaScript Object</h3>

<textarea id="jsonText" rows="3" cols="50">{ "name":"John", "age":25 }</textarea><br>

<button onclick="toObject()">Convert</button>

<p id="objOut"></p>

<h3>b) Convert JSON date to JavaScript Date</h3>

<textarea id="jsonDate" rows="2" cols="50">{ "date": "2025-10-22T10:00:00Z" }</textarea><br>

<button onclick="toDate()">Convert</button>

<p id="dateOut"></p>

<h3>c) Convert JSON ↔ CSV</h3>

<textarea id="jsonCsv" rows="3"


cols="50">[{"name":"John","age":25},{"name":"Sara","age":28}]</textarea><br>

<button onclick="jsonToCsv()">JSON → CSV</button>

<button onclick="csvToJson()">CSV → JSON</button>

<p id="csvOut"></p>

<h3>d) Create hash from string (SHA-256)</h3>

<input id="hashText" placeholder="Enter text" size="40">

<button onclick="makeHash()">Create Hash</button>

<p id="hashOut"></p>

<script>

// a) JSON → JS Object

function toObject() {

try {
let obj = [Link]([Link]("jsonText").value);

[Link]("objOut").innerText = "Name: " + [Link] + ", Age: " + [Link];

} catch { [Link]("objOut").innerText = "Invalid JSON!"; }

// b) JSON date → JS Date

function toDate() {

let d = [Link]([Link]("jsonDate").value);

[Link]("dateOut").innerText = new Date([Link]);

// c) JSON → CSV

function jsonToCsv() {

let arr = [Link]([Link]("jsonCsv").value);

let keys = [Link](arr[0]);

let csv = [Link](",") + "\n" + [Link](a => [Link](a).join(",")).join("\n");

[Link]("csvOut").innerText = csv;

// c) CSV → JSON

function csvToJson() {

let lines = [Link]("jsonCsv").[Link]().split("\n");

let keys = lines[0].split(",");

let json = [Link](1).map(line => {

let values = [Link](",");

let obj = {};

[Link]((k, i) => obj[k] = values[i]);

return obj;

});

[Link]("csvOut").innerText = [Link](json);

// d) Create Hash
async function makeHash() {

let text = [Link]("hashText").value;

let data = new TextEncoder().encode(text);

let hash = await [Link]("SHA-256", data);

let hex = [Link](new Uint8Array(hash)).map(b => [Link](16).padStart(2, "0")).join("");

[Link]("hashOut").innerText = hex;

</script>

</body>

</html>

You might also like